Checkbox component

package.json

@@ -52,6 +52,7 @@
   "types": "index.d.ts",
   "dependencies": {
     "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },

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,28 @@
+import { Checkbox } from '@material-ui/core';
+import React, { useState } from 'react';
+// import clsx from 'clsx';
+import CheckOutlinedIcon from '@material-ui/icons/CheckOutlined';
+import { useStyles } from './styles';
+import { BaseCheckboxProps } from './base';
+
+interface CheckBoxProps extends BaseCheckboxProps {
+  checked: boolean;
+}
+
+const CheckBox: React.FC<CheckBoxProps> = ({ disabled, checked }) => {
+  const classes = useStyles();
+  const [check, setChecked] = useState<boolean>(checked);
+  return (
+    <Checkbox
+      data-testid="checkbox"
+      className={classes.root}
+      checkedIcon={<CheckOutlinedIcon />}
+      disabled={disabled}
+      checked={check}
+      icon={<span></span>}
+      onChange={() => setChecked(!check)}
+      inputProps={{ 'aria-label': 'decorative checkbox' }}
+    />
+  );
+};
+export { CheckBox };

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

@@ -0,0 +1,17 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../theme';
+import { CheckBox } from '../CheckBox';
+
+describe('CheckBox', () => {
+  it('Renders', () => {
+    const { getByTestId } = render(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <CheckBox checked={false} disabled={false} />
+      </KuberaThemeProvider>
+    );
+    let checkbox = getByTestId('checkbox') as HTMLInputElement;
+    fireEvent.click(checkbox);
+    expect(checkbox.checked).toBeFalsy();
+  });
+});

src/core/CheckBox/base.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from '@material-ui/core/Checkbox';
+
+export type BaseCheckboxProps = Omit<CheckboxProps, 'checked'>;

src/core/CheckBox/index.ts

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

src/core/CheckBox/styles.ts

@@ -0,0 +1,37 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '& svg': {
+      width: '1.5rem',
+      height: '1.5rem',
+    },
+  },
+  '@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,
+    },
+    '.Mui-disabled': {
+      borderColor: theme.palette.text.disabled,
+    },
+  },
+}));
+
+export { useStyles };

src/core/index.ts

@@ -1,2 +1,3 @@
 export * from './Button';
+export * from './CheckBox';
 export * from './Pills';