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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/App.vue +2 -4
  2. package/package.json +1 -1
  3. package/src/components/Button/Button.vue +8 -4
  4. package/src/components/OtpInput/OtpInput.vue +10 -7
  5. package/src/utils/index.ts +7 -6
package/App.vue CHANGED
@@ -1,15 +1,13 @@
1
1
  <template>
2
2
  <div class="app">
3
3
  <div class="element-container">
4
- <MaintenanceBanner />
5
- <!--<ErrorPage :statusCode="404" />-->
4
+ <OtpInput phoneNumber="+49 123 4567890" :submitFn="() => alert('Submitted!')" :resendFn="() => alert('Resent!')" />
6
5
  </div>
7
6
  </div>
8
7
  </template>
9
8
 
10
9
  <script setup lang="ts">
11
- //import ErrorPage from '@/components/ErrorPage/ErrorPage.vue';
12
- import MaintenanceBanner from '@/components/MaintenanceBanner/MaintenanceBanner.vue';
10
+ import OtpInput from '@/components/OtpInput/OtpInput.vue';
13
11
  </script>
14
12
 
15
13
  <style scoped>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zap-wunschlachen/wl-shared-components",
3
- "version": "1.0.29",
3
+ "version": "1.0.30",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/Button/Button.vue CHANGED
@@ -17,8 +17,8 @@
17
17
  </v-btn>
18
18
  </template>
19
19
 
20
- <script setup>
21
- import { defineProps } from 'vue';
20
+ <script setup lang="ts">
21
+ import { siteColors } from "../../utils/index";
22
22
 
23
23
  const props = defineProps({
24
24
  /**
@@ -27,7 +27,7 @@ const props = defineProps({
27
27
  */
28
28
  color: {
29
29
  type: String,
30
- default: '#172774',
30
+ default: siteColors['btn_bg'],
31
31
  },
32
32
  /**
33
33
  * Icon to display before the button label.
@@ -113,7 +113,11 @@ const props = defineProps({
113
113
  </script>
114
114
 
115
115
  <style>
116
- .wl-button .v-btn--variant-outlined {
116
+ .wl-button.v-btn--variant-flat {
117
+ color: white !important;
118
+ }
119
+
120
+ .wl-button.v-btn--variant-outlined {
117
121
  border-width: 1.5px;
118
122
  }
119
123
  </style>
package/src/components/OtpInput/OtpInput.vue CHANGED
@@ -2,19 +2,21 @@
2
2
  <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
3
3
  :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
4
4
  <div class="title-container">
5
- <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
6
- <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
5
+ <h2 id="page-heading" ref="heading" :style="{ color: siteColors['font_color_title_code'] }">{{ t('wl.otp_input.enter_sms_code') }}</h2>
6
+ <p :style="{ color: siteColors['font_color_code'] }">{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
7
7
  </div>
8
8
 
9
9
  <div class="input-container">
10
- <v-otp-input
11
- v-model="internalValue"
10
+ <v-otp-input
11
+ v-model="internalValue"
12
12
  autofocus
13
13
  rounded="lg"
14
- :loading="loading"
15
- :error="error"
14
+ :loading="loading"
15
+ :error="error"
16
16
  :focus-all="error"
17
- :focused="error"
17
+ :focused="error"
18
+ color="white"
19
+ :base-color="siteColors['font_color_title_code']"
18
20
  @update:model-value="onResetError"
19
21
  type="number"
20
22
  />
@@ -42,6 +44,7 @@ import { ref, computed, watch, type CSSProperties, PropType } from 'vue';
42
44
  import './OtpInput.css';
43
45
  import Button from '../Button/Button.vue';
44
46
  import { useI18n } from 'vue-i18n';
47
+ import { siteColors } from "../../utils/index";
45
48
 
46
49
  const { t } = useI18n();
47
50
 
package/src/utils/index.ts CHANGED
@@ -65,14 +65,15 @@ if (currentDomain.includes("white-cocoon")) {
65
65
  }
66
66
 
67
67
  let siteColors: any = {
68
- "border-color": "border-[var(--Dental-Blue-0)]",
68
+ "border-color": "var(--Dental-Blue-0)",
69
69
  font_color: "!text-[var(--Dental-Blue-1)]",
70
70
  font_color_title: "!text-[var(--Dental-Blue-0)]",
71
- btn_bg: "bg-[var(--Dental-Blue-0)]",
71
+ btn_bg: "var(--Dental-Blue-0)",
72
72
  "border-b": "border-b-[var(--Dental-Blue-0)]",
73
73
  font_color_code: "var(--Dental-Blue-1)",
74
74
  font_color_title_code: "var(--Dental-Blue-0)",
75
- "slot-bg": "bg-[var(--Dental-Light-Blue-0)]",
75
+ "slot-bg": "var(--Dental-Light-Blue-0)",
76
+ "slot-text": "text-[#4E5257]",
76
77
  bg_0: "bg-[var(--Dental-Light-Blue--3)]",
77
78
  bg_logo_fill_color: "white",
78
79
  button_rounded: "lg",
@@ -89,9 +90,9 @@ if (domain.value === "domain-cocoon") {
89
90
  "border-b": "border-b-[var(--Night-Nude-0)]",
90
91
  bg_0: "bg-[var(--Warm-Air--4)]",
91
92
  font_family: "font-['arial']",
92
- btn_bg: "bg-[var(--Dark-Nude-0)]",
93
- "border-color": "border-[var(--Dark-Nude-0)]",
94
- "slot-bg": "bg-[#DCE7F7]",
93
+ btn_bg: "var(--Dark-Nude-2)",
94
+ "border-color": "[var(--Dark-Nude-0)",
95
+ "slot-bg": "var(--Warm-Air--4)",
95
96
  "slot-text": "text-[#4E5257]",
96
97
  "divider-color": "divide-[var(--Dark-Nude-0)]",
97
98
  bg_logo_fill_color: "var(--Warm-Air--3)",