@zap-wunschlachen/wl-shared-components 1.0.25 → 1.0.26

package/src/components/Laboratory/TimeLine/TimeLineEvent.vue

@@ -1,119 +1,119 @@
-<template>
-  <div class="d-flex flex-column ga-6">
-    <div class="d-flex flex-row ga-10 mx-4">
-      <div class="flex flex-col">
-        <div class="d-flex flex-row align-center ga-1">
-          <p>
-            {{ firstHeader }}
-          </p>
-          <v-icon
-            v-if="urgent"
-            color="var(--Power-Red-0)"
-            icon="heroicons:exclamation-circle"
-          ></v-icon>
-        </div>
-
-        <h3
-          :style="{
-            color: urgent ? 'var(--Power-Red-0)' : 'var(--Dental-Blue-0)',
-          }"
-        >
-          {{ firstDuration }}
-        </h3>
-      </div>
-
-      <div class="flex flex-col">
-        <p>{{ secondHeader }}</p>
-        <h3>{{ secondDuration }}</h3>
-      </div>
-    </div>
-
-    <div style="max-width: 250px" class="d-flex flex-column ga-4 w-100">
-      <div v-for="(step, index) in steps" :key="index" class="step-item">
-        <div class="step-content">
-          <h3>{{ step.date }}</h3>
-          <p>{{ step.description }}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import './TimeLineEvent.css';
-import { defineProps } from 'vue';
-
-// Define props for the TimelineEvent component
-const props = defineProps({
-  /**
-   * Indicates if the event is urgent.
-   * When true, it will apply special styling for urgent events.
-   * Default is false.
-   */
-  urgent: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The first header text to display for the timeline event.
-   * Default is 'Projectdauer'.
-   * This prop is required.
-   */
-  firstHeader: {
-    type: String,
-    required: true,
-    default: 'Projectdauer',
-  },
-
-  /**
-   * The second header text to display for the timeline event.
-   * Default is 'Projectdauer'.
-   * This prop is required.
-   */
-  secondHeader: {
-    type: String,
-    required: true,
-    default: 'Projectdauer',
-  },
-
-  /**
-   * The duration text displayed under the first header.
-   * Default is '6 Tage 1 Stunde'.
-   * This prop is required.
-   */
-  firstDuration: {
-    type: String,
-    required: true,
-    default: '6 Tage 1 Stunde',
-  },
-
-  /**
-   * The duration text displayed under the second header.
-   * Default is '6 Tage 1 Stunde'.
-   * This prop is required.
-   */
-  secondDuration: {
-    type: String,
-    required: true,
-    default: '6 Tage 1 Stunde',
-  },
-
-  /**
-   * The steps array containing details about each timeline step.
-   * Each step includes a date and description.
-   * Default is an array with a single step.
-   * This prop is required.
-   */
-  steps: {
-    type: Array,
-    required: true,
-    default: () => [
-      {
-        date: '12. Sept. 2024',
-        description:
-          'Lorem ipsum dolorem exusum latisim beruma estuf kenuria lerumi',
-      },
-    ],
-  },
-});
-</script>
+<template>
+  <div class="d-flex flex-column ga-6">
+    <div class="d-flex flex-row ga-10 mx-4">
+      <div class="flex flex-col">
+        <div class="d-flex flex-row align-center ga-1">
+          <p>
+            {{ firstHeader }}
+          </p>
+          <v-icon
+            v-if="urgent"
+            color="var(--Power-Red-0)"
+            icon="heroicons:exclamation-circle"
+          ></v-icon>
+        </div>
+
+        <h3
+          :style="{
+            color: urgent ? 'var(--Power-Red-0)' : 'var(--Dental-Blue-0)',
+          }"
+        >
+          {{ firstDuration }}
+        </h3>
+      </div>
+
+      <div class="flex flex-col">
+        <p>{{ secondHeader }}</p>
+        <h3>{{ secondDuration }}</h3>
+      </div>
+    </div>
+
+    <div style="max-width: 250px" class="d-flex flex-column ga-4 w-100">
+      <div v-for="(step, index) in steps" :key="index" class="step-item">
+        <div class="step-content">
+          <h3>{{ step.date }}</h3>
+          <p>{{ step.description }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import './TimeLineEvent.css';
+import { defineProps } from 'vue';
+
+// Define props for the TimelineEvent component
+const props = defineProps({
+  /**
+   * Indicates if the event is urgent.
+   * When true, it will apply special styling for urgent events.
+   * Default is false.
+   */
+  urgent: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The first header text to display for the timeline event.
+   * Default is 'Projectdauer'.
+   * This prop is required.
+   */
+  firstHeader: {
+    type: String,
+    required: true,
+    default: 'Projectdauer',
+  },
+
+  /**
+   * The second header text to display for the timeline event.
+   * Default is 'Projectdauer'.
+   * This prop is required.
+   */
+  secondHeader: {
+    type: String,
+    required: true,
+    default: 'Projectdauer',
+  },
+
+  /**
+   * The duration text displayed under the first header.
+   * Default is '6 Tage 1 Stunde'.
+   * This prop is required.
+   */
+  firstDuration: {
+    type: String,
+    required: true,
+    default: '6 Tage 1 Stunde',
+  },
+
+  /**
+   * The duration text displayed under the second header.
+   * Default is '6 Tage 1 Stunde'.
+   * This prop is required.
+   */
+  secondDuration: {
+    type: String,
+    required: true,
+    default: '6 Tage 1 Stunde',
+  },
+
+  /**
+   * The steps array containing details about each timeline step.
+   * Each step includes a date and description.
+   * Default is an array with a single step.
+   * This prop is required.
+   */
+  steps: {
+    type: Array,
+    required: true,
+    default: () => [
+      {
+        date: '12. Sept. 2024',
+        description:
+          'Lorem ipsum dolorem exusum latisim beruma estuf kenuria lerumi',
+      },
+    ],
+  },
+});
+</script>

package/src/components/Laboratory/TimeLine/Timeline.css

@@ -1,4 +1,4 @@
-.v-timeline-divider__dot--size-small {
-  height: 0;
-  width: 200px;
-}
+.v-timeline-divider__dot--size-small {
+  height: 0;
+  width: 200px;
+}

package/src/components/Laboratory/TimeLine/Timeline.vue

@@ -1,30 +1,30 @@
-<template>
-  <v-timeline density="compact" align="start" data-testid="root">
-    <v-timeline-item v-for="(event, index) in events" :key="index" size="big">
-      <!-- Use TagLabel for the icon and bind status dynamically -->
-      <template #icon>
-        <TagLabel :status="event.status" />
-      </template>
-
-      <!-- Use a slot to allow passing content dynamically -->
-      <slot name="content" :event="event"></slot>
-    </v-timeline-item>
-  </v-timeline>
-</template>
-
-<script setup>
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-// Define props for the component
-const props = defineProps({
-  /**
-   * An array of event objects, where each event contains key-value pairs.
-   * The event object structure can vary, hence the use of a generic key-value pair type.
-   * This prop is required.
-   */
-  events: {
-    type: Array, // Array of objects with any key-value pair
-    required: true,
-  },
-});
-</script>
+<template>
+  <v-timeline density="compact" align="start" data-testid="root">
+    <v-timeline-item v-for="(event, index) in events" :key="index" size="big">
+      <!-- Use TagLabel for the icon and bind status dynamically -->
+      <template #icon>
+        <TagLabel :status="event.status" />
+      </template>
+
+      <!-- Use a slot to allow passing content dynamically -->
+      <slot name="content" :event="event"></slot>
+    </v-timeline-item>
+  </v-timeline>
+</template>
+
+<script setup>
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * An array of event objects, where each event contains key-value pairs.
+   * The event object structure can vary, hence the use of a generic key-value pair type.
+   * This prop is required.
+   */
+  events: {
+    type: Array, // Array of objects with any key-value pair
+    required: true,
+  },
+});
+</script>

