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

package/dist/src/components/UiTextButton/UiTextButton.vue

@@ -21,8 +21,27 @@
     />
   </component>
 </template>
+<script lang="ts">
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiTextButton",
+  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>
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
@@ -76,9 +95,9 @@ const weightClassName = computed((): string => {
     fontClass = "font-semibold rounded-lg";
 
     if (props.placement === "onsurface") {
-      hoverClass = "hover:bg-gray-100";
+      hoverClass = "hover:bg-neutral-whisper";
     } else if (props.placement === "oncanvas") {
-      hoverClass = "hover:bg-gray-200";
+      hoverClass = "hover:bg-neutral-pale";
     }
   }
 
@@ -108,22 +127,22 @@ const textClassName = computed((): string => {
 
 const colorClass = computed((): string => {
   if (props.color === "blue") {
-    return "text-blue-default";
+    return "text-primary";
   } else if (props.color === "gray") {
     if (props.placement === "onsurface") {
-      return "text-gray-700";
+      return "text-neutral-subtle";
     } else if (props.placement === "oncanvas") {
-      return "text-gray-800";
+      return "text-neutral-emphasis";
     }
   }
   return "";
 });
 
-const iconSize = computed((): "small" | "medium" => {
+const iconSize = computed((): "sm" | "md" => {
   if (props.size === "xsmall") {
-    return "small";
+    return "sm";
   } else {
-    return "medium";
+    return "md";
   }
 });
 

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

@@ -5,38 +5,39 @@
 ```html
 <!-- SomeComponent.vue using UiToggleButton -->
 <template>
-  <UiToggleButton labelText="Toggle me" v-model="value" />
+  <UiToggleButton v-model="value">Toggle me</UiToggleButton>
 </template>
 
+
 <script setup lang="ts">
   import { UiToggleButton } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
 
+
 ## API
 
 ### Props
 
-| Name            | Type      | Default   | Description                                              |
-| --------------- | --------- |-----------|----------------------------------------------------------|
-| `labelText`     | `String`  | ``        | Sets label for the Toggle                                |
-| `labelSpace`    | `String`  | `default` | For more space between label and toggle set this to "xl" |
-| `labelPosition` | `String`  | `left`    | To place the label to the right side set this to "right" |
-| `labelTextSize` | `String`  | `xs`      | Adjust the label-font-size to your needs                 |
-| `labelVisible`  | `boolean` | `true`    | Whether the label visible or not. Set to `false` to visually hide the label while keeping it accessible. |
-| `modelValue`    | `Boolean` | `false`   | The `checked` state of the checkbox                      |
-| `disabled`      | `Boolean` | `false`   | Wether the `button` is disabled                          |
-| `color`         | `String`  | `blue`    | Sets the `color` of the toggle while it is active        |
-| `size`          | `String`  | `small`   | Sets the element's `size` to either "small" or "large"   |
+| Name            | Type      | Default | Description                                                  |
+|-----------------|-----------|---------|--------------------------------------------------------------|
+| `id`            | `String`  |         | Sets the `id` of the input. Auto-generated if not provided.  |
+| `modelValue`    | `Boolean` | `false` | The `checked` state of the checkbox                          |
+| `labelPosition` | `String`  | `left`  | To place the label to the right side set this to `"right"`   |
+| `size`          | `String`  | `sm`    | Sets the element's size to either `"sm"` or `"lg"`           |
+
+### Attributes
+
+HTML attributes like `disabled`, `aria-label`, etc. are forwarded to the underlying `<input>` element via `v-bind="$attrs"`.
 
 ### Slots
 
 | Name      | Description   |
-| --------- | ------------- |
+|-----------|---------------|
 | `default` | Label content |
 
 ### Events
 
 | Name                 | Type      | Description                            |
-| -------------------- | --------- | -------------------------------------- |
-| `update:model-value` | `boolean` |  |
+|----------------------|-----------|----------------------------------------|
+| `update:model-value` | `boolean` |                                        |

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

@@ -3,87 +3,73 @@ import { describe, expect, it } from "vitest";
 
 import UiToggleButton from "./UiToggleButton.vue";
 
+function mountToggle(props = {}, slotContent = "Label") {
+  return mount(UiToggleButton, {
+    props,
+    slots: { default: slotContent },
+  });
+}
+
 describe("UiToggleButton", () => {
-  const labelText = "Foo";
-  const wrapper = mount(UiToggleButton, {
-    props: {
-      modelValue: false,
-      disabled: false,
-      labelText: labelText,
-    },
+  it("renders with correct defaults when no props are provided", () => {
+    const wrapper = mountToggle();
+
+    const input = wrapper.find("[data-testid='toggleButton']");
+    const inputEl = input.element as HTMLInputElement;
+
+    expect(inputEl.checked).toBe(false);
+    expect(inputEl.disabled).toBe(false);
+    expect(input.attributes("id")).toBeTruthy();
   });
 
-  it("shows correct label text ", () => {
-    expect(wrapper.text()).toContain(labelText);
+  it("renders slot content", () => {
+    const wrapper = mountToggle({}, "Slot Label");
+
+    expect(wrapper.text()).toContain("Slot Label");
   });
 
-  it("emits correct event when clicked", async () => {
+  it("emits update:modelValue when clicked", async () => {
+    const wrapper = mountToggle({ modelValue: false });
+
     const input = wrapper.find("[data-testid='toggleButton']");
+    await input.setValue(true);
 
-    await input.trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
   });
 
-  it("should render correct colors when checked", async () => {
-    await wrapper.setProps({
-      modelValue: true,
-      color: "green",
-    });
-
-    const dot = wrapper.find(".dot");
-    const line = wrapper.find(".line");
-    expect((dot.element as HTMLInputElement).className).toContain(
-      "translate-x-full bg-green-primary",
-    );
-    expect((line.element as HTMLInputElement).className).toContain(
-      "opacity-50",
-    );
-  });
+  it("emits update:modelValue false when toggled from true", async () => {
+    const wrapper = mountToggle({ modelValue: true });
 
-  it("should render correct size when size=small", async () => {
-    await wrapper.setProps({
-      modelValue: true,
-      size: "small",
-    });
+    const input = wrapper.find("[data-testid='toggleButton']");
+    await input.setValue(false);
 
-    const dot = wrapper.find(".dot");
-    const line = wrapper.find(".line");
-    expect((dot.element as HTMLInputElement).className).toContain("h-4 w-4");
-    expect((line.element as HTMLInputElement).className).toContain("h-3 w-6");
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
   });
 
-  it("should render correct size when size=large", async () => {
-    await wrapper.setProps({
-      modelValue: true,
-      size: "large",
-    });
+  it("disables the input when disabled prop is set", () => {
+    const wrapper = mountToggle({ disabled: true });
+
+    const input = wrapper.find("[data-testid='toggleButton']");
 
-    const dot = wrapper.find(".dot");
-    const line = wrapper.find(".line");
-    expect((dot.element as HTMLInputElement).className).toContain("h-6 w-6");
-    expect((line.element as HTMLInputElement).className).toContain("h-4 w-10");
+    expect((input.element as HTMLInputElement).disabled).toBe(true);
   });
 
-  it("should show correct disabled value when props are set", async () => {
-    await wrapper.setProps({
-      disabled: true,
-    });
+  it("does not emit update:modelValue when disabled", async () => {
+    const wrapper = mountToggle({ disabled: true, modelValue: false });
 
     const input = wrapper.find("[data-testid='toggleButton']");
-    expect((input.element as HTMLInputElement).disabled).toBeTruthy();
+    await input.setValue(true);
+
+    expect(wrapper.emitted("update:modelValue")).toBeFalsy();
   });
 
-  it("should render slot content", () => {
-    const wrapperWithSlotContent = mount(UiToggleButton, {
-      props: {
-        modelValue: false,
-        disabled: false,
-      },
-      slots: {
-        default: "Slot Label",
-      },
-    });
-    expect(wrapperWithSlotContent.text()).toContain("Slot Label");
+  it("uses provided id on the input", () => {
+    const wrapper = mountToggle({ id: "custom-id" });
+
+    const input = wrapper.find("[data-testid='toggleButton']");
+
+    expect(input.attributes("id")).toBe("custom-id");
   });
 });

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

@@ -6,46 +6,24 @@ import UiIcon from "../UiIcon/UiIcon.vue";
 import UiToggleButton from "./UiToggleButton.vue";
 
 const meta = {
-  title: "Ui/UiToggleButton",
+  title: "forms/UiToggleButton",
   component: UiToggleButton,
   argTypes: {
-    color: {
-      control: { type: "select" },
-      options: ["blue", "green"],
-    },
     size: {
       control: { type: "select" },
-      options: ["small", "large"],
+      options: ["sm", "lg"],
     },
     modelValue: {
       control: "boolean",
     },
-    disabled: {
-      control: "boolean",
-    },
-    labelText: {
-      control: "text",
-    },
-    labelSpace: {
-      control: "select",
-      options: ["default", "xl"],
-    },
     labelPosition: {
       control: "select",
       options: ["left", "right"],
     },
-    labelTextSize: {
-      control: "select",
-      options: ["xs", "sm", "md", "lg"],
-    },
   },
   args: {
-    color: "blue",
-    size: "small",
+    size: "sm",
     modelValue: false,
-    disabled: false,
-    labelSpace: "default",
-    labelTextSize: "xs",
     labelPosition: "left",
   },
 } satisfies Meta<typeof UiToggleButton>;
@@ -68,36 +46,48 @@ export const Default: Story = {
   }),
 };
 
-export const MultipleToggles: Story = {
+export const WithIcon: Story = {
   render: (args) => ({
     setup() {
       const isChecked = ref(args.modelValue);
-      const secondToggle = ref(true);
-      return { args, isChecked, secondToggle };
+      return { args, isChecked };
+    },
+    components: { UiToggleButton, UiIcon },
+    template: `
+      <UiToggleButton v-bind="args" v-model="isChecked">
+      <div class="flex items-center">
+        <UiIcon size="sm" name="flag" />
+        <span class="pl-1.5">Label</span></div>
+      </UiToggleButton>`,
+  }),
+};
+
+export const WithoutLabel: Story = {
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      return { args, isChecked };
     },
     components: { UiToggleButton },
     template: `
-      <UiToggleButton label-text="first" v-bind='args' v-model='isChecked' />
-      <UiToggleButton label-text="second" color="green" v-model='secondToggle' />
+      <UiToggleButton v-bind="args" v-model="isChecked">
+        <span class="sr-only">Accessible label</span>
+      </UiToggleButton>
     `,
   }),
 };
 
-export const WithSlot: Story = {
-  args: {
-    color: "green",
-  },
+export const Disabled: Story = {
   render: (args) => ({
     setup() {
       const isChecked = ref(args.modelValue);
       return { args, isChecked };
     },
-    components: { UiToggleButton, UiIcon },
+    components: { UiToggleButton },
     template: `
-      <UiToggleButton v-bind="args" v-model="isChecked">
-      <div class="flex items-center text-gray-800">
-        <UiIcon size="small" name="flag-filled" />
-        <span class="pl-1.5">Label</span></div>
-      </UiToggleButton>`,
+      <UiToggleButton v-bind="args" v-model="isChecked" disabled>
+        Label
+      </UiToggleButton>
+    `,
   }),
 };

package/dist/src/components/UiToggleButton/UiToggleButton.vue

@@ -1,76 +1,57 @@
 <template>
-  <div>
-    <UiLabel :for="toggleId" class="flex cursor-pointer text-base">
+  <UiLabel
+    :for="toggleId"
+    :class="
+      cn(
+        'inline-flex cursor-pointer gap-2 align-middle leading-4 font-normal text-neutral-emphasis',
+        $attrs.class,
+      )
+    "
+  >
+    <slot v-if="labelPosition === 'left'" />
+    <div class="relative">
+      <input
+        :id="toggleId"
+        v-model="modelValue"
+        type="checkbox"
+        data-testid="toggleButton"
+        role="switch"
+        class="sr-only"
+        v-bind="{ ...$attrs, class: null }"
+      />
       <div
-        v-if="$slots.default"
-        class="whitespace-nowrap"
+        class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
         :class="{
-          [labelSpaceClass]: true,
-          'order-2': !isLabelPositionLeft,
-          'sr-only': !labelVisible,
+          'bg-secondary opacity-50': modelValue,
+          'bg-neutral-faint': !modelValue,
+          'h-3 w-6': size === 'sm',
+          'h-4 w-10': size === 'lg',
         }"
-      >
-        <slot />
-      </div>
+      />
       <div
-        v-if="isLabelPositionLeft && !$slots.default"
-        class="leading-4 font-normal whitespace-nowrap text-gray-800"
-        :class="[labelSpaceClass, labelTextSizeClass]"
-      >
-        {{ labelText }}
-      </div>
-      <div class="relative">
-        <input
-          :id="toggleId"
-          type="checkbox"
-          data-testid="toggleButton"
-          role="checkbox"
-          :aria-checked="modelValue"
-          tabindex="0"
-          class="sr-only"
-          :disabled="disabled"
-          :aria-label="labelText"
-          @click="emit('update:modelValue', !modelValue)"
-        />
-        <div
-          class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
-          :class="{
-            'opacity-50': modelValue,
-            [colorClass]: modelValue,
-            'bg-gray-300': !modelValue,
-            [lineSize]: true,
-          }"
-        />
-        <div
-          :class="{
-            'translate-x-full': modelValue,
-            [colorClass]: modelValue,
-            'bg-gray-500': !modelValue,
-            [dotSize]: true,
-          }"
-          class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
-        />
-      </div>
-      <div
-        v-if="!isLabelPositionLeft && !$slots.default"
-        class="leading-4 font-normal whitespace-nowrap text-gray-800"
-        :class="[labelSpaceClass, labelTextSizeClass]"
-      >
-        {{ labelText }}
-      </div>
-    </UiLabel>
-  </div>
+        :class="{
+          'translate-x-full bg-secondary': modelValue,
+          'bg-neutral-muted': !modelValue,
+          '-top-0.5 size-4': size === 'sm',
+          '-top-1 size-6': size === 'lg',
+        }"
+        class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      />
+    </div>
+
+    <slot v-if="labelPosition === 'right'" />
+  </UiLabel>
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
-import { computed, ref } from "vue";
+import { computed, useId } from "vue";
 
