chore: move stepper

packages/design-system/src/stories/navigation/Stepper.Step.mdx

@@ -0,0 +1,64 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { FigmaImage } from '@talend/storybook-docs';
+
+import * as Stories from './Stepper.Step.stories';
+
+<Meta
+	of={Stories}
+	parameters={{
+		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
+		figmaLink: 'https://www.figma.com/file/WUVKJmcDHfR7K1q1lYhaHk/?node-id=1%3A4',
+	}}
+/>
+
+# Step
+
+Steps are the main elements for the stepper.
+
+## Zoning
+
+<FigmaImage
+	src="https://www.figma.com/file/qc8oUSyVJM67gSsbTShftt/%F0%9F%93%90-Zoning?node-id=952%3A229"
+	alt="zoning image for the steps"
+/>
+
+## Style
+
+### Variations
+
+<FigmaImage
+	src="https://www.figma.com/file/WUVKJmcDHfR7K1q1lYhaHk/Stepper?node-id=816%3A25605"
+	alt="states image for the steps"
+/>
+
+<Canvas>
+	<Story story={Stories.Default} />
+</Canvas>
+
+### Sizes
+
+The max-width for a step is 20rem, if the label is longer we display an ellipsis.
+
+<Canvas>
+	<Story story={Stories.Overflow} />
+</Canvas>
+
+## States
+
+N/C
+
+## Interactions
+
+N/C
+
+## Usage
+
+<Canvas>
+	<Story of={Stories.Usage} />
+</Canvas>
+
+<ArgsTable story="usage" />
+
+## Accessibility
+
+N/C

packages/storybook/src/design-system/Stepper/Step/Stepper.Step.stories.tsx → packages/design-system/src/stories/navigation/Stepper.Step.stories.tsx

@@ -1,6 +1,7 @@
-import { StackVertical, Stepper } from '@talend/design-system';
+import { StackVertical, Stepper } from '../../';
 
 export default {
+	title: 'Navigation/Stepper/Step',
 	component: Stepper.Step,
 };
 
@@ -28,3 +29,35 @@ export const Overflow = () => (
 		/>
 	</StackVertical>
 );
+
+export const Usage = ({ variant, index, title }) => {
+	const StepComponent = Stepper.Step[variant];
+	StepComponent.displayName = `Step.${variant}`;
+	return <StepComponent data-index={index} title={title} />;
+};
+Usage.argTypes = {
+	variant: {
+		description: 'Step variation',
+		control: {
+			type: 'select',
+			options: ['Skeleton', 'Enabled', 'Validated', 'InProgress'],
+		},
+	},
+	index: {
+		description: 'Step number',
+		control: {
+			type: 'number',
+		},
+	},
+	title: {
+		description: 'Step title',
+		control: {
+			type: 'text',
+		},
+	},
+};
+Usage.args = {
+	variant: 'Skeleton',
+	index: 1,
+	title: 'Lorem ipsum',
+};

packages/design-system/src/stories/layout/Stepper.stories.tsx → packages/design-system/src/stories/navigation/Stepper.stories.tsx

@@ -1,7 +1,7 @@
 import { Divider, StackVertical, Stepper } from '../../';
 
 export default {
-	title: 'Layout/Stepper',
+	title: 'Navigation/Stepper/Stepper',
 	component: Stepper,
 };