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

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

packages/web/src/scss/components/Radio/index.html

@@ -1,9 +1,11 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Default</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDefault" class="Radio">
       <input type="radio" id="radioDefault" class="Radio__input" name="default" />
       <span class="Radio__text">
@@ -17,40 +19,52 @@ <h2 class="docs-Heading">Default</h2>
         <span class="Radio__label">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Hidden Label</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHiddenLabel" class="Radio">
       <input type="radio" id="radioHiddenLabel" class="Radio__input" name="hiddenLabel" />
       <span class="Radio__text">
         <span class="Radio__label Radio__label--hidden">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Helper Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHelperText" class="Radio">
       <input type="radio" id="radioHelperText" class="Radio__input" name="helperText" />
       <span class="Radio__text">
         <span class="Radio__label">Radio Label</span>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Disabled</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDisabled" class="Radio Radio--disabled">
       <input type="radio" id="radioDisabled" class="Radio__input" name="disabled" disabled />
       <span class="Radio__text">
@@ -65,13 +79,17 @@ <h2 class="docs-Heading">Disabled</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Validation State</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
+
     <label for="radioSuccess" class="Radio Radio--success">
       <input type="radio" id="radioSuccess" class="Radio__input" name="validation" />
       <span class="Radio__text">
@@ -100,13 +118,16 @@ <h2 class="docs-Heading">Validation State</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Item</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
     <label for="radioItemDefault" class="Radio Radio--item">
       <input type="radio" id="radioItemDefault" class="Radio__input" name="item" />
       <span class="Radio__text">
@@ -150,7 +171,9 @@ <h2 class="docs-Heading">Item</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 {{/layout/plain }}