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

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiSection from "../UiSection/UiSection.vue";
+import UiSectionDivider from "./UiSectionDivider.vue";
+
+const meta = {
+  title: "Ui/UiSectionDivider",
+  component: UiSectionDivider,
+  subcomponents: { UiSection },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["large", "small"],
+    },
+  },
+  args: {
+    size: "large",
+  },
+  tags: ["deprecated"],
+} satisfies Meta<typeof UiSectionDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSectionDivider },
+    template: "<UiSectionDivider v-bind='args'>Slot</UiSectionDivider>",
+  }),
+};
+
+export const WithSection: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSectionDivider, UiSection },
+    template:
+      "<UiSection>Section 1</UiSection>" +
+      "<UiSectionDivider v-bind='args'></UiSectionDivider>" +
+      "<UiSection>Section 2</UiSection>" +
+      "<UiSectionDivider v-bind='args'>Slot4</UiSectionDivider>" +
+      "<UiSection>Section 3</UiSection>",
+  }),
+};

package/dist/src/components/UiSelect/UIiSelect.spec.ts

@@ -0,0 +1,102 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSelect from "./UiSelect.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiSelect> = {},
+) {
+  return mount(UiSelect, options);
+}
+
+describe("UiSelect", () => {
+  it("renders attributes on correct element", () => {
+    const wrapper = createWrapper({
+      props: {
+        id: "id",
+        class: "class",
+        name: "name",
+        modelValue: "value",
+        placeholder: "placeholder",
+        required: "required",
+        disabled: true,
+        "aria-invalid": "true",
+        "aria-errormessage": "message",
+      },
+    });
+
+    const root = wrapper.find(":first-child");
+    expect(root.element.classList.contains("class")).toBe(true);
+
+    const select = wrapper.find("select");
+    expect(select.element.classList.contains("class")).toBe(false);
+    expect(select.element.getAttribute("id")).toBe("id");
+    expect(select.element.getAttribute("name")).toBe("name");
+    expect(select.element.hasAttribute("required")).toBe(true);
+    expect(select.element.hasAttribute("disabled")).toBe(true);
+    expect(select.element.getAttribute("aria-invalid")).toBe("true");
+    expect(select.element.getAttribute("aria-errormessage")).toBe("message");
+  });
+
+  it("implements working v-model interface", async () => {
+    const wrapper = createWrapper({
+      slots: {
+        default: { template: "Options" },
+        options: {
+          template: `
+            <option value="primary">Primary</option>
+            <option value="secondary">Secondary</option>
+            <option value="tertiary">Tertiary</option>
+          `,
+        },
+      },
+      props: {
+        modelValue: "primary",
+      },
+    });
+    const select = wrapper.find("select");
+    expect(select.element.value).toBe("primary");
+
+    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(undefined);
+
+    await select.setValue("secondary");
+    expect(select.element.value).toBe("secondary");
+    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(["secondary"]);
+
+    await select.setValue("tertiary");
+    expect(select.element.value).toBe("tertiary");
+    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(["tertiary"]);
+  });
+
+  it("works without v-model", async () => {
+    const wrapper = createWrapper({
+      slots: {
+        default: { template: "Options" },
+        options: {
+          template: `
+            <option value="">None</option>
+            <option value="primary">Primary</option>
+            <option value="secondary">Secondary</option>
+          `,
+        },
+      },
+    });
+    const select = wrapper.find("select");
+    expect(select.element.value).toBe("");
+    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(undefined);
+
+    await select.setValue("primary");
+    expect(select.element.value).toBe("primary");
+    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(["primary"]);
+
+    await select.setValue("secondary");
+    expect(select.element.value).toBe("secondary");
+    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
+    expect(lastEvent).toEqual(["secondary"]);
+  });
+});

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

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiSelect from "./UiSelect.vue";
+
+const options: string[] = [
+  "backlog",
+  "to-do",
+  "progress",
+  "code-review",
+  "deployment",
+  "approval",
+  "done",
+];
+
+const meta = {
+  title: "Ui/UiSelect",
+  component: UiSelect,
+  args: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: "status",
+    disabled: false,
+
+    // Props
+    modelValue: "progress",
+
+    // Slots
+    default: "Status",
+    options,
+  },
+  argTypes: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: { control: "text" },
+    disabled: { control: "boolean" },
+
+    // Props
+    modelValue: { control: "select", options },
+  },
+} satisfies Meta<typeof UiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof UiSelect>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSelect },
+    template: `
+      <UiSelect
+        v-model="args.modelValue"
+        v-bind="args"
+      >
+        {{ args.default }}
+
+        <template #options>
+          <option
+            v-for="(option, index) in args.options"
+            :key="index"
+            :value="option"
+          >
+            {{ option }}
+          </option>
+        </template>
+
+        <template v-if="args.errors" #errors>
+          {{ args.errors }}
+        </template>
+      </UiSelect>
+    `,
+  }),
+};
+
+export const WithoutInitialValue: Story = {
+  render: Default.render,
+  args: {
+    ...meta.args,
+
+    // Props
+    modelValue: undefined,
+
+    // Slots
+    options: options.concat(""),
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    errors: "This field is required.",
+  },
+  ...Default,
+};

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

