From 88dc0678763aa98716a4567a4f3cf50514cb34be Mon Sep 17 00:00:00 2001 From: Vadym Date: Fri, 26 Jan 2024 15:14:06 +0100 Subject: [PATCH] docs(ColorPage): shadow page --- .../src/docs/components/Shadow/Shadow.tsx | 97 ------------------- .../Shadow/ShadowExamples.module.scss | 82 ---------------- .../docs/components/Shadow/ShadowExamples.tsx | 45 --------- .../src/docs/components/Table/Table.css | 7 ++ .../docs/foundations/Color/Color.stories.mdx | 8 +- .../foundations/Shadow/Shadow.stories.mdx | 44 ++++----- .../docs/foundations/Shadow/ShadowTable.tsx | 4 +- .../src/docs/foundations/Shadow/constants.ts | 16 +-- 8 files changed, 46 insertions(+), 257 deletions(-) delete mode 100644 packages/react-components/src/docs/components/Shadow/Shadow.tsx delete mode 100644 packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss delete mode 100644 packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx diff --git a/packages/react-components/src/docs/components/Shadow/Shadow.tsx b/packages/react-components/src/docs/components/Shadow/Shadow.tsx deleted file mode 100644 index d774529f0..000000000 --- a/packages/react-components/src/docs/components/Shadow/Shadow.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; - -import '../Table/Table.css'; - -export const Shadow = (): React.ReactElement => { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EnumTokenUse case
ShadowToken.Float--shadow-floatCards, buttons, other elevated elements
ShadowToken.PopOver--shadow-pop-overPopovers
ShadowToken.Modal--shadow-modalModals
ShadowToken.Tooltip--shadow-tooltipTooltips
ShadowToken.TooltipArrowBottom--shadow-tooltip-arrow-bottomTooltip arrow pointing down
ShadowToken.TooltipArrowTop--shadow-tooltip-arrow-topTooltip arrow pointing up
ShadowToken.TooltipArrowRight--shadow-tooltip-arrow-rightTooltip arrow pointing right
ShadowToken.TooltipArrowLeft--shadow-tooltip-arrow-leftTooltip arrow pointing left
ShadowToken.Focus--shadow-focusFocus indicators
ShadowToken.DividerBottom--shadow-divider-bottomSeparator on bottom of the element
ShadowToken.DividerTop--shadow-divider-topSeparator on top of the element
ShadowToken.DividerBottomLeft--shadow-divider-bottom-leftSeparator on bottom left of the element
ShadowToken.DividerTopLeft--shadow-divider-top-leftSeparator on top left of the element
ShadowToken.DividerTopRight--shadow-divider-top-rightSeparator on top right of the element
ShadowToken.DividerBottomRight--shadow-divider-bottom-rightSeparator on bottom right of the element
ShadowToken.MessageBox--shadow-message-boxMessage boxes
-
- ); -}; diff --git a/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss b/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss deleted file mode 100644 index 15fb40587..000000000 --- a/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss +++ /dev/null @@ -1,82 +0,0 @@ -.example-wrapper { - display: flex; - align-items: center; - justify-content: center; - border: 1px solid var(--border-subtle); - border-radius: var(--radius-4); - width: 64px; - height: 64px; -} - -.example-wrapped { - border-radius: var(--radius-4); - background: var(--surface-primary-active-colored); - width: 50px; - height: 50px; -} - -.div { - &--float { - box-shadow: var(--shadow-float); - } - - &--pop-over { - box-shadow: var(--shadow-pop-over); - } - - &--modal { - box-shadow: var(--shadow-modal); - } - - &--tooltip { - box-shadow: var(--shadow-tooltip); - } - - &--tooltip-arrow-bottom { - box-shadow: var(--shadow-tooltip-arrow-bottom); - } - - &--tooltip-arrow-top { - box-shadow: var(--shadow-tooltip-arrow-top); - } - - &--tooltip-arrow-right { - box-shadow: var(--shadow-tooltip-arrow-right); - } - - &--tooltip-arrow-left { - box-shadow: var(--shadow-tooltip-arrow-left); - } - - &--focus { - box-shadow: var(--shadow-focus); - } - - &--divider-bottom { - box-shadow: var(--shadow-divider-bottom); - } - - &--divider-top { - box-shadow: var(--shadow-divider-top); - } - - &--divider-bottom-left { - box-shadow: var(--shadow-divider-bottom-left); - } - - &--divider-top-left { - box-shadow: var(--shadow-divider-top-left); - } - - &--divider-top-right { - box-shadow: var(--shadow-divider-top-right); - } - - &--divider-bottom-right { - box-shadow: var(--shadow-divider-bottom-right); - } - - &--message-box { - box-shadow: var(--shadow-message-box); - } -} diff --git a/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx b/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx deleted file mode 100644 index 2970a5fa8..000000000 --- a/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -import { StoryDescriptor } from '../StoryDescriptor'; - -import styles from './ShadowExamples.module.scss'; - -const baseClass = 'div'; - -const Example = ({ name, token }: { name: string; token: string }) => { - return ( - -
-
-
- - ); -}; - -export const ShadowExamples = (): React.ReactElement => { - return ( -
- - - - - - - - - - - - - - - - -
- ); -}; diff --git a/packages/react-components/src/docs/components/Table/Table.css b/packages/react-components/src/docs/components/Table/Table.css index aeb8cc04d..61bff9ded 100644 --- a/packages/react-components/src/docs/components/Table/Table.css +++ b/packages/react-components/src/docs/components/Table/Table.css @@ -45,3 +45,10 @@ table tr:not(:last-of-type) td { width: 32px; height: 32px; } + +.shadow-example { + border-radius: var(--radius-4); + background: var(--surface-primary-default); + width: 48px; + height: 48px; +} diff --git a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx index 012127075..fa617d87f 100644 --- a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx +++ b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx @@ -16,7 +16,13 @@ To use color tokens in your project, you need to import the `DesignToken` consta import { DesignToken } from '@livechat/design-system-react-components'; ``` -
+`DesignToken` contains all the color tokens available in the design system. You can use them in your project by using the `var()` function in CSS: + +```css +.my-element { + background-color: var(DesignToken.SurfaceBasicSubtle); +} +``` ## Content diff --git a/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx b/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx index dcd3e960c..3b3976502 100644 --- a/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx +++ b/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx @@ -1,6 +1,6 @@ -import { Meta, Canvas } from '@storybook/addon-docs'; -import { Shadow } from '../../components/Shadow/Shadow'; -import { ShadowExamples } from '../../components/Shadow/ShadowExamples'; +import { Meta } from '@storybook/addon-docs'; +import { ShadowTable } from './ShadowTable'; +import { ShadowTokens } from './constants'; @@ -8,22 +8,22 @@ import { ShadowExamples } from '../../components/Shadow/ShadowExamples'; Shadows tokens in a design system add depth for a polished look and establishing hierarchy and predictability in user interface. - - - - -## Examples - - - - +## Usage + +To use shadow tokens in your project, you need to import the `ShadowToken` constant from `@livechat/design-system-react-components`: + +```jsx +import { ShadowToken } from '@livechat/design-system-react-components'; +``` + +`ShadowToken` contains all the shadow tokens available in the design system. You can use them in your project by using the `var()` function in CSS: + +```css +.my-element { + box-shadow: var(${ShadowToken.PopOver}); +} +``` + +## Tokens + + diff --git a/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx b/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx index 6ebb02125..9d05dc1ad 100644 --- a/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx +++ b/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx @@ -25,8 +25,8 @@ export const ShadowTable: React.FC = ({ data }) => { handleCopyText(shadow.enum)}>
{shadow.enum} diff --git a/packages/react-components/src/docs/foundations/Shadow/constants.ts b/packages/react-components/src/docs/foundations/Shadow/constants.ts index 70ff221fb..2f143bc0b 100644 --- a/packages/react-components/src/docs/foundations/Shadow/constants.ts +++ b/packages/react-components/src/docs/foundations/Shadow/constants.ts @@ -2,14 +2,6 @@ import { ShadowToken, ShadowTokenKey } from '../../../foundations/shadow-token'; import { ShadowShape } from './types'; -export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map( - ([key, value]) => ({ - enum: key, - value, - desc: ShadowDescription[key as ShadowTokenKey], - }) -); - const ShadowDescription: Record = { Float: 'Float sample description', PopOver: 'PopOver sample description', @@ -29,3 +21,11 @@ const ShadowDescription: Record = { DividerBottomRight: 'DividerBottomRight sample description', MessageBox: 'MessageBox sample description', }; + +export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map( + ([key, value]) => ({ + enum: key as ShadowTokenKey, + value, + desc: ShadowDescription[key as ShadowTokenKey], + }) +);