diff --git a/packages/design-docs/src/content/Capitalization.mdx b/packages/design-docs/src/content/Capitalization.mdx index f08bffc257..7021fb8fe3 100644 --- a/packages/design-docs/src/content/Capitalization.mdx +++ b/packages/design-docs/src/content/Capitalization.mdx @@ -25,5 +25,5 @@ Reminder: not all technical terms are common nouns. A common mistake is to capit Extra reading: -- [https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457](https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457) -- [https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98](https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98) +- [All Caps on UI: Good or Bad?](https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457) +- [Making a case for letter case](https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98) diff --git a/packages/design-docs/src/content/Conventions.mdx b/packages/design-docs/src/content/Conventions.mdx index 7cd3d3d7e5..ec7147b95d 100644 --- a/packages/design-docs/src/content/Conventions.mdx +++ b/packages/design-docs/src/content/Conventions.mdx @@ -63,7 +63,7 @@ Check this NN/G group article about the impact of tone of voice on the brand's p ## Spelling: American vs. British -Follow spelling rules for American English. Check this site to get some help about your word choice: [https://www.oxfordinternationalenglish.com/differences-in-british-and-american-spelling/](https://www.nngroup.com/articles/tone-voice-users/) +Follow spelling rules for American English. Check this site to get some help about your word choice: [https://www.oxfordinternationalenglish.com/differences-in-british-and-american-spelling/](https://www.oxfordinternationalenglish.com/differences-in-british-and-american-spelling/) ## Punctuation diff --git a/packages/design-docs/src/tokens/A-About.mdx b/packages/design-docs/src/tokens/A-About.mdx index 0153e30731..e921cf06df 100644 --- a/packages/design-docs/src/tokens/A-About.mdx +++ b/packages/design-docs/src/tokens/A-About.mdx @@ -12,33 +12,21 @@ They are exported from Figma using [Supernova](https://www.supernova.io/). ## What are design tokens? - - -

- Design tokens are the foundations of a strong Design System — they are «the visual atoms - of the Design System». Tokens are a set of visual properties such as - colors, sizes, shadows, animations... -

-

- Ours are using a semantic nomenclature instead of a simple description. - That way, they create a common language not depending on the component type or the - platform where it lives. It ensures developers and designers speak the same language. - Tokens make it easier to build our product by improving communication and design-to-code - handoff, enforcing a logical approach behind every design decisions they can target. -

