@dpa-id-components/dpa-shared-components 22.0.0-next.0 → 22.0.0-next.2

package/src/assets/icons/folder-filled.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    width="20"
-    height="18"
-    viewBox="0 0 20 18"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M17.5 17.5H2.5C1.122 17.5 0 16.409 0 15.068V2.931C0 1.59 1.122 0.5 2.5 0.5H7.101C7.4 0.5 7.685 0.634 7.875 0.867L10.474 4.046H17.5C18.878 4.046 20 5.136 20 6.478V15.068C20 16.409 18.878 17.5 17.5 17.5Z"
+      d="M19.5 20.5H4.5C3.122 20.5 2 19.409 2 18.068V5.931C2 4.59 3.122 3.5 4.5 3.5H9.101C9.4 3.5 9.685 3.634 9.875 3.867L12.474 7.046H19.5C20.878 7.046 22 8.136 22 9.478V18.068C22 19.409 20.878 20.5 19.5 20.5Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/info-filled.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10 7C9.448 7 9 6.552 9 6C9 5.448 9.448 5 10 5C10.552 5 11 5.448 11 6C11 6.552 10.552 7 10 7ZM11 14C11 14.552 10.552 15 10 15C9.448 15 9 14.552 9 14V9C9 8.448 9.448 8 10 8C10.552 8 11 8.448 11 9V14ZM10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.522 20 20 15.523 20 10C20 4.477 15.522 0 10 0Z"
+      d="M12 9C11.448 9 11 8.552 11 8C11 7.448 11.448 7 12 7C12.552 7 13 7.448 13 8C13 8.552 12.552 9 12 9ZM13 16C13 16.552 12.552 17 12 17C11.448 17 11 16.552 11 16V11C11 10.448 11.448 10 12 10C12.552 10 13 10.448 13 11V16ZM12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.522 22 22 17.523 22 12C22 6.477 17.522 2 12 2Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/lock-filled.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M16 9.99999H17C17.7956 9.99999 18.5587 10.3161 19.1213 10.8787C19.6839 11.4413 20 12.2043 20 13V19C20 19.7956 19.6839 20.5587 19.1213 21.1213C18.5587 21.6839 17.7956 22 17 22H7C6.20435 22 5.44129 21.6839 4.87868 21.1213C4.31607 20.5587 4 19.7956 4 19V13C4 12.2043 4.31607 11.4413 4.87868 10.8787C5.44129 10.3161 6.20435 9.99999 7 9.99999H8V6.10999C8 5.04912 8.42143 4.0317 9.17157 3.28156C9.92172 2.53141 10.9391 2.10999 12 2.10999C13.0609 2.10999 14.0783 2.53141 14.8284 3.28156C15.5786 4.0317 16 5.04912 16 6.10999V9.99999ZM10.5643 4.64198C10.1894 5.03743 9.98655 5.56528 10 6.10999V9.99999H14V6.10999C14.0135 5.56528 13.8106 5.03743 13.4357 4.64198C13.0609 4.24653 12.5446 4.01569 12 3.99999C11.4554 4.01569 10.9391 4.24653 10.5643 4.64198ZM13 14.75C13 14.1977 12.5523 13.75 12 13.75C11.4477 13.75 11 14.1977 11 14.75V16.75C11 17.3023 11.4477 17.75 12 17.75C12.5523 17.75 13 17.3023 13 16.75V14.75Z"
+      d="M12 2.11C13.0609 2.11 14.078 2.53173 14.8281 3.28188C15.5783 4.03202 16 5.04913 16 6.11V9.99965H17C17.7956 9.99965 18.5585 10.3161 19.1211 10.8786C19.6836 11.4411 19.9999 12.2041 20 12.9996V18.9996C20 19.7953 19.6837 20.5591 19.1211 21.1217C18.5585 21.6841 17.7955 21.9996 17 21.9996H7C6.2045 21.9996 5.44149 21.6841 4.87891 21.1217C4.3163 20.5591 4 19.7953 4 18.9996V12.9996C4.00009 12.2041 4.31638 11.4411 4.87891 10.8786C5.4415 10.3161 6.20443 9.99965 7 9.99965H8V6.11C8 5.04913 8.42173 4.03202 9.17188 3.28188C9.92202 2.53173 10.9391 2.11 12 2.11ZM12 13.7496C11.4478 13.7496 11.0002 14.1975 11 14.7496V16.7496C11 17.3019 11.4477 17.7496 12 17.7496C12.5523 17.7496 13 17.3019 13 16.7496V14.7496C12.9998 14.1975 12.5522 13.7496 12 13.7496ZM12 3.99965C11.4554 4.01535 10.9393 4.24678 10.5645 4.64223C10.1896 5.03767 9.98655 5.56531 10 6.11V9.99965H14V6.11C14.0135 5.56531 13.8104 5.03767 13.4355 4.64223C13.0607 4.24678 12.5446 4.01535 12 3.99965Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/map-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM10.0555 12.4101C10.6311 12.7947 11.3078 13 12 13C12.9283 13 13.8185 12.6313 14.4749 11.9749C15.1313 11.3185 15.5 10.4283 15.5 9.5C15.5 8.80777 15.2947 8.13108 14.9101 7.5555C14.5256 6.97993 13.9789 6.53133 13.3394 6.26642C12.6999 6.00151 11.9961 5.9322 11.3172 6.06725C10.6382 6.2023 10.0146 6.53564 9.52513 7.02513C9.03564 7.51461 8.7023 8.13825 8.56725 8.81718C8.4322 9.49612 8.50151 10.1999 8.76642 10.8394C9.03133 11.4789 9.47993 12.0256 10.0555 12.4101ZM13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/map.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM10.0555 12.4101C10.6311 12.7947 11.3078 13 12 13C12.9283 13 13.8185 12.6313 14.4749 11.9749C15.1313 11.3185 15.5 10.4283 15.5 9.5C15.5 8.80777 15.2947 8.13108 14.9101 7.5555C14.5256 6.97993 13.9789 6.53133 13.3394 6.26642C12.6999 6.00151 11.9961 5.9322 11.3172 6.06725C10.6382 6.2023 10.0146 6.53564 9.52513 7.02513C9.03564 7.51461 8.7023 8.13825 8.56725 8.81718C8.4322 9.49612 8.50151 10.1999 8.76642 10.8394C9.03133 11.4789 9.47993 12.0256 10.0555 12.4101ZM13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
+      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM6 9.92C6 13.65 10.33 18.06 12 19.65C13.67 18.06 18 13.62 18 9.92C18 8.3287 17.3679 6.80258 16.2426 5.67736C15.1174 4.55214 13.5913 3.92 12 3.92C10.4087 3.92 8.88258 4.55214 7.75736 5.67736C6.63214 6.80258 6 8.3287 6 9.92ZM10.0555 6.58986C10.6311 6.20527 11.3078 6 12 6C12.9283 6 13.8185 6.36875 14.4749 7.02513C15.1313 7.6815 15.5 8.57174 15.5 9.5C15.5 10.1922 15.2947 10.8689 14.9101 11.4445C14.5256 12.0201 13.9789 12.4687 13.3394 12.7336C12.6999 12.9985 11.9961 13.0678 11.3172 12.9327C10.6383 12.7977 10.0146 12.4644 9.52513 11.9749C9.03564 11.4854 8.7023 10.8617 8.56725 10.1828C8.4322 9.50388 8.50152 8.80015 8.76642 8.16061C9.03133 7.52107 9.47993 6.97444 10.0555 6.58986ZM11.1666 10.7472C11.4133 10.912 11.7033 11 12 11C12.3978 11 12.7794 10.842 13.0607 10.5607C13.342 10.2794 13.5 9.89782 13.5 9.5C13.5 9.20333 13.412 8.91332 13.2472 8.66665C13.0824 8.41997 12.8481 8.22771 12.574 8.11418C12.2999 8.00065 11.9983 7.97094 11.7074 8.02882C11.4164 8.0867 11.1491 8.22956 10.9393 8.43934C10.7296 8.64912 10.5867 8.91639 10.5288 9.20736C10.4709 9.49834 10.5007 9.79994 10.6142 10.074C10.7277 10.3481 10.92 10.5824 11.1666 10.7472Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/{play-fill.vue → play-filled.vue}

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6 4.9186C6 3.73013 7.31627 3.01369 8.31435 3.65891L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.97 6 20.2574 6 19.05V4.9186Z"
+      d="M6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/play.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
+      d="M8 5.83723V18.1L17.197 11.7828L8 5.83723ZM6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
       fill="currentColor"
     />
   </svg>

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3"
+    class="mb-px w-full bg-neutral pt-2 pr-4 pb-3 pl-3 md:pt-3"
     :class="classObject"
     data-testid="rootDiv"
   >
