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

package/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/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/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/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>

package/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/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/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/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/src/components/UiIcon/UiIconLoading.vue

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

package/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/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