hr-design-system-handlebars 1.59.13 → 1.59.15

package/src/stories/views/components/page/index/page_offline.stories.js

@@ -0,0 +1,32 @@
+import page from './page_offline.hbs'
+
+const Template = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau' 
+    return page({ brand, ...args })
+}
+
+export default {
+    title: 'Seiten/Offline',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'Offline Page',
+    args: {},
+}

package/src/stories/views/components/site_header/offline_header.hbs

@@ -0,0 +1,33 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
+    <header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : ''  "
+            class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+
+            <div id="serviceNavWrapper" 
+                :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+                
+                class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
+
+                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+
+                    <div id="serviceLogoWrapper"  
+                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+                        {{> components/site_header/service_logo _useSticky=_useSticky}}
+                    </div>
+                    
+                </div>
+            </div>            
+        </div> 
+    </header>
+    <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
+        <img loading="lazy" 
+            alt="{{loca "header_homepage_link_title"}}" 
+            src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" 
+            />
+    </div>
+</div>

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>