@@ -18,15 +18,15 @@
           <UiIcon
             size="sm"
             :name="genreIcon"
-            class="mr-2 shrink-0 fill-current text-gray-700"
+            class="mr-2 shrink-0 fill-current text-neutral-subtle"
           />
-          <span class="text-xs font-medium text-gray-900">
+          <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-gray-700"
+          class="w-16 shrink-0 text-right text-xs text-neutral-subtle"
           ><slot name="planning"
         /></span>
       </div>
@@ -42,7 +42,7 @@
             />
             <span
               v-if="imgCount > 1"
-              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs/4 font-semibold text-white"
+              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
             >
@@ -63,7 +63,7 @@
         <!-- Text length -->
         <span
           v-if="$slots.textLength"
-          class="text-xs text-gray-700"
+          class="text-xs text-neutral-subtle"
           :class="!isFulfilled ? 'ml-6' : ''"
           ><slot name="textLength"
         /></span>
@@ -72,7 +72,7 @@
       <!-- Time published -->
       <span
         v-if="$slots.timePublished"
-        class="pt-1 text-xs font-medium text-gray-700"
+        class="pt-1 text-xs font-medium text-neutral-subtle"
         ><slot name="timePublished"
       /></span>
     </div>
@@ -131,8 +131,8 @@ const classObject = computed(() => {
     return "cursor-auto";
   }
   return props.disabled
-    ? "cursor-not-allowed transition shadow-sm border border-gray-300"
-    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500";
+    ? "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(() => {

package/src/components/UiButton/UiButton.vue

@@ -3,7 +3,7 @@
     :is="typeof to === 'string' ? 'a' : to ? 'RouterLink' : 'button'"
     :class="
       cn(
-        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
+        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:focus-outline disabled:cursor-not-allowed',
         appearanceClasses,
         BUTTON_SIZE_CLASSES[size],
         $attrs.class,

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex *:rounded-none *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
+    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>

package/src/components/UiCard/UiCard.vue

@@ -1,6 +1,6 @@
 <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%]"
+    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>

package/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
     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>

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -64,21 +64,27 @@
     >
       <template #dp-input="{ value }">
         <UiButton
-          class="flex flex-none items-center justify-between"
+          class="flex justify-between"
           :class="{
             'border-neutral-subtle': internalIsOpen,
-            'w-full': triggerWidth == 'full',
+            'w-full min-w-0': triggerWidth === 'full',
+            'flex-none': triggerWidth === 'fit',
           }"
           :appearance="value ? 'primary' : 'secondary-alt'"
           :disabled
           size="sm"
           data-testid="datepicker-trigger"
         >
