hr-design-system-handlebars 1.50.17 → 1.50.18

package/src/stories/views/components/footer/fixtures/footer_hessenschau.json

@@ -1,242 +1 @@
-{
-    "groups": [{
-        "title": "hessenschau",
-        "columnSize": 3,
-        "columns": [{
-            "links": [{
-                "hiddenText": "hessenschau",
-                "labelText": "Startseite der hessenschau",
-                "text": "Start",
-                "url": "index.html"
-            }, {
-                "text": "Nordhessen",
-                "url": "nordhessen/index.html"
-            }, {
-                "text": "Osthessen",
-                "url": "osthessen/index.html"
-            }, {
-                "text": "Mittelhessen",
-                "url": "mittelhessen/index.html"
-            }, {
-                "text": "Rhein-Main",
-                "url": "rheinmain/index.html"
-            }, {
-                "text": "Südhessen",
-                "url": "suedhessen/index.html"
-            }]
-        }, {
-            "links": [{
-                "text": "Politik",
-                "url": "politik/index.html"
-            }, {
-                "text": "Gesellschaft",
-                "url": "gesellschaft/index.html"
-            }, {
-                "text": "Wirtschaft",
-                "url": "wirtschaft/index.html"
-            }, {
-                "text": "Kultur",
-                "url": "kultur/index.html"
-            }, {
-                "text": "Sport",
-                "url": "sport/index.html"
-            }, {
-                "text": "Panorama",
-                "url": "panorama/index.html"
-            }, {
-                "text": "Freizeit",
-                "url": "freizeit/index.html"
-            }]
-        }, {
-            "links": [{
-                "text": "Video & Podcast",
-                "url": "video-podcast/index.html"
-            }, {
-                "text": "Wetter",
-                "url": "wetter/index.html"
-            }, {
-                "text": "Verkehr",
-                "url": "verkehr/index.html"
-            }, {
-                "text": "TV-Sendung",
-                "url": "tv-sendung/index.html"
-            }, {
-                "text": "Themen",
-                "url": "themen/index.html",
-                "paragraphed": true
-            }, {
-                "text": "Archiv",
-                "url": "archiv/index.html"
-            }]
-        }]
-    }, {
-        "title": "Service",
-        "columnSize": 1,
-        "columns": [{
-            "links": [{
-                "text": "Kontakt",
-                "url": "kontakt/index.html"
-            }, {
-                "text": "Redaktion",
-                "url": "redaktion/das-informationsportal-fuer-hessen,redaktion-info-100.html"
-            }, {
-                "text": "Hilfe",
-                "url": "hilfe/index.html"
-            }, {
-                "text": "hessenschau-App",
-                "url": "hr-apps/index.html"
-            }, {
-                "text": "Newsletter",
-                "url": "newsletter/index.html"
-            }, {
-                "text": "Korrekturen",
-                "url": "unternehmen/korrekturen/index.html",
-                "site": "hr",
-                "isTargetBlank": true
-            }, {
-                "text": "hr-text",
-                "url": "https://www.hr-text.hr-fernsehen.de/ttxHtmlGenerator/index.jsp",
-                "extern": true,
-                "isTargetBlank": true
-            }, {
-                "text": "hr-ticketcenter",
-                "url": "https://www.hr-ticketcenter.de/",
-                "extern": true,
-                "isTargetBlank": true
-            }, {
-                "text": "hr werbung",
-                "url": "index.html",
-                "site": "hr-werbung",
-                "isTargetBlank": true
-            }]
-        }]
-    }],
-    "socialMedia": {
-        "title": "Social Media",
-        "columnSize": 1,
-        "columns": [{
-            "links": [{
-                "text": "twitter-ds",
-                "url": "https://twitter.com/hessenschau",
-                "extern": true,
-                "isTargetBlank": true,
-                "title": "hessenschau Twitter"
-            }, {
-                "text": "instagram-ds",
-                "url": "https://www.instagram.com/hessenschau/",
-                "extern": true,
-                "isTargetBlank": true,
-                "title": "hessenschau Instagram"
-            }, {
-                "text": "facebook-ds",
-                "url": "https://www.facebook.com/hessenschau",
-                "extern": true,
-                "isTargetBlank": true,
-                "title": "hessenschau Facebook"
-            }, {
-                "text": "youtube-ds",
-                "url": "https://www.youtube.com/c/hessenschau",
-                "extern": true,
-                "isTargetBlank": true,
-                "title": "hessenschau YouTube"
-            }, {
-                "text": "whatsapp-ds",
-                "url": "https://whatsapp.com/channel/0029VaDcqVJAu3aJgJtKhX25",
-                "extern": true,
-                "isTargetBlank": true,
-                "title": "hessenschau WhatsApp"
-            }]
-        }, {
-            "links": [{
-                "text": "push-ds",
-                "url": "push/index.html",
-                "title": "Push-Benachrichtigung in der App"
-            }, {
-                "text": "voice-ds",
-                "url": "voice/index.html",
-                "title": "hessenschau in 100 Sekunden"
-            }, {
-                "text": "kontakt-ds",
-                "url": "kontakt/index.html",
-                "title": "Zum Kontaktformular"
-            }, {
-                "text": "rss-ds",
-                "url": "rss/index.html",
-                "title": "hessenschau.de RSS-Feed"
-            }]
-        }]
-    },
-    "footerMetadata": {
-        "hrDeLink": {
-            "currentTime": {
-                "year": "2023"
-            },
-            "text": "Hessischer Rundfunk",
-            "url": "index.html",
-            "site": "hr",
-            "isTargetBlank": true,
-            "title": "Hessischer Rundfunk"
-        },
-        "ardDeLink": {
-            "text": "ARD.de",
-            "url": "https://www.ard.de/",
-            "extern": true,
-            "isTargetBlank": true,
-            "title": "ard.de"
-        },
-        "dataProtectionLink": {
-            "text": "Datenschutz",
-            "url": "https://www.hr.de/datenschutz/index.html",
-            "extern": true,
-            "isTargetBlank": true,
-            "title": "Datenschutz"
-        },
-        "imprintLink": {
-            "text": "Impressum",
-            "url": "impressum/index.html",
-            "site": "hr",
-            "isTargetBlank": true,
-            "title": "Impressum"
-        }
-    },
-    "serviceList": [{
-        "key": "ard_mediathek",
-        "value": "ARD Mediathek (Video)"
-    }, {
-        "key": "arte_concert",
-        "value": "Arte Concert"
-    }, {
-        "key": "arte_concert_new",
-        "value": "Arte Concert 2.0"
-    }, {
-        "key": "datawrapper_cdn",
-        "value": "Datawrapper (Datengrafik)"
-    }, {
-        "key": "esri",
-        "value": "Esri (Notfallkarte)"
-    }, {
-        "key": "facebook_post",
-        "value": "Facebook"
-    }, {
-        "key": "flourish",
-        "value": "Flourish (Datengrafik)"
-    }, {
-        "key": "giphy",
-        "value": "Giphy (animiertes GIF)"
-    }, {
-        "key": "instagram",
-        "value": "Instagram"
-    }, {
-        "key": "twitter_post",
-        "value": "Twitter"
-    }, {
-        "key": "vimeo",
-        "value": "Vimeo (Video)"
-    }, {
-        "key": "youtube",
-        "value": "YouTube (Video)"
-    }, {
-        "key": "youtube360",
-        "value": "YouTube 360 (360° Video)"
-    }]
-}
+{"groups":[{"title":"hessenschau","columnSize":3,"columns":[{"links":[{"hiddenText":"hessenschau","labelText":"Startseite der hessenschau","text":"Start","url":"index.html"},{"text":"Nordhessen","url":"nordhessen/index.html"},{"text":"Osthessen","url":"osthessen/index.html"},{"text":"Mittelhessen","url":"mittelhessen/index.html"},{"text":"Rhein-Main","url":"rheinmain/index.html"},{"text":"Südhessen","url":"suedhessen/index.html"}]},{"links":[{"text":"Politik","url":"politik/index.html"},{"text":"Gesellschaft","url":"gesellschaft/index.html"},{"text":"Wirtschaft","url":"wirtschaft/index.html"},{"text":"Kultur","url":"kultur/index.html"},{"text":"Sport","url":"sport/index.html"},{"text":"Panorama","url":"panorama/index.html"},{"text":"Freizeit","url":"freizeit/index.html"}]},{"links":[{"text":"Video & Podcast","url":"video-podcast/index.html"},{"text":"Wetter","url":"wetter/index.html"},{"text":"Verkehr","url":"verkehr/index.html"},{"text":"TV-Sendung","url":"tv-sendung/index.html"},{"text":"Themen","url":"themen/index.html","paragraphed":true},{"text":"Archiv","url":"archiv/index.html"}]}]},{"title":"Service","columnSize":1,"columns":[{"links":[{"text":"Kontakt","url":"kontakt/index.html"},{"text":"Redaktion","url":"redaktion/das-informationsportal-fuer-hessen,redaktion-info-100.html"},{"text":"Hilfe","url":"hilfe/index.html"},{"text":"hessenschau-App","url":"hr-apps/index.html"},{"text":"Newsletter","url":"newsletter/index.html"},{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","site":"hr","isTargetBlank":true},{"text":"hr-text","url":"https://www.hr-text.hr-fernsehen.de/ttxHtmlGenerator/index.jsp","extern":true,"isTargetBlank":true},{"text":"hr-ticketcenter","url":"https://www.hr-ticketcenter.de/","extern":true,"isTargetBlank":true},{"text":"hr werbung","url":"index.html","site":"hr-werbung","isTargetBlank":true}]}]}],"socialMedia":{"title":"Social Media","columnSize":1,"columns":[{"links":[{"text":"twitter-ds","url":"https://twitter.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Twitter"},{"text":"instagram-ds","url":"https://www.instagram.com/hessenschau/","extern":true,"isTargetBlank":true,"title":"hessenschau Instagram"},{"text":"facebook-ds","url":"https://www.facebook.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Facebook"},{"text":"youtube-ds","url":"https://www.youtube.com/c/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau YouTube"}]},{"links":[{"text":"push-ds","url":"push/index.html","title":"Push-Benachrichtigung in der App"},{"text":"voice-ds","url":"voice/index.html","title":"hessenschau in 100 Sekunden"},{"text":"kontakt-ds","url":"kontakt/index.html","title":"Zum Kontaktformular"},{"text":"rss-ds","url":"rss/index.html","title":"hessenschau.de RSS-Feed"}]}]},"footerMetadata":{"hrDeLink":{"currentTime":{"year":"2023"},"text":"Hessischer Rundfunk","url":"index.html","site":"hr","isTargetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"isTargetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"isTargetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","isTargetBlank":true,"title":"Impressum"}},"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook_post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter_post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}

package/src/stories/views/components/footer/page_footer.hbs

@@ -1,4 +1,5 @@
-<footer class="flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+<footer class="relative flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
     <div class="flex md:container lg:px-10">
         <span class="hidden">Footer Navigation</span>
                 

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,7 +1,8 @@
-<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
-        role="navigation"
-        aria-label="{{loca "breadcrumb_headline"}}"
->   <ul>
+<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+     role="navigation"
+     aria-label="{{loca "breadcrumb_headline"}}"
+>
+    <ul>
         {{#with this.breadcrumbSsi}}
             {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
         {{/with}}

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

@@ -0,0 +1,24 @@
+<div class="h-8" x-data="{ isVisible: false }">
+    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
+        <div class="flex justify-end h-8 col-full sm:col-main"
+        :class="{ 'bg-white': $store.footerIsVisible }">
+            <button
+                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                @click.window="window.scrollTo({top: 0, behavior: 'smooth'})"
+                x-show="isVisible"
+                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+                x-transition:enter-start="opacity-0 -translate-y-8"
+                x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
+                x-transition:leave-start="opacity-100 translate-y-0"
+                x-transition:leave-end="opacity-0 translate-y-12"               
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-3 h-max mr-2 [@media(min-width:1170px)]:-mr-14"
+                >
+                {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
+            </button>
+        </div>
+    </div>
+    {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}
+    {{! TODO: Wenn Alle Seiten (auch artikel) auf grid umgestellt sind kann unter den Contentschlauch ein padding hinzugefügt werden. dann kann das hier umgebaut werden }}
+    <div class="grid h-8 grid-page" :class="{ 'hidden': $store.footerIsVisible }"><div class="flex justify-end h-8 bg-white col-full sm:col-main"></div></div>
+</div>

package/tailwind.config.js

@@ -123,8 +123,8 @@ module.exports = {
                 '22': '5.5rem',
                 '135': '33.75rem',
                 'stage': '56%',
-
                 'full-hd': '120rem',
+                'feature-box-height': 'var(--feature-box-height)'
             },
             width: {
                 '18': '4.5rem',
@@ -404,7 +404,10 @@ module.exports = {
                 'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)',
                 'tickerTeaserHeadlineUnderline': 'var(--color-ticker-teaser-headline-underline)',
                 'toggle-confirmation': 'var(--color-toggle-confirmation)',
-                'toggle-default': 'var(--color-toggle-default)'
+                'toggle-default': 'var(--color-toggle-default)',
+                'structure-nav': 'var(--structure-nav-background)',
+                'structure-nav-text': 'var(--structure-nav-text)',
+                'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)'
             },
         },
     },