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

package/dist/src/components/UiBadge/UiBadge.vue

@@ -1,33 +1,10 @@
 <template>
   <div
-    class="group relative inline-block rounded-full px-2"
-    :class="[
-      colorClass,
-      { 'pl-2': iconName },
-      small ? 'py-0 text-xs' : 'py-0.5 text-sm',
-    ]"
+    class="inline-flex size-fit flex-none flex-nowrap items-center gap-x-2 rounded-full px-2 align-middle text-xs/4.5 font-semibold whitespace-nowrap"
+    :class="colorClass"
   >
-    <span
-      v-if="mobileTrim || trim"
-      class="absolute bottom-full left-1/2 -translate-x-1/2 rounded-full bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100"
-      :class="{ 'lg:hidden': mobileTrim }"
-    >
-      {{ text }}
-    </span>
-    <div class="flex items-center gap-1">
-      <UiIcon v-if="iconName" :name="iconName" size="medium"></UiIcon>
-      <slot>
-        <span v-if="mobileTrim || trim" :class="{ 'lg:hidden': mobileTrim }">
-          {{ text?.slice(0, 1) }}
-        </span>
-        <span v-if="screenReaderText" class="sr-only">
-          {{ screenReaderText }}
-        </span>
-        <span :class="[{ 'hidden lg:inline': mobileTrim }, { hidden: trim }]">
-          {{ text }}
-        </span>
-      </slot>
-    </div>
+    <UiIcon v-if="iconName" :name="iconName" size="xs" />
+    <slot />
   </div>
 </template>
 
@@ -36,59 +13,34 @@ import { computed } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    text?: string;
-    color?:
-      | "red"
-      | "red-dark"
-      | "orange"
-      | "purple"
-      | "blue"
-      | "white"
-      | "gray-300"
-      | "gray-600"
-      | "gray-800"
-      | "black"
-      | "green-neon"
-      | "green-primary"
-      | "neon-green"
-      | "primary-green";
-    iconName?: UiIconName | null;
-    mobileTrim?: boolean;
-    trim?: boolean;
-    small?: boolean;
-    screenReaderText?: string;
-  }>(),
-  {
-    text: undefined,
-    color: "red",
-    iconName: null,
-    mobileTrim: false,
-    trim: false,
-    small: false,
-    screenReaderText: "",
-  },
-);
+const { appearance = "accent-red", iconName = undefined } = defineProps<{
+  appearance?:
+    | "accent-red"
+    | "accent-red-dark"
+    | "accent-orange"
+    | "accent-purple"
+    | "accent-green"
+    | "primary"
+    | "neutral-primary"
+    | "neutral-emphasis"
+    | "neutral-medium"
+    | "neutral-faint";
+  iconName?: UiIconName;
+}>();
 
 const colorClass = computed(() => {
   const colorClasses: Record<string, string> = {
-    red: "bg-rainbow-red text-white",
-    "red-dark": "bg-rainbow-red-dark text-white",
-    orange: "bg-rainbow-orange text-white",
-    purple: "bg-rainbow-purple text-white",
-    blue: "bg-blue-default text-white",
-    white: "bg-white text-black",
-    "gray-300": "bg-gray-300 text-gray-700",
-    "gray-800": "bg-gray-800 text-white",
-    "gray-600": "bg-gray-600 text-white",
-    black: "bg-black text-white",
-    "green-neon": "bg-green-neon text-white",
-    "green-primary": "bg-green-primary text-white",
-    "neon-green": "bg-green-neon text-white",
-    "primary-green": "bg-green-primary text-white",
+    "accent-red": "bg-accent-red text-neutral",
+    "accent-red-dark": "bg-accent-red-dark text-neutral",
+    "accent-orange": "bg-accent-orange text-neutral",
+    "accent-purple": "bg-accent-purple text-neutral",
+    "accent-green": "bg-accent-green text-neutral",
+    primary: "bg-primary text-neutral",
+    "neutral-primary": "bg-neutral-primary text-neutral",
+    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
+    "neutral-medium": "bg-neutral-medium text-neutral",
+    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
   };
-
-  return colorClasses[props.color];
+  return colorClasses[appearance];
 });
 </script>

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