-          <div class="flex items-center gap-2">
-            <UiIcon v-if="leftTriggerIcon" :name="leftTriggerIcon" size="sm" />
-            {{ value || triggerPlaceholderText }}
+          <div class="flex min-w-0 items-center gap-2">
+            <UiIcon
+              v-if="leftTriggerIcon"
+              class="shrink-0"
+              :name="leftTriggerIcon"
+              size="sm"
+            />
+            <span class="truncate">{{ value || triggerPlaceholderText }}</span>
           </div>
-          <UiIcon name="chevron-down" size="sm" />
+          <UiIcon class="shrink-0" name="chevron-down" size="sm" />
         </UiButton>
       </template>
       <template v-if="leftSidebar" #left-sidebar>

package/src/components/UiFilterBadge/UiFilterBadge.vue

@@ -4,7 +4,7 @@
       class="mr-1 shrink-0"
       :style="{ color: iconColor }"
       :size="size"
-      :name="iconIsFilled ? 'saved-search-fill' : 'saved-search'"
+      :name="iconIsFilled ? 'saved-search-filled' : 'saved-search'"
     />
     <div
       :class="textSizeClass"

package/src/components/UiFilterButton/UiFilterButton.vue

@@ -13,7 +13,7 @@
     @click="onClick"
   >
     <button
