migrate status page and status block

packages/design-docs/.storybook/main.js

@@ -14,7 +14,7 @@ const STORIES = [
 	`${rootPath}src/Welcome.mdx`,
 	`${rootPath}src/GettingStarted.mdx`,
 	`${rootPath}src/Principles.mdx`,
-	// `${rootPath}src/Status.mdx`,
+	`${rootPath}src/Statuses.mdx`,
 	// `${rootPath}src/Catalog.mdx`,
 	`${rootPath}src/tokens/**/*.mdx`,
 	`${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`,

packages/design-docs/package.json

@@ -25,6 +25,7 @@
     "@storybook/react": "^7.4.1",
     "@talend/design-system": "^7.15.0",
     "@talend/design-tokens": "^2.9.0",
+    "@talend/storybook-docs": "^1.1.6",
     "@talend/icons": "^6.59.0",
     "algoliasearch": "^4.17.2",
     "classnames": "^2.3.1",

packages/design-docs/src/StatusTable.module.scss

@@ -0,0 +1,39 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.legend {
+	margin: tokens.$coral-spacing-m 0;
+	padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m;
+	/* stylelint-disable-next-line declaration-no-important */
+	color: tokens.$coral-color-neutral-text-weak !important;
+	background: tokens.$coral-color-neutral-background-medium;
+	border-radius: tokens.$coral-radius-s;
+}
+
+.dl {
+	display: grid;
+	gap: 1ch;
+	grid-template: auto / auto 1fr;
+
+	dt {
+		font: tokens.$coral-paragraph-m-bold;
+	}
+}
+
+.table.table {
+	overflow: auto;
+
+	th {
+		position: sticky;
+		top: 0;
+	}
+
+	th + th,
+	td + td {
+		width: 20rem;
+	}
+}
+
+.tag {
+	padding: 0 tokens.$coral-spacing-xxs;
+	border-radius: tokens.$coral-radius-s;
+}

packages/design-docs/src/StatusTable.tsx

@@ -0,0 +1,58 @@
+import { Suspense } from 'react';
+
+import theme from './StatusTable.module.scss';
+
+import statuses from '@talend/design-system/src/stories/status.json';
+import { Statuses, ComponentStatuses } from '@talend/storybook-docs';
+
+function toTitleCase(value: string) {
+	return value
+		.replace(/([A-Z])/g, match => ` ${match}`)
+		.replace(/^./, match => match.toUpperCase())
+		.trim();
+}
+
+export function StatusTable() {
+	return (
+		<>
+			<div className={theme.legend}>
+				<dl className={theme.dl}>
+					<dt>Figma</dt>
+					<dd>
+						All use cases have been designed, Figma library is ready to be consumed by designers.
+					</dd>
+					<dt>Storybook</dt>
+					<dd>The guidelines are exhaustive and all sections have been completed.</dd>
+					<dt>React</dt>
+					<dd>The component is ready to be used by developers in their project.</dd>
+					<dt>i18n</dt>
+					<dd>
+						Wording have been checked and translated on each supported languages by translators.
+					</dd>
+				</dl>
+			</div>
+			<Suspense fallback={<span>Loading status...</span>}>
+				<table className={theme.table}>
+					<thead>
+						<tr>
+							<th>Component</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{Object.entries(statuses).map(([componentId, info]) => {
+							return (
+								<tr key={componentId}>
+									<td>{toTitleCase(componentId)}</td>
+									<td>
+										<ComponentStatuses {...(info as Statuses)} />
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</Suspense>
+		</>
+	);
+}

packages/design-docs/src/Statuses.mdx

@@ -0,0 +1,11 @@
+import { Unstyled, Meta } from '@storybook/blocks';
+import { Card, Grid, SearchBar } from '@talend/storybook-docs';
+import { StatusTable } from './StatusTable';
+
+<Meta title="Component status" />
+
+# Component status
+
+<Unstyled>
+	<StatusTable />
+</Unstyled>

packages/design-system/package.json

@@ -52,6 +52,7 @@
     "@storybook/addon-interactions": "^7.4.1",
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addons": "^7.4.1",
+    "@storybook/blocks": "^7.4.1",
     "@storybook/core-events": "^7.4.1",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.4.1",

packages/design-system/src/stories/Status.block.tsx

@@ -0,0 +1,9 @@
+import statuses from './status.json';
+import { Statuses, ComponentStatuses } from '@talend/storybook-docs';
+
+type StatusesConfig = Record<string, Statuses>;
+
+export function Status({ id }: { id: string }) {
+	const info = (statuses as StatusesConfig)[id];
+	return <ComponentStatuses {...info} />;
+}

packages/design-system/src/stories/clickable/Button.mdx

@@ -2,17 +2,14 @@ import { Meta, Canvas, Story } from '@storybook/blocks';
 import { ArgTypes } from '@storybook/blocks';
 import { FigmaImage, Use } from '@talend/storybook-docs';
 import * as Stories from './Button.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	title="Clickable/Button"
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-		figmaLink: 'https://www.figma.com/file/vvJTHBAgiLfBpgeKEjmvvZ/Buttons',
-	}}
-/>
+<Meta title="Clickable/Button" />
 
 # Button
 
+<Status id="button" />
+
 Buttons are clickable items used for actions. They can have different styles depending on the needs.
 
 ## Zoning

packages/design-system/src/stories/clickable/ButtonAsLink.mdx

@@ -3,17 +3,14 @@ import { ArgTypes } from '@storybook/blocks';
 import { FigmaImage } from '@talend/storybook-docs';
 import * as Stories from './ButtonAsLink.stories';
 import * as ButtonStories from './Button.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	title="Clickable/ButtonAsLink"
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-		figmaLink: 'https://www.figma.com/file/vvJTHBAgiLfBpgeKEjmvvZ/Buttons',
-	}}
-/>
+<Meta title="Clickable/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/components-clickable-buttons-button--variations) with exceptions:

packages/design-system/src/stories/clickable/ButtonIcon.mdx

@@ -1,17 +1,14 @@
 import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks';
 import { FigmaImage, FigmaLink, Links } from '@talend/storybook-docs';
 import * as Stories from './ButtonIcon.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	of={Stories}
-	parameters={{
-		figmaLink: 'https://www.figma.com/file/KuJ1PlP77uyXlfOhdniqsZ/ButtonIcon?node-id=1%3A75',
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-	}}
-/>
+<Meta of={Stories} />
 
 # 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.

packages/design-system/src/stories/clickable/Dropdown.mdx

@@ -4,18 +4,14 @@ import { FigmaImage, Use } from '@talend/storybook-docs';
 import { Dropdown } from '../../';
 
 import * as Stories from './Dropdown.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	title="Clickable/Dropdown"
-	component={Dropdown}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-		figmaLink: 'https://www.figma.com/file/IUeLBwjDCMkpdO7OtZ29u1/Dropdown',
-	}}
-/>
+<Meta title="Clickable/Dropdown" component={Dropdown} />
 
 # Dropdown
 
