@zap-wunschlachen/wl-shared-components 1.0.38 → 1.0.40

package/src/assets/css/variables.css

@@ -1,109 +1,112 @@
-:root {
-  /* Primary Dental Blue */
-  --Dental-Blue-0: #172774;
-  --Dental-Blue-1: #111c54;
-  --Dental-Blue--1: #4f5b95;
-  --Dental-Blue--2: #7079a8;
-  --Dental-Blue--3: #9198bc;
-  --Dental-Blue--4: #cacdde;
-  --Dental-Blue--5: #e5e6ee;
-  --Dental-Blue--6: #f6f6f8;
-
-  /* Primary Dental Light Blue */
-  --Dental-Light-Blue-4: #293e52;
-  --Dental-Light-Blue-3: #69849e;
-  --Dental-Light-Blue-2: #93b1cf;
-  --Dental-Light-Blue-1: #adcbe9;
-  --Dental-Light-Blue-0: #c5e1fc;
-  --Dental-Light-Blue--1: #dcecfc;
-  --Dental-Light-Blue--2: #edf5fc;
-  --Dental-Light-Blue--3: #f8fafd;
-
-  /* Primary Dental Air */
-  --Dental-Air-5: #2e3133;
-  --Dental-Air-4: #70767b;
-  --Dental-Air-3: #99a2a9;
-  --Dental-Air-2: #c5d1d9;
-  --Dental-Air-1: #dbe8f1;
-  --Dental-Air-0: #e4f2fb;
-  --Dental-Air--1: #f4f9fd;
-  --Dental-Air--2: #f9fbfd;
-
-  /* CTA */
-  --Power-Red-3: #1e050f;
-  --Power-Red-2: #4a0d26;
-  --Power-Red-1: #891747;
-  --Power-Red-0: #f4297e;
-  --Power-Red--1: #f769a5;
-  --Power-Red--2: #fa9fc5;
-  --Power-Red--3: #fcc9df;
-  --Power-Red--4: #feeaf2;
-
-  /* Tertiary Light Gum */
-  --Light-Gum-4: #1f1c1b;
-  --Light-Gum-3: #4c4444;
-  --Light-Gum-2: #b6a3a2;
-  --Light-Gum-1: #edd4d2;
-  --Light-Gum-0: #fce2df;
-  --Light-Gum--1: #fdeeec;
-  --Light-Gum--2: #fef3f2;
-  --Light-Gum--3: #fef9f9;
-
-  /* Tertiary Warm Light */
-  --Warm-Light-5: #10100e;
-  --Warm-Light-4: #34322e;
-  --Warm-Light-3: #5c5952;
-  --Warm-Light-2: #cec7b8;
-  --Warm-Light-1: #f0e8d6;
-  --Warm-Light-0: #fff6e4;
-  --Warm-Light--1: #fff8eb;
-  --Warm-Light--2: #fffbf4;
-
-  /* Tertiary Warm Air */
-  --Warm-Air--3: #fffbf4;
-  --Warm-Air--4: #fffdfa;
-
-  /* Tertiary Soft Concrete */
-  --Soft-Concrete-5: #1e1e1e;
-
-  --Soft-Concrete-4: #4a4a4b;
-  --Soft-Concrete-3: #676769;
-  --Soft-Concrete-2: #c1c1c2;
-  --Soft-Concrete-1: #dddddf;
-  --Soft-Concrete-0: #f5f5f7;
-  --Soft-Concrete--1: #f9f9fb;
-  --Soft-Concrete--2: #fbfbfc;
-
-  /* Error Red */
-  --Error-Red-1: #630112;
-  --Error-Red-0: #b00020;
-  --Error-Red--1: #e3a6b1;
-
-  /* Success Green */
-  --Success-Green-1: #037a72;
-  --Success-Green-0: #03dac6;
-  --Success-Green--1: #f3fdfc;
-
-  /* Warning */
-  --Warning-1: #4f4700;
-  --Warning-0: #ffe600;
-  --Warning--1: #fff8db;
-
-  /* Check */
-  --Check-1: #037a2c; /* Text color */
-  --Check-0: #01d449; /* Unused, but ready */
-  --Check--1: #d8fde4; /* Unused, but ready */
-
-  --Trkis: #bae6ea;
-  --Treatment-SkyBlue: #cce8fd;
-  --Treatment-Yellow: #fefdbd;
-
-  /*White Cocoon*/
-  --Light-Nude-0: #FFF7EC;
-  --Light-Nude-3: #fffcf8;
-  --Dark-Nude-0: #c4aea1;
-  --Night-Nude-0: #a1978f;
-  --Dark-Nude-2: #7F7168;
-  --Dark-Nude-3: #453D39;
-  --Dark-Nude--3: #F1ECE9;
-}
+:root {
+  /* Primary Dental Blue */
+  --Dental-Blue-0: #172774;
+  --Dental-Blue-1: #111c54;
+  --Dental-Blue--1: #4f5b95;
+  --Dental-Blue--2: #7079a8;
+  --Dental-Blue--3: #9198bc;
+  --Dental-Blue--4: #cacdde;
+  --Dental-Blue--5: #e5e6ee;
+  --Dental-Blue--6: #f6f6f8;
+
+  /* Primary Dental Light Blue */
+  --Dental-Light-Blue-4: #293e52;
+  --Dental-Light-Blue-3: #69849e;
+  --Dental-Light-Blue-2: #93b1cf;
+  --Dental-Light-Blue-1: #adcbe9;
+  --Dental-Light-Blue-0: #c5e1fc;
+  --Dental-Light-Blue--1: #dcecfc;
+  --Dental-Light-Blue--2: #edf5fc;
+  --Dental-Light-Blue--3: #f8fafd;
+
+  /* Primary Dental Air */
+  --Dental-Air-5: #2e3133;
+  --Dental-Air-4: #70767b;
+  --Dental-Air-3: #99a2a9;
+  --Dental-Air-2: #c5d1d9;
+  --Dental-Air-1: #dbe8f1;
+  --Dental-Air-0: #e4f2fb;
+  --Dental-Air--1: #f4f9fd;
+  --Dental-Air--2: #f9fbfd;
+
+  /* CTA */
+  --Power-Red-3: #1e050f;
+  --Power-Red-2: #4a0d26;
+  --Power-Red-1: #891747;
+  --Power-Red-0: #f4297e;
+  --Power-Red--1: #f769a5;
+  --Power-Red--2: #fa9fc5;
+  --Power-Red--3: #fcc9df;
+  --Power-Red--4: #feeaf2;
+
+  /* Tertiary Light Gum */
+  --Light-Gum-4: #1f1c1b;
+  --Light-Gum-3: #4c4444;
+  --Light-Gum-2: #b6a3a2;
+  --Light-Gum-1: #edd4d2;
+  --Light-Gum-0: #fce2df;
+  --Light-Gum--1: #fdeeec;
+  --Light-Gum--2: #fef3f2;
+  --Light-Gum--3: #fef9f9;
+
+  /* Tertiary Warm Light */
+  --Warm-Light-5: #10100e;
+  --Warm-Light-4: #34322e;
+  --Warm-Light-3: #5c5952;
+  --Warm-Light-2: #cec7b8;
+  --Warm-Light-1: #f0e8d6;
+  --Warm-Light-0: #fff6e4;
+  --Warm-Light--1: #fff8eb;
+  --Warm-Light--2: #fffbf4;
+
+  /* Tertiary Warm Air */
+  --Warm-Air--3: #fffbf4;
+  --Warm-Air--4: #fffdfa;
+
+  /* Tertiary Soft Concrete */
+  --Soft-Concrete-5: #1e1e1e;
+
+  --Soft-Concrete-4: #4a4a4b;
+  --Soft-Concrete-3: #676769;
+  --Soft-Concrete-2: #c1c1c2;
+  --Soft-Concrete-1: #dddddf;
+  --Soft-Concrete-0: #f5f5f7;
+  --Soft-Concrete--1: #f9f9fb;
+  --Soft-Concrete--2: #fbfbfc;
+
+  /* Error Red */
+  --Error-Red-1: #630112;
+  --Error-Red-0: #b00020;
+  --Error-Red--1: #e3a6b1;
+
+  /* Success Green */
+  --Success-Green-1: #037a72;
+  --Success-Green-0: #03dac6;
+  --Success-Green--1: #f3fdfc;
+
+  /* Warning */
+  --Warning-1: #4f4700;
+  --Warning-0: #ffe600;
+  --Warning--1: #fff8db;
+
+  /* Check */
+  --Check-1: #037a2c; /* Text color */
+  --Check-0: #01d449; /* Unused, but ready */
+  --Check--1: #d8fde4; /* Unused, but ready */
+
+  --Trkis: #bae6ea;
+  --Treatment-SkyBlue: #cce8fd;
+  --Treatment-Yellow: #fefdbd;
+
+  /*White Cocoon*/
+  --Light-Nude-0: #FFF7EC;
+  --Light-Nude-3: #fffcf8;
+  --Dark-Nude-0: #c4aea1;
+  --Night-Nude-0: #a1978f;
+  --Dark-Nude-2: #7F7168;
+  --Dark-Nude-3: #453D39;
+  --Dark-Nude--3: #F1ECE9;
+
+  /* Primary color - set dynamically via JS based on domain */
+  --primary-color: var(--Dental-Blue-0);
+}

