sorry for this single commit

Talend · Sep 27, 2023 · 8a8cd38 · 8a8cd38
1 parent 1b14f42
commit 8a8cd38
Show file tree

Hide file tree

Showing 71 changed files with 196 additions and 401 deletions.
diff --git 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
@@ -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
@@ -12,33 +12,21 @@ They are exported from Figma using [Supernova](https://www.supernova.io/).
 
 ## What are design tokens?
 
-<StackHorizontal
-    gap="XL"
-    justify="spaceBetween"
-    align="start"
-    margin={{ top: 0, bottom: 'L', left: 0, right: 0 }}
->
-    <StackVertical gap="M">
-        <p>
-            Design tokens are the foundations of a strong Design System — they are «the visual atoms
-            of the Design System». Tokens are a set of <strong>visual properties</strong> such as
-            colors, sizes, shadows, animations...
-        </p>
-        <p>
-            Ours are using a <strong>semantic</strong> 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.
-        </p>
-    </StackVertical>
-    <img
-        src={TokenDefinition}
-        alt="This graph shows that for one token name, depending on a theme, the value can be different"
-        width="464px"
-    />
-
-</StackHorizontal>
+<img
+	src={TokenDefinition}
+	alt="This graph shows that for one token name, depending on a theme, the value can be different"
+	width="464px"
+/>
+
+Design tokens are the foundations of a strong Design System — they are «the visual atoms
+of the Design System». Tokens are a set of <strong>visual properties</strong> such as
+colors, sizes, shadows, animations...
+
+Ours are using a <strong>semantic</strong> 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
@@ -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
@@ -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';
 
 <Meta title="Clickable/Button" />
+<Status id="button" />
 
 # Button
 
-<Status id="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
 	<Story of={Stories.Primary} />
 </Canvas>
 
-<ArgTypes of={Stories.Primary} />
+<Controls of={Stories.Primary} />
 
 #### Destructive
 
@@ -60,7 +58,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 	<Story of={Stories.Destructive} />
 </Canvas>
 
-<ArgTypes of={Stories.Destructive} />
+<Controls of={Stories.Destructive} />
 
 #### Secondary
 
@@ -72,7 +70,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 	<Story of={Stories.Secondary} />
 </Canvas>
 
-<ArgTypes of={Stories.Secondary} />
+<Controls of={Stories.Secondary} />
 
 #### Tertiary
 
@@ -84,7 +82,7 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 	<Story of={Stories.Tertiary} />
 </Canvas>
 
-<ArgTypes of={Stories.Tertiary} />
+<Controls of={Stories.Tertiary} />
 
 ## Interactions
 

diff --git 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';
 
 <Meta title="Clickable/ButtonAsLink" />
+<Status id="buttonAsLink" />
 
 # Button as links
 
-<Status id="buttonAsLink" />
-
 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,31 +47,31 @@ They are otherwise available in the same sizes and with the same iconset.
 	<Story of={Stories.PrimaryAsLink} />
 </Canvas>
 
-<ArgTypes of={Stories.PrimaryAsLink} />
+<Controls of={Stories.PrimaryAsLink} />
 
 #### ButtonDestructiveAsLink
 
 <Canvas>
 	<Story of={Stories.DestructiveAsLink} />
 </Canvas>
 
-<ArgTypes of={Stories.DestructiveAsLink} />
+<Controls of={Stories.DestructiveAsLink} />
 
 #### ButtonSecondaryAsLink
 
 <Canvas>
 	<Story of={Stories.SecondaryAsLink} />
 </Canvas>
 
-<ArgTypes of={Stories.SecondaryAsLink} />
+<Controls of={Stories.SecondaryAsLink} />
 
 #### ButtonTertiaryAsLink
 
 <Canvas>
 	<Story of={Stories.TertiaryAsLink} />
 </Canvas>
 
-<ArgTypes of={Stories.TertiaryAsLink} />
+<Controls of={Stories.TertiaryAsLink} />
 
 #### ButtonAsLink
 

diff --git 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';
 
 <Meta of={Stories} />
+<Status id="buttonIcon" />
 
 # ButtonIcon
 
-<Status id="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,23 +111,23 @@ You have access to three components with curated props for each.
 	<Story of={Stories.Default} />
 </Canvas>
 
-<ArgTypes of={Stories.Default} />
+<Controls of={Stories.Default} />
 
 ### ButtonIconToggle
 
 <Canvas>
 	<Story of={Stories.Toggle} />
 </Canvas>
 
-<ArgTypes of={Stories.Toggle} />
+<Controls of={Stories.Toggle} />
 
 ### ButtonIconFloating
 
 <Canvas>
 	<Story of={Stories.Floating} />
 </Canvas>
 
-<ArgTypes of={Stories.Floating} />
+<Controls of={Stories.Floating} />
 
 ### Button props
 

diff --git 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<typeof ButtonIcon>;
 
 const TemplateIcon: StoryFn<typeof ButtonIcon> = args => {

diff --git 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';
 
 <Meta title="Clickable/Dropdown" component={Dropdown} />
+<Status id="dropdown" />
 
 # Dropdown
 
-<Status id="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
@@ -1,16 +1,15 @@
-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';
 import * as StoriesButton from './LinkAsButton.stories';
 import { Status } from '../Status.block';
 
 <Meta title="Clickable/Link" component={Link} />
+<Status id="link" />
 
 # Link
 
-<Status id="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
 	<Story of={StoriesButton.LinkAsButtonStory} />
 </Canvas>
 
-<ArgTypes of={StoriesButton.LinkAsButtonStory} />
+<Controls of={StoriesButton.LinkAsButtonStory} />
 
 ## Content
 
@@ -135,4 +134,4 @@ Press <kbd>ENTER</kbd> to open a link
 	<Story of={Stories.Usage} />
 </Canvas>
 
-<ArgTypes of={Stories.Usage} />
+<Controls of={Stories.Usage} />
diff --git 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';
 
 <Meta of={Stories} />
+<Status id="emptyState" />
 
 # EmptyState
 
-<Status id="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
 	<Story of={Stories.MediumWithAction} />
 </Canvas>
 
-<ArgTypes of={Stories.MediumWithAction} />
+<Controls of={Stories.MediumWithAction} />
 
 **Content guidelines**
 
@@ -164,7 +163,7 @@ N/A
 	<Story of={Stories.Usage} />
 </Canvas>
 
-<ArgTypes of={Stories.Usage} />
+<Controls of={Stories.Usage} />
 
 ### Button as Link
 

diff --git 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';
 
 <Meta of={Stories} />
-
-# ErrorState
-
 <Status id="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
@@ -3,11 +3,10 @@ import * as Stories from './Loading.stories';
 import { Status } from '../Status.block';
 
 <Meta of={Stories} />
+<Status id="loading" />
 
 # Loading
 
-<Status id="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
@@ -1,8 +1,13 @@
+import tokens from '@talend/design-tokens';
 import { Loading } from '../..';
 
 export default {
 	component: Loading,
 	title: 'Feedback/Loading',
 };
 
-export const Default = () => <Loading />;
+export const Default = () => (
+	<div style={{ maxWidth: tokens.coralSizingMaximal }}>
+		<Loading />
+	</div>
+);