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

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

@@ -1,78 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiIconButton from "./UiIconButton.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiIconButton> = {},
-) {
-  return mount(UiIconButton, {
-    ...options,
-  });
-}
-
-describe("UiIconButton", () => {
-  it("should have no background when color none is taken  ", () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        backgroundColor: "none",
-        iconColor: "gray",
-      },
-    });
-
-    expect(wrapper.classes("bg-blue-default")).toBe(false);
-  });
-
-  it("should render small sized button by default", () => {
-    const wrapper = createWrapper({
-      props: {
-        iconName: "alert",
-        size: "medium",
-        title: "Foo",
-        backgroundColor: "none",
-        iconColor: "gray",
-      },
-    });
-    expect(wrapper.classes("h-8")).toBe(true);
-    expect(wrapper.classes("w-8")).toBe(true);
-  });
-
-  it("should emit a click event when clicked", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-      },
-    });
-
-    await wrapper.trigger("click");
-
-    expect(wrapper.emitted().click).toBeTruthy();
-  });
-
-  it("should not emit click event when disabled", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        disabled: true,
-      },
-    });
-
-    await wrapper.trigger("click");
-    expect(wrapper.emitted().click).toBeFalsy();
-  });
-
-  it("should have no hover effect when disabled", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        disabled: true,
-      },
-    });
-    expect(wrapper.classes("disabled:hover:bg-none")).toBe(true);
-  });
-});

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

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import { icons } from "../UiIcon/icons.js";
-import UiIconButton from "./UiIconButton.vue";
-
-const meta = {
-  title: "Ui/UiIconButton",
-  component: UiIconButton,
-  argTypes: {
-    title: {
-      control: "text",
-    },
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium", "large", "xl"],
-    },
-    backgroundColor: {
-      control: "select",
-      options: ["blue", "gray-hover", "none"],
-    },
-    iconColor: {
-      control: "select",
-      options: ["blue", "white", "gray"],
-    },
-  },
-  args: {
-    title: "Title",
-    iconName: "alert",
-    size: "large",
-    backgroundColor: "blue",
-    iconColor: "white",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiIconButton },
-    template: "<UiIconButton v-bind='args' @click='action'></UiIconButton>",
-    methods: { action: action("click") },
-  }),
-} satisfies Meta<typeof UiIconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Menu: Story = {
-  args: {
-    backgroundColor: "none",
-    iconColor: "gray",
-    iconName: "more-horizontal",
-    size: "large",
-  },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-};

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

@@ -1,43 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiInfoContent from "./UiInfoContent.vue";
-
-describe("UiInfoContent", () => {
-  const wrapper = mount(UiInfoContent, {
-    slots: {
-      title: "Keine Ergebnisse",
-      default: "Das ist ein Test-Text.",
-      actions: `<button>Klick mich</button>`,
-    },
-    props: {
-      iconBackground: "white",
-      iconName: "search",
-      iconSize: "xl",
-      iconColor: "gray",
-    },
-  });
-  it("renders slot content for title, text and action content", () => {
-    expect(wrapper.find("[data-testid='info-title']").text()).toBe(
-      "Keine Ergebnisse",
-    );
-    expect(wrapper.find("[data-testid='info-text']").text()).toBe(
-      "Das ist ein Test-Text.",
-    );
-
-    expect(wrapper.find("button").text()).toBe("Klick mich");
-  });
-
-  it("renders correct backgroundColor", () => {
-    const iconBackground = wrapper.find("[data-testid='info-icon']");
-    expect(iconBackground.classes("bg-white")).toBe(true);
-  });
-  it("renders correct icon color", () => {
-    const iconColor = wrapper.find("[data-testid='info-icon']");
-    expect(iconColor.classes("text-gray-400")).toBe(true);
-  });
-  it("renders correct icon size", () => {
-    const iconSize = wrapper.find("[data-testid='icon']");
-    expect(iconSize.classes("size-10")).toBe(true);
-  });
-});

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

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiButton from "../UiButton/UiButton.vue";
-import { icons } from "../UiIcon/icons.js";
-import UiInfoContent from "./UiInfoContent.vue";
-
-const meta = {
-  title: "Ui/UiInfoContent",
-  component: UiInfoContent,
-  argTypes: {
-    iconBackground: {
-      control: "select",
-      options: ["white", "gray", "green"],
-    },
-    iconColor: {
-      control: "select",
-      options: ["gray", "white"],
-    },
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    iconSize: {
-      control: "select",
-      options: ["xs", "small", "medium", "large", "xl"],
-    },
-  },
-  args: {
-    iconBackground: "white",
-    iconColor: "gray",
-    iconName: "search",
-    iconSize: "xl",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiInfoContent, UiButton },
-    template:
-      "<UiInfoContent v-bind='args' class='mx-auto max-w-[657px]'>" +
-      "<template #title>" +
-      "Keine Ergebnisse" +
-      "</template>" +
-      "Leider konnten wir keine Ergebnisse finden. Bitte passen Sie Ihre Suchanfrage an oder speichern Sie die Suche trotzdem, um über Treffer informiert zu werden." +
-      "<template #actions>" +
-      "<UiButton color='blue'>Suche trotzdem speichern</UiButton>" +
-      "<UiButton color='gray'>Suche löschen</UiButton>" +
-      "</template>" +
-      "</UiInfoContent>",
-  }),
-} satisfies Meta<typeof UiInfoContent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

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