@@ -8,8 +8,18 @@ This component transparently wraps `RouterLink` and `button` and toggles between
 
 ```vue
 <template>
-  <UiButton :size="medium" :color="blue" disabled @click="doThing">
-    Button
+  <UiButton size="lg" appearance="secondary" @click="save">
+    Save
+  </UiButton>
+
+  <UiButton @click="save">
+    <UiIcon name="save" />
+    Save
+  </UiButton>
+
+  <!-- Icon-only button's **must** have an “aria-label” attribute. -->
+  <UiButton aria-label="Save" @click="save">
+    <UiIcon name="save" />
   </UiButton>
 
   <UiButton :to="{ name: 'home' }">
@@ -21,7 +31,7 @@ This component transparently wraps `RouterLink` and `button` and toggles between
   </UiButton>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { UiButton } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
@@ -30,23 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 
 ### Props
 
-| Name              | Type                                                                           | Default   | Description                                                          |
-|-------------------|--------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------|
-| `to`              | `undefined` | `RouteLocationRaw` | `to` prop of a `RouterLink` |
-| `size`            | `String`                                                                       | `medium`  | Sets the `size` attribute of the Button                              |
-| `color`           | `"blue" &#124; "primary-green" "transparent" &#124; "gray"&#124; "light-gray"` | `blue`    | Sets the `color` attribute of the Button                             |
-| `disabled`        | `Boolean`                                                                      | `false`   | Whether the `button` is disabled                                     |
-| `disabledVariant` | `"primary" &#124; "secondary"`                                                 | `primary` | Sets the `background-color` and `border` style of a disabled button. |
-| `iconName`        | `UiIconName`                                                                       | `null`    | If set, represents the name of the Icon before the Button Label      |
-
-### Events
-
-| Name    | Type | Description                            |
-|---------|------|----------------------------------------|
-| `click` | none | triggered when the `button` or `a` element is clicked |
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
+| `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"`  |  |
+| `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` |  |
+| `disabled` | `boolean` | `false` | Whether the `button` is disabled |
 
 ### Slots
 
 | Name      | Description                                 |
 |-----------|---------------------------------------------|
-| `default` | slot for the rendering the button's content |
+| `default` | Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles. |

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 import { createRouter, createWebHistory } from "vue-router";
 
 import UiButton from "./UiButton.vue";
