chore(OnyxSelect): Add new OnyxSelect storybook example

packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts

@@ -1,9 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
+import bag from "@sit-onyx/icons/bag.svg?raw";
 import plusSmall from "@sit-onyx/icons/plus-small.svg?raw";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { computed, h, ref, watchEffect } from "vue";
 import { normalizedIncludes } from "../../utils/strings";
+import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
 import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
+import OnyxTag from "../OnyxTag/OnyxTag.vue";
 import OnyxSelect from "./OnyxSelect.vue";
 import type { SelectOption } from "./types";
 
@@ -60,6 +64,15 @@ const GROUPED_DEMO_OPTIONS = [
   { value: "owl", label: "Owl", group: "Air" },
 ];
 
+const OPTIONS_WITH_ADDITIONAL_DATA = [
+  "Selected items",
+  "Price tag",
+  "Shopping bag",
+].map<SelectOption>((option) => ({
+  value: option.toLowerCase(),
+  label: option,
+}));
+
 /**
  * The select is a fundamental element utilized across various components such as
  * dropdowns, navigation bars, pagination, tables, etc.
@@ -432,10 +445,22 @@ export const Skeleton = {
  * This example shows a single select with fully custom option content that can be
  * passed as slot.
  */
-export const CustomOptions = {
+export const WithCustomOptions = {
   args: {
     ...Default.args,
-    option: ({ label }: SelectOption) => ["custom ", h("strong", label), " content"],
+    options: OPTIONS_WITH_ADDITIONAL_DATA,
+    option: ({ label }: SelectOption) => {
+      const style = { display: "flex", "align-items": "center", gap: "0.5rem" };
+
+      switch (label) {
+        case "Selected items":
+          return [h("div", { style }, [label, h(OnyxBadge, { color: "danger" }, "Sale!")])];
+        case "Price tag":
+          return h(OnyxTag, { label });
+        case "Shopping bag":
+          return [h("div", { style }, [h(OnyxIcon, { icon: bag }), label])];
+      }
+    },
   },
 } satisfies Story;