@@ -1,239 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiInput from "./UiInput.vue";
-
-function createWrapper(options: ComponentMountingOptions<typeof UiInput> = {}) {
-  return mount(UiInput, {
-    ...options,
-  });
-}
-
-describe("UiInput", () => {
-  it("renders attributes on correct element", () => {
-    const wrapper = createWrapper({
-      props: {
-        id: "id",
-        class: "testClass",
-        "data-testid": "testId",
-        name: "name",
-        modelValue: "value",
-        placeholder: "placeholder",
-        required: "required",
-        readonly: true,
-        disabled: true,
-        "aria-invalid": "true",
-        "aria-errormessage": "message",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.getAttribute("data-testid")).toBe("testId");
-
-    const input = wrapper.find("input");
-    expect(input.element.classList.contains("testClass")).toBe(false);
-    expect(input.element.getAttribute("data-testid")).not.toBe("testId");
-    expect(input.element.getAttribute("id")).toBe("id");
-    expect(input.element.getAttribute("name")).toBe("name");
-    expect(input.element.getAttribute("placeholder")).toBe("placeholder");
-    expect(input.element.hasAttribute("required")).toBe(true);
-    expect(input.element.hasAttribute("readonly")).toBe(true);
-    expect(input.element.hasAttribute("disabled")).toBe(true);
-    expect(input.element.getAttribute("aria-invalid")).toBe("true");
-    expect(input.element.getAttribute("aria-errormessage")).toBe("message");
-  });
-
-  it("renders the label", async () => {
-    const wrapper = createWrapper({
-      props: {
-        label: "Veröffentlichungsdatum",
-      },
-    });
-    const label = wrapper.find("label");
-
-    expect(label.text()).toBe("Veröffentlichungsdatum");
-  });
-
-  it("renders the placeholder", async () => {
-    const wrapper = createWrapper({
-      props: {
-        placeholder: "Beispiel: Merkel",
-      },
-    });
-    const input = wrapper.find("input");
-    expect(input.attributes("placeholder")).toBe("Beispiel: Merkel");
-  });
-
-  it("renders value", async () => {
-    const wrapper = createWrapper({
-      props: {
-        modelValue: "foo",
-      },
-    });
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("foo");
-  });
-
-  it("emits focus event", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    await input.trigger("focus");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().focus).toBeTruthy();
-  });
-
-  it("emits blur event", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    await input.trigger("blur");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().blur).toBeTruthy();
-  });
-
-  it("changes value on input", async () => {
-    const wrapper = createWrapper({
-      props: {
-        modelValue: "foo",
-      },
-    });
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("foo");
-    await wrapper.setProps({
-      modelValue: "bar",
-    });
-    expect(input.element.value).toBe("bar");
-  });
-
-  it("renders the info", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "info",
-      infoText: "This is an info example",
-    });
-
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an info example");
-  });
-
-  it("renders the warning", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "warning",
-      warningMessage: "This is an warning example",
-    });
-
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an warning example");
-  });
-
-  it("renders the error", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "error",
-      errorMessage: "This is an error example",
-    });
-
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an error example");
-  });
-
-  it("works without v-model", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(undefined);
-
-    await input.setValue("a");
-    expect(input.element.value).toBe("a");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["a"]);
-
-    await input.setValue("ab");
-    expect(input.element.value).toBe("ab");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["ab"]);
-  });
-
-  it("doesn't undo inputs on blur (bug fix)", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-
-    // Focus the input to trigger an internal mechanism that swaps out styles on the `label` element.
-    await input.trigger("focus");
-    await input.setValue("ab");
-    expect(input.element.value).toBe("ab");
-
-    // Blur the input to trigger an internal mechanism that swaps out styles on the `label` element (again). This can trigger a bug.
-    await input.trigger("blur");
-    expect(input.element.value).toBe("ab");
-  });
-
-  it("renders as textarea with isTextarea prop", async () => {
-    const wrapper = createWrapper({
-      props: {
-        isTextarea: true,
-      },
-    });
-
-    expect(wrapper.find("textarea").exists()).toBe(true);
-  });
-
-  it("raises/lowers label correctly when making inputs and focusing/blurring the input (bug fix)", async () => {
-    const wrapper = createWrapper({ props: { label: "test" } });
-    const input = wrapper.find("input");
-    const label = wrapper.find("label");
-    const isLabelRaisedClassName = "-translate-y-1/2";
-
-    // Initially, the label is not raised
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(
-      false,
-    );
-
-    // Upon focusing, the label will be raised
-    await input.trigger("focus");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
-
-    // Making an input keeps the label raised
-    input.element.value = "ab";
-    await input.trigger("input");
-    expect(input.element.value).toBe("ab");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
-
-    // Blurring the input keeps the label raised because there's now a value
-    await input.trigger("blur");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
-
-    // After focusing, the label is still raised
-    await input.trigger("focus");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
-
-    // Clearing the input but keeping the focus keeps the label raised
-    input.element.value = "";
-    await input.trigger("input");
-    expect(input.element.value).toBe("");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
-
-    // Blurring the input will eventually lower the label again
-    await input.trigger("blur");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(
-      false,
-    );
-  });
-
-  it("can clear input value by setting modelValue to empty string (bug fix)", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-
-    await input.setValue("test");
-    expect(input.element.value).toBe("test");
-
-    await wrapper.setProps({ modelValue: "" });
-    expect(input.element.value).toBe("");
-  });
-});

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

