From 58f05efbbd6ad731f45296f2c8d905e8de5e5a94 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Fri, 6 Oct 2023 16:07:17 +0200
Subject: [PATCH] fix: DS

---
 .../src/components/Form/index.ts              |   3 +
 packages/design-system/src/index.ts           |   1 -
 .../{Checkbox.stories.mdx => Checkbox.mdx}    |   4 +-
 .../form/Field/Input/Input.Checkbox.mdx       |   1 -
 .../form/Field/Input/Input.ToggleSwitch.mdx   |  90 -----------
 .../Input/Input.ToggleSwitch.stories.tsx      | 150 ------------------
 ...gleSwitch.stories.mdx => ToggleSwitch.mdx} |   2 +-
 .../src/stories/messaging/Tooltip.mdx         |   2 +-
 .../{Stepper.stories.mdx => Stepper.mdx}      |   0
 .../Trial/{Trials.stories.mdx => Trials.mdx}  |   0
 10 files changed, 7 insertions(+), 246 deletions(-)
 rename packages/design-system/src/stories/form/Checkbox/{Checkbox.stories.mdx => Checkbox.mdx} (96%)
 delete mode 100644 packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
 delete mode 100644 packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.stories.tsx
 rename packages/design-system/src/stories/form/ToggleSwitch/{ToggleSwitch.stories.mdx => ToggleSwitch.mdx} (97%)
 rename packages/stepper/src/stories/{Stepper.stories.mdx => Stepper.mdx} (100%)
 rename packages/storybook-docs/src/components/Trial/{Trials.stories.mdx => Trials.mdx} (100%)

diff --git a/packages/design-system/src/components/Form/index.ts b/packages/design-system/src/components/Form/index.ts
index 70c92598410..004128749a6 100644
--- a/packages/design-system/src/components/Form/index.ts
+++ b/packages/design-system/src/components/Form/index.ts
@@ -1,3 +1,4 @@
+import { ToggleSwitch, UncontrolledToggleSwitch } from './ToggleSwitch';
 import Buttons from './Buttons';
 import Datalist from './Field/Datalist';
 import Input from './Field/Input';
@@ -34,6 +35,7 @@ export const FormComponent = Form as typeof Form & {
 	Week: typeof Input.Week;
 	Buttons: typeof Buttons;
 	Input: typeof Input;
+	ToggleSwitch: typeof ToggleSwitch;
 };
 
 FormComponent.Row = Row;
@@ -61,6 +63,7 @@ FormComponent.Time = Input.Time;
 FormComponent.Url = Input.Url;
 FormComponent.Week = Input.Week;
 FormComponent.Input = Input;
+FormComponent.ToggleSwitch = ToggleSwitch;
 
 FormComponent.Buttons = Buttons;
 
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 5a93068de90..c0dbb623505 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -181,4 +181,3 @@ export type { PopoverProps, PopoverTriggerProps, TooltipPlacement };
 
 export * from './components/Form/ToggleSwitch';
 export * from './components/Form/Checkbox';
-export * from './components/Form/ToggleSwitch';
diff --git a/packages/design-system/src/stories/form/Checkbox/Checkbox.stories.mdx b/packages/design-system/src/stories/form/Checkbox/Checkbox.mdx
similarity index 96%
rename from packages/design-system/src/stories/form/Checkbox/Checkbox.stories.mdx
rename to packages/design-system/src/stories/form/Checkbox/Checkbox.mdx
index cf7166425ea..f8095c74345 100644
--- a/packages/design-system/src/stories/form/Checkbox/Checkbox.stories.mdx
+++ b/packages/design-system/src/stories/form/Checkbox/Checkbox.mdx
@@ -1,7 +1,7 @@
 import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
 import { FigmaImage, Use } from '@talend/storybook-docs';
-import * as Stories from './Input.Checkbox.stories';
-import { Status } from '../../../Status.block';
+import * as Stories from './Checkbox.stories';
+import { Status } from '../../Status.block';
 
 <Meta of={Stories} />
 <Status id="formFieldInputCheckbox" />
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
index b0ef012afd6..912ffeb1476 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
@@ -2,7 +2,6 @@ import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
 import { FigmaImage, Use } from '@talend/storybook-docs';
 import * as Stories from './Input.Checkbox.stories';
 import { Status } from '../../../Status.block';
