From 7d23e21d1abb087d2e2956e987ac08c9095d6142 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sun, 17 Sep 2023 02:00:06 +0200
Subject: [PATCH] Docs(web-react): Add Radio demo #DS-905

- Radio demo in web-react is now same as demo in web and web-twig
---
 .../src/components/Radio/demo/Radio.tsx       |  8 -----
 .../components/Radio/demo/RadioDefault.tsx    | 12 +++++++
 .../components/Radio/demo/RadioDisabled.tsx   | 22 ++++++++-----
 .../components/Radio/demo/RadioHelperText.tsx | 17 +++-------
 .../Radio/demo/RadioHiddenLabel.tsx           |  8 +++++
 .../src/components/Radio/demo/RadioItem.tsx   | 29 +++++++++++-----
 .../src/components/Radio/demo/RadioList.tsx   | 33 -------------------
 .../components/Radio/demo/RadioValidation.tsx | 23 +++++++++++++
 .../Radio/demo/RadioValidationState.tsx       | 12 -------
 .../src/components/Radio/demo/index.tsx       | 22 ++++++-------
 10 files changed, 93 insertions(+), 93 deletions(-)
 delete mode 100644 packages/web-react/src/components/Radio/demo/Radio.tsx
 create mode 100644 packages/web-react/src/components/Radio/demo/RadioDefault.tsx
 create mode 100644 packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx
 delete mode 100644 packages/web-react/src/components/Radio/demo/RadioList.tsx
 create mode 100644 packages/web-react/src/components/Radio/demo/RadioValidation.tsx
 delete mode 100644 packages/web-react/src/components/Radio/demo/RadioValidationState.tsx

diff --git a/packages/web-react/src/components/Radio/demo/Radio.tsx b/packages/web-react/src/components/Radio/demo/Radio.tsx
deleted file mode 100644
index 2144e09d33..0000000000
--- a/packages/web-react/src/components/Radio/demo/Radio.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-import Radio from '../Radio';
-import { SpiritRadioProps } from '../../../types';
-
-const Story: ComponentStory<typeof Radio> = (args: SpiritRadioProps) => <Radio {...args} />;
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/RadioDefault.tsx b/packages/web-react/src/components/Radio/demo/RadioDefault.tsx
new file mode 100644
index 0000000000..5ab94f5741
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioDefault.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioDefault = () => (
+  <>
+    <Radio id="radioDefault" label="Radio Label" name="radioDefault" />
+
+    <Radio id="radioDefaultChecked" isChecked label="Radio Label" name="radioDefault" />
+  </>
+);
+
+export default RadioDefault;
diff --git a/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx b/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
index bb88da2ece..4ff65c3186 100644
--- a/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import Radio from '../Radio';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio" label="Radio disabled" name="example" isDisabled />
-    <Radio id="radio" label="Radio disabled checked" name="example" isDisabled isChecked />
-  </div>
+const RadioDisabled = () => (
+  <>
+    <Radio id="radioDisabled" isDisabled label="Radio Label" name="radioDisabled" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioDisabledHelperText"
+      isChecked
+      isDisabled
+      label="Radio Label"
+      name="radioDisabledHelperText"
+    />
+  </>
 );
 
-export default Story;
+export default RadioDisabled;
diff --git a/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx b/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
index 7b01b54edf..59105461da 100644
--- a/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
@@ -1,17 +1,8 @@
 import React from 'react';
 import Radio from '../Radio';
-import { SpiritRadioProps } from '../../../types';
 
-const Story = (args: SpiritRadioProps) => <Radio {...args} />;
+const RadioHelperText = () => (
+  <Radio helperText="Helper text" id="radioHelperText" label="Radio Label" name="radioHelperText" />
+);
 
-Story.args = {
-  id: 'example',
-  isChecked: true,
-  isDisabled: false,
-  isLabelHidden: false,
-  label: 'Label',
-  name: 'example',
-  helperText: 'Helper text',
-};
-
-export default Story;
+export default RadioHelperText;
diff --git a/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx b/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx
new file mode 100644
index 0000000000..c7b7deec92
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioHiddenLabel = () => (
+  <Radio id="radioHiddenLabel" label="Radio Label" name="radioHiddenLabel" isLabelHidden />
+);
+
+export default RadioHiddenLabel;
diff --git a/packages/web-react/src/components/Radio/demo/RadioItem.tsx b/packages/web-react/src/components/Radio/demo/RadioItem.tsx
index 0ef4813c05..9a2ae1d8ec 100644
--- a/packages/web-react/src/components/Radio/demo/RadioItem.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioItem.tsx
@@ -1,13 +1,26 @@
 import React from 'react';
 import Radio from '../Radio';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio" label="Radio Item" name="example" isItem />
