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

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

@@ -0,0 +1,173 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiCheckbox from "./UiCheckbox.vue";
+
+function createWrapper(options?: ComponentMountingOptions<typeof UiCheckbox>) {
+  return mount(UiCheckbox, {
+    ...options,
+  });
+}
+
+describe("UiCheckbox", () => {
+  it("renders attributes on correct element", () => {
+    const wrapper = createWrapper({
+      props: {
+        id: "id",
+        class: "testClass",
+        "data-testid": "testId",
+        name: "name",
+        value: "value",
+        checked: true,
+        required: "required",
+        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("value")).toBe("value");
+    expect(input.element.hasAttribute("checked")).toBe(true);
+    expect(input.element.hasAttribute("required")).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 checkbox with default slot content", () => {
+    const wrapper = mount(UiCheckbox, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Default Slot");
+  });
+
+  it("should click change value", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        checked: false,
+        disabled: false,
+      },
+    });
+    const checkboxInput = wrapper.find("input");
+
+    await checkboxInput.trigger("click");
+    await checkboxInput.trigger("change");
+    expect(checkboxInput.element.checked).toBe(true);
+  });
+
+  it("should be gray", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        color: "gray",
+      },
+    });
+    expect(wrapper.find("span").classes("before:border-gray-800")).toBe(true);
+  });
+
+  it("should be blue", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        color: "blue",
+      },
+    });
+
+    expect(wrapper.find("span").classes("before:border-blue-default")).toBe(
+      true,
+    );
+  });
+
+  it("should be text size medium", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        textSize: "medium",
+      },
+    });
+
+    expect(wrapper.find("span").classes("text-base")).toBe(true);
+  });
+
+  it("should be text size small", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        textSize: "small",
+      },
+    });
+
+    expect(wrapper.find("span").classes("text-sm")).toBe(true);
+  });
+
+  it("should be text size extra small", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        textSize: "extra-small",
+      },
+    });
+
+    expect(wrapper.find("span").classes("text-xs")).toBe(true);
+  });
+
+  it("should be size medium", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        size: "medium",
+      },
+    });
+
+    expect(wrapper.find("input").classes("medium")).toBe(true);
+  });
+
+  it("should be size small", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        size: "small",
+      },
+    });
+
+    expect(wrapper.find("input").classes("small")).toBe(true);
+  });
+
+  it("should not show an error message", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        showError: false,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').exists()).toBe(false);
+  });
+
+  it("should show an error message", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        showError: true,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').exists()).toBe(true);
+  });
+
+  it("should show the correct error message", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        showError: true,
+        errorMessage: "test error",
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').text()).toBe(
+      "test error",
+    );
+  });
+});

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiCheckbox from "./UiCheckbox.vue";
+
+const meta = {
+  title: "Ui/UiCheckbox",
+  component: UiCheckbox,
+  argTypes: {
+    disabled: { control: "boolean" },
+    color: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium"],
+    },
+    textSize: {
+      control: "select",
+      options: ["extra-small", "small", "medium"],
+    },
+    showError: { control: "boolean" },
+    errorMessage: { control: "text" },
+    checked: { control: "boolean" },
+
+    // Slots
+    default: { control: "text" },
+    errors: { control: "text" },
+  },
+  args: {
+    disabled: false,
+    color: "blue",
+    textSize: "medium",
+    size: "medium",
+    showError: false,
+    checked: false,
+    errorMessage: "",
+
+    // Slots
+    default: "Check",
+    errors: "",
+  },
+} satisfies Meta<typeof UiCheckbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiCheckbox v-bind="args">
+        {{ args.default }}
+        <template v-if="args.errors" #errors>
+          {{ args.errors }}
+        </template>
+      </UiCheckbox>
+    `,
+  }),
+};
+
+export const Errors: Story = {
+  args: {
+    errors: "This field is required.",
+  },
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiCheckbox v-bind="args">
+        Check
+        <template #errors>
+          {{ args.errors }}
+        </template>
+      </UiCheckbox>
+    `,
+  }),
+};
+
+export const Group: Story = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="space-y-2">
+        <UiCheckbox v-bind="args" name="languages" value="en" checked>English</UiCheckbox>
+        <UiCheckbox v-bind="args" name="languages" value="de" checked>German</UiCheckbox>
+        <UiCheckbox v-bind="args" name="languages" value="fr">French</UiCheckbox>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,75 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiChip from "./UiChip.vue";
+
+describe("UiChip", () => {
+  it("renders big size by default", () => {
+    const wrapper = mount(UiChip);
+
+    expect(wrapper.classes("h-8")).toBe(true);
+    expect(wrapper.classes("px-2")).toBe(true);
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+  it("renders small size", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        size: "small",
+      },
+    });
+
+    expect(wrapper.classes("h-5")).toBe(true);
+    expect(wrapper.classes("px-1")).toBe(true);
+    expect(wrapper.classes("text-xs")).toBe(true);
+  });
+  it("renders medium size", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        size: "medium",
+      },
+    });
+
+    expect(wrapper.classes("h-6")).toBe(true);
+    expect(wrapper.classes("px-2")).toBe(true);
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+
+  it("renders hidden", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        isVisible: false,
+      },
+    });
+    expect(wrapper.classes("hidden")).toBe(true);
+  });
+
+  it("renders with pointer class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "pointer",
+      },
+    });
+
+    expect(wrapper.classes("cursor-pointer")).toBe(true);
+  });
+
+  it("renders with text class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "text",
+      },
+    });
+
+    expect(wrapper.classes("cursor-text")).toBe(true);
+  });
+
+  it("renders with default class", () => {
+    const wrapper = mount(UiChip, {
+      props: {
+        cursorStyle: "default",
+      },
+    });
+
+    expect(wrapper.classes("cursor-default")).toBe(true);
+  });
+});

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiChip from "./UiChip.vue";
+
+const meta = {
+  title: "UI/UiChip",
+  component: UiChip,
+  argTypes: {
+    isVisible: {
+      control: "boolean",
+    },
+    cursorStyle: {
+      control: "select",
+      options: ["default", "text", "pointer"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "big"],
+    },
+  },
+  args: {
+    isVisible: true,
+    cursorStyle: "text",
+    size: "big",
+  },
+} satisfies Meta<typeof UiChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiChip },
+    setup() {
+      return { args };
+    },
+    template: '<UiChip v-bind="args">Chip</UiChip>',
+  }),
+};

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

