From f8206c9e7cee34ee5f8d41f31dbaa4317203ccc3 Mon Sep 17 00:00:00 2001 From: Hasmik8 Date: Tue, 20 Oct 2020 17:51:50 +0400 Subject: [PATCH 1/5] checkbox-component --- .../CheckBox/CheckBox/CheckBox.stories.tsx | 39 ++++++++++++ src/core/CheckBox/CheckBox/CheckBox.tsx | 28 +++++++++ .../CheckBox/__tests__/CheckBox.test.tsx | 15 +++++ src/core/CheckBox/CheckBox/index.ts | 1 + src/core/CheckBox/CheckBox/styles.ts | 63 +++++++++++++++++++ src/core/CheckBox/base.ts | 3 + src/core/CheckBox/index.ts | 1 + src/core/index.ts | 1 + 8 files changed, 151 insertions(+) create mode 100644 src/core/CheckBox/CheckBox/CheckBox.stories.tsx create mode 100644 src/core/CheckBox/CheckBox/CheckBox.tsx create mode 100644 src/core/CheckBox/CheckBox/__tests__/CheckBox.test.tsx create mode 100644 src/core/CheckBox/CheckBox/index.ts create mode 100644 src/core/CheckBox/CheckBox/styles.ts create mode 100644 src/core/CheckBox/base.ts create mode 100644 src/core/CheckBox/index.ts diff --git a/src/core/CheckBox/CheckBox/CheckBox.stories.tsx b/src/core/CheckBox/CheckBox/CheckBox.stories.tsx new file mode 100644 index 0000000..52b58f4 --- /dev/null +++ b/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', () => ( + + + + )) + + // 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/CheckBox.tsx b/src/core/CheckBox/CheckBox/CheckBox.tsx new file mode 100644 index 0000000..1efe9d4 --- /dev/null +++ b/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 = ({ disabled, checked }) => { + const classes = useStyles(); + const [check, setChecked] = useState(checked); + const iconClass = check ? classes.checkedIcon : classes.icon; + return ( + } + disabled={disabled} + checked={check} + onChange={() => setChecked(!check)} + icon={} + inputProps={{ 'aria-label': 'decorative checkbox' }} + /> + ); +}; +export { CheckBox }; diff --git a/src/core/CheckBox/CheckBox/__tests__/CheckBox.test.tsx b/src/core/CheckBox/CheckBox/__tests__/CheckBox.test.tsx new file mode 100644 index 0000000..b80669f --- /dev/null +++ b/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( + + + + ); + container.querySelector('input'); + }); +}); diff --git a/src/core/CheckBox/CheckBox/index.ts b/src/core/CheckBox/CheckBox/index.ts new file mode 100644 index 0000000..5e96750 --- /dev/null +++ b/src/core/CheckBox/CheckBox/index.ts @@ -0,0 +1 @@ +export * from './CheckBox'; diff --git a/src/core/CheckBox/CheckBox/styles.ts b/src/core/CheckBox/CheckBox/styles.ts new file mode 100644 index 0000000..8770343 --- /dev/null +++ b/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 }; diff --git a/src/core/CheckBox/base.ts b/src/core/CheckBox/base.ts new file mode 100644 index 0000000..5cc7720 --- /dev/null +++ b/src/core/CheckBox/base.ts @@ -0,0 +1,3 @@ +import { CheckboxProps } from '@material-ui/core/Checkbox'; + +export type BaseCheckboxProps = Omit; 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/index.ts b/src/core/index.ts index 8b166a8..709414d 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1 +1,2 @@ export * from './Button'; +export * from './CheckBox'; From 456721038fdf9de09dd0c0d4688632470dbd8bd0 Mon Sep 17 00:00:00 2001 From: Hasmik8 Date: Fri, 23 Oct 2020 18:21:52 +0400 Subject: [PATCH 2/5] create test checkbox Signed-off-by: Hasmik8 --- src/core/CheckBox/__tests__/CheckBox.test.tsx | 15 +++++++++++---- src/core/CheckBox/styles.ts | 6 ++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/core/CheckBox/__tests__/CheckBox.test.tsx b/src/core/CheckBox/__tests__/CheckBox.test.tsx index 08e7636..61ba648 100644 --- a/src/core/CheckBox/__tests__/CheckBox.test.tsx +++ b/src/core/CheckBox/__tests__/CheckBox.test.tsx @@ -1,8 +1,13 @@ -import { render, fireEvent } from '@testing-library/react'; +import { render, cleanup } from '@testing-library/react'; import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import '@testing-library/jest-dom'; import { KuberaThemeProvider } from '../../../theme'; import { CheckBox } from '../CheckBox'; +afterEach(cleanup); +jest.useFakeTimers(); + describe('CheckBox', () => { it('Renders', () => { const { getByTestId } = render( @@ -10,8 +15,10 @@ describe('CheckBox', () => { ); - let checkbox = getByTestId('checkbox') as HTMLInputElement; - fireEvent.click(checkbox); - expect(checkbox.checked).toBeFalsy(); + const checkbox = getByTestId('checkbox').querySelector( + 'input[type="checkbox"]' + ); + expect(checkbox).toHaveProperty('checked', false); + expect(checkbox).toHaveProperty('disabled', false); }); }); diff --git a/src/core/CheckBox/styles.ts b/src/core/CheckBox/styles.ts index 8c4628e..757fd47 100644 --- a/src/core/CheckBox/styles.ts +++ b/src/core/CheckBox/styles.ts @@ -5,10 +5,8 @@ const useStyles = makeStyles((theme: Theme) => ({ '&:hover': { backgroundColor: 'transparent', }, - '& svg': { - width: '1.5rem', - height: '1.5rem', - }, + width: '1.5rem', + height: '1.5rem', }, '@global': { '.MuiCheckbox-root': { From 2d13d600a0c09f10db76c70c63ab9e2d8a6d9e9c Mon Sep 17 00:00:00 2001 From: Hasmik8 Date: Mon, 26 Oct 2020 18:37:56 +0400 Subject: [PATCH 3/5] fix error test Signed-off-by: Hasmik8 --- src/core/CheckBox/__tests__/CheckBox.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/core/CheckBox/__tests__/CheckBox.test.tsx b/src/core/CheckBox/__tests__/CheckBox.test.tsx index 61ba648..b2dda78 100644 --- a/src/core/CheckBox/__tests__/CheckBox.test.tsx +++ b/src/core/CheckBox/__tests__/CheckBox.test.tsx @@ -1,7 +1,5 @@ import { render, cleanup } from '@testing-library/react'; import React from 'react'; -import '@testing-library/jest-dom/extend-expect'; -import '@testing-library/jest-dom'; import { KuberaThemeProvider } from '../../../theme'; import { CheckBox } from '../CheckBox'; From 95fe63f98bda5a80de045490de2544192281d548 Mon Sep 17 00:00:00 2001 From: Hasmik8 Date: Mon, 26 Oct 2020 18:44:18 +0400 Subject: [PATCH 4/5] fix Signed-off-by: Hasmik8 --- yarn.lock | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/yarn.lock b/yarn.lock index f838ea1..82e2435 100644 --- a/yarn.lock +++ b/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" From bb6f381d92bca3f7260282a7d447ba3510f87841 Mon Sep 17 00:00:00 2001 From: Hasmik8 Date: Thu, 29 Oct 2020 11:07:15 +0400 Subject: [PATCH 5/5] remove icon Signed-off-by: Hasmik8 --- src/core/CheckBox/CheckBox.tsx | 1 - src/core/CheckBox/styles.ts | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/core/CheckBox/CheckBox.tsx b/src/core/CheckBox/CheckBox.tsx index 7e1b1df..3b17913 100644 --- a/src/core/CheckBox/CheckBox.tsx +++ b/src/core/CheckBox/CheckBox.tsx @@ -14,7 +14,6 @@ const CheckBox: React.FC = ({ disabled, checked }) => { checkedIcon={} disabled={disabled} checked={check} - icon={} onChange={() => setChecked(!check)} inputProps={{ 'aria-label': 'decorative checkbox' }} /> diff --git a/src/core/CheckBox/styles.ts b/src/core/CheckBox/styles.ts index 757fd47..dd22dfb 100644 --- a/src/core/CheckBox/styles.ts +++ b/src/core/CheckBox/styles.ts @@ -7,6 +7,9 @@ const useStyles = makeStyles((theme: Theme) => ({ }, width: '1.5rem', height: '1.5rem', + '& svg': { + display: 'none', + }, }, '@global': { '.MuiCheckbox-root': { @@ -25,6 +28,9 @@ const useStyles = makeStyles((theme: Theme) => ({ }, '.Mui-checked': { borderColor: theme.palette.secondary.main, + '& svg': { + display: 'block', + }, }, '.Mui-disabled': { borderColor: theme.palette.text.disabled,