- - This graph shows that for one token name, depending on a theme, the value can be different - - +This graph shows that for one token name, depending on a theme, the value can be different + +Design tokens are the foundations of a strong Design System — they are «the visual atoms +of the Design System». Tokens are a set of visual properties such as +colors, sizes, shadows, animations... + +Ours are using a semantic nomenclature instead of a simple description. +That way, they create a common language not depending on the component type or the +platform where it lives. It ensures developers and designers speak the same language. +Tokens make it easier to build our product by improving communication and design-to-code +handoff, enforcing a logical approach behind every design decisions they can target. ## Theming with design tokens diff --git a/packages/design-system/src/stories/clickable/About.mdx b/packages/design-system/src/stories/clickable/About.mdx index 5315bda81b..0c1a35e193 100644 --- a/packages/design-system/src/stories/clickable/About.mdx +++ b/packages/design-system/src/stories/clickable/About.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Variations as ButtonVariations } from './Button.stories'; import { Variations as ButtonAsLinkVariations } from './ButtonAsLink.stories'; diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx index be9e45d19a..0d716d5ac8 100644 --- a/packages/design-system/src/stories/clickable/Button.mdx +++ b/packages/design-system/src/stories/clickable/Button.mdx @@ -1,15 +1,13 @@ -import { Meta, Canvas, Story } from '@storybook/blocks'; -import { ArgTypes } from '@storybook/blocks'; +import { Meta, Canvas, Story, Controls } 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 @@ -48,7 +46,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s - + #### Destructive @@ -60,7 +58,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s - + #### Secondary @@ -72,7 +70,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s - + #### Tertiary @@ -84,7 +82,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s - + ## Interactions diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx index aa43e56874..d95175212b 100644 --- a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx +++ b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx @@ -1,16 +1,14 @@ -import { Meta, Canvas, Story } from '@storybook/blocks'; -import { ArgTypes } from '@storybook/blocks'; +import { Meta, Canvas, Story, Controls } 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: @@ -49,7 +47,7 @@ They are otherwise available in the same sizes and with the same iconset. - + #### ButtonDestructiveAsLink @@ -57,7 +55,7 @@ They are otherwise available in the same sizes and with the same iconset. - + #### ButtonSecondaryAsLink @@ -65,7 +63,7 @@ They are otherwise available in the same sizes and with the same iconset. - + #### ButtonTertiaryAsLink @@ -73,7 +71,7 @@ They are otherwise available in the same sizes and with the same iconset. - + #### ButtonAsLink diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx index ba00e28e35..1bdb60a015 100644 --- a/packages/design-system/src/stories/clickable/ButtonIcon.mdx +++ b/packages/design-system/src/stories/clickable/ButtonIcon.mdx @@ -1,14 +1,13 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Meta, Canvas, Story, Controls } 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. @@ -112,7 +111,7 @@ You have access to three components with curated props for each. - + ### ButtonIconToggle @@ -120,7 +119,7 @@ You have access to three components with curated props for each. - + ### ButtonIconFloating @@ -128,7 +127,7 @@ You have access to three components with curated props for each. - + ### Button props diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx b/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx index 1b6b1a0344..5e61ae6287 100644 --- a/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx +++ b/packages/design-system/src/stories/clickable/ButtonIcon.stories.tsx @@ -50,6 +50,7 @@ export default { title: 'Clickable/ButtonIcon', args: defaultArgs, argTypes: commonArgTypes, + withToolbar: true, } as Meta; const TemplateIcon: StoryFn = args => { diff --git a/packages/design-system/src/stories/clickable/Dropdown.mdx b/packages/design-system/src/stories/clickable/Dropdown.mdx index 290dee8bc1..560093c548 100644 --- a/packages/design-system/src/stories/clickable/Dropdown.mdx +++ b/packages/design-system/src/stories/clickable/Dropdown.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Dropdown } from '../../'; @@ -7,11 +7,10 @@ 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 ef21fd815b..c245961174 100644 --- a/packages/design-system/src/stories/clickable/Link.mdx +++ b/packages/design-system/src/stories/clickable/Link.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Link, IconsProvider } from '../../'; import * as Stories from './Link.stories'; @@ -6,11 +6,10 @@ 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. @@ -85,7 +84,7 @@ If your action open a new tab, you can use the `openInNewTab` props to trigger t - + ## Content @@ -135,4 +134,4 @@ Press ENTER to open a link - + diff --git a/packages/design-system/src/stories/feedback/EmptyState.mdx b/packages/design-system/src/stories/feedback/EmptyState.mdx index 72c7de36f7..95650fa764 100644 --- a/packages/design-system/src/stories/feedback/EmptyState.mdx +++ b/packages/design-system/src/stories/feedback/EmptyState.mdx @@ -1,15 +1,14 @@ -import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, 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. @@ -66,7 +65,7 @@ Use large empty states when the empty content area on screen takes up at least 5 - + **Content guidelines** @@ -164,7 +163,7 @@ N/A - + ### Button as Link diff --git a/packages/design-system/src/stories/feedback/ErrorState.mdx b/packages/design-system/src/stories/feedback/ErrorState.mdx index 542ec4c85e..a20d9603d8 100644 --- a/packages/design-system/src/stories/feedback/ErrorState.mdx +++ b/packages/design-system/src/stories/feedback/ErrorState.mdx @@ -1,16 +1,13 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { 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 +# ErrorState 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 43bb06fa77..8a3c923277 100644 --- a/packages/design-system/src/stories/feedback/Loading.mdx +++ b/packages/design-system/src/stories/feedback/Loading.mdx @@ -3,11 +3,10 @@ import * as Stories from './Loading.stories'; import { Status } from '../Status.block'; + # Loading - - ## Zoning ## Style @@ -27,9 +26,3 @@ _Not applicable_ ## Accessibility ## Usage - -## Changelog - -| Date | Author | Description | -| ---------- | ---------------- | ----------- | -| 07/21/2020 | Fabien Rassinier | Init page | diff --git a/packages/design-system/src/stories/feedback/Loading.stories.tsx b/packages/design-system/src/stories/feedback/Loading.stories.tsx index 7af7ed40b5..2f0e971705 100644 --- a/packages/design-system/src/stories/feedback/Loading.stories.tsx +++ b/packages/design-system/src/stories/feedback/Loading.stories.tsx @@ -1,3 +1,4 @@ +import tokens from '@talend/design-tokens'; import { Loading } from '../..'; export default { @@ -5,4 +6,8 @@ export default { title: 'Feedback/Loading', }; -export const Default = () => ; +export const Default = () => ( +
+ +
+); diff --git a/packages/design-system/src/stories/feedback/Skeleton.mdx b/packages/design-system/src/stories/feedback/Skeleton.mdx index 746439f634..0592e2e7df 100644 --- a/packages/design-system/src/stories/feedback/Skeleton.mdx +++ b/packages/design-system/src/stories/feedback/Skeleton.mdx @@ -1,4 +1,4 @@ -import { Meta, Canvas, Story, ArgTypes } from '@storybook/blocks'; +import { Meta, Canvas, Story, Controls } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { SkeletonButton, @@ -14,11 +14,10 @@ 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 @@ -35,7 +34,7 @@ Skeleton is used as placeholder to fill the space while the real content is load - + ### ButtonIcon @@ -45,7 +44,7 @@ Skeleton is used as placeholder to fill the space while the real content is load - + ### Text @@ -59,7 +58,7 @@ It illustrates any heading element. - + #### Paragraph @@ -71,7 +70,7 @@ It illustrates any paragraph or small copy element. - + #### Input diff --git a/packages/design-system/src/stories/feedback/Status.mdx b/packages/design-system/src/stories/feedback/Status.mdx index b2554de740..ddbdee6d0b 100644 --- a/packages/design-system/src/stories/feedback/Status.mdx +++ b/packages/design-system/src/stories/feedback/Status.mdx @@ -1,9 +1,10 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import * as Stories from './Status.stories'; import { Status } from '../Status.block'; + # Status @@ -11,8 +12,6 @@ The status component displays state information using semantic colors and icons. ## Zoning - - - + ## Accessibility diff --git a/packages/design-system/src/stories/feedback/Status.stories.tsx b/packages/design-system/src/stories/feedback/Status.stories.tsx index dd3752d2c8..13edcfc0fd 100644 --- a/packages/design-system/src/stories/feedback/Status.stories.tsx +++ b/packages/design-system/src/stories/feedback/Status.stories.tsx @@ -38,9 +38,9 @@ Usage.args = { Usage.argTypes = { variant: { description: 'Status variation', + options: Object.values(variants), control: { type: 'select', - options: Object.values(variants), }, }, hideText: { diff --git a/packages/design-system/src/stories/form/Affix/Affixes.mdx b/packages/design-system/src/stories/form/Affix/Affixes.mdx index e7416dcf8f..58867fc7ce 100644 --- a/packages/design-system/src/stories/form/Affix/Affixes.mdx +++ b/packages/design-system/src/stories/form/Affix/Affixes.mdx @@ -5,11 +5,10 @@ import * as Stories from './Affix.stories'; import { Status } from '../../Status.block'; + # 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 98d1651749..1700db7cc8 100644 --- a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx +++ b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx @@ -4,11 +4,10 @@ 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 f569fdaca0..8b3022e6f0 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 @@ -5,11 +5,10 @@ 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 c8d48c221d..9570bef0a8 100644 --- a/packages/design-system/src/stories/form/Field/FormField.mdx +++ b/packages/design-system/src/stories/form/Field/FormField.mdx @@ -1,14 +1,13 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, 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 @@ -84,7 +83,7 @@ If a description or an error is applied to the field, it must be displayed betwe - + ## Accessibility diff --git a/packages/design-system/src/stories/form/Field/FormField.stories.tsx b/packages/design-system/src/stories/form/Field/FormField.stories.tsx index 64d4da62b3..087f30e622 100644 --- a/packages/design-system/src/stories/form/Field/FormField.stories.tsx +++ b/packages/design-system/src/stories/form/Field/FormField.stories.tsx @@ -2,7 +2,7 @@ import { Form } from '../../../../'; export default { component: Form.Text, - title: 'Form/Fields', + title: 'Form/Fields/About', }; export const FormFieldError = () => ( 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 8a2853d1bf..357543cce2 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,14 +1,13 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, 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. @@ -101,7 +100,7 @@ export const Template = args => { - + ## Accessibility 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 d5eb5ffe03..da7e3c0b54 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 @@ -5,11 +5,10 @@ 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 8723efd92f..913099ab93 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 @@ -5,11 +5,10 @@ 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 ba95cfed62..6d34be6033 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 @@ -4,11 +4,10 @@ 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 e933fc62bb..6c467b3295 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 @@ -5,11 +5,10 @@ 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 f68d324a27..5bb9d22831 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 @@ -5,11 +5,10 @@ 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 6e92dfb17e..6ff57cb0af 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 @@ -5,11 +5,10 @@ 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 266bd2fc86..8025b53826 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 @@ -5,11 +5,10 @@ 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 2ebbe28039..79d3773e1a 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 @@ -5,11 +5,10 @@ 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 59ba9e8a61..7b43f8d17e 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,15 +1,14 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, 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. @@ -91,7 +90,7 @@ Radio buttons appear as a list of two or more options where users can select onl - + ## Accessibility 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 bd64da92fc..b832f50d3e 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 @@ -3,15 +3,11 @@ 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 4c8f3bb8f1..b4cad8155b 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 @@ -4,11 +4,10 @@ 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 949f55e61e..4002281d7a 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 @@ -4,11 +4,10 @@ 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 9d835b8374..3c1bd0e077 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 @@ -5,11 +5,10 @@ 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 3c7f05b06e..7cd46d614a 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 @@ -5,11 +5,10 @@ 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 4d559b5bc9..95aae0a6d0 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 @@ -5,11 +5,10 @@ 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 4a166485e7..bbb3f29b57 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 @@ -5,11 +5,10 @@ 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 be1321f999..22baaac3e8 100644 --- a/packages/design-system/src/stories/form/Field/Input/Password.mdx +++ b/packages/design-system/src/stories/form/Field/Input/Password.mdx @@ -4,11 +4,10 @@ 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 bc390cb9d7..3e3799d756 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 @@ -5,11 +5,10 @@ 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 @@ -88,9 +87,3 @@ The keyboard gestures are the default ones, such as: - Press arrows keys to display and navigate into the menu. - Press ENTER or SPACE to select the option. - -## Changelog - -| Date | Author | Description | -| ---------- | ---------- | ----------- | -| 12/06/2020 | Monia Huet | Init page | 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 eef5c107c9..16eeee9738 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 @@ -5,11 +5,10 @@ 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 4bfa0c0658..f359aba28f 100644 --- a/packages/design-system/src/stories/form/FieldCombobox.mdx +++ b/packages/design-system/src/stories/form/FieldCombobox.mdx @@ -1,5 +1,4 @@ -import { Meta, Canvas, Story } from '@storybook/blocks'; -import { ArgTypes } from '@storybook/blocks'; +import { Meta, Canvas, Story, Controls } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { Combobox, StackVertical, InlineMessageWarning } from '../../'; import { Status } from '../Status.block'; @@ -7,26 +6,9 @@ import { Status } from '../Status.block'; import * as Stories from './Combobox.stories'; - -# Combobox - - - - +# Combobox Combobox is used to suggest items using rich preview. Custom values are still possible like a datalist. @@ -67,7 +49,7 @@ Custom values are still possible like a datalist. - + ## States @@ -112,10 +94,3 @@ If a value is not available in the predefined list options the user may have the ## Accessibility ## Usage - -## Changelog - -| Date | Author | Description | -| ---------- | ---------------- | ------------ | -| 09/09/2021 | Benoit Rajalu | Edited props | -| 09/30/2020 | Fabien Rassinier | Init page | diff --git a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx index f8e43fb170..b845defc79 100644 --- a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx +++ b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx @@ -5,11 +5,10 @@ import { Status } from '../../Status.block'; import * as Stories from './Fieldset.stories'; + # 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 cf911e4d65..8f3af348de 100644 --- a/packages/design-system/src/stories/form/Form.mdx +++ b/packages/design-system/src/stories/form/Form.mdx @@ -6,11 +6,10 @@ 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 17d284098a..c17553c113 100644 --- a/packages/design-system/src/stories/form/InlineEditing.mdx +++ b/packages/design-system/src/stories/form/InlineEditing.mdx @@ -4,21 +4,11 @@ import { InlineEditing } from '../../'; import { Status } from '../Status.block'; import * as Stories from './InlineEditing.stories'; - ( -
- -
- ), - ]} -/> + + # Inline Editing - - User can perform inline editing by using inline form. ## Zoning @@ -110,13 +100,32 @@ The edit mode can be triggered by clicking on the pencil icon, or by double-clic Non-regression testing can be performed using: -| data-test | description | -| ------------------------------------------------- | ----------------------------------------------------------------------------- | -| `inlineediting` | Container containing value and actions | -| `inlineediting.button.edit` | Edit button to pass into "editing" mode | -| `inlineediting.input` or `inlineediting.textarea` | Control to change its value in "editing" mode depending on the variant in use | -| `inlineediting.button.cancel` | Cancel button to quit "editing" mode | -| `inlineediting.button.submit` | Submit button to validate edition in "editing" mode | + + + + + + + + + + + + + + + + + + + + + + + + + +
data-testdescription
`inlineediting`Container containing value and actions
`inlineediting.button.edit`Edit button to pass into "editing" mode
`inlineediting.input` or `inlineediting.textarea`Control to change its value in "editing" mode depending on the variant in use
`inlineediting.button.cancel`Cancel button to quit "editing" mode
`inlineediting.button.submit`Submit button to validate edition in "editing" mode
## Usage diff --git a/packages/design-system/src/stories/form/RichRadioButton.mdx b/packages/design-system/src/stories/form/RichRadioButton.mdx index 206b8d355d..a088c3633e 100644 --- a/packages/design-system/src/stories/form/RichRadioButton.mdx +++ b/packages/design-system/src/stories/form/RichRadioButton.mdx @@ -3,11 +3,10 @@ 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 24562715e1..c259ef0ec8 100644 --- a/packages/design-system/src/stories/form/Switch.mdx +++ b/packages/design-system/src/stories/form/Switch.mdx @@ -11,11 +11,10 @@ import * as Stories from './Switch.stories'; chromatic: { disableSnapshot: true }, }} /> + # 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 @@ -65,9 +64,3 @@ Labels for switches should give users a strong indication of what they are selec - -## Changelog - -| Date | Author | Description | -| ---------- | ---------------- | ----------- | -| 08/04/2020 | Fabien Rassinier | Init page | diff --git a/packages/design-system/src/stories/icons/Icon.mdx b/packages/design-system/src/stories/icons/Icon.mdx index 07e7ccb1a2..f7ef9a1a78 100644 --- a/packages/design-system/src/stories/icons/Icon.mdx +++ b/packages/design-system/src/stories/icons/Icon.mdx @@ -5,11 +5,10 @@ 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 5605d3eecb..64e8450f0e 100644 --- a/packages/design-system/src/stories/icons/SizedIcon.mdx +++ b/packages/design-system/src/stories/icons/SizedIcon.mdx @@ -4,11 +4,10 @@ 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 59ce2c2fc8..94c27a75a3 100644 --- a/packages/design-system/src/stories/layout/Card.mdx +++ b/packages/design-system/src/stories/layout/Card.mdx @@ -6,26 +6,9 @@ import { Status } from '../Status.block'; import * as Stories from './Card.stories'; - -# Card - - - - +# Card `Card` is a basic box component providing the general "rounded-borders container" style. diff --git a/packages/design-system/src/stories/layout/Modal.mdx b/packages/design-system/src/stories/layout/Modal.mdx index 0cff92d2e1..4632095049 100644 --- a/packages/design-system/src/stories/layout/Modal.mdx +++ b/packages/design-system/src/stories/layout/Modal.mdx @@ -7,11 +7,10 @@ import { Status } from '../Status.block'; import * as Stories from './Modal.stories'; + # 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 980d183b41..3c0828ecc4 100644 --- a/packages/design-system/src/stories/layout/Stack.mdx +++ b/packages/design-system/src/stories/layout/Stack.mdx @@ -1,14 +1,13 @@ -import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'; +import { Controls, 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. @@ -76,7 +75,7 @@ function myComponent() { - + ### Simple StackHorizontal with complex spacing @@ -86,7 +85,7 @@ Spacing can also be set as an object `{ x: SizeToken, y: SizeToken }` or `{top: - + You do need to set all the values for each of these objects when using them. @@ -96,7 +95,7 @@ You do need to set all the values for each of these objects when using them. - + ### Nesting Stacks to compose a layout @@ -110,6 +109,6 @@ You do need to set all the values for each of these objects when using them. - + ## Accessibility diff --git a/packages/design-system/src/stories/messaging/Badge.mdx b/packages/design-system/src/stories/messaging/Badge.mdx index 4b3d59cdce..2098f0802a 100644 --- a/packages/design-system/src/stories/messaging/Badge.mdx +++ b/packages/design-system/src/stories/messaging/Badge.mdx @@ -4,11 +4,10 @@ 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 260d8df9e5..3341486f93 100644 --- a/packages/design-system/src/stories/messaging/InlineMessage.mdx +++ b/packages/design-system/src/stories/messaging/InlineMessage.mdx @@ -1,15 +1,14 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, 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. @@ -114,7 +113,7 @@ If you need a message to change from one semantic type to another, a prop may be It behaves like the standalone components but with a `variant` prop. - + ### With a Router link diff --git a/packages/design-system/src/stories/messaging/Message.mdx b/packages/design-system/src/stories/messaging/Message.mdx index a8196b5f78..bdcfa17b20 100644 --- a/packages/design-system/src/stories/messaging/Message.mdx +++ b/packages/design-system/src/stories/messaging/Message.mdx @@ -1,14 +1,13 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, 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 @@ -104,7 +103,7 @@ Main action : - + # Message Collection @@ -186,7 +185,7 @@ Action : - + ## Accessibility diff --git a/packages/design-system/src/stories/messaging/Popover.mdx b/packages/design-system/src/stories/messaging/Popover.mdx index 2ee0ba2010..8a576ae305 100644 --- a/packages/design-system/src/stories/messaging/Popover.mdx +++ b/packages/design-system/src/stories/messaging/Popover.mdx @@ -4,26 +4,9 @@ import { StackVertical, InlineMessageWarning } from '../../'; import { Status } from '../Status.block'; - -# Popover - - - - +# Popover Popover displays floating informative and actionable content in relation to its disclosure. diff --git a/packages/design-system/src/stories/messaging/Tag.mdx b/packages/design-system/src/stories/messaging/Tag.mdx index 507e5bc795..a732e1930a 100644 --- a/packages/design-system/src/stories/messaging/Tag.mdx +++ b/packages/design-system/src/stories/messaging/Tag.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Tag } from '../../'; @@ -7,11 +7,10 @@ import { Status } from '../Status.block'; import * as Stories from './Tag.stories'; + # Tag - - The Tag component is useful to emphasize information to the user, works best with single word values. ## Zoning @@ -90,4 +89,4 @@ N/A - + diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx index 1853fda393..5103942c69 100644 --- a/packages/design-system/src/stories/messaging/Tooltip.mdx +++ b/packages/design-system/src/stories/messaging/Tooltip.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks'; +import { Controls, Meta, Canvas, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Tooltip } from '../../'; @@ -7,11 +7,10 @@ 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 @@ -71,7 +70,7 @@ Otherwise, you’ll just add information pollution to your UI and waste the time - + For more info about Tooltip props, refer to [documentation](https://reakit.io/docs/tooltip/) of Reakit. diff --git a/packages/design-system/src/stories/navigation/Accordion.mdx b/packages/design-system/src/stories/navigation/Accordion.mdx index f66e49f79b..8631981e69 100644 --- a/packages/design-system/src/stories/navigation/Accordion.mdx +++ b/packages/design-system/src/stories/navigation/Accordion.mdx @@ -6,11 +6,10 @@ import { Status } from '../Status.block'; import { InlineMessageWarning } from '../../'; + # Accordion - - Accordion is used to display expandable/collapsable cards with a title. ## Collapsible panel diff --git a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx index 67606ab890..8f878b9434 100644 --- a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx +++ b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx @@ -4,11 +4,10 @@ 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 55fec6bd28..70a65f8ccb 100644 --- a/packages/design-system/src/stories/navigation/Divider.mdx +++ b/packages/design-system/src/stories/navigation/Divider.mdx @@ -5,11 +5,10 @@ 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 @@ -21,7 +20,10 @@ A divider that separates and distinguishes sections of content or groups of menu ## Style - + diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx index d4df5b4139..13e5d12b8a 100644 --- a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx +++ b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx @@ -6,42 +6,10 @@ import { Status } from '../Status.block'; import * as Stories from './FloatingDrawer.stories'; - ( -
- {storyFn()} -
- ), - ]} -/> - -# Drawer - + - - - +# Drawer Drawer slides into the screen from the right side and is placed visually over the content of the page. diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx b/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx index cc3ae38e2f..4c63dc5db2 100644 --- a/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx +++ b/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx @@ -31,6 +31,19 @@ export default { }, }, }, + decorators: [ + (Story: any) => ( +
+ +
+ ), + ], }; const defaultProps = { diff --git a/packages/design-system/src/stories/navigation/Stepper.Step.mdx b/packages/design-system/src/stories/navigation/Stepper.Step.mdx index d394e0e9d1..92476356d3 100644 --- a/packages/design-system/src/stories/navigation/Stepper.Step.mdx +++ b/packages/design-system/src/stories/navigation/Stepper.Step.mdx @@ -1,15 +1,14 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; import { Status } from '../Status.block'; import * as Stories from './Stepper.Step.stories'; + # Step - - Steps are the main elements for the stepper. ## Zoning @@ -54,7 +53,7 @@ N/C - + ## Accessibility diff --git a/packages/design-system/src/stories/navigation/Stepper.Step.stories.tsx b/packages/design-system/src/stories/navigation/Stepper.Step.stories.tsx index ab201e0f2e..a12d66386f 100644 --- a/packages/design-system/src/stories/navigation/Stepper.Step.stories.tsx +++ b/packages/design-system/src/stories/navigation/Stepper.Step.stories.tsx @@ -30,18 +30,18 @@ export const Overflow = () => ( ); -export const Usage = ({ variant, index, title }) => { +export const Usage = ({ variant, index, ...props }: any) => { const StepComponent = Stepper.Step[variant]; StepComponent.displayName = `Step.${variant}`; - return ; + return ; }; Usage.argTypes = { variant: { description: 'Step variation', control: { type: 'select', - options: ['Skeleton', 'Enabled', 'Validated', 'InProgress'], }, + options: ['Skeleton', 'Enabled', 'Validated', 'InProgress'], }, index: { description: 'Step number', diff --git a/packages/design-system/src/stories/navigation/Stepper.mdx b/packages/design-system/src/stories/navigation/Stepper.mdx index 79578a058e..723614d666 100644 --- a/packages/design-system/src/stories/navigation/Stepper.mdx +++ b/packages/design-system/src/stories/navigation/Stepper.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks'; +import { Controls, Canvas, Meta, Story } from '@storybook/blocks'; import { FigmaImage, Use } from '@talend/storybook-docs'; import { Stepper } from '../../'; import { Status } from '../Status.block'; @@ -6,11 +6,10 @@ 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. @@ -60,20 +59,6 @@ A horizontal stepper should not have more than 3 steps. ## States -### Loading - -**Vertical** - - - - - -**Horizontal** - - - - - ### Overflowing steps The space dedicated to step is limited. No reflow strategy has been put in place, so text overflow is truncated with an ellipsis. @@ -141,7 +126,7 @@ In case of an error in the current step, please inform the user by using an inli - + ## Accessibility diff --git a/packages/design-system/src/stories/navigation/Stepper.stories.tsx b/packages/design-system/src/stories/navigation/Stepper.stories.tsx index 8c15e76714..575e5a84b1 100644 --- a/packages/design-system/src/stories/navigation/Stepper.stories.tsx +++ b/packages/design-system/src/stories/navigation/Stepper.stories.tsx @@ -22,23 +22,6 @@ export const Horizontal = () => ( ); -export const VerticalLoading = () => ( - - - - - - -); - -export const HorizontalLoading = () => ( - - - - - -); - export const Overflows = () => (

Vertical stepper

@@ -55,11 +38,11 @@ export const Overflows = () => ( ); -export const Usage = ({ currentStepIndex, variant }: any) => { +export const Usage = ({ variant, ...props }: any) => { const StepperComponent = Stepper[variant]; StepperComponent.displayName = `Stepper.${variant}`; return ( - + @@ -74,9 +57,9 @@ Usage.args = { Usage.argTypes = { variant: { description: 'Stepper variation', + options: ['Vertical', 'Horizontal'], control: { type: 'select', - options: ['Vertical', 'Horizontal'], }, }, currentStepIndex: { diff --git a/packages/design-system/src/stories/navigation/Tabs.mdx b/packages/design-system/src/stories/navigation/Tabs.mdx index 6933585a82..101bc4a8d4 100644 --- a/packages/design-system/src/stories/navigation/Tabs.mdx +++ b/packages/design-system/src/stories/navigation/Tabs.mdx @@ -5,26 +5,9 @@ import { Status } from '../Status.block'; import * as Stories from './Tabs.stories'; - -# Tabs - - - - +# Tabs Tabs are used for switching between different views, functional aspects or categorized data sets. diff --git a/packages/storybook-docs/src/components/index.ts b/packages/storybook-docs/src/components/index.ts index 2f2b4214c0..8e7a19a3f6 100644 --- a/packages/storybook-docs/src/components/index.ts +++ b/packages/storybook-docs/src/components/index.ts @@ -2,6 +2,7 @@ export * from './SearchBar'; export * from './Trial/Trial'; export * from './Card'; export * from './FigmaImage'; +export * from './FigmaIframe'; export * from './Grid'; export * from './Use'; export * from './Statuses'; diff --git a/packages/storybook-docs/src/globalStyles.scss b/packages/storybook-docs/src/globalStyles.scss index 135d345a73..79ae934b8a 100644 --- a/packages/storybook-docs/src/globalStyles.scss +++ b/packages/storybook-docs/src/globalStyles.scss @@ -10,10 +10,6 @@ html { font-size: 62.5%; scroll-behavior: smooth; - - body { - font-size: 1rem; - } } #docs-root { @@ -208,11 +204,6 @@ html { max-width: 100%; } - hr { - border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - margin: 0 0 tokens.$coral-spacing-m 0; - } - h1, h2, h3, @@ -274,10 +265,10 @@ html { background: tokens.$coral-color-neutral-background-medium; } - a { - font: tokens.$coral-paragraph-m-bold; + .sbdocs-a { color: tokens.$coral-color-accent-text; transition: tokens.$coral-transition-fast; + font-weight: bold; &:hover { color: tokens.$coral-color-accent-text-hover;