@dpa-id-components/dpa-shared-components 16.0.1 → 17.0.1

package/dist/src/components/UiIcon/iconNames.ts

@@ -0,0 +1,187 @@
+export const iconNames = [
+  "activities",
+  "alert",
+  "alert-fill",
+  "alert-octagon",
+  "ai",
+  "apps",
+  "archive",
+  "arrow-left",
+  "arrow-nav-left",
+  "arrow-nav-right",
+  "arrow-up",
+  "arrow-right",
+  "arrow-down",
+  "arrowhead-left",
+  "arrowhead-right",
+  "arrowhead-top",
+  "atmo",
+  "audio",
+  "audio-circled",
+  "audio-filled",
+  "bag",
+  "bell",
+  "bell-fill",
+  "book",
+  "bookmark",
+  "bookmark-fill",
+  "bookmark-outlined",
+  "box",
+  "bulb",
+  "call",
+  "camera",
+  "check",
+  "checklist",
+  "checkmark",
+  "checkmark-double",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "clipboard",
+  "clock",
+  "close",
+  "cloud-save",
+  "code",
+  "collapse",
+  "color-palette",
+  "comment",
+  "comment-fill",
+  "copy",
+  "copy-link",
+  "delete",
+  "download",
+  "dpa-id",
+  "edit",
+  "edit-add",
+  "eil",
+  "emoji",
+  "emoji-add",
+  "envelope",
+  "event",
+  "expand",
+  "external-link",
+  "file",
+  "file-pdf",
+  "filter",
+  "filter-outline",
+  "flag",
+  "flag-fill",
+  "flag-filled",
+  "flag-outline",
+  "flags",
+  "flash",
+  "folder",
+  "folder-add",
+  "folder-fill",
+  "folder-filled",
+  "gallery",
+  "graphic",
+  "graphic-circled",
+  "graphic-filled",
+  "graphics",
+  "grid-1",
+  "grid-2",
+  "grid-3",
+  "grid-4",
+  "grid-6",
+  "grid-9",
+  "grid-masonry",
+  "grid-masonry-9",
+  "help",
+  "home",
+  "image",
+  "image focus point",
+  "impact-high",
+  "impact-low",
+  "impact-medium",
+  "impact-very-high",
+  "impact-very-low",
+  "info",
+  "info-fill",
+  "info-filled",
+  "label",
+  "label-filled",
+  "language",
+  "latest",
+  "lightbulb",
+  "list",
+  "list-search",
+  "lock",
+  "lock-filled",
+  "mail",
+  "map",
+  "map-outline",
+  "menu",
+  "minus",
+  "more-horizontal",
+  "more-vertical",
+  "move",
+  "move-up-down",
+  "navigation",
+  "note",
+  "offline",
+  "package",
+  "paper-plane",
+  "paperplane",
+  "pause",
+  "pause-circle",
+  "pdf",
+  "pen",
+  "pen-check",
+  "people",
+  "phone",
+  "picture",
+  "picture-circled",
+  "picture-filled",
+  "pin",
+  "planning",
+  "play",
+  "play-circle",
+  "play-fill",
+  "plus",
+  "plus-circle",
+  "print",
+  "refresh",
+  "reset",
+  "responsive",
+  "rubix-thema",
+  "save",
+  "saved-search",
+  "saved-search-fill",
+  "search",
+  "settings",
+  "share",
+  "share-alternative",
+  "sidebar",
+  "sidebar-fill",
+  "slack",
+  "slider-config",
+  "spellcheck",
+  "spinner",
+  "standard-view",
+  "star",
+  "star-fill",
+  "star-filled",
+  "stop",
+  "story",
+  "sync",
+  "tasks",
+  "text",
+  "text-circled",
+  "text-filled",
+  "thumbs-down",
+  "thumbs-up",
+  "thumbs-up-double",
+  "topic",
+  "union",
+  "upload",
+  "video",
+  "video overlay",
+  "video-circled",
+  "video-filled",
+  "video-rounded",
+  "view",
+  "view-off",
+  "volume-up",
+] as const;

package/dist/src/components/UiIconButton/README.md

