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

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

@@ -9,7 +9,7 @@ import {
   subMonths,
   subYears,
 } from "date-fns";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
 
@@ -41,21 +41,21 @@ function createWrapper(
 }
 
 describe("UiDatePicker", () => {
-  it("renders Datepicker", () => {
+  test("renders Datepicker", () => {
     const wrapper = createWrapper();
     expect(wrapper.find('[data-testid="datepicker-trigger"]').exists()).toBe(
       true,
     );
   });
 
-  it("should emit an open event", async () => {
+  test("should emit an open event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
     expect(wrapper.emitted("open")).toBeTruthy();
   });
 
-  it("should emit a closed event", async () => {
+  test("should emit a closed event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
@@ -63,7 +63,7 @@ describe("UiDatePicker", () => {
     expect(wrapper.emitted().closed[0]).toBeTruthy();
   });
 
-  it("should show QuickFilters when leftSidebar is true", async () => {
+  test("should show QuickFilters when leftSidebar is true", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterHeadline: "Schnellfilter",
@@ -71,7 +71,7 @@ describe("UiDatePicker", () => {
       inline: true,
     });
     await flushPromises();
-    expect(wrapper.find(".dp__sidebar_left").exists()).toBe(true);
+    expect(wrapper.find(".dp--sidebar-left").exists()).toBe(true);
     expect(wrapper.html()).toContain("Schnellfilter");
     for (const range of quickFilterRanges) {
       expect(wrapper.find(`[data-testid="${range.label}"]`).exists()).toBe(
@@ -80,7 +80,7 @@ describe("UiDatePicker", () => {
     }
   });
 
-  it("should emit range for Heute Quickfilter", async () => {
+  test("should emit range for Heute Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -93,7 +93,7 @@ describe("UiDatePicker", () => {
     );
   });
 
-  it("should emit range for Dieser Monat Quickfilter", async () => {
+  test("should emit range for Dieser Monat Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -107,7 +107,7 @@ describe("UiDatePicker", () => {
   });
 
   describe("action-extra slot", () => {
-    it("should show string when prop is set and no slot", async () => {
+    test("should show string when prop is set and no slot", async () => {
       const wrapper = createWrapper({
         actionExtraContent: "Extra info text",
         inline: true,
@@ -116,7 +116,7 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).toContain("Extra info text");
     });
 
-    it("should override text when slot action-extra is used and prop is set", async () => {
+    test("should override text when slot action-extra is used and prop is set", async () => {
       const wrapper = createWrapper(
         {
           actionExtraContent: "Prop text",
@@ -131,10 +131,10 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).not.toContain("Prop text");
     });
 
-    it("should be empty when neither prop nor slot is set", async () => {
+    test("should be empty when neither prop nor slot is set", async () => {
       const wrapper = createWrapper({ inline: true });
 
-      const actionExtra = wrapper.find(".dp__action_extra");
+      const actionExtra = wrapper.find(".dp--action-extra");
       if (actionExtra.exists()) {
         expect(actionExtra.text().trim()).toBe("");
       }

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

@@ -119,7 +119,9 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args' />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -138,8 +140,12 @@ export const Inline: Story = {
       });
       return { args, date, formattedDate };
     },
-    template: `<div class="space-y-8">
-      <UiDatePicker v-bind='args' v-model="date"></UiDatePicker><div>Selected Date: {{ formattedDate }}</div></div>`,
+    template: /*html*/ `
+      <div class="space-y-8">
+        <UiDatePicker v-bind="args" v-model="date" />
+        <div>Selected Date: {{ formattedDate }}</div>
+      </div>
+    `,
   }),
 };
 
@@ -150,16 +156,18 @@ export const WithResetButton: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-extra="{ reset }">
-        <div class="text-left">
-          <UiButton  appearance="secondary" size="xs" @click="reset">
-            <UiIcon name="reset" />
-            <span>Zurücksetzen</span>
-          </UiButton>
-      </div>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-extra="{ reset }">
+          <div class="text-left">
+            <UiButton  appearance="secondary" size="xs" @click="reset">
+              <UiIcon name="reset" />
+              <span>Zurücksetzen</span>
+            </UiButton>
+          </div>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -173,16 +181,18 @@ export const WithActionRow: Story = {
       const date = ref();
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-row="{ selectDate, closePicker }">
-            <UiButton  appearance="secondary" size="xs" @click="closePicker">
-              <span>Abbrechen</span>
-            </UiButton>
-            <UiButton  appearance="primary" size="xs" @click="selectDate">
-              <span>Anwenden</span>
-            </UiButton>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-row="{ selectDate, closePicker }">
+          <UiButton appearance="secondary" size="xs" @click="closePicker">
+            Abbrechen
+          </UiButton>
+          <UiButton size="xs" @click="selectDate">
+            Anwenden
+          </UiButton>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -204,7 +214,9 @@ export const MonthPicker: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -222,7 +234,9 @@ export const WithQuickfilters: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -238,7 +252,9 @@ export const WithMultiCalendars: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -255,7 +271,9 @@ export const WithCustomFormatter: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date" />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date" />
+    `,
   }),
 };
 
@@ -283,6 +301,8 @@ export const WithAllSettings: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args'></UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -130,7 +130,7 @@
         <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
       <template #arrow>
-        <div ref="menuArrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp--arrow-top"></div>
       </template>
     </VueDatePicker>
   </div>
@@ -306,17 +306,17 @@ function formatInput(date: Date | [Date, Date]): string {
 <style>
 @reference "../../tailwindPreset.css";
 
-.dp__arrow_top {
+.dp--arrow-top {
   left: 10%;
 }
 
-.dp__menu {
+.dp--menu {
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
 }
 
 .dp--year-select,
-.dp__month_year_select {
+.dp--month-year-select {
   border-radius: var(--radius-2xl);
 }
 
@@ -325,45 +325,45 @@ function formatInput(date: Date | [Date, Date]): string {
   padding: 0.25rem;
 }
 
-.dp__flex_display {
+.dp--flex-display {
   gap: 2rem;
 }
 
-.dp__sidebar_left {
+.dp--sidebar-left {
   padding: 0;
 }
 
-.dp__cell_inner {
+.dp--cell-inner {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner:hover {
+.dp--cell-inner:hover {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__today {
+.dp--today {
   border: 1px solid var(--color-neutral-primary);
 }
 
-.dp__cell_auto_range,
-.dp__cell_auto_range_start,
-.dp__cell_auto_range_end {
+.dp--cell-auto-range,
+.dp--cell-auto-range-start,
+.dp--cell-auto-range-end {
   border: none;
   color: var(--color-neutral-primary);
   background-color: var(--color-neutral-faint);
 }
 
-.dp__month_year_select {
+.dp--month-year-select {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-neutral-primary);
 }
 
-.dp__calendar_header_separator {
+.dp--calendar-header-separator {
   display: none;
 }
 
-.dp__calendar_header {
+.dp--calendar-header {
   gap: 0.25rem;
   align-items: center;
   font-size: var(--text-xs);
@@ -371,26 +371,26 @@ function formatInput(date: Date | [Date, Date]): string {
   font-weight: var(--font-weight-semibold);
 }
 
-.dp__calendar_header_item {
+.dp--calendar-header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-subtle);
 }
 
-.dp__calendar_row {
+.dp--calendar-row {
   gap: 0.25rem;
 }
 
-.dp__action_row,
-.dp__action_extra {
+.dp--action-row,
+.dp--action-extra {
   justify-content: end;
   gap: 1rem;
   border-top: 1px solid var(--color-neutral-faint);
   padding: 0.5rem 1rem;
 }
 
-.dp__theme_light {
+.dp--theme-light {
   --dp-font-family: var(--font-sans);
   --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
   --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/

package/dist/src/components/UiDialog/UiDialog.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 UiDialog from "./UiDialog.vue";
 
 describe("UiDialog", () => {
-  it("renders dialog with default slot content", () => {
+  test("renders dialog with default slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -14,7 +14,7 @@ describe("UiDialog", () => {
     expect(wrapper.text()).toContain("Default Slot");
   });
 
-  it("renders dialog with header slot content", () => {
+  test("renders dialog with header slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -25,7 +25,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("header").text()).toBe("Header Slot");
   });
 
-  it("renders dialog with close button if by prop provided", () => {
+  test("renders dialog with close button if by prop provided", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -39,7 +39,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("button")).toBeTruthy();
   });
 
-  it("renders dialog with footer slot content", () => {
+  test("renders dialog with footer slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",

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

@@ -9,6 +9,7 @@ const meta = {
   title: "Ui/UiDialog",
   args: {
     hasCloseButton: true,
+    animate: true,
   },
   render: (args) => ({
     setup() {

package/dist/src/components/UiDialog/UiDialog.vue

@@ -5,6 +5,7 @@
       cn(
         'fixed inset-0 m-auto w-120 rounded-2xl bg-surface-level-1 text-current shadow-lg backdrop:bg-shadow-strong',
         $attrs.class,
+        { animate },
       )
     "
     @click.self="dialog?.requestClose()"
@@ -64,9 +65,14 @@ defineSlots<{
   }) => any;
 }>();
 
-const { hasCloseButton = true, closeLabel = undefined } = defineProps<{
+const {
+  hasCloseButton = true,
+  closeLabel = undefined,
+  animate = false,
+} = defineProps<{
   hasCloseButton?: boolean;
   closeLabel?: string;
+  animate?: boolean;
 }>();
 
 function close() {
@@ -87,3 +93,45 @@ defineExpose({
   requestClose,
 });
 </script>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+  /* Backdrop */
+  .animate::backdrop {
+    background: rgb(0 0 0 / 0%);
+    transition:
+      background 0.3s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open]::backdrop {
+    background: rgb(0 0 0 / 50%);
+
+    @starting-style {
+      background: rgb(0 0 0 / 0%);
+    }
+  }
+
+  /* Dialog box — fade + scale */
+  .animate {
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open] {
+    opacity: 1;
+    transform: scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+}
+</style>

package/dist/src/components/UiFilterBadge/UiFilterBadge.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 UiFilterBadge from "./UiFilterBadge.vue";
 
 describe("UiFilterBadge", () => {
-  it("renders with colors set", () => {
+  test("renders with colors set", () => {
     const wrapper = mount(UiFilterBadge, {
       props: {
         textColor: "#000",
@@ -17,7 +17,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
   });
 
-  it("renders large size by default", () => {
+  test("renders large size by default", () => {
     const wrapper = mount(UiFilterBadge);
     const innerText = wrapper.find('[data-testid="innerText"]');
 
@@ -26,7 +26,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-relaxed")).toBe(true);
   });
 
-  it("renders small size", () => {
+  test("renders small size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "sm" },
     });
@@ -37,7 +37,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-normal")).toBe(true);
   });
 
-  it("renders medium size", () => {
+  test("renders medium size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "md" },
     });
@@ -48,7 +48,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-normal")).toBe(true);
   });
 
-  it("renders xl size", () => {
+  test("renders xl size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "xl" },
     });

package/dist/src/components/UiFilterButton/UiFilterButton.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 UiFilterButton from "./UiFilterButton.vue";
 
@@ -16,7 +16,7 @@ function createWrapper(
 }
 
 describe("UiFilterBadge", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         id: "id",
@@ -35,12 +35,12 @@ describe("UiFilterBadge", () => {
     expect(button.element.getAttribute("data-testid")).not.toBe("testId");
   });
 
-  it("renders with given Title", () => {
+  test("renders with given Title", () => {
     const wrapper = createWrapper();
     expect(wrapper.text()).toBe("Foo Bar");
   });
 
-  it("changes colour according to prop change", () => {
+  test("changes colour according to prop change", () => {
     const wrapper = createWrapper({
       props: {
         variant: "blue-rounded",
@@ -49,7 +49,7 @@ describe("UiFilterBadge", () => {
     expect(wrapper.classes("bg-primary")).toBe(true);
   });
 
-  it("emits click event", async () => {
+  test("emits click event", async () => {
     const wrapper = createWrapper();
     const button = wrapper.find('[data-testid="filter-button"]');
     await button.trigger("click");
@@ -58,7 +58,7 @@ describe("UiFilterBadge", () => {
     expect(lastEvent).toEqual([]);
   });
 
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = mount(UiFilterButton, {
       props: {
         options: [],

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
@@ -16,7 +16,7 @@ describe("UiIcon", () => {
     vi.resetModules();
   });
 
-  it.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
+  test.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
     [{ size: "xs" }, "size-3"],
     [{ size: "sm" }, "size-4"],
     [{ size: "md" }, "size-5"],
@@ -35,11 +35,11 @@ describe("UiIcon", () => {
     expect(wrapper.classes(expectedClassNames)).toBe(true);
   });
 
-  it("should be able to resolve all icons", async () => {
+  test("should be able to resolve all icons", async () => {
     await Promise.all(Object.values(icons));
   });
 
-  it("throws on non-existing icon name", async () => {
+  test("throws on non-existing icon name", async () => {
     function callback() {
       createWrapper({
         props: {

package/dist/src/components/UiIconButton/UiIconButton.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 UiIconButton from "./UiIconButton.vue";
 
@@ -12,7 +12,7 @@ function createWrapper(
 }
 
 describe("UiIconButton", () => {
-  it("should have no background when color none is taken  ", () => {
+  test("should have no background when color none is taken  ", () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -25,7 +25,7 @@ describe("UiIconButton", () => {
     expect(wrapper.classes("bg-primary")).toBe(false);
   });
 
-  it("should render small sized button by default", () => {
+  test("should render small sized button by default", () => {
     const wrapper = createWrapper({
       props: {
         iconName: "alert",
@@ -39,7 +39,7 @@ describe("UiIconButton", () => {
     expect(wrapper.classes("w-8")).toBe(true);
   });
 
-  it("should emit a click event when clicked", async () => {
+  test("should emit a click event when clicked", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -52,7 +52,7 @@ describe("UiIconButton", () => {
     expect(wrapper.emitted().click).toBeTruthy();
   });
 
-  it("should not emit click event when disabled", async () => {
+  test("should not emit click event when disabled", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -65,7 +65,7 @@ describe("UiIconButton", () => {
     expect(wrapper.emitted().click).toBeFalsy();
   });
 
-  it("should have no hover effect when disabled", async () => {
+  test("should have no hover effect when disabled", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",