@dpa-id-components/dpa-shared-components 20.0.6 → 20.0.8

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

@@ -0,0 +1,160 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiDialog from "./UiDialog.vue";
+
+describe("UiDialog", () => {
+  it("renders dialog with default slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.find("main").text()).toBe("Default Slot");
+  });
+
+  it("renders dialog with header slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.find("header").text()).toBe("Header Slot");
+  });
+
+  it("renders dialog with close button if by prop provided", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+      props: {
+        hasCloseButton: true,
+      },
+    });
+
+    expect(wrapper.find("button")).toBeTruthy();
+  });
+
+  it("renders dialog with footer slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+        footer: "Footer Slot",
+      },
+    });
+
+    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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+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"),
+    },
+  }),
+} satisfies Meta<typeof UiDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Scrollable: Story = {
+  args: {
+    scrollable: true,
+    maxHeight: "100px",
+  },
+};
+
+export const RoundedBorder: Story = {
+  args: {
+    roundedBorder: true,
+  },
+};
+
+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",
+  },
+};

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

@@ -0,0 +1,17 @@
+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",
+      },
+    });
+    expect(wrapper.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);");
+  });
+});

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+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",
+    iconIsFilled: true,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterBadge, UiIconButton },
+    template: "<UiFilterBadge v-bind='args'> slot </UiFilterBadge>",
+  }),
+} satisfies Meta<typeof UiFilterBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithIsOutlined: Story = { args: { iconIsFilled: false } };

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

@@ -0,0 +1,41 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
+
+describe("UiFilterBadgeButton", () => {
+  it("renders with colors set", () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        color: "#000",
+        fill: "#fff",
+        label: "Foo",
+      },
+    });
+    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
+    const innerText = wrapper.find('[data-testid="labelText"]');
+    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
+  });
+
+  it("renders the label correctly", () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        label: "Foo",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Foo");
+  });
+
+  it("should emit click event when clicked", async () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        label: "Foo",
+      },
+    });
+    const label = wrapper.find('[data-testid="labelText"]');
+    await label.trigger("click");
+
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
+
+const meta = {
+  title: "Ui/UiFilterBadgeButton",
+  component: UiFilterBadgeButton,
+  argTypes: {
+    color: {
+      control: "color",
+      defaultValue: "#666",
+    },
+    fill: {
+      control: "color",
+      defaultValue: "#666",
+    },
+    iconIsFilled: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    label: {
+      control: "text",
+      defaultValue: "Example Label",
+    },
+    isActive: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+  args: {
+    color: "#666",
+    fill: "#666",
+    iconIsFilled: true,
+    label: "Example Label",
+    isActive: false,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterBadgeButton, UiIconButton },
+    template:
+      "<UiFilterBadgeButton v-bind='args' @click='click'>  <UiIconButton  icon-color='gray' background-color='none' icon-name='more-horizontal'/> </UiFilterBadgeButton>",
+    methods: {
+      click: action("click"),
+    },
+  }),
+} satisfies Meta<typeof UiFilterBadgeButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,79 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiFilterButton from "./UiFilterButton.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiFilterButton> = {},
+) {
+  return mount(UiFilterButton, {
+    ...options,
+    props: {
+      title: "Foo Bar",
+      ...options.props,
+    },
+  });
+}
+
+describe("UiFilterBadge", () => {
+  it("renders attributes on correct element", () => {
+    const wrapper = createWrapper({
+      props: {
+        id: "id",
+        class: "testClass",
+        "data-testid": "testId",
+      },
+    });
+
+    const root = wrapper.find(":first-child");
+    expect(root.element.classList.contains("testClass")).toBe(true);
+    expect(root.element.getAttribute("data-testid")).toBe("testId");
+    expect(root.element.getAttribute("id")).toBe("id");
+
+    const button = wrapper.find('[data-testid="filter-button"]');
+    expect(button.element.classList.contains("testClass")).toBe(false);
+    expect(button.element.getAttribute("data-testid")).not.toBe("testId");
+  });
+
+  it("renders with given Title", () => {
+    const wrapper = createWrapper();
+    expect(wrapper.text()).toBe("Foo Bar");
+  });
+
+  it("changes colour according to prop change", () => {
+    const wrapper = createWrapper({
+      props: {
+        variant: "blue-rounded",
+      },
+    });
+    expect(wrapper.classes("bg-blue-default")).toBe(true);
+  });
+
+  it("emits click event", async () => {
+    const wrapper = createWrapper();
+    const button = wrapper.find('[data-testid="filter-button"]');
+    await button.trigger("click");
+
+    const lastEvent = (wrapper.emitted("click") ?? []).at(-1);
+    expect(lastEvent).toEqual([]);
+  });
+
+  it("renders attributes on correct element", () => {
+    const wrapper = mount(UiFilterButton, {
+      props: {
+        options: [],
+        groupName: "",
+        id: "id",
+        class: "testClass pr-8",
+        "data-testid": "testId",
+      },
+    });
+
+    const root = wrapper.find(":first-child");
+    expect(root.attributes("id")).toBe("id");
+    expect(root.element.classList.contains("testClass")).toBe(true);
+    expect(root.element.classList.contains("pr-4")).toBe(false);
+    expect(root.element.classList.contains("pr-8")).toBe(true);
+    expect(root.attributes("data-testid")).toBe("testId");
+  });
+});

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import { icons } from "../UiIcon/icons.js";
+import UiFilterButton from "./UiFilterButton.vue";
+
+const meta = {
+  title: "Ui/UiFilterButton",
+  component: UiFilterButton,
+  argTypes: {
+    title: {
+      control: "text",
+    },
+    variant: {
+      control: "select",
+      options: [
+        "blue-rounded",
+        "white-rounded",
+        "blank",
+        "blue-blank",
+        "transparent-rounded",
+      ],
+    },
+    buttonWidth: {
+      control: "select",
+      options: ["max", "full"],
+    },
+    chevronIcon: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    rotateIcon: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    active: {
+      control: "boolean",
+    },
+    hasIcon: {
+      control: "boolean",
+    },
+    iconLeft: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    iconSize: {
+      control: "select",
+      options: ["xs", "small", "large"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small"],
+    },
+    iconLeftClass: {
+      control: "text",
+    },
+    iconRightClass: {
+      control: "text",
+    },
+  },
+  args: {
+    title: "Filter",
+    variant: "white-rounded",
+    buttonWidth: "max",
+    chevronIcon: "chevron-down",
+    rotateIcon: false,
+    disabled: false,
+    active: false,
+    hasIcon: true,
+    iconSize: "xs",
+    iconLeft: null,
+    iconLeftClass: undefined,
+    iconRightClass: undefined,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterButton },
+    template: "<UiFilterButton v-bind='args'>Slot</UiFilterButton>",
+  }),
+} satisfies Meta<typeof UiFilterButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiIcon/IconOverview.stories.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="grid grid-cols-6 gap-8">
+    <div
+      v-for="(_import, icon) in icons"
+      :key="icon"
+      class="h-25 content-center border-2 p-2 text-center"
+    >
+      <h2 class="mb-2">{{ icon }}</h2>
+      <UiIcon :name="icon" :size="props.size"></UiIcon>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { icons } from "./icons.js";
+import UiIcon from "./UiIcon.vue";
+
+const props = withDefaults(
+  defineProps<{
+    size: "xs" | "small" | "medium" | "large" | "xl";
+  }>(),
+  {},
+);
+</script>

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

