hr-design-system-handlebars 1.59.14 → 1.59.16

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

@@ -1,6 +1,7 @@
 <div x-data="{
         open: false,
         sharingIsVisible: true,
+        isDesktop: true,
         toggle() {
             var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
             var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
@@ -28,8 +29,13 @@
             this.open = false
 
             focusAfter && focusAfter.focus()
+        },
+        checkIfDesktop() {
+            this.isDesktop = (window.innerWidth >= 768) ? true : false 
         }
     }"
+    x-init = "checkIfDesktop()"
+    x-on:resize.window = "checkIfDesktop()"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -37,13 +43,17 @@
     x-intersect:leave="sharingIsVisible = false"
     x-intersect:enter="sharingIsVisible = true"
 >
-    <div x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
+    <div class="fixed left-1 top-1">
+        sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
+        open:<span x-text="open" ></span><br>
+        isDesktop:<span x-text="isDesktop" ></span>
+    </div>
     <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
         <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bottom-5 -left-8 flex-col absolute bg-white': !sharingIsVisible }">
                 <button 
                     class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
-                    :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+                    x-show="!isDesktop"
                     x-ref="button"
                     x-on:click="toggle()"
                     :aria-expanded="open"
@@ -55,11 +65,10 @@
                 <!-- Panel -->
                 <div
                     x-ref="panel"
-                    x-show="open"
+                    x-show="open || isDesktop"
                     x-transition.origin.right
                     x-on:click.outside="close($refs.button)"
                     :id="$id('dropdown-button')"
-                    style="display: none;"
                     class="bg-white"
                 >
                     <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">

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

@@ -1,6 +1,6 @@
 <li>
     <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        
         href="{{this}}"
         target="_blank"
         rel="noopener noreferrer"
@@ -9,12 +9,12 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#0f1419] " _icon="x-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
     <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        
         href="{{this}}"
         target="_blank"
         rel="noopener noreferrer"
@@ -23,12 +23,12 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#3b5999] " _icon="facebook-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
     <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        
         href="{{this}}"
         target="_blank"
         rel="noopener noreferrer"
@@ -37,30 +37,30 @@
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-[#4dc247] " _icon="whatsapp-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
     <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../../this.content.trackingData}}
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-black " _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
 <li class="">
     <a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        
         href="javascript:window.print()"
         title="{{loca "share_print_linktitle" }}"
         {{#with ../this.content.trackingData}}
             data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
         {{/with}}
     >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
+        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:fill-link-dark " _icon="copy-ds" _iconmap="icons" ~}}
     </a>
 </li>

package/src/stories/views/components/teaser/teaser_indextext.hbs

@@ -1,5 +1,5 @@
 <article
-    class='indexText rounded-tl-hr rounded-br-hr mx-5 sm:mx-0 p-8 md:p-10 relative col-span-12 flex flex-col gap-x-4
+    class='indexTextDS rounded-tl-hr rounded-br-hr mx-5 sm:mx-0 p-8 md:p-10 relative col-span-12 flex flex-col gap-x-4
         {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}
         {{~inline-switch
             this.teaserType
@@ -16,10 +16,10 @@
             {{this.title}}
         </h3>
     {{/if}}
-    <p
+    <div
         class='{{#if this.title}}mt-6 {{/if}}text-sm md:text-base font-copy
-            {{~inline-switch this.teaserType '["highlighted"]' '[" text-white",""]'}}'
+            {{~inline-switch this.teaserType '["highlighted"]' '[" text-white indexTextHighlighted",""]'}}'
     >
         {{{this.shorttext}}}
-    </p>
+    </div>
 </article>