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

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

@@ -0,0 +1,123 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import DpaMediaItem from "./DpaMediaItem.vue";
+
+describe("DpaMediaItem", () => {
+  it("displays items in the time published slot", () => {
+    const wrapper = mount(DpaMediaItem, {
+      slots: {
+        timePublished: "Time Slot",
+      },
+    });
+    expect(wrapper.text()).toBe("Time Slot");
+  });
+
+  it("displays items in the description slot", () => {
+    const wrapper = mount(DpaMediaItem, {
+      slots: {
+        description: "Description",
+      },
+    });
+    expect(wrapper.text()).toBe("Description");
+  });
+
+  it("displays items in the planning slot", () => {
+    const wrapper = mount(DpaMediaItem, {
+      slots: {
+        planning: "Planning",
+      },
+    });
+    expect(wrapper.text()).toBe("Planning");
+  });
+
+  it("displays items in the textLength slot", () => {
+    const wrapper = mount(DpaMediaItem, {
+      slots: {
+        textLength: "Text Length",
+      },
+    });
+    expect(wrapper.text()).toBe("Text Length");
+  });
+
+  it("changes icon according to the genre", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        genre: "audio",
+      },
+    });
+
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: "audio-circled",
+    });
+  });
+
+  it("changes icon when fulfilled", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        genre: "audio",
+
+        isFulfilled: true,
+      },
+    });
+
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: "audio-filled",
+    });
+  });
+
+  it("is styled differently when fulfilled", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        isFulfilled: true,
+      },
+    });
+
+    const rootDiv = wrapper.find('[data-testid="rootDiv"]');
+    expect(rootDiv.classes("border-gray-300")).toBe(true);
+  });
+
+  it("renders images with the correct source", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        imgSrc: "Source",
+      },
+    });
+
+    expect(wrapper.find("img").attributes().src).toBe("Source");
+  });
+
+  it("renders images with correct alt-text", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        imgSrc: "Source",
+        imgAlt: "Alternative",
+      },
+    });
+
+    expect(wrapper.find("img").attributes().alt).toBe("Thumbnail :Alternative");
+  });
+
+  it("displays the correct image count", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        imgSrc: "Source",
+        imgCount: 2,
+      },
+    });
+
+    expect(wrapper.find("[data-testid='imageCount']").text()).toBe("2");
+  });
+
+  it("is styled differently when disabled", () => {
+    const wrapper = mount(DpaMediaItem, {
+      props: {
+        isFulfilled: true,
+        disabled: true,
+      },
+    });
+
+    const rootDiv = wrapper.find('[data-testid="rootDiv"]');
+    expect(rootDiv.classes("cursor-not-allowed")).toBe(true);
+  });
+});

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

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import DpaMediaItem from "./DpaMediaItem.vue";
+
+const meta = {
+  title: "Ui/DpaMediaItem",
+  component: DpaMediaItem,
+  argTypes: {
+    genre: {
+      control: {
+        type: "select",
+        options: ["audio", "video", "text", "picture", "graphic"],
+      },
+    },
+    isFulfilled: {
+      control: "boolean",
+    },
+    imgSrc: {
+      control: "text",
+    },
+    imgAlt: {
+      control: "text",
+    },
+    imgCount: {
+      control: "number",
+    },
+  },
+  args: {
+    genre: "text",
+    isFulfilled: true,
+    imgSrc: "",
+    imgAlt: "",
+    imgCount: 0,
+  },
+  tags: ["deprecated"],
+} satisfies Meta<typeof DpaMediaItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { DpaMediaItem },
+    template: `
+      <DpaMediaItem v-bind="args" auto-size style="cursor: pointer;">
+      <template #timePublished>15.11.2021 16:41</template>
+      <template #description>News Feature im Basisdienst</template>
+      <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
+      <template #textLength>104 dpa-Zeilen / 7176 Zeichen</template>
+      </DpaMediaItem>
+    `,
+  }),
+};
+
+export const Picture: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { DpaMediaItem },
+    template: `
+      <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
+      <template #timePublished>15.11.2021 16:41</template>
+      <template #description>Aktuelle Fotos</template>
+      <span>Wahl des neuen EKD-Ratsvorsitzes</span>
+      </dpa-media-item>
+    `,
+  }),
+  args: {
+    genre: "picture",
+    isFulfilled: true,
+    imgSrc: `data:image/jpeg;base64,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`,
+    imgAlt: "Wahl des neuen EKD-Ratsvorsitzes",
+    imgCount: 12,
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { DpaMediaItem },
+    template: `
+      <dpa-media-item v-bind="args" auto-size>
+      <template #timePublished>15.11.2021 16:41</template>
+      <template #description>Video-Beitrag</template>
+      <span>Wahl des neuen EKD-Ratsvorsitzes</span>
+      </dpa-media-item>
+    `,
+  }),
+  args: {
+    genre: "video",
+    isFulfilled: true,
+    imgCount: 1,
+    disabled: true,
+  },
+};
+
+export const Planned: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { DpaMediaItem },
+    template: `
+      <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
+      <template #description>Zusammenfassung im Basisdienst</template>
+      <template #planning>bis 16:30</template>
+      <template #textLength>ca. 60 dpa-Zeilen / 4140 Zeichen</template>
+      </dpa-media-item>
+    `,
+  }),
+  args: {
+    isFulfilled: false,
+  },
+};
+
+export const PlannedWithHeadline: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { DpaMediaItem },
+    template: `
+      <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
+      <span>Planned with headline: BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
+      <template #description>Zusammenfassung im Basisdienst</template>
+      <template #planning>bis 16:30</template>
+      <template #textLength>ca. 60 dpa-Zeilen / 4140 Zeichen</template>
+      </dpa-media-item>
+    `,
+  }),
+  args: {
+    isFulfilled: false,
+  },
+};

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