package/src/components/Accordion/Accordion.css

@@ -1,59 +1,59 @@
-/* The default styles will apply conditionally based on the plain prop */
-
-.outlined-style .v-expansion-panel__shadow {
-  box-shadow:
-    0px -2px 0px 0px var(--Dental-Blue-0),
-    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
-}
-
-.outlined-style .v-expansion-panel-title {
-  border-radius: 0 !important;
-}
-
-.outlined-style .v-expansion-panel-title:hover {
-  background: var(--Dental-Light-Blue--3) !important;
-}
-
-.outlined-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 0px;
-}
-
-.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
-  opacity: 0;
-}
-
-.plain-style .v-expansion-panel__shadow {
-  box-shadow: none !important;
-}
-
-.plain-style.v-expansion-panel {
-  background: transparent !important;
-}
-
-.v-expansion-panel-title {
-  background-color: transparent !important;
-}
-
-.plain-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 8px;
-}
-
-.plain-style .v-expansion-panel-text__wrapper {
-  padding: 0px !important;
-}
-
-.plain-style
-  .v-expansion-panel--active
-  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
-  min-height: none !important;
-}
-
-.plain-style .v-expansion-panel-title {
-  padding: 0px !important;
-}
-
-.wl-accordion .v-icon {
-  color: var(--Dental-Blue-0);
-}
+/* The default styles will apply conditionally based on the plain prop */
+
+.outlined-style .v-expansion-panel__shadow {
+  box-shadow:
+    0px -2px 0px 0px var(--Dental-Blue-0),
+    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
+}
+
+.outlined-style .v-expansion-panel-title {
+  border-radius: 0 !important;
+}
+
+.outlined-style .v-expansion-panel-title:hover {
+  background: var(--Dental-Light-Blue--3) !important;
+}
+
+.outlined-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 0px;
+}
+
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 0;
+}
+
+.plain-style .v-expansion-panel__shadow {
+  box-shadow: none !important;
+}
+
+.plain-style.v-expansion-panel {
+  background: transparent !important;
+}
+
+.v-expansion-panel-title {
+  background-color: transparent !important;
+}
+
+.plain-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 8px;
+}
+
+.plain-style .v-expansion-panel-text__wrapper {
+  padding: 0px !important;
+}
+
+.plain-style
+  .v-expansion-panel--active
+  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
+  min-height: none !important;
+}
+
+.plain-style .v-expansion-panel-title {
+  padding: 0px !important;
+}
+
+.wl-accordion .v-icon {
+  color: var(--Dental-Blue-0);
+}

