@dpa-id-components/dpa-shared-components 22.3.0 → 23.0.0

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

@@ -1,110 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSelect from "./UiSelect.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiSelect> = {},
-) {
-  return mount(UiSelect, options);
-}
-
-describe("UiSelect", () => {
-  test("renders attributes on correct element", () => {
-    const wrapper = createWrapper({
-      props: {
-        id: "id",
-        class: "class",
-        name: "name",
-        modelValue: "value",
-        placeholder: "placeholder",
-        required: "required",
-        disabled: true,
-        "aria-invalid": "true",
-        "aria-errormessage": "message",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("class")).toBe(true);
-
-    const select = wrapper.find("select");
-    expect(select.element.classList.contains("class")).toBe(false);
-    expect(select.element.getAttribute("id")).toBe("id");
-    expect(select.element.getAttribute("name")).toBe("name");
-    expect(select.element.hasAttribute("required")).toBe(true);
-    expect(select.element.hasAttribute("disabled")).toBe(true);
-    expect(select.element.getAttribute("aria-invalid")).toBe("true");
-    expect(select.element.getAttribute("aria-errormessage")).toBe("message");
-  });
-
-  test("implements working v-model interface", async () => {
-    const wrapper = createWrapper({
-      slots: {
-        default: {
-          template: /*html*/ `
-            Options
-          `,
-        },
-        options: {
-          template: /*html*/ `
-            <option value="primary">Primary</option>
-            <option value="secondary">Secondary</option>
-            <option value="tertiary">Tertiary</option>
-          `,
-        },
-      },
-      props: {
-        modelValue: "primary",
-      },
-    });
-    const select = wrapper.find("select");
-    expect(select.element.value).toBe("primary");
-
-    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(undefined);
-
-    await select.setValue("secondary");
-    expect(select.element.value).toBe("secondary");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["secondary"]);
-
-    await select.setValue("tertiary");
-    expect(select.element.value).toBe("tertiary");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["tertiary"]);
-  });
-
-  test("works without v-model", async () => {
-    const wrapper = createWrapper({
-      slots: {
-        default: {
-          template: /*html*/ `
-            Options
-          `,
-        },
-        options: {
-          template: /*html*/ `
-            <option value="">None</option>
-            <option value="primary">Primary</option>
-            <option value="secondary">Secondary</option>
-          `,
-        },
-      },
-    });
-    const select = wrapper.find("select");
-    expect(select.element.value).toBe("");
-    let lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(undefined);
-
-    await select.setValue("primary");
-    expect(select.element.value).toBe("primary");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["primary"]);
-
-    await select.setValue("secondary");
-    expect(select.element.value).toBe("secondary");
-    lastEvent = (wrapper.emitted<string>("update:modelValue") ?? []).at(-1);
-    expect(lastEvent).toEqual(["secondary"]);
-  });
-});

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

@@ -1,101 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj,
-} from "@storybook/vue3-vite";
-
-import UiSelect from "./UiSelect.vue";
-
-const options: string[] = [
-  "backlog",
-  "to-do",
-  "progress",
-  "code-review",
-  "deployment",
-  "approval",
-  "done",
-];
-
-type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiSelect> & {
-  name?: string;
-  disabled?: boolean;
-};
-
-const meta = {
-  title: "forms/UiSelect",
-  component: UiSelect,
-  args: {
-    // Attributes
-    name: "status",
-    disabled: false,
-
-    // Props
-    modelValue: "progress",
-
-    // Slots
-    default: "Status",
-    options,
-  },
-  argTypes: {
-    // Attributes
-    name: { control: "text" },
-    disabled: { control: "boolean" },
-
-    // Props
-    modelValue: { control: "select", options },
-  },
-} satisfies Meta<PropsAndCustomArgs>;
-
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSelect },
-    template: /*html*/ `
-      <UiSelect
-        v-model="args.modelValue"
-        v-bind="args"
-      >
-        {{ args.default }}
-
-        <template #options>
-          <option
-            v-for="(option, index) in args.options"
-            :key="index"
-            :value="option"
-          >
-            {{ option }}
-          </option>
-        </template>
-
-        <template v-if="args.errors" #errors>
-          {{ args.errors }}
-        </template>
-      </UiSelect>
-    `,
-  }),
-};
-
-export const WithoutInitialValue: Story = {
-  render: Default.render,
-  args: {
-    ...meta.args,
-
-    // Props
-    modelValue: undefined,
-
-    // Slots
-    options: options.concat(""),
-  },
-};
-
-export const Errors: Story = {
-  args: {
-    errors: "This field is required.",
-  },
-  ...Default,
-};

