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

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

@@ -0,0 +1,139 @@
+<template>
+  <component
+    :is="component"
+    class="UiButton focus-visible:outline-blue inline-flex items-center whitespace-nowrap font-medium leading-normal focus:outline-none"
+    :class="{
+      'px-4': size !== 'xs',
+      'px-2': size === 'xs',
+      [variantClassName]: true,
+      [sizeClassName]: true,
+    }"
+    v-bind="attributes"
+    @click="emit('click')"
+  >
+    <UiIcon v-if="iconName" :name="iconName" :size="iconSize" class="mr-2" />
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { RouteLocationRaw } from "vue-router";
+
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+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;
+    rounded?: boolean;
+  }>(),
+  {
+    to: undefined,
+    iconName: null,
+    size: "medium",
+    color: "blue",
+    disabledVariant: "primary",
+    disabled: false,
+    rounded: false,
+  },
+);
+
+const component = computed(() =>
+  typeof props.to === "string" ? "a" : props.to ? "RouterLink" : "button",
+);
+
+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;
+  } else {
+    attrs.disabled = props.disabled;
+    attrs.type = "button";
+  }
+
+  return attrs;
+});
+
+const variantClassName = computed((): string => {
+  const roundedClass = props.rounded ? "rounded-full" : "rounded-none";
+  const btnColor = props.disabled ? "disabled" : props.color;
+  switch (btnColor) {
+    case "blue": {
+      return `${roundedClass} text-white bg-blue-default hover:bg-blue-dark`;
+    }
+    case "primary-green": {
+      return `${roundedClass} text-white bg-green-primary hover:bg-night-green`;
+    }
+    case "transparent": {
+      return `${roundedClass} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+    }
+    case "white": {
+      return `${roundedClass} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+    }
+    case "gray": {
+      return `${roundedClass} text-white bg-gray-700 hover:bg-gray-800`;
+    }
+    case "light-gray": {
+      return `${roundedClass} text-gray-800 bg-gray-100`;
+    }
+    case "disabled": {
+      if (props.disabledVariant === "primary") {
+        return `${roundedClass} text-gray-400 bg-gray-100 cursor-not-allowed`;
+      } else
+        return `${roundedClass} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
+    }
+    default: {
+      return `${roundedClass} 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";
+});
+</script>

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

@@ -0,0 +1,29 @@
+# @dpa-shared-components/UiButtonGroup
+
+## Usage
+A container component for groups of `UiButton` components.
+
+
+```html
+<!-- SomeComponent.vue using UiButtonGroup -->
+<template>
+    <UiButton
+    >
+        Click
+    </UiButton>  
+    <UiButton
+    >
+    me
+    </UiButton>
+</template>
+
+<script setup lang="ts">
+    import {UiButton, UiButtonGroup} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+### Slots
+
+| Name      | Description                                 |
+|-----------|---------------------------------------------|
+| `default` | slot for the contain the button groups's content (either `UiButton` or `UiRadioButton`) |

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiButtonGroup from "./UiButtonGroup.vue";
+
+describe("UiButtonGroup", () => {
+  it("renders UiButtonGroup with default slot content", () => {
+    const wrapper = mount(UiButtonGroup, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Default Slot");
+  });
+});

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

@@ -0,0 +1,43 @@
+import UiButtonGroup from "./UiButtonGroup.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+
+type PropsAndStoryProps = InstanceType<typeof UiButtonGroup> & {
+  activeButton: number;
+};
+
+const meta = {
+  argTypes: {
+    activeButton: { control: "number" },
+  },
+  args: {
+    activeButton: 0,
+  },
+  title: "Ui/UiButtonGroup",
+  component: UiButtonGroup,
+} satisfies Meta<PropsAndStoryProps>;
+
+export default meta;
+type Story = StoryObj<PropsAndStoryProps>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiButtonGroup, UiButton },
+    setup() {
+      const activeButton = ref(args.activeButton);
+      const activateButton = (button: number) => (activeButton.value = button);
+      return { args, activeButton, activateButton };
+    },
+    template: `
+      <ui-button-group>
+      <ui-button :color="activeButton === 1 ? 'blue' : 'light-gray'" @click="activateButton(1)">Group</ui-button>
+      <ui-button disabled disabled-variant="primary" @click="activateButton(2)">of</ui-button>
+      <ui-button :color="activeButton === 3 ? 'blue' : 'light-gray'" @click="activateButton(3)">buttons</ui-button>
+      </ui-button-group>
+    `,
+  }),
+  args: {
+    activeButton: 1,
+  },
+};

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

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,30 @@
+# @dpa-shared-components/UiCard
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCard -->
+<template>
+  <UiCard>Autor: Max Mustermann (Berlin), +49 30 1234-56478, max.mustermann@dpa.com</UiCard>
+</template>
+
+<script setup lang="ts">
+  import { UiCard } from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+This component has no properties
+
+### Events
+
+This component emits no events
+
+### Slots
+
+| Name      | Description                                |
+|-----------|--------------------------------------------|
+| `default` | Slot for the rendering the cards's content |

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiCard from "./UiCard.vue";
+
+describe("UiCard", () => {
+  it("renders Card with default slot content", () => {
+    const wrapper = mount(UiCard, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Default Slot");
+  });
+});

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

@@ -0,0 +1,28 @@
+import UiCard from "./UiCard.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "UI/UiCard",
+  component: UiCard,
+} satisfies Meta<typeof UiCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiCard },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="w-full pt-12 pb-12 lg:mx-auto lg:w-5/6">
+      <h4 class="text-base mb-4">Kontakte</h4>
+      <ul class="w-full flex-wrap flex">
+        <UiCard v-bind="args">Autor: Max Mustermann (Berlin), +49 30 1234-56478, max.mustermann@dpa.com</UiCard>
+        <UiCard v-bind="args">Autor: Max Mustermann (Berlin), +49 30 1234-56478, max.mustermann@dpa.com</UiCard>
+        <UiCard v-bind="args">Autor: Max Mustermann (Berlin), +49 30 1234-56478, max.mustermann@dpa.com</UiCard>
+      </ul>
+      </div>`,
+  }),
+};

