@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/src/components/UiDialog/README.md

@@ -5,7 +5,7 @@
 ```html
 <!-- SomeComponent.vue using UiDialog -->
 <template>
-    <UiDialog v-bind='args'>
+    <UiDialog @cancel.prevent v-bind='args'>
         <template #header>Dialog header</template>
         Dialog main
         <template #footer>Dialog footer</template>
@@ -22,29 +22,24 @@
 ### Props
 
 
-| Name            | Type      | Default   | Description                                                                |
-|-----------------|-----------|-----------|----------------------------------------------------------------------------|
-| `scrollable`    | `Boolean` | `false`   | Adds scollability to the componbent, best used with `maxHeight`            |
-| `maxHeight`     | `String`  | `""`      | Sets the `max-height` style of the Dialog.                                 |
-| `maxWidth`      | `String`  | `"600px"` | Sets the `max-width` style of the Dialog.                                  |
-| `roundedBorder` | `Boolean` | `false`   | Rounds the edges of the Dialog                                             |
-| `hasPaddingY`   | `Boolean` | `true`    | Sets a vertical padding of the Dialog                                      |
-| `hasPaddingX`   | `Boolean` | `true`    | Sets a horizontal padding of the Dialog                                    |
-| `headerClasses` | `String`  | `null`    | A list of classes for the header slot.                                     |
-| `mainClasses`   | `String`  | `null`    | A list of classes for the main slot.                                       |
-| `positionTop`   | `String`  | `50%`     | Enter css value for vertical positioning of the Dialog (default is center) |
-| `closeOnEsc`    | `booelan` | `false%`  | The modal closes when ESC-Key is pressed                                   |
+| Name             | Type      | Default | Description                                       |
+|------------------|-----------|---------|---------------------------------------------------|
+| `hasCloseButton` | `boolean` | `true`  | Whether to show the close button |
+| `closeLabel`     | `string`  | `undefined` | Close button label |
 
-### Events
 
-| Name    | Type         | Description                       |
-|---------|--------------|-----------------------------------|
-| `close` | none         | Emitted when the Dialog is closed |
+### Exposes
+
+| Name           | Type | Description                                                          |
+|----------------|------|----------------------------------------------------------------------|
+| `close`        | none | Exposes the native `close()` function of a `<dialog>` element        |
+| `requestClose` | none | Exposes the native `requestClose()` function of a `<dialog>` element |
+| `showModal`    | none | Exposes the native `showModal()` function of a `<dialog>` element    |
 
 ### Slots
 
-| Name      | Description                               |
-|-----------|-------------------------------------------|
-| `default` | slot for the rendering the main section   |
-| `header`  | slot for the rendering the header section |
-| `footer`  | slot for the rendering the footer section |
+| Name      | Description  |
+|-----------|--------------|
+| `default` | Main content |
+| `header`  | Header       |
+| `footer`  | Footer       |

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

@@ -7,11 +7,11 @@ describe("UiDialog", () => {
   it("renders dialog with default slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
+        header: "Header Slot",
         default: "Default Slot",
       },
     });
-
-    expect(wrapper.find("main").text()).toBe("Default Slot");
+    expect(wrapper.text()).toContain("Default Slot");
   });
 
   it("renders dialog with header slot content", () => {
@@ -42,6 +42,7 @@ describe("UiDialog", () => {
   it("renders dialog with footer slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
+        header: "Header Slot",
         default: "Default Slot",
         footer: "Footer Slot",
       },
@@ -49,112 +50,4 @@ describe("UiDialog", () => {
 
     expect(wrapper.find("footer").text()).toBe("Footer Slot");
   });
-
-  it("has maximum height set if provided through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        maxHeight: "100px",
-      },
-    });
-
-    expect(
-      wrapper
-        .find('[data-testid="container"]')
-        .attributes()
-        .style.includes("max-height: 100px;"),
-    ).toBeTruthy();
-  });
-
-  it("has maximum width set if provided through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        maxWidth: "700px",
-      },
-    });
-
-    expect(
-      wrapper
-        .find('[data-testid="container"]')
-        .attributes()
-        .style.includes("max-width: 700px;"),
-    ).toBeTruthy();
-  });
-
-  it("is scrollable through prop", () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        scrollable: true,
-      },
-    });
-
-    expect(wrapper.find('[data-testid="container"]').classes()).toContain(
-      "overflow-y-auto",
-    );
-  });
-
-  it("fires 'close' event when background is clicked", async () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        default: "Default Slot",
-      },
-      props: {
-        closeOnClickOutside: true,
-      },
-    });
-    const bg = wrapper.find('[data-testid="background"]');
-
-    await bg.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  it("fires 'close' event when close button is clicked", async () => {
-    const wrapper = mount(UiDialog, {
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-      props: {
-        hasCloseButton: true,
-      },
-    });
-    const btn = wrapper.find("button");
-
-    await btn.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  it("fires 'close' event when esc key is pressed and prop is set", async () => {
-    // Workaround to make events on `Document` Level work. See: https://test-utils.vuejs.org/api/#attachTo
-
-    document.body.innerHTML = `
-  <div>
-    <div id="app"></div>
-  </div>
-`;
-
-    const wrapper = mount(UiDialog, {
-      attachTo: "#app",
-      slots: {
-        header: "Header Slot",
-        default: "Default Slot",
-      },
-      props: {
-        closeOnEsc: true,
-      },
-    });
-    await wrapper.trigger("keyup.Escape");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
 });

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

@@ -1,54 +1,37 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
+import { useTemplateRef } from "vue";
+
+import UiButton from "../UiButton/UiButton.vue";
 
 import UiDialog from "./UiDialog.vue";
 
 const meta = {
   title: "Ui/UiDialog",
-  component: UiDialog,
-  argTypes: {
-    scrollable: { control: "boolean" },
-    roundedBorder: { control: "boolean" },
-    hasPaddingX: { control: "boolean" },
-    hasPaddingY: { control: "boolean" },
-    hasCloseButton: { control: "boolean" },
-    maxHeight: { control: "text" },
-    maxWidth: { control: "text" },
-    headerClasses: { control: "text" },
-    mainClasses: { control: "text" },
-    closeOnClickOutside: { control: "boolean" },
-    positionTop: {
-      control: "select",
-      options: ["50%", "20%", "40%"],
-    },
-  },
   args: {
-    scrollable: false,
-    roundedBorder: false,
-    hasPaddingX: true,
-    hasPaddingY: true,
     hasCloseButton: true,
-    maxHeight: "",
-    maxWidth: "600px",
-    headerClasses: "",
-    mainClasses: "",
-    closeOnClickOutside: true,
-    positionTop: "50%",
   },
   render: (args) => ({
     setup() {
-      return { args };
-    },
-    components: { UiDialog },
-    template:
-      "<UiDialog v-bind='args' @close='close'>" +
-      "<template #header>Dialog header</template>" +
-      "Dialog main" +
-      "<template #footer>Dialog footer</template>" +
-      "</UiDialog>",
-    methods: {
-      close: action("close"),
+      const dialog = useTemplateRef<InstanceType<typeof UiDialog>>("dialog");
+
+      return { args, dialog };
     },
+    components: { UiDialog, UiButton },
+    template: /*html*/ `
+      <UiButton @click="dialog.showModal()">Show dialog</UiButton>
+
+      <UiDialog ref="dialog" v-bind="args">
+        <template #header>
+          <h2>Heading</h2>
+        </template>
+
+        Main content
+
+        <template #footer>
+          Footer
+        </template>
+      </UiDialog>
+    `,
   }),
 } satisfies Meta<typeof UiDialog>;
 
@@ -57,23 +40,31 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Scrollable: Story = {
+export const PreventCloseOnEscAndClickOutside: Story = {
   args: {
-    scrollable: true,
-    maxHeight: "100px",
+    hasCloseButton: false,
   },
-};
+  render: (args) => ({
+    setup() {
+      const dialog = useTemplateRef<InstanceType<typeof UiDialog>>("dialog");
 
-export const RoundedBorder: Story = {
-  args: {
-    roundedBorder: true,
-  },
-};
+      return { args, dialog };
+    },
+    components: { UiDialog, UiButton },
+    template: /*html*/ `
+      <UiButton @click="dialog.showModal()">Show dialog</UiButton>
 