-    <Radio id="radio" label="Radio Item checked" name="example" isItem isChecked />
-  </div>
+const RadioItem = () => (
+  <>
+    <Radio id="radioItemDefault" isItem label="Radio Label" name="item" />
+
+    <Radio id="radioItemDefaultChecked" isChecked isItem label="Radio Label" name="item" />
+
+    <Radio helperText="Helper text" id="radioItemHelperText" isItem label="Radio Label" name="item" />
+
+    <Radio id="radioItemDisabled" isDisabled isItem label="Radio Label" name="itemDisabled" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioItemDisabledHelperText"
+      isDisabled
+      isChecked
+      isItem
+      label="Radio Label"
+      name="itemDisabled"
+    />
+  </>
 );
 
-export default Story;
+export default RadioItem;
diff --git a/packages/web-react/src/components/Radio/demo/RadioList.tsx b/packages/web-react/src/components/Radio/demo/RadioList.tsx
deleted file mode 100644
index 74010e4e7c..0000000000
--- a/packages/web-react/src/components/Radio/demo/RadioList.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { ChangeEventHandler, useState } from 'react';
-import Radio from '../Radio';
-import { Stack } from '../../Stack';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => {
-  const [checkedOption, setCheckedOption] = useState('value1');
-
-  const onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setCheckedOption(event.target.value);
-  };
-
-  const radioList = ['value1', 'value2', 'value3'];
-
-  return (
-    <Stack>
-      {radioList.map((value) => (
-        <Radio
-          key={value}
-          id={value}
-          label={`Radio ${value}`}
-          onChange={onValueChange}
-          name="exampleList"
-          value={value}
-          isChecked={checkedOption === value}
-        />
-      ))}
-    </Stack>
-  );
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/RadioValidation.tsx b/packages/web-react/src/components/Radio/demo/RadioValidation.tsx
new file mode 100644
index 0000000000..732e351df1
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioValidation.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioValidation = () => (
+  <>
+    <Radio id="radioSuccess" label="Radio Label" name="validation" validationState="success" />
+
+    <Radio id="radioWarning" label="Radio Label" name="validation" validationState="warning" />
+
+    <Radio id="radioDanger" isChecked label="Radio Label" name="validation" validationState="danger" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioWarningHelperText"
+      isChecked
+      label="Radio Label"
+      name="validation"
+      validationState="warning"
+    />
+  </>
+);
+
+export default RadioValidation;
diff --git a/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx b/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx
deleted file mode 100644
index 70344de139..0000000000
--- a/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Radio from '../Radio';
-
-const Story = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio0" label="Radio success" name="example" validationState="success" />
-    <Radio id="radio1" label="Radio warning" name="example" validationState="warning" />
-    <Radio id="radio2" label="Radio danger" name="example" validationState="danger" />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/index.tsx b/packages/web-react/src/components/Radio/demo/index.tsx
index a0fcb5f1ab..c2cc9028ad 100644
--- a/packages/web-react/src/components/Radio/demo/index.tsx
+++ b/packages/web-react/src/components/Radio/demo/index.tsx
@@ -5,36 +5,36 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Radio from './Radio';
-import RadioValidationState from './RadioValidationState';
+import { IconsProvider } from '../../../context';
+import RadioDefault from './RadioDefault';
+import RadioHiddenLabel from './RadioHiddenLabel';
 import RadioHelperText from './RadioHelperText';
 import RadioDisabled from './RadioDisabled';
+import RadioValidation from './RadioValidation';
 import RadioItem from './RadioItem';
-import RadioList from './RadioList';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <Radio label="Field label" />
+        <RadioDefault />
       </DocsSection>
-      <DocsSection title="Validation State">
-        <RadioValidationState />
+      <DocsSection title="Hidden Label">
+        <RadioHiddenLabel />
       </DocsSection>
       <DocsSection title="Helper Text">
-        <RadioHelperText {...RadioHelperText.args} />
+        <RadioHelperText />
       </DocsSection>
       <DocsSection title="Disabled">
         <RadioDisabled />
       </DocsSection>
+      <DocsSection title="Validation State">
+        <RadioValidation />
+      </DocsSection>
       <DocsSection title="Item">
         <RadioItem />
       </DocsSection>
-      <DocsSection title="List">
-        <RadioList />
-      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );