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

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiList from "../UiList/UiList.vue";
+import UiListItem from "../UiListItem/UiListItem.vue";
+import UiOverlayMenu from "./UiOverlayMenu.vue";
+
+const meta = {
+  title: "Ui/UiOverlayMenu",
+  component: UiOverlayMenu,
+  subcomponents: { UiList, UiListItem },
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+    },
+  },
+  args: {
+    isOpen: true,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiOverlayMenu, UiList, UiListItem },
+    template:
+      "<UiOverlayMenu v-bind='args'>" +
+      "<UiList>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
+      "</UiList>" +
+      "</UiOverlayMenu>",
+  }),
+  tags: ["deprecated"],
+} satisfies Meta<typeof UiOverlayMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,66 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiRadioInput from "./UiRadioInputGroup.vue";
+
+describe("UiRadioInput", () => {
+  it("renders UiRadioInputGroup with props content", () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        options: [
+          {
+            label: "default name",
+            selected: false,
+            value: "default value",
+          },
+        ],
+        groupName: "Options",
+      },
+    });
+    expect(wrapper.text()).toBe("default name");
+  });
+
+  it("should click change value", async () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        modelValue: "default value",
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          {
+            label: "default name",
+            selected: true,
+            value: "default value",
+          },
+          {
+            label: "second option",
+            selected: false,
+            value: "second option",
+          },
+        ],
+        groupName: "Options",
+      },
+    });
+
+    await wrapper.find("input[value='second option']").setValue(true);
+    expect(wrapper.props("modelValue")).toBe("second option");
+  });
+
+  it("renders attributes on correct element", () => {
+    const wrapper = mount(UiRadioInput, {
+      props: {
+        options: [],
+        groupName: "",
+        id: "id",
+        class: "testClass gap-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("gap-4")).toBe(false);
+    expect(root.element.classList.contains("gap-8")).toBe(true);
+    expect(root.attributes("data-testid")).toBe("testId");
+  });
+});

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+import UiRadioInputGroup from "./UiRadioInputGroup.vue";
+
+const meta = {
+  title: "Ui/UiRadioInputGroup",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
+  component: UiRadioInputGroup,
+  argTypes: {
+    options: {
+      control: "object",
+    },
+    variant: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium"],
+    },
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+    disabled: { control: "boolean" },
+    groupName: { control: "text" },
+    class: { control: "text" },
+  },
+  args: {
+    options: [
+      {
+        label: "Option A",
+        value: "value 1",
+        selected: true,
+      },
+      {
+        label: "Option B",
+        value: "value 2",
+        selected: false,
+      },
+      {
+        label: "Option C",
+        value: "value 3",
+        selected: false,
+      },
+    ],
+    variant: "blue",
+    size: "medium",
+    direction: "horizontal",
+    disabled: false,
+    groupName: "default",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiRadioInputGroup },
+    template:
+      "<UiRadioInputGroup v-bind='args' @input='input'></UiRadioInputGroup>",
+    methods: { input: action("input") },
+  }),
+  tags: ["deprecated"],
+} satisfies Meta<typeof UiRadioInputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+// TODO: Remove this again once possible.
+// @ts-ignore Bogus TypeScript error
+export const Default: Story = {};

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