package/src/components/Loader/Loader.css

@@ -1,51 +1,51 @@
-/* Loader container */
-.loader-container {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-}
-
-/* Loader content wrapper */
-.loader-content {
-    text-align: center;
-}
-
-/* Loader spinner SVG */
-.loader-svg {
-    color: #e5e7eb; /* text-gray-200 */
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .loader-svg {
-        color: #e5e7eb; /* dark:text-gray-200 */
-    }
-}
-
-/* Rotating arc animation - only applied to the spinning element */
-.loader-spinner-arc {
-    animation: spin 1s linear infinite;
-    transform-origin: center;
-}
-
-/* Spin animation */
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Ensure focus-visible styles for accessibility */
-div:focus-visible {
-    outline: 2px solid;
-    outline-offset: 2px;
-}
+/* Loader container */
+.loader-container {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
+
+/* Loader content wrapper */
+.loader-content {
+    text-align: center;
+}
+
+/* Loader spinner SVG */
+.loader-svg {
+    color: #e5e7eb; /* text-gray-200 */
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .loader-svg {
+        color: #e5e7eb; /* dark:text-gray-200 */
+    }
+}
+
+/* Rotating arc animation - only applied to the spinning element */
+.loader-spinner-arc {
+    animation: spin 1s linear infinite;
+    transform-origin: center;
+}
+
+/* Spin animation */
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Ensure focus-visible styles for accessibility */
+div:focus-visible {
+    outline: 2px solid;
+    outline-offset: 2px;
+}

package/src/components/MaintenanceBanner/MaintenanceBanner.css

@@ -0,0 +1,289 @@
+/* Cocoon variant - centered layout without illustration */
+.maintenance-banner__content--cocoon {
+  justify-content: center;
+  max-width: 930px;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__text-content {
+  align-items: flex-start;
+  text-align: left;
+  max-width: 100%;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__logo-section {
+  align-items: flex-start;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__logo-headline {
+  align-items: flex-start;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__title {
+  text-align: left;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__body-section {
+  align-items: flex-start;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__description {
+  text-align: left;
+}
+
+.maintenance-banner__content--cocoon .maintenance-banner__contact {
+  align-items: flex-start;
+}
+
+/* Background Logo */
+.maintenance-banner__bg-logo {
+  position: absolute;
+  left: -823px;
+  top: -527px;
+  width: 2067px;
+  height: 2067px;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.maintenance-banner__bg-logo svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Main Content */
+.maintenance-banner__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 92px;
+  max-width: 930px;
+  width: 100%;
+  padding: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+/* Illustration */
+.maintenance-banner__illustration {
+  flex-shrink: 0;
+  width: 304px;
+  height: 304px;
+}
+
+.maintenance-banner__illustration svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Text Content */
+.maintenance-banner__text-content {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  max-width: 455px;
+  width: 100%;
+}
+
+.maintenance-banner__logo-section {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+}
+
+.maintenance-banner__logo-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+}
+
+/* Title */
+.maintenance-banner__title {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 65px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+/* Body Section */
+.maintenance-banner__body-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+/* Description */
+.maintenance-banner__description {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.05em;
+  margin: 0;
+  white-space: pre-line;
+  overflow: visible;
+  text-overflow: unset;
+  display: block;
+}
+
+/* Contact Info */
+.maintenance-banner__contact {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.maintenance-banner__contact-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.maintenance-banner__icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.maintenance-banner__contact-text {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.05em;
+}
+
+/* CTA Button */
+.maintenance-banner__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 32px;
+  width: 309px;
+  height: 48px;
+  border-radius: 8px;
+  background: transparent;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.05em;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.maintenance-banner__button:hover {
+  color: #FFFFFF;
+}
+
+.maintenance-banner__button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.maintenance-banner__button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .maintenance-banner__content {
+    flex-direction: column;
+    gap: 48px;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem 1.5rem;
+  }
+
+  .maintenance-banner__illustration {
+    width: 200px;
+    height: 200px;
+  }
+
+  .maintenance-banner__text-content {
+    max-width: 100%;
+    align-items: center;
+    text-align: center;
+  }
+
+  .maintenance-banner__logo-section {
+    align-items: center;
+  }
+
+  .maintenance-banner__logo-headline {
+    align-items: center;
+  }
+
+  .maintenance-banner__title {
+    font-size: 40px;
+    text-align: center;
+  }
+
+  .maintenance-banner__body-section {
+    align-items: center;
+  }
+
+  .maintenance-banner__description {
+    text-align: center;
+  }
+
+  .maintenance-banner__contact {
+    align-items: center;
+  }
+
+  .maintenance-banner__button {
+    width: 100%;
+    max-width: 309px;
+  }
+
+  .maintenance-banner__bg-logo {
+    left: -1000px;
+    top: -800px;
+  }
+}
+
+@media (max-width: 480px) {
+  .maintenance-banner__title {
+    font-size: 32px;
+  }
+
+  .maintenance-banner__description,
+  .maintenance-banner__contact-text {
+    font-size: 16px;
+  }
+
+  .maintenance-banner__illustration {
+    width: 150px;
+    height: 150px;
+  }
+
+  .maintenance-banner__button {
+    font-size: 16px;
+    padding: 12px 24px;
+    height: auto;
+  }
+}
+
+/* Respect users who prefer reduced motion: disable transitions/animations */
+@media (prefers-reduced-motion: reduce) {
+  .maintenance-banner__button,
+  .maintenance-banner__button:hover,
+  .maintenance-banner__content,
+  .maintenance-banner__illustration,
+  .maintenance-banner__bg-logo,
+  .maintenance-banner__logo-headline,
+  .maintenance-banner__logo-section {
+    transition: none !important;
+    animation: none !important;
+  }
+}