@dpa-id-components/dpa-shared-components 22.0.0-next.4 → 22.0.0-next.5

package/dist/src/components/UiMenu/UiMenu.stories.ts

@@ -34,7 +34,7 @@ const meta = {
     buttonAppearance: "secondary-alt",
     filterButtonSize: undefined,
     defaultTitle: "Default Title",
-    multiLabel: "selected Options",
+    multiLabel: "selected options",
     noTitle: false,
 
     // Search
@@ -57,52 +57,61 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const renderDefault: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "Option 1",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option 2 is really long, much longer than the rest",
-        value: "value 2",
-        selected: false,
-        hasDividerAbove: true,
-      },
-      {
-        label: "Option 3",
-        value: "value 3",
-        selected: false,
-      },
-      {
-        label: "Option 4",
-        value: "value 4",
-        selected: false,
-      },
-    ]);
-    const filteredOptions = ref(Array.from(options.value));
-    const onSelect = (option: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[option.index].selected =
-        !filteredOptions.value[option.index].selected;
-    };
-    const onUpdateQuery = (value: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(value.toLowerCase()),
-      );
-    };
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      const options = ref<UiMenuOptionType<string>[]>([
+        {
+          label: "Option 1",
+          value: "value 1",
+          selected: true,
+          iconName: "info",
+        },
+        {
+          label: "Option 2 is really long, much longer than the rest",
+          value: "value 2",
+          selected: false,
+          iconName: "alert",
+          hasDividerAbove: true,
+        },
+        {
+          label: "Option 3",
+          value: "value 3",
+          selected: false,
+          iconName: "bulb",
+        },
+        {
+          label: "Option 4",
+          value: "value 4",
+          selected: false,
+          iconName: "language",
+        },
+      ]);
+      const filteredOptions = ref(Array.from(options.value));
 
-    return {
-      args,
-      onSelect,
-      onUpdateQuery,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          option.selected =
+            option.value === selectedOption.value ? true : false;
+        }
+      };
+
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
+
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
+    },
+    components: { UiMenu },
+    template: /*html*/ `
     <aside class="w-50 h-200 p-4 bg-accent-green">
       <UiMenu
         v-bind="args"
@@ -113,32 +122,14 @@ const renderDefault: Story["render"] = (args) => ({
       />
     </aside>
   `,
-  methods: {
-    optionSelected: action("option-selected"),
-    updateQuery: action("update:query"),
-  },
-});
-
-export const Default: Story = {
-  render: renderDefault,
-};
-
-export const WithResetAndSearch: Story = {
-  render: renderDefault,
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonAppearance: "secondary-alt",
-    listVariant: "checkbox",
-    checkboxSize: "sm",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
+    methods: {
+      optionSelected: action("option-selected"),
+      updateQuery: action("update:query"),
+    },
+  }),
 };
 
-export const WithGroupedOptions: Story = {
+export const GroupedOptions: Story = {
   args: {
     hasResetOption: true,
     hasSearch: true,
@@ -224,17 +215,19 @@ export const WithGroupedOptions: Story = {
         },
       ]);
       const filteredOptions = ref(Array.from(groupedOptions.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value.forEach(({ options }, groupIndex) => {
-          options.forEach(({ value }, optionsIndex) => {
-            if (value === option.value) {
-              filteredOptions.value[groupIndex].options[optionsIndex].selected =
-                !filteredOptions.value?.[groupIndex].options?.[optionsIndex]
-                  .selected;
-            }
-          });
-        });
+
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const { options } of filteredOptions.value) {
+          const option = options.find(
+            ({ value }) => value === selectedOption.value,
+          );
+          if (option) {
+            option.selected = !option.selected;
+            break;
+          }
+        }
       };
+
       const onUpdateQuery = (value: string) => {
         filteredOptions.value = groupedOptions.value.map(
           ({ groupLabel, options }) => ({
@@ -255,7 +248,7 @@ export const WithGroupedOptions: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -292,67 +285,15 @@ export const WithImages: Story = {
         },
       ]);
       const filteredOptions = ref(Array.from(options.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value[option.index].selected =
-          !filteredOptions.value[option.index].selected;
-      };
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = options.value.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase()),
-        );
-      };
 
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          if (option.value === selectedOption.value) {
+            option.selected = !option.selected;
+          }
+        }
       };
-    },
-    components: { UiMenu },
-    template: `
-      <UiMenu
-        v-bind="args"
-        v-model:query="args.query"
-        :options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-    `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-  args: {
-    listVariant: "checkbox",
-    checkboxSize: "sm",
-  },
-};
 
