Docs(web-react): Add Radio demo #DS-905

- Radio demo in web-react is now same as demo in web and web-twig

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;

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;

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;

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;

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;

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;

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>,
 );