@@ -0,0 +1,21 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+
+describe("UiCollapseNavigation", () => {
+  it("should toggle the menu when the button is clicked", async () => {
+    const wrapper = shallowMount(UiCollapseNavigation);
+    const button = wrapper.findComponent({ name: "UiButton" });
+
+    expect(wrapper.vm.openMenu).toBe(true);
+
+    await button.trigger("click");
+
+    expect(wrapper.vm.openMenu).toBe(false);
+
+    await button.trigger("click");
+
+    expect(wrapper.vm.openMenu).toBe(true);
+  });
+});

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiFilterBadgeButton from "../UiFilterBadgeButton/UiFilterBadgeButton.vue";
+import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+
+const meta = {
+  title: "Ui/UiCollapseNavigation",
+  component: UiCollapseNavigation,
+  argTypes: {
+    headline: {
+      control: "text",
+    },
+    hasBorderTop: {
+      control: "boolean",
+    },
+    openAsDefault: {
+      control: "boolean",
+    },
+  },
+  args: {
+    headline: "Gespeicherte Suchen",
+    hasBorderTop: true,
+    openAsDefault: true,
+  },
+  tags: ["deprecated"],
+} satisfies Meta<typeof UiCollapseNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    template: `
+      <UiCollapseNavigation v-bind='args' >
+      <UiFilterBadgeButton label="test eins" />
+      <UiFilterBadgeButton label="test zwei" />
+      <UiFilterBadgeButton label="test drei" />
+      </UiCollapseNavigation>
+    `,
+  }),
+};
+
+export const MultipleMenus: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    template: `
+      <UiCollapseNavigation headline="Menu eins">
+      <UiFilterBadgeButton label="test eins" />
+      <UiFilterBadgeButton label="test zwei" />
+      <UiFilterBadgeButton label="test drei" />
+      </UiCollapseNavigation>
+      <UiCollapseNavigation headline="Menu zwei">
+      <UiFilterBadgeButton label="test vier" />
+      <UiFilterBadgeButton label="test fünf" />
+      <UiFilterBadgeButton label="test sechs" />
+      </UiCollapseNavigation>
+    `,
+  }),
+};

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

@@ -0,0 +1,52 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import { COLORS } from "./lib/colors.js";
+import UiColorPicker from "./UiColorPicker.vue";
+
+describe("UiColorPicker", () => {
+  it("should have a default color selected", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const defaultColor = wrapper.find("#color-e53935");
+    expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
+  });
+
+  it("should have a custom color set from v-model", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "#00c58e",
+      },
+    });
+    const colorInputContainer = wrapper.find(".UiColorPicker-inputWrapper");
+    expect(colorInputContainer.find("#cp-checkmark")).toBeTruthy();
+  });
+
+  it("should switch selected color from available options", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const thirdOption = wrapper.find(`#color-${COLORS[2]}`);
+    thirdOption.trigger("click");
+    expect(thirdOption.find("#cp-checkmark")).toBeTruthy();
+    expect(wrapper.emitted()["update:modelValue"][1]).toEqual([
+      `#${COLORS[2]}`,
+    ]);
+  });
+
+  it("should switch selected color from native color input", () => {
+    const wrapper = mount(UiColorPicker, {
+      props: {
+        modelValue: "",
+      },
+    });
+    const colorInputContainer = wrapper.find(".UiColorPicker-input");
+    colorInputContainer.setValue("#00c58e");
+    expect(wrapper.emitted()["update:modelValue"][1]).toEqual(["#00c58e"]);
+  });
+});

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiLabel from "../UiLabel/UiLabel.vue";
+import UiColorPicker from "./UiColorPicker.vue";
+
+const meta = {
+  title: "Ui/UiColorPicker",
+  component: UiColorPicker,
+  argTypes: {
+    modelValue: {
+      control: "select",
+      options: [
+        "#e53935",
+        "#f50057",
+        "#8e24aa",
+        "#2196f3",
+        "#00acc1",
+        "#00897b",
+        "#00e676",
+        "#ffff00",
+        "#ffb300",
+      ],
+    },
+  },
+  args: {
+    modelValue: "#e53935",
+  },
+} satisfies Meta<typeof UiColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiColorPicker, UiLabel },
+    template: `
+      <UiLabel class="inline-block mb-2 text-xs text-gray-700">Farbe wählen</UiLabel>
+      <UiColorPicker v-model="args.modelValue" />
+    `,
+    setup() {
+      return { args };
+    },
+  }),
+};