@@ -1,127 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import UiInput from "./UiInput.vue";
-
-const meta = {
-  title: "Ui/UiInput",
-  component: UiInput,
-  argTypes: {
-    modelValue: { control: "text" },
-    type: {
-      control: { type: "select" },
-      options: ["text", "number", "time", "date", "password", "datetime-local"],
-    },
-    inputStatus: {
-      control: { type: "select" },
-      options: ["default", "info", "readonly", "warning", "error"],
-    },
-    label: { control: "text" },
-    placeholder: { control: "text" },
-    autofocus: { control: "boolean" },
-    chevron: { control: "boolean" },
-    disabled: { control: "boolean" },
-    isDateTimePicker: { control: "boolean" },
-    autocomplete: { control: "text" },
-    errorMessage: { control: "text" },
-    warningMessage: { control: "text" },
-    isTextarea: { control: "boolean" },
-  },
-  args: {
-    modelValue: "",
-    type: "text",
-    inputStatus: "default",
-    label: "",
-    placeholder: undefined,
-    autofocus: false,
-    chevron: false,
-    disabled: false,
-    isDateTimePicker: false,
-    autocomplete: "on",
-    errorMessage: "",
-    warningMessage: "",
-    isTextarea: false,
-  },
-  render: (args) => ({
-    components: { UiInput },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UiInput
-        v-bind="args"
-        v-model="args.modelValue"
-        @input="input"
-        @update:modelValue="update"
-      />`,
-    methods: {
-      input: action("input"),
-      update: action("update:modelValue"),
-    },
-  }),
-} satisfies Meta<typeof UiInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-export const WithLabel: Story = { args: { label: "My Label" } };
-export const WithPlaceholder: Story = {
-  args: {
-    label: "My Label",
-    placeholder: "Some placeholder text",
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    label: "My Label",
-    readonly: true,
-    modelValue: "Text value",
-  },
-};
-
-export const WithErrorText: Story = {
-  args: {
-    label: "Error!",
-    inputStatus: "error",
-    modelValue: "Text value",
-    errorMessage: "Here goes the Error text",
-  },
-};
-
-export const WithWarningText: Story = {
-  args: {
-    inputStatus: "warning",
-    label: "Warnung!",
-    modelValue: "Text value",
-    warningMessage: "Here goes the warning text",
-  },
-};
-
-export const WithInfoText: Story = {
-  args: {
-    inputStatus: "info",
-    label: "Info!",
-    modelValue: "Text value",
-    infoText: "Here goes the info text",
-  },
-};
-
-export const WithTypeDateTimeLocal: Story = {
-  args: {
-    label: "Aufnahmedatum",
-    placeholder: "Some placeholder text",
-    type: "datetime-local",
-    modelValue: "2018-06-12T19:30",
-    isDateTimePicker: true,
-  },
-};
-
-export const Textarea: Story = {
-  args: {
-    label: "Textarea",
-    placeholder: "Some placeholder text",
-    isTextarea: true,
-  },
-};

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

@@ -1,22 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import UiListItem from "../UiListItem/UiListItem.vue";
-import UiList from "./UiList.vue";
-
-describe("UiList", () => {
-  it("renders with slot content", () => {
-    const wrapper = mount(UiList, {
-      slots: {
-        default: UiListItem,
-      },
-    });
-    expect(wrapper.classes("border")).toBe(true);
-    expect(wrapper.classes("text-base/6")).toBe(true);
-    expect(wrapper.classes("focus:outline-hidden")).toBe(true);
-    expect(wrapper.classes("sm:text-sm/5")).toBe(true);
-
-    const listItem = wrapper.findComponent(UiListItem);
-    expect(listItem.exists()).toBe(true);
-  });
-});

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

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiListItem from "../UiListItem/UiListItem.vue";
-import UiList from "./UiList.vue";
-
-const meta = {
-  title: "Ui/UiList",
-  component: UiList,
-  subcomponents: { UiListItem },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-} satisfies Meta<typeof UiList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem>Test 1</UiListItem>" +
-      "<UiListItem>Test 2</UiListItem>" +
-      "<UiListItem>Test 3</UiListItem>" +
-      "<UiListItem>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};
-
-export const WithCheckboxes: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem checkBoxMenu>Test 1</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 2</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 3</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};
-
-export const WithCheckmark: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem selectable selected>Test 1</UiListItem>" +
-      "<UiListItem selectable selected>Test 2</UiListItem>" +
-      "<UiListItem selectable selected>Test 3</UiListItem>" +
-      "<UiListItem selectable selected>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};