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

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

@@ -5,23 +5,9 @@ import UiChip from "./UiChip.vue";
 const meta = {
   title: "UI/UiChip",
   component: UiChip,
-  argTypes: {
-    isVisible: {
-      control: "boolean",
-    },
-    cursorStyle: {
-      control: "select",
-      options: ["default", "text", "pointer"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium", "big"],
-    },
-  },
   args: {
-    isVisible: true,
-    cursorStyle: "text",
-    size: "big",
+    size: "sm",
+    closeButton: true,
   },
 } satisfies Meta<typeof UiChip>;
 
@@ -34,6 +20,56 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: '<UiChip v-bind="args">Chip</UiChip>',
+    template: '<UiChip v-bind="args">Klima</UiChip>',
+  }),
+};
+
+export const WithSearchStrings: Story = {
+  render: (args) => ({
+    components: { UiChip },
+    setup() {
+      return { args };
+    },
+    template: `<UiChip v-bind="args">
+      <div class="flex items-center gap-1">
+        <span>Wirtschaft</span> <span class="uppercase font-semibold text-neutral-subtle">oder</span><span>Politik</span>
+      </div>
+    </UiChip>`,
+  }),
+};
+
+export const AsKeywords: Story = {
+  args: {
+    closeButton: false,
+    size: "sm",
+  },
+  render: (args) => ({
+    components: { UiChip },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex gap-2">
+      <UiChip v-bind="args">Politzei</UiChip>
+      <UiChip v-bind="args">Kriminalität</UiChip>
+      <UiChip v-bind="args">Niedersachsen</UiChip>
+    </div>`,
+  }),
+};
+
+export const AsTags: Story = {
+  args: {
+    closeButton: true,
+    size: "xs",
+  },
+  render: (args) => ({
+    components: { UiChip },
+    setup() {
+      return { args };
+    },
+    template: `<div class="border border-neutral-faint p-4 flex gap-2">
+      <UiChip v-bind="args">Politzei</UiChip>
+      <UiChip v-bind="args">Kriminalität</UiChip>
+      <UiChip v-bind="args">Niedersachsen</UiChip>
+    </div>`,
   }),
 };

package/dist/src/components/UiChip/UiChip.vue

@@ -1,45 +1,43 @@
 <template>
   <div
-    class="min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal whitespace-nowrap text-gray-900"
-    :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
+    class="flex max-w-min flex-nowrap items-center gap-x-1 rounded-full bg-neutral-faint px-2 font-normal whitespace-nowrap text-neutral-primary"
+    :class="CHIP_SIZES[size]"
   >
-    <slot></slot>
+    <slot />
+    <button
+      v-if="closeButton"
+      class="flex items-center justify-center rounded-full hover:bg-neutral-soft"
+      @click.stop="$emit('close')"
+    >
+      <UiIcon
+        class="text-current"
+        name="close"
+        :size="size == 'xs' ? 'xs' : 'sm'"
+      />
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import type { Size } from "../../types";
+import UiIcon from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    cursorStyle?: "default" | "text" | "pointer";
-    isVisible?: boolean;
-    size?: "small" | "medium" | "big";
-  }>(),
-  {
-    cursorStyle: "text",
-    isVisible: true,
-    size: "big",
-  },
-);
+defineSlots<{
+  default: () => any;
+}>();
 
-const cursorStyle = computed(() => {
-  const cursorStyles: Record<string, string> = {
-    default: "cursor-default",
-    text: "cursor-text",
-    pointer: "cursor-pointer",
-  };
+defineEmits<{
+  close: [];
+}>();
 
-  return cursorStyles[props.cursorStyle];
-});
+const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
+  xs: "text-xs",
+  sm: "text-sm/5.5",
+  md: "text-sm/8",
+};
 
-const sizeClass = computed(() => {
-  const sizeClasses: Record<string, string> = {
-    small: "h-5 px-1 text-xs",
-    medium: "h-6 px-2 text-sm",
-    big: "h-8 px-2 text-sm",
-  };
-
-  return sizeClasses[props.size];
-});
+const { size = "sm", closeButton = undefined } = defineProps<{
+  closeButton?: boolean;
+  size?: Extract<Size, "xs" | "sm" | "md">;
+}>();
 </script>

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

@@ -8,9 +8,9 @@ Component will be removed in a future update
 <!-- SomeComponent.vue using UiCollapseNavigation -->
 <template>
   <UiCollapseNavigation headline="Menu eins">
-    <UiFilterBadgeButton label="test eins" />
-    <UiFilterBadgeButton label="test zwei" />
-    <UiFilterBadgeButton label="test drei" />
+    <UiButton> test eins </UiButton>
+    <UiButton> test zwei </UiButton>
+    <UiButton> test drei </UiButton>
   </UiCollapseNavigation>
 </template>
 

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import UiFilterBadgeButton from "../UiFilterBadgeButton/UiFilterBadgeButton.vue";
+import UiButton from "../UiButton/UiButton.vue";
 
 import UiCollapseNavigation from "./UiCollapseNavigation.vue";
 
@@ -34,12 +34,12 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    components: { UiCollapseNavigation, UiButton },
     template: `
       <UiCollapseNavigation v-bind='args' >
-      <UiFilterBadgeButton label="test eins" />
-      <UiFilterBadgeButton label="test zwei" />
-      <UiFilterBadgeButton label="test drei" />
+      <UiButton> test eins </UiButton>
+      <UiButton> test zwei </UiButton>
+      <UiButton> test drei </UiButton>
       </UiCollapseNavigation>
     `,
   }),
@@ -50,17 +50,17 @@ export const MultipleMenus: Story = {
     setup() {
       return { args };
     },
-    components: { UiCollapseNavigation, UiFilterBadgeButton },
+    components: { UiCollapseNavigation, UiButton },
     template: `
       <UiCollapseNavigation headline="Menu eins">
-      <UiFilterBadgeButton label="test eins" />
-      <UiFilterBadgeButton label="test zwei" />
-      <UiFilterBadgeButton label="test drei" />
+      <UiButton> test eins </UiButton>
+      <UiButton> test zwei </UiButton>
+      <UiButton> test drei </UiButton>
       </UiCollapseNavigation>
       <UiCollapseNavigation headline="Menu zwei">
-      <UiFilterBadgeButton label="test vier" />
-      <UiFilterBadgeButton label="test fünf" />
-      <UiFilterBadgeButton label="test sechs" />
+      <UiButton> test vier </UiButton>
+      <UiButton> test fünf </UiButton>
+      <UiButton> test sechs </UiButton>
       </UiCollapseNavigation>
     `,
   }),

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

@@ -1,16 +1,18 @@
 <template>
-  <div :class="hasBorderTop ? 'border-t border-t-gray-300' : ''" />
+  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
-    color="transparent"
+    appearance="secondary"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >
-    <h3 class="text-xs font-semibold tracking-widest text-gray-700 uppercase">
+    <h3
+      class="text-xs font-semibold tracking-widest text-neutral-subtle uppercase"
+    >
       {{ headline }}
     </h3>
     <UiIcon
       name="chevron-down"
-      class="rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300"
+      class="rounded-full text-neutral-subtle transition-transform duration-500 hover:bg-neutral-faint"
       :class="{ 'rotate-180': openMenu }"
     />
   </UiButton>
@@ -67,9 +69,9 @@ const toggleMenuHandler = () => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiCollapseNavigation is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

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

@@ -6,12 +6,10 @@ import UiColorPicker from "./UiColorPicker.vue";
 
 describe("UiColorPicker", () => {
   it("should have a default color selected", () => {
-    const wrapper = mount(UiColorPicker, {
-      props: {
-        modelValue: "",
-      },
-    });
-    const defaultColor = wrapper.find("#color-e53935");
+    const wrapper = mount(UiColorPicker);
+    const defaultColor = wrapper.find(
+      `[data-testid='color-btn-${COLORS[0].substring(1)}']`,
+    );
     expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
   });
 
@@ -25,28 +23,18 @@ describe("UiColorPicker", () => {
     expect(colorInputContainer.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should switch selected color from available options", () => {
-    const wrapper = mount(UiColorPicker, {
-      props: {
-        modelValue: "",
-      },
-    });
-    const thirdOption = wrapper.find(`#color-${COLORS[2]}`);
-    thirdOption.trigger("click");
-    expect(thirdOption.find("#cp-checkmark")).toBeTruthy();
-    expect(wrapper.emitted()["update:modelValue"][1]).toEqual([
-      `#${COLORS[2]}`,
-    ]);
+  it("should switch selected color from available options", async () => {
+    const wrapper = mount(UiColorPicker);
+    const thirdOption = wrapper.findAll("button").at(2);
+    await thirdOption?.trigger("click");
+    expect(thirdOption?.find("#cp-checkmark")).toBeTruthy();
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([COLORS[2]]);
   });
 
   it("should switch selected color from native color input", () => {
-    const wrapper = mount(UiColorPicker, {
-      props: {
-        modelValue: "",
-      },
-    });
+    const wrapper = mount(UiColorPicker);
     const colorInputContainer = wrapper.find(".UiColorPicker-input");
     colorInputContainer.setValue("#00c58e");
-    expect(wrapper.emitted()["update:modelValue"][1]).toEqual(["#00c58e"]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["#00c58e"]);
   });
 });

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
 
 import UiLabel from "../UiLabel/UiLabel.vue";
 
@@ -23,9 +24,6 @@ const meta = {
       ],
     },
   },
