Checkbox component

src/core/CheckBox/CheckBox.stories.tsx

@@ -0,0 +1,39 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemedBackground } from '../../utils/storybook';
+import { CheckBox } from '../CheckBox';
+
+storiesOf('CheckBox', module)
+  // Litmus Portal
+  .add('Litmus Portal', () => (
+    <ThemedBackground platform="litmus-portal" row>
+      <CheckBox checked={true} disabled={true} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Chaos
+  .add('Kubera Chaos', () => (
+    <ThemedBackground platform="kubera-chaos" row>
+      <CheckBox checked={true} disabled={false} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Propel
+  .add('Kubera Propel', () => (
+    <ThemedBackground platform="kubera-propel" row>
+      <CheckBox checked={false} disabled={false} />
+    </ThemedBackground>
+  ))
+  // Kubera Portal
+  .add('Kubera Portal', () => (
+    <ThemedBackground platform="kubera-portal" row>
+      <CheckBox checked={false} disabled={false} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Core
+  .add('Kubera Core', () => (
+    <ThemedBackground platform="kubera-core" row>
+      <CheckBox checked={false} disabled={false} />
+    </ThemedBackground>
+  ));

src/core/CheckBox/CheckBox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from '@material-ui/core';
+import React, { useState } from 'react';
+import CheckOutlinedIcon from '@material-ui/icons/CheckOutlined';
+import { useStyles } from './styles';
+import { CheckboxProps } from '@material-ui/core/Checkbox';
+
+const CheckBox: React.FC<CheckboxProps> = ({ disabled, checked }) => {
+  const classes = useStyles();
+  const [check, setChecked] = useState<boolean | undefined>(checked);
+  return (
+    <Checkbox
+      data-testid="checkbox"
+      className={classes.root}
+      checkedIcon={<CheckOutlinedIcon />}
+      disabled={disabled}
+      checked={check}
+      onChange={() => setChecked(!check)}
+      inputProps={{ 'aria-label': 'decorative checkbox' }}
+    />
+  );
+};
+export { CheckBox };

src/core/CheckBox/__tests__/CheckBox.test.tsx

@@ -0,0 +1,22 @@
+import { render, cleanup } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../theme';
+import { CheckBox } from '../CheckBox';
+
+afterEach(cleanup);
+jest.useFakeTimers();
+
+describe('CheckBox', () => {
+  it('Renders', () => {
+    const { getByTestId } = render(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <CheckBox checked={false} disabled={false} />
+      </KuberaThemeProvider>
+    );
+    const checkbox = getByTestId('checkbox').querySelector(
+      'input[type="checkbox"]'
+    );
+    expect(checkbox).toHaveProperty('checked', false);
+    expect(checkbox).toHaveProperty('disabled', false);
+  });
+});

src/core/CheckBox/index.ts

@@ -0,0 +1 @@
+export * from './CheckBox';

src/core/CheckBox/styles.ts

@@ -0,0 +1,41 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    width: '1.5rem',
+    height: '1.5rem',
+    '& svg': {
+      display: 'none',
+    },
+  },
+  '@global': {
+    '.MuiCheckbox-root': {
+      borderRadius: '0.1875rem',
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+      borderWidth: '0.03125rem',
+      borderStyle: 'solid',
+      borderColor: theme.palette.border.main,
+      '&:hover': {
+        borderColor: theme.palette.secondary.main,
+      },
+      '&:disabled': {
+        borderColor: theme.palette.disabledBackground,
+      },
+    },
+    '.Mui-checked': {
+      borderColor: theme.palette.secondary.main,
+      '& svg': {
+        display: 'block',
+      },
+    },
+    '.Mui-disabled': {
+      borderColor: theme.palette.text.disabled,
+    },
+  },
+}));
+
+export { useStyles };

src/core/index.ts

@@ -1,4 +1,5 @@
 export * from './Button';
+export * from './CheckBox';
 export * from './ProgressBar';
 export * from './Text';
 export * from './Pills';