simplify radio code examples

Author: madsrasmussen

packages/uui-radio/lib/uui-radio.story.ts

@@ -18,7 +18,7 @@ export default {
 };
 
 export const AAAOverview: Story = props =>
-  html` <uui-radio
+  html`<uui-radio
     .value=${props.value}
     .label=${props.label}
     .name=${props.name}
@@ -27,79 +27,69 @@ export const AAAOverview: Story = props =>
     >${props.slot}</uui-radio
   >`;
 AAAOverview.storyName = 'Overview';
-AAAOverview.parameters = {
+
+export const Disabled: Story = props => html` <uui-radio
+  value="1"
+  ?disabled=${props.disabled}
+  >Disabled</uui-radio
+>`;
+
+Disabled.args = {
+  disabled: true,
+};
+
+Disabled.parameters = {
+  controls: { include: ['disabled'] },
   docs: {
     source: {
-      code: `<uui-radio-group name="Test">
-      <uui-radio value="Value 1" disabled>Option 1</uui-radio>
-      <uui-radio value="Value 2" label="Option 2"></uui-radio>
-      <uui-radio value="Value 3">Option 3</uui-radio>
-      <uui-radio value="Value 4" disabled>Option 4</uui-radio>
-      <uui-radio value="Value 5" checked>Option 5</uui-radio>
-      <uui-radio value="Value 6">Option 6</uui-radio>
-      <uui-radio value="Value 7" disabled>Option 7</uui-radio>
-    </uui-radio-group>`,
+      code: `
+<uui-radio value="1" disabled>Disabled</uui-radio>
+`,
     },
   },
 };
 
-export const Disabled: Story = () => html` <uui-radio disabled
-    >Disabled</uui-radio
-  >
-  <uui-radio disabled checked>Selected disabled</uui-radio>`;
+export const Checked: Story = props => html` <uui-radio
+  value="1"
+  ?checked=${props.checked}
+  >Checked</uui-radio
+>`;
 
-Disabled.parameters = {
-  controls: { include: [] },
+Checked.args = {
+  checked: true,
 };
 
-export const GroupedOverview: Story = () =>
-  html`
-    <uui-radio-group name="Test">
-      <uui-radio value="Value 1" disabled>Option 1</uui-radio>
-      <uui-radio value="Value 2" label="Option 2"></uui-radio>
-      <uui-radio value="Value 3">Option 3</uui-radio>
-      <uui-radio value="Value 4" disabled>Option 4</uui-radio>
-      <uui-radio value="Value 5" checked>Option 5</uui-radio>
-      <uui-radio value="Value 6">Option 6</uui-radio>
-      <uui-radio value="Value 7" disabled>Option 7</uui-radio>
-    </uui-radio-group>
-  `;
-GroupedOverview.parameters = {
-  controls: { include: [] },
+Checked.parameters = {
+  controls: { include: ['checked'] },
   docs: {
     source: {
-      code: ` <uui-radio-group name="Test">
-      <uui-radio value="Value 1" disabled>Option 1</uui-radio>
-      <uui-radio value="Value 2" label="Option 2"></uui-radio>
-      <uui-radio value="Value 3">Option 3</uui-radio>
-      <uui-radio value="Value 4" disabled>Option 4</uui-radio>
-      <uui-radio value="Value 5" checked>Option 5</uui-radio>
-      <uui-radio value="Value 6">Option 6</uui-radio>
-      <uui-radio value="Value 7" disabled>Option 7</uui-radio>
-    </uui-radio-group>`,
+      code: `
+<uui-radio value="1" checked>Checked</uui-radio>
+`,
     },
   },
 };
 
-export const GroupWithOne: Story = () =>
+export const RadioGroup: Story = () =>
   html`
-    <uui-radio-group name="Test">
-      <uui-radio value="Value 1">Option 1</uui-radio>
+    <uui-radio-group name="radioGroup">
+      <uui-radio value="1">Option 1</uui-radio>
+      <uui-radio value="2" disabled>Option 2</uui-radio>
+      <uui-radio value="3">Option 3</uui-radio>
     </uui-radio-group>
   `;
 
-export const GroupedSelectDisabled: Story = () =>
-  html`
-    <uui-radio-group name="Test">
-      <uui-radio .value=${'Value 1'}>Option 1</uui-radio>
-      <uui-radio
-        .value=${'Value 2'}
-        disabled
-        checked
-        label="Option 2"></uui-radio>
-      <uui-radio .value=${'Value 3'}>Option 3</uui-radio>
-    </uui-radio-group>
-  `;
-GroupedSelectDisabled.parameters = {
+RadioGroup.parameters = {
   controls: { include: [] },
+  docs: {
+    source: {
+      code: `
+<uui-radio-group name="radioGroup">
+  <uui-radio value="1">Option 1</uui-radio>
+  <uui-radio value="2" disabled>Option 2</uui-radio>
+  <uui-radio value="3">Option 3</uui-radio>
+</uui-radio-group>
+`,
+    },
+  },
 };