@@ -0,0 +1,39 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiAutocomplete from "./UiAutocomplete.vue";
+
+const wrapper = mount(UiAutocomplete, {
+  props: {
+    value: "",
+    label: "Sprecher/in",
+    placeholder: "",
+    options: ["Olaf Scholz", "Christian Lindner"],
+  },
+});
+describe("UiAutocomplete", () => {
+  it("renders options correctly", async () => {
+    const firstOption = wrapper.findAll('[data-testid="innerText"]')[0];
+    expect(firstOption).toBeTruthy();
+
+    const secondOption = wrapper.findAll('[data-testid="innerText"]')[1];
+    expect(secondOption).toBeTruthy();
+  });
+
+  it("should emit a select event when an option is clicked", async () => {
+    const secondOption = wrapper.findAll('[data-testid="innerText"]')[1];
+
+    await secondOption.trigger("click");
+
+    expect(wrapper.emitted().select[0]).toEqual(["Christian Lindner"]);
+  });
+
+  it("should emit a select event when an option is selected and entered via keyboard events", async () => {
+    const input = wrapper.find("input");
+    await input.trigger("keyup.down");
+    await input.trigger("keyup.down");
+    await input.trigger("keyup.enter");
+
+    expect(wrapper.emitted().select[0]).toEqual(["Christian Lindner"]);
+  });
+});

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+import UiAutocomplete from "./UiAutocomplete.vue";
+
+const meta = {
+  title: "Ui/UiAutocomplete",
+  component: UiAutocomplete,
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    value: { control: "text" },
+    chevron: { control: "boolean" },
+    readonly: { control: "boolean" },
+    options: {
+      control: false,
+    },
+  },
+  args: {
+    label: "Label",
+    placeholder: "Autocomplete",
+    value: "",
+    readonly: false,
+    chevron: false,
+  },
+} satisfies Meta<typeof UiAutocomplete>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiAutocomplete },
+    template:
+      "<UiAutocomplete v-bind='args' @input='input' @select='select'></UiAutocomplete>",
+    methods: { input: action("input"), select: action("select") },
+  }),
+  args: {
+    label: "Sprecher/in",
+    placeholder: "Beispiel: Scholz",
+    value: "",
+    options: ["Olaf Scholz", "Christian Lindner", "Annalena Baerbock"],
+  },
+};

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

