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,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/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,35 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    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';

yarn.lock

@@ -1823,6 +1823,13 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"