package/src/components/Accordion/AccordionGroup.vue

@@ -1,51 +1,51 @@
-<template>
-  <v-expansion-panels
-    v-model="internalValue"
-    expand-icon="heroicons:chevron-down"
-    collapse-icon="heroicons:chevron-up"
-    :rounded="false"
-    :multiple="multiple"
-    class="wl-accordion"
-    :variant="variantGroup"
-    data-testid="root"
-  >
-    <slot />
-  </v-expansion-panels>
-</template>
-
-<script setup>
-import './Accordion.css';
-import { defineProps, defineEmits, computed } from 'vue';
-
-const props = defineProps({
-  /**
-   * The modelValue for v-model binding.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: null,
-  },
-  /**
-   * Allows multiple panels to be open simultaneously.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  variantGroup: {
-    type: String,
-    default: 'accordion',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const internalValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-</script>
+<template>
+  <v-expansion-panels
+    v-model="internalValue"
+    expand-icon="heroicons:chevron-down"
+    collapse-icon="heroicons:chevron-up"
+    :rounded="false"
+    :multiple="multiple"
+    class="wl-accordion"
+    :variant="variantGroup"
+    data-testid="root"
+  >
+    <slot />
+  </v-expansion-panels>
+</template>
+
+<script setup>
+import './Accordion.css';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The modelValue for v-model binding.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: null,
+  },
+  /**
+   * Allows multiple panels to be open simultaneously.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  variantGroup: {
+    type: String,
+    default: 'accordion',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>

package/src/components/Accordion/AccordionItem.vue

@@ -1,66 +1,66 @@
-<template>
-  <v-expansion-panel
-    :value="value"
-    :class="{
-      'plain-style': variant === 'plain',
-      'outlined-style': variant === 'outlined',
-    }"
-    :bg-color="bgColor"
-    data-testid="root"
-  >
-    <!-- Title Slot with Fallback to Prop -->
-    <template #title>
-      <slot name="title">
-        <h3>{{ title }}</h3>
-      </slot>
-    </template>
-
-    <!-- Content Slot with Fallback to Prop -->
-    <template #text>
-      <slot name="content">
-        <p>{{ text }}</p>
-      </slot>
-    </template>
-  </v-expansion-panel>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-import './Accordion.css';
-
-const props = defineProps({
-  /**
-   * The variant of the panel ('plain' or 'outlined').
-   */
-  variant: {
-    type: String,
-    default: 'outlined',
-    validator: (value) => ['plain', 'outlined'].includes(value),
-  },
-  /**
-   * The title displayed in the panel header.
-   */
-  title: {
-    type: String,
-    default: 'Default Title',
-  },
-  /**
-   * The text content inside the panel.
-   */
-  text: {
-    type: String,
-    default: 'Default text',
-  },
-  /**
-   * Unique value identifying the panel.
-   */
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  bgColor: {
-    type: String,
-    default: 'var(--Soft-Concrete-0)',
-  },
-});
-</script>
+<template>
+  <v-expansion-panel
+    :value="value"
+    :class="{
+      'plain-style': variant === 'plain',
+      'outlined-style': variant === 'outlined',
+    }"
+    :bg-color="bgColor"
+    data-testid="root"
+  >
+    <!-- Title Slot with Fallback to Prop -->
+    <template #title>
+      <slot name="title">
+        <h3>{{ title }}</h3>
+      </slot>
+    </template>
+
+    <!-- Content Slot with Fallback to Prop -->
+    <template #text>
+      <slot name="content">
+        <p>{{ text }}</p>
+      </slot>
+    </template>
+  </v-expansion-panel>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import './Accordion.css';
+
+const props = defineProps({
+  /**
+   * The variant of the panel ('plain' or 'outlined').
+   */
+  variant: {
+    type: String,
+    default: 'outlined',
+    validator: (value) => ['plain', 'outlined'].includes(value),
+  },
+  /**
+   * The title displayed in the panel header.
+   */
+  title: {
+    type: String,
+    default: 'Default Title',
+  },
+  /**
+   * The text content inside the panel.
+   */
+  text: {
+    type: String,
+    default: 'Default text',
+  },
+  /**
+   * Unique value identifying the panel.
+   */
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  bgColor: {
+    type: String,
+    default: 'var(--Soft-Concrete-0)',
+  },
+});
+</script>

