@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.0

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

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiCard from "./UiCard.vue";
-
-const meta = {
-  title: "UI/UiCard",
-  tags: ["deprecated"],
-  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

@@ -1,28 +0,0 @@
-<template>
-  <li
-    class="mb-4 rounded-2xl bg-neutral-whisper 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>
-<script lang="ts">
-import { onMounted } from "vue";
-
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiCard",
-  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>

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

@@ -1,35 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiCheckBoxGroup
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiCheckBoxGroup -->
-
-<template>
-  <UiCheckBoxGroup :item="checkboxes" :first-entry-checks-all="true" @item-checked="handleEvent"
-                   @checked-all="handleEvent" />
-</template>
-
-<script setup lang="ts">
-    import { UiCheckBoxGroup } from "@dpa-id-components/dpa-shared-components";
-</script>
-
-```
-### Props
-
-The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"
-
-| Name                  | Type           | Default | Description                                                                                      |
-|-----------------------|----------------|---------|--------------------------------------------------------------------------------------------------|
-| `item`                | `CheckboxItem` | ``      | Adds the value to the checkbox, consiting of name, isChecked and iconName  ("CheckboxItem"-Type) |
-| `firstEntryChecksAll` | `Boolean`      | `false` | Wether the first item checks all the boxes                                                       |
-
-### Events
-
-| Name           | Type | Description                                  |
-|----------------|------|----------------------------------------------|
-| `checked-all`  | `boolean`        | Emitted when all items are selected          |
-| `input`        | `CheckboxItem[]` |  |
-| `item-checked` | `CheckboxItem`   | Emitted when each individual item is checked |

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

@@ -1,70 +0,0 @@
-import { randomInt } from "node:crypto";
-
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";
-
-const entries = [
-  {
-    name: "alle wählen",
-    isChecked: false,
-  },
-  {
-    name: "Wissenschaft",
-    isChecked: false,
-  },
-  {
-    name: "Kultur",
-    isChecked: false,
-  },
-  {
-    name: "Sport",
-    isChecked: false,
-  },
-] as CheckboxItem[];
-
-describe("UiCheckBoxGroup", () => {
-  test("renders menu with prop values", async () => {
-    const wrapper = mount(UiCheckBoxGroup, {
-      props: {
-        item: entries,
-      },
-    });
-
-    const listElements = wrapper.findAll("li");
-
-    listElements.forEach((entry) => {
-      expect(entries.some((item) => entry.text().includes(item.name))).toBe(
-        true,
-      );
-    });
-  });
-
-  test("emits checked-all when first item is clicked", async () => {
-    const wrapper = mount(UiCheckBoxGroup, {
-      props: {
-        item: entries,
-        firstEntryChecksAll: true,
-      },
-    });
-
-    const firstListElement = wrapper.findAll("li")[0];
-
-    await firstListElement.trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("checked-all");
-  });
-
-  test("emits item-checked when one item is clicked", async () => {
-    const wrapper = mount(UiCheckBoxGroup, {
-      props: {
-        item: entries,
-      },
-    });
-
-    const randomListElement = wrapper.findAll("li")[randomInt(0, 3)];
-
-    await randomListElement.trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("item-checked");
-  });
-});

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

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiCheckBoxGroup from "./UiCheckBoxGroup.vue";
-
-const meta = {
-  title: "forms/UiCheckboxGroup",
-  component: UiCheckBoxGroup,
-  argTypes: {
-    firstEntryChecksAll: { control: "boolean" },
-    disabled: { control: "boolean" },
-  },
-  args: {
-    firstEntryChecksAll: true,
-    disabled: false,
-  },
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiCheckBoxGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiCheckBoxGroup },
-    template: "<UiCheckBoxGroup v-bind='args'/>",
-  }),
-  args: {
-    item: [
-      {
-        name: "alle Ressorts",
-        isChecked: false,
-      },
-      {
-        name: "Wirtschaft",
-        isChecked: false,
-        iconName: "clock",
-      },
-      {
-        name: "Panorama",
-        isChecked: false,
-      },
-      {
-        name: "Wissenschaft",
-        isChecked: false,
-      },
-      {
-        name: "Kultur",
-        isChecked: false,
-      },
-      {
-        name: "Sport",
-        isChecked: false,
-      },
-    ],
-  },
-};

package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue

@@ -1,106 +0,0 @@
-<template>
-  <UiList class="grid grid-cols-2 flex-wrap border-none pt-2 lg:flex lg:pt-0">
-    <UiListItem
-      v-for="(entry, index) in checkboxItems"
-      :key="entry.name"
-      :is-checked="entry.isChecked"
-      class="flex h-8 items-center border-none py-2 text-sm shadow-none lg:py-3"
-      check-box-menu
-      :disabled="disabled"
-      :icon-name="entry.iconName"
-      @list-item-click="toggle(index)"
-      >{{ entry.name }}
-    </UiListItem>
-  </UiList>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiCheckBoxGroup",
-};
-
-export type CheckboxItem = {
-  name: string;
-  isChecked: boolean;
-  iconName?: UiIconName;
-};
-</script>
-<script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from "vue";
-
-import type { UiIconName } from "../UiIcon/UiIcon.vue";
-import UiList from "../UiList/UiList.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-const emit = defineEmits<{
-  "checked-all": [boolean];
-  input: [CheckboxItem[]];
-  "item-checked": [CheckboxItem];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    item?: CheckboxItem[];
-    firstEntryChecksAll?: boolean;
-    disabled?: boolean;
-  }>(),
-  {
-    item: () => [],
-    firstEntryChecksAll: false,
-    disabled: false,
-  },
-);
-
-const checkboxItems = ref<CheckboxItem[]>(props.item);
-
-watchEffect(() => {
-  checkboxItems.value = props.item;
-});
-
-const areAllChecked = computed(() => {
-  const checkboxEntries = checkboxItems.value.slice(1);
-  return checkboxEntries.every((entry: CheckboxItem) => entry.isChecked);
-});
-
-const toggleAll = () => {
-  checkboxItems.value = checkboxItems.value.map((entry: CheckboxItem) => {
-    const isChecked = !checkboxItems.value[0].isChecked;
-    return {
-      ...entry,
-      isChecked,
-    };
-  });
-  emit("checked-all", checkboxItems.value[0].isChecked);
-  emit("input", checkboxItems.value);
-};
-
-const toggle = (index: number) => {
-  // With List Item Click we are overriding the normal checkbox `input` event, hence the disabled attribute has no effect
-  if (props.disabled) {
-    return;
-  }
-  if (index === 0 && props.firstEntryChecksAll) {
-    toggleAll();
-  } else {
-    checkboxItems.value[index].isChecked =
-      !checkboxItems.value[index].isChecked;
-    if (props.firstEntryChecksAll) {
-      checkboxItems.value[0].isChecked = areAllChecked.value;
-    }
-  }
-  emit("item-checked", checkboxItems.value[index]);
-  emit("input", checkboxItems.value);
-};
-
-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>

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

@@ -1,37 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiCollapseNavigation
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiCollapseNavigation -->
-<template>
-  <UiCollapseNavigation headline="Menu eins">
-    <UiButton> test eins </UiButton>
-    <UiButton> test zwei </UiButton>
-    <UiButton> test drei </UiButton>
-  </UiCollapseNavigation>
-</template>
-
-<script>
-  import UiCollapseNavigation from "./UiCollapseNavigation.vue";
-</script>
-```
-
-## API
-
-### Props
-
-| Name            | Type    | Default | Description                       |
-|-----------------|---------|---------|-----------------------------------|
-| `headline`      | string  | ''      | Headline of the menu              |
-| `borderTop`     | boolean | true    | Has top border                    |
-| `openAsDefault` | boolean | true    | defines default state of the menu |
-
-
-### Slots
-
-| Name      | Description                |
-|-----------|----------------------------|
-| `default` | slot for the menus content |

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

@@ -1,21 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiCollapseNavigation from "./UiCollapseNavigation.vue";
-
-describe("UiCollapseNavigation", () => {
-  test("should toggle the menu when the button is clicked", async () => {
-    const wrapper = shallowMount(UiCollapseNavigation);
-    const button = wrapper.findComponent({ name: "UiButton" });
-
-    expect(wrapper.vm.openMenu).toBe(true);
-
-    await button.trigger("click");
-
-    expect(wrapper.vm.openMenu).toBe(false);
-
-    await button.trigger("click");
-
-    expect(wrapper.vm.openMenu).toBe(true);
-  });
-});

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

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiButton from "../UiButton/UiButton.vue";
-
-import UiCollapseNavigation from "./UiCollapseNavigation.vue";
-
-const meta = {
-  title: "Ui/UiCollapseNavigation",
-  component: UiCollapseNavigation,
-  argTypes: {
-    headline: {
-      control: "text",
-    },
-    hasBorderTop: {
-      control: "boolean",
-    },
-    openAsDefault: {
-      control: "boolean",
-    },
-  },
-  args: {
-    headline: "Gespeicherte Suchen",
-    hasBorderTop: true,
-    openAsDefault: true,
-  },
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiCollapseNavigation>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiCollapseNavigation, UiButton },
-    template: `
-      <UiCollapseNavigation v-bind='args' >
-      <UiButton> test eins </UiButton>
-      <UiButton> test zwei </UiButton>
-      <UiButton> test drei </UiButton>
-      </UiCollapseNavigation>
-    `,
-  }),
-};
-
-export const MultipleMenus: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiCollapseNavigation, UiButton },
-    template: `
-      <UiCollapseNavigation headline="Menu eins">
-      <UiButton> test eins </UiButton>
-      <UiButton> test zwei </UiButton>
-      <UiButton> test drei </UiButton>
-      </UiCollapseNavigation>
-      <UiCollapseNavigation headline="Menu zwei">
-      <UiButton> test vier </UiButton>
-      <UiButton> test fünf </UiButton>
-      <UiButton> test sechs </UiButton>
-      </UiCollapseNavigation>
-    `,
-  }),
-};

