From ba750183447871823fb6372a6ac78c7ba4343d1b Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Tue, 11 Oct 2022 18:49:26 +0300 Subject: [PATCH 01/10] feat: added new ui component checkbox --- src/components/Checkbox/Checkbox.stories.tsx | 9 ++++ src/components/Checkbox/Checkbox.tsx | 46 +++++++++++++++++--- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index c690686..f92d6c9 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -25,9 +25,18 @@ const Template: Story> = (props: any) => ( ); export const Basic = Template.bind({}); +export const Disabled = Template.bind({}); + Basic.args = { name: 'chkbox1', label: 'Checkbox label', variant: 'basic', }; +Disabled.args = { + name: 'chkbox2', + label: 'Checkbox label', + variant: 'basic', + disabled: false, +}; + diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index e46aacc..3c4cad6 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -4,6 +4,7 @@ import { Flex } from '../Flex'; import { getMargin, visuallyHidden } from '../../theme/utils'; import { Icon } from '../Icon'; import { polyIcons } from '../../theme'; +import { width } from 'styled-system'; export type CheckboxVariant = 'basic'; @@ -13,6 +14,7 @@ export type CheckboxProps = { onChange?: ChangeEventHandler; defaultChecked?: boolean; checked?: boolean; + disabled?: boolean; name?: string; label?: React.ComponentType | JSX.Element | string; indeterminate?: boolean; @@ -45,26 +47,53 @@ const MinusBoxIcon = styled(Icon)(() => ({ margin: 'auto', transition: `150ms`, })); - -const CheckboxInput = styled.div(({ theme }) => ({ +// const LabelComponent = styled.label<{ variant: string; margin?: string }>( +// ({ theme, variant, margin }) => ({ +// ...(theme.CHECKBOX[variant] || {}), +// ...(margin +// ? { +// display: 'inline-block', +// margin: getMargin({ theme, margin }), +// } +// : {}), +// }), +// ); +const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ position: 'relative', cursor: 'pointer', transition: `200ms`, boxSizing: 'border-box', - border: `2px solid ${theme.COLOR.gray3}`, + border: `2px solid ${disabled ? 'blue' : 'red'}`, borderRadius: theme.RADIUS.s, minWidth: '1.125rem', minHeight: '1.125rem', backgroundColor: '#fff', userSelect: 'none', - [`${Input}:focus + &`]: { - borderColor: theme.COLOR.brandMain, + border: `2px solid #5B9EF8`, + position: 'relative', + padding: '12px', + zIndex: '1', }, [`${Input}:checked:focus + &`]: { - borderColor: theme.COLOR.gray5, + border: `2px solid #5B9EF8`, + padding: '12px', }, + [`${Input}:checked:focus + ::before + &`]: { + backgroundColor: 'red', + content: ' ', + position: 'absolute', + zIndex: '-1', + top: '5px', + left: '5px', + right: '5px', + bottom: '5px', + border: '115px solid #ffea00' + }, + [`${Input}:checked:disabled + &`]: { + backgroundColor: 'red', +}, [`${Input}:checked + &`]: { backgroundColor: theme.COLOR.gray5, @@ -124,12 +153,13 @@ export const Checkbox = forwardRef( label, indeterminate, name, + disabled, ...props } = checkboxProps; const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked }; - + const isDisabled = true return ( @@ -142,6 +172,7 @@ export const Checkbox = forwardRef( type="checkbox" /> ( className="checkIcon" /> +
{typeof label === 'string' ? ( From 4f8f10bd3f23d0eb70fde27f8fce618843a08dda Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Wed, 12 Oct 2022 18:04:35 +0300 Subject: [PATCH 02/10] feat: added disabled state --- src/components/Checkbox/Checkbox.stories.tsx | 1 - src/components/Checkbox/Checkbox.tsx | 39 ++++++------------- .../icons/svg/checkbox-marked-gray-box.svg | 3 ++ 3 files changed, 15 insertions(+), 28 deletions(-) create mode 100644 src/theme/icons/svg/checkbox-marked-gray-box.svg diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index f92d6c9..2679bc0 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -37,6 +37,5 @@ Disabled.args = { name: 'chkbox2', label: 'Checkbox label', variant: 'basic', - disabled: false, }; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 3c4cad6..e88748a 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,5 +1,5 @@ import { ChangeEventHandler, forwardRef, Fragment } from 'react'; -import styled from 'styled-components'; +import styled, { ThemeConsumer } from 'styled-components'; import { Flex } from '../Flex'; import { getMargin, visuallyHidden } from '../../theme/utils'; import { Icon } from '../Icon'; @@ -47,23 +47,14 @@ const MinusBoxIcon = styled(Icon)(() => ({ margin: 'auto', transition: `150ms`, })); -// const LabelComponent = styled.label<{ variant: string; margin?: string }>( -// ({ theme, variant, margin }) => ({ -// ...(theme.CHECKBOX[variant] || {}), -// ...(margin -// ? { -// display: 'inline-block', -// margin: getMargin({ theme, margin }), -// } -// : {}), -// }), -// ); + const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ position: 'relative', cursor: 'pointer', transition: `200ms`, boxSizing: 'border-box', - border: `2px solid ${disabled ? 'blue' : 'red'}`, + border: '2px solid', + borderColor: disabled ? '#D6DDE8' : '#8C9BA5', borderRadius: theme.RADIUS.s, minWidth: '1.125rem', minHeight: '1.125rem', @@ -91,17 +82,10 @@ const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ( bottom: '5px', border: '115px solid #ffea00' }, - [`${Input}:checked:disabled + &`]: { - backgroundColor: 'red', -}, - [`${Input}:checked + &`]: { - backgroundColor: theme.COLOR.gray5, borderColor: theme.COLOR.brandMain, - }, + borderColor: theme.COLOR.gray2, - [`${Input}:disabled + &`]: { - borderColor: theme.COLOR.gray4, }, [`${Input}:checked + & .checkIcon`]: { @@ -116,12 +100,14 @@ const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ( visibility: 'visible', opacity: 1, background: theme.COLOR.light, + fill: 'yellow' }, '.checkIcon': { visibility: 'hidden', opacity: 0, background: theme.COLOR.light, + fill: 'yellow' }, }, })); @@ -157,9 +143,8 @@ export const Checkbox = forwardRef( ...props } = checkboxProps; - const checkedProps = - typeof checked !== 'undefined' ? { checked } : { defaultChecked }; - const isDisabled = true + const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked }; + // const isDisabled = typeof disabled !== 'undefined' ? true : false; return ( @@ -172,7 +157,7 @@ export const Checkbox = forwardRef( type="checkbox" /> ( -
{typeof label === 'string' ? ( diff --git a/src/theme/icons/svg/checkbox-marked-gray-box.svg b/src/theme/icons/svg/checkbox-marked-gray-box.svg new file mode 100644 index 0000000..7834216 --- /dev/null +++ b/src/theme/icons/svg/checkbox-marked-gray-box.svg @@ -0,0 +1,3 @@ + + + From a3199a710f4ae0d3b8afedea2822d17580fc3604 Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Thu, 13 Oct 2022 19:40:58 +0300 Subject: [PATCH 03/10] feat: added all disabled and gray values --- src/components/Checkbox/Checkbox.tsx | 62 ++++++++++++++++++++-------- src/theme/definitions/blue.ts | 1 + 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index e88748a..e8c1b56 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -5,6 +5,7 @@ import { getMargin, visuallyHidden } from '../../theme/utils'; import { Icon } from '../Icon'; import { polyIcons } from '../../theme'; import { width } from 'styled-system'; +import { relative } from 'path/win32'; export type CheckboxVariant = 'basic'; @@ -22,7 +23,7 @@ export type CheckboxProps = { const Input = styled.input(visuallyHidden); -const CheckStateIcon = styled(Icon)(() => ({ +const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ position: 'absolute', top: '50%', left: '50%', @@ -33,7 +34,15 @@ const CheckStateIcon = styled(Icon)(() => ({ pointerEvents: 'none', margin: 'auto', transition: `150ms`, -})); + 'svg > *': { + ...theme.ICON[variant]['svg > *'], + ...(theme.ICON[variant].fill + ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } + : {}), + }, + +} +)); const MinusBoxIcon = styled(Icon)(() => ({ position: 'absolute', @@ -63,28 +72,45 @@ const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ( [`${Input}:focus + &`]: { border: `2px solid #5B9EF8`, position: 'relative', - padding: '12px', + padding: disabled? '0px' : '12px', zIndex: '1', + '&:after': { + display:'block', + content: "''", + position: 'absolute', + top: '3px', + left: '3px', + zIndex: '2', + right: '3px', + bottom: '3px', + border: '2px solid #8C9BA5', + borderRadius: theme.RADIUS.s, + } }, [`${Input}:checked:focus + &`]: { + position: 'relative', border: `2px solid #5B9EF8`, - padding: '12px', - }, - [`${Input}:checked:focus + ::before + &`]: { - backgroundColor: 'red', - content: ' ', - position: 'absolute', - zIndex: '-1', - top: '5px', - left: '5px', - right: '5px', - bottom: '5px', - border: '115px solid #ffea00' + padding: disabled? '0px' : '12px', + '&:after': { + border: '0px solid #8C9BA5', + } }, + // [`${Input}:focus + &`]: { + // '&:after': { + // display:'block', + // content: "''", + // position: 'absolute', + // top: '3px', + // left: '3px', + // right: '3px', + // bottom: '3px', + // border: '2px solid #8C9BA5', + // } + // }, [`${Input}:checked + &`]: { borderColor: theme.COLOR.brandMain, - borderColor: theme.COLOR.gray2, + // borderColor: theme.COLOR.gray2, }, @@ -169,8 +195,8 @@ export const Checkbox = forwardRef( diff --git a/src/theme/definitions/blue.ts b/src/theme/definitions/blue.ts index 912b036..b989eab 100644 --- a/src/theme/definitions/blue.ts +++ b/src/theme/definitions/blue.ts @@ -47,6 +47,7 @@ export const COLOR = { gray5: '#EBF0F7', gray6: '#F8F9FC', gray7: '#F0F0F0', + gray8: '#D6DDE8', brandBg: '#FAFDFF', brandMain: '#1348E4', brandMain2: '#6DC7F7', From 053037a6cf9b8191e8fdffd35657667875b4079b Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Fri, 14 Oct 2022 18:47:05 +0300 Subject: [PATCH 04/10] feat: added ui kit checkboxes --- src/components/Checkbox/Checkbox.tsx | 60 ++++++++++++++-------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index e8c1b56..76c51ba 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -44,10 +44,10 @@ const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ } )); -const MinusBoxIcon = styled(Icon)(() => ({ +const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ position: 'absolute', - top: '71%', - left: '71%', + top: '73%', + left: '73%', transform: 'translate(-50%, -50%)', display: 'block', visibility: 'hidden', @@ -55,6 +55,13 @@ const MinusBoxIcon = styled(Icon)(() => ({ pointerEvents: 'none', margin: 'auto', transition: `150ms`, + 'svg > *': { + ...theme.ICON[variant]['svg > *'], + ...(theme.ICON[variant].fill + ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } + : {}), + }, + })); const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ @@ -75,16 +82,16 @@ const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ( padding: disabled? '0px' : '12px', zIndex: '1', '&:after': { - display:'block', - content: "''", - position: 'absolute', - top: '3px', - left: '3px', - zIndex: '2', - right: '3px', - bottom: '3px', - border: '2px solid #8C9BA5', - borderRadius: theme.RADIUS.s, + // display:'block', + // content: "''", + // position: 'absolute', + // top: '3px', + // left: '3px', + // zIndex: '2', + // right: '3px', + // bottom: '3px', + // border: '2px solid #8C9BA5', + // borderRadius: theme.RADIUS.s, } }, @@ -96,44 +103,34 @@ const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ( border: '0px solid #8C9BA5', } }, - // [`${Input}:focus + &`]: { - // '&:after': { - // display:'block', - // content: "''", - // position: 'absolute', - // top: '3px', - // left: '3px', - // right: '3px', - // bottom: '3px', - // border: '2px solid #8C9BA5', - // } - // }, [`${Input}:checked + &`]: { borderColor: theme.COLOR.brandMain, - // borderColor: theme.COLOR.gray2, - }, + [`${Input}:checked + & .checkIcon`]: { visibility: 'visible', opacity: 1, }, - + [`${Input}:focus + & .minusIcon`]: { + visibility: 'visible', + top: '60%', + left: '60%', + }, + + '&.indeterminate': { borderColor: theme.COLOR.brandMain, '.minusIcon': { visibility: 'visible', opacity: 1, - background: theme.COLOR.light, - fill: 'yellow' }, '.checkIcon': { visibility: 'hidden', opacity: 0, background: theme.COLOR.light, - fill: 'yellow' }, }, })); @@ -190,6 +187,7 @@ export const Checkbox = forwardRef( variant="basic" size="1.5em" icon={polyIcons.MinusBox} + disabled={disabled} className="minusIcon" /> Date: Fri, 14 Oct 2022 23:22:29 +0300 Subject: [PATCH 05/10] fix: fixed lint errors --- src/components/Checkbox/Checkbox.stories.tsx | 2 - src/components/Checkbox/Checkbox.tsx | 142 +++++++++---------- 2 files changed, 69 insertions(+), 75 deletions(-) diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index 2679bc0..b398e25 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -27,7 +27,6 @@ const Template: Story> = (props: any) => ( export const Basic = Template.bind({}); export const Disabled = Template.bind({}); - Basic.args = { name: 'chkbox1', label: 'Checkbox label', @@ -38,4 +37,3 @@ Disabled.args = { label: 'Checkbox label', variant: 'basic', }; - diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 76c51ba..ff3eff3 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,11 +1,9 @@ import { ChangeEventHandler, forwardRef, Fragment } from 'react'; -import styled, { ThemeConsumer } from 'styled-components'; +import styled from 'styled-components'; import { Flex } from '../Flex'; import { getMargin, visuallyHidden } from '../../theme/utils'; import { Icon } from '../Icon'; import { polyIcons } from '../../theme'; -import { width } from 'styled-system'; -import { relative } from 'path/win32'; export type CheckboxVariant = 'basic'; @@ -23,7 +21,7 @@ export type CheckboxProps = { const Input = styled.input(visuallyHidden); -const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ +const CheckStateIcon = styled(Icon)(({ theme, variant, disabled }) => ({ position: 'absolute', top: '50%', left: '50%', @@ -40,11 +38,9 @@ const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } : {}), }, - -} -)); +})); -const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ +const MinusBoxIcon = styled(Icon)(({ theme, variant, disabled }) => ({ position: 'absolute', top: '73%', left: '73%', @@ -61,79 +57,78 @@ const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } : {}), }, - })); -const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ - position: 'relative', - cursor: 'pointer', - transition: `200ms`, - boxSizing: 'border-box', - border: '2px solid', - borderColor: disabled ? '#D6DDE8' : '#8C9BA5', - borderRadius: theme.RADIUS.s, - minWidth: '1.125rem', - minHeight: '1.125rem', - backgroundColor: '#fff', - userSelect: 'none', - [`${Input}:focus + &`]: { - border: `2px solid #5B9EF8`, - position: 'relative', - padding: disabled? '0px' : '12px', - zIndex: '1', - '&:after': { - // display:'block', - // content: "''", - // position: 'absolute', - // top: '3px', - // left: '3px', - // zIndex: '2', - // right: '3px', - // bottom: '3px', - // border: '2px solid #8C9BA5', - // borderRadius: theme.RADIUS.s, - } - }, - - [`${Input}:checked:focus + &`]: { +const CheckboxInput = styled.div<{ disabled: boolean }>( + ({ theme, disabled }) => ({ position: 'relative', - border: `2px solid #5B9EF8`, - padding: disabled? '0px' : '12px', - '&:after': { - border: '0px solid #8C9BA5', - } - }, - [`${Input}:checked + &`]: { - borderColor: theme.COLOR.brandMain, - }, - + cursor: 'pointer', + transition: `200ms`, + boxSizing: 'border-box', + border: '2px solid', + borderColor: disabled ? '#D6DDE8' : '#8C9BA5', + borderRadius: theme.RADIUS.s, + minWidth: '1.125rem', + minHeight: '1.125rem', + backgroundColor: '#fff', + userSelect: 'none', + [`${Input}:focus + &`]: { + border: `2px solid #5B9EF8`, + position: 'relative', + padding: disabled ? '0px' : '12px', + zIndex: '1', + '&:after': { + // display:'block', + // content: "''", + // position: 'absolute', + // top: '3px', + // left: '3px', + // zIndex: '2', + // right: '3px', + // bottom: '3px', + // border: '2px solid #8C9BA5', + // borderRadius: theme.RADIUS.s, + }, + }, - [`${Input}:checked + & .checkIcon`]: { - visibility: 'visible', - opacity: 1, - }, - [`${Input}:focus + & .minusIcon`]: { - visibility: 'visible', - top: '60%', - left: '60%', - }, - - - '&.indeterminate': { - borderColor: theme.COLOR.brandMain, + [`${Input}:checked:focus + &`]: { + position: 'relative', + border: `2px solid #5B9EF8`, + padding: disabled ? '0px' : '12px', + '&:after': { + border: '0px solid #8C9BA5', + }, + }, + [`${Input}:checked + &`]: { + borderColor: theme.COLOR.brandMain, + }, - '.minusIcon': { + [`${Input}:checked + & .checkIcon`]: { visibility: 'visible', opacity: 1, }, + [`${Input}:focus + & .minusIcon`]: { + visibility: 'visible', + top: '60%', + left: '60%', + }, + + '&.indeterminate': { + borderColor: theme.COLOR.brandMain, - '.checkIcon': { - visibility: 'hidden', - opacity: 0, - background: theme.COLOR.light, + '.minusIcon': { + visibility: 'visible', + opacity: 1, + }, + + '.checkIcon': { + visibility: 'hidden', + opacity: 0, + background: theme.COLOR.light, + }, }, - }, -})); + }), +); const LabelComponent = styled.label<{ variant: string; margin?: string }>( ({ theme, variant, margin }) => ({ @@ -166,7 +161,8 @@ export const Checkbox = forwardRef( ...props } = checkboxProps; - const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked }; + const checkedProps = + typeof checked !== 'undefined' ? { checked } : { defaultChecked }; // const isDisabled = typeof disabled !== 'undefined' ? true : false; return ( @@ -180,7 +176,7 @@ export const Checkbox = forwardRef( type="checkbox" /> Date: Fri, 14 Oct 2022 23:38:36 +0300 Subject: [PATCH 06/10] fix: fixed issue with build --- src/components/Checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index ff3eff3..58197ac 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -176,7 +176,7 @@ export const Checkbox = forwardRef( type="checkbox" /> Date: Sun, 16 Oct 2022 20:24:22 +0300 Subject: [PATCH 07/10] feat: fixed pull request changes --- src/components/Checkbox/Checkbox.tsx | 127 +++++++++++++-------------- src/theme/definitions/blue.ts | 2 + 2 files changed, 61 insertions(+), 68 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 58197ac..73a1470 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -21,7 +21,7 @@ export type CheckboxProps = { const Input = styled.input(visuallyHidden); -const CheckStateIcon = styled(Icon)(({ theme, variant, disabled }) => ({ +const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ position: 'absolute', top: '50%', left: '50%', @@ -38,9 +38,11 @@ const CheckStateIcon = styled(Icon)(({ theme, variant, disabled }) => ({ ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } : {}), }, -})); + +} +)); -const MinusBoxIcon = styled(Icon)(({ theme, variant, disabled }) => ({ +const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ position: 'absolute', top: '73%', left: '73%', @@ -57,78 +59,69 @@ const MinusBoxIcon = styled(Icon)(({ theme, variant, disabled }) => ({ ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } : {}), }, + })); -const CheckboxInput = styled.div<{ disabled: boolean }>( - ({ theme, disabled }) => ({ +const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ + position: 'relative', + cursor: 'pointer', + transition: `200ms`, + boxSizing: 'border-box', + border: '2px solid', + borderColor: disabled ? theme.COLOR.gray8 : theme.COLOR.gray9, + borderRadius: theme.RADIUS.s, + minWidth: '1.125rem', + minHeight: '1.125rem', + backgroundColor: '#fff', + userSelect: 'none', + [`${Input}:focus + &`]: { + border: '2px solid', + borderColor: theme.COLOR.utilityFocus, + position: 'relative', + padding: disabled? '0px' : '12px', + zIndex: '1', + }, + + [`${Input}:checked:focus + &`]: { position: 'relative', - cursor: 'pointer', - transition: `200ms`, - boxSizing: 'border-box', border: '2px solid', - borderColor: disabled ? '#D6DDE8' : '#8C9BA5', - borderRadius: theme.RADIUS.s, - minWidth: '1.125rem', - minHeight: '1.125rem', - backgroundColor: '#fff', - userSelect: 'none', - [`${Input}:focus + &`]: { - border: `2px solid #5B9EF8`, - position: 'relative', - padding: disabled ? '0px' : '12px', - zIndex: '1', - '&:after': { - // display:'block', - // content: "''", - // position: 'absolute', - // top: '3px', - // left: '3px', - // zIndex: '2', - // right: '3px', - // bottom: '3px', - // border: '2px solid #8C9BA5', - // borderRadius: theme.RADIUS.s, - }, - }, + borderColor: theme.COLOR.utilityFocus, + padding: disabled? '0px' : '12px', + '&:after': { + border: '0px solid', + } + }, + [`${Input}:checked + &`]: { + borderColor: theme.COLOR.brandMain, + }, - [`${Input}:checked:focus + &`]: { - position: 'relative', - border: `2px solid #5B9EF8`, - padding: disabled ? '0px' : '12px', - '&:after': { - border: '0px solid #8C9BA5', - }, - }, - [`${Input}:checked + &`]: { - borderColor: theme.COLOR.brandMain, - }, - [`${Input}:checked + & .checkIcon`]: { + [`${Input}:checked + & .checkIcon`]: { + visibility: 'visible', + opacity: 1, + }, + [`${Input}:focus + & .minusIcon`]: { + visibility: 'visible', + top: '60%', + left: '60%', + }, + + + '&.indeterminate': { + borderColor: theme.COLOR.brandMain, + + '.minusIcon': { visibility: 'visible', opacity: 1, }, - [`${Input}:focus + & .minusIcon`]: { - visibility: 'visible', - top: '60%', - left: '60%', - }, - - '&.indeterminate': { - borderColor: theme.COLOR.brandMain, - '.minusIcon': { - visibility: 'visible', - opacity: 1, - }, - - '.checkIcon': { - visibility: 'hidden', - opacity: 0, - background: theme.COLOR.light, - }, + '.checkIcon': { + visibility: 'hidden', + opacity: 0, + background: theme.COLOR.light, }, - }), -); + }, +})); const LabelComponent = styled.label<{ variant: string; margin?: string }>( ({ theme, variant, margin }) => ({ @@ -161,9 +154,7 @@ export const Checkbox = forwardRef( ...props } = checkboxProps; - const checkedProps = - typeof checked !== 'undefined' ? { checked } : { defaultChecked }; - // const isDisabled = typeof disabled !== 'undefined' ? true : false; + const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked }; return ( @@ -176,7 +167,7 @@ export const Checkbox = forwardRef( type="checkbox" /> Date: Mon, 17 Oct 2022 14:16:12 +0300 Subject: [PATCH 08/10] fix: changed main theme changed main theme --- .storybook/preview.tsx | 8 + src/components/Checkbox/Checkbox.tsx | 120 +++-- src/theme/definitions/blue.ts | 3 - src/theme/definitions/metafinance.ts | 761 +++++++++++++++++++++++++++ 4 files changed, 828 insertions(+), 64 deletions(-) create mode 100644 src/theme/definitions/metafinance.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index cebbc16..bc0cc61 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -8,6 +8,7 @@ addDecorator(withThemes); enum Themes { Blue = 'Blue (Polymath)', Pink = 'Pink (Polymesh)', + Metafinance = 'Metafinance', } const Decorator = ({ themeName, children }) => { @@ -19,6 +20,9 @@ const Decorator = ({ themeName, children }) => { case Themes.Pink: currentTheme = polyTheme.pink; break; + case Themes.Metafinance: + currentTheme = polyTheme.metafinance; + break; } return {children}; }; @@ -36,6 +40,10 @@ export const parameters = { name: Themes.Pink, color: polyTheme.pink.COLOR.brandMain, }, + { + name: Themes.Metafinance, + color: polyTheme.metafinance.COLOR.brandMain, + }, ], }, }; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 73a1470..19f81b3 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -21,7 +21,7 @@ export type CheckboxProps = { const Input = styled.input(visuallyHidden); -const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ +const CheckStateIcon = styled(Icon)(({ theme, variant, disabled }) => ({ position: 'absolute', top: '50%', left: '50%', @@ -35,14 +35,12 @@ const CheckStateIcon = styled(Icon)(({theme, variant, disabled}) => ({ 'svg > *': { ...theme.ICON[variant]['svg > *'], ...(theme.ICON[variant].fill - ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } + ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` } : {}), }, - -} -)); +})); -const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ +const MinusBoxIcon = styled(Icon)(({ theme, variant, disabled }) => ({ position: 'absolute', top: '73%', left: '73%', @@ -56,72 +54,71 @@ const MinusBoxIcon = styled(Icon)(({theme, variant, disabled}) => ({ 'svg > *': { ...theme.ICON[variant]['svg > *'], ...(theme.ICON[variant].fill - ? { fill: disabled ? `${theme.COLOR.gray8}` : `${theme.COLOR.brandMain}` } + ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` } : {}), }, - })); -const CheckboxInput = styled.div<{disabled: boolean}>(({ theme, disabled }) => ({ - position: 'relative', - cursor: 'pointer', - transition: `200ms`, - boxSizing: 'border-box', - border: '2px solid', - borderColor: disabled ? theme.COLOR.gray8 : theme.COLOR.gray9, - borderRadius: theme.RADIUS.s, - minWidth: '1.125rem', - minHeight: '1.125rem', - backgroundColor: '#fff', - userSelect: 'none', - [`${Input}:focus + &`]: { - border: '2px solid', - borderColor: theme.COLOR.utilityFocus, - position: 'relative', - padding: disabled? '0px' : '12px', - zIndex: '1', - }, - - [`${Input}:checked:focus + &`]: { +const CheckboxInput = styled.div<{ disabled: boolean }>( + ({ theme, disabled }) => ({ position: 'relative', + cursor: 'pointer', + transition: `200ms`, + boxSizing: 'border-box', border: '2px solid', - borderColor: theme.COLOR.utilityFocus, - padding: disabled? '0px' : '12px', - '&:after': { - border: '0px solid', - } - }, - [`${Input}:checked + &`]: { - borderColor: theme.COLOR.brandMain, - }, - + borderColor: disabled ? theme.COLOR.gray4 : theme.COLOR.gray3, + borderRadius: theme.RADIUS.s, + minWidth: '1.125rem', + minHeight: '1.125rem', + backgroundColor: '#fff', + userSelect: 'none', + [`${Input}:focus + &`]: { + border: '2px solid', + borderColor: theme.COLOR.utilityFocus, + position: 'relative', + padding: disabled ? '0px' : '12px', + zIndex: '1', + }, - [`${Input}:checked + & .checkIcon`]: { - visibility: 'visible', - opacity: 1, - }, - [`${Input}:focus + & .minusIcon`]: { - visibility: 'visible', - top: '60%', - left: '60%', - }, - - - '&.indeterminate': { - borderColor: theme.COLOR.brandMain, + [`${Input}:checked:focus + &`]: { + position: 'relative', + border: '2px solid', + borderColor: theme.COLOR.utilityFocus, + padding: disabled ? '0px' : '12px', + '&:after': { + border: '0px solid', + }, + }, + [`${Input}:checked + &`]: { + borderColor: theme.COLOR.brandMain, + }, - '.minusIcon': { + [`${Input}:checked + & .checkIcon`]: { visibility: 'visible', opacity: 1, }, + [`${Input}:focus + & .minusIcon`]: { + visibility: 'visible', + top: '60%', + left: '60%', + }, + + '&.indeterminate': { + borderColor: theme.COLOR.brandMain, - '.checkIcon': { - visibility: 'hidden', - opacity: 0, - background: theme.COLOR.light, + '.minusIcon': { + visibility: 'visible', + opacity: 1, + }, + + '.checkIcon': { + visibility: 'hidden', + opacity: 0, + background: theme.COLOR.light, + }, }, - }, -})); + }), +); const LabelComponent = styled.label<{ variant: string; margin?: string }>( ({ theme, variant, margin }) => ({ @@ -154,7 +151,8 @@ export const Checkbox = forwardRef( ...props } = checkboxProps; - const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked }; + const checkedProps = + typeof checked !== 'undefined' ? { checked } : { defaultChecked }; return ( @@ -167,7 +165,7 @@ export const Checkbox = forwardRef( type="checkbox" /> = { + xs: '8px', + s: '16px', + m: '24px', + l: '32px', + xl: '40px', + xxl: '48px', + xxxl: '96px', +}; + +export const COLOR = { + light: '#FFFFFF', + gray1: '#152935', + gray2: '#5B6F7E', + gray3: '#8C9BA5', + gray4: '#D6DDE8', + gray5: '#EBF0F7', + gray6: '#F8F9FC', + gray7: '#F0F0F0', + brandBg: '#1A56AF', + brandMain: '#1A56AF', + brandLighter: '#E1EEFD', + brandLight: '#BBD7FB', + brandLightest: '#E1EEFD', + brandDark: '#124185', + brandDarkest: '#002D61', + brandDark2: '#002D61', + success: '#004A29', + success2: '#009F58', + success3: '#DFFFF1', + warning: '#604D00', + warning2: '#EBBC00', + warning3: '#FFF9E0', + danger: '#A61C2A', + danger2: '#DB2C3E', + danger3: '#FBE5E7', + teal800: '#285E61', + teal100: '#E6FFFA', + cyan800: '#046C7C', + cyan100: '#E6F9FE', + indigo800: '#434190', + indigo100: '#EBF4FF', + orange800: '#B03C02', + orange100: '#FFEAE1', + purple800: '#553C9A', + purple100: '#FAF5FF', + plum800: '#4D0198', + plum100: '#F2E6FF', + pink800: '#97266D', + pink100: '#FFEBF1', + lime800: '#447803', + lime100: '#F1FEE1', + utilityFocus: '#5B9EF8', + transparent: 'transparent', + overlay: 'background: rgba(21, 41, 53, 0.3);', + gradient: `linear-gradient( + 180.63deg, + #DCEFFE 0.03%, + rgba(220, 239, 254, 0) 79.96% + )`, +}; + +export const SHADOW: Record = { + xs: '0px 1px 3px rgba(21, 41, 53, 0.12), 0px 1px 2px rgba(21, 41, 53, 0.24)', + s: '0px 2px 4px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(21, 41, 53, 0.12)', + m: '0px 10px 20px rgba(21, 41, 53, 0.15), 0px 3px 6px rgba(21, 41, 53, 0.1)', + l: '0px 15px 25px rgba(21, 41, 53, 0.15), 0px 5px 10px rgba(21, 41, 53, 0.05)', + xl: '0px 20px 40px rgba(21, 41, 53, 0.1)', +}; + +export const RADIUS: Record = { + s: '2px', + m: '4px', + l: '8px', + xl: '16px', +}; + +export const TYPOGRAPHY: any = { + font: "'Inter', sans-serif", + h1: { + margin: `0 0 ${GAP.l} 0`, + lineHeight: '80px', + fontWeight: 300, + fontSize: '60px', + color: COLOR.gray1, + letterSpacing: '-1px', + }, + h2: { + margin: `0 0 ${GAP.m} 0`, + lineHeight: '66px', + fontWeight: 400, + fontSize: '48px', + color: COLOR.gray1, + letterSpacing: '-0.5px', + }, + h3: { + margin: `0 0 ${GAP.m} 0`, + lineHeight: '47px', + fontWeight: 500, + fontSize: '34px', + color: COLOR.gray1, + letterSpacing: '-0.25px', + }, + h4: { + margin: `0 0 ${GAP.m} 0`, + lineHeight: '34px', + fontWeight: 500, + fontSize: '24px', + color: COLOR.gray1, + }, + h5: { + margin: `0 0 ${GAP.s} 0`, + lineHeight: '29px', + fontWeight: 500, + fontSize: '20px', + color: COLOR.gray1, + letterSpacing: '0.15px', + }, + h6: { + margin: `0 0 ${GAP.s} 0`, + lineHeight: '27px', + fontWeight: 400, + fontSize: '18px', + color: COLOR.gray1, + }, + b1m: { + fontWeight: 500, + fontSize: '16px', + lineHeight: '27px', + color: COLOR.gray1, + }, + b1: { + fontWeight: 400, + fontSize: '16px', + lineHeight: '27px', + color: COLOR.gray1, + }, + b2m: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '24px', + color: COLOR.gray1, + }, + b2: { + fontWeight: 400, + fontSize: '14px', + lineHeight: '24px', + color: COLOR.gray1, + }, + b3m: { + fontWeight: 500, + fontSize: '12px', + lineHeight: '19px', + color: COLOR.gray1, + }, + b3: { + fontWeight: 400, + fontSize: '12px', + lineHeight: '19px', + color: COLOR.gray1, + }, + c1: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '20px', + color: COLOR.gray1, + letterSpacing: '0.5px', + }, + c2: { + fontWeight: 500, + fontSize: '12px', + lineHeight: '15px', + color: COLOR.gray1, + letterSpacing: '0.4px', + }, + btn: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '16px', + color: COLOR.gray1, + letterSpacing: '0.75px', + }, + tn: { + fontWeight: 400, + fontSize: '14px', + lineHeight: '17px', + color: COLOR.gray1, + letterSpacing: '0.75px', + }, + code: { + fontFamily: 'monospace', + fontWeight: 400, + fontSize: '12px', + lineHeight: '19px', + color: COLOR.gray1, + }, +}; + +export const ICONS = { ...polyIcons }; + +// Components + +export const ICON: Record = { + basic: { + fill: COLOR.brandMain, + }, + circle: { + fill: COLOR.brandMain, + backgroundColor: COLOR.brandMain, + borderRadius: '50%', + }, +}; + +export const BUTTON: Record = { + primary: { + ...TYPOGRAPHY.btn, + display: 'flex', + fontFamily: "'Poppins', sans-serif", + lineHeight: '24px', + color: COLOR.light, + background: COLOR.brandMain, + border: 0, + borderRadius: RADIUS.l, + padding: '12px 16px', + transition: 'all 0.3s', + cursor: 'pointer', + '&:hover': { + background: COLOR.brandDark, + }, + '&:active': { + background: COLOR.brandDarkest, + }, + '&:disabled': { + color: COLOR.gray3, + background: COLOR.gray5, + cursor: 'no-drop', + }, + }, + secondary: { + ...TYPOGRAPHY.btn, + display: 'flex', + fontFamily: "'Poppins', sans-serif", + lineHeight: '24px', + color: COLOR.brandMain, + background: COLOR.light, + border: `1px solid ${COLOR.brandMain}`, + borderRadius: RADIUS.l, + transition: 'all 0.3s', + cursor: 'pointer', + '&:hover': { + color: COLOR.brandMain, + background: COLOR.brandLight, + }, + '&:active': { + color: COLOR.brandMain, + background: COLOR.brandLightest, + }, + '&:disabled': { + border: `2px solid #F0F0F0`, + color: COLOR.gray5, + background: COLOR.light, + cursor: 'no-drop', + }, + }, + tertiary: { + ...TYPOGRAPHY.btn, + display: 'flex', + fontFamily: "'Poppins', sans-serif", + lineHeight: '24px', + color: COLOR.gray1, + background: 'transparent', + border: 0, + borderRadius: RADIUS.l, + transition: 'all 0.3s', + cursor: 'pointer', + '&:hover': { + background: COLOR.brandLightest, + }, + '&:active': { + background: COLOR.brandLight, + }, + '&:disabled': { + color: COLOR.gray3, + cursor: 'no-drop', + }, + }, + inline: { + display: 'inline', + margin: 0, + padding: 0, + border: 0, + borderRadius: 0, + lineHeight: 'inherit', + fontFamily: "'Poppins', sans-serif", + fontWeight: 'inherit', + fontSize: 'inherit', + letterSpacing: 'inherit', + color: 'inherit', + background: 'transparent', + cursor: 'pointer', + }, + special: { + ...TYPOGRAPHY.btn, + fontFamily: "'Poppins', sans-serif", + fontSize: '14px', + color: COLOR.gray1, + background: COLOR.light, + border: `1px solid ${COLOR.gray1}`, + borderRadius: RADIUS.l, + padding: '12px 16px', + transition: 'all 0.3s', + cursor: 'pointer', + '&:hover:enabled': { + background: COLOR.gray5, + }, + '&:active': { + background: COLOR.gray4, + }, + '&:disabled': { + color: COLOR.gray3, + cursor: 'no-drop', + }, + }, +}; + +export const BOX: Record = { + raw: {}, + basic: { + padding: GAP.m, + backgroundColor: COLOR.light, + }, + border: { + padding: GAP.m, + backgroundColor: COLOR.light, + border: `1px solid ${COLOR.gray3}`, + borderRadius: RADIUS.m, + }, + shadow: { + padding: GAP.m, + backgroundColor: COLOR.light, + borderRadius: RADIUS.m, + boxShadow: SHADOW.s, + }, +}; + +export const TEXT: Record = { + p: { + margin: `0 0 ${GAP.s} 0`, + lineHeight: '27px', + fontWeight: 'inherit', + fontSize: 'inherit', + color: COLOR.gray2, + }, + span: { + lineHeight: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + color: 'inherit', + }, + label: { + lineHeight: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + color: 'inherit', + }, +}; + +export const BADGE: Record = { + default: { + ...TYPOGRAPHY.b3m, + color: COLOR.brandMain, + backgroundColor: COLOR.brandLightest, + borderRadius: '100px', + }, + success: { + ...TYPOGRAPHY.b3m, + color: COLOR.success, + backgroundColor: COLOR.success2, + borderRadius: '100px', + }, + warning: { + ...TYPOGRAPHY.b3m, + color: COLOR.danger2, + backgroundColor: COLOR.danger3, + borderRadius: '100px', + }, + danger: { + ...TYPOGRAPHY.b3m, + color: COLOR.danger2, + backgroundColor: COLOR.danger3, + borderRadius: '100px', + }, +}; + +export const INPUT: CSSPropertiesExtended = { + ...TYPOGRAPHY.b2, + padding: `${GAP.xs} ${GAP.s}`, + border: `1px solid ${COLOR.gray3}`, + borderRadius: RADIUS.s, + transition: 'all 0.3s', + backgroundColor: COLOR.light, + '&:hover': { + borderColor: COLOR.gray2, + }, + '&:focus': { + borderColor: COLOR.brandMain, + }, + '&:disabled': { + borderColor: COLOR.gray5, + backgroundColor: COLOR.light, + color: COLOR.gray3, + cursor: 'not-allowed', + }, + '&:readOnly': { + borderColor: 'transparent', + backgroundColor: COLOR.gray5, + color: COLOR.gray2, + '&:hover': { + borderColor: 'transparent', + }, + '&:focus': { + borderColor: 'transparent', + }, + }, + '::placeholder': { + color: COLOR.gray3, + }, +}; + +export const DATEPICKER: CSSPropertiesExtended = { + padding: GAP.s, + backgroundColor: COLOR.light, + border: `1px solid ${COLOR.gray4}`, + borderRadius: RADIUS.l, + boxShadow: SHADOW.m, + lineHeight: 'normal', + '.DayPicker': { + '&-wrapper': { + margin: 0, + padding: 0, + }, + '&-NavButton': { + margin: 0, + padding: 0, + backgroundImage: 'none', + borderStyle: 'solid', + borderWidth: '2px 2px 0 0', + height: '7px', + width: '7px', + color: COLOR.gray2, + top: '20px', + right: '10px', + transform: 'rotate(45deg)', + '&--prev': { + right: '50px', + transform: 'rotate(-135deg)', + }, + }, + '&-Month': { + margin: 0, + }, + '&-Caption': { + ...TYPOGRAPHY.b3, + color: COLOR.gray2, + paddingTop: '15px', + marginBottom: '20px', + }, + '&-Day': { + margin: 0, + padding: 0, + borderRadius: 0, + width: '20px', + ...TYPOGRAPHY.b3, + color: COLOR.gray1, + lineHeight: '30px', + '&--selected': { + backgroundColor: `${COLOR.brandMain} !important`, + }, + '&--disabled': { + color: COLOR.gray4, + }, + '&--outside': { + color: COLOR.gray2, + }, + }, + }, +}; + +export const PAGE: CSSPropertiesExtended = { + padding: '0 124px', + maxWidth: '1600px', + minHeight: '70vh', +}; + +export const SELECT: any = { + container: (styles: any) => ({ + ...styles, + minWidth: '112px', + }), + control: (styles: any, state: any) => ({ + ...styles, + backgroundColor: state.selectProps.readonly ? COLOR.gray5 : COLOR.light, + borderRadius: RADIUS.m, + ...(state.selectProps.isDisabled + ? { + borderColor: COLOR.gray5, + } + : state.selectProps.readonly + ? { + borderColor: 'transparent', + } + : { + borderColor: COLOR.gray3, + }), + '&:hover': { + borderColor: state.selectProps.readonly ? 'transparent' : COLOR.gray2, + }, + ...(state.isFocused + ? { + borderColor: COLOR.brandMain, + '&:hover': { + borderColor: COLOR.brandMain, + }, + } + : {}), + cursor: state.selectProps.readonly ? 'not-allowed' : 'pointer', + }), + option: (styles: any, state: any) => ({ + ...styles, + padding: '8px 9px', + ...TYPOGRAPHY.b2, + color: COLOR.gray1, + ...(state.isSelected + ? { + color: COLOR.gray1, + backgroundColor: COLOR.gray5, + } + : {}), + '&:hover': { + color: COLOR.gray1, + backgroundColor: COLOR.gray6, + }, + cursor: 'pointer', + }), + valueContainer: (styles: any) => ({ + ...styles, + ...TYPOGRAPHY.b2, + }), + placeholder: (styles: any) => ({ + ...styles, + ...TYPOGRAPHY.b2, + color: COLOR.gray3, + }), + menu: (styles: any) => ({ + ...styles, + backgroundColor: COLOR.light, + boxShadow: SHADOW.s, + }), + menuList: (styles: any) => ({ + ...styles, + padding: '0px', + }), + menuPortal: (styles: any) => ({ + ...styles, + zIndex: 1000, + }), +}; + +const tooltipArrowSize = 8; +export const TOOLTIP = createGlobalStyle` + .tippy-box { + padding: 4px ${GAP.s}; + color: ${COLOR.light}; + background-color: ${COLOR.gray1}; + box-shadow: ${SHADOW.xs}; + border-radius: ${RADIUS.s}; + z-index: 1; + } + .tippy-box[data-placement^="top"] > .tippy-arrow { + bottom: 0; + } + .tippy-box[data-placement^="top"] > .tippy-arrow::before { + bottom: -7px; + left: 0; + border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px 0; + border-top-color: initial; + transform-origin: center top; + } + .tippy-box[data-placement^="bottom"] > .tippy-arrow { + top: 0; + } + .tippy-box[data-placement^="bottom"] > .tippy-arrow::before { + top: -7px; + left: 0; + border-width: 0 ${tooltipArrowSize}px ${tooltipArrowSize}px; + border-bottom-color: initial; + transform-origin: center bottom; + } + .tippy-box[data-placement^="left"] > .tippy-arrow { + right: 0; + } + .tippy-box[data-placement^="left"] > .tippy-arrow::before { + border-width: ${tooltipArrowSize}px 0 ${tooltipArrowSize}px ${tooltipArrowSize}px; + border-left-color: initial; + right: -7px; + transform-origin: center left; + } + .tippy-box[data-placement^="right"] > .tippy-arrow { + left: 0; + } + .tippy-box[data-placement^="right"] > .tippy-arrow::before { + left: -7px; + border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px ${tooltipArrowSize}px 0; + border-right-color: initial; + transform-origin: center right; + } + .tippy-box[data-inertia][data-state="visible"] { + transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + } + .tippy-arrow { + width: ${tooltipArrowSize * 2}px; + height: ${tooltipArrowSize * 2}px; + color: ${COLOR.gray1}; + } + .tippy-arrow::before { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid; + } +`; + +export const INFOBOX: Record = { + basic: { + minWidth: '240px', + display: 'inline-block', + padding: GAP.s, + border: `2px solid #F0F0F0`, + sizing: 'border-box', + borderRadius: RADIUS.l, + fontSize: '14px', + fontWeight: 400, + a: { color: COLOR.brandMain }, + }, + compact: { + minWidth: '240px', + display: 'inline-block', + padding: `0 ${GAP.xs}`, + borderLeft: `2px solid ${COLOR.brandMain}`, + fontSize: '14px', + fontWeight: 400, + a: { color: COLOR.brandMain }, + }, +}; + +export const DRAWER: Record = { + basic: { + margin: 0, + padding: GAP.l, + width: 500, + backgroundColor: COLOR.light, + boxShadow: SHADOW.xl, + transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)', + }, + raw: { + margin: 0, + padding: GAP.l, + width: 500, + transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)', + }, +}; + +export const CHECKBOX: CSSPropertiesExtended = { + basic: { + color: COLOR.gray1, + fontSize: '16px', + + // the icon color manipulation + svg: { + path: { + fill: `${COLOR.brandMain} !important`, + }, + }, + }, + labelMargin: { + margin: '-2px 0 0 10px', + }, +}; + +export const COLLAPSABLE: Record = { + iconVariants: { + default: { + iconColor: { + open: 'brandMain', + closed: 'gray.3', + }, + bgColor: { + open: 'brandLightest', + closed: 'gray.4', + }, + }, + transparent: { + iconColor: { + open: 'brandMain', + closed: 'gray.3', + }, + bgColor: { + open: 'transparent', + closed: 'transparent', + }, + }, + }, + iconColor: { + isOpen: 'brandMain', + notOpen: 'gray.3', + }, + iconBgColor: { + isOpen: 'brandLightest', + notOpen: 'gray.4', + }, + basic: { + color: COLOR.gray1, + fontSize: '16px', + // the icon color manipulation + // svg: { + // path: { + // fill: 'red !important', + // }, + // }, + }, +}; From 9446bc67e42d23301597ada2d98bfa91bf3c31be Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Mon, 17 Oct 2022 14:30:43 +0300 Subject: [PATCH 09/10] fix: changed default to basic changed default to basic --- src/theme/definitions/metafinance.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/definitions/metafinance.ts b/src/theme/definitions/metafinance.ts index e25db56..ebcc5ce 100644 --- a/src/theme/definitions/metafinance.ts +++ b/src/theme/definitions/metafinance.ts @@ -396,7 +396,7 @@ export const TEXT: Record = { }; export const BADGE: Record = { - default: { + basic: { ...TYPOGRAPHY.b3m, color: COLOR.brandMain, backgroundColor: COLOR.brandLightest, From 9be009ffbd5dc8e8e69330f17bb8c339ae849493 Mon Sep 17 00:00:00 2001 From: yskyba13 Date: Mon, 17 Oct 2022 14:36:20 +0300 Subject: [PATCH 10/10] fix: fixed ts error fixed ts error --- src/components/Checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 19f81b3..688ed86 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -165,7 +165,7 @@ export const Checkbox = forwardRef( type="checkbox" />