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/CheckBox.stories.tsx → src/core/CheckBox/CheckBox.stories.tsx

@@ -1,13 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { ThemedBackground } from '../../../utils/storybook';
+import { ThemedBackground } from '../../utils/storybook';
 import { CheckBox } from '../CheckBox';
 
-storiesOf('CheckBox/CheckBox default', module)
+storiesOf('CheckBox', module)
   // Litmus Portal
   .add('Litmus Portal', () => (
     <ThemedBackground platform="litmus-portal" row>
-      <CheckBox checked={true} disabled={false} />
+      <CheckBox checked={true} disabled={true} />
     </ThemedBackground>
   ))
 

src/core/CheckBox/CheckBox/CheckBox.tsx → src/core/CheckBox/CheckBox.tsx

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

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

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';