package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,79 +0,0 @@
-<template>
-  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
-  <UiButton
-    appearance="outline-emphasis"
-    class="flex w-full justify-between border-none"
-    @click="toggleMenuHandler"
-  >
-    <h3
-      class="text-xs font-semibold tracking-widest text-neutral-subtle uppercase"
-    >
-      {{ headline }}
-    </h3>
-    <UiIcon
-      name="chevron-down"
-      class="rounded-full text-neutral-subtle transition-transform duration-500 hover:bg-neutral-faint"
-      :class="{ 'rotate-180': openMenu }"
-    />
-  </UiButton>
-  <transition
-    enter-active-class="duration-200"
-    enter-from-class="transform -translate-y-[20px] opacity-0"
-    enter-to-class="transform translate-y-0 opacity-1"
-    leave-active-class="duration-200"
-    leave-from-class="transform translate-y-0 opacity-1"
-    leave-to-class="transform -translate-y-[20px] opacity-0"
-  >
-    <div v-if="openMenu">
-      <slot />
-    </div>
-  </transition>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiCollapseNavigation",
-};
-</script>
-<script setup lang="ts">
-import { onMounted, ref, watchEffect } from "vue";
-
-import UiButton from "../UiButton/UiButton.vue";
-import UiIcon from "../UiIcon/UiIcon.vue";
-
-const props = withDefaults(
-  defineProps<{
-    headline?: string;
-    hasBorderTop?: boolean;
-    openAsDefault?: boolean;
-  }>(),
-  {
-    headline: "",
-    hasBorderTop: true,
-    openAsDefault: true,
-  },
-);
-
-const openMenu = ref();
-
-watchEffect(() => {
-  openMenu.value = props.openAsDefault;
-});
-
-const toggleMenuHandler = () => {
-  openMenu.value = !openMenu.value;
-};
-
-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.",
-    );
-  }
-});
-defineExpose({ openMenu });
-</script>

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