package/dist/src/components/UiSelect/UiSelect.vue

@@ -1,126 +0,0 @@
-<template>
-  <div :class="cn('relative', $attrs.class)">
-    <UiLabel
-      v-if="$slots.default"
-      :for="uniqueId"
-      :class="
-        cn(
-          'absolute left-3 z-1 origin-left px-1 text-neutral-muted transition-all duration-150 [*:has(+select:where(:enabled:hover))]:text-neutral-subtle [*:has(+select:where(:focus))]:text-primary [*:has(+select:where([aria-invalid=true]))]:text-error [*:has(+select:where([aria-invalid=true]:enabled:hover))]:text-error-hover [*:has(+select:where([aria-invalid=true]:focus))]:text-error-hover',
-          model !== undefined
-            ? '-translate-y-1/2 bg-neutral text-xs'
-            : 'translate-y-4',
-        )
-      "
-    >
-      <slot />
-    </UiLabel>
-
-    <select
-      :id="uniqueId"
-      v-model="model"
-      :aria-invalid="Boolean($slots.errors)"
-      :aria-errormessage="$slots.errors ? `${uniqueId}-errors` : undefined"
-      class="peer disabled:text-color-neutral-soft h-14 w-full appearance-none rounded-t-sm border border-neutral-faint p-4 pr-2 text-left text-sm text-neutral-primary transition-all duration-150 outline-none not-aria-invalid:rounded-b-sm placeholder:text-neutral-muted focus:border-2 focus:border-primary focus:p-inputFocused not-read-only:enabled:cursor-pointer enabled:not-focus:hover:border-neutral-subtle disabled:border-neutral-muted disabled:opacity-70 aria-invalid:border-2 aria-invalid:border-error aria-invalid:focus:border-error-hover enabled:aria-invalid:hover:border-error-hover"
-      v-bind="{ ...$attrs, class: null }"
-    >
-      <slot name="options" />
-    </select>
-
-    <UiIcon
-      class="pointer-events-none absolute top-4 right-3"
-      name="chevron-down"
-    />
-
-    <div
-      v-if="$slots.errors"
-      :id="`${uniqueId}-errors`"
-      class="rounded-b-sm bg-error px-4 py-1 text-xs/normal font-medium text-neutral transition-all duration-150 ease-in-out peer-focus:bg-error-hover peer-enabled:peer-hover:bg-error-hover peer-disabled:opacity-70"
-    >
-      <slot name="errors" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useId } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiIcon from "../UiIcon/UiIcon.vue";
-import UiLabel from "../UiLabel/UiLabel.vue";
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-defineSlots<{
-  /**
-   * Label content.
-   */
-  default: () => any;
-  /**
-   * Error content.
-   */
-  errors?: () => any;
-  /**
-   * Select options.
-   */
-  options: () => any;
-}>();
-
-const { id = undefined } = defineProps<{
-  /**
-   * ID of the `select` element. Used for the `label`'s `for` attribute if the `default` slot is provided.
-   */
-  id?: string;
-}>();
-
-const model = defineModel<string>();
-
-const defaultId = useId();
-const uniqueId = computed(() => id ?? `id-${defaultId}`);
-</script>
-
-<style scoped>
-@reference "../../tailwindPreset.css";
-
-select,
-::picker(select) {
-  appearance: base-select;
-}
-
-::picker(select) {
-  @apply my-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
-}
-
-select::picker-icon {
-  @apply hidden;
-}
-
-select > :deep(option) {
-  @apply flex items-center px-4 py-1.5 focus-visible:focus-outline;
-
-  &:first-child {
-    @apply rounded-t-lg;
-  }
-
-  &:last-child {
-    @apply rounded-b-lg;
-  }
-
-  &:enabled:hover {
-    @apply bg-neutral-pale;
-  }
-
-  &:focus-visible {
-    @apply -outline-offset-2;
-  }
-
-  &::checkmark {
-    @apply order-1 ml-auto text-lg;
-  }
-
-  & + option {
-    @apply border-t border-neutral-whisper;
-  }
-}
-</style>

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

