feat: Edit story

solid-design-system · Oct 9, 2023 · 4d34736 · 4d34736
1 parent 69e4f9b
commit 4d34736
Showing 1 changed file with 125 additions and 27 deletions.
diff --git a/packages/components/src/components/radio-group/radio-group.stories.ts b/packages/components/src/components/radio-group/radio-group.stories.ts
@@ -1,5 +1,8 @@
 import '../../solid-components';
+import { html } from 'lit-html';
 import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
+import { userEvent } from '@storybook/testing-library';
+import { waitUntil } from '@open-wc/testing-helpers';
 
 const { argTypes, parameters } = storybookDefaults('sd-radio-group');
 const { generateTemplate } = storybookTemplate('sd-radio-group');
@@ -18,16 +21,22 @@ export default {
   args: overrideArgs([
     {
       type: 'slot',
-      name: 'default',
-      value:
-        '<sd-radio value="1">Option 1</sd-radio><sd-radio value="2">Option 2</sd-radio><sd-radio value="3">Option 3</sd-radio>'
+      name: 'label',
+      value: `
+        <label slot="label">Select an option</label>
+      `
     },
-    { type: 'attribute', name: 'name', value: 'radio-group' },
     {
       type: 'slot',
-      name: 'label',
-      value: '<label slot="label">Select an option</label>'
-    }
+      name: 'default',
+      value: `
+        <sd-radio value="1">Option 1</sd-radio>
+        <sd-radio value="2">Option 2</sd-radio>
+        <sd-radio value="3">Option 3</sd-radio>
+        `
+    },
+    { type: 'attribute', name: 'name', value: 'radio-group' },
+    { type: 'attribute', name: 'value', value: '2' }
   ]),
   argTypes
 };
@@ -42,28 +51,54 @@ export const Default = {
   }
 };
 
+/**
+ * The sd-radio in all possible combinations of `orientation` and `size`.
+ */
+
+export const Orientation = {
+  parameters: { controls: { exclude: ['orientation', 'size', 'default'] } },
+  render: (args: any) => {
+    return generateTemplate({
+      axis: {
+        x: { type: 'attribute', name: 'orientation' },
+        y: { type: 'attribute', name: 'size' }
+      },
+      args
+    });
+  }
+};
+
 /**
  * Use the disabled attribute to disable a input radio. Clicks will be suppressed until the disabled state is removed
  */
 
-export const DisabledAndSize = {
-  name: 'Disabled × Size',
-  parameters: { controls: { exclude: ['disabled', 'size', 'default'] } },
+export const Disabled = {
+  name: 'Disabled x Size',
+  parameters: { controls: { exclude: ['size', 'default'] } },
   render: (args: any) => {
     return generateTemplate({
       axis: {
-        x: {
-          type: 'attribute',
-          name: 'disabled',
-          values: [false, true]
-        },
-        y: {
-          type: 'attribute',
-          name: 'size',
-          values: ['sm', 'lg']
-        }
+        x: [
+          {
+            type: 'slot',
+            name: 'default',
+            title: 'disabled',
+            values: [
+              {
+                value:
+                  '<sd-radio value="1" disabled>Option 1</sd-radio><sd-radio value="2">Option 2</sd-radio><sd-radio value="3">Option 3</sd-radio>',
+                title: 'true'
+              },
+              {
+                value:
+                  '<sd-radio value="1">Option 1</sd-radio><sd-radio value="2">Option 2</sd-radio><sd-radio value="3">Option 3</sd-radio>',
+                title: 'false'
+              }
+            ]
+          }
+        ],
+        y: { type: 'attribute', name: 'size' }
       },
-      constants: { type: 'attribute', name: 'disabled', value: true },
       args
     });
   }
@@ -74,17 +109,80 @@ export const DisabledAndSize = {
  */
 
 export const Invalid = {
-  parameters: { controls: { exclude: ['invalid', 'disabled', 'size'] } },
+  parameters: { controls: { exclude: ['invalid', 'size', 'error-text'] } },
   render: (args: any) => {
     return generateTemplate({
       axis: {
-        y: [
-          { type: 'attribute', name: 'size' },
-          { type: 'attribute', name: 'disabled', values: [false, true] }
-        ]
+        y: [{ type: 'attribute', name: 'size' }]
       },
-      constants: { type: 'attribute', name: 'invalid', value: true },
+      constants: [
+        { type: 'attribute', name: 'invalid', value: true },
+        { type: 'attribute', name: 'error-text', value: 'Error message' }
+      ],
       args
     });
   }
 };
+
+/**
+ * Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
+ */
+
+export const Required = {
+  parameters: { controls: { exclude: ['required'] } },
+  render: (args: any) => {
+    return generateTemplate({
+      axis: {
+        x: [{ type: 'attribute', name: 'size' }],
+        y: { type: 'attribute', name: 'required' }
+      },
+      args
+    });
+  }
+};
+
+/**
+ * Use the `form-control`, `form-control-label`, `form-control-input` and `form-control-error-text` part selectors to customize the radio-group.
+ */
+export const Parts = {
+  parameters: {
+    controls: { exclude: ['form-control', 'form-control-label', 'form-control-input', 'form-control-error-text'] }
+  },
+  render: (args: any) => {
+    return generateTemplate({
+      axis: {
+        y: {
+          type: 'template',
+          name: 'sd-radio-group::part(...){outline: solid 2px red}',
+          values: ['form-control', 'form-control-label', 'form-control-input', 'form-control-error-text'].map(part => {
+            return {
+              title: part,
+              value: `<style>#part-${part} sd-radio-group::part(${part}){outline: solid 2px red}</style><div id="part-${part}">%TEMPLATE%</div>`
+            };
+          })
+        }
+      },
+      constants: [
+        { type: 'template', name: 'width', value: '<div style="width: 300px">%TEMPLATE%</div>' },
+        { type: 'attribute', name: 'error-text', value: 'Error message' }
+      ],
+      args
+    });
+  }
+};
+
+/**
+ * sd-radio-group are fully accessibile via keyboard.
+ */
+export const Mouseless = {
+  render: (args: any) => {
+    return html`<div class="mouseless">${generateTemplate({ args })}</div>`;
+  },
+
+  play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {
+    const el = canvasElement.querySelector('.mouseless sd-radio-group');
+    await waitUntil(() => el?.shadowRoot?.querySelector('label'));
+    // We have to catch the event as otherwise Storybook will break
+    await userEvent.type(el!.shadowRoot!.querySelector('label')!, '{return}', { pointerEventsCheck: 0 });
+  }
+};