@@ -1,37 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiFilterButton
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiFilterBadge -->
-<template>
-  <UiFilterButton title="Filter" @click="doSomething" />
-</template>
-
-<script>
-  import { UiFilterButton } from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name          | Type                                                                                | Default           | Description                                                                           |
-|---------------|-------------------------------------------------------------------------------------|-------------------|---------------------------------------------------------------------------------------|
-| `title`       | `String`                                                                            | ``                | Sets the label of the Button.                                                         |
-| `variant`     | `"white-rounded" &#124; "blue-rounded" &#124; "transparent-rounded" &#124; "blank"` | `"white-rounded"` | Visual variants of the button                                                         |
-| `chevronIcon` | `UiIconName`                                                                        | `"chevron-down"`  | If the Icon should change when the Component is in dirty state put in Icon name here. |
-| `iconLeft`    | `UiIconName`                                                                        | null              | If you want an icon left of the title put in icon name here.                          |
-| `rotateIcon`  | `Boolean`                                                                           | `false`           | Rotates the icon.                                                                     |
-| `iconSize`    | `"small" &#124; "medium" &#124; "large"`                                            | `"small"`         | Icon size.                                                                            |
-| `disabled`    | `Boolean`                                                                           | `false`           | Disables the button.                                                                  |
-| `active`      | `Boolean`                                                                           | `false`           | Sets active style for the button.                                                     |
-
-### Events
-
-| Name    | Type    | Description |
-|---------|---------|-------------|
-| `click` | none    |  |

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

