@dpa-id-components/dpa-shared-components 16.0.0 → 17.0.0

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

@@ -0,0 +1,35 @@
+# @dpa-shared-components/UiFilterButton
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiFilterBadge -->
+<template>
+  <UiFilterButton title="Filter" @click="doSomething" />
+</template>
+
+<script>
+  import { UiFilterButton } from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type                                                                                | Default           | Description                                                                           |
+|---------------|-------------------------------------------------------------------------------------|-------------------|---------------------------------------------------------------------------------------|
+| `title`       | `String`                                                                            | ``                | Sets the label of the Button.                                                         |
+| `variant`     | `"white-rounded" &#124; "blue-rounded" &#124; "transparent-rounded" &#124; "blank"` | `"white-rounded"` | Visual variants of the button                                                         |
+| `chevronIcon` | `UiIconName`                                                                        | `"chevron-down"`  | If the Icon should change when the Component is in dirty state put in Icon name here. |
+| `iconLeft`    | `UiIconName`                                                                        | null              | If you want an icon left of the title put in icon name here.                          |
+| `rotateIcon`  | `Boolean`                                                                           | `false`           | Rotates the icon.                                                                     |
+| `iconSize`    | `"small" &#124; "medium" &#124; "large"`                                            | `"small"`         | Icon size.                                                                            |
+| `disabled`    | `Boolean`                                                                           | `false`           | Disables the button.                                                                  |
+| `active`      | `Boolean`                                                                           | `false`           | Sets active style for the button.                                                     |
+
+### Events
+
+| Name    | Type    | Description |
+|---------|---------|-------------|
+| `click` | none    |  |

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

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { mount, type ComponentMountingOptions } from "@vue/test-utils";
+
+import UiFilterButton from "./UiFilterButton.vue";
+
+function createWrapper(
+  options: ComponentMountingOptions<typeof UiFilterButton> = {},
+) {
+  return mount(UiFilterButton, {
+    ...options,
+    props: {
+      title: "Foo Bar",
+      ...options.props,
+    },
+  });
+}
+
+describe("UiFilterBadge", () => {
+  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")).toBe("testId");
+    expect(root.element.getAttribute("id")).toBe("id");
+
+    const button = wrapper.find('[data-testid="filter-button"]');
+    expect(button.element.classList.contains("testClass")).toBe(false);
+    expect(button.element.getAttribute("data-testid")).not.toBe("testId");
+  });
+
+  it("renders with given Title", () => {
+    const wrapper = createWrapper();
+    expect(wrapper.text()).toBe("Foo Bar");
+  });
+
+  it("changes colour according to prop change", () => {
+    const wrapper = createWrapper({
+      props: {
+        variant: "blue-rounded",
+      },
+    });
+    expect(wrapper.classes("bg-blue-default")).toBe(true);
+  });
+
+  it("emits click event", async () => {
+    const wrapper = createWrapper();
+    const button = wrapper.find('[data-testid="filter-button"]');
+    await button.trigger("click");
+
+    const lastEvent = (wrapper.emitted("click") ?? []).at(-1);
+    expect(lastEvent).toEqual([]);
+  });
+
+  it("renders attributes on correct element", () => {
+    const wrapper = mount(UiFilterButton, {
+      props: {
+        options: [],
+        groupName: "",
+        id: "id",
+        class: "testClass pr-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("pr-4")).toBe(false);
+    expect(root.element.classList.contains("pr-8")).toBe(true);
+    expect(root.attributes("data-testid")).toBe("testId");
+  });
+});

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

@@ -0,0 +1,82 @@
+import UiFilterButton from "./UiFilterButton.vue";
+import { iconNames } from "../UiIcon/iconNames.js";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiFilterButton",
+  component: UiFilterButton,
+  argTypes: {
+    title: {
+      control: "text",
+    },
+    variant: {
+      control: "select",
+      options: [
+        "blue-rounded",
+        "white-rounded",
+        "blank",
+        "blue-blank",
+        "transparent-rounded",
+      ],
+    },
+    chevronIcon: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    rotateIcon: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    active: {
+      control: "boolean",
+    },
+    hasIcon: {
+      control: "boolean",
+    },
+    iconLeft: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    iconSize: {
+      control: "select",
+      options: ["xs", "small", "large"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small"],
+    },
+    iconLeftClass: {
+      control: "text",
+    },
+    iconRightClass: {
+      control: "text",
+    },
+  },
+  args: {
+    title: "Filter",
+    variant: "white-rounded",
+    chevronIcon: "chevron-down",
+    rotateIcon: false,
+    disabled: false,
+    active: false,
+    hasIcon: true,
+    iconSize: "xs",
+    iconLeft: null,
+    iconLeftClass: undefined,
+    iconRightClass: undefined,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiFilterButton },
+    template: "<UiFilterButton v-bind='args'>Slot</UiFilterButton>",
+  }),
+} satisfies Meta<typeof UiFilterButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiFilterButton/UiFilterButton.vue

