@dpa-id-components/dpa-shared-components 16.0.1 → 17.0.0

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

@@ -0,0 +1,153 @@
+<template>
+  <component
+    :is="tagName"
+    :href="href"
+    :class="classNames"
+    class="inline-flex items-center"
+    :target="target"
+  >
+    <UiIcon
+      v-if="iconLeft"
+      :class="iconLeftMarginClass"
+      :name="iconLeft"
+      :size="iconSize"
+    />
+    <slot />
+    <UiIcon
+      v-if="iconRight"
+      :class="iconRightMarginClass"
+      :name="iconRight"
+      :size="iconSize"
+    />
+  </component>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+const props = withDefaults(
+  defineProps<{
+    color?: "blue" | "gray";
+    href?: string;
+    iconLeft?: UiIconName;
+    iconRight?: UiIconName;
+    placement?: "onsurface" | "oncanvas";
+    size?: "xsmall" | "small" | "medium";
+    weight?: "regular" | "semibold";
+    linkTarget?: string;
+  }>(),
+  {
+    color: "blue",
+    href: undefined,
+    iconLeft: undefined,
+    iconRight: undefined,
+    placement: "onsurface",
+    size: "medium",
+    weight: "regular",
+    linkTarget: "_self",
+  },
+);
+
+const tagName = computed((): string => {
+  if (props.href?.length) {
+    return "a";
+  }
+
+  return "button";
+});
+
+const target = computed((): string => {
+  if (props.href?.length) {
+    return props.linkTarget;
+  }
+  return "";
+});
+
+const weightClassName = computed((): string => {
+  let fontClass, hoverClass;
+
+  if (props.weight === "regular") {
+    fontClass = "font-normal";
+    hoverClass = "hover:underline";
+  }
+
+  if (props.weight === "semibold") {
+    fontClass = "font-semibold rounded-lg";
+
+    if (props.placement === "onsurface") {
+      hoverClass = "hover:bg-gray-100";
+    } else if (props.placement === "oncanvas") {
+      hoverClass = "hover:bg-gray-200";
+    }
+  }
+
+  return `${fontClass} ${hoverClass}`;
+});
+
+const paddingClass = computed((): string => {
+  if (props.weight === "semibold") {
+    if (props.size === "medium") {
+      return "px-2 -mx-2";
+    } else if (props.size === "small" || props.size === "xsmall") {
+      return "px-1 -mx-1";
+    }
+  }
+  return "";
+});
+
+const textClassName = computed((): string => {
+  if (props.size === "xsmall") {
+    return "text-xs";
+  } else if (props.size === "small") {
+    return "text-sm";
+  } else {
+    return "text-base";
+  }
+});
+
+const colorClass = computed((): string => {
+  if (props.color === "blue") {
+    return "text-blue-default";
+  } else if (props.color === "gray") {
+    if (props.placement === "onsurface") {
+      return "text-gray-700";
+    } else if (props.placement === "oncanvas") {
+      return "text-gray-800";
+    }
+  }
+  return "";
+});
+
+const iconSize = computed((): "small" | "medium" => {
+  if (props.size === "xsmall") {
+    return "small";
+  } else {
+    return "medium";
+  }
+});
+
+const iconLeftMarginClass = computed((): string => {
+  if (props.size === "xsmall") {
+    return "mr-1";
+  } else {
+    return "mr-2";
+  }
+});
+
+const iconRightMarginClass = computed((): string => {
+  if (props.size === "xsmall") {
+    return "ml-1";
+  } else {
+    return "ml-2";
+  }
+});
+
+const classNames = computed((): string[] => {
+  return [
+    paddingClass.value,
+    textClassName.value,
+    weightClassName.value,
+    colorClass.value,
+  ];
+});
+</script>

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