-      class="w-full rounded-full focus:outline-hidden focus-visible:outline-blue"
+      class="w-full rounded-full focus:outline-hidden focus-visible:focus-outline"
       :disabled="disabled"
       type="button"
       data-testid="filter-button"
@@ -119,20 +119,21 @@ const props = withDefaults(
 );
 
 const variants = {
-  "blue-rounded": "bg-blue-default hover:bg-blue-dark",
-  "white-rounded": "bg-white hover:border-gray-700 border border-gray-400",
-  blank: "bg-transparent hover:bg-gray-300",
-  "blue-blank": "bg-transparent hover:bg-gray-300",
+  "blue-rounded": "bg-primary hover:bg-primary-dark",
+  "white-rounded":
+    "bg-neutral hover:border-neutral-subtle border border-neutral-soft",
+  blank: "bg-transparent hover:bg-neutral-faint",
+  "blue-blank": "bg-transparent hover:bg-neutral-faint",
   "transparent-rounded":
-    "bg-transparent border border-gray-400 hover:border-gray-700",
+    "bg-transparent border border-neutral-soft hover:border-neutral-subtle",
 };
 
 const textColors = {
-  "blue-rounded": "text-white",
-  "white-rounded": "text-gray-800 hover:text-gray-900",
-  blank: "text-gray-800 hover:text-gray-900",
-  "blue-blank": "text-blue-default hover:text-blue-dark",
-  "transparent-rounded": "text-gray-800",
+  "blue-rounded": "text-neutral",
+  "white-rounded": "text-neutral-emphasis hover:text-neutral-primary",
+  blank: "text-neutral-emphasis hover:text-neutral-primary",
+  "blue-blank": "text-primary hover:text-primary-dark",
+  "transparent-rounded": "text-neutral-emphasis",
 };
 
 const variantClasses = computed(() => {
@@ -140,23 +141,23 @@ const variantClasses = computed(() => {
     if (props.variant === "blank") {
       return "border border-transparent";
     }
-    return "bg-white border border-gray-400";
+    return "bg-neutral border border-neutral-soft";
   }
   if (props.active) {
     if (variants[props.variant as keyof typeof variants].includes("border")) {
-      return "bg-blue-default hover:bg-blue-dark border border-blue-default hover:border-blue-dark";
+      return "bg-primary hover:bg-primary-dark border border-primary hover:border-primary-dark";
     }
-    return "bg-blue-default hover:bg-blue-dark";
+    return "bg-primary hover:bg-primary-dark";
   }
   return variants[props.variant as keyof typeof variants];
 });
 
 const textColorClass = computed(() => {
   if (props.disabled) {
-    return "text-gray-400";
+    return "text-neutral-soft";
   }
   if (props.active) {
-    return "text-white";
+    return "text-neutral";
   }
   return textColors[props.variant as keyof typeof textColors];
 });