fix(doc): add validityState on select multiple demo

ovh · Nov 28, 2024 · f5cf59d · f5cf59d
1 parent 9a18d8a
commit f5cf59d
Showing 1 changed file with 61 additions and 17 deletions.
diff --git a/packages/storybook/stories/components/select/select.stories.ts b/packages/storybook/stories/components/select/select.stories.ts
@@ -33,7 +33,7 @@ export const Demo: StoryObj = {
         }
       })();
     </script>`;
-    return html`,
+    return html`
     <ods-select class="my-select-demo"
                 has-error="${arg.hasError}"
                 is-disabled="${arg.isDisabled}"
@@ -111,21 +111,46 @@ export const Demo: StoryObj = {
 };
 
 export const DemoMultiple: StoryObj = {
-  render: (arg) => html`
-  <ods-select allow-multiple
-              has-error="${arg.hasError}"
-              is-disabled="${arg.isDisabled}"
-              is-readonly="${arg.isReadonly}"
-              multiple-selection-label="${arg.multipleSelectionLabel}"
-              placeholder="${arg.placeholder}">
-    <option value="dog">Dog</option>
-    <option value="cat">Cat</option>
-    <option value="hamster">Hamster</option>
-    <option value="parrot">Parrot</option>
-    <option value="spider">Spider</option>
-    <option value="goldfish">Goldfish</option>
-  </ods-select>
-  `,
+  render: (arg) => {
+    const validityStateTemplate = html`<br>
+    <div id="validity-state" style="display: grid; row-gap: 5px;"></div>
+    <script>
+      (async () => {
+        const divValidityState = document.querySelector('#validity-state');
+        const select = document.querySelector('.my-select-demo-multiple');
+        await customElements.whenDefined('ods-select');
+        await renderValidityState();
+        select.addEventListener('odsChange', async() => {
+          await renderValidityState();
+        })
+        async function renderValidityState() {
+          const validity = await select.getValidity()
+          divValidityState.innerHTML = '';
+          for (let key in validity) {
+            divValidityState.innerHTML += "<div>" + key + ": " + validity[key] + "</div>";
+          }
+        }
+      })();
+    </script>`;
+    return html`
+    <ods-select allow-multiple
+                class="my-select-demo-multiple"
+                has-error="${arg.hasError}"
+                is-disabled="${arg.isDisabled}"
+                is-readonly="${arg.isReadonly}"
+                is-required="${arg.isRequired}"
+                multiple-selection-label="${arg.multipleSelectionLabel}"
+                placeholder="${arg.placeholder}">
+      <option value="dog">Dog</option>
+      <option value="cat">Cat</option>
+      <option value="hamster">Hamster</option>
+      <option value="parrot">Parrot</option>
+      <option value="spider">Spider</option>
+      <option value="goldfish">Goldfish</option>
+    </ods-select>
+    ${arg.validityState ? validityStateTemplate : ''}
+  `;
+  },
   argTypes: orderControls({
     hasError: {
       table: {
@@ -146,11 +171,19 @@ export const DemoMultiple: StoryObj = {
     isReadonly: {
       table: {
         category: CONTROL_CATEGORY.general,
-        defaultValue: { summary: false },
+          defaultValue: { summary: false },
         type: { summary: 'boolean' },
       },
       control: 'boolean',
     },
+    isRequired: {
+      control: 'boolean',
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
     multipleSelectionLabel: {
       table: {
         category: CONTROL_CATEGORY.general,
@@ -167,12 +200,23 @@ export const DemoMultiple: StoryObj = {
       },
       control: 'text',
     },
+    validityState: {
+      table: {
+        category: CONTROL_CATEGORY.accessibility,
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+      description: 'Toggle this to see the component validityState',
+    },
   }),
   args: {
     hasError: false,
     isDisabled: false,
     isReadonly: false,
+    isRequired: false,
     multipleSelectionLabel: 'Selected item',
+    validityState: false,
   },
 };