-export const CustomClasses: Story = {
-  args: {
-    headerClasses: "bg-transparent",
-    mainClasses:
-      "h-16 flex flex-row justify-center items-center bg-green-night text-white mx-4 rounded-lg",
-  },
+      <UiDialog ref="dialog" v-bind="args" @cancel.prevent>
+        <template #header>
+          <h2>Heading</h2>
+        </template>
+
+        Main content
+
+        <template #footer="{ close }">
+          <UiButton @click="close()">Submit</UiButton>
+        </template>
+      </UiDialog>
+    `,
+  }),
 };

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

@@ -1,118 +1,89 @@
 <template>
-  <UiOverlay @close="handleClickAway">
-    <div
-      :class="{
-        'overflow-y-auto': scrollable,
-        'rounded-[24px]': roundedBorder,
-      }"
-      :style="`
-      max-height: ${maxHeight};
-      max-width: ${maxWidth};
-      top: ${positionTop}
-      `"
-      class="fixed bg-white shadow-lg"
-      data-testid="container"
-      style="
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: calc(100% - 2rem);
-      "
+  <dialog
+    ref="dialog"
+    :class="
+      cn(
+        'fixed inset-0 m-auto w-120 rounded-2xl bg-surface-level-1 text-current shadow-lg backdrop:bg-shadow-strong',
+        $attrs.class,
+      )
+    "
+    @click.self="dialog?.requestClose()"
+    @keydown.esc.prevent="dialog?.requestClose()"
+  >
+    <header
+      v-if="$slots.header || hasCloseButton"
+      class="flex flex-wrap items-center justify-between gap-4 rounded-t-2xl bg-neutral-whisper px-4 py-2"
     >
-      <header
-        v-if="$slots.header"
-        :class="
-          cn(
-            'flex h-12 items-center justify-between bg-gray-100 py-3 pr-2 pl-4 lg:h-14 lg:py-4 lg:pr-3 lg:pl-6',
-            headerClasses,
-            { 'rounded-t-[24px]': roundedBorder },
-          )
-        "
-      >
-        <slot name="header" />
-        <UiIconButton
-          v-if="hasCloseButton"
-          title="Close dialog"
-          icon-name="close"
-          background-color="none"
-          icon-color="gray"
-          size="medium"
-          class="hover:bg-gray-400 active:bg-gray-500"
-          @click="emit('close')"
-        ></UiIconButton>
-      </header>
-      <main
-        :class="
-          cn(mainClasses, {
-            'px-4 lg:px-6': hasPaddingX,
-            'pt-6 pb-3': hasPaddingY,
-          })
-        "
-      >
-        <slot />
-      </main>
-      <footer
-        v-if="$slots.footer"
-        class="flex justify-between px-4 py-6 lg:px-6"
+      <div v-if="$slots.header" class="text-lg font-semibold">
+        <slot name="header" v-bind="{ close, requestClose }" />
+      </div>
+
+      <UiButton
+        v-if="hasCloseButton"
+        class="ml-auto"
+        :aria-label="closeLabel"
+        appearance="ghost"
+        size="sm"
+        @click="close"
       >
-        <slot name="footer" />
-      </footer>
+        <UiIcon name="close" />
+      </UiButton>
+    </header>
+
+    <div v-if="$slots.default" class="space-y-2 px-4 py-3">
+      <slot />
     </div>
-  </UiOverlay>
+
+    <footer
+      v-if="$slots.footer"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3"
+    >
+      <slot name="footer" v-bind="{ close, requestClose }" />
+    </footer>
+  </dialog>
 </template>
+
 <script setup lang="ts">
-import { useEventListener } from "@vueuse/core";
+import { useTemplateRef } from "vue";
 
 import { cn } from "../../utils/cn.ts";
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-import UiOverlay from "../UiOverlay/UiOverlay.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+
+const dialog = useTemplateRef<HTMLDialogElement>("dialog");
 
-const emit = defineEmits<{
-  close: [];
+defineSlots<{
+  header?: (props: {
+    close: typeof close;
+    requestClose: typeof requestClose;
+  }) => any;
+  default?: () => any;
+  footer?: (props: {
+    close: typeof close;
+    requestClose: typeof requestClose;
+  }) => any;
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    scrollable?: boolean;
-    maxWidth?: string;
-    maxHeight?: string;
-    roundedBorder?: boolean;
-    hasPaddingY?: boolean;
-    hasPaddingX?: boolean;
-    headerClasses?: string;
-    mainClasses?: string;
-    hasCloseButton?: boolean;
-    closeOnClickOutside?: boolean;
-    positionTop?: string;
-    closeOnEsc?: boolean;
-  }>(),
-  {
-    scrollable: false,
-    maxWidth: "600px",
-    maxHeight: "",
-    roundedBorder: false,
-    hasPaddingY: true,
-    hasPaddingX: true,
-    headerClasses: "",
-    mainClasses: "",
-    hasCloseButton: false,
-    closeOnClickOutside: true,
-    positionTop: "50%",
-    closeOnEsc: false,
-  },
-);
+const { hasCloseButton = true, closeLabel = undefined } = defineProps<{
+  hasCloseButton?: boolean;
+  closeLabel?: string;
+}>();
+
+function close() {
+  dialog.value?.close();
+}
+
+function requestClose() {
+  dialog.value?.requestClose();
+}
 
-const handleClickAway = () => {
-  if (props.closeOnClickOutside) {
-    emit("close");
-  }
-};
-const onEscapeKeyUp = (event: KeyboardEvent) => {
-  if (props.closeOnEsc) {
-    if (event.key === "Escape") {
-      emit("close");
-    }
-  }
-};
+function showModal() {
+  dialog.value?.showModal();
+}
 
-useEventListener(document, "keyup", (event) => onEscapeKeyUp(event));
+defineExpose({
+  showModal,
+  close,
+  requestClose,
+});
 </script>

package/dist/src/components/UiFilterBadge/README.md

@@ -5,7 +5,7 @@
 ```html
 <!-- SomeComponent.vue using UiFilterBadge -->
 <template>
-    <UiFilterBadge color="#123" fill="#456">Text</UiFilterBadge>
+    <UiFilterBadge textColor="#333" iconColor="#333">Text</UiFilterBadge>
 </template>
 
 <script>
@@ -17,12 +17,12 @@
 
 ### Props
 
-| Name          | Type     | Default | Description                                                                    |
-|---------------|----------|---------|--------------------------------------------------------------------------------|
-| `color`       | `String` | `#333`  | Sets the color of the text.                                                    |
-| `fill`        | `String` | `#000`  | Sets the color of the wrapper and thereby of the icon.                         |
-| `iconMargin`  | `String` | ``      | Sets the margin beweteen the Icon and the default slot.                        |
-| `isClickable` | `Bolean` | false   | If set true, Background color changes when hovered.                            |
+| Name           | Type                                             | Default | Description                                      |
+|----------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `textColor`    | `string`                                         | `#000`  | Sets the color of the text.                      |
+| `iconColor`    | `string`                                         | `#333`  | Sets the color of the icon.                      |
+| `iconIsFilled` | `boolean`                                        | `true`  | If true, renders the filled version of the icon. |
+| `size`         | `"sm"`, `"md"`, `"lg"`, or `"xl"` | `"lg"`    | Determines the font size and weight.             |
 
 ### Slots
 

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

@@ -2,16 +2,60 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiFilterBadge from "./UiFilterBadge.vue";
+
 describe("UiFilterBadge", () => {
   it("renders with colors set", () => {
     const wrapper = mount(UiFilterBadge, {
       props: {
-        color: "#000",
-        fill: "#fff",
+        textColor: "#000",
+        iconColor: "#fff",
       },
     });
-    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
+    const icon = wrapper.find(".inline-flex");
+    expect(icon.attributes().style).toBe("color: rgb(255, 255, 255);");
     const innerText = wrapper.find('[data-testid="innerText"]');
     expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
   });
+
+  it("renders large size by default", () => {
+    const wrapper = mount(UiFilterBadge);
+    const innerText = wrapper.find('[data-testid="innerText"]');
+
+    expect(innerText.classes("text-lg")).toBe(true);
+    expect(innerText.classes("font-medium")).toBe(true);
+    expect(innerText.classes("leading-relaxed")).toBe(true);
+  });
+
+  it("renders small size", () => {
+    const wrapper = mount(UiFilterBadge, {
+      props: { size: "sm" },
+    });
+    const innerText = wrapper.find('[data-testid="innerText"]');
+
+    expect(innerText.classes("text-xs")).toBe(true);
+    expect(innerText.classes("font-normal")).toBe(true);
+    expect(innerText.classes("leading-normal")).toBe(true);
+  });
+
+  it("renders medium size", () => {
+    const wrapper = mount(UiFilterBadge, {
+      props: { size: "md" },
+    });
+    const innerText = wrapper.find('[data-testid="innerText"]');
+
+    expect(innerText.classes("text-sm")).toBe(true);
+    expect(innerText.classes("font-medium")).toBe(true);
+    expect(innerText.classes("leading-normal")).toBe(true);
+  });
+
+  it("renders xl size", () => {
+    const wrapper = mount(UiFilterBadge, {
+      props: { size: "xl" },
+    });
+    const innerText = wrapper.find('[data-testid="innerText"]');
+
+    expect(innerText.classes("text-2xl")).toBe(true);
+    expect(innerText.classes("font-medium")).toBe(true);
+    expect(innerText.classes("leading-loose")).toBe(true);
+  });
 });

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

@@ -7,25 +7,10 @@ import UiFilterBadge from "./UiFilterBadge.vue";
 const meta = {
   title: "Ui/UiFilterBadge",
   component: UiFilterBadge,
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["small", "medium", "large", "xl"],
-    },
-    color: {
-      control: "color",
-    },
-    fill: {
-      control: "color",
-    },
-    iconIsFilled: {
-      control: "boolean",
-    },
-  },
   args: {
-    size: "medium",
-    color: "#666",
-    fill: "#666",
+    size: "md",
+    textColor: "#666",
+    iconColor: "#666",
     iconIsFilled: true,
   },
   render: (args) => ({