-  args: {
-    modelValue: "#e53935",
-  },
 } satisfies Meta<typeof UiColorPicker>;
 
 export default meta;
@@ -35,11 +33,12 @@ export const Default: Story = {
   render: (args) => ({
     components: { UiColorPicker, UiLabel },
     template: `
-      <UiLabel class="inline-block mb-2 text-xs text-gray-700">Farbe wählen</UiLabel>
-      <UiColorPicker v-model="args.modelValue" />
+      <UiLabel class="inline-block mb-2 text-xs text-neutral-subtle">Farbe wählen</UiLabel>
+      <UiColorPicker v-model="color" />
     `,
     setup() {
-      return { args };
+      const color = ref("#e53935");
+      return { args, color };
     },
   }),
 };

package/dist/src/components/UiColorPicker/UiColorPicker.vue

@@ -1,47 +1,42 @@
 <template>
-  <div class="flex">
-    <div
+  <div class="flex gap-3">
+    <button
       v-for="(hexColor, index) of COLORS"
-      :id="`color-${hexColor}`"
       :key="`ui-cp-${index}`"
-      class="mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center"
-      :style="{ backgroundColor: `#${hexColor}` }"
-      :aria-checked="value === hexColor"
-      @click="
-        value = hexColor;
-        emit('update:modelValue', `#${hexColor}`);
-      "
+      :data-testid="`color-btn-${hexColor.substring(1)}`"
+      class="flex size-4 flex-none rotate-45 items-center justify-center"
+      :style="{ backgroundColor: hexColor }"
+      @click="model = hexColor"
     >
       <UiIcon