+<Status id="dropdown" />
+
 A dropdown menu displays a list of available actions.
 
 ## Zoning

packages/design-system/src/stories/clickable/Link.mdx

@@ -3,18 +3,14 @@ import { FigmaImage, Use } from '@talend/storybook-docs';
 import { Link, IconsProvider } from '../../';
 import * as Stories from './Link.stories';
 import * as StoriesButton from './LinkAsButton.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	title="Clickable/Link"
-	component={Link}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'ok' },
-		figmaLink: 'https://www.figma.com/file/l3FmBFqbeqqSlz9TBZKgWS/Links',
-	}}
-/>
+<Meta title="Clickable/Link" component={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/components-clickable-buttons-button--variations) instead.

packages/design-system/src/stories/feedback/EmptyState.mdx

@@ -1,18 +1,15 @@
 import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
 import { FigmaImage, Use } from '@talend/storybook-docs';
+import { Status } from '../Status.block';
 
 import * as Stories from './EmptyState.stories';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'wip' },
-		figmaLink: 'https://www.figma.com/file/6XBBCBVOhyX6yTaNcZQiti/Empty-States',
-	}}
-/>
+<Meta of={Stories} />
 
 # 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.

packages/design-system/src/stories/feedback/ErrorState.mdx

@@ -1,18 +1,15 @@
 import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks';
 import { FigmaImage, Use } from '@talend/storybook-docs';
+import { Status } from '../Status.block';
 
 import * as Stories from './ErrorState.stories';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-		figmaLink: 'https://www.figma.com/file/hMYM9HGXajJpWdGwRb5ITR/Coral?node-id=5523%3A27380',
-	}}
-/>
+<Meta of={Stories} />
 
 # ErrorState
 
+<Status id="errorState" />
+
 Definition
 
 They describe the state where the app fails to complete an action or can't respond or do what the user wants.

packages/design-system/src/stories/feedback/Loading.mdx

@@ -1,15 +1,13 @@
 import { Meta, Canvas, Story } from '@storybook/blocks';
 import * as Stories from './Loading.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'wip', react: 'ok', i18n: 'na' },
-	}}
-/>
+<Meta of={Stories} />
 
 # Loading
 
+<Status id="loading" />
+
 ## Zoning
 
 ## Style

packages/design-system/src/stories/feedback/Skeleton.mdx

@@ -9,19 +9,16 @@ import {
 	StackHorizontal,
 	StackVertical,
 } from '../../';
+import { Status } from '../Status.block';
 
 import * as Stories from './Skeleton.stories';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-		figmaLink: 'https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons',
-	}}
-/>
+<Meta of={Stories} />
 
 # Skeleton
 
+<Status id="skeleton" />
+
 Skeleton is used as placeholder to fill the space while the real content is loading.
 
 ## Zoning

packages/design-system/src/stories/feedback/Status.mdx

@@ -1,21 +1,18 @@
 import { ArgTypes, Meta, Canvas, Story } from '@storybook/blocks';
 import { FigmaImage } from '@talend/storybook-docs';
 import * as Stories from './Status.stories';
+import { Status } from '../Status.block';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'ok' },
-		figmaLink: 'https://www.figma.com/file/joEoPYw910CgGO0DiKWRoD/Status?node-id=2%3A72',
-	}}
-/>
+<Meta of={Stories} />
 
 # Status
 
 The status component displays state information using semantic colors and icons.
 
 ## Zoning
 
+<Status id="status" />
+
 <FigmaImage
 	src="https://www.figma.com/file/qc8oUSyVJM67gSsbTShftt/📐-Zoning?node-id=853%3A230"
 	alt="zoning image for status"

packages/design-system/src/stories/form/Affix/Affixes.mdx

@@ -2,16 +2,14 @@ import { Canvas, Meta, Story } from '@storybook/blocks';
 import { FigmaImage } from '@talend/storybook-docs';
 import { ButtonPrimary, Form, InlineMessageInformation } from '../../../';
 import * as Stories from './Affix.stories';
+import { Status } from '../../Status.block';
 
-<Meta
-	of={Stories}
-	parameters={{
-		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
-	}}
-/>
+<Meta of={Stories} />
 
 # Affixes: `prefix` and `suffix` props
 
+<Status id="formAffix" />
+
 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.