@@ -1,28 +0,0 @@
-# @dpa-shared-components/UiSkeletonBox
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSkeletonBox -->
-<template>
-    <UiSkeletonBox dynamicSize></UiSkeletonBox>
-</template>
-
-<script>
-    import {UiSkeletonBox} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name          | Type      | Default | Description                        |
-|---------------|-----------|---------|------------------------------------|
-| `dynamicSize` | `Boolean` | `false` | If true, generates a random width. |
-| `maxWidth`    | `Number`  | `100`   | Max width for random width.        |
-| `minWidth`    | `Number`  | `80`    | Min width for random width.        |
-
-### Slots
-
-This component has no slots

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

@@ -1,15 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSkeletonBox from "./UiSkeletonBox.vue";
-
-describe("UiSkeletonBox", () => {
-  const wrapper = mount(UiSkeletonBox);
-
-  test("renders default", () => {
-    expect(wrapper.classes("inline-block")).toBe(true);
-    expect(wrapper.classes("animate-pulse")).toBe(true);
-    expect(wrapper.classes("rounded-sm")).toBe(true);
-    expect(wrapper.classes("bg-neutral-pale")).toBe(true);
-  });
-});

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

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiSkeletonBox from "./UiSkeletonBox.vue";
-
-const meta = {
-  title: "Ui/UiSkeletonBox",
-  component: UiSkeletonBox,
-  argTypes: {
-    maxWidth: { type: "number" },
-    minWidth: { type: "number" },
-    dynamicSize: { type: "boolean" },
-  },
-  args: {
-    maxWidth: 100,
-    minWidth: 80,
-    dynamicSize: true,
-  },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSkeletonBox },
-    template: "<UiSkeletonBox v-bind='args'></UiSkeletonBox>",
-  }),
-} satisfies Meta<typeof UiSkeletonBox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -1,33 +0,0 @@
-<template>
-  <span
-    class="inline-block animate-pulse rounded-sm bg-neutral-pale"
-    :class="{
-      'h-4 w-full': dynamicSize,
-    }"
-    :style="{ width: computedWidth as string }"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const {
-  maxWidth = 100,
-  minWidth = 80,
-  dynamicSize = false,
-} = defineProps<{
-  maxWidth?: number;
-  minWidth?: number;
-  dynamicSize?: boolean;
-}>();
-
-/**
- * Use either given width or random width between min and max value
- */
-const computedWidth = computed(() => {
-  return (
-    dynamicSize &&
-    `${Math.floor(Math.random() * (maxWidth - minWidth) + minWidth)}%`
-  );
-});
-</script>

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