-        v-if="value === hexColor"
-        id="cp-checmark"
+        v-if="model === hexColor"
+        id="cp-checkmark"
         name="checkmark"
         class="-rotate-45"
         :class="checkmarkIconColor"
         size="xs"
       />
-    </div>
+    </button>
     <div
-      class="UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center"
+      class="UiColorPicker-inputWrapper flex size-4 flex-none rotate-45 items-center justify-center"
       :style="{
-        backgroundColor: !COLORS.includes(value) ? customInputValue : '',
+        backgroundColor: !COLORS.includes(model) ? model : '',
       }"
-      :aria-checked="!COLORS.includes(value)"
     >
       <input
-        v-model="customInputValue"
+        v-model="model"
         type="color"
-        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
+        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer opacity-0"
       />
       <UiIcon
-        v-if="COLORS.includes(value)"
+        v-if="COLORS.includes(model)"
         name="color-palette"
-        size="medium"
+        size="md"
         class="-rotate-45"
       />
       <UiIcon
         v-else
-        id="cp-checmark"
+        id="cp-checkmark"
         name="checkmark"
         class="-rotate-45"
         :class="checkmarkIconColor"
@@ -53,56 +48,22 @@
 
 <script setup lang="ts">
 import Color from "color";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
 import { COLORS } from "./lib/colors.ts";
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string;
-  }>(),
-  {
-    modelValue: `#${COLORS[0]}`,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [string];
-}>();
-
-const value = ref(COLORS[0]);
-watch(
-  () => props.modelValue,
-  () => {
-    const unHexed = props.modelValue?.substring(1);
-    value.value = unHexed || COLORS[0];
-    if (!unHexed) {
-      emit("update:modelValue", `#${value.value}`);
-    }
-  },
-  { immediate: true },
-);
-
-const customInputValue = computed({
-  get() {
-    return `#${value.value}`;
-  },
-  set(hexColor) {
-    value.value = hexColor.substring(1);
-    emit("update:modelValue", `#${value.value}`);
-  },
-});
+const model = defineModel<string>({ default: COLORS[0] });
 
 const checkmarkIconColor = computed(() => {
-  const selectedColor = Color(`#${value.value}`);
+  const selectedColor = Color(model.value);
   const contrastGray = selectedColor.contrast(Color.rgb(77, 77, 77));
   const contrastWhite = selectedColor.contrast(Color("white"));
 
   if (contrastWhite >= contrastGray) {
-    return "text-white";
+    return "text-neutral";
   }
-  return "text-gray-800";
+  return "text-neutral-emphasis";
 });
 </script>

package/dist/src/components/UiColorPicker/lib/colors.ts

@@ -1,11 +1,11 @@
 export const COLORS = [
-  "e53935",
-  "f50057",
-  "8e24aa",
-  "2196f3",
-  "00acc1",
-  "00897b",
-  "00e676",
-  "ffff00",
-  "ffb300",
+  "#e53935",
+  "#f5138d",
+  "#8e24aa",
+  "#2196f3",
+  "#00acc1",
+  "#00897b",
+  "#00e281",
+  "#f9f500",
+  "#ffb300",
 ];