From 8ce5403e94dcda858c832e61d8f2eb74008b3685 Mon Sep 17 00:00:00 2001 From: Guillaume NICOLAS Date: Tue, 26 Sep 2023 11:20:15 +0200 Subject: [PATCH] chore: migrate status page and status block (#4906) --- packages/design-docs/.storybook/main.js | 2 +- packages/design-docs/package.json | 1 + .../design-docs/src/StatusTable.module.scss | 39 + packages/design-docs/src/StatusTable.tsx | 58 ++ packages/design-docs/src/Statuses.mdx | 11 + packages/design-system/package.json | 1 + .../src/stories/Status.block.tsx | 9 + .../src/stories/clickable/Button.mdx | 11 +- .../src/stories/clickable/ButtonAsLink.mdx | 11 +- .../src/stories/clickable/ButtonIcon.mdx | 11 +- .../src/stories/clickable/Dropdown.mdx | 12 +- .../src/stories/clickable/Link.mdx | 12 +- .../src/stories/feedback/EmptyState.mdx | 11 +- .../src/stories/feedback/ErrorState.mdx | 11 +- .../src/stories/feedback/Loading.mdx | 10 +- .../src/stories/feedback/Skeleton.mdx | 11 +- .../src/stories/feedback/Status.mdx | 11 +- .../src/stories/form/Affix/Affixes.mdx | 10 +- .../src/stories/form/Buttons/FormButtons.mdx | 11 +- .../form/Field/Datalist/Input.Datalist.mdx | 10 +- .../src/stories/form/Field/FormField.mdx | 10 +- .../form/Field/Input/Input.Checkbox.mdx | 12 +- .../stories/form/Field/Input/Input.Color.mdx | 10 +- .../stories/form/Field/Input/Input.Copy.mdx | 11 +- .../stories/form/Field/Input/Input.Date.mdx | 10 +- .../form/Field/Input/Input.DatetimeLocal.mdx | 10 +- .../stories/form/Field/Input/Input.Email.mdx | 10 +- .../stories/form/Field/Input/Input.File.mdx | 10 +- .../stories/form/Field/Input/Input.Month.mdx | 10 +- .../stories/form/Field/Input/Input.Number.mdx | 10 +- .../stories/form/Field/Input/Input.Radio.mdx | 10 +- .../stories/form/Field/Input/Input.Search.mdx | 6 +- .../stories/form/Field/Input/Input.Tel.mdx | 10 +- .../stories/form/Field/Input/Input.Text.mdx | 10 +- .../stories/form/Field/Input/Input.Time.mdx | 10 +- .../form/Field/Input/Input.ToggleSwitch.mdx | 10 +- .../stories/form/Field/Input/Input.Url.mdx | 10 +- .../stories/form/Field/Input/Input.Week.mdx | 10 +- .../src/stories/form/Field/Input/Password.mdx | 10 +- .../form/Field/Select/Input.Select.mdx | 10 +- .../form/Field/Textarea/Input.Textarea.mdx | 10 +- .../src/stories/form/FieldCombobox.mdx | 4 + .../src/stories/form/Fieldset/Fieldset.mdx | 10 +- .../design-system/src/stories/form/Form.mdx | 12 +- .../src/stories/form/InlineEditing.mdx | 8 +- .../src/stories/form/RichRadioButton.mdx | 10 +- .../design-system/src/stories/form/Switch.mdx | 4 +- .../design-system/src/stories/icons/Icon.mdx | 10 +- .../src/stories/icons/SizedIcon.mdx | 10 +- .../design-system/src/stories/layout/Card.mdx | 10 +- .../src/stories/layout/Modal.mdx | 11 +- .../src/stories/layout/Stack.mdx | 11 +- .../src/stories/messaging/Badge.mdx | 3 + .../src/stories/messaging/InlineMessage.mdx | 10 +- .../src/stories/messaging/Message.mdx | 16 +- .../src/stories/messaging/Popover.mdx | 10 +- .../src/stories/messaging/Tag.mdx | 11 +- .../src/stories/messaging/Tooltip.mdx | 11 +- .../src/stories/navigation/Accordion.mdx | 7 +- .../src/stories/navigation/Breadcrumbs.mdx | 11 +- .../src/stories/navigation/Divider.mdx | 11 +- .../src/stories/navigation/FloatingDrawer.mdx | 7 +- .../src/stories/navigation/Stepper.Step.mdx | 11 +- .../src/stories/navigation/Stepper.mdx | 12 +- .../src/stories/navigation/Tabs.mdx | 11 +- .../design-system/src/stories/status.json | 691 +++++++++++++++++- .../components/Statuses/Status.module.scss | 75 ++ .../src/components/Statuses/Status.tsx | 25 + .../src/components/Statuses/Statuses.tsx | 36 + .../src/components/Statuses/Statuses.types.ts | 23 + .../src/components/Statuses/index.ts | 2 + .../storybook-docs/src/components/index.ts | 1 + 72 files changed, 1200 insertions(+), 356 deletions(-) create mode 100644 packages/design-docs/src/StatusTable.module.scss create mode 100644 packages/design-docs/src/StatusTable.tsx create mode 100644 packages/design-docs/src/Statuses.mdx create mode 100644 packages/design-system/src/stories/Status.block.tsx create mode 100644 packages/storybook-docs/src/components/Statuses/Status.module.scss create mode 100644 packages/storybook-docs/src/components/Statuses/Status.tsx create mode 100644 packages/storybook-docs/src/components/Statuses/Statuses.tsx create mode 100644 packages/storybook-docs/src/components/Statuses/Statuses.types.ts create mode 100644 packages/storybook-docs/src/components/Statuses/index.ts diff --git a/packages/design-docs/.storybook/main.js b/packages/design-docs/.storybook/main.js index e1c0bcbaa00..f63db26fc8f 100644 --- a/packages/design-docs/.storybook/main.js +++ b/packages/design-docs/.storybook/main.js @@ -14,7 +14,7 @@ const STORIES = [ `${rootPath}src/Welcome.mdx`, `${rootPath}src/GettingStarted.mdx`, `${rootPath}src/Principles.mdx`, - // `${rootPath}src/Status.mdx`, + `${rootPath}src/Statuses.mdx`, // `${rootPath}src/Catalog.mdx`, `${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`, `${rootPath}src/content/Internationalization.@(js|tsx|mdx)`, diff --git a/packages/design-docs/package.json b/packages/design-docs/package.json index c83418e8496..b9e98a2d4f0 100644 --- a/packages/design-docs/package.json +++ b/packages/design-docs/package.json @@ -25,6 +25,7 @@ "@storybook/react": "^7.4.1", "@talend/design-system": "^7.15.0", "@talend/design-tokens": "^2.9.0", + "@talend/storybook-docs": "^1.1.6", "@talend/icons": "^6.59.0", "algoliasearch": "^4.17.2", "classnames": "^2.3.1", diff --git a/packages/design-docs/src/StatusTable.module.scss b/packages/design-docs/src/StatusTable.module.scss new file mode 100644 index 00000000000..c6afc5d4ef5 --- /dev/null +++ b/packages/design-docs/src/StatusTable.module.scss @@ -0,0 +1,39 @@ +@use '~@talend/design-tokens/lib/tokens'; + +.legend { + margin: tokens.$coral-spacing-m 0; + padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m; + /* stylelint-disable-next-line declaration-no-important */ + color: tokens.$coral-color-neutral-text-weak !important; + background: tokens.$coral-color-neutral-background-medium; + border-radius: tokens.$coral-radius-s; +} + +.dl { + display: grid; + gap: 1ch; + grid-template: auto / auto 1fr; + + dt { + font: tokens.$coral-paragraph-m-bold; + } +} + +.table.table { + overflow: auto; + + th { + position: sticky; + top: 0; + } + + th + th, + td + td { + width: 20rem; + } +} + +.tag { + padding: 0 tokens.$coral-spacing-xxs; + border-radius: tokens.$coral-radius-s; +} diff --git a/packages/design-docs/src/StatusTable.tsx b/packages/design-docs/src/StatusTable.tsx new file mode 100644 index 00000000000..2fe31eba849 --- /dev/null +++ b/packages/design-docs/src/StatusTable.tsx @@ -0,0 +1,58 @@ +import { Suspense } from 'react'; + +import theme from './StatusTable.module.scss'; + +import statuses from '@talend/design-system/src/stories/status.json'; +import { Statuses, ComponentStatuses } from '@talend/storybook-docs'; + +function toTitleCase(value: string) { + return value + .replace(/([A-Z])/g, match => ` ${match}`) + .replace(/^./, match => match.toUpperCase()) + .trim(); +} + +export function StatusTable() { + return ( + <> +
+
+
Figma
+
+ All use cases have been designed, Figma library is ready to be consumed by designers. +
+
Storybook
+
The guidelines are exhaustive and all sections have been completed.
+
React
+
The component is ready to be used by developers in their project.
+
i18n
+
+ Wording have been checked and translated on each supported languages by translators. +
+
+
+ Loading status...}> + + + + + + + + + {Object.entries(statuses).map(([componentId, info]) => { + return ( + + + + + ); + })} + +
ComponentStatus
{toTitleCase(componentId)} + +
+ + + ); +} diff --git a/packages/design-docs/src/Statuses.mdx b/packages/design-docs/src/Statuses.mdx new file mode 100644 index 00000000000..2f06aae3865 --- /dev/null +++ b/packages/design-docs/src/Statuses.mdx @@ -0,0 +1,11 @@ +import { Unstyled, Meta } from '@storybook/blocks'; +import { Card, Grid, SearchBar } from '@talend/storybook-docs'; +import { StatusTable } from './StatusTable'; + + + +# Component status + + + + diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 9c91a348cd8..74c47d2ab88 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -52,6 +52,7 @@ "@storybook/addon-interactions": "^7.4.1", "@storybook/addon-links": "^7.4.1", "@storybook/addons": "^7.4.1", + "@storybook/blocks": "^7.4.1", "@storybook/core-events": "^7.4.1", "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^7.4.1", diff --git a/packages/design-system/src/stories/Status.block.tsx b/packages/design-system/src/stories/Status.block.tsx new file mode 100644 index 00000000000..368aa9ff2e6 --- /dev/null +++ b/packages/design-system/src/stories/Status.block.tsx @@ -0,0 +1,9 @@ +import statuses from './status.json'; +import { Statuses, ComponentStatuses } from '@talend/storybook-docs'; + +type StatusesConfig = Record; + +export function Status({ id }: { id: string }) { + const info = (statuses as StatusesConfig)[id]; + return ; +} diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx index 511d0de4693..be9e45d19a5 100644 --- a/packages/design-system/src/stories/clickable/Button.mdx +++ b/packages/design-system/src/stories/clickable/Button.mdx @@ -2,17 +2,14 @@ import { Meta, Canvas, Story } from '@storybook/blocks'; import { ArgTypes } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import * as Stories from './Button.stories'; +import { Status } from '../Status.block'; - + # Button + + Buttons are clickable items used for actions. They can have different styles depending on the needs. ## Zoning diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx index 9a877e7dd00..aa43e568746 100644 --- a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx +++ b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx @@ -3,17 +3,14 @@ import { ArgTypes } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import * as Stories from './ButtonAsLink.stories'; import * as ButtonStories from './Button.stories'; +import { Status } from '../Status.block'; - + # Button as links + + Despite your complete reliance on best practices, you may be forced into situations that require a button that is actually a link. Their abilities are the same as the [Button component](/docs/clickable-button--docs) with exceptions: diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx index 8d0bc0d4b27..ba00e28e35d 100644 --- a/packages/design-system/src/stories/clickable/ButtonIcon.mdx +++ b/packages/design-system/src/stories/clickable/ButtonIcon.mdx @@ -1,17 +1,14 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, FigmaLink, Links } from '@talend/storybook-docs'; import * as Stories from './ButtonIcon.stories'; +import { Status } from '../Status.block'; - + # ButtonIcon + + This component should be used when icons are meant to be clicked on. It handles the two largest usecases we have for clickable icons: actions and toggles. diff --git a/packages/design-system/src/stories/clickable/Dropdown.mdx b/packages/design-system/src/stories/clickable/Dropdown.mdx index c63329262ee..290dee8bc15 100644 --- a/packages/design-system/src/stories/clickable/Dropdown.mdx +++ b/packages/design-system/src/stories/clickable/Dropdown.mdx @@ -4,18 +4,14 @@ import { FigmaImage, Use } from '@talend/storybook-docs'; import { Dropdown } from '../../'; import * as Stories from './Dropdown.stories'; +import { Status } from '../Status.block'; - + # Dropdown + + A dropdown menu displays a list of available actions. ## Zoning diff --git a/packages/design-system/src/stories/clickable/Link.mdx b/packages/design-system/src/stories/clickable/Link.mdx index 2adf7513383..ef21fd815b2 100644 --- a/packages/design-system/src/stories/clickable/Link.mdx +++ b/packages/design-system/src/stories/clickable/Link.mdx @@ -3,18 +3,14 @@ import { FigmaImage, Use } from '@talend/storybook-docs'; import { Link, IconsProvider } from '../../'; import * as Stories from './Link.stories'; import * as StoriesButton from './LinkAsButton.stories'; +import { Status } from '../Status.block'; - + # Link + + Link is used for navigation. If you use a link for triggering an action on the page, you must consider using a [Button](/docs/clickable-button--docs) instead. diff --git a/packages/design-system/src/stories/feedback/EmptyState.mdx b/packages/design-system/src/stories/feedback/EmptyState.mdx index fbd84e3956a..72c7de36f7a 100644 --- a/packages/design-system/src/stories/feedback/EmptyState.mdx +++ b/packages/design-system/src/stories/feedback/EmptyState.mdx @@ -1,18 +1,15 @@ import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './EmptyState.stories'; - + # EmptyState + + They describe the “empty” screens in an application when a system does not have anything to show. Use empty states to communicate about the current state of the system or to tell users what they can do next to get started. diff --git a/packages/design-system/src/stories/feedback/ErrorState.mdx b/packages/design-system/src/stories/feedback/ErrorState.mdx index 72b82fea923..542ec4c85e6 100644 --- a/packages/design-system/src/stories/feedback/ErrorState.mdx +++ b/packages/design-system/src/stories/feedback/ErrorState.mdx @@ -1,18 +1,15 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './ErrorState.stories'; - + # ErrorState + + Definition They describe the state where the app fails to complete an action or can't respond or do what the user wants. diff --git a/packages/design-system/src/stories/feedback/Loading.mdx b/packages/design-system/src/stories/feedback/Loading.mdx index 43d2ec35b84..43bb06fa77d 100644 --- a/packages/design-system/src/stories/feedback/Loading.mdx +++ b/packages/design-system/src/stories/feedback/Loading.mdx @@ -1,15 +1,13 @@ import { Meta, Canvas, Story } from '@storybook/blocks'; import * as Stories from './Loading.stories'; +import { Status } from '../Status.block'; - + # Loading + + ## Zoning ## Style diff --git a/packages/design-system/src/stories/feedback/Skeleton.mdx b/packages/design-system/src/stories/feedback/Skeleton.mdx index 9724967f062..746439f6348 100644 --- a/packages/design-system/src/stories/feedback/Skeleton.mdx +++ b/packages/design-system/src/stories/feedback/Skeleton.mdx @@ -9,19 +9,16 @@ import { StackHorizontal, StackVertical, } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Skeleton.stories'; - + # Skeleton + + Skeleton is used as placeholder to fill the space while the real content is loading. ## Zoning diff --git a/packages/design-system/src/stories/feedback/Status.mdx b/packages/design-system/src/stories/feedback/Status.mdx index df441c41a0d..b2554de7406 100644 --- a/packages/design-system/src/stories/feedback/Status.mdx +++ b/packages/design-system/src/stories/feedback/Status.mdx @@ -1,14 +1,9 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import * as Stories from './Status.stories'; +import { Status } from '../Status.block'; - + # Status @@ -16,6 +11,8 @@ The status component displays state information using semantic colors and icons. ## Zoning + + + # Affixes: `prefix` and `suffix` props + + All the base inputs (`Form.Text`, `Form.Select`, `Form.Email`, `Form.Number` etc...) sport the ability to display affixes. Fill in their `prefix` or `suffix` prop and the deed is done. diff --git a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx index 1ac04915b7b..98d16517492 100644 --- a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx +++ b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx @@ -1,17 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import * as Stories from './FormButtons.stories'; +import { Status } from '../../Status.block'; - + # Form buttons + + A Form always displays buttons in order to be cancelled or validated. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx index 1000e19a771..f569fdaca08 100644 --- a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx +++ b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Datalist.stories'; - + # Datalist + + `Form.Datalist` binds a set of options to an input you can fill with a custom value. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/FormField.mdx b/packages/design-system/src/stories/form/Field/FormField.mdx index 47017f28b50..c8d48c221d7 100644 --- a/packages/design-system/src/stories/form/Field/FormField.mdx +++ b/packages/design-system/src/stories/form/Field/FormField.mdx @@ -1,16 +1,14 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../Status.block'; import * as Stories from './FormField.stories'; - + # Form Fields common rules + + A Form Field features a label, an input and an optional [small inline message](docs/messaging-inlinemessage--docs) for text-based inputs. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx index b81f25d1001..8a2853d1bf4 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx @@ -1,18 +1,14 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import * as Stories from './Input.Checkbox.stories'; +import { Status } from '../../../Status.block'; - + # Checkbox + + Checkbox should be used for item/option selection and only when more than one item can be selected at the same time. If there is only two options (on/off), consider using a SwitchToggle. If the user should select only one option among many, use Radio inputs instead. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx index 4ed2caac025..d5eb5ffe039 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Color.stories'; - + # Color + + `` lets users specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx index bcc4a2933c9..8723efd92f5 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx @@ -1,18 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Copy.stories'; - + # Copy + + A shortcut to a read-only `Form.Text` field with prefix and a state, it's used to let the user copy a generated text to clipboard. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx index 4e228866632..ba95cfed62e 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx @@ -1,16 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Date.stories'; - + # Date + + It creates input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx index 0bd5ef84034..e933fc62bbf 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.DatetimeLocal.stories'; - + # Datetime Local + + `Form.DatetimeLocal` lets users easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. Browser behaviour with the field varies and they don't all display the same placholders or interactive elements. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx index afefe50142b..f68d324a276 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Email.stories'; - + # Email + + `Form.Email` is an alias for the HTML native email input. It's used to let the user enter and edit an email and will validate its format. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx index cd790372b7a..6e92dfb17e5 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.File.stories'; - + # File + + The `Form.File` inputs allows users to select a file through drag and drop or by clicking on the input. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx index 804d6bfb8e1..266bd2fc86a 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Month.stories'; - + # Month + + `Form.Month` lets users input a month and year. The value is a string formatted "YYYY-MM", where YYYY is the four-digit year and MM is the month number. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx index 1a65f31f881..2ebbe280398 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Number.stories'; - + # Number + + `Form.Number` only let users enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx index 733fb69e1a1..59ba9e8a619 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx @@ -1,17 +1,15 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Radio.stories'; - + # Radio + + `Form.Radio` inputs are used when a question has only one answer. Radio only lets users select one option from a set. Use radio buttons for exclusive selection when users need to see all available options side-by-side. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx index e794ba927bb..bd64da92fc1 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx @@ -1,17 +1,17 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Search.stories'; # Search + + `Form.Search` is a text field designed for user queries. These are functionally identical to text inputs, but may be styled differently by the browser. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx index 5a58a826676..4c8f3bb8f16 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx @@ -1,16 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Tel.stories'; - + # Tel + + `Form.Tel` lets users enter and edit a telephone number. It's a semantic field and its validation patterns are browser dependent. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx index c085aebb1f0..949f55e61e5 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx @@ -1,16 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Text.stories'; - + # Input text + + `Form.Text` is a user input for short content and data. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx index a1d3be344c9..9d835b8374e 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Time.stories'; - + # Time + + `Form.Time` fields are designed to let users input a time value (hours and minutes, and optionally seconds). It is a semantic field where the validation and display may be browser-specific. diff --git a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx index 15a54d57fc7..3c7f05b06ef 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.ToggleSwitch.stories'; - + # ToggleSwitch + + ToggleSwitches are a quick way to view and switch between two states or on-off state instantly. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx index a5c6fb59e5f..4d559b5bc92 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Url.stories'; - + # Url + + `Form.Url` lets users enter and edit a URL. It's a semantic field with validation patterns owned by the browser. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx index 84ab1e4f640..4a166485e71 100644 --- a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Week.stories'; - + # Week + + `Form.Week` allows easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53). It's a semantic input with browser-specific UI elements. diff --git a/packages/design-system/src/stories/form/Field/Input/Password.mdx b/packages/design-system/src/stories/form/Field/Input/Password.mdx index b602828044e..be1321f9993 100644 --- a/packages/design-system/src/stories/form/Field/Input/Password.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Password.mdx @@ -1,16 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Password.stories'; - + # Password + + `Form.Password` provides a way for users to securely enter a password. Its content is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("\*") or a dot ("•"). diff --git a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx index ce71c4899b2..bc390cb9d7b 100644 --- a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx +++ b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Select.stories'; - + # Select + + `Form.Select` lets users choose one option or multiple options from a list. ## Zoning diff --git a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx index 01ce3a75032..eef5c107c99 100644 --- a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx +++ b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx @@ -1,17 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../../../Status.block'; import * as Stories from './Input.Textarea.stories'; - + # Text Area + + `Form.Textarea` lets users enter multiple lines of text. ## Zoning diff --git a/packages/design-system/src/stories/form/FieldCombobox.mdx b/packages/design-system/src/stories/form/FieldCombobox.mdx index 45048d5eb8f..4bfa0c0658b 100644 --- a/packages/design-system/src/stories/form/FieldCombobox.mdx +++ b/packages/design-system/src/stories/form/FieldCombobox.mdx @@ -2,12 +2,16 @@ import { Meta, Canvas, Story } from '@storybook/blocks'; import { ArgTypes } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { Combobox, StackVertical, InlineMessageWarning } from '../../'; +import { Status } from '../Status.block'; + import * as Stories from './Combobox.stories'; # Combobox + + + # Form Fieldset + + Fieldsets group together fields within a form. It's a semantic group, not necessarily a visual one. This component however provides a `legend` prop to help visually segment fieldsets. diff --git a/packages/design-system/src/stories/form/Form.mdx b/packages/design-system/src/stories/form/Form.mdx index a63272f2a72..cf911e4d655 100644 --- a/packages/design-system/src/stories/form/Form.mdx +++ b/packages/design-system/src/stories/form/Form.mdx @@ -1,18 +1,16 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { Tabs } from '../../'; +import { Status } from '../Status.block'; + import * as Stories from './Form.stories.tsx'; - + # Form + + The `Form` component is a slightly opinionated `
` tag with a flex layout and set vertical gap. ## Zoning diff --git a/packages/design-system/src/stories/form/InlineEditing.mdx b/packages/design-system/src/stories/form/InlineEditing.mdx index 15bf9c17598..17d284098a5 100644 --- a/packages/design-system/src/stories/form/InlineEditing.mdx +++ b/packages/design-system/src/stories/form/InlineEditing.mdx @@ -1,15 +1,11 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { InlineEditing } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './InlineEditing.stories'; (
@@ -21,6 +17,8 @@ import * as Stories from './InlineEditing.stories'; # Inline Editing + + User can perform inline editing by using inline form. ## Zoning diff --git a/packages/design-system/src/stories/form/RichRadioButton.mdx b/packages/design-system/src/stories/form/RichRadioButton.mdx index 076f4fe1799..206b8d355de 100644 --- a/packages/design-system/src/stories/form/RichRadioButton.mdx +++ b/packages/design-system/src/stories/form/RichRadioButton.mdx @@ -1,15 +1,13 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; +import { Status } from '../Status.block'; import * as Stories from './RichRadioButton.stories'; - + # Rich Radio Button + + Selectable card with the same behavior as a radio button with multiple parameters to allow multiple combinations between title, description tags and icon/illustration ## Zoning diff --git a/packages/design-system/src/stories/form/Switch.mdx b/packages/design-system/src/stories/form/Switch.mdx index abda36da41d..24562715e1a 100644 --- a/packages/design-system/src/stories/form/Switch.mdx +++ b/packages/design-system/src/stories/form/Switch.mdx @@ -1,5 +1,6 @@ import { Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import { Switch } from '../../'; import * as Stories from './Switch.stories'; @@ -7,13 +8,14 @@ import * as Stories from './Switch.stories'; # Switch + + Switches are a quick way to make a selection between two states (or three sometimes) or on-off state instantly. There is always a default selection for switches. ## Zoning diff --git a/packages/design-system/src/stories/icons/Icon.mdx b/packages/design-system/src/stories/icons/Icon.mdx index c0c90be60da..07e7ccb1a22 100644 --- a/packages/design-system/src/stories/icons/Icon.mdx +++ b/packages/design-system/src/stories/icons/Icon.mdx @@ -1,17 +1,15 @@ import { ArgTypes, IconItem, Canvas, Meta, Story } from '@storybook/blocks'; import { IconsProvider, InlineMessageWarning, Icon } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Icon.stories'; import { AllIconsDocs } from './Icons'; - + # Icon + + This component is generic and can be seens as a Primitive to display SVG, img, remote or not. diff --git a/packages/design-system/src/stories/icons/SizedIcon.mdx b/packages/design-system/src/stories/icons/SizedIcon.mdx index 1fd01f9a660..5605d3eecbf 100644 --- a/packages/design-system/src/stories/icons/SizedIcon.mdx +++ b/packages/design-system/src/stories/icons/SizedIcon.mdx @@ -1,16 +1,14 @@ import { Controls, Canvas, Meta, Story } from '@storybook/blocks'; import { SizedIcon } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './SizedIcon.stories'; - + # SizedIcon + + This component serves every icon in the new Figma [Icon Library](https://www.figma.com/file/L1QUr28Y79ydAv05nQVmaA/Icon-Library?node-id=2064%3A17133). It follows the same ruleset: an icon is defined by its size first, its name second. diff --git a/packages/design-system/src/stories/layout/Card.mdx b/packages/design-system/src/stories/layout/Card.mdx index e173bcf8093..59ce2c2fc81 100644 --- a/packages/design-system/src/stories/layout/Card.mdx +++ b/packages/design-system/src/stories/layout/Card.mdx @@ -2,17 +2,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs'; import { Card, StackVertical, InlineMessageWarning } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Card.stories'; - + # Card + + + # Modal + + A modal serves as a root component for all varieties of dialog (confirm ...). ## Zoning diff --git a/packages/design-system/src/stories/layout/Stack.mdx b/packages/design-system/src/stories/layout/Stack.mdx index 8baebbb37be..980d183b410 100644 --- a/packages/design-system/src/stories/layout/Stack.mdx +++ b/packages/design-system/src/stories/layout/Stack.mdx @@ -1,17 +1,14 @@ import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './Stack.stories'; - + # Stack (aka "Autolayout") + + `StackVertical` and `StackHorizontal` are opinionated layout components. They serve has wrappers for most layout needs that would otherwise require manual CSS. On Figma, this pattern is found in the Autolayout tool. diff --git a/packages/design-system/src/stories/messaging/Badge.mdx b/packages/design-system/src/stories/messaging/Badge.mdx index 0975d2003b6..4b3d59cdcea 100644 --- a/packages/design-system/src/stories/messaging/Badge.mdx +++ b/packages/design-system/src/stories/messaging/Badge.mdx @@ -1,11 +1,14 @@ import { Meta, Story, Canvas } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './Badge.stories'; # Badge + + A wonderful Badge ## Zoning diff --git a/packages/design-system/src/stories/messaging/InlineMessage.mdx b/packages/design-system/src/stories/messaging/InlineMessage.mdx index cffe5524bd9..260d8df9e52 100644 --- a/packages/design-system/src/stories/messaging/InlineMessage.mdx +++ b/packages/design-system/src/stories/messaging/InlineMessage.mdx @@ -1,17 +1,15 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { InlineMessage } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './InlineMessage.stories'; - + # Inline Message + + Inline Message semantically highlights necessary information to the user in different contexts. It can be additional information related to system status, it can be a required action to complete the current task. diff --git a/packages/design-system/src/stories/messaging/Message.mdx b/packages/design-system/src/stories/messaging/Message.mdx index 46f8d5ebf4f..a8196b5f78b 100644 --- a/packages/design-system/src/stories/messaging/Message.mdx +++ b/packages/design-system/src/stories/messaging/Message.mdx @@ -1,17 +1,14 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './Message.stories'; - + # Message + + Message is a component that displays some information to the user and provide actions to interact with it. ## Zoning @@ -20,6 +17,11 @@ TODO : FIGMA TO LINK ## Style + + ### Text The text should adapt to the surrounding layout. Depending on the context, if the text is too long it should automatically wrap to the next line. diff --git a/packages/design-system/src/stories/messaging/Popover.mdx b/packages/design-system/src/stories/messaging/Popover.mdx index 3f63e5bcc3b..2ee0ba20107 100644 --- a/packages/design-system/src/stories/messaging/Popover.mdx +++ b/packages/design-system/src/stories/messaging/Popover.mdx @@ -1,16 +1,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import * as Stories from './Popover.stories'; import { StackVertical, InlineMessageWarning } from '../../'; +import { Status } from '../Status.block'; - + # Popover + + + # Tag + + The Tag component is useful to emphasize information to the user, works best with single word values. ## Zoning diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx index 461675ad90d..1853fda393e 100644 --- a/packages/design-system/src/stories/messaging/Tooltip.mdx +++ b/packages/design-system/src/stories/messaging/Tooltip.mdx @@ -2,19 +2,16 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Tooltip } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Tooltip.stories'; - + # Tooltip + + Tooltips provide helpful, additional content for their paired elements on hover. They are contextual and specific to the element and don't provide the big picture. ## Zoning diff --git a/packages/design-system/src/stories/navigation/Accordion.mdx b/packages/design-system/src/stories/navigation/Accordion.mdx index 361c48b7aa4..f66e49f79b3 100644 --- a/packages/design-system/src/stories/navigation/Accordion.mdx +++ b/packages/design-system/src/stories/navigation/Accordion.mdx @@ -1,6 +1,7 @@ import { Canvas, Meta } from '@storybook/blocks'; import * as Stories from './Accordion.stories'; +import { Status } from '../Status.block'; import { InlineMessageWarning } from '../../'; @@ -8,11 +9,7 @@ import { InlineMessageWarning } from '../../'; # Accordion - + Accordion is used to display expandable/collapsable cards with a title. diff --git a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx index 43ce005f635..67606ab8906 100644 --- a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx +++ b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx @@ -1,17 +1,14 @@ import { Meta, Story, Canvas } from '@storybook/blocks'; import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './Breadcrumbs.stories'; - + # Breadcrumbs + + Breadcrumbs are navigation elements providing comprehensive context to users. It helps them locate the current page within a larger workflow. diff --git a/packages/design-system/src/stories/navigation/Divider.mdx b/packages/design-system/src/stories/navigation/Divider.mdx index 057d6f76fd0..55fec6bd284 100644 --- a/packages/design-system/src/stories/navigation/Divider.mdx +++ b/packages/design-system/src/stories/navigation/Divider.mdx @@ -1,18 +1,15 @@ import { Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; +import { Status } from '../Status.block'; import * as Stories from './Divider.stories'; - + # Divider + + A divider that separates and distinguishes sections of content or groups of menu items. ## Zoning diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx index a126f86e3e1..d4df5b41390 100644 --- a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx +++ b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx @@ -2,15 +2,12 @@ import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, FigmaIframe } from '@talend/storybook-docs'; import { FloatingDrawer, StackVertical, InlineMessageWarning } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './FloatingDrawer.stories'; (
+ + # Step + + Steps are the main elements for the stepper. ## Zoning diff --git a/packages/design-system/src/stories/navigation/Stepper.mdx b/packages/design-system/src/stories/navigation/Stepper.mdx index 27711fc24c6..79578a058ef 100644 --- a/packages/design-system/src/stories/navigation/Stepper.mdx +++ b/packages/design-system/src/stories/navigation/Stepper.mdx @@ -1,20 +1,16 @@ import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Stepper } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Stepper.stories'; - + # Stepper + + `Stepper` is used to display the different steps needed to complete an action. It helps users avoid frustration and successfully complete a primary task. diff --git a/packages/design-system/src/stories/navigation/Tabs.mdx b/packages/design-system/src/stories/navigation/Tabs.mdx index ecc6fb4635a..6933585a82f 100644 --- a/packages/design-system/src/stories/navigation/Tabs.mdx +++ b/packages/design-system/src/stories/navigation/Tabs.mdx @@ -1,18 +1,15 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Tabs, InlineMessageWarning, StackVertical } from '../../'; +import { Status } from '../Status.block'; import * as Stories from './Tabs.stories'; - + # Tabs + + + + {`${label} + {label} + + {status} + + ); +} diff --git a/packages/storybook-docs/src/components/Statuses/Statuses.tsx b/packages/storybook-docs/src/components/Statuses/Statuses.tsx new file mode 100644 index 00000000000..cc9510d8d01 --- /dev/null +++ b/packages/storybook-docs/src/components/Statuses/Statuses.tsx @@ -0,0 +1,36 @@ +import { Unstyled } from '@storybook/blocks'; +import { StackHorizontal, StackItem } from '@talend/design-system'; +import { Status } from './Status'; +import { Statuses, StatusType } from './Statuses.types'; + +const iconByStatusType = { + [StatusType.figma]: 'figma', + [StatusType.i18n]: 'i18next', + [StatusType.react]: 'react', + [StatusType.storybook]: 'storybook', +}; + +function getIcon(statusType: StatusType) { + return `https://unpkg.com/simple-icons/icons/${iconByStatusType[statusType]}.svg`; +} + +export function ComponentStatuses(statuses: Statuses) { + return ( + + + {Object.entries(statuses).map(([statusType, { status, link }]) => ( + + + + ))} + + + ); +} diff --git a/packages/storybook-docs/src/components/Statuses/Statuses.types.ts b/packages/storybook-docs/src/components/Statuses/Statuses.types.ts new file mode 100644 index 00000000000..4ca68a7bd2d --- /dev/null +++ b/packages/storybook-docs/src/components/Statuses/Statuses.types.ts @@ -0,0 +1,23 @@ +export enum StatusValue { + OK = 'ok', + KO = 'ko', + WIP = 'wip', + DEPRECATED = 'deprecated', + NA = 'na', + UNKNOWN = '❔', // This one is the default value, not designed to be used +} + +export enum StatusType { + figma = 'figma', + storybook = 'storybook', + react = 'react', + i18n = 'i18n', +} + +export type Statuses = Record< + StatusType, + { + status?: StatusValue; + link?: string; + } +>; diff --git a/packages/storybook-docs/src/components/Statuses/index.ts b/packages/storybook-docs/src/components/Statuses/index.ts new file mode 100644 index 00000000000..dfcd1a298c7 --- /dev/null +++ b/packages/storybook-docs/src/components/Statuses/index.ts @@ -0,0 +1,2 @@ +export { ComponentStatuses } from './Statuses'; +export * from './Statuses.types'; diff --git a/packages/storybook-docs/src/components/index.ts b/packages/storybook-docs/src/components/index.ts index a83221d63e5..2f2b4214c08 100644 --- a/packages/storybook-docs/src/components/index.ts +++ b/packages/storybook-docs/src/components/index.ts @@ -4,3 +4,4 @@ export * from './Card'; export * from './FigmaImage'; export * from './Grid'; export * from './Use'; +export * from './Statuses';