@zap-wunschlachen/wl-shared-components 1.0.28 → 1.0.30

package/App.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <MaintenanceBanner />
-      <!--<ErrorPage :statusCode="404" />-->
+      <OtpInput phoneNumber="+49 123 4567890" :submitFn="() => alert('Submitted!')" :resendFn="() => alert('Resent!')" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-//import ErrorPage from '@/components/ErrorPage/ErrorPage.vue';
-import MaintenanceBanner from '@/components/MaintenanceBanner/MaintenanceBanner.vue';
+import OtpInput from '@/components/OtpInput/OtpInput.vue';
 </script>
 
 <style scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Background/Background.css

@@ -36,4 +36,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+/* Mobile landscape mode - enable scrolling */
+@media (max-height: 500px) and (orientation: landscape) {
+    .background {
+        overflow: auto;
+        align-items: flex-start;
+    }
+
+    .background__content {
+        height: auto;
+        min-height: 100%;
+        padding: 1rem;
+        box-sizing: border-box;
+    }
 }

package/src/components/Button/Button.vue

@@ -17,8 +17,8 @@
   </v-btn>
 </template>
 
-<script setup>
-import { defineProps } from 'vue';
+<script setup lang="ts">
+import { siteColors } from "../../utils/index";
 
 const props = defineProps({
   /**
@@ -27,7 +27,7 @@ const props = defineProps({
    */
   color: {
     type: String,
-    default: '#172774',
+    default: siteColors['btn_bg'],
   },
   /**
    * Icon to display before the button label.
@@ -113,7 +113,11 @@ const props = defineProps({
 </script>
 
 <style>
-.wl-button .v-btn--variant-outlined {
+.wl-button.v-btn--variant-flat {
+  color: white !important;
+}
+
+.wl-button.v-btn--variant-outlined {
   border-width: 1.5px;
 }
 </style>

package/src/components/ErrorPage/ErrorPage.css

@@ -2,7 +2,6 @@
   min-height: 100vh;
   display: flex;
   justify-content: center;
-  background-image: url('../Background/wunschlachen-background.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: auto;
@@ -122,3 +121,52 @@
     height: 340px;
   }
 }
+
+/* Small mobile screens with limited height (e.g. iPhone SE) */
+@media (max-width: 480px) and (max-height: 700px) {
+  .error-page__grid {
+    gap: 1rem;
+  }
+
+  .error-page__content {
+    padding: 1rem;
+  }
+
+  .error-page__header {
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .error-page__icon {
+    width: 80px;
+    height: 109px;
+  }
+
+  .error-page__description {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) and (max-height: 600px) {
+  .error-page__icon {
+    display: none;
+  }
+
+  .error-page__grid {
+    gap: 0.5rem;
+  }
+
+  .error-page__content {
+    padding: 0.5rem;
+  }
+
+  .error-page__header {
+    margin-bottom: 0.5rem;
+  }
+
+  .error-page__description {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}

package/src/components/MaintenanceBanner/MaintenanceBanner.css

@@ -274,6 +274,70 @@
   }
 }
 
+/* Small mobile screens with limited height (e.g. iPhone SE) */
+@media (max-width: 480px) and (max-height: 700px) {
+  .maintenance-banner__content {
+    gap: 24px;
+    padding: 1rem;
+  }
+
+  .maintenance-banner__text-content {
+    gap: 24px;
+  }
+
+  .maintenance-banner__logo-section {
+    gap: 16px;
+  }
+
+  .maintenance-banner__logo-headline {
+    gap: 16px;
+  }
+
+  .maintenance-banner__body-section {
+    gap: 12px;
+  }
+
+  .maintenance-banner__illustration {
+    width: 100px;
+    height: 100px;
+  }
+
+  .maintenance-banner__title {
+    font-size: 24px;
+  }
+
+  .maintenance-banner__description,
+  .maintenance-banner__contact-text {
+    font-size: 14px;
+  }
+
+  .maintenance-banner__button {
+    font-size: 14px;
+    padding: 10px 20px;
+    height: auto;
+    width: auto;
+  }
+}
+
+@media (max-width: 480px) and (max-height: 600px) {
+  .maintenance-banner__illustration {
+    display: none;
+  }
+
+  .maintenance-banner__title {
+    font-size: 22px;
+  }
+
+  .maintenance-banner__content {
+    gap: 16px;
+    padding: 0.5rem;
+  }
+
+  .maintenance-banner__text-content {
+    gap: 16px;
+  }
+}
+
 /* Respect users who prefer reduced motion: disable transitions/animations */
 @media (prefers-reduced-motion: reduce) {
   .maintenance-banner__button,

package/src/components/OtpInput/OtpInput.vue

@@ -2,19 +2,21 @@
   <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
     :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
     <div class="title-container">
-      <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
-      <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
+      <h2 id="page-heading" ref="heading" :style="{ color: siteColors['font_color_title_code'] }">{{ t('wl.otp_input.enter_sms_code') }}</h2>
+      <p :style="{ color: siteColors['font_color_code'] }">{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
     </div>
 
     <div class="input-container">
-      <v-otp-input 
-        v-model="internalValue" 
+      <v-otp-input
+        v-model="internalValue"
         autofocus
         rounded="lg"
-        :loading="loading" 
-        :error="error" 
+        :loading="loading"
+        :error="error"
         :focus-all="error"
-        :focused="error" 
+        :focused="error"
+        color="white"
+        :base-color="siteColors['font_color_title_code']"
         @update:model-value="onResetError"
         type="number"
       />
@@ -42,6 +44,7 @@ import { ref, computed, watch, type CSSProperties, PropType } from 'vue';
 import './OtpInput.css';
 import Button from '../Button/Button.vue';
 import { useI18n } from 'vue-i18n';
+import { siteColors } from "../../utils/index";
 
 const { t } = useI18n();
 

package/src/utils/index.ts

@@ -65,14 +65,15 @@ if (currentDomain.includes("white-cocoon")) {
 }
 
 let siteColors: any = {
-  "border-color": "border-[var(--Dental-Blue-0)]",
+  "border-color": "var(--Dental-Blue-0)",
   font_color: "!text-[var(--Dental-Blue-1)]",
   font_color_title: "!text-[var(--Dental-Blue-0)]",
-  btn_bg: "bg-[var(--Dental-Blue-0)]",
+  btn_bg: "var(--Dental-Blue-0)",
   "border-b": "border-b-[var(--Dental-Blue-0)]",
   font_color_code: "var(--Dental-Blue-1)",
   font_color_title_code: "var(--Dental-Blue-0)",
-  "slot-bg": "bg-[var(--Dental-Light-Blue-0)]",
+  "slot-bg": "var(--Dental-Light-Blue-0)",
+  "slot-text": "text-[#4E5257]",
   bg_0: "bg-[var(--Dental-Light-Blue--3)]",
   bg_logo_fill_color: "white",
   button_rounded: "lg",
@@ -89,9 +90,9 @@ if (domain.value === "domain-cocoon") {
     "border-b": "border-b-[var(--Night-Nude-0)]",
     bg_0: "bg-[var(--Warm-Air--4)]",
     font_family: "font-['arial']",
-    btn_bg: "bg-[var(--Dark-Nude-0)]",
-    "border-color": "border-[var(--Dark-Nude-0)]",
-    "slot-bg": "bg-[#DCE7F7]",
+    btn_bg: "var(--Dark-Nude-2)",
+    "border-color": "[var(--Dark-Nude-0)",
+    "slot-bg": "var(--Warm-Air--4)",
     "slot-text": "text-[#4E5257]",
     "divider-color": "divide-[var(--Dark-Nude-0)]",
     bg_logo_fill_color: "var(--Warm-Air--3)",