@zap-wunschlachen/wl-shared-components 1.0.37 → 1.0.39

package/App.vue

@@ -1,24 +1,14 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <!-- <OtpInput
-        length="6"
-        :boxStyle="{ backgroundColor: siteColors['slot-bg'], color: siteColors['slot-text'] }"
-        phone-number="+49123445"
-        :loading="true"
-        :submit-fn="() => {}"
-        :resend-fn="() => {}"
-      /> -->
-
-      <Audio src="public/audio/test.aac" :cloudStatus="false" :showDeleteButton="false"/>
+      <StagingBanner show/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import OtpInput from "@/components/OtpInput/OtpInput.vue";
+import StagingBanner from "@/components/StagingBanner/StagingBanner.vue";
 import { siteColors } from "@/utils/index";
-import Audio from "@/components/Audio/Audio.vue";
 </script>
 
 <style scoped>

package/package.json

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

package/src/assets/css/base.css

@@ -85,6 +85,7 @@ h6 {
   font-style: normal;
   font-weight: 600;
   line-height: 120%;
+  color: var(--primary-color);
 }
 
 h1 {
@@ -128,6 +129,7 @@ p,
   font-style: normal;
   font-weight: 300;
   line-height: 120%;
+  color: var(--primary-color);
 }
 
 .p-medium {

package/src/assets/css/variables.css

@@ -106,4 +106,7 @@
   --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/StagingBanner/StagingBanner.css

@@ -0,0 +1,19 @@
+.staging-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #ff6b35;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  z-index: 99999;
+  font-weight: bold;
+  font-size: 14px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.staging-banner--hidden {
+  display: none;
+}

package/src/components/StagingBanner/StagingBanner.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="isVisible" class="staging-banner">
+    {{ displayText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import './StagingBanner.css';
+
+const props = defineProps({
+  /**
+   * Custom text to display in the banner.
+   * Default: "⚠️ STAGING - Testumgebung (keine echten Daten)"
+   */
+  text: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Force the banner to show regardless of hostname.
+   * Useful for testing or manual control.
+   */
+  show: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * Whether to auto-detect staging based on hostname.
+   * Looks for "staging." or "staging-" in the hostname.
+   * Default: true
+   */
+  autoDetect: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Whether to add padding to the body to account for the banner.
+   * Default: true
+   */
+  addBodyPadding: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Custom padding value for the body (in pixels).
+   * Default: 40
+   */
+  bodyPaddingPx: {
+    type: Number,
+    default: 40
+  }
+});
+
+const isStaging = ref(false);
+
+const displayText = computed(() => {
+  return props.text || '⚠️ STAGING - Testumgebung (keine echten Daten)';
+});
+
+const isVisible = computed(() => {
+  // If show prop is explicitly set, use that
+  if (props.show !== undefined) {
+    return props.show;
+  }
+  // Otherwise use auto-detection result
+  return props.autoDetect && isStaging.value;
+});
+
+onMounted(() => {
+  // Check if running in browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    isStaging.value = hostname.includes('staging.') || hostname.includes('staging-');
+
+    // Add body padding if visible and option is enabled
+    if (isVisible.value && props.addBodyPadding) {
+      document.body.style.paddingTop = `${props.bodyPaddingPx}px`;
+    }
+  }
+});
+</script>

package/src/components/index.ts

@@ -24,5 +24,6 @@ export { default as Loader } from './Loader/Loader.vue';
 export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
 export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
+export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
 export { default as Logo } from './Icons/Logo.vue';
 export { default as MiniLogo } from './Icons/MiniLogo.vue';

package/src/utils/index.ts

@@ -65,6 +65,7 @@ if (currentDomain.includes("white-cocoon")) {
 }
 
 let siteColors: any = {
+  "primary-color": "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)]",
@@ -84,6 +85,7 @@ let siteColors: any = {
 
 if (domain.value === "domain-cocoon") {
   siteColors = {
+    "primary-color": "var(--Dark-Nude-2)",
     font_color: "!text-[var(--Dark-Nude-3)]",
     font_color_title: "!text-[var(--Dark-Nude-2)]",
     font_color_code: "var(--Dark-Nude-3)",
@@ -103,6 +105,11 @@ if (domain.value === "domain-cocoon") {
   };
 }
 
+// Set CSS variable on document root so base.css can use it
+if (typeof document !== 'undefined') {
+  document.documentElement.style.setProperty('--primary-color', siteColors["primary-color"]);
+}
+
 export {
   siteColors,
   getDomainName,