chore: finish links and tokens

Talend · Sep 25, 2023 · 4497627 · 4497627
1 parent 6cf507c
commit 4497627
Show file tree

Hide file tree

Showing 22 changed files with 270 additions and 182 deletions.
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,7 +12,7 @@ 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.
 
@@ -22,7 +22,7 @@ Use `Button` when you need highly readable CTAs that trigger an action on the pa
 
 ## 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.
 
@@ -32,7 +32,7 @@ Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 
 ## 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.
 

diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx
@@ -28,7 +28,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
 
@@ -101,7 +101,7 @@ Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder f
 	<Story story={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
 

diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
@@ -16,7 +16,7 @@ import * as ButtonStories from './Button.stories';
 
 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
@@ -106,7 +106,7 @@ Use the same Skeletons as `Button`.
 	<Story story={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
 
@@ -118,7 +118,7 @@ ButtonsAsLinks can also have a tooltip on hover displaying additional descriptio
 
 ## 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
 

diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
@@ -95,7 +95,7 @@ Skeleton needs are handled by the Skeleton component. Use `SkeletonButtonIcon` o
 	<Story story={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
 

diff --git a/packages/design-system/src/stories/clickable/Dropdown.mdx b/packages/design-system/src/stories/clickable/Dropdown.mdx
@@ -115,7 +115,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.
 

diff --git a/packages/design-system/src/stories/clickable/Link.mdx b/packages/design-system/src/stories/clickable/Link.mdx
@@ -17,7 +17,7 @@ import * as StoriesButton from './LinkAsButton.stories';
 
 Link is used for navigation.
 
-If you use a link for triggering an action on the page, you must consider using a [Button](/docs/components-clickable-buttons-button--variations) instead.
+If you use a link for triggering an action on the page, you must consider using a [Button](/docs/clickable-button--docs) instead.
 
 Still need to be convinced? Please, take the time to read [this article written by Marcy Sutton](https://marcysutton.com/links-vs-buttons-in-modern-web-applications).
 

diff --git a/packages/design-system/src/stories/form/About.mdx b/packages/design-system/src/stories/form/About.mdx
@@ -13,7 +13,7 @@ The library provides a collection of fields, mostly applying our design language
 
 We do however extend standard fields with prefix and affix support, error management and built-in labels.
 
-[Learn more about the fields here.](/docs/components-form-form-fields-about--form-field-error)
+[Learn more about the fields here.](/docs/form-fields--docs)
 
 ## Layout elements
 
@@ -23,15 +23,15 @@ A very `low-opinion` component, `Form` can easily be replaced by the html `form`
 
 Using `Form` will grant you a ready-made flex layout with a `spacing-s` gap for your fields.
 
-[Browse the Form documentation for examples.](/docs/components-form-form--form-skeleton)
+[Browse the Form documentation for examples.](/docs/form-form--docs#skeleton)
 
 ### The `Fieldset` component
 
 Neatly wrap together your fields with the `Fieldset` component.
 
 It provides an enforced gap between children fields but can also sport a `legend` prop for better contextualization.
 
-[Browse the Fieldset documentation for examples.](/docs/components-form-form-fieldset--default-story)
+[Browse the Fieldset documentation for examples.](/docs/form-fieldset--docs)
 
 ### The `Row` component
 
@@ -55,4 +55,4 @@ In both cases, a gap of `spacing-l` is enforced between the fields.
 
 An opinionated layout component, `Button`'s mission is to enforce the placement of the form's actions.
 
-[Browse the Buttons documentation for examples.](/docs/components-form-form-buttons--form-buttons-skeleton)
+[Browse the Buttons documentation for examples.](/docs/form-buttons--docs)
diff --git a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
@@ -23,7 +23,7 @@ A Form always displays buttons in order to be cancelled or validated.
 
 ## Style
 
-- The gap between buttons should be `spacing-m` ([read the tokens doc here](/docs/design-tokens-light-measures--page)).
+- The gap between buttons should be `spacing-m` ([read the tokens doc here](/docs/design-tokens-measures--docs)).
 
 ## States
 

diff --git a/packages/design-system/src/stories/form/Field/FormField.mdx b/packages/design-system/src/stories/form/Field/FormField.mdx
@@ -11,7 +11,7 @@ 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/components-inline-message--default-demo) for text-based inputs.
+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.Copy.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
@@ -46,7 +46,7 @@ A shortcut to a read-only `Form.Text` field with prefix and a state, it's used t
 	<Story story={Stories.CopyWithPrefix} />
 </Canvas>
 
-Read the [Affixes documentation here](/docs/components-form-form-fields-prefix-suffix--quick-start) for more details.
+Read the [Affixes documentation here](/docs/form-affic-affixes) for more details.
 
 ## Interactions
 

diff --git a/packages/design-system/src/stories/form/Form.mdx b/packages/design-system/src/stories/form/Form.mdx
@@ -27,7 +27,7 @@ The `Form` component is a slightly opinionated `<form>` tag with a flex layout a
 - The vertical gap between fields, unless specified otherwise, is `spacing-s`.
 - The horizontal gap between inlined elements in a form is `spacing-m`.
 
-[The spacing docs can be found here.](/docs/design-tokens-light-measures--page)
+[The spacing docs can be found here.](/docs/design-tokens-measures--docs)
 
 ## States
 
@@ -93,13 +93,13 @@ When an error occurs at a level that is not specific to one field, use `InlineMe
 	<Story story={Stories.Error} />
 </Canvas>
 
-[The InlineMessage docs can be found here.](/docs/components-inline-message--default-demo)
+[The InlineMessage docs can be found here.](/docs/messaging-inlinemessage--docs)
 
 ## Content
 
 ### Form inline help
 
-Consider using an [Inline message](/?path=/docs/components-inlinemessage--information) when help is needed to fill the form.
+Consider using an [Inline message](/?path=/docs/messaging-inlinemessage--docs) when help is needed to fill the form.
 
 <FigmaImage
 	src="https://www.figma.com/file/FaYIWpJeP6LwjWr78L8eAr/Forms?node-id=314%3A1028"
@@ -132,7 +132,7 @@ When the user clicks on the cancel button or go back to the previous page, provi
 	alt="Form mockup"
 />
 
-You can easily build that dialog with the [Modal component.](/docs/components-modal--with-disclosure).
+You can easily build that dialog with the [Modal component.](/docs/layout-modal--docs).
 
 ### Error focus
 

diff --git a/packages/design-system/src/stories/icons/About.mdx b/packages/design-system/src/stories/icons/About.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
 import { StackHorizontal, SizedIcon, Icon } from '../../';
 import * as SizedStories from './SizedIcon.stories';
 import * as Stories from './Icon.stories';
@@ -23,12 +23,14 @@ Icons are now strictly defined by size.
 
 `SizedIcon` takes two props `size` and `name`. The available `name`s will be dependent on the chosen `size`!
 
-[Checkout the SizedIcon docs here.](/docs/components-icon-sizedicon--icon-xs)
+[Checkout the SizedIcon docs here.](/docs/icons-sizedicon--docs)
 
 <Canvas>
-	<Story story={SizedStories.Example} />
+	<Story of={SizedStories.Example} />
 </Canvas>
 
+<ArgTypes of={SizedStories.IconXS} />
+
 Calling `<SizedIcon size="XS" name="note-pencil" />` would not compile in TS because `note-pencil` does not exist at this size.
 
 This is true both for developers and designers.
@@ -37,10 +39,10 @@ This is true both for developers and designers.
 
 This is more generic component which is not considered as Icon but more as image&svg loader
 
-[Checkout the Icon docs here.](/docs/components-icon-icon-legacy--page)
+[Checkout the Icon docs here.](/docs/icons-icon--docs)
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 These icons are lawless. Some even have their own colorset. They are impossible to homogenize as part of a design language.
diff --git a/packages/design-system/src/stories/icons/Icon.mdx b/packages/design-system/src/stories/icons/Icon.mdx
@@ -1,30 +1,22 @@
-import { IconItem, Canvas, Meta, Story } from '@storybook/blocks';
-import { Icons } from '@talend/storybook-docs';
-import { IconsProvider, StackVertical, InlineMessageWarning, Icon } from '../../';
+import { ArgTypes, IconItem, Canvas, Meta, Story } from '@storybook/blocks';
+import { IconsProvider, InlineMessageWarning, Icon } from '../../';
 import * as Stories from './Icon.stories';
+import { AllIconsDocs } from './Icons';
 
 <Meta
 	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
 	}}
-	decorators={[
-		story => (
-			<Canvas>
-				<IconsProvider />
-				<Story>{story()}</Story>
-			</Canvas>
-		),
-	]}
 />
 
-# Icons
+# Icon
 
-All icons can be found below and you can apply transformations on them.
-
-## All icons
+This component is generic and can be seens as a Primitive to display SVG, img, remote or not.
 
-<Icons />
+<Canvas>
+	<Story story={Stories.Usage} />
+</Canvas>
 
 ## Remote icon
 
@@ -34,10 +26,24 @@ Icon can accept a URL as `name` but it must be prefixed by "remote-"
 	<Icon name="remote-https://unpkg.com/@talend/[email protected]/src/svg/core/abc.svg" />
 </IconItem>
 
+```javascript
+<Icon name="remote-https://unpkg.com/@talend/[email protected]/src/svg/core/abc.svg" />
+```
+
 ## Icon as image
 
 Icon can accept any type of image but their `name` must be prefixed by "src-".
 
-<IconItem name="src-url as img">
-	<Icon name="src-https://statics-dev.cloud.talend.com/@talend/common/images/favicon-logo-square.ico" />
-</IconItem>
+    <IconItem name="src-url as img">
+    	<Icon name="src-https://statics-dev.cloud.talend.com/@talend/common/images/favicon-logo-square.ico" />
+    </IconItem>
+
+```javascript
+<Icon name="src-https://statics-dev.cloud.talend.com/@talend/common/images/favicon-logo-square.ico" />
+```
+
+## SVG from the bundle all.svg
+
+All icons can be found below and you can apply transformations on them.
+
+<AllIconsDocs />
diff --git a/packages/design-system/src/stories/icons/Icon.stories.tsx b/packages/design-system/src/stories/icons/Icon.stories.tsx
@@ -1,13 +1,46 @@
+import { useState, useEffect } from 'react';
+import type { ChangeEvent, FormEvent } from 'react';
+import { IconGallery, IconItem } from '@storybook/blocks';
+
 import { StackHorizontal, Icon } from '../../';
+import { AllIconsTemplate } from './Icons';
 
 export default {
 	title: 'Icons/Icon',
 };
 
-export const Usage = () => (
+type UsageProps = {
+	name: string;
+};
+
+export const Usage = (args: UsageProps) => (
 	<StackHorizontal gap="XS">
-		<Icon name="talend-cross" style={{ width: '1.2rem', height: '1.2rem' }} />
-		<Icon name="talend-cross" />
-		<Icon name="talend-cross" style={{ width: '2.4rem', height: '2.4rem' }} />
+		<Icon name={args.name} style={{ width: '1.2rem', height: '1.2rem' }} />
+		<Icon name={args.name} />
+		<Icon name={args.name} style={{ width: '2.4rem', height: '2.4rem' }} />
 	</StackHorizontal>
 );
+
+Usage.args = {
+	name: 'talend-cross',
+};
+Usage.argTypes = {
+	name: {
+		control: 'string',
+	},
+};
+
+export const AllIcons = () => (
+	<AllIconsTemplate>
+		{({ name, size, transform, border, filter, useCurrentColor }) => (
+			<Icon
+				name={name}
+				size={size}
+				transform={transform}
+				border={border}
+				filter={filter}
+				useCurrentColor={useCurrentColor}
+			/>
+		)}
+	</AllIconsTemplate>
+);