@dpa-id-components/dpa-shared-components 20.0.4 → 20.0.5

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

@@ -1,160 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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>",
-  }),
-};