hr-design-system-handlebars 1.63.13 → 1.63.15

package/.github/workflows/chromatic.yml

@@ -21,7 +21,7 @@ jobs:
               run: yarn
             - name: create partials
               run: yarn partialsToJs
-            - uses: chromaui/action@v1
+            - uses: chromaui/action@latest
               with:
                   # 👇 Chromatic projectToken, refer to the manage page to obtain it.
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.63.15 (Tue Apr 16 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2669 Dark mode for Content-Navi [#908](https://github.com/mumprod/hr-design-system-handlebars/pull/908) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
+# v1.63.14 (Fri Apr 12 2024)
+
+#### 🐛 Bug Fix
+
+- makes the top position dependent on navi height on desktop [#907](https://github.com/mumprod/hr-design-system-handlebars/pull/907) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.63.13 (Fri Apr 12 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -718,6 +718,13 @@ video {
   font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   list-style-type: none;
   border-color: var(--color-button--dark);
+}
+[class~='tw-dark'] .content-nav-item {
+  border-color: #759ace;
+  border-color: var(--color-navigation-border-color-dark);
+  --tw-border-opacity: 0.75;
+}
+.content-nav-item {
   fill: #005293;
   fill: var(--color-content-nav);
   color: #005293;
@@ -3282,6 +3289,11 @@ article.indexTextDS .indexTextHighlighted .link {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[top\] {
+  transition-property: top;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3336,7 +3348,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1712930751208;
+  counter-reset: cnt1713263195329;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3715,7 +3727,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1712930751208 1;
+  counter-increment: cnt1713263195329 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3731,7 +3743,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1712930751208);
+  content: counter(cnt1713263195329);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -3874,6 +3886,9 @@ article.indexTextDS .indexTextHighlighted .link {
     --color-search-footer-text:  #000000;
     --search-icon-color: #000000;
 
+    /* Content navi button border color for dark mode */
+    --color-navigation-border-color-dark: #759ace;
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;
@@ -7364,8 +7379,8 @@ article.indexTextDS .indexTextHighlighted .link {
     top: 0px;
   }
 
-  .socialShareDesktop\:top-32 {
-    top: 8rem;
+  .socialShareDesktop\:top-\[78px\] {
+    top: 78px;
   }
 }
 .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {

package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -1,5 +1,5 @@
 {{#each this.navigationItems}}
-    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color" >
+    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color">
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 

package/dist/views/components/social_sharing/social_sharing_compact.hbs

@@ -32,10 +32,15 @@
         },
         checkIfDesktop() {
             this.isDesktop = (window.innerWidth >= 1040) ? true : false 
+        },
+        checkNaviHeight() {
+            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
+            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
     }"
     x-init = "checkIfDesktop()"
     x-on:resize.window = "checkIfDesktop()"
+    x-on:scroll.window.debounce = "checkNaviHeight()"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
 
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
+            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
                 <button 
                     class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
                     x-show="!isDesktop"

package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs

@@ -1,5 +1,5 @@
 {{#each this.navigationItems}}
-    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color" >
+    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color">
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -32,10 +32,15 @@
         },
         checkIfDesktop() {
             this.isDesktop = (window.innerWidth >= 1040) ? true : false 
+        },
+        checkNaviHeight() {
+            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
+            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
     }"
     x-init = "checkIfDesktop()"
     x-on:resize.window = "checkIfDesktop()"
+    x-on:scroll.window.debounce = "checkNaviHeight()"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
 
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
+            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
                 <button 
                     class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
                     x-show="!isDesktop"

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.63.13",
+    "version": "1.63.15",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-components.css

@@ -170,7 +170,8 @@
         @apply text-base;
         @apply font-copy;
         @apply list-none;
-        @apply border-button--dark;
+        @apply border-button--dark dark:border-navigation-border-color-dark;
+        @apply dark:border-opacity-75;
         @apply fill-content-nav;
         @apply text-content-nav;
         @apply bg-white;

package/src/assets/tailwind.css

@@ -45,6 +45,9 @@
     --color-search-footer-text:  theme('colors.black.DEFAULT');
     --search-icon-color: theme('colors.black.DEFAULT');
 
+    /* Content navi button border color for dark mode */
+    --color-navigation-border-color-dark: theme('colors.blue.danube');
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;

package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -1,5 +1,5 @@
 {{#each this.navigationItems}}
-    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color" >
+    <li class="sb-service-navigation-item -{{this.id}} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-navigation-icons border-navigation-border-color">
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 

package/src/stories/views/components/social_sharing/social_sharing_compact.hbs

@@ -32,10 +32,15 @@
         },
         checkIfDesktop() {
             this.isDesktop = (window.innerWidth >= 1040) ? true : false 
+        },
+        checkNaviHeight() {
+            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
+            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
     }"
     x-init = "checkIfDesktop()"
     x-on:resize.window = "checkIfDesktop()"
+    x-on:scroll.window.debounce = "checkNaviHeight()"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
 
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
+            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
                 <button 
                     class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
                     x-show="!isDesktop"

package/tailwind.config.js

@@ -270,6 +270,7 @@ module.exports = {
                     linkWater: '#d3e2f4',
                     blueLuxury: '#007396',
                     nightRider:'#2d2d2d',
+                    danube:  '#759ace',
                 },
                 'black': {
                     DEFAULT: '#000000',
@@ -362,6 +363,7 @@ module.exports = {
                 'brandnav-pseudo': 'var(--color-brandnav-pseudo)',
                 'brandnavigation-bg': 'var(--color-brandnavigation-bg)',
                 'navigation-border-color': 'var(--color-navigation-border-color)',
+                'navigation-border-color-dark': 'var(--color-navigation-border-color-dark)',
                 'servicenavigation-border-color': 'var(--color-servicenavigation-border-color)',
                 'footer-bg': 'var(--color-footer-bg)',
                 'footer-text': 'var(--color-footer-text)',