diff --git a/src/core/CheckBox/CheckBox.stories.tsx b/src/core/CheckBox/CheckBox.stories.tsx new file mode 100644 index 0000000..07c691a --- /dev/null +++ b/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', () => ( + + + + )) + + // Kubera Chaos + .add('Kubera Chaos', () => ( + + + + )) + + // Kubera Propel + .add('Kubera Propel', () => ( + + + + )) + // Kubera Portal + .add('Kubera Portal', () => ( + + + + )) + + // Kubera Core + .add('Kubera Core', () => ( + + + + )); diff --git a/src/core/CheckBox/CheckBox.tsx b/src/core/CheckBox/CheckBox.tsx new file mode 100644 index 0000000..3b17913 --- /dev/null +++ b/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 = ({ disabled, checked }) => { + const classes = useStyles(); + const [check, setChecked] = useState(checked); + return ( + } + disabled={disabled} + checked={check} + onChange={() => setChecked(!check)} + inputProps={{ 'aria-label': 'decorative checkbox' }} + /> + ); +}; +export { CheckBox }; diff --git a/src/core/CheckBox/__tests__/CheckBox.test.tsx b/src/core/CheckBox/__tests__/CheckBox.test.tsx new file mode 100644 index 0000000..b2dda78 --- /dev/null +++ b/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( + + + + ); + const checkbox = getByTestId('checkbox').querySelector( + 'input[type="checkbox"]' + ); + expect(checkbox).toHaveProperty('checked', false); + expect(checkbox).toHaveProperty('disabled', false); + }); +}); diff --git a/src/core/CheckBox/index.ts b/src/core/CheckBox/index.ts new file mode 100644 index 0000000..5e96750 --- /dev/null +++ b/src/core/CheckBox/index.ts @@ -0,0 +1 @@ +export * from './CheckBox'; diff --git a/src/core/CheckBox/styles.ts b/src/core/CheckBox/styles.ts new file mode 100644 index 0000000..dd22dfb --- /dev/null +++ b/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 }; diff --git a/src/core/index.ts b/src/core/index.ts index d943e9f..7e27916 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1,4 +1,5 @@ export * from './Button'; +export * from './CheckBox'; export * from './ProgressBar'; export * from './Text'; export * from './Pills';