@dpa-id-components/dpa-shared-components 22.3.1 → 23.1.0

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

@@ -1,59 +0,0 @@
-<template>
-  <component
-    :is="iconComponent"
-    :class="sizeClass"
-    class="inline-flex fill-current"
-  />
-</template>
-
-<script lang="ts">
-export type UiIconName = keyof typeof icons;
-
-export const ICON_SIZES = {
-  xs: "size-3",
-  sm: "size-4",
-  md: "size-5",
-  lg: "size-6",
-  xl: "size-10",
-  "2xl": "size-14",
-} satisfies Partial<Record<Size, string>>;
-</script>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent, watchEffect } from "vue";
-
-import { type Size } from "../../types/index.ts";
-
-import { icons } from "./icons.ts";
-import UiIconLoading from "./UiIconLoading.vue";
-
-const {
-  name,
-  size = "lg",
-  sizeClasses = undefined,
-} = defineProps<{
-  name: UiIconName;
-  size?: keyof typeof ICON_SIZES;
-  sizeClasses?: string;
-}>();
-
-const iconComponent = computed(() =>
-  defineAsyncComponent({
-    loader: icons[name] ?? icons.close,
-    // 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 sizeClasses || ICON_SIZES[size];
-});
-
-watchEffect(() => {
-  if (!icons[name]) {
-    throw new Error(`UiIcon: No icon named “${name}” exists.`);
-  }
-});
-</script>

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

@@ -1,175 +0,0 @@
-// Turn off prettier to make editing/sorting easier
-// prettier-ignore
-export const icons = {
-  "activities": () => import("../../assets/icons/activities.vue"),
-  "ai": () => import("../../assets/icons/ai.vue"),
-  "alert": () => import("../../assets/icons/alert.vue"),
-  "alert-filled": () => import("../../assets/icons/alert-filled.vue"),
-  "alert-octagon": () => import("../../assets/icons/alert-octagon.vue"),
-  "apps": () => import("../../assets/icons/apps.vue"),
-  "archive": () => import("../../assets/icons/archive.vue"),
-  "arrow-down": () => import("../../assets/icons/arrow-down.vue"),
-  "arrow-left": () => import("../../assets/icons/arrow-left.vue"),
-  "arrow-nav-left": () => import("../../assets/icons/arrow-nav-left.vue"),
-  "arrow-nav-right": () => import("../../assets/icons/arrow-nav-right.vue"),
-  "arrow-right": () => import("../../assets/icons/arrow-right.vue"),
-  "arrow-up": () => import("../../assets/icons/arrow-up.vue"),
-  "arrowhead-left": () => import("../../assets/icons/arrowhead-left.vue"),
-  "arrowhead-right": () => import("../../assets/icons/arrowhead-right.vue"),
-  "arrowhead-top": () => import("../../assets/icons/arrowhead-top.vue"),
-  "atmo": () => import("../../assets/icons/atmo.vue"),
-  "audio": () => import("../../assets/icons/audio.vue"),
-  "bag": () => import("../../assets/icons/bag.vue"),
-  "bell": () => import("../../assets/icons/bell.vue"),
-  "bell-filled": () => import("../../assets/icons/bell-filled.vue"),
-  "book": () => import("../../assets/icons/book.vue"),
-  "bookmark": () => import("../../assets/icons/bookmark.vue"),
-  "bookmark-filled": () => import("../../assets/icons/bookmark-filled.vue"),
-  "bot": () => import('../../assets/icons/bot.vue'),
-  "box": () => import("../../assets/icons/box.vue"),
-  "bulb": () => import("../../assets/icons/bulb.vue"),
-  "call": () => import("../../assets/icons/call.vue"),
-  "camera": () => import("../../assets/icons/camera.vue"),
-  "check": () => import("../../assets/icons/check.vue"),
-  "checklist": () => import("../../assets/icons/checklist.vue"),
-  "checkmark": () => import("../../assets/icons/checkmark.vue"),
-  "checkmark-double": () => import("../../assets/icons/checkmark-double.vue"),
-  "chevron-down": () => import("../../assets/icons/chevron-down.vue"),
-  "chevron-left": () => import("../../assets/icons/chevron-left.vue"),
-  "chevron-right": () => import("../../assets/icons/chevron-right.vue"),
-  "chevron-up": () => import("../../assets/icons/chevron-up.vue"),
-  "clipboard": () => import("../../assets/icons/clipboard.vue"),
-  "clock": () => import("../../assets/icons/clock.vue"),
-  "close": () => import("../../assets/icons/close.vue"),
-  "cloud-save": () => import("../../assets/icons/cloud-save.vue"),
-  "code": () => import("../../assets/icons/code.vue"),
-  "collapse": () => import("../../assets/icons/collapse.vue"),
-  "color-palette": () => import("../../assets/icons/color-palette.vue"),
-  "comment": () => import("../../assets/icons/comment.vue"),
-  "comment-filled": () => import("../../assets/icons/comment-filled.vue"),
-  "copy": () => import("../../assets/icons/copy.vue"),
-  "copy-link": () => import("../../assets/icons/copy-link.vue"),
-  "delete": () => import("../../assets/icons/delete.vue"),
-  "download": () => import("../../assets/icons/download.vue"),
-  "dpa-id": () => import("../../assets/icons/dpa-id.vue"),
-  "edit": () => import("../../assets/icons/edit.vue"),
-  "edit-add": () => import("../../assets/icons/edit-add.vue"),
-  "eil": () => import("../../assets/icons/eil.vue"),
-  "emoji": () => import("../../assets/icons/emoji.vue"),
-  "emoji-add": () => import("../../assets/icons/emoji-add.vue"),
-  "envelope": () => import("../../assets/icons/envelope.vue"),
-  "event": () => import("../../assets/icons/event.vue"),
-  "expand": () => import("../../assets/icons/expand.vue"),
-  "external-link": () => import("../../assets/icons/external-link.vue"),
-  "file": () => import("../../assets/icons/file.vue"),
-  "file-pdf": () => import("../../assets/icons/file-pdf.vue"),
-  "filter": () => import("../../assets/icons/filter.vue"),
-  "flag": () => import("../../assets/icons/flag.vue"),
-  "flag-filled": () => import("../../assets/icons/flag-filled.vue"),
-  "flags": () => import("../../assets/icons/flags.vue"),
-  "flash": () => import("../../assets/icons/flash.vue"),
-  "folder": () => import("../../assets/icons/folder.vue"),
-  "folder-add": () => import("../../assets/icons/folder-add.vue"),
-  "folder-filled": () => import("../../assets/icons/folder-filled.vue"),
-  "gallery": () => import("../../assets/icons/gallery.vue"),
-  "graphic": () => import("../../assets/icons/graphic.vue"),
-  "graphics": () => import("../../assets/icons/graphics.vue"),
-  "grid-1": () => import("../../assets/icons/grid-1.vue"),
-  "grid-2": () => import("../../assets/icons/grid-2.vue"),
-  "grid-3": () => import("../../assets/icons/grid-3.vue"),
-  "grid-4": () => import("../../assets/icons/grid-4.vue"),
-  "grid-6": () => import("../../assets/icons/grid-6.vue"),
-  "grid-9": () => import("../../assets/icons/grid-9.vue"),
-  "grid-masonry": () => import("../../assets/icons/grid-masonry.vue"),
-  "grid-masonry-9": () => import("../../assets/icons/grid-masonry-9.vue"),
-  "help": () => import("../../assets/icons/help.vue"),
-  "home": () => import("../../assets/icons/home.vue"),
-  "image": () => import("../../assets/icons/image.vue"),
-  "image-focus-point": () => import("../../assets/icons/image-focus-point.vue"),
-  "impact-high": () => import("../../assets/icons/impact-high.vue"),
-  "impact-low": () => import("../../assets/icons/impact-low.vue"),
-  "impact-medium": () => import("../../assets/icons/impact-medium.vue"),
-  "impact-very-high": () => import("../../assets/icons/impact-very-high.vue"),
-  "impact-very-low": () => import("../../assets/icons/impact-very-low.vue"),
-  "info": () => import("../../assets/icons/info.vue"),
-  "info-filled": () => import("../../assets/icons/info-filled.vue"),
-  "label": () => import("../../assets/icons/label.vue"),
-  "label-filled": () => import("../../assets/icons/label-filled.vue"),
-  "language": () => import("../../assets/icons/language.vue"),
-  "latest": () => import("../../assets/icons/latest.vue"),
-  "lightbulb": () => import("../../assets/icons/lightbulb.vue"),
-  "list": () => import("../../assets/icons/list.vue"),
-  "list-search": () => import("../../assets/icons/list-search.vue"),
-  "lock": () => import("../../assets/icons/lock.vue"),
-  "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
-  "mail": () => import("../../assets/icons/mail.vue"),
-  "map": () => import("../../assets/icons/map.vue"),
-  "map-filled": () => import("../../assets/icons/map-filled.vue"),
-  "menu": () => import("../../assets/icons/menu.vue"),
-  "minus": () => import("../../assets/icons/minus.vue"),
-  "more-horizontal": () => import("../../assets/icons/more-horizontal.vue"),
-  "more-vertical": () => import("../../assets/icons/more-vertical.vue"),
-  "move": () => import("../../assets/icons/move.vue"),
-  "move-up-down": () => import("../../assets/icons/move-up-down.vue"),
-  "navigation": () => import("../../assets/icons/navigation.vue"),
-  "note": () => import("../../assets/icons/note.vue"),
-  "offline": () => import("../../assets/icons/offline.vue"),
-  "package": () => import("../../assets/icons/package.vue"),
-  "paper-plane": () => import("../../assets/icons/paper-plane.vue"),
-  "pause": () => import("../../assets/icons/pause.vue"),
-  "pdf": () => import("../../assets/icons/pdf.vue"),
-  "pen": () => import("../../assets/icons/pen.vue"),
-  "pen-check": () => import("../../assets/icons/pen-check.vue"),
-  "people": () => import("../../assets/icons/people.vue"),
-  "phone": () => import("../../assets/icons/phone.vue"),
-  "picture": () => import("../../assets/icons/picture.vue"),
-  "pin": () => import("../../assets/icons/pin.vue"),
-  "planning": () => import("../../assets/icons/planning.vue"),
-  "play": () => import("../../assets/icons/play.vue"),
-  "play-filled": () => import("../../assets/icons/play-filled.vue"),
-  "plus": () => import("../../assets/icons/plus.vue"),
-  "print": () => import("../../assets/icons/print.vue"),
-  "refresh": () => import("../../assets/icons/refresh.vue"),
-  "reset": () => import("../../assets/icons/reset.vue"),
-  "responsive": () => import("../../assets/icons/responsive.vue"),
-  "rubix-thema": () => import("../../assets/icons/rubix-thema.vue"),
-  "save": () => import("../../assets/icons/save.vue"),
-  "saved-search": () => import("../../assets/icons/saved-search.vue"),
-  "saved-search-filled": () => import("../../assets/icons/saved-search-filled.vue"),
-  "search": () => import("../../assets/icons/search.vue"),
-  "settings": () => import("../../assets/icons/settings.vue"),
-  "share": () => import("../../assets/icons/share.vue"),
-  "share-alternative": () => import("../../assets/icons/share-alternative.vue"),
-  "sidebar": () => import("../../assets/icons/sidebar.vue"),
-  "sidebar-filled": () => import("../../assets/icons/sidebar-filled.vue"),
-  "slack": () => import("../../assets/icons/slack.vue"),
-  "slider-config": () => import("../../assets/icons/slider-config.vue"),
-  "spellcheck": () => import("../../assets/icons/spellcheck.vue"),
-  "spinner": () => import("../../assets/icons/spinner.vue"),
-  "standard-view": () => import("../../assets/icons/standard-view.vue"),
-  "star": () => import("../../assets/icons/star.vue"),
-  "star-filled": () => import("../../assets/icons/star-filled.vue"),
-  "stop": () => import("../../assets/icons/stop.vue"),
-  "story": () => import("../../assets/icons/story.vue"),
-  "sync": () => import("../../assets/icons/sync.vue"),
-  "tasks": () => import("../../assets/icons/tasks.vue"),
-  "text": () => import("../../assets/icons/text.vue"),
-  "thumbs-down": () => import("../../assets/icons/thumbs-down.vue"),
-  "thumbs-up": () => import("../../assets/icons/thumbs-up.vue"),
-  "thumbs-up-double": () => import("../../assets/icons/thumbs-up-double.vue"),
-  "topic": () => import("../../assets/icons/topic.vue"),
-  "union": () => import("../../assets/icons/union.vue"),
-  "upload": () => import("../../assets/icons/upload.vue"),
-  "user-need-divert-me": () => import("../../assets/icons/user-need-divert-me.vue"),
-  "user-need-educate-me": () => import("../../assets/icons/user-need-educate-me.vue"),
-  "user-need-give-me-perspective": () => import("../../assets/icons/user-need-give-me-perspective.vue"),
-  "user-need-help-me": () => import("../../assets/icons/user-need-help-me.vue"),
-  "user-need-inspire-me": () => import("../../assets/icons/user-need-inspire-me.vue"),
-  "user-need-touch-me": () => import("../../assets/icons/user-need-touch-me.vue"),
-  "user-need-update-me": () => import("../../assets/icons/user-need-update-me.vue"),
-  "video": () => import("../../assets/icons/video.vue"),
-  "video-overlay": () => import("../../assets/icons/video-overlay.vue"),
-  "view": () => import("../../assets/icons/view.vue"),
-  "view-off": () => import("../../assets/icons/view-off.vue"),
-  "volume-up": () => import("../../assets/icons/volume-up.vue"),
-} as const;

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

@@ -1,42 +0,0 @@
-# @dpa-id-components/ui-info-content
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiInfoContent -->
-<template>
-    <div class="h-screen w-100">
-      <UiInfoContent
-          icon-name="search"
-          appearance="success"
-        <template #title>Keine Ergebnisse</template>
-        Leider konnten wir keine Ergebnisse finden.
-        <template #actions>
-          <UiButton>Suche speichern</UiButton>
-          <UiButton>Suche löschen</UiButton>
-        </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                                                                           |
-| `appearance`  | Visual appearance of the component. One of `"default"`, `"default-alt"`, `"success"`. Defaults to `"default"`. |
-
-### 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

@@ -1,51 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiInfoContent from "./UiInfoContent.vue";
-
-const defaultSlots = {
-  title: "Keine Ergebnisse",
-  default: "Das ist ein Test-Text.",
-  actions: `<button>Klick mich</button>`,
-};
-
-describe("UiInfoContent", () => {
-  const wrapper = mount(UiInfoContent, {
-    slots: defaultSlots,
-    props: { appearance: "default", iconName: "search" },
-  });
-
-  test("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");
-  });
-
-  test("renders correct icon classes for default appearance", () => {
-    const icon = wrapper.find("[data-testid='info-icon']");
-    expect(icon.classes("bg-surface-base")).toBe(true);
-    expect(icon.classes("text-neutral-subtle")).toBe(true);
-  });
-
-  test("renders responsive icon size classes", () => {
-    const icon = wrapper.find("[data-testid='icon']");
-    expect(icon.classes("size-6")).toBe(true);
-    expect(icon.classes("sm:size-10")).toBe(true);
-  });
-
-  test("renders correct layout background for default appearance", () => {
-    expect(wrapper.find("div").classes("bg-surface-level-1")).toBe(true);
-  });
-
-  test("renders correct layout background for default-alt appearance", () => {
-    const defaultAltWrapper = mount(UiInfoContent, {
-      slots: defaultSlots,
-      props: { appearance: "default-alt", iconName: "search" },
-    });
-    expect(defaultAltWrapper.find("div").classes("bg-surface-base")).toBe(true);
-  });
-});

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

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiButton from "../UiButton/UiButton.vue";
-
-import UiInfoContent from "./UiInfoContent.vue";
-
-const meta = {
-  title: "Ui/UiInfoContent",
-  component: UiInfoContent,
-  args: {
-    appearance: "default",
-    iconName: "search",
-  },
-  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">Suche trotzdem speichern</UiButton>
-          <UiButton color="gray">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

@@ -1,70 +0,0 @@
-<template>
-  <div
-    class="flex h-full flex-col items-center justify-center"
-    :class="classes.layout"
-  >
-    <div
-      v-if="iconName"
-      class="rounded-full p-6 shadow-default"
-      :class="classes.icon"
-      data-testid="info-icon"
-    >
-      <UiIcon
-        :name="iconName"
-        size-classes="size-6 sm:size-10"
-        data-testid="icon"
-      />
-    </div>
-
-    <h2
-      v-if="$slots.title"
-      class="pt-4 text-center text-2xl font-medium text-neutral-primary"
-      data-testid="info-title"
-    >
-      <slot name="title" />
-    </h2>
-
-    <span
-      v-if="$slots.default"
-      class="pt-4 text-center text-base text-neutral-emphasis"
-      data-testid="info-text"
-    >
-      <slot />
-    </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 APPEARANCE_MAP = {
-  default: {
-    layout: "bg-surface-level-1",
-    icon: "bg-surface-base text-neutral-subtle",
-  },
-  "default-alt": {
-    layout: "bg-surface-base",
-    icon: "bg-surface-level-1 text-neutral-subtle",
-  },
-  success: {
-    layout: "bg-surface-base",
-    icon: "bg-secondary-light text-neutral-inverse-primary",
-  },
-};
-
-const { appearance = "default", iconName = undefined } = defineProps<{
-  appearance?: keyof typeof APPEARANCE_MAP;
-  iconName?: UiIconName;
-}>();
-
-const classes = computed(() => APPEARANCE_MAP[appearance]);
-</script>

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

@@ -1,61 +0,0 @@
-# @dpa-shared-components/UiInput
-
-## Usage
-
-```vue
-<UiInput
-  id="postal-code"
-  name="postal_code"
-  value="04277"
-  required
-  placeholder="12345"
->
-  Postal code
-</UiInput>
-```
-
-**Using `v-model`**:
-
-```vue
-<UiInput v-model="postalCode">
-  Postal code
-</UiInput>
-```
-
-**With `number` value**:
-
-```vue
-<UiInput v-model="count" type="number">
-  Count
-</UiInput>
-```
-
-## API
-
-### Models
-
-| Name      | Type               | Default     | Description          |
-|-----------|--------------------|-------------|----------------------|
-| _default_ | `string \| number` | `undefined` | Sets the input value |
-
-### Props
-
-**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (either an `input` or `textarea` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
-
-| Name               | Type                                                                        | Default    | Description                                                                         |
-|--------------------|-----------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------|
-| `type`             | `HTMLInputElement` type | `text`     | Sets the `type` attribute of the input                                              |
-| `label`            | `string`                                                                    | `""`       | The displayed and aria label of the input                                           |
-| `errorMessage`     | `string`                                                                    | `""`       | Error message to be displayed underneath the input                                  |
-| `warningMessage`   | `string`                                                                    | `""`       | Warning message to be displayed underneath the input                                |
-| `infoText`         | `string`                                                                    | `""`       | Info message to be displayed underneath the input                                   |
-| `isTextarea`       | `boolean`                                                                   | `false`    | Input gets rendered as textarea                                                     |
-| `inputStatus`      | `"info"`, `"warning"`, `"error"` | `"default` | The status the input is styled for                                                  |
-
-### Slots
-
-| Name      | Description                                        |
-|-----------|----------------------------------------------------|
-| `buttons` | Render extra content like a “Reveal password” button |
-| `default` | Label content |
-| `errors`  | Validation error content that's associated with the form control via `aria-errormessage` |