@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/src/components/UiInfoContent/UiInfoContent.vue

@@ -1,27 +1,37 @@
 <template>
-  <div class="flex h-full flex-col items-center justify-center">
+  <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="[iconBackgroundClass, iconColorClass]"
+      :class="classes.icon"
       data-testid="info-icon"
     >
-      <UiIcon :name="iconName" :size="iconSize" data-testid="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-gray-900"
+      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-gray-800"
+      class="pt-4 text-center text-base text-neutral-emphasis"
       data-testid="info-text"
     >
-      <slot name="default" />
+      <slot />
     </span>
+
     <div
       v-if="$slots.actions"
       class="flex flex-none flex-wrap justify-center gap-x-6 gap-y-2 pt-6"
@@ -36,34 +46,25 @@ 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 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 iconBackgroundClass = computed(() => {
-  if (props.iconBackground === "gray") {
-    return "bg-gray-100";
-  } else if (props.iconBackground === "green") {
-    return "bg-green-neon";
-  }
-  return "bg-white";
-});
+const { appearance = "default", iconName = undefined } = defineProps<{
+  appearance?: keyof typeof APPEARANCE_MAP;
+  iconName?: UiIconName;
+}>();
 
-const iconColorClass = computed(() => {
-  if (props.iconColor === "gray") {
-    return "text-gray-400";
-  }
-  return "text-white";
-});
+const classes = computed(() => APPEARANCE_MAP[appearance]);
 </script>

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

@@ -21,47 +21,30 @@ import { UiInput } from "@dpa-id-components/dpa-shared-components";
 
 ## API
 
+### Models
+
+| Name      | Type     | Default     | Description          |
+|-----------|----------|-------------|----------------------|
+| _default_ | `string` | `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                                                                         |
 |--------------------|-----------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------|
-| `modelValue`       | `String`                                                                    | `""`       | Sets the `value` attribute of the input                                             |
-| `type`             | `text,number,time,date, password`                                           | `text`     | Sets the `type` attribute of the input                                              |
-| `label`            | `String`                                                                    | `""`       | The displayed and aria label of the input                                           |
-| `placeholder`      | `String`                                                                    | `""`       | The placeholder text of the input                                                   |
-| `autofocus`        | `Boolean`                                                                   | `false`    | Whether the input gets focused on mount                                             |
-| `chevron`          | `Boolean`                                                                   | `false`    | Whether a chevron gets displayed on the end of the input (e.g. for custom dropdown) |
-| `disabled`         | `Boolean`                                                                   | `false`    | Sets the disabled attribute of the input                                            |
-| `isDateTimePicker` | `Boolean`                                                                   | `false`    | Changes the appearance to a datetime picker                                         |
-| `autocomplete`     | `Boolean`                                                                   | `false`    | Sets the autocomplete attribute of the input (for browser support only)             |
-| `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`      | `"default" | "info" | "readonly" | "warning" | "error"` | `"default` | The status the input is styled for                                                  |
-
-### Events
-
-| Name                | Type            | Description                                                                   |
-|---------------------|-----------------|-------------------------------------------------------------------------------|
-| `input`             | `string`    | Emitted when the value of the input changes. Value is emitted with the event. |
-| `update:modelValue` | `string`        | Same as input, duplicated for use in v-model                                  |
-| `focus`             | `FocusEvent`    | Emitted when the input gets focused                                           |
-| `blur`              | `FocusEvent`    | Emitted when the input gets blurred                                           |
-| `keyup`             | `KeyboardEvent` | Emitted on keyup inside the input                                             |
-
-### Exposes
-
-| Name       | Type               | Description                                                |
-|------------|--------------------|------------------------------------------------------------|
-| `inputRef` | `HTMLInputElement` | Exposes a ref to the input element to the parent component |
+| `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` | slot for rendering a button inside the input field |
+| `buttons` | Render extra content like a “Reveal password” button |
 | `default` | Label content |