-export const WithIcons: Story = {
-  render: (args) => ({
-    setup() {
-      const options = ref<UiMenuOptionType<string>[]>([
-        {
-          label: "Update me",
-          value: "updateme",
-          selected: true,
-          iconName: "user-need-update-me",
-        },
-        {
-          label: "Help me",
-          value: "helpme",
-          selected: true,
-          iconName: "user-need-help-me",
-        },
-      ]);
-      const filteredOptions = ref(Array.from(options.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value[option.index].selected =
-          !filteredOptions.value[option.index].selected;
-      };
       const onUpdateQuery = (value: string) => {
         filteredOptions.value = options.value.filter((option) =>
           option.label.toLowerCase().includes(value.toLowerCase()),
@@ -368,12 +309,11 @@ export const WithIcons: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
         :options="filteredOptions"
-        :button-variant="filteredOptions.some((option) => option.selected) ? 'primary' : 'secondary-alt'"
         @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
         @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
       />

package/dist/src/components/UiOverlay/UiOverlay.spec.ts

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiOverlay from "./UiOverlay.vue";
 
 describe("UiOverlay", () => {
   const wrapper = mount(UiOverlay, {});
 
-  it("emits correct event when clicked", async () => {
+  test("emits correct event when clicked", async () => {
     const bg = wrapper.find('[data-testid="background"]');
 
     await bg.trigger("click");

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import { vClickAway } from "../../directives/vClickAway.ts";
 import UiButton from "../UiButton/UiButton.vue";
@@ -26,7 +26,7 @@ describe("UiOverlayMenu", () => {
     attachTo: document.getElementById("app") || "#app",
   });
 
-  it("emits correct event when clicked outside of slot content", async () => {
+  test("emits correct event when clicked outside of slot content", async () => {
     await buttonWrapper.trigger("mousedown");
     expect(overlayWrapper.emitted().close).toBeTruthy();
   });

package/dist/src/components/UiRadioButton/UiRadioButton.stories.ts

@@ -44,7 +44,7 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiRadioButton v-bind="args">
         {{ args.default }}
         <template v-if="args.errors" #errors>
@@ -64,7 +64,7 @@ export const Errors: Story = {
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiRadioButton v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -83,7 +83,7 @@ export const Group: Story = {
 
       return { args, language };
     },
-    template: `
+    template: /*html*/ `
       <div class="space-y-2">
         <UiRadioButton v-model="language" name="language" v-bind="args" value="en">English</UiRadioButton>
         <UiRadioButton v-model="language" name="language" v-bind="args" value="de">German</UiRadioButton>

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiRadioInputGroup from "./UiRadioInputGroup.vue";
 
 describe("UiRadioInputGroup", () => {
-  it("renders UiRadioInputGroup with props content", () => {
+  test("renders UiRadioInputGroup with props content", () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [
@@ -20,7 +20,7 @@ describe("UiRadioInputGroup", () => {
     expect(wrapper.text()).toBe("default name");
   });
 
-  it("should click change value", async () => {
+  test("should click change value", async () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         modelValue: "default value",
@@ -45,7 +45,7 @@ describe("UiRadioInputGroup", () => {
     expect(wrapper.props("modelValue")).toBe("second option");
   });
 
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [],

package/dist/src/components/UiSearchBar/UiSearchBar.spec.ts

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSearchBar from "./UiSearchBar.vue";
 
@@ -12,7 +12,7 @@ function createWrapper(
 }
 
 describe("UiSearchBar", () => {
-  it("renders the placeholder", () => {
+  test("renders the placeholder", () => {
     const placeholder = "Example query";
     const wrapper = createWrapper({ props: { placeholder } });
 
@@ -20,7 +20,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.placeholder).toBe(placeholder);
   });
 
-  it("renders the value", async () => {
+  test("renders the value", async () => {
     const wrapper = createWrapper();
 
     const searchQuery = "Ein Suchbegriff";
@@ -30,7 +30,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("emits focus event", async () => {
+  test("emits focus event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -38,7 +38,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("focus")).toBeTruthy();
   });
 
-  it("emits blur event", async () => {
+  test("emits blur event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -46,7 +46,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("blur")).toBeTruthy();
   });
 
-  it("renders chips and action slot", async () => {
+  test("renders chips and action slot", async () => {
     const wrapper = createWrapper({
       props: {
         placeholder: "Suchen",

package/dist/src/components/UiSearchInput/UiSearchInput.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSearchInput from "./UiSearchInput.vue";
 
@@ -12,7 +12,7 @@ describe("UiSearchInput", () => {
     },
   });
 
-  it("displays and emits entries", async () => {
+  test("displays and emits entries", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -20,7 +20,7 @@ describe("UiSearchInput", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("adds searchbar row when addRow button is clicked", async () => {
+  test("adds searchbar row when addRow button is clicked", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -30,7 +30,7 @@ describe("UiSearchInput", () => {
     expect(wrapper.findAll("input")).toHaveLength(2);
   });
 
-  it("deletes second row when there is no text in the searchbar", async () => {
+  test("deletes second row when there is no text in the searchbar", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);

package/dist/src/components/UiSection/UiSection.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSection from "./UiSection.vue";
 
@@ -10,13 +10,13 @@ describe("UiSection", () => {
     },
   });
 
-  it("renders with slot content", () => {
+  test("renders with slot content", () => {
     const inner = wrapper.find('[data-testid="inner"]');
 
     expect(inner.text()).toBe("Slot text");
   });
 
-  it("renders with border classes", async () => {
+  test("renders with border classes", async () => {
     await wrapper.setProps({
       borderTop: true,
       borderBottom: true,
@@ -25,7 +25,7 @@ describe("UiSection", () => {
     expect(wrapper.classes("border-b")).toBe(true);
   });
 
-  it("renders with padding classes", async () => {
+  test("renders with padding classes", async () => {
     await wrapper.setProps({
       verticalPadding: "small",
     });
@@ -36,7 +36,7 @@ describe("UiSection", () => {
     expect(inner.classes("pb-12")).toBe(true);
   });
 
-  it("renders with size classes", async () => {
+  test("renders with size classes", async () => {
     await wrapper.setProps({
       size: "small",
     });

package/dist/src/components/UiSectionDivider/UiSectionDivider.spec.ts

@@ -1,16 +1,16 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSectionDivider from "./UiSectionDivider.vue";
 
 describe("UiSectionDivider", () => {
   const wrapper = mount(UiSectionDivider);
 
-  it("renders default size class", () => {
+  test("renders default size class", () => {
     expect(wrapper.classes("h-4")).toBe(true);
   });
 
-  it("renders small size class", async () => {
+  test("renders small size class", async () => {
     await wrapper.setProps({
       size: "small",
     });

package/dist/src/components/UiSelect/{UIiSelect.spec.ts → UiSelect.spec.ts}

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSelect from "./UiSelect.vue";
 
@@ -10,7 +10,7 @@ function createWrapper(
 }
 
 describe("UiSelect", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         id: "id",
@@ -38,12 +38,16 @@ describe("UiSelect", () => {
     expect(select.element.getAttribute("aria-errormessage")).toBe("message");
   });
 
-  it("implements working v-model interface", async () => {
+  test("implements working v-model interface", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>
             <option value="tertiary">Tertiary</option>
@@ -71,12 +75,16 @@ describe("UiSelect", () => {
     expect(lastEvent).toEqual(["tertiary"]);
   });
 
-  it("works without v-model", async () => {
+  test("works without v-model", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="">None</option>
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>

package/dist/src/components/UiSelect/UiSelect.stories.ts

@@ -55,7 +55,7 @@ export const Default: Story = {
       return { args };
     },
     components: { UiSelect },
-    template: `
+    template: /*html*/ `
       <UiSelect
         v-model="args.modelValue"
         v-bind="args"

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.spec.ts

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSkeletonBox from "./UiSkeletonBox.vue";
 
 describe("UiSkeletonBox", () => {
   const wrapper = mount(UiSkeletonBox);
 
-  it("renders default", () => {
+  test("renders default", () => {
     expect(wrapper.classes("inline-block")).toBe(true);
     expect(wrapper.classes("animate-pulse")).toBe(true);
     expect(wrapper.classes("rounded-sm")).toBe(true);

package/dist/src/components/UiSnackbar/UiSnackbar.spec.ts

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
 import UiSnackbar from "./UiSnackbar.vue";
 
 describe("UiSnackbar", () => {
-  it("displays a text message via the default slot", () => {
+  test("displays a text message via the default slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -19,7 +19,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.text()).toBe("Hello, from snackbar");
   });
 
-  it("Is not visible when props don't say so", () => {
+  test("Is not visible when props don't say so", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -32,7 +32,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.find("div").exists()).toBe(false);
   });
 
-  it("displays an SVG icon via the icon slot", () => {
+  test("displays an SVG icon via the icon slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -46,7 +46,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.findComponent(UiIcon)).toBeTruthy();
   });
 
-  it("has an action button via the action slot", () => {
+  test("has an action button via the action slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -62,7 +62,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.emitted()["action-click"]).toBeTruthy();
   });
 
-  it("snackbar type success has green background", () => {
+  test("snackbar type success has green background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from success snackbar",
@@ -77,7 +77,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-green")).toBe(true);
   });
 
-  it("snackbar type error has red background", () => {
+  test("snackbar type error has red background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from error snackbar",
@@ -92,7 +92,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-red")).toBe(true);
   });
 
-  it("snackbar type info has gray-900 background", () => {
+  test("snackbar type info has gray-900 background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from info snackbar",