@@ -0,0 +1,58 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiIconSearchInput from "./UiSimpleInput.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiIconSearchInput> = {},
+) {
+  return mount(UiIconSearchInput, {
+    ...options,
+  });
+}
+
+describe("UiSimpleInput", () => {
+  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")).not.toBe("testId");
+
+    const input = wrapper.find("input");
+    expect(input.element.classList.contains("testClass")).toBe(false);
+    expect(input.element.getAttribute("data-testid")).toBe("testId");
+    expect(input.element.getAttribute("id")).toBe("id");
+  });
+
+  it("has initial value", async () => {
+    const wrapper = createWrapper({
+      props: {
+        value: "a",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("a");
+
+    await wrapper.setProps({ value: "b" });
+    expect(input.element.value).toBe("b");
+  });
+
+  it("emits search input event", async () => {
+    const wrapper = createWrapper({
+      props: {
+        placeholder: "Suchen",
+      },
+    });
+
+    await wrapper.find("input").setValue("Hello World");
+    expect(wrapper.emitted("input")).toEqual([["Hello World"]]);
+  });
+});

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+import UiSimpleInput from "./UiSimpleInput.vue";
+
+const meta = {
+  title: "Ui/UiSimpleInput",
+  component: UiSimpleInput,
+  argTypes: {
+    value: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small", "medium", "large", "xl"],
+    },
+    hasIcon: {
+      control: "boolean",
+    },
+    autofocus: {
+      control: "boolean",
+    },
+  },
+  args: {
+    value: "",
+    placeholder: "Suchen",
+    size: "small",
+    hasIcon: true,
+    autofocus: true,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSimpleInput },
+    template: `
+      <div class="p-4 bg-white">
+        <UiSimpleInput v-bind="args" @input="input" />
+      </div>
+    `,
+    methods: {
+      input: action("input"),
+    },
+  }),
+} satisfies Meta<typeof UiSimpleInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,15 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiSkeletonBox from "./UiSkeletonBox.vue";
+
+describe("UiSkeletonBox", () => {
+  const wrapper = mount(UiSkeletonBox);
+
+  it("renders default", () => {
+    expect(wrapper.classes("inline-block")).toBe(true);
+    expect(wrapper.classes("animate-pulse")).toBe(true);
+    expect(wrapper.classes("rounded-sm")).toBe(true);
+    expect(wrapper.classes("bg-gray-200")).toBe(true);
+  });
+});

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiSkeletonBox from "./UiSkeletonBox.vue";
+
+const meta = {
+  title: "Ui/UiSkeletonBox",
+  component: UiSkeletonBox,
+  argTypes: {
+    maxWidth: { type: "number" },
+    minWidth: { type: "number" },
+    dynamicSize: { type: "boolean" },
+  },
+  args: {
+    maxWidth: 100,
+    minWidth: 80,
+    dynamicSize: true,
+  },
+  parameters: {
+    backgrounds: { default: "white" },
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiSkeletonBox },
+    template: "<UiSkeletonBox v-bind='args'></UiSkeletonBox>",
+  }),
+} satisfies Meta<typeof UiSkeletonBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,63 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiSnackbar from "./UiSnackbar.vue";
+
+describe("UiSnackbar", () => {
+  it("displays a text message via the default slot", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from snackbar",
+      },
+      props: {
+        isShown: true,
+      },
+    });
+
+    expect(wrapper.text()).toBe("Hello, from snackbar");
+  });
+
+  it("Is not visible when props don't say so", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from snackbar",
+      },
+      props: {
+        isShown: false,
+      },
+    });
+
+    expect(wrapper.find("div").exists()).toBe(false);
+  });
+
+  it("displays an SVG icon via the icon slot", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from snackbar",
+        iconName: "close",
+      },
+      props: {
+        isShown: true,
+      },
+    });
+
+    expect(wrapper.findComponent(UiIcon)).toBeTruthy();
+  });
+
+  it("has an action button via the action slot", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from snackbar",
+        action: "click me",
+      },
+      props: {
+        isShown: true,
+      },
+    });
+    const actionButton = wrapper.find("button");
+    actionButton.trigger("click");
+
+    expect(wrapper.emitted()["action-click"]).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+import { ref } from "vue";
+
+import { icons } from "../UiIcon/icons.js";
+import UiSnackbar from "./UiSnackbar.vue";
+
+const meta = {
+  title: "Ui/UiSnackbar",
+  component: UiSnackbar,
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["left", "right"],
+    },
+    isShown: {
+      control: "boolean",
+    },
+    iconName: {
+      control: "select",
+      options: [null, ...Object.keys(icons)],
+    },
+    iconSize: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
+    type: {
+      control: "select",
+      options: ["info", "error"],
+    },
+  },
+  args: {
+    position: "left",
+    isShown: true,
+    iconName: null,
+    iconSize: "medium",
+    type: "info",
+  },
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(args.isShown);
+
+      const toggle = () => {
+        isVisible.value = !isVisible.value;
+      };
+      return { args, isVisible, toggle };
+    },
+    components: { UiSnackbar },
+    template: `
+      <div>
+      <button @click="toggle">toggle snackbar</button>
+      <UiSnackbar v-bind="args" :is-shown="isVisible" @action-click="action" @input="input">
+        This is a message
+        <template #action>Action</template>
+      </UiSnackbar>
+      </div>
+    `,
+    methods: { input: action("input"), action: action("action") },
+  }),
+} satisfies Meta<typeof UiSnackbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,30 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiSpinner from "./UiSpinner.vue";
+
+describe("UiSpinner", () => {
+  const wrapper = mount(UiSpinner, {});
+
+  it("renders default", () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findComponent(UiIcon).exists()).toBe(true);
+    expect(wrapper.classes("text-blue-default")).toBe(true);
+  });
+
+  it("renders bubbles variant", async () => {
+    await wrapper.setProps({ variant: "bubbles" });
+    expect(wrapper.find("div").exists()).toBe(true);
+  });
+
+  it("renders green color class", async () => {
+    await wrapper.setProps({ color: "green" });
+    expect(wrapper.classes("text-green-primary")).toBe(true);
+  });
+
+  it("renders white color class", async () => {
+    await wrapper.setProps({ color: "white" });
+    expect(wrapper.classes("text-white")).toBe(true);
+  });
+});

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import UiSpinner from "./UiSpinner.vue";
+
+const meta = {
+  title: "UI/UiSpinner",
+  component: UiSpinner,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["spinner", "bubbles"],
+    },
+    color: {
+      control: { type: "select" },
+      options: ["blue", "white", "green"],
+    },
+  },
+  args: {
+    variant: "spinner",
+    color: "blue",
+  },
+  render: (args) => ({
+    components: { UiSpinner },
+    setup() {
+      return { args };
+    },
+    template: '<UiSpinner v-bind="args" ></UiSpinner>',
+  }),
+} satisfies Meta<typeof UiSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithGreenSpinner: Story = {
+  args: {
+    variant: "spinner",
+    color: "green",
+  },
+};
+
+export const WithBlueBubbles: Story = {
+  args: {
+    variant: "bubbles",
+    color: "blue",
+  },
+};