@@ -0,0 +1,158 @@
+<template>
+  <div
+    :class="
+      cn(
+        'w-full pl-3 pr-4',
+        $attrs.class as HTMLAttributes['class'],
+        'flex max-w-max cursor-pointer select-none items-center rounded-full ',
+        variantClasses,
+        props.size === 'xs' ? 'py-0.5' : 'py-1.5',
+      )
+    "
+    @click="onClick"
+  >
+    <button
+      class="focus-visible:outline-blue w-full rounded-full focus:outline-none"
+      :disabled="disabled"
+      type="button"
+      data-testid="filter-button"
+    >
+      <span
+        data-testid="filterbutton-title"
+        class="flex w-full items-center justify-between text-sm font-medium leading-normal"
+        :class="`${textColorClass} ${
+          props.size === 'xs' ? 'text-xs' : 'text-sm'
+        }`"
+      >
+        <UiIcon
+          v-if="hasIcon && iconLeft"
+          :name="iconLeft"
+          :size="iconSize"
+          class="flex-none"
+          :class="
+            cn(
+              {
+                'mr-2': title.length !== 0,
+              },
+              iconLeftClass,
+            )
+          "
+        />
+        <span class="w-full grow truncate">
+          {{ title }}
+        </span>
+        <UiIcon
+          v-if="hasIcon"
+          :name="chevronIcon"
+          :class="
+            cn(
+              {
+                'origin-center rotate-180': rotateIcon,
+                'ml-2': title.length !== 0,
+              },
+              iconRightClass,
+            )
+          "
+          :size="iconSize"
+          class="flex-none"
+        />
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+import { cn } from "../../utils/cn.js";
+import type { ClassValue } from "clsx";
+import { computed, type HTMLAttributes } from "vue";
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    variant?:
+      | "blue-rounded"
+      | "white-rounded"
+      | "transparent-rounded"
+      | "blank"
+      | "blue-blank";
+    chevronIcon?: UiIconName;
+    rotateIcon?: boolean;
+    iconSize?: "xs" | "small" | "large";
+    size?: "xs" | "small";
+    disabled?: boolean;
+    active?: boolean;
+    hasIcon?: boolean;
+    iconLeft?: UiIconName | null;
+    iconLeftClass?: ClassValue | ClassValue[];
+    iconRightClass?: ClassValue | ClassValue[];
+  }>(),
+  {
+    title: "",
+    variant: "white-rounded",
+    chevronIcon: "chevron-down",
+    rotateIcon: false,
+    iconSize: "xs",
+    size: "small",
+    disabled: false,
+    active: false,
+    hasIcon: true,
+    iconLeft: null,
+    iconLeftClass: undefined,
+    iconRightClass: undefined,
+  },
+);
+
+const variants = {
+  "blue-rounded": "bg-blue-default hover:bg-blue-dark",
+  "white-rounded": "bg-white hover:border-gray-700 border border-gray-400",
+  blank: "bg-transparent hover:bg-gray-300",
+  "blue-blank": "bg-transparent hover:bg-gray-300",
+  "transparent-rounded":
+    "bg-transparent border border-gray-400 hover:border-gray-700",
+};
+
+const textColors = {
+  "blue-rounded": "text-white",
+  "white-rounded": "text-gray-800 hover:text-gray-900",
+  blank: "text-gray-800 hover:text-gray-900",
+  "blue-blank": "text-blue-default hover:text-blue-dark",
+  "transparent-rounded": "text-gray-800",
+};
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    if (props.variant === "blank") {
+      return "border border-transparent";
+    }
+    return "bg-white border border-gray-400";
+  }
+  if (props.active) {
+    if (variants[props.variant as keyof typeof variants].includes("border")) {
+      return "bg-blue-default hover:bg-blue-dark border border-blue-default hover:border-blue-dark";
+    }
+    return "bg-blue-default hover:bg-blue-dark";
+  }
+  return variants[props.variant as keyof typeof variants];
+});
+
+const textColorClass = computed(() => {
+  if (props.disabled) {
+    return "text-gray-400";
+  }
+  if (props.active) {
+    return "text-white";
+  }
+  return textColors[props.variant as keyof typeof textColors];
+});
+
+const onClick = () => {
+  if (!props.disabled) {
+    emit("click");
+  }
+};
+</script>

package/dist/src/components/UiIcon/IconOverview.stories.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="grid grid-cols-6 gap-8">
+    <div
+      v-for="icon in iconNames"
+      :key="icon"
+      class="h-25 content-center border-2 p-2 text-center"
+    >
+      <h2 class="mb-2">{{ icon }}</h2>
+      <UiIcon :name="icon" :size="props.size"></UiIcon>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import UiIcon from "./UiIcon.vue";
+import { iconNames } from "./iconNames.js";
+
+const props = withDefaults(
+  defineProps<{
+    size: "xs" | "small" | "medium" | "large" | "xl";
+  }>(),
+  {},
+);
+</script>

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

@@ -0,0 +1,32 @@
+# @dpa-shared-components/UiIcon
+
+## Usage
+
+Color is set by text color:
+
+```html
+<!-- SomeComponent.vue using UiIcon -->
+<template>
+    <UiIcon name="alert"></UiIcon>
+</template>
+
+<script>
+    import {UiIcon} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type                                                                          | Default  | Description                                          |
+|---------------|-------------------------------------------------------------------------------|----------|------------------------------------------------------|
+| `name`        | `UiIconName`                                  | required | Sets the `name`, which determines which svg is used. |
+| `size`        | `"xs" &#124; "small" &#124; "medium" &#124; "large" &#124; "xl" &#124; "2xl"` | `large`  | Sets the `size` attribute of the icon.               |
+| `sizeClasses` | `string`                                                                      | `''`     | Overwrites the size classes of the size prop.        |
+
+### Slots
+
+| Name      | Description                                |
+|-----------|--------------------------------------------|
+| `default` | slot for the rendering the badge's content |

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

