Merge branch 'main' into chore/figma-links-ci

SchwarzIT · Sep 18, 2024 · 8d150b7 · 8d150b7
2 parents f3195fe + 9ad3123
commit 8d150b7
Showing 1 changed file with 100 additions and 52 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
@@ -6,6 +6,59 @@ import OnyxButton from "../OnyxButton/OnyxButton.vue";
 import OnyxSelect from "./OnyxSelect.vue";
 import type { SelectOption } from "./types";
 
+const DEMO_OPTIONS = [
+  "Apple",
+  "Banana",
+  "Mango",
+  "Kiwi",
+  "Orange",
+  "Papaya",
+  "Apricot",
+  "Lemon",
+  "Cranberry",
+  "Avocado",
+  "Cherry",
+  "Coconut",
+  "Lychee",
+  "Melon",
+  "Raspberry",
+  "Strawberry",
+].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option }));
+DEMO_OPTIONS.splice(6, 0, {
+  value: "disabled",
+  label: "Unavailable fruit",
+  disabled: true,
+});
+
+const MULTISELECT_DEMO_OPTIONS = [
+  {
+    value: "disabled-2",
+    label: "Selected unavailable fruit",
+    disabled: true,
+  },
+  ...DEMO_OPTIONS,
+  { value: "long", label: "Option with a very long long long  long long long long text" },
+];
+
+const LONG_LABELED_DEMO_OPTIONS = Array.from({ length: 10 }, (_, index) => ({
+  value: index,
+  truncation: "multiline",
+  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.
@@ -29,6 +82,10 @@ const meta: Meta<typeof OnyxSelect> = {
     empty: { control: { disable: true } },
     optionsEnd: { control: { disable: true } },
     option: { control: { disable: true } },
+    modelValue: {
+      control: { type: "select" },
+      options: DEMO_OPTIONS.map((option) => option.value),
+    },
   },
 
   decorators: [
@@ -57,46 +114,6 @@ const meta: Meta<typeof OnyxSelect> = {
 export default meta;
 type Story = StoryObj<typeof OnyxSelect>;
 
-const DEMO_OPTIONS = [
-  "Apple",
-  "Banana",
-  "Mango",
-  "Kiwi",
-  "Orange",
-  "Papaya",
-  "Apricot",
-  "Lemon",
-  "Cranberry",
-  "Avocado",
-  "Cherry",
-  "Coconut",
-  "Lychee",
-  "Melon",
-  "Raspberry",
-  "Strawberry",
-].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option }));
-DEMO_OPTIONS.splice(6, 0, {
-  value: "disabled",
-  label: "Unavailable fruit",
-  disabled: true,
-});
-
-const MULTISELECT_DEMO_OPTIONS = [
-  {
-    value: "disabled-2",
-    label: "Selected unavailable fruit",
-    disabled: true,
-  },
-  ...DEMO_OPTIONS,
-  { value: "long", label: "Option with a very long long long  long long long long text" },
-];
-
-const LONG_LABELED_DEMO_OPTIONS = Array.from({ length: 10 }, (_, index) => ({
-  value: index,
-  truncation: "multiline",
-  label: `Long labeled option ${index + 1} `.repeat(4),
-})) satisfies SelectOption[];
-
 /**
  * This example shows a default single select.
  */
@@ -141,6 +158,12 @@ export const Multiselect = {
     withCheckAll: true,
     options: MULTISELECT_DEMO_OPTIONS,
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "multi-select" },
+      options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
+    },
+  },
 } satisfies Story;
 
 /**
@@ -151,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;
 
 /**
@@ -164,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;
 
 /**
@@ -187,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;
 
@@ -211,6 +241,12 @@ export const Empty = {
     ...Default.args,
     options: [],
   },
+  argTypes: {
+    modelValue: {
+      control: { type: "select" },
+      options: [],
+    },
+  },
 } satisfies Story;
 
 /**
@@ -265,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
@@ -424,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;
 
 /**