Update other stories, where not the default options are used

SchwarzIT · Sep 17, 2024 · de2ffa2 · de2ffa2
1 parent 336b57f
commit de2ffa2
Showing 1 changed file with 50 additions and 12 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
@@ -46,6 +46,19 @@ const LONG_LABELED_DEMO_OPTIONS = Array.from({ length: 10 }, (_, index) => ({
   label: `Long labeled option ${index + 1} `.repeat(4),
 })) satisfies SelectOption[];
 
+const GROUPED_DEMO_OPTIONS = [
+  { value: "cat", label: "Cat", group: "Land" },
+  { value: "dog", label: "Dog", group: "Land" },
+  { value: "tiger", label: "Tiger", group: "Land" },
+  { value: "reindeer", label: "Reindeer", group: "Land" },
+  { value: "racoon", label: "Racoon", group: "Land" },
+  { value: "dolphin", label: "Dolphin", group: "Water" },
+  { value: "flounder", label: "Flounder", group: "Water" },
+  { value: "eel", label: "Eel", group: "Water" },
+  { value: "falcon", label: "Falcon", group: "Air" },
+  { value: "owl", label: "Owl", group: "Air" },
+];
+
 /**
  * The select is a fundamental element utilized across various components such as
  * dropdowns, navigation bars, pagination, tables, etc.
@@ -161,6 +174,12 @@ export const MultiselectWithPreview = {
     ...Multiselect.args,
     textMode: "preview",
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "multi-select" },
+      options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
+    },
+  },
 } satisfies Story;
 
 /**
@@ -174,6 +193,12 @@ export const Required = {
     options: MULTISELECT_DEMO_OPTIONS,
     required: true,
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "multi-select" },
+      options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
+    },
+  },
 } satisfies Story;
 
 /**
@@ -197,18 +222,13 @@ export const GroupedOptions = {
   args: {
     label: "Grouped select",
     listLabel: "List label",
-    options: [
-      { value: "cat", label: "Cat", group: "Land" },
-      { value: "dog", label: "Dog", group: "Land" },
-      { value: "tiger", label: "Tiger", group: "Land" },
-      { value: "reindeer", label: "Reindeer", group: "Land" },
-      { value: "racoon", label: "Racoon", group: "Land" },
-      { value: "dolphin", label: "Dolphin", group: "Water" },
-      { value: "flounder", label: "Flounder", group: "Water" },
-      { value: "eel", label: "Eel", group: "Water" },
-      { value: "falcon", label: "Falcon", group: "Air" },
-      { value: "owl", label: "Owl", group: "Air" },
-    ],
+    options: GROUPED_DEMO_OPTIONS,
+  },
+  argTypes: {
+    modelValue: {
+      control: { type: "select" },
+      options: GROUPED_DEMO_OPTIONS.map((option) => option.value),
+    },
   },
 } satisfies Story;
 
@@ -221,6 +241,12 @@ export const Empty = {
     ...Default.args,
     options: [],
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "select" },
+      options: [],
+    },
+  },
 } satisfies Story;
 
 /**
@@ -275,6 +301,12 @@ export const WithCustomSearch: Story = {
     valueLabel: "Option One",
     modelValue: 1,
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "select" },
+      options: optionsForCustomSearch.map((option) => option.value),
+    },
+  },
   decorators: [
     /**
      * Decorator to simulate search
@@ -434,6 +466,12 @@ export const MultilineOptions = {
     options: LONG_LABELED_DEMO_OPTIONS,
     placeholder: "Placeholder...",
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "select" },
+      options: LONG_LABELED_DEMO_OPTIONS.map((option) => option.value),
+    },
+  },
 } satisfies Story;
 
 /**