@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount, type ComponentMountingOptions } from "@vue/test-utils";
+
+import UiIcon from "./UiIcon.vue";
+import { iconNames } from "./iconNames.js";
+
+function createWrapper(options: ComponentMountingOptions<typeof UiIcon> = {}) {
+  return mount(UiIcon, {
+    ...options,
+  });
+}
+
+describe("UiIcon", () => {
+  beforeEach(() => {
+    // Important to get isolated tests for this component as it dynamically imports components which will be cached in subsequent tests.
+    vi.resetModules();
+  });
+
+  it.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
+    [{ size: "xs" }, "size-3"],
+    [{ size: "small" }, "size-4"],
+    [{ size: "medium" }, "size-5"],
+    [{}, "size-6"],
+    [{ size: "large" }, "size-6"],
+    [{ size: "xl" }, "size-10"],
+    [{ size: "2xl" }, "size-14"],
+  ])("renders large size by default", (props, expectedClassNames) => {
+    const wrapper = createWrapper({
+      props: {
+        name: "alert",
+        ...props,
+      },
+    });
+
+    expect(wrapper.classes(expectedClassNames)).toBe(true);
+  });
+
+  it("should be able to resolve all iconNames", async () => {
+    await Promise.all(
+      iconNames.map((name) => import(`../../assets/icons/${name}.vue`)),
+    );
+  });
+
+  it("throws on non-existing icon name", async () => {
+    function callback() {
+      createWrapper({
+        props: {
+          // @ts-expect-error
+          name: "does-not-exist",
+        },
+      });
+    }
+
+    expect(callback).toThrowError(
+      "UiIcon: No icon named “does-not-exist” exists.",
+    );
+  });
+});

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import UiIcon from "./UiIcon.vue";
+import IconOverview from "./IconOverview.stories.vue";
+import { iconNames } from "./iconNames.js";
+
+const meta = {
+  title: "Ui/UiIcon",
+  component: UiIcon,
+  argTypes: {
+    name: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    size: {
+      control: "select",
+      options: ["xs", "small", "medium", "large", "xl", "2xl"],
+    },
+  },
+  args: {
+    name: "alert",
+    size: "large",
+  },
+} satisfies Meta<typeof UiIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiIcon },
+    template: "<UiIcon v-bind='args'></UiIcon>",
+  }),
+};
+
+export const Overview: Story = {
+  render: (args) => ({
+    setup() {
+      const size = args.size || "large";
+      return { args, size };
+    },
+    components: { IconOverview },
+    template: "<IconOverview :size='size'></IconOverview>",
+  }),
+};

package/dist/src/components/UiIcon/UiIcon.vue

@@ -0,0 +1,60 @@
+<template>
+  <component
+    :is="iconComponent"
+    :class="sizeClass"
+    class="inline-flex fill-current"
+  />
+</template>
+
+<script lang="ts">
+export type UiIconName = (typeof iconNames)[number];
+</script>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, watchEffect } from "vue";
+
+import UiIconLoading from "./UiIconLoading.vue";
+import { iconNames } from "./iconNames.js";
+
+const props = withDefaults(
+  defineProps<{
+    name: UiIconName;
+    size?: "xs" | "small" | "medium" | "large" | "xl" | "2xl";
+    sizeClasses?: string;
+  }>(),
+  {
+    size: "large",
+    sizeClasses: "",
+  },
+);
+
+const iconComponent = computed(() =>
+  defineAsyncComponent({
+    loader: () => import(`../../assets/icons/${props.name}.vue`),
+    // Render a substitute element while loading for classes to attach to.
+    loadingComponent: UiIconLoading,
+    // Immediately render the loadingComponent so that it can receive classes.
+    delay: 0,
+  }),
+);
+
+const sizeClass = computed(() => {
+  return (
+    props.sizeClasses ||
+    {
+      xs: "size-3",
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6",
+      xl: "size-10",
+      "2xl": "size-14",
+    }[props.size]
+  );
+});
+
+watchEffect(() => {
+  if (!iconNames.includes(props.name)) {
+    throw new Error(`UiIcon: No icon named “${props.name}” exists.`);
+  }
+});
+</script>

package/dist/src/components/UiIcon/UiIconLoading.vue

@@ -0,0 +1 @@
+<template><div></div></template>