From b72cbf8f8703e46388d32c25380405ba22e853bb Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Fri, 7 Oct 2022 18:04:53 +0400 Subject: [PATCH 01/17] Support icon-inherit-color to Tag component --- src/components/Tag/styled.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Tag/styled.ts b/src/components/Tag/styled.ts index 6e7aba47..f3d11c30 100644 --- a/src/components/Tag/styled.ts +++ b/src/components/Tag/styled.ts @@ -35,6 +35,9 @@ export const Wrapper = styled.div` background: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_bg_default`]}; color: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_text_default`]}; ${({ theme, variant }) => getPadding(theme, variant)} + .icon-inherit-color { + fill: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_text_default`]}; + } ` export const StyledIcon = styled(Icon)` From 1014c4e15d4f0b546499d93831f052cc58b6d909 Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Fri, 7 Oct 2022 18:39:56 +0400 Subject: [PATCH 02/17] Add autoWidth prop to Popover --- src/components/Popover/index.tsx | 3 ++- src/components/Popover/styled.ts | 9 ++++++--- src/components/Popover/types.ts | 4 +++- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index 3efc78da..f8e71acc 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -22,6 +22,7 @@ function Popover(props: TPopoverProps): JSX.Element { size = 'normal', zIndex = OVERLAY_Z_INDEX - 1, className = '', + autoWidth = false, } = props const { @@ -63,7 +64,7 @@ function Popover(props: TPopoverProps): JSX.Element { > - + {header && (
diff --git a/src/components/Popover/styled.ts b/src/components/Popover/styled.ts index 8d80caa3..725d30c0 100644 --- a/src/components/Popover/styled.ts +++ b/src/components/Popover/styled.ts @@ -11,7 +11,7 @@ interface TGetBackgroundImage { } const getBackgroundImage = ({ theme }: TGetBackgroundImage) => { - const iconSrc = getPopoverArrow(theme.color.colorTextContrastDefault) + const iconSrc = getPopoverArrow(theme.color.colorBgContrastNormal) if (iconSrc) { return `background-image: ${iconSrc}` @@ -72,8 +72,6 @@ const PopoverBackground = styled.div` animation: 0.15s ease-out forwards ${CONTAINER_ANIMATION_KEYFRAMES}; flex-shrink: 0; flex-grow: 1; - min-width: 240px; - max-width: ${({ size }) => POPOVER_SIZES[size]}; background: ${({ theme }) => theme.color.colorBgContrastNormal}; color: ${({ theme }) => theme.color.colorTextContrastDefault}; border-radius: 6px; @@ -81,6 +79,11 @@ const PopoverBackground = styled.div` display: flex; flex-direction: column; + ${({ size, autoWidth }) => !autoWidth && css` + min-width: 240px; + max-width: ${POPOVER_SIZES[size]}; + `} + @media ${queries.isHandheld} { max-width: auto; flex: 1; diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index da8f33cc..19d70372 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -32,6 +32,8 @@ type TPopoverProps = { * allow popover usage with styled components */ className?: string, + + autoWidth?: boolean, } type TPopoverWithDefaultsProps = Required @@ -40,7 +42,7 @@ interface TPopoverIconProps { side: BasePlacement, } -type TPopoverBackgroundProps = Pick +type TPopoverBackgroundProps = Pick export { From 47b02ed06d65a132de5b8056862c8a1b1ea8f63c Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Tue, 11 Oct 2022 15:01:20 +0300 Subject: [PATCH 03/17] fix --- src/components/Popover/styled.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Popover/styled.ts b/src/components/Popover/styled.ts index 725d30c0..a0cbadd2 100644 --- a/src/components/Popover/styled.ts +++ b/src/components/Popover/styled.ts @@ -125,4 +125,6 @@ export { PopoverIconContainer, PopoverIcon, TextCaption, + getBackgroundImage, + CONTAINER_ANIMATION_KEYFRAMES, } From 0553512ec96abdc341e3869c75626dfc55d92af1 Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Tue, 11 Oct 2022 16:35:07 +0300 Subject: [PATCH 04/17] fix --- src/components/Typography/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx index 48f973d9..39866073 100644 --- a/src/components/Typography/index.tsx +++ b/src/components/Typography/index.tsx @@ -50,7 +50,7 @@ const calculateTokenVariant = (variant: TVariant): TVariantToken => { } } -export interface TTypographyProps { +export interface TTypographyProps extends Omit, 'as'> { variant?: TVariant, color?: COLOR_NAMES, isBold?: boolean, From f27d6c0cfab7074169139c8d3497139262c32b66 Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Wed, 19 Oct 2022 14:09:21 +0300 Subject: [PATCH 05/17] Fix popover padding --- src/components/Popover/index.tsx | 2 +- src/components/Popover/styled.ts | 2 +- src/components/Popover/types.ts | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index f8e71acc..5adf6b9f 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -64,7 +64,7 @@ function Popover(props: TPopoverProps): JSX.Element { > - + {header && (
diff --git a/src/components/Popover/styled.ts b/src/components/Popover/styled.ts index a0cbadd2..54c2d4c8 100644 --- a/src/components/Popover/styled.ts +++ b/src/components/Popover/styled.ts @@ -75,7 +75,7 @@ const PopoverBackground = styled.div` background: ${({ theme }) => theme.color.colorBgContrastNormal}; color: ${({ theme }) => theme.color.colorTextContrastDefault}; border-radius: 6px; - padding: 12px; + padding: ${({ header }) => (header ? '12px' : '8px')} 12px; display: flex; flex-direction: column; diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index 19d70372..4f232ec9 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -42,7 +42,9 @@ interface TPopoverIconProps { side: BasePlacement, } -type TPopoverBackgroundProps = Pick +type TPopoverBackgroundProps = Pick & { + header: TPopoverProps['header'] +} export { From 1921e937d511947c1a38b05694e075b749d6f9aa Mon Sep 17 00:00:00 2001 From: zinovev Date: Tue, 1 Nov 2022 15:28:45 +0700 Subject: [PATCH 06/17] update icons --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 15ea9013..fba29050 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@babel/preset-typescript": "^7.12.7", "@babel/types": "^7.12.12", "@emotion/core": "^10.0.10", - "@kupibilet/icons": "^5.9.28", + "@kupibilet/icons": "5.9.30", "@storybook/addon-essentials": "^6.5.9", "@storybook/client-api": "^6.5.9", "@storybook/react": "^6.5.9", diff --git a/yarn.lock b/yarn.lock index 22b4acf5..59925ab3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1761,10 +1761,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kupibilet/icons@^5.9.28": - version "5.9.28" - resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.28.tgz#973de900d02cdcfaab35235ff4fcb3ca4c57a46d" - integrity sha512-e+jeMkJDjjdQmWgN2tkvqIV5JygjyDGTOYb7LEtRNWjKZTxu5Lg2AdmWi2I2ucWydt00RArZluZm0vdsvNZY8g== +"@kupibilet/icons@5.9.30": + version "5.9.30" + resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.30.tgz#02914e424702f874fa863940cc2b275d156ca3ea" + integrity sha512-UQlgx4Mr3ABfa50y+v/toy0dsTaIY5dOefpHYMT7J5/6c0RLeb6D1v9htPy3n8ebt8hwLRItTayoMBQGeQsuVw== "@mdx-js/mdx@^1.6.22": version "1.6.22" From 074c20acd9830168f9f430c80f982989bbda5e34 Mon Sep 17 00:00:00 2001 From: zinovev Date: Tue, 1 Nov 2022 16:35:49 +0700 Subject: [PATCH 07/17] update icons --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fba29050..7409d2b7 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@babel/preset-typescript": "^7.12.7", "@babel/types": "^7.12.12", "@emotion/core": "^10.0.10", - "@kupibilet/icons": "5.9.30", + "@kupibilet/icons": "5.9.31", "@storybook/addon-essentials": "^6.5.9", "@storybook/client-api": "^6.5.9", "@storybook/react": "^6.5.9", diff --git a/yarn.lock b/yarn.lock index 59925ab3..7a1d7e70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1761,10 +1761,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kupibilet/icons@5.9.30": - version "5.9.30" - resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.30.tgz#02914e424702f874fa863940cc2b275d156ca3ea" - integrity sha512-UQlgx4Mr3ABfa50y+v/toy0dsTaIY5dOefpHYMT7J5/6c0RLeb6D1v9htPy3n8ebt8hwLRItTayoMBQGeQsuVw== +"@kupibilet/icons@5.9.31": + version "5.9.31" + resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.31.tgz#5ac8cfe74623aaaa78f5f9cad1a4529be961722c" + integrity sha512-um2eRyw64l0H4GsGKo/7oDcd3CTwS7/fK2w60bt5ktdLeGc2MlPWkOz+fSEhE0tUn8kIhgPNPq5IEdmcF90NiQ== "@mdx-js/mdx@^1.6.22": version "1.6.22" From 47d32fb1fbadf24883dbdd186d7982207a21a313 Mon Sep 17 00:00:00 2001 From: zinovev Date: Tue, 1 Nov 2022 21:17:55 +0700 Subject: [PATCH 08/17] update tokens --- src/components/ThemeProvider/styled.d.ts | 2 + src/components/ThemeProvider/theme.ts | 3 + .../ThemeProvider/tokens/informationCard.ts | 95 +++++++++++++++++++ style-dictionary/config.ts | 48 ++++++++++ 4 files changed, 148 insertions(+) create mode 100644 src/components/ThemeProvider/tokens/informationCard.ts diff --git a/src/components/ThemeProvider/styled.d.ts b/src/components/ThemeProvider/styled.d.ts index 3c140e92..c327634a 100644 --- a/src/components/ThemeProvider/styled.d.ts +++ b/src/components/ThemeProvider/styled.d.ts @@ -19,6 +19,7 @@ import * as switchTokens from './tokens/switcher' import * as checkboxTokens from './tokens/checkbox' import * as radioTokens from './tokens/radio' +import * as informationCardTokens from './tokens/informationCard' declare module 'styled-components' { export interface DefaultTheme { @@ -32,6 +33,7 @@ declare module 'styled-components' { switch: typeof switchTokens, checkbox: typeof checkboxTokens, radio: typeof radioTokens, + informationCard: typeof informationCardTokens, queries: Record } } diff --git a/src/components/ThemeProvider/theme.ts b/src/components/ThemeProvider/theme.ts index 07d805dd..7b39f8a4 100644 --- a/src/components/ThemeProvider/theme.ts +++ b/src/components/ThemeProvider/theme.ts @@ -21,6 +21,7 @@ import * as switchTokens from './tokens/switcher' import * as checkboxTokens from './tokens/checkbox' import * as radioTokens from './tokens/radio' +import * as informationCardTokens from './tokens/informationCard' export const font = ` font: 400 16px / 20px 'KB Suisse Intl'; @@ -40,6 +41,7 @@ const lightTheme: DefaultTheme = { switch: switchTokens, checkbox: checkboxTokens, radio: radioTokens, + informationCard: informationCardTokens, } const darkTheme: DefaultTheme = { @@ -52,6 +54,7 @@ const darkTheme: DefaultTheme = { switch: switchTokens, checkbox: checkboxTokens, radio: radioTokens, + informationCard: informationCardTokens, } export { lightTheme, darkTheme } diff --git a/src/components/ThemeProvider/tokens/informationCard.ts b/src/components/ThemeProvider/tokens/informationCard.ts new file mode 100644 index 00000000..ebec6483 --- /dev/null +++ b/src/components/ThemeProvider/tokens/informationCard.ts @@ -0,0 +1,95 @@ +/** + * Do not edit directly + * Generated on Tue, 01 Nov 2022 14:14:45 GMT + */ + +export const information_card_button_default_danger_medium_color_bg_default = "#fcede8"; +export const information_card_button_default_danger_medium_color_icon_default = "#ff6240"; +export const information_card_button_default_danger_medium_color_headline_default = "#2c3959"; +export const information_card_button_default_danger_medium_color_description_default = "#62657f"; +export const information_card_button_default_danger_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_default_danger_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_default_danger_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_default_danger_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_default_danger_medium_size_border_radius_default = "8px"; +export const information_card_button_default_danger_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_button_default_info_medium_color_bg_default = "#ebf3ff"; +export const information_card_button_default_info_medium_color_icon_default = "#007acc"; +export const information_card_button_default_info_medium_color_headline_default = "#2c3959"; +export const information_card_button_default_info_medium_color_description_default = "#62657f"; +export const information_card_button_default_info_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_default_info_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_default_info_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_default_info_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_default_info_medium_size_border_radius_default = "8px"; +export const information_card_button_default_info_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_button_default_warning_medium_color_bg_default = "#fff6eb"; +export const information_card_button_default_warning_medium_color_icon_default = "#ff9000"; +export const information_card_button_default_warning_medium_color_headline_default = "#2c3959"; +export const information_card_button_default_warning_medium_color_description_default = "#62657f"; +export const information_card_button_default_warning_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_default_warning_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_default_warning_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_default_warning_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_default_warning_medium_size_border_radius_default = "8px"; +export const information_card_button_default_warning_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_button_icon_danger_medium_color_bg_default = "#fcede8"; +export const information_card_button_icon_danger_medium_color_icon_default = "#ff6240"; +export const information_card_button_icon_danger_medium_color_headline_default = "#2c3959"; +export const information_card_button_icon_danger_medium_color_description_default = "#62657f"; +export const information_card_button_icon_danger_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_icon_danger_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_icon_danger_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_icon_danger_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_icon_danger_medium_size_border_radius_default = "8px"; +export const information_card_button_icon_danger_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerHorizontalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_button_icon_info_medium_color_bg_default = "#ebf3ff"; +export const information_card_button_icon_info_medium_color_icon_default = "#007acc"; +export const information_card_button_icon_info_medium_color_headline_default = "#2c3959"; +export const information_card_button_icon_info_medium_color_description_default = "#62657f"; +export const information_card_button_icon_info_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_icon_info_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_icon_info_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_icon_info_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_icon_info_medium_size_border_radius_default = "8px"; +export const information_card_button_icon_info_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerHorizontalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_button_icon_warning_medium_color_bg_default = "#fff6eb"; +export const information_card_button_icon_warning_medium_color_icon_default = "#ff9000"; +export const information_card_button_icon_warning_medium_color_headline_default = "#2c3959"; +export const information_card_button_icon_warning_medium_color_description_default = "#62657f"; +export const information_card_button_icon_warning_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_button_icon_warning_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_button_icon_warning_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_button_icon_warning_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_button_icon_warning_medium_size_border_radius_default = "8px"; +export const information_card_button_icon_warning_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerHorizontalButton":"8px","innerVerticalDescription":"4px"}; +export const information_card_default_danger_medium_color_bg_default = "#fcede8"; +export const information_card_default_danger_medium_color_icon_default = "#ff6240"; +export const information_card_default_danger_medium_color_headline_default = "#2c3959"; +export const information_card_default_danger_medium_color_description_default = "#62657f"; +export const information_card_default_danger_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_default_danger_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_default_danger_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_default_danger_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_default_danger_medium_size_border_radius_default = "8px"; +export const information_card_default_danger_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalDescription":"4px"}; +export const information_card_default_info_medium_color_bg_default = "#ebf3ff"; +export const information_card_default_info_medium_color_icon_default = "#007acc"; +export const information_card_default_info_medium_color_headline_default = "#2c3959"; +export const information_card_default_info_medium_color_description_default = "#62657f"; +export const information_card_default_info_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_default_info_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_default_info_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_default_info_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_default_info_medium_size_border_radius_default = "8px"; +export const information_card_default_info_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalDescription":"4px"}; +export const information_card_default_warning_medium_color_bg_default = "#fff6eb"; +export const information_card_default_warning_medium_color_icon_default = "#ff9000"; +export const information_card_default_warning_medium_color_headline_default = "#2c3959"; +export const information_card_default_warning_medium_color_description_default = "#62657f"; +export const information_card_default_warning_medium_typography_mobile_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"20","fontWeight":"500"}; +export const information_card_default_warning_medium_typography_mobile_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"16","fontWeight":"400"}; +export const information_card_default_warning_medium_typography_desktop_headline = {"fontFamily":"SuisseIntl-Medium","size":"14","lineHeight":"16","fontWeight":"500"}; +export const information_card_default_warning_medium_typography_desktop_description = {"fontFamily":"SuisseIntl-Medium","size":"12","lineHeight":"18","fontWeight":"400"}; +export const information_card_default_warning_medium_size_border_radius_default = "8px"; +export const information_card_default_warning_medium_size_padding_default = {"top":"12px","right":"12px","bottom":"12px","left":"12px","innerHorizontalIcon":"8px","innerVerticalDescription":"4px"}; \ No newline at end of file diff --git a/style-dictionary/config.ts b/style-dictionary/config.ts index 2d6abfc9..524cf5e0 100644 --- a/style-dictionary/config.ts +++ b/style-dictionary/config.ts @@ -124,3 +124,51 @@ configs.forEach(({ themes, filterName, transform, matcher, destination }) => { }).buildAllPlatforms() }) }) + +StyleDictionary.extend({ + source: [ + source.common, + ], + platforms: { + js: { + transforms: transforms.component, + files: [ + { + destination: `${destinationRoot}/switcher.ts`, + format: 'javascript/es6', + filter: 'isSwitcher', + }, + ], + }, + }, +}).buildAllPlatforms() + + +StyleDictionary.registerFilter({ + name: 'isInformationCard', + matcher(prop) { + return [ + 'informationCardDefault', + 'informationCardButtonDefault', + 'informationCardButtonIcon', + ].includes(prop.attributes.category) + }, +}) + +StyleDictionary.extend({ + source: [ + source.common, + ], + platforms: { + js: { + transforms: transforms.component, + files: [ + { + destination: `${destinationRoot}/informationCard.ts`, + format: 'javascript/es6', + filter: 'isInformationCard', + }, + ], + }, + }, +}).buildAllPlatforms() From 4cdd184e3a91414652a4c11941db6b6442a374f2 Mon Sep 17 00:00:00 2001 From: zinovev Date: Thu, 3 Nov 2022 14:17:01 +0700 Subject: [PATCH 09/17] add information card component --- .../InformationCard.stories.tsx | 46 ++++++ src/components/InformationCard/index.tsx | 95 ++++++++++++ src/components/InformationCard/styled.ts | 138 ++++++++++++++++++ src/components/InformationCard/types.ts | 21 +++ 4 files changed, 300 insertions(+) create mode 100644 src/components/InformationCard/InformationCard.stories.tsx create mode 100644 src/components/InformationCard/index.tsx create mode 100644 src/components/InformationCard/styled.ts create mode 100644 src/components/InformationCard/types.ts diff --git a/src/components/InformationCard/InformationCard.stories.tsx b/src/components/InformationCard/InformationCard.stories.tsx new file mode 100644 index 00000000..33d33f05 --- /dev/null +++ b/src/components/InformationCard/InformationCard.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Story } from '@storybook/react' +import { InformationCard, InformationCardTitle, InformationCardText } from 'components/InformationCard' +import Icon from 'components/Icon' +import Button from 'components/Button' +import { TInformationCardProps } from './types' + +const InformationCardStory = (args: TInformationCardProps): JSX.Element => { + return ( + + В документах не отражены изменения в заказе + Примите изменения, для отображения изменений + + ) +} + +const DEFAULT_PROPS: Partial = { + severity: 'info', + layoutTheme: 'default', +} + + +export const DefaultInformationCard: Story = InformationCardStory.bind({}) +DefaultInformationCard.args = DEFAULT_PROPS + + +export const InformationCardIcon: Story = InformationCardStory.bind({}) +InformationCardIcon.args = { + ...DEFAULT_PROPS, + layoutTheme: 'button_icon', + action: , +} + +export const InformationCardButton: Story = InformationCardStory.bind({}) +InformationCardButton.args = { + ...DEFAULT_PROPS, + layoutTheme: 'button_default', + action: , +} + +export default { + title: 'InformationCard', + component: InformationCard, +} diff --git a/src/components/InformationCard/index.tsx b/src/components/InformationCard/index.tsx new file mode 100644 index 00000000..74d49cfb --- /dev/null +++ b/src/components/InformationCard/index.tsx @@ -0,0 +1,95 @@ +import React from 'react' +import { useWithMedia2021 } from 'hooks/useWithMedia' +import { + ActionInner, + Container, + FlexGrow, + InformationCardTextInner, + InformationCardTitleInner, + InnerContainer, + StyledIcon, +} from './styled' +import { + TInformationCardProps, + TInformationCardTextProps, + TInformationCardTitleProps, +} from './types' + +export const InformationCard = ({ + children, + severity, + icon, + action, + layoutTheme = 'default', +}: TInformationCardProps): JSX.Element => { + const { isMobile } = useWithMedia2021() + const iconName = icon ?? 'exclamation-circle-filled' + + const actionComponent = action ? ( + + {action} + + ) : ( + <> + ) + + return ( + + + + + {React.Children.map(children, (child) => { + return React.cloneElement(child, { + severity, + layoutTheme, + isMobile, + }) + })} + + {layoutTheme === 'button_default' && actionComponent} + + {layoutTheme === 'button_icon' ? actionComponent : <>} + + ) +} + +export const InformationCardTitle = ({ + children, + layoutTheme = 'default', + severity = 'info', + isMobile = false, +}: TInformationCardTitleProps): JSX.Element => { + return ( + + {children} + + ) +} + +export const InformationCardText = ({ + children, + layoutTheme = 'default', + severity = 'info', + isMobile = false, +} : TInformationCardTextProps): JSX.Element => { + return ( + + {children} + + ) +} diff --git a/src/components/InformationCard/styled.ts b/src/components/InformationCard/styled.ts new file mode 100644 index 00000000..1e3ef53a --- /dev/null +++ b/src/components/InformationCard/styled.ts @@ -0,0 +1,138 @@ +import Icon from 'components/Icon' +import Typography from 'components/Typography' +import styled, { css, DefaultTheme } from 'styled-components' +import { queries2021 } from 'utils/media-queries' +import { TInformationCardProps, TInformationCardTextProps, TInformationCardTitleProps } from './types' + +type WithStyledTheme = K & { theme: DefaultTheme } + +const containerCss = ({ + theme, + layoutTheme, + severity, +}: WithStyledTheme) => { + const paddingToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const + const bgColorToken = `information_card_${layoutTheme}_${severity}_medium_color_bg_default` as const + const borderRadiusToken = `information_card_${layoutTheme}_${severity}_medium_size_border_radius_default` as const + + return css` + padding-top: ${theme.informationCard[`information_card_${layoutTheme}_${severity}_medium_size_padding_default`]?.top}; + padding-left: ${theme.informationCard[paddingToken]?.left}; + padding-bottom: ${theme.informationCard[paddingToken]?.bottom}; + padding-right: ${theme.informationCard[paddingToken]?.right}; + background-color: ${theme.informationCard[bgColorToken]}; + border-radius: ${theme.informationCard[borderRadiusToken]}; + ` +} + +export const Container = styled.div` + display: flex; + overflow: hidden; + ${containerCss} +` + +const iconCss = ({ + theme, + layoutTheme, + severity, +}: WithStyledTheme>) => { + const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const + const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_icon_default` as const + + return css` + margin-right: ${theme.informationCard[marginToken]?.innerHorizontalIcon}; + fill: ${theme.informationCard[colorToken]}; + ` +} + +export const StyledIcon = styled(Icon)>>` + width: 20px; + height: 20px; + ${iconCss} +` + +const actionCss = ({ + theme, + layoutTheme, + severity, +}: WithStyledTheme>) => { + const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const marginTop = 'innerVerticalButton' in theme.informationCard[marginToken] ? theme.informationCard[marginToken]!.innerVerticalButton : 0 + + return css` + margin-left: ${theme.informationCard[marginToken]?.innerHorizontalIcon}; + + @media ${queries2021.isMobile} { + ${layoutTheme === 'button_default' && 'margin-left: 0;'}; + margin-top: ${marginTop}; + } + ` +} + +export const ActionInner = styled.div>` + ${actionCss} +` + +export const InnerContainer = styled.div` + display: flex; + flex-grow: 1; + + @media ${queries2021.isMobile} { + flex-direction: column; + } +` + +export const FlexGrow = styled.div` + flex-grow: 1; +` + +const titleCss = ({ + theme, + layoutTheme, + severity, + isMobile, +}: WithStyledTheme>) => { + const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_headline_default` as const + + const media = isMobile ? 'mobile' : 'desktop' + const typographyToken = `information_card_${layoutTheme}_${severity}_medium_typography_${media}_headline` as const + + return css` + display: flex; + color: ${theme.informationCard[colorToken]}; + font-size: ${theme.informationCard[typographyToken].size}px; + line-height: ${theme.informationCard[typographyToken].lineHeight}px; + font-weight: ${theme.informationCard[typographyToken].fontWeight}; + ` +} + +export const InformationCardTitleInner = styled(Typography)>` + ${titleCss} +` + +const textCss = ({ + theme, + layoutTheme, + severity, + isMobile, +}: WithStyledTheme>) => { + const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_description_default` as const + + const media = isMobile ? 'mobile' : 'desktop' + const typographyToken = `information_card_${layoutTheme}_${severity}_medium_typography_${media}_description` as const + const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const + + return css` + display: flex; + color: ${theme.informationCard[colorToken]}; + font-size: ${theme.informationCard[typographyToken].size}px; + line-height: ${theme.informationCard[typographyToken].lineHeight}px; + font-weight: ${theme.informationCard[typographyToken].fontWeight}; + margin-top: ${theme.informationCard[marginToken]?.innerVerticalDescription}; + ` +} + +export const InformationCardTextInner = styled(Typography)>` + ${textCss} +` diff --git a/src/components/InformationCard/types.ts b/src/components/InformationCard/types.ts new file mode 100644 index 00000000..3887cf9b --- /dev/null +++ b/src/components/InformationCard/types.ts @@ -0,0 +1,21 @@ +import { TUseWithMedia2021 } from 'hooks/useWithMedia' +import React from 'react' + +export type TInformationCardProps = { + severity: 'danger' | 'info' | 'warning', + icon?: string, + action?: React.ReactChild, + layoutTheme: 'default' | 'button_default' | 'button_icon', + children: React.ReactElement | React.ReactElement[], +} + +type TInformationCardChild = Partial< + Pick + & Pick + > + & { children: React.ReactChild | React.ReactChild[] } + +export type TInformationCardTitleProps = TInformationCardChild + +export type TInformationCardTextProps = TInformationCardChild From 972630a98e3017c4bfe5a6648c0a69f13e16e6d5 Mon Sep 17 00:00:00 2001 From: zinovev Date: Thu, 3 Nov 2022 14:23:50 +0700 Subject: [PATCH 10/17] fix type --- src/components/InformationCard/styled.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/InformationCard/styled.ts b/src/components/InformationCard/styled.ts index 1e3ef53a..a831fe4e 100644 --- a/src/components/InformationCard/styled.ts +++ b/src/components/InformationCard/styled.ts @@ -57,15 +57,14 @@ const actionCss = ({ severity, }: WithStyledTheme>) => { const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const marginTop = 'innerVerticalButton' in theme.informationCard[marginToken] ? theme.informationCard[marginToken]!.innerVerticalButton : 0 return css` margin-left: ${theme.informationCard[marginToken]?.innerHorizontalIcon}; @media ${queries2021.isMobile} { ${layoutTheme === 'button_default' && 'margin-left: 0;'}; - margin-top: ${marginTop}; + // types of tokens are inconsistent + margin-top: ${(theme.informationCard[marginToken] as unknown as Record).innerVerticalButton ?? 0}; } ` } From efbdc24a20421b85b29c9d72858ea7761bc11e6f Mon Sep 17 00:00:00 2001 From: zinovev Date: Thu, 3 Nov 2022 14:27:01 +0700 Subject: [PATCH 11/17] add classname prop --- src/components/InformationCard/index.tsx | 7 ++++++- src/components/InformationCard/types.ts | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/InformationCard/index.tsx b/src/components/InformationCard/index.tsx index 74d49cfb..4dcdfaab 100644 --- a/src/components/InformationCard/index.tsx +++ b/src/components/InformationCard/index.tsx @@ -21,6 +21,7 @@ export const InformationCard = ({ icon, action, layoutTheme = 'default', + className, }: TInformationCardProps): JSX.Element => { const { isMobile } = useWithMedia2021() const iconName = icon ?? 'exclamation-circle-filled' @@ -34,7 +35,11 @@ export const InformationCard = ({ ) return ( - + Date: Wed, 9 Nov 2022 20:43:09 +0700 Subject: [PATCH 12/17] change the way of passing props --- .../InformationCard.stories.tsx | 9 ++- src/components/InformationCard/index.tsx | 70 ++++++------------- src/components/InformationCard/styled.ts | 40 ++++++----- src/components/InformationCard/types.ts | 15 +--- 4 files changed, 50 insertions(+), 84 deletions(-) diff --git a/src/components/InformationCard/InformationCard.stories.tsx b/src/components/InformationCard/InformationCard.stories.tsx index 33d33f05..882fee60 100644 --- a/src/components/InformationCard/InformationCard.stories.tsx +++ b/src/components/InformationCard/InformationCard.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Story } from '@storybook/react' -import { InformationCard, InformationCardTitle, InformationCardText } from 'components/InformationCard' +import { InformationCard } from 'components/InformationCard' import Icon from 'components/Icon' import Button from 'components/Button' import { TInformationCardProps } from './types' @@ -9,14 +9,13 @@ const InformationCardStory = (args: TInformationCardProps): JSX.Element => { return ( - В документах не отражены изменения в заказе - Примите изменения, для отображения изменений - + /> ) } const DEFAULT_PROPS: Partial = { + title: 'В документах не отражены изменения в заказе', + description: 'Примите изменения, для отображения изменений', severity: 'info', layoutTheme: 'default', } diff --git a/src/components/InformationCard/index.tsx b/src/components/InformationCard/index.tsx index 4dcdfaab..54ff9555 100644 --- a/src/components/InformationCard/index.tsx +++ b/src/components/InformationCard/index.tsx @@ -4,19 +4,18 @@ import { ActionInner, Container, FlexGrow, - InformationCardTextInner, - InformationCardTitleInner, + InformationCardDescription, + InformationCardTitle, InnerContainer, StyledIcon, } from './styled' import { TInformationCardProps, - TInformationCardTextProps, - TInformationCardTitleProps, } from './types' export const InformationCard = ({ - children, + title, + description, severity, icon, action, @@ -47,13 +46,23 @@ export const InformationCard = ({ /> - {React.Children.map(children, (child) => { - return React.cloneElement(child, { - severity, - layoutTheme, - isMobile, - }) - })} + + {title} + + + {description} + {layoutTheme === 'button_default' && actionComponent} @@ -61,40 +70,3 @@ export const InformationCard = ({ ) } - -export const InformationCardTitle = ({ - children, - layoutTheme = 'default', - severity = 'info', - isMobile = false, -}: TInformationCardTitleProps): JSX.Element => { - return ( - - {children} - - ) -} - -export const InformationCardText = ({ - children, - layoutTheme = 'default', - severity = 'info', - isMobile = false, -} : TInformationCardTextProps): JSX.Element => { - return ( - - {children} - - ) -} diff --git a/src/components/InformationCard/styled.ts b/src/components/InformationCard/styled.ts index a831fe4e..6a104c65 100644 --- a/src/components/InformationCard/styled.ts +++ b/src/components/InformationCard/styled.ts @@ -2,20 +2,26 @@ import Icon from 'components/Icon' import Typography from 'components/Typography' import styled, { css, DefaultTheme } from 'styled-components' import { queries2021 } from 'utils/media-queries' -import { TInformationCardProps, TInformationCardTextProps, TInformationCardTitleProps } from './types' +import { TUseWithMedia2021 } from 'hooks/useWithMedia' +import { TInformationCardProps } from './types' type WithStyledTheme = K & { theme: DefaultTheme } +type TTokenData = Pick + +type TInformationCardChild = TTokenData & Pick const containerCss = ({ theme, layoutTheme, severity, -}: WithStyledTheme) => { +}: WithStyledTheme) => { const paddingToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const const bgColorToken = `information_card_${layoutTheme}_${severity}_medium_color_bg_default` as const const borderRadiusToken = `information_card_${layoutTheme}_${severity}_medium_size_border_radius_default` as const return css` + display: flex; + overflow: hidden; padding-top: ${theme.informationCard[`information_card_${layoutTheme}_${severity}_medium_size_padding_default`]?.top}; padding-left: ${theme.informationCard[paddingToken]?.left}; padding-bottom: ${theme.informationCard[paddingToken]?.bottom}; @@ -25,9 +31,7 @@ const containerCss = ({ ` } -export const Container = styled.div` - display: flex; - overflow: hidden; +export const Container = styled.div` ${containerCss} ` @@ -35,19 +39,19 @@ const iconCss = ({ theme, layoutTheme, severity, -}: WithStyledTheme>) => { +}: WithStyledTheme) => { const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_icon_default` as const return css` + width: 20px; + height: 20px; margin-right: ${theme.informationCard[marginToken]?.innerHorizontalIcon}; fill: ${theme.informationCard[colorToken]}; ` } -export const StyledIcon = styled(Icon)>>` - width: 20px; - height: 20px; +export const StyledIcon = styled(Icon)` ${iconCss} ` @@ -55,10 +59,12 @@ const actionCss = ({ theme, layoutTheme, severity, -}: WithStyledTheme>) => { +}: WithStyledTheme) => { const marginToken = `information_card_${layoutTheme}_${severity}_medium_size_padding_default` as const return css` + display: flex; + align-items: flex-start; margin-left: ${theme.informationCard[marginToken]?.innerHorizontalIcon}; @media ${queries2021.isMobile} { @@ -69,7 +75,7 @@ const actionCss = ({ ` } -export const ActionInner = styled.div>` +export const ActionInner = styled.div` ${actionCss} ` @@ -91,7 +97,7 @@ const titleCss = ({ layoutTheme, severity, isMobile, -}: WithStyledTheme>) => { +}: WithStyledTheme) => { const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_headline_default` as const const media = isMobile ? 'mobile' : 'desktop' @@ -106,16 +112,16 @@ const titleCss = ({ ` } -export const InformationCardTitleInner = styled(Typography)>` +export const InformationCardTitle = styled(Typography)` ${titleCss} ` -const textCss = ({ +const descriptionCss = ({ theme, layoutTheme, severity, isMobile, -}: WithStyledTheme>) => { +}: WithStyledTheme) => { const colorToken = `information_card_${layoutTheme}_${severity}_medium_color_description_default` as const const media = isMobile ? 'mobile' : 'desktop' @@ -132,6 +138,6 @@ const textCss = ({ ` } -export const InformationCardTextInner = styled(Typography)>` - ${textCss} +export const InformationCardDescription = styled(Typography)` + ${descriptionCss} ` diff --git a/src/components/InformationCard/types.ts b/src/components/InformationCard/types.ts index 0e2ca31d..6f7a5be6 100644 --- a/src/components/InformationCard/types.ts +++ b/src/components/InformationCard/types.ts @@ -1,22 +1,11 @@ -import { TUseWithMedia2021 } from 'hooks/useWithMedia' import React from 'react' export type TInformationCardProps = { + title: React.ReactChild, + description: React.ReactChild, severity: 'danger' | 'info' | 'warning', icon?: string, action?: React.ReactChild, layoutTheme: 'default' | 'button_default' | 'button_icon', - children: React.ReactElement | React.ReactElement[], className: string, } - -type TInformationCardChild = Partial< - Pick - & Pick - > - & { children: React.ReactChild | React.ReactChild[] } - -export type TInformationCardTitleProps = TInformationCardChild - -export type TInformationCardTextProps = TInformationCardChild From 73f5f23b4216d0cb7946c8a7900507b95583a346 Mon Sep 17 00:00:00 2001 From: zinovev Date: Wed, 9 Nov 2022 20:54:13 +0700 Subject: [PATCH 13/17] fix types --- src/components/InformationCard/InformationCard.stories.tsx | 2 +- src/components/InformationCard/styled.ts | 2 +- src/components/InformationCard/types.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/InformationCard/InformationCard.stories.tsx b/src/components/InformationCard/InformationCard.stories.tsx index 882fee60..686da738 100644 --- a/src/components/InformationCard/InformationCard.stories.tsx +++ b/src/components/InformationCard/InformationCard.stories.tsx @@ -13,7 +13,7 @@ const InformationCardStory = (args: TInformationCardProps): JSX.Element => { ) } -const DEFAULT_PROPS: Partial = { +const DEFAULT_PROPS: TInformationCardProps = { title: 'В документах не отражены изменения в заказе', description: 'Примите изменения, для отображения изменений', severity: 'info', diff --git a/src/components/InformationCard/styled.ts b/src/components/InformationCard/styled.ts index 6a104c65..259c7efd 100644 --- a/src/components/InformationCard/styled.ts +++ b/src/components/InformationCard/styled.ts @@ -6,7 +6,7 @@ import { TUseWithMedia2021 } from 'hooks/useWithMedia' import { TInformationCardProps } from './types' type WithStyledTheme = K & { theme: DefaultTheme } -type TTokenData = Pick +type TTokenData = Pick, 'layoutTheme' | 'severity'> type TInformationCardChild = TTokenData & Pick diff --git a/src/components/InformationCard/types.ts b/src/components/InformationCard/types.ts index 6f7a5be6..4d9d1d95 100644 --- a/src/components/InformationCard/types.ts +++ b/src/components/InformationCard/types.ts @@ -4,8 +4,8 @@ export type TInformationCardProps = { title: React.ReactChild, description: React.ReactChild, severity: 'danger' | 'info' | 'warning', + layoutTheme?: 'default' | 'button_default' | 'button_icon', icon?: string, action?: React.ReactChild, - layoutTheme: 'default' | 'button_default' | 'button_icon', - className: string, + className?: string, } From 9793bb1d7c1640e0e793af63d3184bb4387f3473 Mon Sep 17 00:00:00 2001 From: zinovev Date: Wed, 9 Nov 2022 21:17:37 +0700 Subject: [PATCH 14/17] update token config --- .../ThemeProvider/tokens/checkbox.ts | 2 +- .../ThemeProvider/tokens/dark/button.ts | 2 +- .../ThemeProvider/tokens/dark/color.ts | 2 +- .../ThemeProvider/tokens/dark/input.ts | 2 +- .../ThemeProvider/tokens/dark/seat.ts | 2 +- .../ThemeProvider/tokens/dark/tag.ts | 2 +- .../ThemeProvider/tokens/informationCard.ts | 2 +- .../ThemeProvider/tokens/light/button.ts | 2 +- .../ThemeProvider/tokens/light/color.ts | 2 +- .../ThemeProvider/tokens/light/input.ts | 2 +- .../ThemeProvider/tokens/light/seat.ts | 2 +- .../ThemeProvider/tokens/light/tag.ts | 2 +- src/components/ThemeProvider/tokens/radio.ts | 2 +- .../ThemeProvider/tokens/switcher.ts | 2 +- .../ThemeProvider/tokens/typography.ts | 2 +- style-dictionary/config.ts | 59 ++++--------------- 16 files changed, 26 insertions(+), 63 deletions(-) diff --git a/src/components/ThemeProvider/tokens/checkbox.ts b/src/components/ThemeProvider/tokens/checkbox.ts index 0df4d1f7..c9a59741 100644 --- a/src/components/ThemeProvider/tokens/checkbox.ts +++ b/src/components/ThemeProvider/tokens/checkbox.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:36 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const check_box_default_medium_color_bg_normal = "#ffffff"; diff --git a/src/components/ThemeProvider/tokens/dark/button.ts b/src/components/ThemeProvider/tokens/dark/button.ts index d094c6c6..77084004 100644 --- a/src/components/ThemeProvider/tokens/dark/button.ts +++ b/src/components/ThemeProvider/tokens/dark/button.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const button_composite_primary_small_color_bg_normal = "#31a55b"; diff --git a/src/components/ThemeProvider/tokens/dark/color.ts b/src/components/ThemeProvider/tokens/dark/color.ts index 380082c1..125a13c0 100644 --- a/src/components/ThemeProvider/tokens/dark/color.ts +++ b/src/components/ThemeProvider/tokens/dark/color.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const colorBgLayoutDefault = "#101014"; diff --git a/src/components/ThemeProvider/tokens/dark/input.ts b/src/components/ThemeProvider/tokens/dark/input.ts index 65d02594..aabb7bd5 100644 --- a/src/components/ThemeProvider/tokens/dark/input.ts +++ b/src/components/ThemeProvider/tokens/dark/input.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:36 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const input_label_default_medium_color_input_label_normal = "#d0d1d7"; diff --git a/src/components/ThemeProvider/tokens/dark/seat.ts b/src/components/ThemeProvider/tokens/dark/seat.ts index 11c57a8a..bb8a4166 100644 --- a/src/components/ThemeProvider/tokens/dark/seat.ts +++ b/src/components/ThemeProvider/tokens/dark/seat.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const airplane_seat_category_one_medium_color_bg_normal = "#212126"; diff --git a/src/components/ThemeProvider/tokens/dark/tag.ts b/src/components/ThemeProvider/tokens/dark/tag.ts index c0aaecff..75f4b036 100644 --- a/src/components/ThemeProvider/tokens/dark/tag.ts +++ b/src/components/ThemeProvider/tokens/dark/tag.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const tag_label_normal_medium_color_bg_default = "#3a3a41"; diff --git a/src/components/ThemeProvider/tokens/informationCard.ts b/src/components/ThemeProvider/tokens/informationCard.ts index ebec6483..8112d11e 100644 --- a/src/components/ThemeProvider/tokens/informationCard.ts +++ b/src/components/ThemeProvider/tokens/informationCard.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 14:14:45 GMT + * Generated on Wed, 09 Nov 2022 14:17:02 GMT */ export const information_card_button_default_danger_medium_color_bg_default = "#fcede8"; diff --git a/src/components/ThemeProvider/tokens/light/button.ts b/src/components/ThemeProvider/tokens/light/button.ts index 628b09a8..45a0f139 100644 --- a/src/components/ThemeProvider/tokens/light/button.ts +++ b/src/components/ThemeProvider/tokens/light/button.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const button_composite_primary_small_color_bg_normal = "#37b866"; diff --git a/src/components/ThemeProvider/tokens/light/color.ts b/src/components/ThemeProvider/tokens/light/color.ts index a1f8a2d6..ba74650a 100644 --- a/src/components/ThemeProvider/tokens/light/color.ts +++ b/src/components/ThemeProvider/tokens/light/color.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const colorBgLayoutDefault = "#fafafb"; diff --git a/src/components/ThemeProvider/tokens/light/input.ts b/src/components/ThemeProvider/tokens/light/input.ts index 6c19f912..54d65f04 100644 --- a/src/components/ThemeProvider/tokens/light/input.ts +++ b/src/components/ThemeProvider/tokens/light/input.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:36 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const input_label_default_medium_color_input_label_normal = "#62657f"; diff --git a/src/components/ThemeProvider/tokens/light/seat.ts b/src/components/ThemeProvider/tokens/light/seat.ts index 9949c139..becae6d1 100644 --- a/src/components/ThemeProvider/tokens/light/seat.ts +++ b/src/components/ThemeProvider/tokens/light/seat.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const airplane_seat_category_one_medium_color_bg_normal = "#ffffff"; diff --git a/src/components/ThemeProvider/tokens/light/tag.ts b/src/components/ThemeProvider/tokens/light/tag.ts index 34171d1c..7cee83aa 100644 --- a/src/components/ThemeProvider/tokens/light/tag.ts +++ b/src/components/ThemeProvider/tokens/light/tag.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const tag_label_normal_medium_color_bg_default = "#edeef3"; diff --git a/src/components/ThemeProvider/tokens/radio.ts b/src/components/ThemeProvider/tokens/radio.ts index a90b2dce..862b6f2f 100644 --- a/src/components/ThemeProvider/tokens/radio.ts +++ b/src/components/ThemeProvider/tokens/radio.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:36 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const radio_button_default_medium_color_bg_normal = "#ffffff"; diff --git a/src/components/ThemeProvider/tokens/switcher.ts b/src/components/ThemeProvider/tokens/switcher.ts index 38cff0c3..e68cb2b9 100644 --- a/src/components/ThemeProvider/tokens/switcher.ts +++ b/src/components/ThemeProvider/tokens/switcher.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:36 GMT + * Generated on Wed, 09 Nov 2022 14:17:01 GMT */ export const switcher_default_medium_color_bg_normal = "#d0d1d7"; diff --git a/src/components/ThemeProvider/tokens/typography.ts b/src/components/ThemeProvider/tokens/typography.ts index 6afffb9b..91c5b7d2 100644 --- a/src/components/ThemeProvider/tokens/typography.ts +++ b/src/components/ThemeProvider/tokens/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 01 Nov 2022 18:38:35 GMT + * Generated on Wed, 09 Nov 2022 14:17:00 GMT */ export const typography_desktop_headline_hero_default = {"fontFamily":"Kupibilet_DemiBold","size":"48","lineHeight":"64","fontWeight":"600"}; diff --git a/style-dictionary/config.ts b/style-dictionary/config.ts index 524cf5e0..3d76a3b1 100644 --- a/style-dictionary/config.ts +++ b/style-dictionary/config.ts @@ -91,6 +91,17 @@ const configs = [ matcher: defaultMatcher('radioButton'), destination: () => `${destinationRoot}/radio.ts`, }, + { + themes: ['light'], + filterName: 'isInformationCard', + transform: transforms.component, + matcher: categoriesMatcher([ + 'informationCardDefault', + 'informationCardButtonDefault', + 'informationCardButtonIcon', + ]), + destination: () => `${destinationRoot}/informationCard.ts`, + }, ] configs.forEach(({ themes, filterName, transform, matcher, destination }) => { @@ -124,51 +135,3 @@ configs.forEach(({ themes, filterName, transform, matcher, destination }) => { }).buildAllPlatforms() }) }) - -StyleDictionary.extend({ - source: [ - source.common, - ], - platforms: { - js: { - transforms: transforms.component, - files: [ - { - destination: `${destinationRoot}/switcher.ts`, - format: 'javascript/es6', - filter: 'isSwitcher', - }, - ], - }, - }, -}).buildAllPlatforms() - - -StyleDictionary.registerFilter({ - name: 'isInformationCard', - matcher(prop) { - return [ - 'informationCardDefault', - 'informationCardButtonDefault', - 'informationCardButtonIcon', - ].includes(prop.attributes.category) - }, -}) - -StyleDictionary.extend({ - source: [ - source.common, - ], - platforms: { - js: { - transforms: transforms.component, - files: [ - { - destination: `${destinationRoot}/informationCard.ts`, - format: 'javascript/es6', - filter: 'isInformationCard', - }, - ], - }, - }, -}).buildAllPlatforms() From 67afe4b85b05610771c950e85d8075951b62a551 Mon Sep 17 00:00:00 2001 From: zinovev Date: Wed, 9 Nov 2022 22:20:42 +0700 Subject: [PATCH 15/17] remove typography usage --- src/components/InformationCard/index.tsx | 3 --- src/components/InformationCard/styled.ts | 5 ++--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/InformationCard/index.tsx b/src/components/InformationCard/index.tsx index 54ff9555..d8075496 100644 --- a/src/components/InformationCard/index.tsx +++ b/src/components/InformationCard/index.tsx @@ -47,8 +47,6 @@ export const InformationCard = ({ ` +export const InformationCardTitle = styled.div` ${titleCss} ` @@ -138,6 +137,6 @@ const descriptionCss = ({ ` } -export const InformationCardDescription = styled(Typography)` +export const InformationCardDescription = styled.div` ${descriptionCss} ` From 3237034694a033798d2e26397af1efb7540a9607 Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Sun, 13 Nov 2022 16:14:21 +0300 Subject: [PATCH 16/17] add isHidden prop to Popover --- src/components/Popover/index.tsx | 5 ++++- src/components/Popover/types.ts | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index 5adf6b9f..ddac9ecc 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -23,6 +23,7 @@ function Popover(props: TPopoverProps): JSX.Element { zIndex = OVERLAY_Z_INDEX - 1, className = '', autoWidth = false, + isHidden = false, } = props const { @@ -37,6 +38,8 @@ function Popover(props: TPopoverProps): JSX.Element { side, } = usePopover(placement) + const isPopoverShow = isOpen && !isHidden + return ( <>
{children}
- {isOpen && ( + {isPopoverShow && (
From 9a5e0afa06b9d622e6d56efff33d4cf6cf86110f Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Thu, 19 Jan 2023 20:04:59 +0300 Subject: [PATCH 17/17] Site 4233/rzd fares step1 (#588) * Update @kupibilet/icons * Update icons * add name prop to Switch * Created RFSwitch * SITE-4092/move-document-to-step1 (#580) * Support icon-inherit-color to Tag component * Add autoWidth prop to Popover * fix * fix * Fix popover padding * Update @kupibilet/icons * Update icons * add name prop to Switch * Created RFSwitch * 24.7.1 * Add disabled prop for Toggler * added skeleton (#579) * added skeleton * SkeletonWithContainer * added tokens * duration * after fix * min-width * new animation Co-authored-by: zhenya * 24.7.2 Co-authored-by: ZhenyaNeVihodi <38380134+ZhenyaNeVihodi@users.noreply.github.com> Co-authored-by: zhenya --- src/components/Toggler/Toggler.stories.tsx | 1 + src/components/Toggler/TogglerGroup/index.tsx | 4 ++++ src/components/Toggler/TogglerItem/index.tsx | 3 +++ src/components/Toggler/TogglerItem/styled.ts | 8 ++++++++ 4 files changed, 16 insertions(+) diff --git a/src/components/Toggler/Toggler.stories.tsx b/src/components/Toggler/Toggler.stories.tsx index e91fe808..d0c924fe 100644 --- a/src/components/Toggler/Toggler.stories.tsx +++ b/src/components/Toggler/Toggler.stories.tsx @@ -20,6 +20,7 @@ export const GenderToggler = (args: TTogglerProps): JSX.Element => { {...args} onChange={onChange} name="gender" + disabled > Мужской diff --git a/src/components/Toggler/TogglerGroup/index.tsx b/src/components/Toggler/TogglerGroup/index.tsx index 596bf9ea..5d95bc42 100644 --- a/src/components/Toggler/TogglerGroup/index.tsx +++ b/src/components/Toggler/TogglerGroup/index.tsx @@ -30,6 +30,8 @@ type TProps = { name?: string, helperText?: React.ReactNode, + + disabled?: boolean, } /** @@ -44,6 +46,7 @@ const TogglerGroup = ({ errorMessage = '', name = '', helperText = '', + disabled = false, ...props }: TProps): JSX.Element => { return ( @@ -68,6 +71,7 @@ const TogglerGroup = ({ errorMessage, name, hasDelimiter, + disabled, ...props, }) })} diff --git a/src/components/Toggler/TogglerItem/index.tsx b/src/components/Toggler/TogglerItem/index.tsx index 5f2b8b52..1b4124b4 100644 --- a/src/components/Toggler/TogglerItem/index.tsx +++ b/src/components/Toggler/TogglerItem/index.tsx @@ -17,6 +17,7 @@ type TProps = { onBlur?: () => void, className?: string, hasDelimiter?: boolean, + disabled?: boolean, } const ENTER_KEY_CODE = 13 @@ -32,6 +33,7 @@ const TogglerItem = ({ onBlur, className = '', hasDelimiter = true, + disabled = false, ...props }: TProps): JSX.Element => { const isSelected = value === currentValue @@ -43,6 +45,7 @@ const TogglerItem = ({ as="div" onClick={() => onChange(value)} className={className} + disabled={disabled} > {children} diff --git a/src/components/Toggler/TogglerItem/styled.ts b/src/components/Toggler/TogglerItem/styled.ts index f7ed52c8..63884e50 100644 --- a/src/components/Toggler/TogglerItem/styled.ts +++ b/src/components/Toggler/TogglerItem/styled.ts @@ -3,6 +3,7 @@ import { borderRadiusSmall } from 'utils/borderRadius' interface TStyledWrapperProps { isSelected: boolean, + disabled: boolean, } export const StyledWrapper = styled.span` @@ -26,6 +27,13 @@ export const StyledWrapper = styled.span` font-weight: 500; box-shadow: 0px 1px 3px rgba(98, 112, 139, 0.2); `} + + ${({ disabled }) => disabled && css` + pointer-events: none; + cursor: default; + color: ${({ theme }) => theme.color.colorTextAccentDisable}; + `} + ${({ theme }) => css` @media ${theme.queries.isMobile} { font-size: 14px;