@@ -0,0 +1,38 @@
+# @dpa-shared-components/UiIconButton
+
+## Usage
+
+Color is set by text color:
+
+```html
+<!-- SomeComponent.vue using UiIconButton -->
+<template>
+  <UiIconButtonIcon iconName="alert"></UiIconButtonIcon>
+</template>
+
+<script>
+  import { UiIconButton } from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+iconName: typeof iconNames[number];
+title: string;
+disabled: boolean;
+backgroundColor: "blue" | "none";
+iconColor: "blue" | "white" | "gray";
+size: "small" | "medium" | "large" | "xl";
+
+### Props
+
+| Name              | Type                                                 | Default  | Description                                                                           |
+|-------------------|------------------------------------------------------|----------|---------------------------------------------------------------------------------------|
+| `iconName`        | `UiIconName`                                         | required | Sets the `name`, which determines which svg is used as icon.                          |
+| `size`            | `"small" &#124; "medium" &#124; "large" &#124; "xl"` | `large`  | Sets the `size` attribute of the iconButton.                                          |
+| `backgroundColor` | `"blue" &#124; "none" "gray-hover"`                  | `blue`   | Sets the `color` of the button background including hover, active and disable states. |
+| `iconColor`       | `"blue" &#124; "white" &#124; "gray`                 | `white`  | Sets the `color` of the button icon including hover, active and disable states.       |
+| `disabled`        | `boolean`                                            | `false`  | Disables the button.                                                                  |
+| `title`           | `string`                                             | `""`     | Sets the aria label of the button.                                                    |
+
+### Slots

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

