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

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

@@ -0,0 +1,159 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiDialog from "./UiDialog.vue";
+
+describe("UiDialog", () => {
+  it("renders dialog with default slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.find("main").text()).toBe("Default Slot");
+  });
+
+  it("renders dialog with header slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.find("header").text()).toBe("Header Slot");
+  });
+
+  it("renders dialog with close button if by prop provided", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+      props: {
+        hasCloseButton: true,
+      },
+    });
+
+    expect(wrapper.find("button")).toBeTruthy();
+  });
+
+  it("renders dialog with footer slot content", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+        footer: "Footer Slot",
+      },
+    });
+
+    expect(wrapper.find("footer").text()).toBe("Footer Slot");
+  });
+
+  it("has maximum height set if provided through prop", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+      props: {
+        maxHeight: "100px",
+      },
+    });
+
+    expect(
+      wrapper
+        .find('[data-testid="container"]')
+        .attributes()
+        .style.includes("max-height: 100px;"),
+    ).toBeTruthy();
+  });
+
+  it("has maximum width set if provided through prop", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+      props: {
+        maxWidth: "700px",
+      },
+    });
+
+    expect(
+      wrapper
+        .find('[data-testid="container"]')
+        .attributes()
+        .style.includes("max-width: 700px;"),
+    ).toBeTruthy();
+  });
+
+  it("is scrollable through prop", () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+      props: {
+        scrollable: true,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="container"]').classes()).toContain(
+      "overflow-y-auto",
+    );
+  });
+
+  it("fires 'close' event when background is clicked", async () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        default: "Default Slot",
+      },
+      props: {
+        closeOnClickOutside: true,
+      },
+    });
+    const bg = wrapper.find('[data-testid="background"]');
+
+    await bg.trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
+
+  it("fires 'close' event when close button is clicked", async () => {
+    const wrapper = mount(UiDialog, {
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+      props: {
+        hasCloseButton: true,
+      },
+    });
+    const btn = wrapper.find("button");
+
+    await btn.trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
+
+  it("fires 'close' event when esc key is pressed and prop is set", async () => {
+    // Workaround to make events on `Document` Level work. See: https://test-utils.vuejs.org/api/#attachTo
+
+    document.body.innerHTML = `
+  <div>
+    <div id="app"></div>
+  </div>
+`;
+
+    const wrapper = mount(UiDialog, {
+      attachTo: "#app",
+      slots: {
+        header: "Header Slot",
+        default: "Default Slot",
+      },
+      props: {
+        closeOnEsc: true,
+      },
+    });
+    await wrapper.trigger("keyup.Escape");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,78 @@
+import UiDialog from "./UiDialog.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
+
+const meta = {
+  title: "Ui/UiDialog",
+  component: UiDialog,
+  argTypes: {
+    scrollable: { control: "boolean" },
+    roundedBorder: { control: "boolean" },
+    hasPaddingX: { control: "boolean" },
+    hasPaddingY: { control: "boolean" },
+    hasCloseButton: { control: "boolean" },
+    maxHeight: { control: "text" },
+    maxWidth: { control: "text" },
+    headerClasses: { control: "text" },
+    mainClasses: { control: "text" },
+    closeOnClickOutside: { control: "boolean" },
+    positionTop: {
+      control: "select",
+      options: ["50%", "20%", "40%"],
+    },
+  },
+  args: {
+    scrollable: false,
+    roundedBorder: false,
+    hasPaddingX: true,
+    hasPaddingY: true,
+    hasCloseButton: true,
+    maxHeight: "",
+    maxWidth: "600px",
+    headerClasses: "",
+    mainClasses: "",
+    closeOnClickOutside: true,
+    positionTop: "50%",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiDialog },
+    template:
+      "<UiDialog v-bind='args' @close='close'>" +
+      "<template #header>Dialog header</template>" +
+      "Dialog main" +
+      "<template #footer>Dialog footer</template>" +
+      "</UiDialog>",
+    methods: {
+      close: action("close"),
+    },
+  }),
+} satisfies Meta<typeof UiDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Scrollable: Story = {
+  args: {
+    scrollable: true,
+    maxHeight: "100px",
+  },
+};
+
+export const RoundedBorder: Story = {
+  args: {
+    roundedBorder: true,
+  },
+};
+
+export const CustomClasses: Story = {
+  args: {
+    headerClasses: "bg-transparent",
+    mainClasses:
+      "h-16 flex flex-row justify-center items-center bg-green-night text-white mx-4 rounded-lg",
+  },
+};

package/dist/src/components/UiDialog/UiDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <UiOverlay @close="handleClickAway">
+    <div
+      :class="{
+        'scrolling-touch overflow-y-auto': scrollable,
+        'rounded-[24px]': roundedBorder,
+      }"
+      :style="`
+      max-height: ${maxHeight};
+      max-width: ${maxWidth};
+      top: ${positionTop}
+      `"
+      class="fixed bg-white shadow-lg"
+      data-testid="container"
+      style="
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: calc(100% - 2rem);
+      "
+    >
+      <header
+        v-if="$slots.header"
+        :class="
+          cn(
+            'flex h-12 items-center justify-between bg-gray-100 py-3 pl-4 pr-2 lg:h-14 lg:py-4 lg:pl-6 lg:pr-3',
+            headerClasses,
+            { 'rounded-t-[24px]': roundedBorder },
+          )
+        "
+      >
+        <slot name="header" />
+        <UiIconButton
+          v-if="hasCloseButton"
+          icon-name="close"
+          background-color="none"
+          icon-color="gray"
+          size="medium"
+          class="hover:bg-gray-400 active:bg-gray-500"
+          @click="emit('close')"
+        ></UiIconButton>
+      </header>
+      <main
+        :class="
+          cn(mainClasses, {
+            'px-4 lg:px-6': hasPaddingX,
+            'pb-3 pt-6': hasPaddingY,
+          })
+        "
+      >
+        <slot />
+      </main>
+      <footer
+        v-if="$slots.footer"
+        class="flex justify-between px-4 py-6 lg:px-6"
+      >
+        <slot name="footer" />
+      </footer>
+    </div>
+  </UiOverlay>
+</template>
+<script setup lang="ts">
+import UiOverlay from "../UiOverlay/UiOverlay.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import { cn } from "../../utils/cn.js";
+import { useEventListener } from "@vueuse/core";
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    scrollable?: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    roundedBorder?: boolean;
+    hasPaddingY?: boolean;
+    hasPaddingX?: boolean;
+    headerClasses?: string;
+    mainClasses?: string;
+    hasCloseButton?: boolean;
+    closeOnClickOutside?: boolean;
+    positionTop?: string;
+    closeOnEsc?: boolean;
+  }>(),
+  {
+    scrollable: false,
+    maxWidth: "600px",
+    maxHeight: "",
+    roundedBorder: false,
+    hasPaddingY: true,
+    hasPaddingX: true,
+    headerClasses: "",
+    mainClasses: "",
+    hasCloseButton: false,
+    closeOnClickOutside: true,
+    positionTop: "50%",
+    closeOnEsc: false,
+  },
+);
+
+const handleClickAway = () => {
+  if (props.closeOnClickOutside) {
+    emit("close");
+  }
+};
+const onEscapeKeyUp = (event: KeyboardEvent) => {
+  if (props.closeOnEsc) {
+    if (event.key === "Escape") {
+      emit("close");
+    }
+  }
+};
+
+useEventListener(document, "keyup", (event) => onEscapeKeyUp(event));
+</script>

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

@@ -0,0 +1,31 @@
+# @dpa-shared-components/UiFilterBadge
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiFilterBadge -->
+<template>
+    <UiFilterBadge color="#123" fill="#456">Text</UiFilterBadge>
+</template>
+
+<script>
+    import {UiFilterBadge} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type     | Default | Description                                                                    |
+|---------------|----------|---------|--------------------------------------------------------------------------------|
+| `color`       | `String` | `#333`  | Sets the color of the text.                                                    |
+| `fill`        | `String` | `#000`  | Sets the color of the wrapper and thereby of the icon.                         |
+| `iconMargin`  | `String` | ``      | Sets the margin beweteen the Icon and the default slot.                        |
+| `isClickable` | `Bolean` | false   | If set true, Background color changes when hovered.                            |
+
+### Slots
+
+| Name      | Description                                |
+|-----------|--------------------------------------------|
+| `default` | slot for the rendering the badge's content |

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

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiFilterBadge from "./UiFilterBadge.vue";
+describe("UiFilterBadge", () => {
+  it("renders with colors set", () => {
+    const wrapper = mount(UiFilterBadge, {
+      props: {
+        color: "#000",
+        fill: "#fff",
+      },
+    });
+    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
+    const innerText = wrapper.find('[data-testid="innerText"]');
+    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
+  });
+});

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

@@ -0,0 +1,43 @@
+import UiFilterBadge from "./UiFilterBadge.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiFilterBadge",
+  component: UiFilterBadge,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "medium", "large", "xl"],
+    },
+    color: {
+      control: "color",
+    },
+    fill: {
+      control: "color",
+    },
+    iconIsFilled: {
+      control: "boolean",
+    },
+  },
+  args: {
+    size: "medium",
+    color: "#666",
+    fill: "#666",
+    iconIsFilled: true,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterBadge, UiIconButton },
+    template: "<UiFilterBadge v-bind='args'> slot </UiFilterBadge>",
+  }),
+} satisfies Meta<typeof UiFilterBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithIsOutlined: Story = { args: { iconIsFilled: false } };

