From b9d54489d35e6e77f5b152b2931f13569571c660 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 16 Jul 2024 23:56:10 +0500 Subject: [PATCH] feat(plasma-b2c): Add `ViewContainer` and examples --- .../.storybook/decoratorViewContainer.tsx | 28 +++ packages/plasma-b2c/.storybook/preview.ts | 3 +- .../IconButton/IconButton.stories.tsx | 2 +- .../src/components/Popover/Popover.config.ts | 2 +- .../components/Popover/Popover.stories.tsx | 2 +- .../ViewContainer/ViewContainer.config.ts | 182 ++++++++++++++ .../ViewContainer/ViewContainer.stories.tsx | 31 ++- .../components/ViewContainer/ViewContainer.ts | 7 + .../ViewContainer/ViewContainer.tsx | 238 ------------------ .../src/components/ViewContainer/index.ts | 1 + 10 files changed, 237 insertions(+), 259 deletions(-) create mode 100644 packages/plasma-b2c/.storybook/decoratorViewContainer.tsx create mode 100644 packages/plasma-b2c/src/components/ViewContainer/ViewContainer.config.ts create mode 100644 packages/plasma-b2c/src/components/ViewContainer/ViewContainer.ts delete mode 100644 packages/plasma-b2c/src/components/ViewContainer/ViewContainer.tsx create mode 100644 packages/plasma-b2c/src/components/ViewContainer/index.ts diff --git a/packages/plasma-b2c/.storybook/decoratorViewContainer.tsx b/packages/plasma-b2c/.storybook/decoratorViewContainer.tsx new file mode 100644 index 0000000000..7b1043691b --- /dev/null +++ b/packages/plasma-b2c/.storybook/decoratorViewContainer.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { ViewContainer } from '../src/components/ViewContainer/ViewContainer'; + +export const withViewContainer = (Story, context) => { + return ( + <> +
+

Default view

+ + + +
+
+

OnDark view

+ + + +
+
+

OnLight view

+ + + +
+ + ); +}; diff --git a/packages/plasma-b2c/.storybook/preview.ts b/packages/plasma-b2c/.storybook/preview.ts index 151d88c9c1..74c5fdbaba 100644 --- a/packages/plasma-b2c/.storybook/preview.ts +++ b/packages/plasma-b2c/.storybook/preview.ts @@ -2,6 +2,7 @@ import type { Preview } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import { withTheme } from './decoratorThemes'; import { withToast } from './decoratorToast'; +import { withViewContainer } from './decoratorViewContainer'; // Workaround: to make VoiceOver read russian text properly if (typeof document !== 'undefined') { @@ -9,7 +10,7 @@ if (typeof document !== 'undefined') { } const preview: Preview = { - decorators: [withKnobs, withTheme, withToast], + decorators: [withKnobs, withViewContainer, withTheme, withToast], globalTypes: { theme: { description: 'Global theme for components', diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx b/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx index dfb92906be..a48b7c831f 100644 --- a/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx @@ -77,7 +77,7 @@ export const Default: StoryObj> = { argTypes: { ...disableProps(['children']) }, render: (args) => ( - + ), }; diff --git a/packages/plasma-b2c/src/components/Popover/Popover.config.ts b/packages/plasma-b2c/src/components/Popover/Popover.config.ts index f6a8d7a986..c6ca29bf72 100644 --- a/packages/plasma-b2c/src/components/Popover/Popover.config.ts +++ b/packages/plasma-b2c/src/components/Popover/Popover.config.ts @@ -12,7 +12,7 @@ export const config = { ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--plasma-colors-surface-solid03); + ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); `, }, }, diff --git a/packages/plasma-b2c/src/components/Popover/Popover.stories.tsx b/packages/plasma-b2c/src/components/Popover/Popover.stories.tsx index 6d55d3d21e..edcc3e630c 100644 --- a/packages/plasma-b2c/src/components/Popover/Popover.stories.tsx +++ b/packages/plasma-b2c/src/components/Popover/Popover.stories.tsx @@ -84,7 +84,7 @@ type StoryPopoverProps = ComponentProps & { }; const StyledContent = styled.div` - background: var(--plasma-colors-surface-solid03); + background: var(--surface-solid-tertiary); padding: 1rem; border-radius: 0.5rem; diff --git a/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.config.ts b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.config.ts new file mode 100644 index 0000000000..eca04fd215 --- /dev/null +++ b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.config.ts @@ -0,0 +1,182 @@ +import { css } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + variations: { + view: { + onDark: css` + --background-primary: var(--dark-background-primary); + --text-primary-hover: var(--on-dark-text-primary-hover); + --text-primary-active: var(--on-dark-text-primary-active); + --text-primary: var(--on-dark-text-primary); + --text-secondary-hover: var(--on-dark-text-secondary-hover); + --text-secondary-active: var(--on-dark-text-secondary-active); + --text-secondary: var(--on-dark-text-secondary); + --text-tertiary-hover: var(--on-dark-text-tertiary-hover); + --text-tertiary-active: var(--on-dark-text-tertiary-active); + --text-tertiary: var(--on-dark-text-tertiary); + --text-paragraph-hover: var(--on-dark-text-paragraph-hover); + --text-paragraph-active: var(--on-dark-text-paragraph-active); + --text-paragraph: var(--on-dark-text-paragraph); + --text-accent-hover: var(--on-dark-text-accent-hover); + --text-accent-active: var(--on-dark-text-accent-active); + --text-accent: var(--on-dark-text-accent); + --text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover); + --text-accent-gradient-active: var(--on-dark-text-accent-gradient-active); + --text-accent-gradient: var(--on-dark-text-accent-gradient); + --text-positive-hover: var(--on-dark-text-positive-hover); + --text-positive-active: var(--on-dark-text-positive-active); + --text-positive: var(--on-dark-text-positive); + --text-warning-hover: var(--on-dark-text-warning-hover); + --text-warning-active: var(--on-dark-text-warning-active); + --text-warning: var(--on-dark-text-warning); + --text-negative-hover: var(--on-dark-text-negative-hover); + --text-negative-active: var(--on-dark-text-negative-active); + --text-negative: var(--on-dark-text-negative); + --surface-solid-primary-hover: var(--on-dark-surface-solid-primary-hover); + --surface-solid-primary-active: var(--on-dark-surface-solid-primary-active); + --surface-solid-primary: var(--on-dark-surface-solid-primary); + --surface-solid-secondary-hover: var(--on-dark-surface-solid-secondary-hover); + --surface-solid-secondary-active: var(--on-dark-surface-solid-secondary-active); + --surface-solid-secondary: var(--on-dark-surface-solid-secondary); + --surface-solid-tertiary-hover: var(--on-dark-surface-solid-tertiary-hover); + --surface-solid-tertiary-active: var(--on-dark-surface-solid-tertiary-active); + --surface-solid-tertiary: var(--on-dark-surface-solid-tertiary); + --surface-solid-card-hover: var(--on-dark-surface-solid-card-hover); + --surface-solid-card-active: var(--on-dark-surface-solid-card-active); + --surface-solid-card: var(--on-dark-surface-solid-card); + --surface-solid-default-hover: var(--on-dark-surface-solid-default-hover); + --surface-solid-default-active: var(--on-dark-surface-solid-default-active); + --surface-solid-default: var(--on-dark-surface-solid-default); + --surface-transparent-primary-hover: var(--on-dark-surface-transparent-primary-hover); + --surface-transparent-primary-active: var(--on-dark-surface-transparent-primary-active); + --surface-transparent-primary: var(--on-dark-surface-transparent-primary); + --surface-transparent-secondary-hover: var(--on-dark-surface-transparent-secondary-hover); + --surface-transparent-secondary-active: var(--on-dark-surface-transparent-secondary-active); + --surface-transparent-secondary: var(--on-dark-surface-transparent-secondary); + --surface-transparent-tertiary-hover: var(--on-dark-surface-transparent-tertiary-hover); + --surface-transparent-tertiary-active: var(--on-dark-surface-transparent-tertiary-active); + --surface-transparent-tertiary: var(--on-dark-surface-transparent-tertiary); + --surface-transparent-deep-hover: var(--on-dark-surface-transparent-deep-hover); + --surface-transparent-deep-active: var(--on-dark-surface-transparent-deep-active); + --surface-transparent-deep: var(--on-dark-surface-transparent-deep); + --surface-transparent-card-hover: var(--on-dark-surface-transparent-card-hover); + --surface-transparent-card-active: var(--on-dark-surface-transparent-card-active); + --surface-transparent-card: var(--on-dark-surface-transparent-card); + --surface-accent-hover: var(--on-dark-surface-accent-hover); + --surface-accent-active: var(--on-dark-surface-accent-active); + --surface-accent: var(--on-dark-surface-accent); + --surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover); + --surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active); + --surface-accent-gradient: var(--on-dark-surface-accent-gradient); + --surface-positive-hover: var(--on-dark-surface-positive-hover); + --surface-positive-active: var(--on-dark-surface-positive-active); + --surface-positive: var(--on-dark-surface-positive); + --surface-warning-hover: var(--on-dark-surface-warning-hover); + --surface-warning-active: var(--on-dark-surface-warning-active); + --surface-warning: var(--on-dark-surface-warning); + --surface-negative-hover: var(--on-dark-surface-negative-hover); + --surface-negative-active: var(--on-dark-surface-negative-active); + --surface-negative: var(--on-dark-surface-negative); + --inverse-text-primary-hover: var(--on-light-text-primary-hover); + --inverse-text-primary-active: var(--on-light-text-primary-active); + --inverse-text-primary: var(--on-light-text-primary); + --inverse-text-secondary-hover: var(--on-light-text-secondary-hover); + --inverse-text-secondary-active: var(--on-light-text-secondary-active); + --inverse-text-secondary: var(--on-light-text-secondary); + --inverse-text-tertiary-hover: var(--on-light-text-tertiary-hover); + --inverse-text-tertiary-active: var(--on-light-text-tertiary-active); + --inverse-text-tertiary: var(--on-light-text-tertiary); + --inverse-text-paragraph-hover: var(--on-light-text-paragraph-hover); + --inverse-text-paragraph-active: var(--on-light-text-paragraph-active); + --inverse-text-paragraph: var(--on-light-text-paragraph); + `, + onLight: css` + --background-primary: var(--light-background-primary); + --text-primary-hover: var(--on-light-text-primary-hover); + --text-primary-active: var(--on-light-text-primary-active); + --text-primary: var(--on-light-text-primary); + --text-secondary-hover: var(--on-light-text-secondary-hover); + --text-secondary-active: var(--on-light-text-secondary-active); + --text-secondary: var(--on-light-text-secondary); + --text-tertiary-hover: var(--on-light-text-tertiary-hover); + --text-tertiary-active: var(--on-light-text-tertiary-active); + --text-tertiary: var(--on-light-text-tertiary); + --text-paragraph-hover: var(--on-light-text-paragraph-hover); + --text-paragraph-active: var(--on-light-text-paragraph-active); + --text-paragraph: var(--on-light-text-paragraph); + --text-accent-hover: var(--on-light-text-accent-hover); + --text-accent-active: var(--on-light-text-accent-active); + --text-accent: var(--on-light-text-accent); + --text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover); + --text-accent-gradient-active: var(--on-light-text-accent-gradient-active); + --text-accent-gradient: var(--on-light-text-accent-gradient); + --text-positive-hover: var(--on-light-text-positive-hover); + --text-positive-active: var(--on-light-text-positive-active); + --text-positive: var(--on-light-text-positive); + --text-warning-hover: var(--on-light-text-warning-hover); + --text-warning-active: var(--on-light-text-warning-active); + --text-warning: var(--on-light-text-warning); + --text-negative-hover: var(--on-light-text-negative-hover); + --text-negative-active: var(--on-light-text-negative-active); + --text-negative: var(--on-light-text-negative); + --surface-solid-primary-hover: var(--on-light-surface-solid-primary-hover); + --surface-solid-primary-active: var(--on-light-surface-solid-primary-active); + --surface-solid-primary: var(--on-light-surface-solid-primary); + --surface-solid-secondary-hover: var(--on-light-surface-solid-secondary-hover); + --surface-solid-secondary-active: var(--on-light-surface-solid-secondary-active); + --surface-solid-secondary: var(--on-light-surface-solid-secondary); + --surface-solid-tertiary-hover: var(--on-light-surface-solid-tertiary-hover); + --surface-solid-tertiary-active: var(--on-light-surface-solid-tertiary-active); + --surface-solid-tertiary: var(--on-light-surface-solid-tertiary); + --surface-solid-card-hover: var(--on-light-surface-solid-card-hover); + --surface-solid-card-active: var(--on-light-surface-solid-card-active); + --surface-solid-card: var(--on-light-surface-solid-card); + --surface-solid-default-hover: var(--on-light-surface-solid-default-hover); + --surface-solid-default-active: var(--on-light-surface-solid-default-active); + --surface-solid-default: var(--on-light-surface-solid-default); + --surface-transparent-primary-hover: var(--on-light-surface-transparent-primary-hover); + --surface-transparent-primary-active: var(--on-light-surface-transparent-primary-active); + --surface-transparent-primary: var(--on-light-surface-transparent-primary); + --surface-transparent-secondary-hover: var(--on-light-surface-transparent-secondary-hover); + --surface-transparent-secondary-active: var(--on-light-surface-transparent-secondary-active); + --surface-transparent-secondary: var(--on-light-surface-transparent-secondary); + --surface-transparent-tertiary-hover: var(--on-light-surface-transparent-tertiary-hover); + --surface-transparent-tertiary-active: var(--on-light-surface-transparent-tertiary-active); + --surface-transparent-tertiary: var(--on-light-surface-transparent-tertiary); + --surface-transparent-deep-hover: var(--on-light-surface-transparent-deep-hover); + --surface-transparent-deep-active: var(--on-light-surface-transparent-deep-active); + --surface-transparent-deep: var(--on-light-surface-transparent-deep); + --surface-transparent-card-hover: var(--on-light-surface-transparent-card-hover); + --surface-transparent-card-active: var(--on-light-surface-transparent-card-active); + --surface-transparent-card: var(--on-light-surface-transparent-card); + --surface-accent-hover: var(--on-light-surface-accent-hover); + --surface-accent-active: var(--on-light-surface-accent-active); + --surface-accent: var(--on-light-surface-accent); + --surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover); + --surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active); + --surface-accent-gradient: var(--on-light-surface-accent-gradient); + --surface-positive-hover: var(--on-light-surface-positive-hover); + --surface-positive-active: var(--on-light-surface-positive-active); + --surface-positive: var(--on-light-surface-positive); + --surface-warning-hover: var(--on-light-surface-warning-hover); + --surface-warning-active: var(--on-light-surface-warning-active); + --surface-warning: var(--on-light-surface-warning); + --surface-negative-hover: var(--on-light-surface-negative-hover); + --surface-negative-active: var(--on-light-surface-negative-active); + --surface-negative: var(--on-light-surface-negative); + --inverse-text-primary-hover: var(--on-dark-text-primary-hover); + --inverse-text-primary-active: var(--on-dark-text-primary-active); + --inverse-text-primary: var(--on-dark-text-primary); + --inverse-text-secondary-hover: var(--on-dark-text-secondary-hover); + --inverse-text-secondary-active: var(--on-dark-text-secondary-active); + --inverse-text-secondary: var(--on-dark-text-secondary); + --inverse-text-tertiary-hover: var(--on-dark-text-tertiary-hover); + --inverse-text-tertiary-active: var(--on-dark-text-tertiary-active); + --inverse-text-tertiary: var(--on-dark-text-tertiary); + --inverse-text-paragraph-hover: var(--on-dark-text-paragraph-hover); + --inverse-text-paragraph-active: var(--on-dark-text-paragraph-active); + --inverse-text-paragraph: var(--on-dark-text-paragraph); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.stories.tsx b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.stories.tsx index d375b105cb..e6ceb08b34 100644 --- a/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.stories.tsx +++ b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.stories.tsx @@ -18,35 +18,32 @@ export default meta; type Story = StoryObj; -// const StoryBaseButton: Story = { -// args: { -// view: 'default', -// }, -// }; +const backgroundPrimary = '--background-primary'; +const textPrimary = '--text-primary'; const ViewExample = ({ view }: StoryViewProps) => { return ( <>

view: {view}

- -

Inside ViewContainer

-