@zap-wunschlachen/wl-shared-components 1.0.32 → 1.0.34

package/App.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <MiniLogo height="150" width="150" :domain="domain" />
-      <Logo height="150" width="300" :domain="domain" />
+      <Button
+        :color="siteColors['slot-bg']"
+        class="py-1 !font-bold custom-text-color outline-none focus-visible:outline"
+        :text-color="siteColors['slot-text']"
+      >
+        <template #default>
+          <p class="text-wrap">Long text button to showcase wrapping behavior in the button component</p>
+        </template>
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Logo from '@/components/Icons/Logo.vue';
-import MiniLogo from '@/components/Icons/MiniLogo.vue';
-import { ref } from 'vue';
-const domain = ref('domain-dental');
+import Button from '@/components/Button/Button.vue';
+import { siteColors } from "@/utils/index";
 </script>
 
 <style scoped>

package/package.json

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

package/src/assets/css/base.css

@@ -73,7 +73,6 @@
 body {
   background: rgba(151, 169, 192, 0.151);
   font-family: Outfit;
-  color: var(--Dental-Blue-0);
 }
 
 /* Base Heading Styles */
@@ -86,7 +85,6 @@ h6 {
   font-style: normal;
   font-weight: 600;
   line-height: 120%;
-  color: var(--Dental-Blue-0);
 }
 
 h1 {
@@ -130,7 +128,6 @@ p,
   font-style: normal;
   font-weight: 300;
   line-height: 120%;
-  color: var(--Dental-Blue-0);
 }
 
 .p-medium {

package/src/assets/css/variables.css

@@ -99,6 +99,7 @@
   --Treatment-Yellow: #fefdbd;
 
   /*White Cocoon*/
+  --Light-Nude-0: #FFF7EC;
   --Light-Nude-3: #fffcf8;
   --Dark-Nude-0: #c4aea1;
   --Night-Nude-0: #a1978f;

package/src/components/Button/Button.vue

@@ -11,13 +11,15 @@
     :variant="variant"
     :size="size"
     :readonly="readonly"
+    :style="buttonStyle"
     data-testid="root"
   >
-    {{ label }}
+    <slot>{{ label }}</slot>
   </v-btn>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { siteColors } from "../../utils/index";
 
 const props = defineProps({
@@ -29,6 +31,14 @@ const props = defineProps({
     type: String,
     default: siteColors['btn_bg'],
   },
+  /**
+   * The text color of the button (for flat variant).
+   * Default is 'white'.
+   */
+  textColor: {
+    type: String,
+    default: 'white',
+  },
   /**
    * Icon to display before the button label.
    * Accepts the name of an icon (String).
@@ -110,13 +120,16 @@ const props = defineProps({
     default: false,
   },
 });
+
+const buttonStyle = computed(() => {
+  if (props.variant === 'flat') {
+    return { color: props.textColor };
+  }
+  return {};
+});
 </script>
 
 <style>
-.wl-button.v-btn--variant-flat {
-  color: white !important;
-}
-
 .wl-button.v-btn--variant-outlined {
   border-width: 1.5px;
 }

package/src/components/Icons/Logo.vue

@@ -96,7 +96,7 @@ import { siteColors } from "../../utils/index";
 import { computed } from "vue";
 
 const currentDomain = computed(() => {
-    return props.domain ?? siteColors['domain'] ?? "domain-dental";
+    return props.domain || siteColors['domain'] || "domain-dental";
 });
 
 // You can pass props if you need to customize it
@@ -111,7 +111,7 @@ const props = defineProps({
     },
     domain: {
         type: String,
-        default: "domain-dental",
+        default: "",
     },
 });
 </script>

package/src/components/Icons/MiniLogo.vue

@@ -16,7 +16,7 @@ import { siteColors } from "../../utils/index";
 import { computed } from "vue";
 
 const currentDomain = computed(() => {
-    return props.domain ?? siteColors['domain'] ?? "domain-dental";
+    return props.domain || siteColors['domain'] || "domain-dental";
 });
 
 const props = defineProps({
@@ -30,7 +30,7 @@ const props = defineProps({
     },
     domain: {
         type: String,
-        default: "domain-dental",
+        default: "",
     },
 });
 </script>

package/src/plugins/vuetify.ts

@@ -87,6 +87,7 @@ const lightTheme: ThemeDefinition = {
     'Check--1': '#d8fde4',
     Trkis: '#bae6ea',
     /*White Cocoon*/
+    'Light-Nude-0': '#FFF7EC',
     'Light-Nude-3': '#fffcf8',
     'Dark-Nude-0': '#c4aea1',
     'Night-Nude-0': '#a1978f',

package/src/utils/index.ts

@@ -58,11 +58,11 @@ const generateDynamicDomain = () => {
 const domain: any = ref(null);
 const currentDomain = generateDynamicDomain().toLowerCase();
 
-if (currentDomain.includes("white-cocoon")) {
+//if (currentDomain.includes("white-cocoon")) {
   domain.value = "domain-cocoon";
-} else {
-  domain.value = "domain-dental";
-}
+//} else {
+//  domain.value = "domain-dental";
+//}
 
 let siteColors: any = {
   "border-color": "var(--Dental-Blue-0)",
@@ -73,7 +73,7 @@ let siteColors: any = {
   font_color_code: "var(--Dental-Blue-1)",
   font_color_title_code: "var(--Dental-Blue-0)",
   "slot-bg": "var(--Dental-Light-Blue-0)",
-  "slot-text": "text-[#4E5257]",
+  "slot-text": "var(--Dental-Blue-0)",
   bg_0: "bg-[var(--Dental-Light-Blue--3)]",
   bg_logo_fill_color: "white",
   button_rounded: "lg",
@@ -93,8 +93,8 @@ if (domain.value === "domain-cocoon") {
     font_family: "font-['arial']",
     btn_bg: "var(--Dark-Nude-2)",
     "border-color": "[var(--Dark-Nude-0)",
-    "slot-bg": "var(--Warm-Air--4)",
-    "slot-text": "text-[#4E5257]",
+    "slot-bg": "var(--Light-Nude-0)",
+    "slot-text": "var(--Dark-Nude-3)",
     "divider-color": "divide-[var(--Dark-Nude-0)]",
     bg_logo_fill_color: "var(--Warm-Air--3)",
     bg_card_title: "bg-[var(--Dark-Nude--3)]",