package/dist/src/components/UiFilterBadge/UiFilterBadge.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex items-center" :style="{ color: fill }">
+    <UiIcon
+      class="mr-1 shrink-0"
+      :size="size"
+      :name="iconIsFilled ? 'saved-search-fill' : 'saved-search'"
+    />
+    <div :class="textSizeClass" :style="{ color }" data-testid="innerText">
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+const props = withDefaults(
+  defineProps<{
+    color?: string;
+    fill?: string;
+    iconIsFilled?: boolean;
+    size?: "small" | "medium" | "large" | "xl";
+  }>(),
+  {
+    color: "#000",
+    fill: "#333",
+    iconIsFilled: true,
+    size: "large",
+  },
+);
+const textSizeClass = computed(() => {
+  const textSizeClass: Record<string, string> = {
+    small: "text-xs font-normal leading-normal",
+    medium: "text-sm font-medium leading-normal",
+    large: "text-lg font-medium leading-relaxed",
+    xl: "text-2xl font-medium leading-loose",
+  };
+  return textSizeClass[props.size];
+});
+</script>

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

@@ -0,0 +1,38 @@
+# @dpa-shared-components/UiFilterBadgeButton
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiFilterBadgeButton -->
+<template>
+    <UiFilterBadgeButton color="#123" fill="#456" label="Label text"/>
+</template>
+
+<script>
+    import {UiFilterBadgeButton} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name           | Type      | Default | Description                                                                |
+|----------------|-----------|---------|----------------------------------------------------------------------------|
+| `fill`         | `String`  | `#000`  | Sets the color of the wrapper and thereby of the icon.                     |
+| `color`        | `String`  | ``      | Sets the Color of the Label                                                |
+| `label`        | `String`  | ``      | Sets the label of the Button                                               |
+| `iconIsFilled` | `boolean` | ``      | Sets whether the icon is outlined or filled                                |
+| `isActive`     | `boolean` | ``      | Sets whether the background color changes on hover or is permanently added |
+
+### Slots
+
+| Name      | Description                                             |
+|-----------|---------------------------------------------------------|
+| `default` | slot for the rendering additional content i.e. a Button |
+
+### Events
+
+| Name    | Type         | Description                       |
+|---------|--------------|-----------------------------------|
+| `click` | none         |  |

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

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
+
+describe("UiFilterBadgeButton", () => {
+  it("renders with colors set", () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        color: "#000",
+        fill: "#fff",
+        label: "Foo",
+      },
+    });
+    expect(wrapper.attributes().style).toBe("color: rgb(255, 255, 255);");
+    const innerText = wrapper.find('[data-testid="labelText"]');
+    expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
+  });
+
+  it("renders the label correctly", () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        label: "Foo",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Foo");
+  });
+
+  it("should emit click event when clicked", async () => {
+    const wrapper = mount(UiFilterBadgeButton, {
+      props: {
+        label: "Foo",
+      },
+    });
+    const label = wrapper.find('[data-testid="labelText"]');
+    await label.trigger("click");
+
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,54 @@
+import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
+import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import { action } from "storybook/actions";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiFilterBadgeButton",
+  component: UiFilterBadgeButton,
+  argTypes: {
+    color: {
+      control: "color",
+      defaultValue: "#666",
+    },
+    fill: {
+      control: "color",
+      defaultValue: "#666",
+    },
+    iconIsFilled: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    label: {
+      control: "text",
+      defaultValue: "Example Label",
+    },
+    isActive: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+  args: {
+    color: "#666",
+    fill: "#666",
+    iconIsFilled: true,
+    label: "Example Label",
+    isActive: false,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterBadgeButton, UiIconButton },
+    template:
+      "<UiFilterBadgeButton v-bind='args' @click='click'>  <UiIconButton  icon-color='gray' background-color='none' icon-name='more-horizontal'/> </UiFilterBadgeButton>",
+    methods: {
+      click: action("click"),
+    },
+  }),
+} satisfies Meta<typeof UiFilterBadgeButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiFilterBadgeButton/UiFilterBadgeButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="group relative flex items-center px-2 py-1.5"
+    :style="{ color: fill }"
+  >
+    <UiIcon
+      class="mr-5 shrink-0"
+      :size="'small'"
+      :name="iconIsFilled ? 'saved-search-fill' : 'saved-search'"
+    />
+    <div
+      class="absolute inset-0 mt-0 size-full rounded-full opacity-10 group-hover:block"
+      :class="{ hidden: !isActive }"
+      :style="{ backgroundColor: fill }"
+    />
+    <p
+      class="z-0 w-full cursor-pointer text-sm font-medium leading-normal"
+      :style="{ color }"
+      data-testid="labelText"
+      @click.self="emit('click')"
+    >
+      {{ label }}
+    </p>
+    <div class="z-10">
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import UiIcon from "../UiIcon/UiIcon.vue";
+
+withDefaults(
+  defineProps<{
+    color?: string;
+    fill?: string;
+    iconIsFilled?: boolean;
+    label: string;
+    isActive?: boolean;
+  }>(),
+  {
+    color: "#4D4D4D",
+    fill: "#333",
+    iconIsFilled: true,
+    isActive: false,
+  },
+);
+const emit = defineEmits<{
+  click: [];
+}>();
+</script>