@@ -1,55 +0,0 @@
-# @dpa-id-components/UiSnackbar
-
-## Installation
-
-```
-yarn add @dpa-id-components/UiSnackbar
-```
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSnackbar -->
-<template>
-  <UiSnackbar :is-shown="isVisible" @action-click="handleAction">
-    HELLO
-    <template #action>action</template>
-  </UiSnackbar>
-</template>
-
-<script setup lang="ts">
-  import UiSnackbar from "@dpa-id-components/UiSnackbar";
-
-  const isVisible = ref(false);
-
-  const handleAction = () => {
-    console.log("do something");
-  };
-</script>
-```
-
-## API
-
-### Props
-
-| Name       | Type                             | Default  | Description                                                  |
-| ---------- | -------------------------------- | -------- | ------------------------------------------------------------ |
-| `isShown`  | `boolean`                        | `false`  | Visibility of the snackbar.                                  |
-| `position` | `left` or `right`                | `left`   | Location of the snackbar, fixed in the viewport.             |
-| `iconName` | `UiIconName`                     | required | Sets the `name`, which determines which svg is used as icon. |
-| `iconSize` | `small`, `medium`, `large`       | `medium` | Sets the `size` of the icon.                                 |
-| `type`     | `info`, `warning`                | `info`   | Sets the overall design of the snackbar.                     |
-
-### Slots
-
-| Name      | Description                             |
-| --------- | --------------------------------------- |
-| `default` | Default slot for text of the snackbar   |
-| `action`  | Optional slot for text in action button |
-
-### Events
-
-| Name           | Type      | Description                            |
-| -------------- | --------- | -------------------------------------- |
-| `action-click` | none      | Emitted when the action is clicked     |
-| `input`        | `boolean` | Emitted when the snackbar gets visible |

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

@@ -1,109 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-import UiSnackbar from "./UiSnackbar.vue";
-
-describe("UiSnackbar", () => {
-  test("displays a text message via the default slot", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from snackbar",
-      },
-      props: {
-        isShown: true,
-      },
-    });
-
-    expect(wrapper.text()).toBe("Hello, from snackbar");
-  });
-
-  test("Is not visible when props don't say so", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from snackbar",
-      },
-      props: {
-        isShown: false,
-      },
-    });
-
-    expect(wrapper.find("div").exists()).toBe(false);
-  });
-
-  test("displays an SVG icon via the icon slot", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from snackbar",
-        iconName: "close",
-      },
-      props: {
-        isShown: true,
-      },
-    });
-
-    expect(wrapper.findComponent(UiIcon)).toBeTruthy();
-  });
-
-  test("has an action button via the action slot", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from snackbar",
-        action: "click me",
-      },
-      props: {
-        isShown: true,
-      },
-    });
-    const actionButton = wrapper.find("button");
-    actionButton.trigger("click");
-
-    expect(wrapper.emitted()["action-click"]).toBeTruthy();
-  });
-
-  test("snackbar type success has green background", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from success snackbar",
-      },
-      props: {
-        type: "success",
-        isShown: true,
-      },
-    });
-
-    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
-    expect(coloredDiv.classes("bg-accent-green")).toBe(true);
-  });
-
-  test("snackbar type error has red background", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from error snackbar",
-      },
-      props: {
-        type: "error",
-        isShown: true,
-      },
-    });
-
-    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
-    expect(coloredDiv.classes("bg-accent-red")).toBe(true);
-  });
-
-  test("snackbar type info has gray-900 background", () => {
-    const wrapper = mount(UiSnackbar, {
-      slots: {
-        default: "Hello, from info snackbar",
-      },
-      props: {
-        type: "info",
-        isShown: true,
-      },
-    });
-
-    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
-    expect(coloredDiv.classes("bg-neutral-primary")).toBe(true);
-  });
-});

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

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { ref } from "vue";
-
-import { icons } from "../UiIcon/icons.ts";
-
-import UiSnackbar from "./UiSnackbar.vue";
-
-const meta = {
-  title: "Ui/UiSnackbar",
-  component: UiSnackbar,
-  argTypes: {
-    iconName: {
-      control: "select",
-      options: [null, ...Object.keys(icons)],
-      description:
-        "Name of the icon to display. If not set, uses alert-fill for error.",
-    },
-    iconSize: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Size of the icon.",
-    },
-    "action-click": { action: "action-click" },
-    input: { action: "input" },
-  },
-  args: {
-    position: "left",
-    isShown: true,
-    iconName: undefined,
-    iconSize: "md",
-    type: "info",
-  },
-  render: (args) => ({
-    setup() {
-      const isVisible = ref(args.isShown);
-
-      const toggle = () => {
-        isVisible.value = !isVisible.value;
-      };
-      return { args, isVisible, toggle };
-    },
-    components: { UiSnackbar },
-    template: `
-      <div>
-        <button @click="toggle">toggle snackbar</button>
-        <UiSnackbar
-          v-bind="args"
-          :is-shown="isVisible"
-          @action-click="args['action-click']"
-          @input="args.input"
-        >
-          This is a message
-          <template #action>Action</template>
-        </UiSnackbar>
-      </div>
-    `,
-  }),
-} as Meta<typeof UiSnackbar & { "action-click": any; input: any }>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};