@@ -0,0 +1,42 @@
+# @dpa-shared-components/UiToggleButton
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiToggleButton -->
+<template>
+  <UiToggleButton labelText="Toggle me" v-model="value" />
+</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"   |
+
+### Slots
+
+| Name      | Description                                  |
+| --------- | -------------------------------------------- |
+| `default` | slot for custom content and styling of label |
+
+### Events
+
+| Name                 | Type      | Description                            |
+| -------------------- | --------- | -------------------------------------- |
+| `update:model-value` | `boolean` |  |

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

@@ -0,0 +1,88 @@
+import UiToggleButton from "./UiToggleButton.vue";
+import { mount } from "@vue/test-utils";
+import { expect, describe, it } from "vitest";
+
+describe("UiToggleButton", () => {
+  const labelText = "Foo";
+  const wrapper = mount(UiToggleButton, {
+    props: {
+      modelValue: false,
+      disabled: false,
+      labelText: labelText,
+    },
+  });
+
+  it("shows correct label text ", () => {
+    expect(wrapper.text()).toContain(labelText);
+  });
+
+  it("emits correct event when clicked", async () => {
+    const input = wrapper.find("[data-testid='toggleButton']");
+
+    await input.trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
+  });
+
+  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("should render correct size when size=small", async () => {
+    await wrapper.setProps({
+      modelValue: true,
+      size: "small",
+    });
+
+    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");
+  });
+
+  it("should render correct size when size=large", async () => {
+    await wrapper.setProps({
+      modelValue: true,
+      size: "large",
+    });
+
+    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");
+  });
+
+  it("should show correct disabled value when props are set", async () => {
+    await wrapper.setProps({
+      disabled: true,
+    });
+
+    const input = wrapper.find("[data-testid='toggleButton']");
+    expect((input.element as HTMLInputElement).disabled).toBeTruthy();
+  });
+
+  it("should render slot content", () => {
+    const wrapperWithSlotContent = mount(UiToggleButton, {
+      props: {
+        modelValue: false,
+        disabled: false,
+      },
+      slots: {
+        default: "Slot Label",
+      },
+    });
+    expect(wrapperWithSlotContent.text()).toContain("Slot Label");
+  });
+});

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