-| `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |
+| `errors`  | Validation error content that's associated with the form control via `aria-errormessage` |

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

@@ -1,17 +1,11 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
 
 import UiInput from "./UiInput.vue";
 
-function createWrapper(options: ComponentMountingOptions<typeof UiInput> = {}) {
-  return mount(UiInput, {
-    ...options,
-  });
-}
-
 describe("UiInput", () => {
-  it("renders attributes on correct element", () => {
-    const wrapper = createWrapper({
+  test("renders attributes on correct element", () => {
+    const wrapper = mount(UiInput, {
       props: {
         id: "id",
         class: "testClass",
@@ -29,11 +23,11 @@ describe("UiInput", () => {
 
     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("data-testid")).not.toBe("testId");
 
     const input = wrapper.find("input");
     expect(input.element.classList.contains("testClass")).toBe(false);
-    expect(input.element.getAttribute("data-testid")).not.toBe("testId");
+    expect(input.element.getAttribute("data-testid")).toBe("testId");
     expect(input.element.getAttribute("id")).toBe("id");
     expect(input.element.getAttribute("name")).toBe("name");
     expect(input.element.getAttribute("placeholder")).toBe("placeholder");
@@ -44,123 +38,103 @@ describe("UiInput", () => {
     expect(input.element.getAttribute("aria-errormessage")).toBe("message");
   });
 
-  it("renders the label", async () => {
-    const wrapper = createWrapper({
+  test("renders the label", async () => {
+    const wrapper = mount(UiInput, {
       props: {
-        label: "Veröffentlichungsdatum",
+        label: "Date",
       },
     });
-    const label = wrapper.find("label");
 
-    expect(label.text()).toBe("Veröffentlichungsdatum");
+    expect(wrapper.find("label").text()).toBe("Date");
   });
 
-  it("renders the placeholder", async () => {
-    const wrapper = createWrapper({
-      props: {
-        placeholder: "Beispiel: Merkel",
-      },
-    });
-    const input = wrapper.find("input");
-    expect(input.attributes("placeholder")).toBe("Beispiel: Merkel");
-  });
-
-  it("renders value", async () => {
-    const wrapper = createWrapper({
+  test("renders value", async () => {
+    const wrapper = mount(UiInput, {
       props: {
         modelValue: "foo",
       },
     });
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("foo");
-  });
 
-  it("emits focus event", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    await input.trigger("focus");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().focus).toBeTruthy();
-  });
-
-  it("emits blur event", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    await input.trigger("blur");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().blur).toBeTruthy();
+    expect(wrapper.find("input").element.value).toBe("foo");
   });
 
-  it("changes value on input", async () => {
-    const wrapper = createWrapper({
+  test("changes value on input", async () => {
+    const wrapper = mount(UiInput, {
       props: {
         modelValue: "foo",
       },
     });
+
     const input = wrapper.find("input");
     expect(input.element.value).toBe("foo");
+
     await wrapper.setProps({
       modelValue: "bar",
     });
     expect(input.element.value).toBe("bar");
   });
 
-  it("renders the info", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "info",
-      infoText: "This is an info example",
+  test("renders the info", () => {
+    const wrapper = mount(UiInput, {
+      props: {
+        inputStatus: "info",
+      },
+      slots: {
+        extra: "This is an info example",
+      },
     });
 
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an info example");
+    expect(wrapper.find("input + div").text()).toBe("This is an info example");
   });
 
-  it("renders the warning", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "warning",
-      warningMessage: "This is an warning example",
+  test("renders the warning", () => {
+    const wrapper = mount(UiInput, {
+      props: {
+        inputStatus: "warning",
+      },
+      slots: {
+        extra: "This is an warning example",
+      },
     });
 
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an warning example");
+    expect(wrapper.find("input + div").text()).toBe(
+      "This is an warning example",
+    );
   });
 
-  it("renders the error", async () => {
-    const wrapper = createWrapper();
-    await wrapper.setProps({
-      inputStatus: "error",
-      errorMessage: "This is an error example",
+  test("renders the error", async () => {
+    const wrapper = mount(UiInput, {
+      props: {
+        inputStatus: "error",
+      },
+      slots: {
+        extra: "This is an error example",
+      },
     });
 
-    const div = wrapper.find("input + div");
-
-    expect(div.text()).toBe("This is an error example");
+    expect(wrapper.find("input + div").text()).toBe("This is an error example");
   });
 
-  it("works without v-model", async () => {
-    const wrapper = createWrapper();
+  test("works without v-model", async () => {
+    const wrapper = mount(UiInput);
+
     const input = wrapper.find("input");
     expect(input.element.value).toBe("");
-    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(undefined);
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(
+      undefined,
+    );
 
     await input.setValue("a");
     expect(input.element.value).toBe("a");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["a"]);
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(["a"]);
 
     await input.setValue("ab");
     expect(input.element.value).toBe("ab");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["ab"]);
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual(["ab"]);
   });
 
-  it("doesn't undo inputs on blur (bug fix)", async () => {
-    const wrapper = createWrapper();
+  test("doesn't undo inputs on blur (bug fix)", async () => {
+    const wrapper = mount(UiInput);
     const input = wrapper.find("input");
 
     // Focus the input to trigger an internal mechanism that swaps out styles on the `label` element.
@@ -173,8 +147,8 @@ describe("UiInput", () => {
     expect(input.element.value).toBe("ab");
   });
 
-  it("renders as textarea with isTextarea prop", async () => {
-    const wrapper = createWrapper({
+  test("renders as textarea with isTextarea prop", async () => {
+    const wrapper = mount(UiInput, {
       props: {
         isTextarea: true,
       },
@@ -183,50 +157,45 @@ describe("UiInput", () => {
     expect(wrapper.find("textarea").exists()).toBe(true);
   });
 
-  it("raises/lowers label correctly when making inputs and focusing/blurring the input (bug fix)", async () => {
-    const wrapper = createWrapper({ props: { label: "test" } });
-    const input = wrapper.find("input");
-    const label = wrapper.find("label");
-    const isLabelRaisedClassName = "-translate-y-1/2";
+  test("raises/lowers label correctly when making inputs and focusing/blurring the input (bug fix)", async () => {
+    const wrapper = mount(UiInput, { props: { label: "test" } });
 
     // Initially, the label is not raised
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(
-      false,
-    );
+    const input = wrapper.find("input");
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(false);
 
     // Upon focusing, the label will be raised
     await input.trigger("focus");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
 
     // Making an input keeps the label raised
     input.element.value = "ab";
     await input.trigger("input");
     expect(input.element.value).toBe("ab");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
 
     // Blurring the input keeps the label raised because there's now a value
     await input.trigger("blur");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
 
     // After focusing, the label is still raised
     await input.trigger("focus");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
 
     // Clearing the input but keeping the focus keeps the label raised
     input.element.value = "";
     await input.trigger("input");
     expect(input.element.value).toBe("");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(true);
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(true);
 
     // Blurring the input will eventually lower the label again
     await input.trigger("blur");
-    expect(label.element.classList.contains(isLabelRaisedClassName)).toBe(
-      false,
-    );
+    expect(input.element.hasAttribute("data-is-label-raised")).toBe(false);
   });
 
-  it("can clear input value by setting modelValue to empty string (bug fix)", async () => {
-    const wrapper = createWrapper();
+  test("can clear input value by setting modelValue to empty string (bug fix)", async () => {
+    const wrapper = mount(UiInput);
+
     const input = wrapper.find("input");
     expect(input.element.value).toBe("");
 

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

@@ -4,56 +4,50 @@ import { action } from "storybook/actions";
 import UiInput from "./UiInput.vue";
 
 const meta = {
-  title: "Ui/UiInput",
+  title: "forms/UiInput",
   component: UiInput,
-  argTypes: {
-    modelValue: { control: "text" },
-    type: {
-      control: { type: "select" },
-      options: ["text", "number", "time", "date", "password", "datetime-local"],
-    },
-    inputStatus: {
-      control: { type: "select" },
-      options: ["default", "info", "readonly", "warning", "error"],
-    },
-    label: { control: "text" },
-    placeholder: { control: "text" },
-    autofocus: { control: "boolean" },
-    chevron: { control: "boolean" },
-    disabled: { control: "boolean" },
-    isDateTimePicker: { control: "boolean" },
-    autocomplete: { control: "text" },
-    errorMessage: { control: "text" },
-    warningMessage: { control: "text" },
-    isTextarea: { control: "boolean" },
-  },
   args: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: "name",
+    disabled: false,
+    readonly: false,
+
+    // Props
     modelValue: "",
     type: "text",
-    inputStatus: "default",
-    label: "",
-    placeholder: undefined,
-    autofocus: false,
-    chevron: false,
-    disabled: false,
-    isDateTimePicker: false,
-    autocomplete: "on",
-    errorMessage: "",
-    warningMessage: "",
+    inputStatus: undefined,
     isTextarea: false,
+
+    // Slots
+    default: "Name",
+  },
+  argTypes: {
+    // Attributes
+    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: { control: "text" },
+    disabled: { control: "boolean" },
+    readonly: { control: "boolean" },
   },
   render: (args) => ({
     components: { UiInput },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiInput
         v-bind="args"
         v-model="args.modelValue"
         @input="input"
         @update:modelValue="update"
-      />`,
+      >
+        {{ args.default }}
+
+        <template v-if="args.extra" #extra>
+          {{ args.extra }}
+        </template>
+      </UiInput>
+    `,
     methods: {
       input: action("input"),
       update: action("update:modelValue"),
@@ -65,63 +59,78 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
-export const WithLabel: Story = { args: { label: "My Label" } };
-export const WithPlaceholder: Story = {
+
+export const Placeholder: Story = {
   args: {
-    label: "My Label",
+    // Attributes
+    // @ts-ignore
     placeholder: "Some placeholder text",
+
+    // Slots
+    default: "Name",
   },
 };
 
-export const Readonly: Story = {
+export const Value: Story = {
   args: {
-    label: "My Label",
-    readonly: true,
+    // Props
     modelValue: "Text value",
+
+    // Slots
+    default: "Name",
   },
 };
 
-export const WithErrorText: Story = {
+export const Errors: Story = {
   args: {
-    label: "Error!",
+    // Props
     inputStatus: "error",
-    modelValue: "Text value",
-    errorMessage: "Here goes the Error text",
+
+    // Slots
+    default: "Name",
+    extra: "This field is required.",
   },
 };
 
-export const WithWarningText: Story = {
+export const Warning: Story = {
   args: {
+    // Props
     inputStatus: "warning",
-    label: "Warnung!",
-    modelValue: "Text value",
-    warningMessage: "Here goes the warning text",
+
+    // Slots
+    default: "Warning",
+    extra: "Warning text",
   },
 };
 
-export const WithInfoText: Story = {
+export const Info: Story = {
   args: {
+    // Props
     inputStatus: "info",
-    label: "Info!",
-    modelValue: "Text value",
-    infoText: "Here goes the info text",
+
+    // Slots
+    default: "Info",
+    extra: "Info text",
   },
 };
 
-export const WithTypeDateTimeLocal: Story = {
+export const DateTime: Story = {
   args: {
-    label: "Aufnahmedatum",
-    placeholder: "Some placeholder text",
+    // Props
     type: "datetime-local",
     modelValue: "2018-06-12T19:30",
-    isDateTimePicker: true,
+
+    // Slots
+    default: "Date time",
   },
 };
 
 export const Textarea: Story = {
   args: {
-    label: "Textarea",
-    placeholder: "Some placeholder text",
+    // Props
     isTextarea: true,
+
+    // Slots
+    default: "Textarea",
   },
 };