Merge branch 'jmfrancois/chore/storybook-beta' into gnicolas/chore/st…

…orybook-beta-1
Talend · Sep 26, 2023 · 5cf5a09 · 5cf5a09
2 parents cb8450b + f3b8a7c
commit 5cf5a09
Show file tree

Hide file tree

Showing 66 changed files with 514 additions and 428 deletions.
diff --git a/packages/design-docs/.storybook/main.js b/packages/design-docs/.storybook/main.js
@@ -16,12 +16,12 @@ const STORIES = [
 	`${rootPath}src/Principles.mdx`,
 	`${rootPath}src/Statuses.mdx`,
 	// `${rootPath}src/Catalog.mdx`,
-	`${rootPath}src/tokens/**/*.mdx`,
 	`${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Internationalization.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Conventions.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Capitalization.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Wording.@(js|tsx|mdx)`,
+	`${rootPath}src/tokens/**/*.mdx`,
 	`${rootPath}../design-system/src/stories/**/*.@(stories.tsx|mdx)`,
 	// `${rootPath}src/components/**/*.@(stories.tsx|mdx)`,
 ];

diff --git a/packages/design-docs/src/tokens/ColorComposition.tsx b/packages/design-docs/src/tokens/ColorComposition.tsx
@@ -116,7 +116,7 @@ function ColorCompositionItem({ tokenComposition }: { tokenComposition: Composit
 					textColor={tokenByName[`coralColor${tokenComposition.color}`]}
 					iconColor={iconToken}
 				/>
-				<ul style={{ listStyleType: 'none' }}>
+				<ul style={{ listStyleType: 'none', marginTop: tokens.coralSpacingS }}>
 					<li>
 						<TokenDisplay token={iconToken} />
 					</li>
@@ -138,7 +138,7 @@ function ColorCompositionItem({ tokenComposition }: { tokenComposition: Composit
 							iconColor={tokenByName[`coralColor${tokenComposition.icon}Hover`]}
 							isHover
 						/>
-						<ul style={{ listStyleType: 'none' }}>
+						<ul style={{ listStyleType: 'none', marginTop: tokens.coralSpacingS }}>
 							<li>
 								<TokenDisplay token={tokenByName[`coralColor${tokenComposition.icon}Hover`]} />
 							</li>

diff --git a/packages/design-docs/src/tokens/TokenValue.tsx b/packages/design-docs/src/tokens/TokenValue.tsx
@@ -106,7 +106,7 @@ export function TokenList({
 								<span>{utils.getDisplayName(token.name)}</span>
 							</Tooltip>
 						</div>
-						<ul style={{ listStyleType: 'none' }}>
+						<ul style={{ listStyleType: 'none', marginTop: tokens.coralSpacingS }}>
 							<li>
 								<TokenValue lang="SCSS">{utils.getScssName(token.name)}</TokenValue>
 							</li>

diff --git a/packages/design-docs/src/types.d.ts b/packages/design-docs/src/types.d.ts
@@ -0,0 +1 @@
+declare module 'color-contrast-checker';
diff --git a/packages/design-system/src/stories/clickable/About.mdx b/packages/design-system/src/stories/clickable/About.mdx
@@ -12,30 +12,30 @@ Clickables are just the things that look like buttons. It's a UI pattern that ha
 
 ## Buttons
 
-[Checkout the Button docs here.](/docs/components-clickable-buttons-button--variations)
+[Checkout the Button docs here.](/docs/clickable-button--docs)
 
 Use `Button` when you need highly readable CTAs that trigger an action on the page.
 
 <Canvas withSource="closed">
-	<Story story={ButtonVariations} />
+	<Story of={ButtonVariations} />
 </Canvas>
 
 ## ButtonAsLinks
 
-[Checkout the ButtonAsLink docs here.](/docs/components-clickable-buttons-buttonaslink--variations)
+[Checkout the ButtonAsLink docs here.](/docs/clickable-buttonaslink--docs)
 
 Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 
 <Canvas withSource="closed">
-	<Story story={ButtonAsLinkVariations} />
+	<Story of={ButtonAsLinkVariations} />
 </Canvas>
 
 ## ButtonIcon
 
-[Checkout the ButtonIcon docs here.](/docs/components-clickable-buttons-buttonicon--variations)
+[Checkout the ButtonIcon docs here.](/docs/clickable-buttonicon--docs)
 
 Use `ButtonIcon` when you need to click on a standalone icon. This should never be a hyperlink.
 
 <Canvas withSource="closed">
-	<Story story={ButtonIconVariations} />
+	<Story of={ButtonIconVariations} />
 </Canvas>
diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx
@@ -25,7 +25,7 @@ Buttons are clickable items used for actions. They can have different styles dep
 
 Coral supports two button sizes: `M` and `S`.
 
-The small size can only display icons from [SizedIcon's "S" batch](/docs/components-icon-sizedicon--icon-xs).
+The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-sizedicon--docs).
 
 ### Variations
 
@@ -35,53 +35,53 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/compone
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### Primary
 
 <Canvas withSource="closed">
-	<Story story={Stories.PrimaryVariations} />
+	<Story of={Stories.PrimaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Primary} />
+	<Story of={Stories.Primary} />
 </Canvas>
 
 <ArgTypes of={Stories.Primary} />
 
 #### Destructive
 
 <Canvas withSource="closed">
-	<Story story={Stories.DestructiveVariations} />
+	<Story of={Stories.DestructiveVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Destructive} />
+	<Story of={Stories.Destructive} />
 </Canvas>
 
 <ArgTypes of={Stories.Destructive} />
 
 #### Secondary
 
 <Canvas withSource="closed">
-	<Story story={Stories.SecondaryVariations} />
+	<Story of={Stories.SecondaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Secondary} />
+	<Story of={Stories.Secondary} />
 </Canvas>
 
 <ArgTypes of={Stories.Secondary} />
 
 #### Tertiary
 
 <Canvas withSource="closed">
-	<Story story={Stories.TertiaryVariations} />
+	<Story of={Stories.TertiaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Tertiary} />
+	<Story of={Stories.Tertiary} />
 </Canvas>
 
 <ArgTypes of={Stories.Tertiary} />
@@ -95,17 +95,17 @@ All buttons have interactive states for "hover", "active" and "disabled". A focu
 Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder for a button.
 
 <Canvas>
-	<Story story={Stories.SkeletonButton} />
+	<Story of={Stories.SkeletonButton} />
 </Canvas>
 
-[The Skeleton Documentation is over there!](/docs/components-skeleton--skeleton-button-story)
+[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
 ### Button tooltips
 
 Buttons can have a tooltip on hover displaying additional description.
 
 <Canvas>
-	<Story story={Stories.TooltipButton} />
+	<Story of={Stories.TooltipButton} />
 </Canvas>
 
 ### Async buttons
@@ -115,7 +115,7 @@ If the button has an icon, the spinner will temporarily replace this icon as lon
 No action will be possible until it's done.
 
 <Canvas>
-	<Story story={Stories.Loading} />
+	<Story of={Stories.Loading} />
 </Canvas>
 
 ## Usage
@@ -124,7 +124,7 @@ As you've seen, each variant has its own component. But you may want to switch f
 You can, using the `<Button>` generic component.
 
 <Canvas>
-	<Story story={Stories.VariantComponent} />
+	<Story of={Stories.VariantComponent} />
 </Canvas>
 
 Each variant has the same usage rules as their standalone component counterparts seen above.

diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
@@ -13,7 +13,7 @@ import { Status } from '../Status.block';
 
 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/components-clickable-buttons-button--variations) with exceptions:
+Their abilities are the same as the [Button component](/docs/clickable-button--docs) with exceptions:
 
 - `ButtonAsLink` components can't be in the "loading" state
 - `ButtonAsLink` components can't be in the "disabled" state
@@ -40,37 +40,37 @@ They are otherwise available in the same sizes and with the same iconset.
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### ButtonPrimaryAsLink
 
 <Canvas>
-	<Story story={Stories.PrimaryAsLink} />
+	<Story of={Stories.PrimaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.PrimaryAsLink} />
 
 #### ButtonDestructiveAsLink
 
 <Canvas>
-	<Story story={Stories.DestructiveAsLink} />
+	<Story of={Stories.DestructiveAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.DestructiveAsLink} />
 
 #### ButtonSecondaryAsLink
 
 <Canvas>
-	<Story story={Stories.SecondaryAsLink} />
+	<Story of={Stories.SecondaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.SecondaryAsLink} />
 
 #### ButtonTertiaryAsLink
 
 <Canvas>
-	<Story story={Stories.TertiaryAsLink} />
+	<Story of={Stories.TertiaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.TertiaryAsLink} />
@@ -82,7 +82,7 @@ If you need to switch from one variant to another, using a prop can be easier th
 `ButtonAsLink` is a standalone component made just for that.
 
 <Canvas>
-	<Story story={Stories.VariantComponent} />
+	<Story of={Stories.VariantComponent} />
 </Canvas>
 
 ## States
@@ -100,22 +100,22 @@ The loading state has been removed as well.
 Use the same Skeletons as `Button`.
 
 <Canvas>
-	<Story story={ButtonStories.SkeletonButton} />
+	<Story of={ButtonStories.SkeletonButton} />
 </Canvas>
 
-[The Skeleton Documentation is over there!](/docs/components-skeleton--skeleton-button-story)
+[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
 ### Button tooltips
 
 ButtonsAsLinks can also have a tooltip on hover displaying additional description.
 
 <Canvas>
-	<Story story={Stories.TooltipButton} />
+	<Story of={Stories.TooltipButton} />
 </Canvas>
 
 ## Content
 
-The rules of `Button` apply here as well. You'll [find them here](/docs/components-clickable-buttons-button--variations#content).
+The rules of `Button` apply here as well. You'll [find them here](/docs/clickable-button--docs#content).
 
 ## Usage
 
@@ -124,13 +124,13 @@ Links in React SPAs are often handled through React Router and similar packages.
 Each `ButtonAsLink` is therefore able to shape itself around them, here React Router's `<Link />` for instance:
 
 <Canvas>
-	<Story story={Stories.ButtonAsRouterLink} />
+	<Story of={Stories.ButtonAsRouterLink} />
 </Canvas>
 
 The usual `ButtonAsLink` collection component also enables the same behaviour, if you prefer props to standalone variants.
 
 <Canvas>
-	<Story story={Stories.ButtonAsRouterLinkVariant} />
+	<Story of={Stories.ButtonAsRouterLinkVariant} />
 </Canvas>
 
 ## Accessibility

diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
@@ -37,15 +37,15 @@ It handles the two largest usecases we have for clickable icons: actions and tog
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### Default
 
 This is the go-to ButtonIcon for most generic actions.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIcon} />
+	<Story of={Stories.DefaultButtonIcon} />
 </Canvas>
 
 #### Toggle
@@ -55,7 +55,7 @@ If the button needs to hold an active / inactive state, then it is a Toggle.
 Don’t use Toggles in series, opt for badge dropdowns instead.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIconToggle} />
+	<Story of={Stories.DefaultButtonIconToggle} />
 </Canvas>
 
 #### Floating
@@ -65,7 +65,7 @@ This variant is only used when the button floats on top of content.
 It could be it's sitting on top of a line connecting two nodes, or sticky on top of a draggable scene for instance.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIconFloating} />
+	<Story of={Stories.DefaultButtonIconFloating} />
 </Canvas>
 
 ## States
@@ -77,7 +77,7 @@ ButtonIcons can display a "loading" state for asynchronous actions.
 Only use when necessary to avoid multiple clicks when the action is not instant.
 
 <Canvas>
-	<Story story={Stories.Loading} />
+	<Story of={Stories.Loading} />
 </Canvas>
 
 ### Skeleton
@@ -89,10 +89,10 @@ The Loading state is for asynchronous tasks where the Button (and the button onl
 Skeleton needs are handled by the Skeleton component. Use `SkeletonButtonIcon` or the right `variant` prop on `Skeleton`.
 
 <Canvas>
-	<Story story={Stories.ButtonIconSkeletons} />
+	<Story of={Stories.ButtonIconSkeletons} />
 </Canvas>
 
-[The Skeleton Documentation is over there!](/docs/components-skeleton--skeleton-button-story)
+[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
 
 ## Interaction
 
@@ -109,23 +109,23 @@ You have access to three components with curated props for each.
 ### ButtonIcon
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 <ArgTypes of={Stories.Default} />
 
 ### ButtonIconToggle
 
 <Canvas>
-	<Story story={Stories.Toggle} />
+	<Story of={Stories.Toggle} />
 </Canvas>
 
 <ArgTypes of={Stories.Toggle} />
 
 ### ButtonIconFloating
 
 <Canvas>
-	<Story story={Stories.Floating} />
+	<Story of={Stories.Floating} />
 </Canvas>
 
 <ArgTypes of={Stories.Floating} />
@@ -135,7 +135,7 @@ You have access to three components with curated props for each.
 Of course all buttons can also use natural `<button>` attributes (but not `classNames` nor `style`).
 
 <Canvas>
-	<Story story={Stories.NaturalButtonProps} />
+	<Story of={Stories.NaturalButtonProps} />
 </Canvas>
 
 ## Accessibility

diff --git a/packages/design-system/src/stories/clickable/Dropdown.mdx b/packages/design-system/src/stories/clickable/Dropdown.mdx
@@ -111,7 +111,7 @@ Dropdowns have two parts: a disclosure and a popover.
 
 **Disclosure**
 
-The disclosure can be any `Clickable` element. [You can find them here.](/docs/components-clickable-buttons-about--button-variations)
+The disclosure can be any `Clickable` element. [You can find them here.](/docs/clickable-about--docs)
 
 The `isDropdown` props of `Button` is mandatory.