@@ -28,17 +28,17 @@ function createWrapper(
 }
 
 describe("UiButton", () => {
-  it("renders medium size by default", () => {
+  test("renders medium size by default", () => {
     const wrapper = createWrapper();
     expect(wrapper.classes("h-10")).toBe(true);
   });
 
-  it.each(["button", "submit"])("has expected type attribute", (type) => {
+  test.each(["button", "submit"])("has expected type attribute", (type) => {
     const wrapper = createWrapper({ attrs: { type } });
     expect(wrapper.attributes("type")).toBe(type);
   });
 
-  it.each([
+  test.each([
     ["https://example.org/", "https://example.org/"],
     [{ path: "/" }, "/"],
     [undefined, undefined],
@@ -47,44 +47,27 @@ describe("UiButton", () => {
     expect(wrapper.attributes("href")).toBe(expectedHref);
   });
 
-  it("renders small size when prop size is 'small'", () => {
+  test("renders small size when prop size is 'sm'", () => {
     const wrapper = createWrapper({
       props: {
-        size: "small",
+        size: "sm",
       },
     });
 
     expect(wrapper.classes("h-8")).toBe(true);
   });
 
-  it("renders large size when prop size is 'large'", () => {
+  test("renders large size when prop size is 'lg'", () => {
     const wrapper = createWrapper({
       props: {
-        size: "large",
+        size: "lg",
       },
     });
 
     expect(wrapper.classes("h-12")).toBe(true);
   });
 
-  it("should render blue config as default when no color prop is defined", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.classes("bg-blue-600"));
-    expect(wrapper.classes("text-white"));
-  });
-
-  it("should render gray when gray as color prop is set", () => {
-    const wrapper = createWrapper({
-      props: {
-        color: "gray",
-      },
-    });
-    expect(wrapper.classes("text-white"));
-    expect(wrapper.classes("bg-gray-700"));
-    expect(wrapper.classes("hover:bg-gray-800"));
-  });
-
-  it("should disable button when prop is set", () => {
+  test("should disable button when prop is set", () => {
     const wrapper = createWrapper({
       props: {
         disabled: true,
@@ -93,14 +76,14 @@ describe("UiButton", () => {
     expect(wrapper.attributes().disabled).toBeDefined();
   });
 
-  it("should render <button> tag when to prop is not set", () => {
+  test("should render <button> tag when to prop is not set", () => {
     const wrapper = createWrapper();
     expect(wrapper.element.tagName).toBe("BUTTON");
     expect(wrapper.attributes("href")).toBe(undefined);
     expect(wrapper.element.hasAttribute("type")).toBe(true);
   });
 
-  it("should render <a> tag when to prop is set", () => {
+  test("should render <a> tag when to prop is set", () => {
     const wrapper = createWrapper({
       props: {
         to: "https://www.google.de",
@@ -111,19 +94,7 @@ describe("UiButton", () => {
     expect(wrapper.element.hasAttribute("type")).toBe(false);
   });
 
-  it("should render icon when icon name is set", () => {
-    const iconName = "alert";
-    const wrapper = createWrapper({
-      props: {
-        iconName,
-      },
-    });
-    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
-      name: iconName,
-    });
-  });
-
-  it("can overwrite display class", () => {
+  test("can overwrite display class", () => {
     const wrapper = createWrapper({
       props: {
         class: "flex",

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

@@ -1,45 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.ts";
+import UiIcon from "../UiIcon/UiIcon.vue";
 
 import UiButton from "./UiButton.vue";
 
 const meta = {
   title: "Ui/UiButton",
   component: UiButton,
-  argTypes: {
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    disabled: { control: "boolean" },
-    to: { control: "text" },
-    color: {
-      control: "select",
-      options: [
-        "blue",
-        "primary-green",
-        "transparent",
-        "white",
-        "gray",
-        "light-gray",
-      ],
-    },
-    disabledVariant: {
-      control: "select",
-      options: ["primary", "secondary"],
-    },
-    size: {
-      control: "select",
-      options: ["xs", "small", "medium", "large"],
-    },
-  },
   args: {
-    iconName: null,
     disabled: false,
-    color: "blue",
-    size: "large",
-    disabledVariant: "primary",
+    appearance: "primary",
+    size: "md",
     to: undefined,
   },
 } satisfies Meta<typeof UiButton>;
@@ -53,6 +24,55 @@ export const Default: Story = {
       return { args };
     },
     components: { UiButton },
-    template: "<UiButton v-bind='args'>Submit</UiButton>",
+    template: /*html*/ `
+      <UiButton v-bind="args">
+        Save
+      </UiButton>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiButton, UiIcon },
+    template: /*html*/ `
+      <UiButton v-bind="args">
+        <UiIcon name="save" />
+        Save
+      </UiButton>
+    `,
+  }),
+};
+
+export const WithTwoIcons: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiButton, UiIcon },
+    template: /*html*/ `
+      <UiButton v-bind="args">
+        <UiIcon name="edit" />
+        Edit
+        <UiIcon name="chevron-down" />
+      </UiButton>
+    `,
+  }),
+};
+
+export const IconOnlyAndAriaLabel: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiButton, UiIcon },
+    template: /*html*/ `
+      <UiButton v-bind="args" aria-label="Save">
+        <UiIcon name="save" />
+      </UiButton>
+    `,
   }),
 };

package/dist/src/components/UiButton/UiButton.vue

@@ -1,140 +1,84 @@
 <template>
   <component
-    :is="component"
+    :is="typeof to === 'string' ? 'a' : to ? 'RouterLink' : 'button'"
     :class="
       cn(
-        'UiButton inline-flex items-center rounded-full leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
-        size === 'xs' ? 'px-2' : 'px-4',
-        variantClassName,
-        sizeClassName,
-        $attrs.class as string,
+        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:focus-outline disabled:cursor-not-allowed',
+        appearanceClasses,
+        BUTTON_SIZE_CLASSES[size],
+        $attrs.class,
       )
     "
-    v-bind="attributes"
-    @click="emit('click')"
+    v-bind="{ ...attributes, class: undefined }"
   >
-    <UiIcon v-if="iconName" :name="iconName" :size="iconSize" class="mr-2" />
-    <slot></slot>
+    <template v-for="(vNode, index) in $slots.default?.()" :key="index">
+      <span v-if="vNode.type === Text"><component :is="vNode" /></span>
+      <template v-else><component :is="vNode" /></template>
+    </template>
   </component>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, Text } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
+import type { Size } from "../../types/index.ts";
 import { cn } from "../../utils/cn.ts";
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const emit = defineEmits<{
-  click: [];
-}>();
+const BUTTON_SIZE_CLASSES = {
+  xs: "h-6 text-xs [&:has(>svg:only-child)]:w-6 [&:not(:has(>svg:only-child))]:px-2 [&>svg]:size-3 [&:has(>svg:only-child)>svg]:size-4",
+  sm: "h-8 text-sm [&:has(>svg:only-child)]:w-8 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-4 [&:has(>svg:only-child)>svg]:size-6",
+  md: "h-10 text-base [&:has(>svg:only-child)]:w-10 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
+  lg: "h-12 text-base [&:has(>svg:only-child)]:w-12 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
+} satisfies Partial<Record<Size, string>>;
 
-const props = withDefaults(
-  defineProps<{
-    to?: RouteLocationRaw;
-    iconName?: UiIconName | null;
-    size?: "xs" | "small" | "medium" | "large";
-    color?:
-      | "blue"
-      | "transparent"
-      | "white"
-      | "gray"
-      | "light-gray"
-      | "primary-green";
-    disabledVariant?: "primary" | "secondary";
-    disabled?: boolean;
-  }>(),
-  {
-    to: undefined,
-    iconName: null,
-    size: "medium",
-    color: "blue",
-    disabledVariant: "primary",
-    disabled: false,
-  },
-);
+defineSlots<{
+  /**
+   * Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles.
+   */
+  default: () => any;
+}>();
 
-const component = computed(() =>
-  typeof props.to === "string" ? "a" : props.to ? "RouterLink" : "button",
-);
+const {
+  to = undefined,
+  size = "md",
+  appearance = "primary",
+  disabled = false,
+} = defineProps<{
+  to?: RouteLocationRaw;
+  size?: keyof typeof BUTTON_SIZE_CLASSES;
+  appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
+  disabled?: boolean;
+}>();
 
 const attributes = computed(() => {
   const attrs: Record<string, unknown> = {};
 
-  if (typeof props.to === "string") {
-    attrs.href = props.to;
-  } else if (props.to) {
-    attrs.to = props.to;
+  if (typeof to === "string") {
+    attrs.href = to;
+  } else if (to) {
+    attrs.to = to;
   } else {
-    attrs.disabled = props.disabled;
+    attrs.disabled = disabled;
     attrs.type = "button";
   }
 
   return attrs;
 });
 
-const variantClassName = computed((): string => {
-  const btnColor = props.disabled ? "disabled" : props.color;
-  switch (btnColor) {
-    case "blue": {
-      return `text-white bg-blue-default hover:bg-blue-dark`;
-    }
-    case "primary-green": {
-      return `text-white bg-green-primary hover:bg-night-green`;
-    }
-    case "transparent": {
-      return `text-blue-default bg-transparent border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
-    }
-    case "white": {
-      return `text-blue-default bg-white border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
-    }
-    case "gray": {
-      return `text-white bg-gray-700 hover:bg-gray-800`;
-    }
-    case "light-gray": {
-      return `text-gray-800 bg-gray-100`;
-    }
-    case "disabled": {
-      if (props.disabledVariant === "primary") {
-        return `text-gray-400 bg-gray-100`;
-      } else {
-        return `text-gray-400 bg-white border border-gray-400`;
-      }
-    }
-    default: {
-      return `text-white bg-blue-default hover:bg-blue-dark`;
-    }
-  }
-});
-
-const sizeClassName = computed((): string => {
-  const btnSize = props.size;
-  switch (btnSize) {
-    case "xs": {
-      return "h-6 text-xs";
-    }
-    case "small": {
-      return "h-8 text-sm";
-    }
-    case "medium": {
-      return "h-10 text-base";
-    }
-    case "large": {
-      return "h-12 text-base";
-    }
-    default: {
-      return "h-10 text-base";
-    }
-  }
-});
-
-const iconSize = computed((): "xs" | "small" | "medium" | "large" => {
-  if (props.size === "xs") {
-    return "xs";
-  }
-  if (props.size === "small") {
-    return "small";
-  }
-  return "medium";
-});
+const appearanceClasses = computed(
+  () =>
+    ({
+      primary:
+        "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
+      secondary:
+        "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
+      "secondary-alt":
+        "border-neutral-faint bg-neutral text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+      tertiary:
+        "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
+      ghost:
+        "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+    })[appearance],
+);
 </script>

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

@@ -10,6 +10,7 @@ type PropsAndStoryProps = InstanceType<typeof UiButtonGroup> & {
 };
 
 const meta = {
+  tags: ["deprecated"],
   argTypes: {
     activeButton: { control: "number" },
   },
@@ -33,13 +34,13 @@ export const Default: Story = {
     },
     template: `
       <UiButtonGroup>
-        <UiButton :color="activeButton === 1 ? 'blue' : 'light-gray'" @click="activateButton(1)">
+        <UiButton :appearance="activeButton === 1 ? 'primary' : 'ghost'" @click="activateButton(1)">
           Group
         </UiButton>
         <UiButton disabled disabled-variant="primary" @click="activateButton(2)">
           of
         </UiButton>
-        <UiButton :color="activeButton === 3 ? 'blue' : 'light-gray'" @click="activateButton(3)">
+        <UiButton :appearance="activeButton === 3 ? 'primary' : 'ghost'" @click="activateButton(3)">
           buttons
         </UiButton>
       </UiButtonGroup>

package/dist/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,7 +1,29 @@
 <template>
   <div
-    class="flex *:rounded-none *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
+    class="flex *:rounded-none *:border *:border-r-0 *:border-neutral-faint [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
   >
     <slot />
   </div>
 </template>
+
+<script lang="ts">
+import { onMounted } from "vue";
+
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiMenuList",
+  setup() {
+    onMounted(() => {
+      if (window.location.origin.includes("local")) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          "Component is deprecated. It will be removed in a future update.",
+        );
+      }
+    });
+  },
+};
+</script>