@nexxtmove/ui 0.1.54 → 0.1.56

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -12,6 +12,8 @@ interface NexxtCustomerJourneyTileProps {
   delay?: number
   percentage?: number
   percentageExplanaition?: string
+  variant?: 'information' | 'display'
+  selected?: boolean
 }
 
 defineOptions({
@@ -26,6 +28,8 @@ const {
   delay,
   percentage,
   percentageExplanaition,
+  variant = 'information',
+  selected = false,
 } = defineProps<NexxtCustomerJourneyTileProps>()
 
 const displayAmount = ref(animated ? 0 : (amount ?? 0))
@@ -51,20 +55,55 @@ const ariaLabel = computed(() => {
   }
   return parts.join(', ')
 })
+
+const borderColors = computed(() => {
+  switch (variant) {
+    case 'information':
+      return 'outline-gray-200'
+      break
+    case 'display':
+      if (selected) {
+        return 'outline-purple-500 body-semibold text-purple-500'
+      }
+
+      return 'outline-purple-50 text-purple-100'
+      break
+    default:
+      return ''
+  }
+})
+
+const iconColors = computed(() => {
+  switch (variant) {
+    case 'information':
+      return 'text-purple-500 bg-purple-100'
+      break
+    case 'display':
+      if (selected) {
+        return 'bg-purple-500 text-white'
+      }
+
+      return 'bg-purple-50 text-purple-100'
+      break
+    default:
+      return ''
+  }
+})
 </script>
 
 <template>
   <component
     :is="as"
     :aria-label="ariaLabel"
-    class="flex rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
-    :class="icon ? 'gap-6 p-1.5' : 'p-4'"
+    class="flex rounded-xl bg-white outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
+    :class="[icon ? 'gap-6 p-1.5' : 'p-4', borderColors]"
   >
     <div
       v-if="icon"
-      class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md bg-purple-100"
+      class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md"
+      :class="iconColors"
     >
-      <NexxtIcon :name="icon" class="text-2xl text-purple-500" aria-hidden="true" />
+      <NexxtIcon :name="icon" class="text-2xl" aria-hidden="true" />
     </div>
     <div class="flex flex-col items-start gap-1" :class="icon ? 'py-6 pr-4' : ''">
       <span v-if="title">{{ title }}</span>

package/src/components/DoughnutChart/DoughnutChart.vue

@@ -112,7 +112,7 @@ const resolvedBackgroundColor = computed(() =>
         class="flex h-full w-full items-center justify-center"
       >
         <slot>
-          <span class="heading-1 text-sapphire-900">{{ value }}</span>
+          <span class="heading-1">{{ value }}</span>
         </slot>
       </div>
     </foreignObject>

package/tailwind/nexxtmove.tailwind.theme.css

@@ -112,6 +112,7 @@
   --color-brands-x: oklch(0% 0 0);
   --color-brands-google: oklch(63.039% 0.18003 259.95533);
   --color-brands-tiktok: oklch(63.451% 0.25395 16.82869);
+  --color-brands-whatsapp: oklch(76.095% 0.20146 149.74008);
   --color-button-bg-primary-default: var(--color-cornflower-blue-500);
   --color-button-bg-primary-hover: var(--color-cornflower-blue-400);
   --color-button-bg-primary-focussed: var(--color-cornflower-blue-500);