@@ -0,0 +1,56 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { icons } from "./icons.js";
+import UiIcon from "./UiIcon.vue";
+
+function createWrapper(options: ComponentMountingOptions<typeof UiIcon> = {}) {
+  return mount(UiIcon, {
+    ...options,
+  });
+}
+
+describe("UiIcon", () => {
+  beforeEach(() => {
+    // Important to get isolated tests for this component as it dynamically imports components which will be cached in subsequent tests.
+    vi.resetModules();
+  });
+
+  it.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
+    [{ size: "xs" }, "size-3"],
+    [{ size: "small" }, "size-4"],
+    [{ size: "medium" }, "size-5"],
+    [{}, "size-6"],
+    [{ size: "large" }, "size-6"],
+    [{ size: "xl" }, "size-10"],
+    [{ size: "2xl" }, "size-14"],
+  ])("renders large size by default", (props, expectedClassNames) => {
+    const wrapper = createWrapper({
+      props: {
+        name: "alert",
+        ...props,
+      },
+    });
+
+    expect(wrapper.classes(expectedClassNames)).toBe(true);
+  });
+
+  it("should be able to resolve all icons", async () => {
+    await Promise.all(Object.values(icons));
+  });
+
+  it("throws on non-existing icon name", async () => {
+    function callback() {
+      createWrapper({
+        props: {
+          // @ts-expect-error
+          name: "does-not-exist",
+        },
+      });
+    }
+
+    expect(callback).toThrowError(
+      "UiIcon: No icon named “does-not-exist” exists.",
+    );
+  });
+});

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import IconOverview from "./IconOverview.stories.vue";
+import { icons } from "./icons.js";
+import UiIcon from "./UiIcon.vue";
+
+const meta = {
+  title: "Ui/UiIcon",
+  component: UiIcon,
+  argTypes: {
+    name: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small", "medium", "large", "xl", "2xl"],
+    },
+  },
+  args: {
+    name: "alert",
+    size: "large",
+  },
+} satisfies Meta<typeof UiIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiIcon },
+    template: "<UiIcon v-bind='args'></UiIcon>",
+  }),
+};
+
+export const Overview: Story = {
+  render: (args) => ({
+    setup() {
+      const size = args.size || "large";
+      return { args, size };
+    },
+    components: { IconOverview },
+    template: "<IconOverview :size='size'></IconOverview>",
+  }),
+};