@@ -0,0 +1,82 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSearchBar from "./UiSearchBar.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiSearchBar> = {},
+) {
+  return mount(UiSearchBar, {
+    ...options,
+  });
+}
+
+describe("UiSearchBar", () => {
+  it("renders the placeholder", () => {
+    const placeholder = "Example query";
+    const wrapper = createWrapper({ props: { placeholder } });
+
+    const textInput = wrapper.find("input");
+    expect(textInput.element.placeholder).toBe(placeholder);
+  });
+
+  it("renders the value", async () => {
+    const wrapper = createWrapper();
+
+    const searchQuery = "Ein Suchbegriff";
+    const textInput = wrapper.find("input");
+    await textInput.setValue(searchQuery);
+    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
+    expect(textInput.element.value).toBe(searchQuery);
+  });
+
+  it("emits focus event", async () => {
+    const wrapper = createWrapper();
+
+    const textInput = wrapper.find("input");
+    await textInput.trigger("focus");
+    expect(wrapper.emitted("focus")).toBeTruthy();
+  });
+
+  it("emits blur event", async () => {
+    const wrapper = createWrapper();
+
+    const textInput = wrapper.find("input");
+    await textInput.trigger("blur");
+    expect(wrapper.emitted("blur")).toBeTruthy();
+  });
+
+  it("renders slots", () => {
+    const wrapper = createWrapper({
+      props: {
+        modelValue: "Test",
+        placeholder: "Suchen",
+        backgroundColor: "gray",
+        hiddenFilterRules: 0,
+        isFilterChipEditable: true,
+      },
+      slots: {
+        searchCriteriaButton: "<button>+ 1 Suchkriterium</button>",
+        extendedSearchButton: "<button>Erweiterte Suche</button>",
+        nonEditableChips: "<p>Favorite</p>",
+        editableChips: "<p>Hamburg</p>",
+      },
+    });
+    expect(wrapper.html()).toContain("<button>+ 1 Suchkriterium</button>");
+    expect(wrapper.html()).toContain("<button>Erweiterte Suche</button>");
+    expect(wrapper.html()).toContain("<p>Favorite</p>");
+    expect(wrapper.html()).toContain("<p>Hamburg</p>");
+  });
+
+  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/UiSearchBar/UiSearchBar.stories.ts

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiButton from "../UiButton/UiButton.vue";
+import UiChip from "../UiChip/UiChip.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiSearchBar from "./UiSearchBar.vue";
+
+type PropsAndStoryProps = InstanceType<typeof UiSearchBar> & {
+  hiddenFilterRules: number;
+};
+
+const meta = {
+  title: "Ui/UiSearchBar",
+  component: UiSearchBar,
+  argTypes: {
+    modelValue: { control: "text" },
+    placeholder: { control: "text" },
+    backgroundColor: {
+      control: "select",
+      options: ["gray", "white"],
+    },
+    hiddenFilterRules: { control: "number" },
+    isFilterChipEditable: { control: "boolean" },
+    hasShadow: { control: "boolean" },
+    slotClass: { control: "text" },
+    resetButtonWrapperClass: { control: "text" },
+  },
+  args: {
+    modelValue: "",
+    placeholder: "Suchen",
+    backgroundColor: "gray",
+    hiddenFilterRules: 0,
+    isFilterChipEditable: true,
+    hasShadow: false,
+    slotClass: "",
+    resetButtonWrapperClass: "",
+  },
+} satisfies Meta<PropsAndStoryProps>;
+
+export default meta;
+type Story = StoryObj<PropsAndStoryProps>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSearchBar },
+    setup() {
+      return { args };
+    },
+    template:
+      "<div class='bg-white h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
+  }),
+};
+
+export const WithActionButtons: Story = {
+  render: (args) => ({
+    components: {
+      UiSearchBar,
+      UiButton,
+      UiIconButton,
+      UiIcon,
+    },
+    setup() {
+      const getLabelText = (num: number) => {
+        if (!num) {
+          return "";
+        }
+        if (num > 1) {
+          return `+ ${num} Suchkriterien`;
+        }
+        return "+ 1 Suchkriterium";
+      };
+      const criteriaLabelText = () => {
+        return getLabelText(args.hiddenFilterRules);
+      };
+      return { args, criteriaLabelText };
+    },
+    template: `
+      <div class="bg-white h-24 flex items-center p-4 w-full">
+      <UiSearchBar v-bind="args">
+        <template #searchCriteriaButton>
+          <div class="mr-2">
+            <span
+              v-if="criteriaLabelText"
+              class="
+                self-center
+                mr-1
+                text-xs
+                font-medium
+                whitespace-no-wrap
+                cursor-pointer
+                text-blue
+                hover:text-blue-dark
+              "
+            >
+              {{ criteriaLabelText() }}
+            </span>
+          </div>
+        </template>
+        <template #extendedSearchButton>
+          <UiButton
+            size="xs"
+            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
+            color="transparent"
+
+          >
+            Erweiterte Suche
+            <UiIcon
+              name="chevron-down"
+              size="medium"
+            />
+          </UiButton>
+        </template>
+        <template #resetButton>
+          <div class="mx-2">
+            <div
+              class="
+                flex
+                items-center
+                justify-center
+                flex-none
+                h-full
+                bg-gray-100
+              "
+            >
+              <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="large" />
+            </div>
+          </div>
+        </template>
+        <template #searchButton>
+          <div class="flex items-center justify-center">
+            <div class="w-2 h-8 border-l border-gray-300"></div>
+            <UiIconButton icon-name="search" background-color="none" icon-color="gray" size="large" />
+          </div>
+        </template>
+      </UiSearchBar>
+      </div>`,
+  }),
+};
+
+export const WithChips: Story = {
+  render: (args) => ({
+    components: {
+      UiSearchBar,
+      UiButton,
+      UiIconButton,
+      UiIcon,
+      UiChip,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="bg-white h-24 flex items-center p-4 w-full">
+      <UiSearchBar v-bind="args">
+        <template #nonEditableChips>
+          <UiChip v-if="!args.isFilterChipEditable" class="ml-2">
+            <UiIcon
+              name="pin"
+              size="small"
+              class="mr-2"
+            />
+            <span class="text-small">Nur Top-Einträge</span>
+            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
+                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
+          </UiChip>
+        </template>
+        <template #editableChips>
+          <UiChip v-if="args.value" class="ml-2">
+            <span class="text-small">{{ args.value }}</span>
+            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
+                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
+          </UiChip>
+        </template>
+        <template #extendedSearchButton>
+          <UiButton
+            size="xs"
+            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
+            color="transparent"
+          >
+            Erweiterte Suche
+            <UiIcon
+              name="chevron-down"
+              size="medium"
+            />
+          </UiButton>
+        </template>
+      </UiSearchBar>
+      </div>`,
+  }),
+};

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

@@ -0,0 +1,45 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSearchInput from "./UiSearchInput.vue";
+
+describe("UiSearchInput", () => {
+  const wrapper = mount(UiSearchInput, {
+    props: {
+      hasAddEntryOption: true,
+      placeholder: "Default placeholder",
+      modelValue: [""],
+    },
+  });
+
+  it("displays and emits entries", async () => {
+    const searchQuery = "Suchbegriff";
+    const textInput = wrapper.find("input");
+    await textInput.setValue(searchQuery);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(textInput.element.value).toBe(searchQuery);
+  });
+
+  it("adds searchbar row when addRow button is clicked", async () => {
+    const searchQuery = "Suchbegriff";
+    const textInput = wrapper.find("input");
+    await textInput.setValue(searchQuery);
+    await textInput.trigger("input");
+    const addRowButton = wrapper.find("button");
+    await addRowButton.trigger("click");
+    expect(wrapper.findAll("input")).toHaveLength(2);
+  });
+
+  it("deletes second row when there is no text in the searchbar", async () => {
+    const searchQuery = "Suchbegriff";
+    const textInput = wrapper.find("input");
+    await textInput.setValue(searchQuery);
+    await textInput.trigger("input");
+    const addRowButton = wrapper.find("button");
+    await addRowButton.trigger("click");
+
+    const [, secondInput] = wrapper.findAll("input");
+    await secondInput.trigger("keyup.delete");
+    expect(wrapper.findAll("input")).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+import UiSearchInput from "./UiSearchInput.vue";
+
+const meta = {
+  title: "Ui/UiSearchInput",
+  component: UiSearchInput,
+  argTypes: {
+    hasAddEntryOption: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    modelValue: {
+      control: {
+        type: "object",
+      },
+    },
+    placeholder: {
+      control: "text",
+    },
+  },
+  args: {
+    hasAddEntryOption: false,
+    label: "",
+    modelValue: [""],
+    placeholder: "Default placeholder",
+  },
+  parameters: {
+    backgrounds: { default: "white" },
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSearchInput },
+    template:
+      "<UiSearchInput v-bind='args' :model-value='args.modelValue' @update:model-value='action' />",
+    methods: { action: action("update:modelValue") },
+  }),
+} satisfies Meta<typeof UiSearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithLabel = {
+  args: {
+    label: "Default label",
+  },
+};
+
+export const MultipleInputs = {
+  args: {
+    label: "Default label",
+    hasAddEntryOption: true,
+  },
+};

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

@@ -0,0 +1,49 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSection from "./UiSection.vue";
+
+describe("UiSection", () => {
+  const wrapper = mount(UiSection, {
+    slots: {
+      default: "Slot text",
+    },
+  });
+
+  it("renders with slot content", () => {
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.text()).toBe("Slot text");
+  });
+
+  it("renders with border classes", async () => {
+    await wrapper.setProps({
+      borderTop: true,
+      borderBottom: true,
+    });
+    expect(wrapper.classes("border-t")).toBe(true);
+    expect(wrapper.classes("border-b")).toBe(true);
+  });
+
+  it("renders with padding classes", async () => {
+    await wrapper.setProps({
+      verticalPadding: "small",
+    });
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.classes("lg:py-12")).toBe(true);
+    expect(inner.classes("pt-8")).toBe(true);
+    expect(inner.classes("pb-12")).toBe(true);
+  });
+
+  it("renders with size classes", async () => {
+    await wrapper.setProps({
+      size: "small",
+    });
+    const inner = wrapper.find('[data-testid="inner"]');
+
+    expect(inner.classes("w-full")).toBe(true);
+    expect(inner.classes("lg:mx-auto")).toBe(true);
+    expect(inner.classes("lg:w-2/3")).toBe(true);
+  });
+});

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiSection from "./UiSection.vue";
+
+const meta = {
+  title: "Ui/UiSection",
+  component: UiSection,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["wide", "small"],
+    },
+    verticalPadding: {
+      control: "select",
+      options: ["small", "large", "none"],
+    },
+    borderTop: {
+      control: "boolean",
+    },
+    borderBottom: {
+      control: "boolean",
+    },
+  },
+  args: {
+    size: "small",
+    verticalPadding: "large",
+    borderTop: false,
+    borderBottom: false,
+  },
+  parameters: {
+    backgrounds: { default: "gray-100" },
+  },
+  tags: ["deprecated"],
+} satisfies Meta<typeof UiSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSection },
+    template: "<UiSection v-bind='args'>Slot</UiSection>",
+  }),
+};
+
+export const Multiple: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSection },
+    template:
+      "<UiSection v-bind='args'>Slot1</UiSection>" +
+      "<UiSection v-bind='args'>Slot2</UiSection>" +
+      "<UiSection v-bind='args'>Slot3</UiSection>" +
+      "<UiSection v-bind='args'>Slot4</UiSection>",
+  }),
+};

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

@@ -0,0 +1,19 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSectionDivider from "./UiSectionDivider.vue";
+
+describe("UiSectionDivider", () => {
+  const wrapper = mount(UiSectionDivider);
+
+  it("renders default size class", () => {
+    expect(wrapper.classes("h-4")).toBe(true);
+  });
+
+  it("renders small size class", async () => {
+    await wrapper.setProps({
+      size: "small",
+    });
+    expect(wrapper.classes("h-px")).toBe(true);
+  });
+});