diff --git a/packages/design-docs/.storybook/main.js b/packages/design-docs/.storybook/main.js index e1c0bcbaa0..f63db26fc8 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 c83418e849..b9e98a2d4f 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 0000000000..c6afc5d4ef --- /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 0000000000..2fe31eba84 --- /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 0000000000..2f06aae386 --- /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 9c91a348cd..74c47d2ab8 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 0000000000..368aa9ff2e --- /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 511d0de469..be9e45d19a 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 9a877e7dd0..aa43e56874 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 8d0bc0d4b2..ba00e28e35 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 c63329262e..290dee8bc1 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 2adf751338..ef21fd815b 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 fbd84e3956..72c7de36f7 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 72b82fea92..542ec4c85e 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 43d2ec35b8..43bb06fa77 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 9724967f06..746439f634 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 df441c41a0..b2554de740 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 1ac04915b7..98d1651749 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 1000e19a77..f569fdaca0 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 47017f28b5..c8d48c221d 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 b81f25d100..8a2853d1bf 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 4ed2caac02..d5eb5ffe03 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 bcc4a2933c..8723efd92f 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 4e22886663..ba95cfed62 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 0bd5ef8403..e933fc62bb 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 afefe50142..f68d324a27 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 cd790372b7..6e92dfb17e 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 804d6bfb8e..266bd2fc86 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 1a65f31f88..2ebbe28039 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 733fb69e1a..59ba9e8a61 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 e794ba927b..bd64da92fc 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 5a58a82667..4c8f3bb8f1 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 c085aebb1f..949f55e61e 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 a1d3be344c..9d835b8374 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 15a54d57fc..3c7f05b06e 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 a5c6fb59e5..4d559b5bc9 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 84ab1e4f64..4a166485e7 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 b602828044..be1321f999 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 ce71c4899b..bc390cb9d7 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 01ce3a7503..eef5c107c9 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 45048d5eb8..4bfa0c0658 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 a63272f2a7..cf911e4d65 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 15bf9c1759..17d284098a 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 076f4fe179..206b8d355d 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 abda36da41..24562715e1 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 c0c90be60d..07e7ccb1a2 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 1fd01f9a66..5605d3eecb 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 e173bcf809..59ce2c2fc8 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 8baebbb37b..980d183b41 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 0975d2003b..4b3d59cdce 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 cffe5524bd..260d8df9e5 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 46f8d5ebf4..a8196b5f78 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 3f63e5bcc3..2ee0ba2010 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 461675ad90..1853fda393 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 361c48b7aa..f66e49f79b 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 43ce005f63..67606ab890 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 057d6f76fd..55fec6bd28 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 a126f86e3e..d4df5b4139 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 27711fc24c..79578a058e 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 ecc6fb4635..6933585a82 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 0000000000..cc9510d8d0 --- /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 0000000000..4ca68a7bd2 --- /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 0000000000..dfcd1a298c --- /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 a83221d63e..2f2b4214c0 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';