-import { Form } from '../../../';
 
 <Meta of={Stories} />
 <Status id="formFieldInputCheckbox" />
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
deleted file mode 100644
index 2c3798794be..00000000000
--- a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import { FigmaImage, Use } from '@talend/storybook-docs';
-import { Status } from '../../../Status.block';
-
-import * as Stories from './ToggleSwitch.stories';
-
-<Meta of={Stories} />
-<Status id="formFieldInputToggleSwitch" />
-
-# ToggleSwitch
-
-ToggleSwitches are a quick way to view and switch between two states or on-off state instantly.
-
-## Zoning
-
-<FigmaImage
-	src="https://www.figma.com/file/qc8oUSyVJM67gSsbTShftt/%F0%9F%93%90-Zoning?node-id=252%3A9"
-	alt="zoning image for switch"
-/>
-
-## Style
-
-<FigmaImage
-	src="https://www.figma.com/file/2crWpyiwuxt1wvjsTYwdB0/ToggleSwitch?node-id=0%3A131"
-	alt="Mockup of an input ToggleSwitch"
-/>
-
-## States
-
-<Canvas>
-	<Story of={Stories.ToggleSwitch} />
-</Canvas>
-
-### Inline
-
-<Canvas>
-	<Story of={Stories.ToggleSwitchInline} />
-</Canvas>
-
-### Long content
-
-<Canvas>
-	<Story of={Stories.ToggleSwitchWithLongLabel} />
-</Canvas>
-
-## Content
-
-Labels for switches should give users a strong indication of what they are selecting. Start the label with a verb and say clearly what will happen when the switch is turned on.
-
-<Use>
-	<Use.Do>
-		<ul>
-			<li>Use sentence case in switch labels.</li>
-			<li>Keep labels for switches short and direct.</li>
-			<li>
-				For on/off switches, use the label to describe what the control will do when the switch is
-				on.
-			</li>
-		</ul>
-	</Use.Do>
-	<Use.Dont>
-		<ul>
-			<li>Don't use neutral or ambiguous labels.</li>
-			<li>Don't use title case or all caps in switch labels (except for acronyms).</li>
-			<li>Don't use punctuations at the end of switch label.</li>
-		</ul>
-	</Use.Dont>
-</Use>
-
-## Interactions
-
-- The label must always be clickable to enable or disable.
-
-### Controlled switch
-
-<Canvas>
-	<Story of={Stories.ToggleSwitchControlled} />
-</Canvas>
-
-## Usage
-
-<Canvas>
-	<Story of={Stories.ToggleSwitchReactHooksForm} />
-</Canvas>
-
-## Accessibility
-
-Press <kbd>TABS</kbd> to focus on a switch.
-
-Press <kbd>SPACE</kbd> to toggle the switch between selected and not selected.
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.stories.tsx b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.stories.tsx
deleted file mode 100644
index ebdc17d9708..00000000000
--- a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.stories.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useState } from 'react';
-import { ButtonPrimary, Form, InlineMessageInformation, StackVertical } from '../../../../';
-import { useForm } from 'react-hook-form';
-
-export default {
-	title: 'Form/Fields/ToggleSwitch',
-	component: Form.ToggleSwitch,
-};
-
-export const ToggleSwitchStates = () => (
-	<StackVertical gap="M" justify="stretch" align="stretch">
-		<UncontrolledToggleSwitch placeholder="Placeholder" name="time" label="ToggleSwitch" />
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="ToggleSwitch disabled"
-			disabled
-		/>
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="ToggleSwitch read-only"
-			readOnly
-		/>
-		<UncontrolledToggleSwitch name="time" label="ToggleSwitch checked" defaultChecked />
-		<UncontrolledToggleSwitch
-			name="time"
-			label="ToggleSwitch checked disabled"
-			defaultChecked
-			disabled
-		/>
-		<UncontrolledToggleSwitch
-			name="time"
-			label="ToggleSwitch checked read-only"
-			defaultChecked
-			readOnly
-		/>
-	</StackVertical>
-);
-
-export const ToggleSwitchInline = () => (
-	<>
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="ToggleSwitch inline"
-			isInline
-		/>
-		<span> </span>
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="ToggleSwitch inline"
-			isInline
-			defaultChecked
-		/>
-	</>
-);
-
-export const ToggleSwitchWithLongLabel = () => (
-	<div style={{ width: '200px' }}>
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="Label with a lot of content, too much probably, and most certainly enough to generate a line break in this small box."
-		/>
-	</div>
-);
-
-type Inputs = {
-	'option-a'?: boolean;
-	'option-b'?: boolean;
-	'option-c'?: boolean;
-	'option-d'?: boolean;
-	'option-e'?: boolean;
-	'option-f'?: boolean;
-};
-
-export const ToggleSwitchControlled = () => {
-	const { register, watch } = useForm();
-	const optionA = watch('option-a');
-	return (
-		<Form>
-			<Form.Fieldset legend="Control switch state" required>
-				<UncontrolledToggleSwitch label="Toggle all" name="option-a" ref={register()} />
-				<Form.ToggleSwitch
-					label="Controlled switch"
-					name="option-b"
-					ref={register()}
-					checked={optionA}
-					onChange={() => {}}
-				/>
-			</Form.Fieldset>
-			<Form.Buttons>
-				<ButtonPrimary onClick={() => {}} type="submit">
-					Submit
-				</ButtonPrimary>
-			</Form.Buttons>
-		</Form>
-	);
-};
-
-export const ToggleSwitchReactHooksForm = () => {
-	const { register, handleSubmit } = useForm<Inputs>();
-	const [formData, setFormData] = useState<null | Inputs>();
-	return (
-		<Form onSubmit={handleSubmit(setFormData)}>
-			{formData && (
-				<InlineMessageInformation
-					title={'Form data'}
-					description={JSON.stringify(formData, null, 2)}
-					withBackground
-				/>
-			)}
-			<Form.Fieldset legend="Enabled">
-				<UncontrolledToggleSwitch label="Option a" name="option-a" ref={register()} />
-				<UncontrolledToggleSwitch
-					label="Option b"
-					defaultChecked
-					name="option-b"
-					ref={register()}
-				/>
-			</Form.Fieldset>
-			<Form.Fieldset legend="Read only" readOnly>
-				<UncontrolledToggleSwitch label="Option c" name="option-c" ref={register()} />
-				<UncontrolledToggleSwitch
-					label="Option d"
-					defaultChecked
-					name="option-d"
-					ref={register()}
-				/>
-			</Form.Fieldset>
-			<Form.Fieldset legend="Disabled" disabled>
-				<UncontrolledToggleSwitch label="Option e" disabled name="option-e" ref={register()} />
-				<UncontrolledToggleSwitch
-					label="Option f"
-					defaultChecked
-					disabled
-					name="option-f"
-					ref={register()}
-				/>
-			</Form.Fieldset>
-			<Form.Buttons>
-				<ButtonPrimary onClick={() => {}} type="submit">
-					Submit
-				</ButtonPrimary>
-			</Form.Buttons>
-		</Form>
-	);
-};
diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.mdx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
similarity index 97%
rename from packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.mdx
rename to packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
index cb3f465ee65..ede264711de 100644
--- a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.mdx
+++ b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { FigmaImage, Use } from '~docs';
+import { FigmaImage, Use } from '@talend/storybook-docs';
 import { Form, ToggleSwitch } from '@talend/design-system';
 
 import * as Stories from './ToggleSwitch.stories';
diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx
index 5f700e3a19a..5103942c696 100644
--- a/packages/design-system/src/stories/messaging/Tooltip.mdx
+++ b/packages/design-system/src/stories/messaging/Tooltip.mdx
@@ -4,7 +4,7 @@ import { FigmaImage, Use } from '@talend/storybook-docs';
 import { Tooltip } from '../../';
 import { Status } from '../Status.block';
 
-import * as Stories from '@talend/design-system/src/components/Tooltip/Tooltip.stories';
+import * as Stories from './Tooltip.stories';
 
 <Meta of={Stories} />
 <Status id="tooltip" />
diff --git a/packages/stepper/src/stories/Stepper.stories.mdx b/packages/stepper/src/stories/Stepper.mdx
similarity index 100%
rename from packages/stepper/src/stories/Stepper.stories.mdx
rename to packages/stepper/src/stories/Stepper.mdx
diff --git a/packages/storybook-docs/src/components/Trial/Trials.stories.mdx b/packages/storybook-docs/src/components/Trial/Trials.mdx
similarity index 100%
rename from packages/storybook-docs/src/components/Trial/Trials.stories.mdx
rename to packages/storybook-docs/src/components/Trial/Trials.mdx