Checkbox component

src/core/CheckBox/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/CheckBox default', module)
+  // Litmus Portal
+  .add('Litmus Portal', () => (
+    <ThemedBackground platform="litmus-portal" row>
+      <CheckBox checked={true} disabled={false} />
+    </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/CheckBox.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from '@material-ui/core';
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { useStyles } from './styles';
+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
+      className={classes.root}
+      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
+      disabled={disabled}
+      checked={check}
+      onChange={() => setChecked(!check)}
+      icon={<span className={iconClass} />}
+      inputProps={{ 'aria-label': 'decorative checkbox' }}
+    />
+  );
+};
+export { CheckBox };

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

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../../theme';
+import { CheckBox } from '../CheckBox';
+
+describe('CheckBox', () => {
+  it('Renders', () => {
+    const { container } = render(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <CheckBox checked={false} disabled={false} />
+      </KuberaThemeProvider>
+    );
+    container.querySelector('input');
+  });
+});

src/core/CheckBox/CheckBox/index.ts

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

src/core/CheckBox/CheckBox/styles.ts

@@ -0,0 +1,63 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '& span': {
+      borderRadius: '0.1875rem',
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+    },
+  },
+  icon: {
+    width: '1.5rem',
+    height: '1.5rem',
+    borderWidth: '0.03125rem',
+    borderStyle: 'solid',
+    borderColor: theme.palette.border.main,
+    'input:hover ~ &': {
+      borderColor: theme.palette.secondary.main,
+    },
+    'input:disabled ~ &': {
+      borderColor: theme.palette.disabledBackground,
+    },
+  },
+  checkedIcon: {
+    width: '1.5rem',
+    height: '1.5rem',
+    borderWidth: '0.03125rem',
+    borderStyle: 'solid',
+    borderColor: theme.palette.secondary.main,
+    'input:disabled ~ &': {
+      borderColor: theme.palette.disabledBackground,
+      '&:before': {
+        display: 'block',
+        width: '1.375rem',
+        height: '1.375rem',
+        backgroundImage:
+          "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+          " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+          "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23" +
+          theme.palette.disabledBackground.split('#')[1] +
+          '\'/%3E%3C/svg%3E")',
+        content: '""',
+      },
+    },
+    '&:before': {
+      display: 'block',
+      width: '1.375rem',
+      height: '1.375rem',
+      backgroundImage:
+        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+        " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+        "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23" +
+        theme.palette.secondary.main.split('#')[1] +
+        '\'/%3E%3C/svg%3E")',
+      content: '""',
+    },
+  },
+}));
+
+export { useStyles };

src/core/CheckBox/base.ts

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

src/core/CheckBox/index.ts

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

src/core/index.ts

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