hr-design-system-handlebars 1.52.15 → 1.52.17

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.52.17 (Fri Jan 26 2024)
+
+#### 🐛 Bug Fix
+
+- Scrollpfeil bei hauptnavi sichtbar obwohl nicht nötig [#817](https://github.com/mumprod/hr-design-system-handlebars/pull/817) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.52.16 (Fri Jan 26 2024)
+
+#### 🐛 Bug Fix
+
+- Adjust image spacing in copytext [#819](https://github.com/mumprod/hr-design-system-handlebars/pull/819) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.52.15 (Fri Jan 26 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1665,9 +1665,6 @@ a.link {
 .w-9 {
   width: 2.25rem;
 }
-.w-\[1600px\] {
-  width: 1600px;
-}
 .w-\[19px\] {
   width: 19px;
 }
@@ -3261,7 +3258,7 @@ a.link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1706266888562;
+  counter-reset: cnt1706277173374;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3563,7 +3560,7 @@ a.link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706266888562 1;
+  counter-increment: cnt1706277173374 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3579,7 +3576,7 @@ a.link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1706266888562);
+  content: counter(cnt1706277173374);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5414,6 +5411,11 @@ a.link {
     margin-bottom: 1.25rem;
   }
 
+  .sm480\:my-7 {
+    margin-top: 1.75rem;
+    margin-bottom: 1.75rem;
+  }
+
   .sm480\:mb-7 {
     margin-bottom: 1.75rem;
   }
@@ -5422,8 +5424,8 @@ a.link {
     margin-left: 2rem;
   }
 
-  .sm480\:mr-4 {
-    margin-right: 1rem;
+  .sm480\:mr-5 {
+    margin-right: 1.25rem;
   }
 
   .sm480\:mt-4 {

package/dist/assets/js/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js

@@ -25,6 +25,24 @@ export default function slider() {
         checkIfScrollable(e){     
             e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;  
             this.arrowsDisplay(e);
+        },
+        throttle(f, delay) {
+            let timer = 0;
+            return function(...args) {
+                clearTimeout(timer);
+                timer = setTimeout(() => f.apply(this, args), delay);
+            }
+        },
+        initialize(e) {
+            this.checkIfScrollable(e);
+
+            const resizeObserver = new ResizeObserver(this.throttle((entries) => {
+                entries.forEach(entry => {
+                    this.checkIfScrollable(e);
+                });
+            }, 100));
+            
+            resizeObserver.observe(e);
         }
     };
 }

package/dist/views/components/content/copytext/components/image/figure.hbs

@@ -1,4 +1,4 @@
-<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+<figure class="relative my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
     {{#if _noAr }}
         {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
     {{else}}

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -7,7 +7,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -22,7 +22,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -1,9 +1,18 @@
 <div class="w-full h-auto mb-10">
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
     </div> 
 
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>

package/dist/views_static/components/content/copytext/components/image/figure.hbs

@@ -1,4 +1,4 @@
-<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+<figure class="relative my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
     {{#if _noAr }}
         {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
     {{else}}

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -7,7 +7,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -22,7 +22,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -1,9 +1,18 @@
 <div class="w-full h-auto mb-10">
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
     </div> 
 
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>

package/package.json

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

package/src/stories/views/components/content/copytext/components/image/figure.hbs

@@ -1,4 +1,4 @@
-<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+<figure class="relative my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
     {{#if _noAr }}
         {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
     {{else}}

package/src/stories/views/components/content/copytext/components/image/image.hbs

@@ -7,7 +7,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -22,7 +22,7 @@
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js

@@ -25,6 +25,24 @@ export default function slider() {
         checkIfScrollable(e){     
             e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;  
             this.arrowsDisplay(e);
+        },
+        throttle(f, delay) {
+            let timer = 0;
+            return function(...args) {
+                clearTimeout(timer);
+                timer = setTimeout(() => f.apply(this, args), delay);
+            }
+        },
+        initialize(e) {
+            this.checkIfScrollable(e);
+
+            const resizeObserver = new ResizeObserver(this.throttle((entries) => {
+                entries.forEach(entry => {
+                    this.checkIfScrollable(e);
+                });
+            }, 100));
+            
+            resizeObserver.observe(e);
         }
     };
 }

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -1,6 +1,5 @@
 <div x-data="slider()"
-    x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
-    @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
+    x-init="initialize($refs.scrollContainer_{{getRandom}})"
     class="relative w-full"
     ax-load 
     x-ignore

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -1,9 +1,18 @@
 <div class="w-full h-auto mb-10">
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
-    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
     </div> 
 
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
+    </div> 
+
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>