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

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -1,146 +0,0 @@
-<template>
-  <div
-    class="mb-px w-full bg-neutral pt-2 pr-4 pb-3 pl-3 md:pt-3"
-    :class="classObject"
-    data-testid="rootDiv"
-  >
-    <div
-      class="flex"
-      :class="{
-        'flex-col-reverse': $slots.timePublished,
-        'flex-col': !$slots.timePublished,
-        'px-1': isFulfilled,
-      }"
-    >
-      <!-- Meta description -->
-      <div class="flex items-center justify-between py-1">
-        <div class="flex items-center pr-2">
-          <UiIcon
-            size="sm"
-            :name="genreIcon"
-            class="mr-2 shrink-0 fill-current text-neutral-subtle"
-          />
-          <span class="text-xs font-medium text-neutral-primary">
-            <slot name="description" />
-          </span>
-        </div>
-        <span
-          v-if="$slots.planning"
-          class="w-16 shrink-0 text-right text-xs text-neutral-subtle"
-          ><slot name="planning"
-        /></span>
-      </div>
-
-      <div class="flex flex-col">
-        <!-- Image and headline -->
-        <div v-if="imgSrc || $slots.default" class="flex py-1">
-          <div v-if="imgSrc" class="relative mr-2 flex-none">
-            <img
-              :src="imgSrc"
-              class="h-14 object-cover"
-              :alt="`Thumbnail${imgAlt ? ` :${imgAlt}` : ''}`"
-            />
-            <span
-              v-if="imgCount > 1"
-              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-neutral-primary px-1 align-middle text-xs/4 font-semibold text-neutral"
-              data-testid="imageCount"
-              >{{ imgCount }}</span
-            >
-          </div>
-          <h3
-            v-if="$slots.default"
-            class="text-sm/5 font-medium group-hover:underline"
-            :class="{
-              'ml-6': !isFulfilled,
-              'mr-1': $slots.planning,
-              'pr-16': $slots.planning,
-            }"
-          >
-            <slot />
-          </h3>
-        </div>
-
-        <!-- Text length -->
-        <span
-          v-if="$slots.textLength"
-          class="text-xs text-neutral-subtle"
-          :class="!isFulfilled ? 'ml-6' : ''"
-          ><slot name="textLength"
-        /></span>
-      </div>
-
-      <!-- Time published -->
-      <span
-        v-if="$slots.timePublished"
-        class="pt-1 text-xs font-medium text-neutral-subtle"
-        ><slot name="timePublished"
-      /></span>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "DpaMediaItem",
-};
-</script>
-<script setup lang="ts">
-import { computed, onMounted } from "vue";
-
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-type Genre = "audio" | "video" | "text" | "picture" | "graphic";
-
-const props = withDefaults(
-  defineProps<{
-    genre?: Genre;
-    isFulfilled?: boolean;
-    imgSrc?: string;
-    imgAlt?: string;
-    imgCount?: number;
-    disabled?: boolean;
-  }>(),
-  {
-    genre: "text",
-    isFulfilled: false,
-    imgSrc: "",
-    imgAlt: "",
-    imgCount: 0,
-    disabled: false,
-  },
-);
-
-const genreIcon = computed<UiIconName>(() => {
-  const icons: Record<Genre, UiIconName> = {
-    audio: props.isFulfilled ? "audio" : "audio",
-    video: props.isFulfilled ? "video" : "video",
-    text: props.isFulfilled ? "text" : "text",
-    picture: props.isFulfilled ? "picture" : "picture",
-    graphic: props.isFulfilled ? "graphic" : "graphic",
-  };
-
-  return icons[props.genre];
-});
-
-const classObject = computed(() => {
-  const { isFulfilled } = props;
-  if (!isFulfilled) {
-    return "cursor-auto";
-  }
-  return props.disabled
-    ? "cursor-not-allowed transition shadow-sm border border-neutral-faint"
-    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-neutral-faint hover:border-neutral-muted";
-});
-
-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/src/components/DpaMediaItem/README.md

@@ -1,42 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/dpa-media-item
-
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using DpaMediaItem -->
-<template>
-  <dpa-media-item genre="text" is-fulfilled auto-size style="cursor: pointer;">
-    <template #timePublished>15.11.2021 16:41</template>
-    <tempate #description>News Feature im Basisdienst</tempate>
-    <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
-    <template #textLength>104 dpa-Zeilen / 7176 Zeichen</template>
-  </dpa-media-item>
-</template>
-
-<script setup>
-    import DpaMediaItem from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-| Name          | Type                                                                     | Default  | Description                                                                        |
-|---------------|--------------------------------------------------------------------------|----------|------------------------------------------------------------------------------------|
-| `genre`       | `"audio" &#124; "video" &#124; "text" &#124; "picture" &#124; "graphic"` | `"text"` | Genre variant; either `"text"`, `"picture"` , `"graphic"`, `"video"` or `"audio"`  |
-| `isFulfilled` | `Boolean`                                                                | `false`  | Whether the media item has been fulfilled/delivered (`true`), or planned (`false`) |
-| `imgSrc`      | `String`                                                                 | `""`     | The `src` attribute of the `img` tag used for the thumbnail of pictures            |
-| `imgAlt`      | `String`                                                                 | `""`     | The `alt` attribute of the `img` tag used for the thumbnail of pictures            |
-| `imgCount`    | `Number`                                                                 | `0`      | The number of pictures published in this media coverage item                       |
-| `disabled`    | `Boolean`                                                                | `false`  | Sets the cursor and hover state of the DpaMediaItem                                |
-### Slots
-| Name            | Description                                                                                     |
-|-----------------|-------------------------------------------------------------------------------------------------|
-| `default`       | slot for the media item's headline/title                                                        |
-| `timePublished` | slot for the media item's time of publishing for fulfilled items                                |
-| `description`   | slot for the media item's description placed above the headline                                 |
-| `planning`      | slot for the media item's planning notes (e.g. schedule) placed to the right of the description |
-| `textLength`    | slot for the media item's text length (e.g. schedule) placed below the description/headline     |

package/src/components/UiButtonGroup/README.md

@@ -1,29 +0,0 @@
-# @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/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,29 +0,0 @@
-<template>
-  <div
-    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>

package/src/components/UiCard/README.md

@@ -1,32 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @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/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/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/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/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/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/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    |  |