@@ -1,79 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiFilterButton from "./UiFilterButton.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiFilterButton> = {},
-) {
-  return mount(UiFilterButton, {
-    ...options,
-    props: {
-      title: "Foo Bar",
-      ...options.props,
-    },
-  });
-}
-
-describe("UiFilterBadge", () => {
-  test("renders attributes on correct element", () => {
-    const wrapper = createWrapper({
-      props: {
-        id: "id",
-        class: "testClass",
-        "data-testid": "testId",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.getAttribute("data-testid")).toBe("testId");
-    expect(root.element.getAttribute("id")).toBe("id");
-
-    const button = wrapper.find('[data-testid="filter-button"]');
-    expect(button.element.classList.contains("testClass")).toBe(false);
-    expect(button.element.getAttribute("data-testid")).not.toBe("testId");
-  });
-
-  test("renders with given Title", () => {
-    const wrapper = createWrapper();
-    expect(wrapper.text()).toBe("Foo Bar");
-  });
-
-  test("changes colour according to prop change", () => {
-    const wrapper = createWrapper({
-      props: {
-        variant: "blue-rounded",
-      },
-    });
-    expect(wrapper.classes("bg-primary")).toBe(true);
-  });
-
-  test("emits click event", async () => {
-    const wrapper = createWrapper();
-    const button = wrapper.find('[data-testid="filter-button"]');
-    await button.trigger("click");
-
-    const lastEvent = (wrapper.emitted("click") ?? []).at(-1);
-    expect(lastEvent).toEqual([]);
-  });
-
-  test("renders attributes on correct element", () => {
-    const wrapper = mount(UiFilterButton, {
-      props: {
-        options: [],
-        groupName: "",
-        id: "id",
-        class: "testClass pr-8",
-        "data-testid": "testId",
-      },
-    });
-
-    const root = wrapper.find(":first-child");
-    expect(root.attributes("id")).toBe("id");
-    expect(root.element.classList.contains("testClass")).toBe(true);
-    expect(root.element.classList.contains("pr-4")).toBe(false);
-    expect(root.element.classList.contains("pr-8")).toBe(true);
-    expect(root.attributes("data-testid")).toBe("testId");
-  });
-});