@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import UiIconButton from "./UiIconButton.vue";
+import { mount } from "@vue/test-utils";
+
+describe("UiIconButton", () => {
+  it("should have no background when color none is taken  ", () => {
+    const wrapper = mount(UiIconButton, {
+      props: {
+        iconName: "alert",
+        backgroundColor: "none",
+        iconColor: "gray",
+      },
+    });
+
+    expect(wrapper.classes("bg-blue-default")).toBe(false);
+  });
+
+  it("should render small sized button by default", () => {
+    const wrapper = mount(UiIconButton, {
+      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 = mount(UiIconButton, {
+      props: {
+        iconName: "alert",
+      },
+    });
+
+    await wrapper.trigger("click");
+
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+
+  it("should not emit click event when disabled", async () => {
+    const wrapper = mount(UiIconButton, {
+      props: {
+        iconName: "alert",
+        disabled: true,
+      },
+    });
+
+    await wrapper.trigger("click");
+    expect(wrapper.emitted().click).toBeFalsy();
+  });
+
+  it("should have no hover effect when disabled", async () => {
+    const wrapper = mount(UiIconButton, {
+      props: {
+        iconName: "alert",
+        disabled: true,
+      },
+    });
+    expect(wrapper.classes("disabled:hover:bg-none")).toBe(true);
+  });
+});

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { iconNames } from "../UiIcon/iconNames.js";
+import UiIconButton from "./UiIconButton.vue";
+import { action } from "storybook/actions";
+
+const meta = {
+  title: "Ui/UiIconButton",
+  component: UiIconButton,
+  argTypes: {
+    iconName: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large", "xl"],
+    },
+    backgroundColor: {
+      control: "select",
+      options: ["blue", "none"],
+    },
+    iconColor: {
+      control: "select",
+      options: ["blue", "white", "gray"],
+    },
+  },
+  args: {
+    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/UiIconButton/UiIconButton.vue

@@ -0,0 +1,94 @@
+<template>
+  <button
+    :disabled="disabled"
+    :aria-label="title"
+    class="focus-visible:outline-blue group flex flex-none items-center justify-center rounded-full focus:outline-none"
+    :class="[colorClass, backgroundClass, buttonSizeClass]"
+    type="button"
+    @click="($event) => emit('click', $event)"
+  >
+    <UiIcon
+      class="flex items-center justify-center"
+      :name="iconName"
+      :size="iconSize"
+    />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+const emit = defineEmits<{
+  click: [MouseEvent];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    iconName: UiIconName;
+    title?: string;
+    disabled?: boolean;
+    backgroundColor?: "blue" | "none" | "gray-hover";
+    iconColor?: "blue" | "gray" | "white";
+    size?: "small" | "medium" | "large" | "xl";
+  }>(),
+  {
+    title: "",
+    disabled: false,
+    backgroundColor: "blue",
+    iconColor: "white",
+    size: "small",
+  },
+);
+
+const backgroundColorVariants = {
+  blue: "hover:bg-blue-dark bg-blue-default disabled:bg-gray-300 disabled:hover:bg-none",
+  none: "hover:bg-gray-100 active:bg-blue-default disabled:hover:bg-transparent",
+  "gray-hover": "hover:bg-gray-300 disabled:hover:bg-none",
+};
+
+const iconColorVariants = {
+  blue: "text-blue-default hover:text-blue-dark disabled:text-gray-400 active:text-white",
+  gray: "text-gray-800 hover:text-gray-900 disabled:text-gray-400 active:text-white",
+  white: "text-white disabled:text-gray-400",
+};
+
+const sizeVariants = {
+  small: {
+    iconSize: "small",
+    buttonSize: "h-6 w-6",
+  },
+  medium: {
+    iconSize: "large",
+    buttonSize: "h-8 w-8",
+  },
+  large: {
+    iconSize: "large",
+    buttonSize: "h-12 w-12",
+  },
+  xl: {
+    iconSize: "large",
+    buttonSize: "h-16 w-16",
+  },
+};
+
+const backgroundClass = computed(() => {
+  return backgroundColorVariants[
+    props.backgroundColor as keyof typeof backgroundColorVariants
+  ];
+});
+
+const colorClass = computed(() => {
+  return iconColorVariants[props.iconColor as keyof typeof iconColorVariants];
+});
+
+const buttonSizeClass = computed(() => {
+  return sizeVariants[props.size as keyof typeof sizeVariants].buttonSize;
+});
+
+const iconSize = computed(() => {
+  return sizeVariants[props.size as keyof typeof sizeVariants].iconSize as
+    | "large"
+    | "small";
+});
+</script>

package/dist/src/components/UiInfoContent/README.md

@@ -0,0 +1,43 @@
+# @dpa-id-components/ui-info-content
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiInfoContent -->
+<template>
+    <div class="h-screen w-100">
+      <UiInfoContent 
+          icon-name="search"
+        <template #title>Keine Ergebnisse</template>
+        Leider konnten wir keine Ergebnisse finden.
+        <template #actions>
+          <UiButton>Suche speichern</UiButton>
+          <UiButtio>Suche löschen</UiButtio>
+        </template>
+      </UiInfoContent>
+  </div>
+</template>
+
+<script lang="ts" setup>
+    import UiInfoContent from "@dpa-id-components/ui-info-content";
+</script>
+```
+
+## API
+
+## Props
+
+| Name             | Description                                |
+|------------------|--------------------------------------------|
+| `iconName`       | icon to be displayed                       |
+| `iconBackground` | Optional prop for background color of icon |
+| `iconSize`       | Optional prop for size of icon             |
+| `iconColor`      | Optional prop for color of icon            |
+
+### Slots
+
+| Name      | Description                               |
+|-----------|-------------------------------------------|
+| `title`   | Optional slot for title elements          |
+| `default` | Optional slot for content elements        |
+| `actions` | Optional slot for action related elements |

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+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

@@ -0,0 +1,55 @@
+import UiInfoContent from "./UiInfoContent.vue";
+import { iconNames } from "../UiIcon/iconNames.js";
+import UiButton from "../UiButton/UiButton.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+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: iconNames,
+    },
+    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' :rounded='true'>Suche trotzdem speichern</UiButton>" +
+      "<UiButton color='gray' :rounded='true'>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/UiInfoContent/UiInfoContent.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex h-full flex-col items-center justify-center">
+    <div
+      v-if="iconName"
+      class="rounded-full p-6 shadow-default"
+      :class="[iconBackgroundClass, iconColorClass]"
+      data-testid="info-icon"
+    >
+      <UiIcon :name="iconName" :size="iconSize" data-testid="icon" />
+    </div>
+    <h2
+      v-if="$slots.title"
+      class="pt-4 text-center text-2xl font-medium text-gray-900"
+      data-testid="info-title"
+    >
+      <slot name="title" />
+    </h2>
+    <span
+      v-if="$slots.default"
+      class="font-regular pt-4 text-center text-base text-gray-800"
+      data-testid="info-text"
+    >
+      <slot name="default" />
+    </span>
+    <div
+      v-if="$slots.actions"
+      class="flex flex-none flex-wrap justify-center gap-x-6 gap-y-2 pt-6"
+    >
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+const props = withDefaults(
+  defineProps<{
+    iconBackground?: "white" | "gray" | "green";
+    iconName?: UiIconName | null;
+    iconSize?: "xs" | "small" | "medium" | "large" | "xl";
+    iconColor?: "white" | "gray";
+  }>(),
+  {
+    iconBackground: "white",
+    iconName: null,
+    iconColor: "gray",
+    iconSize: "xl",
+  },
+);
+
+const iconBackgroundClass = computed(() => {
+  if (props.iconBackground === "gray") {
+    return "bg-gray-100";
+  } else if (props.iconBackground === "green") {
+    return "bg-green-neon";
+  }
+  return "bg-white";
+});
+
+const iconColorClass = computed(() => {
+  if (props.iconColor === "gray") {
+    return "text-gray-400";
+  }
+  return "text-white";
+});
+</script>