package/dist/src/components/UiCard/UiCard.vue

@@ -0,0 +1,7 @@
+<template>
+  <li
+    class="mb-4 rounded-2xl bg-gray-100 px-8 py-4 text-sm font-medium sm:w-full md:mr-7 md:w-[45.5%] lg:mr-8 lg:w-[46.5%]"
+  >
+    <slot></slot>
+  </li>
+</template>

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

@@ -0,0 +1,44 @@
+# @dpa-shared-components/UiCheckbox
+
+## Usage
+
+```vue
+<template>
+  <UiCheckBox required name="terms" color="blue">
+    Accept terms and conditions
+  </UiCheckBox>
+</template>
+
+<script setup lang="ts">
+import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
+</script>
+
+```
+
+## API
+
+### Props
+
+**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) 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                                 |
+|----------------|-----------|------------|---------------------------------------------|
+| `color`        | `"blue"` or `"gray"`  | `"blue"`   | Sets the `color` attribute of the checkbox  |
+| `disabled`     | `boolean` | `false`    | Whether the checkbox is disabled            |
+| `checked`      | `boolean` | `false`    | The `checked` attribute of the checkbox     |
+| `size`         | `"small"` or `"medium"`  | `"medium"` | Sets the `size` attribute of the checkbox   |
+| `showError`    | `boolean` | `false`    | Whether the error message should be shown   |
+| `errorMessage` | `string`  | `""`       | The error message that can be shown         |
+
+### Slots
+
+| Name      | Description                                 |
+|-----------|---------------------------------------------|
+| `default` | slot for the rendering the checkbox's label |
+| `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |
+
+### Events
+
+| Name     | Type      | Description                                              |
+|----------|-----------|----------------------------------------------------------|
+| `change` | `boolean` |  |

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

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import { mount, type ComponentMountingOptions } from "@vue/test-utils";
+import UiCheckBox from "./UiCheckBox.vue";
+
+function createWrapper(options?: ComponentMountingOptions<typeof UiCheckBox>) {
+  return mount(UiCheckBox, {
+    ...options,
+  });
+}
+
+describe("UiCheckBox", () => {
+  it("renders attributes on correct element", () => {
+    const wrapper = createWrapper({
+      props: {
+        id: "id",
+        class: "testClass",
+        "data-testid": "testId",
+        name: "name",
+        value: "value",
+        checked: true,
+        required: "required",
+        disabled: true,
+        "aria-invalid": "true",
+        "aria-errormessage": "message",
+      },
+    });
+
+    const root = wrapper.find(":first-child");
+    expect(root.element.classList.contains("testClass")).toBe(true);
+    expect(root.element.getAttribute("data-testid")).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("id")).toBe("id");
+    expect(input.element.getAttribute("name")).toBe("name");
+    expect(input.element.getAttribute("value")).toBe("value");
+    expect(input.element.hasAttribute("checked")).toBe(true);
+    expect(input.element.hasAttribute("required")).toBe(true);
+    expect(input.element.hasAttribute("disabled")).toBe(true);
+    expect(input.element.getAttribute("aria-invalid")).toBe("true");
+    expect(input.element.getAttribute("aria-errormessage")).toBe("message");
+  });
+
+  it("renders checkbox with default slot content", () => {
+    const wrapper = mount(UiCheckBox, {
+      slots: {
+        default: "Default Slot",
+      },
+    });
+
+    expect(wrapper.text()).toBe("Default Slot");
+  });
+
+  it("should click change value", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        checked: false,
+        disabled: false,
+      },
+    });
+    const checkboxInput = wrapper.find("input");
+
+    await checkboxInput.trigger("click");
+    await checkboxInput.trigger("change");
+    expect(checkboxInput.element.checked).toBe(true);
+  });
+
+  it("should be gray", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        color: "gray",
+      },
+    });
+    expect(wrapper.find("span").classes("before:border-gray-800")).toBe(true);
+  });
+
+  it("should be blue", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        color: "blue",
+      },
+    });
+
+    expect(wrapper.find("span").classes("before:border-blue-default")).toBe(
+      true,
+    );
+  });
+
+  it("should be size medium", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        size: "medium",
+      },
+    });
+
+    expect(wrapper.find("input").classes("medium")).toBe(true);
+  });
+
+  it("should be size small", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        size: "small",
+      },
+    });
+
+    expect(wrapper.find("input").classes("small")).toBe(true);
+  });
+
+  it("should not show an error message", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        showError: false,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').exists()).toBe(false);
+  });
+
+  it("should show an error message", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        showError: true,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').exists()).toBe(true);
+  });
+
+  it("should show the correct error message", async () => {
+    const wrapper = mount(UiCheckBox, {
+      props: {
+        showError: true,
+        errorMessage: "test error",
+      },
+    });
+
+    expect(wrapper.find('[data-testid="errorMessage"]').text()).toBe(
+      "test error",
+    );
+  });
+});

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

@@ -0,0 +1,60 @@
+import UiCheckBox from "./UiCheckBox.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiCheckBox",
+  component: UiCheckBox,
+  argTypes: {
+    disabled: { control: "boolean" },
+    color: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium"],
+    },
+    showError: { control: "boolean" },
+    errorMessage: { control: "text" },
+    checked: { control: "boolean" },
+  },
+  args: {
+    disabled: false,
+    color: "blue",
+    size: "medium",
+    showError: false,
+    checked: false,
+    errorMessage: "",
+  },
+} satisfies Meta<typeof UiCheckBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiCheckBox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiCheckBox v-bind="args">Check</UiCheckBox>
+    `,
+  }),
+};
+
+export const Group: Story = {
+  render: (args) => ({
+    components: { UiCheckBox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="space-y-2">
+        <UiCheckBox v-bind="args" name="languages" value="en" checked>English</UiCheckBox>
+        <UiCheckBox v-bind="args" name="languages" value="de" checked>German</UiCheckBox>
+        <UiCheckBox v-bind="args" name="languages" value="fr">French</UiCheckBox>
+      </div>
+    `,
+  }),
+};

package/dist/src/components/UiCheckBox/UiCheckBox.vue

@@ -0,0 +1,104 @@
+<template>
+  <label
+    class="text-small flex flex-col"
+    :class="
+      cn(
+        disabled ? 'text-gray-400' : 'cursor-pointer text-gray-900',
+        $attrs.class as HTMLAttributes['class'],
+      )
+    "
+    :data-testid="$attrs['data-testid']"
+  >
+    <input
+      :id="id"
+      class="peer relative size-0 appearance-none self-center focus:outline-none"
+      :class="size"
+      type="checkbox"
+      :checked="checked"
+      :aria-checked="checked"
+      :disabled="disabled"
+      :aria-invalid="'errors' in $slots || showError"
+      :aria-errormessage="
+        'errors' in $slots || showError ? `${id}-errors` : undefined
+      "
+      v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      @change="handleChange"
+    />
+    <span
+      class="flex items-center before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:opacity-100 peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
+      :class="{
+        'before:size-5 after:size-5': size === 'medium',
+        'before:size-4 after:size-4': size === 'small',
+        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-hover:peer-checked:before:bg-blue-dark':
+          color === 'blue',
+        'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-hover:peer-checked:before:bg-gray-900':
+          color === 'gray',
+        'before:border-gray-500 peer-checked:before:bg-gray-500': disabled,
+        'before:mr-2': !!$slots.default,
+      }"
+    >
+      <slot />
+    </span>
+
+    <div
+      v-if="'errors' in $slots || showError"
+      :id="`${id}-errors`"
+      data-testid="errorMessage"
+      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs font-medium leading-normal text-white transition-all duration-300 ease-in-out"
+    >
+      <slot v-if="'errors' in $slots" name="errors" />
+
+      <template v-else>
+        {{ errorMessage }}
+      </template>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import { cn } from "../../utils/cn.js";
+
+const emit = defineEmits<{
+  change: [boolean];
+}>();
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineSlots<{
+  default: () => any;
+  errors?: () => any;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    color?: "blue" | "gray";
+    size?: "small" | "medium";
+    disabled?: boolean;
+    checked?: boolean;
+    showError?: boolean;
+    errorMessage?: string;
+  }>(),
+  {
+    id: undefined,
+    color: "blue",
+    size: "medium",
+    disabled: false,
+    checked: false,
+    showError: false,
+    errorMessage: "",
+  },
+);
+
+const id = computed(() => props.id || `id-${uuidv4()}`);
+
+const handleChange = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  emit("change", input.checked);
+};
+</script>