@@ -0,0 +1,101 @@
+import UiToggleButton from "./UiToggleButton.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiToggleButton",
+  component: UiToggleButton,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["blue", "green"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "large"],
+    },
+    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",
+    modelValue: false,
+    disabled: false,
+    labelSpace: "default",
+    labelTextSize: "xs",
+    labelPosition: "left",
+  },
+} satisfies Meta<typeof UiToggleButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      return { args, isChecked };
+    },
+    components: { UiToggleButton },
+    template: `
+      <UiToggleButton v-bind='args' v-model='isChecked'>
+        Label
+      </UiToggleButton>
+    `,
+  }),
+};
+
+export const MultipleToggles: Story = {
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      const secondToggle = ref(true);
+      return { args, isChecked, secondToggle };
+    },
+    components: { UiToggleButton },
+    template: `
+      <UiToggleButton label-text="first" v-bind='args' v-model='isChecked' />
+      <UiToggleButton label-text="second" color="green" v-model='secondToggle' />
+    `,
+  }),
+};
+
+export const WithSlot: Story = {
+  args: {
+    color: "green",
+  },
+  render: (args) => ({
+    setup() {
+      const isChecked = ref(args.modelValue);
+      return { args, isChecked };
+    },
+    components: { UiToggleButton, UiIcon },
+    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>`,
+  }),
+};

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

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <label :for="toggleId" class="flex cursor-pointer items-center">
+      <div
+        v-if="$slots.default"
+        class="whitespace-nowrap"
+        :class="{
+          [labelSpaceClass]: true,
+          'order-2': !isLabelPositionLeft,
+          'sr-only': !labelVisible,
+        }"
+      >
+        <slot />
+      </div>
+      <div
+        v-if="isLabelPositionLeft && !$slots.default"
+        class="whitespace-nowrap font-normal leading-4 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 transition-transform duration-200 ease-in-out"
+        />
+      </div>
+      <div
+        v-if="!isLabelPositionLeft && !$slots.default"
+        class="whitespace-nowrap font-normal leading-4 text-gray-800"
+        :class="[labelSpaceClass, labelTextSizeClass]"
+      >
+        {{ labelText }}
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+const toggleId = ref(`toggle-id-${uuidv4()}`);
+
+const emit = defineEmits<{
+  "update:modelValue": [boolean];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    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";
+  }>(),
+  {
+    modelValue: false,
+    disabled: false,
+    labelText: "",
+    labelTextSize: "xs",
+    labelSpace: "default",
+    labelPosition: "left",
+    labelVisible: true,
+    color: "blue",
+    size: "small",
+  },
+);
+
+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 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]";
+});
+</script>

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

@@ -0,0 +1,61 @@
+# @dpa-shared-components/UiTooltip
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiTooltip -->
+<template>
+  <div style="margin: 50px; max-width: max-content;">
+    <ui-tooltip>
+      <template v-slot:activator>
+        <button>Target</button>
+      </template>
+      Tooltip Content
+    </ui-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import UiTooltip from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### 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                                                                                      |
+
+##### 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",
+}
+```
+
+
+### Slots
+
+| Name        | Description                                  |
+|-------------|----------------------------------------------|
+| `default`   | Default slot for text/content of the tooltip |
+| `activator` | Slot for tooltip activator                   |

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

@@ -0,0 +1,113 @@
+import UiTooltip from "./UiTooltip.vue";
+import { mount } from "@vue/test-utils";
+import { expect, describe, it } from "vitest";
+
+document.body.innerHTML = `
+    <div id="app"></div>
+`;
+
+describe("UiTooltip", () => {
+  it("shows correct content", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        default: "tooltip content",
+      },
+    });
+    expect(wrapper.text()).toBe("tooltip content");
+  });
+
+  it("uses the structured tooltip", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+        structuredLayout: true,
+        structuredInfo: [
+          {
+            title: "Typ",
+            description: "Termine",
+          },
+          {
+            title: "Ressort",
+            description: "Wirtschaft",
+          },
+        ],
+      },
+    });
+    const firstEl = wrapper.findAll("li")[0];
+    const secondEl = wrapper.findAll("li")[1];
+    expect(firstEl.text()).toBe("TypTermine");
+    expect(secondEl.text()).toBe("RessortWirtschaft");
+  });
+
+  it("is not rendered without mouseover", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        activator: "<button>activate</button>",
+      },
+    });
+
+    expect(
+      wrapper.find('[data-testid="tooltipElement"]').isVisible(),
+    ).toBeFalsy();
+  });
+
+  it("is rendered upon mouseover", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+      },
+      slots: {
+        activator: "<button>Hover me</button>",
+      },
+    });
+    const activator = wrapper.find('[data-testid="activator"]');
+    await activator.trigger("mouseenter");
+
+    expect(wrapper.find('[data-testid="tooltip"]').classes("hidden")).toBe(
+      false,
+    );
+  });
+
+  it("is rendered in the correct position", async () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: false,
+        position: "right",
+      },
+      slots: {
+        activator: "<button>Hover me</button>",
+      },
+    });
+    const activator = wrapper.find('[data-testid="activator"]');
+    await activator.trigger("mouseenter");
+
+    expect(
+      wrapper.find('[data-testid="tooltip"]').attributes("data-placement"),
+    ).toBe("right");
+  });
+
+  it("is in a fixed position", () => {
+    const wrapper = mount(UiTooltip, {
+      props: {
+        fixed: true,
+      },
+    });
+
+    // Find Tooltip that is teleported to the body
+    const tooltip = document.querySelector(
+      '[data-testid="tooltip"]',
+    ) as HTMLElement;
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.style.position).toBe("fixed");
+
+    // Cleanup after the test
+    wrapper.unmount();
+  });
+});