@@ -0,0 +1,32 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiBadge from "./UiBadge.vue";
+
+describe("UiBadge", () => {
+  it("renders red color by default", () => {
+    const wrapper = mount(UiBadge);
+    expect(wrapper.classes("bg-rainbow-red")).toBe(true);
+  });
+
+  it("renders white color with different text color", () => {
+    const wrapper = mount(UiBadge, {
+      props: {
+        color: "white",
+      },
+    });
+    expect(wrapper.classes("bg-white")).toBe(true);
+    expect(wrapper.classes("text-black")).toBe(true);
+  });
+
+  it("renders audio icon when iconName prop is set to 'audio'", () => {
+    const wrapper = mount(UiBadge, {
+      props: {
+        iconName: "audio",
+      },
+    });
+    const uiIcon = wrapper.findComponent({ name: "UiIcon" });
+    expect(uiIcon.exists()).toBe(true);
+    expect(uiIcon.props("name")).toBe("audio");
+  });
+});

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import { icons } from "../UiIcon/icons.js";
+import UiBadge from "./UiBadge.vue";
+
+const meta = {
+  title: "Ui/UiBadge",
+  component: UiBadge,
+  argTypes: {
+    text: { control: "text" },
+    color: {
+      control: "select",
+      options: [
+        "red",
+        "red-dark",
+        "orange",
+        "purple",
+        "blue",
+        "white",
+        "gray-300",
+        "gray-600",
+        "gray-800",
+        "black",
+        "green-neon",
+        "green-primary",
+      ],
+    },
+    iconName: {
+      control: "select",
+      options: [null, ...Object.keys(icons)],
+    },
+    mobileTrim: { control: "boolean" },
+    trim: { control: "boolean" },
+    small: { control: "boolean" },
+    screenReaderText: { control: "text" },
+  },
+  args: {
+    text: "Badge Content",
+    color: "red",
+    iconName: null,
+    mobileTrim: false,
+    trim: false,
+    small: false,
+    screenReaderText: "Screenreader Text",
+  },
+} satisfies Meta<typeof UiBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const PlanningItemBadge: Story = {
+  render: (args) => ({
+    components: { UiBadge },
+    setup() {
+      return { args };
+    },
+    template: "<UiBadge v-bind='args'></UiBadge>",
+  }),
+  args: {
+    color: "gray-800",
+    iconName: "audio",
+    text: "3",
+    screenReaderText: "Inhalte geplant",
+    trim: false,
+    mobileTrim: false,
+    small: false,
+  },
+};
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiBadge },
+    template: "<UiBadge v-bind='args'>Badge with slot</UiBadge>",
+  }),
+};

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