+import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
-const emit = defineEmits<{
-  "update:modelValue": [boolean];
-}>();
+defineOptions({ inheritAttrs: false });
+
+const modelValue = defineModel<boolean>({ default: false });
 
 defineSlots<{
   /**
@@ -79,72 +60,16 @@ defineSlots<{
   default?: () => any;
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    id?: string;
-    modelValue?: boolean;
-    disabled?: boolean;
-    labelText?: string;
-    labelSpace?: "default" | "xl";
-    labelTextSize?: "xs" | "sm" | "md" | "lg";
-    labelPosition?: "left" | "right";
-    labelVisible?: boolean;
-    color?: "blue" | "green";
-    size?: "small" | "large";
-  }>(),
-  {
-    id: undefined,
-    modelValue: false,
-    disabled: false,
-    labelText: "",
-    labelTextSize: "xs",
-    labelSpace: "default",
-    labelPosition: "left",
-    labelVisible: true,
-    color: "blue",
-    size: "small",
-  },
-);
-
-const toggleId = ref(props.id ?? `toggle-id-${uuidv4()}`);
-
-const labelSpaceClass = computed(() => {
-  return props.labelPosition === "left"
-    ? props.labelSpace === "default"
-      ? "mr-3"
-      : "mr-12"
-    : props.labelSpace === "default"
-      ? "ml-3"
-      : "ml-12";
-});
-
-const labelTextSizeClass = computed(() => {
-  switch (props.labelTextSize) {
-    case "xs":
-      return "text-xs";
-    case "sm":
-      return "text-sm";
-    case "md":
-      return "text-md";
-    case "lg":
-      return "text-lg";
-    default:
-      return "text-xs";
-  }
-});
-
-const isLabelPositionLeft = computed(() => {
-  return props.labelPosition === "left";
-});
-
-const colorClass = computed(() => {
-  return props.color === "blue" ? "bg-blue-default" : "bg-green-primary";
-});
+const {
+  id = undefined,
+  labelPosition = "left",
+  size = "sm",
+} = defineProps<{
+  id?: string;
+  labelPosition?: "left" | "right";
+  size?: "sm" | "lg";
+}>();
 
-const lineSize = computed(() => {
-  return props.size === "small" ? "h-3 w-6" : "h-4 w-10";
-});
-const dotSize = computed(() => {
-  return props.size === "small" ? "h-4 w-4 top-[-2px]" : "h-6 w-6 top-[-4px]";
-});
+const defaultId = useId();
+const toggleId = computed(() => id ?? `id-${defaultId}`);
 </script>

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

@@ -5,16 +5,15 @@
 ```html
 <!-- SomeComponent.vue using UiTooltip -->
 <template>
-  <div style="margin: 50px; max-width: max-content;">
-    <UiTooltip>
-      <template v-slot:activator>
-        <button>Target</button>
-      </template>
-      Tooltip Content
-    </UiTooltip>
-  </div>
+  <UiTooltip>
+    <template #activator>
+      <button>Target</button>
+    </template>
+    Tooltip Content
+  </UiTooltip>
 </template>
 
+
 <script lang="ts" setup>
   import UiTooltip from "@dpa-id-components/dpa-shared-components";
 </script>
@@ -24,34 +23,24 @@
 
 ### Props
 
-| Name                 | Type                        | Default                             | Description                                                                                                                                                                             |
-|----------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `position`           | `String`                    | `bottom-center`                     | Position of the tooltip relative to the activator slot                                                                                                                                  |
-| `structuredLayout`   | `Boolean`                   | `false`                             | Whether the structured layout should be used                                                                                                                                            |
-| `structuredInfo`     | `Array`                     | `[]`                                | Contains structured data for structured tooltips                                                                                                                                        |
-| `fixed`              | `Boolean`                   | `false`                             | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
-| `multilines`         | `Boolean`                   | `false`                             | Whether the tooltip text has max-width (ideal for long tooltip-text)                                                                                                                    |
-| `tooltipClasses`     | `String`                    | `''`                                | Classes added to the tooltip Element                                                                                                                                                    |
-| `floatingUiOptions`  | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
-| `animate`            | `Boolean`                   | `false`                             | Wether the tooltip should be animated                                                                                                                                                   |
-| `transitionClasses`  | `Record<Placement, string>` | `false`                             | Transition classes used based on position, the defaults are noted below                                                                                                                 |
-| `enterActiveClasses` | `string`                    | `transition duration-300 delay-500` | Classes that can be used to define the duration, delay and easing curve for the entering transition.                                                                                    |
-| `leaveActiveClasses` | `string`                    | `transition`                        | Classes that can be used to define the duration, delay and easing curve for the leaving transition                                                                                      |
-| `disabled`           | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
-
-##### Default transition Classes
-```js
-{
-      "top-start": "scale-95 opacity-0 -translate-y-2 ",
-      top: "scale-95 opacity-0 -translate-y-2 ",
-      "top-end": "scale-95 opacity-0 -translate-y-2",
-      right: "scale-95 opacity-0 translate-x-2",
-      "bottom-end": "scale-95 opacity-0 translate-y-2 ",
-      bottom: "scale-95 opacity-0 translate-y-2",
-      "bottom-start": "scale-95 opacity-0 translate-y-2",
-      left: "scale-95 opacity-0 -translate-x-2",
-}
-```
+| Name                | Type                        | Default                             | Description                                                                                                                                                                             |
+|---------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `position`          | `Placement`                 | `bottom`                            | Position of the tooltip relative to the activator slot                                                                                                                                  |
+| `fixed`             | `Boolean`                   | `true`                              | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
+| `floatingUiOptions` | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
+| `animate`           | `Boolean`                   | `false`                             | Whether the tooltip should be animated                                                                                                                                                  |
+| `hidden`            | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
+
+### Attributes
+
+### Attributes
+
+The `class` attribute is forwarded to the component's root element, so e.g. `<UiTooltip class="mt-4">` styles the outer wrapper (useful for layout or positioning).
+The root element has `inline-block` and `align-middle` as default classes, which can be overridden via `tailwind-merge`.
+
+All other attributes (`aria-*`, `data-*`, event listeners, etc.) are forwarded to the inner tooltip content element via `v-bind="$attrs"`.
+
+To style the tooltip content itself, wrap the slot content in your own element with the desired classes.
 
 
 ### Slots