hr-design-system-handlebars 1.21.1 → 1.23.0

package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -3,9 +3,10 @@
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
         :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'" 
-        class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-primary lg:rounded-t">   
+        class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-primary lg:rounded-t">  
+        
         {{#if this.isCluster ~}}
-{{!-- Gilt z.B. für REGIONEN:  --}}        
+            {{!-- Gilt z.B. für REGIONEN:  --}}        
             <button id="button-{{nextRandom}}-1" 
                 @click.debounce.100ms="toggle(); correctFlyoutPos()" 
                 @resize.window="dropped=false; correctFlyoutPos()"
@@ -19,36 +20,57 @@
         {{~else ~}}
 
             {{#if this.subNavigation}}
-{{!-- Gilt z.B. für POLITIK:  --}}
-                <a href="{{resourceUrl this.url}}" 
-                    id="flyout-{{nextRandom}}-1"
-                    
-                    :class="dropped ? 'font-bold' : ''"
-                    class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
-                    {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
-                    aria-haspopup="true" 
-                    x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
-                    aria-owns="flyout-{{getRandom}}"
-                    aria-controls="flyout-{{getRandom}}"
-                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'>           
-            {{~else ~}} 
-{{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
+
+                {{#if this.subNavigation.showAsFlyout}}
+                    {{!-- Gilt z.B. für "SHOWS" bei HR3 --}} 
+                    <button id="button-{{getRandom}}-1" 
+                        @click.debounce.100ms="toggle(); correctFlyoutPos()"
+                        @resize.window="dropped=false; correctFlyoutPos()" 
+                        :class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
+                        class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4" 
+                        aria-haspopup="true"  
+                        x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen ? '0' : '-1')"
+                        aria-owns="flyout-{{getRandom}}" 
+                        aria-controls="flyout-{{getRandom}}" 
+                        aria-labelledby="flyout-{{getRandom}}-1" 
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'
+                    >                
+                {{else}}
+                    {{!-- Gilt z.B. für POLITIK:  --}}
+                    <a href="{{resourceUrl this.url}}" 
+                        id="flyout-{{nextRandom}}-1" 
+                        
+                        :class="dropped ? 'font-bold' : ''"
+                        class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
+                        {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
+                        aria-haspopup="true" 
+                        x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
+                        aria-owns="flyout-{{getRandom}}"
+                        aria-controls="flyout-{{getRandom}}"
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
+                    >            
+                {{/if}}   
+
+            {{~else ~}}
+
+                {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
                 <a href="{{resourceUrl this.url}}" 
                     class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset-white js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
                     {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
                     x-effect="$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 >
+
             {{~/if}}
 
         {{~/if }}
 
+
         {{#if this.subNavigation}}
 
             {{~this.text~}}
             
             {{#if this.subNavigation.showAsFlyout ~}}
-                
                     <div class="flex items-center justify-center w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1">
                         <div class="flex items-center justify-center" :class="dropped ? 'transform rotate-180':''">
                             {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
@@ -64,39 +86,46 @@
             {{~/if~}} 
         {{~/if}}
 
+
         {{#if this.isCluster}}
 
             </button>
 
+        {{else if this.subNavigation.showAsFlyout}}
+
+            </button>
+
         {{else}}
 
             </a>
 
             {{#if this.subNavigation}}
-
-                <button 
-                    @click.debounce.100ms="toggle()" 
-                    id="button-{{getRandom}}-1" 
-                    class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" 
-                    aria-haspopup="true"  
-                    x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen ? '0' : '-1')"
-                    aria-owns="flyout-{{getRandom}}" 
-                    aria-controls="flyout-{{getRandom}}" 
-                    aria-labelledby="flyout-{{getRandom}}-1" 
-                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
-
-                    <span class="hidden">{{~this.text~}}</span>
-                    
-                    <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? 'transform rotate-180 ':''">
-                        {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}
-                    </div>
-                </button>
-
+                {{#unless this.subNavigation.showAsFlyout}}
+                    <button 
+                        @click.debounce.100ms="toggle()" 
+                        id="button-{{getRandom}}-1" 
+                        class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" 
+                        aria-haspopup="true"  
+                        x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen ? '0' : '-1')"
+                        aria-owns="flyout-{{getRandom}}" 
+                        aria-controls="flyout-{{getRandom}}" 
+                        aria-labelledby="flyout-{{getRandom}}-1" 
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
+
+                        <span class="hidden">{{~this.text~}}</span>
+                        
+                        <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? 'transform rotate-180 ':''">
+                            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}
+                        </div>
+                    </button>
+                {{/unless}}
             {{/if}}
 
         {{/if}}
-        
-        {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
-
+        {{#if this.isCluster}}
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
+        {{else}}
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="SubNavInRubrikNav" _parent=this.text }}
+        {{/if}}
     </li>
 {{/each}}

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 {{inline-switch this.id '["weather","warnung","traffic","video-podcast"]' '["-weather", "-warnung", "-traffic", "-video-podcast"]' }} 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-white" >
+    <li class="sb-service-navigation-item {{inline-switch this.id '["news","weather","warnung","traffic","video-podcast"]' '["-news", "-weather", "-warnung", "-traffic", "-video-podcast"]' }} 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-white" >
         {{#if this.subNavigation}} 
             <button 
                 id="{{nextRandom}}" 
@@ -31,7 +31,7 @@
         {{/if}}
 
             <div class="w-7 md:w-8 h-7 md:h-8" >
-                {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}
+                {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full fill-current"}}
                 <span class="sr-only lg:hidden">{{this.text}}</span>
             </div>
 

package/src/stories/views/components/site_header/fixtures/site_header_default copy.json

@@ -1 +0,0 @@
-{"hasOpenSubNavigation":false,"_useSticky":true,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Übersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Übersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Übersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Schulausfälle","text":"Schulausfälle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Flugpläne Frankfurt / Parkhausbelegung","text":"Flugpläne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hessenschau","text":"Start","hiddenText":"hessenschau","url":"index.html","labelText":"Startseite der hessenschau","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"regionen","text":"Regionen","url":"rheinmain/index.html","isCluster":"true","subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Nordhessen","text":"Nordhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Osthessen","text":"Osthessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Mittelhessen","text":"Mittelhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Rhein-Main","text":"Rhein-Main","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Südhessen","text":"Südhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]},"clusterItems":[{"name":"nordhessen","text":"Nordhessen","url":"nordhessen/index.html"},{"name":"osthessen","text":"Osthessen","url":"osthessen/index.html"},{"name":"mittelhessen","text":"Mittelhessen","url":"mittelhessen/index.html"},{"name":"rheinmain","text":"Rhein-Main","url":"rheinmain/index.html"},{"name":"suedhessen","text":"Südhessen","url":"suedhessen/index.html"}]}]},{"navigationItems":[{"name":"politik","text":"Politik","url":"politik/index.html","qualifiedRelatedContentOn404":true,"isCluster":false,"subNavigation":{"showAsFlyout":false,"columnCount":"1","items":[{"title":"Bundestagswahl 2021","text":"Bundestagswahl 2021","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Landtag","text":"Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Videos aus dem Landtag","text":"Videos aus dem Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wahlen","text":"Wahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Direktwahlen","text":"Direktwahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]}}]},{"navigationItems":[{"name":"gesellschaft","text":"Gesellschaft","url":"gesellschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"wirtschaft","text":"Wirtschaft","url":"wirtschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kultur","text":"Kultur","url":"kultur/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"sport","text":"Sport","url":"sport/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"panorama","text":"Panorama","url":"panorama/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"freizeit","text":"Freizeit","url":"freizeit/index.html","qualifiedRelatedContentOn404":true}]}],"contentNav":{"title":"Geiler Titel","isListOrFlow":false,"isDropdown":true,"isList":false,"isFlow":false,"isMixed":false,"isAutosuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}