@@ -0,0 +1,136 @@
+import { type ComponentMountingOptions, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { createRouter, createWebHistory } from "vue-router";
+
+import UiButton from "./UiButton.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      component: {
+        template: "<RouterView />",
+      },
+    },
+  ],
+});
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiButton> = {},
+) {
+  return mount(UiButton, {
+    global: {
+      plugins: [router],
+    },
+    ...options,
+  });
+}
+
+describe("UiButton", () => {
+  it("renders medium size by default", () => {
+    const wrapper = createWrapper();
+    expect(wrapper.classes("h-10")).toBe(true);
+  });
+
+  it.each(["button", "submit"])("has expected type attribute", (type) => {
+    const wrapper = createWrapper({ attrs: { type } });
+    expect(wrapper.attributes("type")).toBe(type);
+  });
+
+  it.each([
+    ["https://example.org/", "https://example.org/"],
+    [{ path: "/" }, "/"],
+    [undefined, undefined],
+  ])("has expected href attribute", (to, expectedHref) => {
+    const wrapper = createWrapper({ attrs: { to } });
+    expect(wrapper.attributes("href")).toBe(expectedHref);
+  });
+
+  it("renders small size when prop size is 'small'", () => {
+    const wrapper = createWrapper({
+      props: {
+        size: "small",
+      },
+    });
+
+    expect(wrapper.classes("h-8")).toBe(true);
+  });
+
+  it("renders large size when prop size is 'large'", () => {
+    const wrapper = createWrapper({
+      props: {
+        size: "large",
+      },
+    });
+
+    expect(wrapper.classes("h-12")).toBe(true);
+  });
+
+  it("should render blue config as default when no color prop is defined", () => {
+    const wrapper = createWrapper();
+    expect(wrapper.classes("bg-blue-600"));
+    expect(wrapper.classes("text-white"));
+  });
+
+  it("should render gray when gray as color prop is set", () => {
+    const wrapper = createWrapper({
+      props: {
+        color: "gray",
+      },
+    });
+    expect(wrapper.classes("text-white"));
+    expect(wrapper.classes("bg-gray-700"));
+    expect(wrapper.classes("hover:bg-gray-800"));
+  });
+
+  it("should disable button when prop is set", () => {
+    const wrapper = createWrapper({
+      props: {
+        disabled: true,
+      },
+    });
+    expect(wrapper.attributes().disabled).toBeDefined();
+  });
+
+  it("should render <button> tag when to prop is not set", () => {
+    const wrapper = createWrapper();
+    expect(wrapper.element.tagName).toBe("BUTTON");
+    expect(wrapper.attributes("href")).toBe(undefined);
+    expect(wrapper.element.hasAttribute("type")).toBe(true);
+  });
+
+  it("should render <a> tag when to prop is set", () => {
+    const wrapper = createWrapper({
+      props: {
+        to: "https://www.google.de",
+      },
+    });
+    expect(wrapper.element.tagName).toBe("A");
+    expect(wrapper.attributes("href")).toBe("https://www.google.de");
+    expect(wrapper.element.hasAttribute("type")).toBe(false);
+  });
+
+  it("should render icon when icon name is set", () => {
+    const iconName = "alert";
+    const wrapper = createWrapper({
+      props: {
+        iconName,
+      },
+    });
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: iconName,
+    });
+  });
+
+  it("can overwrite display class", () => {
+    const wrapper = createWrapper({
+      props: {
+        class: "flex",
+      },
+    });
+
+    expect(wrapper.classes("inline-flex")).toBe(false);
+    expect(wrapper.classes("flex")).toBe(true);
+  });
+});

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import { icons } from "../UiIcon/icons.js";
+import UiButton from "./UiButton.vue";
+
+const meta = {
+  title: "Ui/UiButton",
+  component: UiButton,
+  argTypes: {
+    iconName: {
+      control: "select",
+      options: Object.keys(icons),
+    },
+    disabled: { control: "boolean" },
+    to: { control: "text" },
+    color: {
+      control: "select",
+      options: [
+        "blue",
+        "primary-green",
+        "transparent",
+        "white",
+        "gray",
+        "light-gray",
+      ],
+    },
+    disabledVariant: {
+      control: "select",
+      options: ["primary", "secondary"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small", "medium", "large"],
+    },
+  },
+  args: {
+    iconName: null,
+    disabled: false,
+    color: "blue",
+    size: "large",
+    disabledVariant: "primary",
+    to: undefined,
+  },
+} satisfies Meta<typeof UiButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiButton },
+    template: "<UiButton v-bind='args'>Submit</UiButton>",
+  }),
+};

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

@@ -0,0 +1,16 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import UiButtonGroup from "./UiButtonGroup.vue";
+
+describe("UiButtonGroup", () => {
+  it("renders UiButtonGroup with default slot content", () => {
+    const wrapper = mount(UiButtonGroup, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Default Slot");
+  });
+});