package/src/components/Appointment/Card/Actions.css

@@ -1,55 +1,55 @@
-/* Actions component styles */
-.actions-grid {
-  margin-bottom: 1.25rem;
-  display: flex;
-  gap: 20px;
-  color: var(--Dental-Blue-0);
-}
-
-.actions-column {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.action-button {
-  font-weight: bold;
-  flex: 1;
-}
-
-.action-button:first-child {
-  padding-right: 0.5rem;
-}
-
-.action-button:last-child {
-  padding-left: 0.5rem;
-}
-
-.full-width-button {
-  width: 100%;
-}
-
-.full-width-button-opacity {
-  width: 100%;
-  opacity: 1;
-}
-
-.bg-Soft-concrete-1 {
-  background-color: #F8FAFD;
-}
-
-.border-rounded-md {
-  border-radius: 0.375rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.text-dental-blue-3 {
-  color: var(--Dental-Blue--0) !important;
-}
-
-.text-error-red-0 {
-  color: #B00020 !important;
+/* Actions component styles */
+.actions-grid {
+  margin-bottom: 1.25rem;
+  display: flex;
+  gap: 20px;
+  color: var(--Dental-Blue-0);
+}
+
+.actions-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.action-button {
+  font-weight: bold;
+  flex: 1;
+}
+
+.action-button:first-child {
+  padding-right: 0.5rem;
+}
+
+.action-button:last-child {
+  padding-left: 0.5rem;
+}
+
+.full-width-button {
+  width: 100%;
+}
+
+.full-width-button-opacity {
+  width: 100%;
+  opacity: 1;
+}
+
+.bg-Soft-concrete-1 {
+  background-color: #F8FAFD;
+}
+
+.border-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.text-dental-blue-3 {
+  color: var(--Dental-Blue--0) !important;
+}
+
+.text-error-red-0 {
+  color: #B00020 !important;
 }