hr-design-system-handlebars 1.33.3 → 1.34.1

package/src/assets/tailwind.css

@@ -36,6 +36,23 @@
     --logo-padding-top-lg: 10px;
     --logo-padding-bottom-lg: 10px;
 
+    /* Footer Logo Invert */
+    --invert-logo-footer: 0;
+    --color-footer-text: white; 
+    --color-footer-heading: white; 
+    --color-footer-border: red;
+    --color-footer-bg: theme('colors.blue.congress');
+
+    --width-footer-logo: 135px;
+    --height-footer-logo: 75px;
+
+    --width-footer-logo-md: 6.4375rem;
+    --height-footer-logo-md: 2.6875rem; 
+
+    --width-footer-logo-lg: 6.4375rem;
+    --height-footer-logo-lg: 2.6875rem; 
+    
+
     /*Hauptmenü*/
     --color-top-topic-background: theme('colors.blue.linkWater');
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -108,6 +125,7 @@
     --color-ticker-teaser-label-byline: theme('colors.white.DEFAULT');
     --color-ticker-teaser-timeline-score: theme('colors.orange.spicyCarrot');
     --color-ticker-teaser-footer: theme('colors.white.DEFAULT');
+
     --search-border-color-desktop: theme('colors.transparent');
     --search-border-color-mobile: var(--color-primary-ds);
     --color-ticker-teaser-headline-underline : theme('colors.white.DEFAULT');
@@ -128,6 +146,16 @@
     --logo-padding-top-lg: 8px;
     --logo-padding-bottom-lg: 8px;
 
+    --color-footer-bg: #606060;
+    --color-footer-border: #accfe9;
+
+    --width-footer-logo: 135px;
+    --height-footer-logo: 75px;
+    --width-footer-logo-md: 6.4375rem;
+    --height-footer-logo-md: 2.6875rem; 
+    --width-footer-logo-lg: 9.375rem;
+    --height-footer-logo-lg: 2rem; 
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.science');
     /* Ticker, Live, Livestream */
@@ -208,7 +236,8 @@
     /* Brandnavigation Border and :before Colors*/
     --color-brandnavigation-border-color: theme('colors.purple.jazzberry');
     --color-brandnav-pseudo: theme('colors.purple.jazzberry');
-
+    --color-footer-bg: #4b6464;
+    --color-footer-border:  #6d0041;
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.deepCerulean');
     /* Ticker, Live, Livestream */
@@ -272,7 +301,14 @@
     /* Brandnavigation Border and :before Colors*/
     --color-brandnavigation-border-color: theme('colors.blue.astronautBlue'); 
     --color-brandnav-pseudo: theme('colors.blue.astronautBlue');
+    
+    --color-footer-bg: #e5edf1; 
+    --color-footer-border: #e5007d; 
+    --color-footer-text: #276b9e;
+    --color-footer-heading:theme('colors.black.DEFAULT'); 
 
+    --search-border-color-desktop: #276b9e; 
+    
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.jellyBean');
     /* Ticker, Live, Livestream */
@@ -342,7 +378,8 @@
     --logo-padding-bottom-md: 8px;    
     --logo-padding-top-lg: 12px;
     --logo-padding-bottom-lg: 12px;
-
+    --color-footer-bg: #606060; 
+    --color-footer-border: ##276b9e;
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.deepCerulean');
     /* Ticker, Live, Livestream */
@@ -407,6 +444,9 @@
     --color-brandnavigation-border-color: theme('colors.blue.deepCerulean'); 
     --color-brandnav-pseudo: theme('colors.blue.deepCerulean');
 
+    --color-footer-bg: #006eb7; 
+    --color-footer-border: #a2bc09;
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.deepCerulean');
     /* Ticker, Live, Livestream */
@@ -478,6 +518,18 @@
     --logo-padding-top-lg: 6px;
     --logo-padding-bottom-lg: 6px;
 
+    --color-footer-bg: #575756; 
+    --color-footer-border: #8d2725; 
+
+    --width-footer-logo: 7.4375rem;
+    --height-footer-logo: 2.5rem;
+
+    --width-footer-logo-md: 7.4375rem;
+    --height-footer-logo-md: 2.5rem; 
+
+    --width-footer-logo-lg: 7.4375rem;
+    --height-footer-logo-lg: 2.5rem; 
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.red.burntUmber');
     /* Ticker, Live, Livestream */
@@ -549,6 +601,15 @@
     --logo-padding-top-lg: 4px;
     --logo-padding-bottom-lg: 4px;
 
+    --color-footer-bg: #575756; 
+    --color-footer-border: #c1bc2b;
+
+    --width-footer-logo: 7.4375rem;
+    --height-footer-logo: 2.5rem;
+    --width-footer-logo-md: 5.4375rem;
+    --height-footer-logo-md: 2.5rem; 
+    --width-footer-logo-lg: 5.4375rem;
+    --height-footer-logo-lg: 2.5rem; 
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.blueStone');
@@ -613,6 +674,18 @@
     --color-brandnavigation-border-color: theme('colors.blue.deepCerulean'); 
     --color-brandnav-pseudo: theme('colors.blue.deepCerulean');
 
+    --color-footer-bg: theme('colors.blue.deepCerulean');
+    --color-footer-border: #a2bc09;
+
+    --width-footer-logo: 3.4375rem;
+    --height-footer-logo: 2.6875rem; 
+
+    --width-footer-logo-md: 3.4375rem;
+    --height-footer-logo-md: 2.6875rem; 
+
+    --width-footer-logo-lg: 3.4375rem;
+    --height-footer-logo-lg: 2.6875rem; 
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.blue.deepCerulean');
     /* Ticker, Live, Livestream */
@@ -680,6 +753,19 @@
     /* Brandnavigation Border and :before Colors*/
     --color-brandnavigation-border-color: theme('colors.yellow.corn');
     --color-brandnav-pseudo: theme('colors.yellow.corn');
+
+    --color-footer-bg: #433d37 ; 
+    --color-footer-border: theme('colors.yellow.corn');
+
+    --width-footer-logo: 3.4375rem;
+    --height-footer-logo: 2.6875rem; 
+
+    --width-footer-logo-md: 3.4375rem;
+    --height-footer-logo-md: 2.6875rem; 
+
+    --width-footer-logo-lg: 3.4375rem;
+    --height-footer-logo-lg: 2.6875rem;
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.yellow.olive');
     /* Ticker, Live, Livestream */
@@ -752,6 +838,17 @@
     /* Logo paddings */
     --logo-padding-top:8px;
     --logo-padding-bottom: 8px; 
+
+    --color-footer-bg: #74747f; 
+    --color-footer-border: theme('colors.orange.clementine');
+
+    --width-footer-logo: 2.5rem;
+    --height-footer-logo: 2.5rem;
+    --width-footer-logo-md: 2.5rem;
+    --height-footer-logo-md: 2.5rem; 
+    --width-footer-logo-lg: 2.5rem;
+    --height-footer-logo-lg: 2.5rem; 
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.orange.burntOrange');
     /* Ticker, Live, Livestream */
@@ -828,6 +925,19 @@
     /* Logo padding */
     --logo-padding-top:8px;
     --logo-padding-bottom: 8px;
+
+    --color-footer-bg: #9b0112 ;
+    --color-footer-border: #007179;
+
+    --width-footer-logo: 2.5rem;
+    --height-footer-logo: 2.5rem;
+
+    --width-footer-logo-md: 2.5rem;
+    --height-footer-logo-md: 2.5rem; 
+
+    --width-footer-logo-lg: 2.5rem;
+    --height-footer-logo-lg: 2.5rem;
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.red.monza');
     /* Ticker, Live, Livestream */
@@ -903,6 +1013,19 @@
     --logo-padding-top-lg: 8px;
     --logo-padding-bottom-lg: 8px;
 
+    --bg-logo-footer: linear-gradient(to right top, #9b0058, #d6007f);;
+    --rounded-logo-footer: 7px 0px 7px 0px; 
+
+    --color-footer-bg: #407596; 
+    --color-footer-border: #168378;
+
+    --width-footer-logo: 2.5rem;
+    --height-footer-logo: 2.5rem;
+    --width-footer-logo-md: 2.5rem;
+    --height-footer-logo-md: 2.5rem; 
+    --width-footer-logo-lg: 2.5rem;
+    --height-footer-logo-lg: 2.5rem;
+
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: theme('colors.green.genoa');
     /* Ticker, Live, Livestream */
@@ -979,6 +1102,12 @@
     /* The Fancy special border on youfm */
     --border-navigation-border-image: linear-gradient(to right, #ec6a19 0%, #ec6a19 17%, #00aec5 17%, #00aec5 34%, #00a781 34%, #00a781 51%, #fcbf1f 51%, #fcbf1f 68%, #e51353 68%, #e51353 85%, #8d3b8e 85%, #8d3b8e 100%);
    
+    /* Footer Logo Invert */
+    --invert-logo-footer: 0;
+
+    --color-footer-bg: #606060; 
+    --color-footer-border: #007ea1;
+
     /* Medieninhalte, Video, Audio, Bildergalerien */
     --color-label-media: theme('colors.black.DEFAULT');
     /* Ticker, Live, Livestream */

package/src/stories/views/components/content/social_media_links/fixtures/social_media_links.json

@@ -0,0 +1 @@
+{"socialMediaLinks":[{"link":{"url":"https://www.twitter.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Twitter"},{"link":{"url":"https://www.facebook.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Facebook"},{"link":{"url":"https://www.instagram.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Instagram"}]}

package/src/stories/views/components/content/social_media_links/social_media_links.hbs

@@ -0,0 +1,17 @@
+{{#with this.socialMediaLinks }}
+    <div class="flex">
+        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <ul class="inline">
+            {{~#each this~}}
+                <li class="inline mr-1">
+                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                        {{~this.linkText~}}
+                        {{~#if this.link.hasIcon~}}
+                            {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}
+                        {{~/if~}}
+                    {{~/components/base/link~}}
+                </li>
+            {{/each}}
+        </ul>
+    </div>        
+{{/with}}

package/src/stories/views/components/content/social_media_links/social_media_links.mdx

@@ -0,0 +1,28 @@
+import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as socialMediaLinksStories from './social_media_links.stories'; 
+
+import socialMediaLinks from './social_media_links.hbs'
+
+<Meta of={socialMediaLinksStories} />
+
+export const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${geoTag}</div>`;
+    return socialMediaLinks({ ...args })
+}
+
+# Social Media Links
+
+<Canvas withToolbar>
+  <Story of={socialMediaLinksStories.ThreeLinks} />
+</Canvas>
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/content/social_media_links/social_media_links.hbs }}
+```
+
+Die Komponente kann zur Zeit nicht über parameter Konfiguriert werden

package/src/stories/views/components/content/social_media_links/social_media_links.stories.js

@@ -0,0 +1,33 @@
+import socialMediaLinks from './social_media_links.hbs'
+import socialMediaLinksData from './fixtures/social_media_links.json'
+
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${socialMediaLinks}</div>`;
+    return socialMediaLinks({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Content/SocialMediaLinks',
+
+    argTypes: {
+    },
+
+    decorators: [
+        (Story) => {
+            return `<div class="relative py-8">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+}
+
+export const ThreeLinks = {
+    render: Template.bind({}),
+    name: '3 Links',
+
+    args: {
+        ...socialMediaLinksData
+    },
+}

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

@@ -0,0 +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"}]},{"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"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"hr1.de","columnSize":3,"columns":[{"links":[{"hiddenText":"hr1","labelText":"Startseite hr1","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Titelliste","url":"titelliste/index.html"}},{"link":{"text":"Sendungen","url":"sendungen/index.html"}},{"link":{"text":"Moderation","url":"moderation/index.html"}},{"link":{"text":"Events","url":"events/index.html"}}]},{"links":[{"link":{"text":"Nachrichten","url":"nachrichten/index.html"}},{"link":{"text":"Verkehr","url":"verkehr/index.html"}},{"link":{"text":"Wetter","url":"wetter/index.html"}}]},{"links":[{"link":{"text":"Dolce Vita","url":"sendungen/dolce-vita/index.html"}},{"link":{"text":"Talk","url":"sendungen/hr1-talk/index.html"}},{"link":{"text":"Reinke","url":"sendungen/reinke/index.html"}},{"link":{"text":"hr1-Dancefloor","url":"events/dancefloor/index.html"}},{"link":{"text":"Song Connection","url":"sendungen/song-connection/index.html"}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"Kontakt","url":"kontakt/index.html"}},{"link":{"text":"Newsletter","url":"newsletter/index.html"}},{"link":{"text":"Podcasts","url":"sendungen/podcasts/index.html"}},{"link":{"text":"Frequenzen","url":"frequenzen/index.html"}},{"link":{"text":"hr1-App","url":"hr1-app/index.html"}},{"extern":true,"link":{"text":"hr1-Ticketservice","url":"https://hr1.adticket.de/","isTargetBlank":true}},{"site":"hr","link":{"text":"Presse hr1","url":"presse/radio/hr1/index.html","isTargetBlank":true}},{"site":"hr","link":{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}},{"site":"hr-werbung","link":{"text":"hr werbung","url":"index.html","isTargetBlank":true}},{"link":{"text":"Hilfe","url":"hilfe/index.html"}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"extern":true,"title":"hr1.de Facebook","link":{"text":"facebook","url":"https://www.facebook.com/hr1","isTargetBlank":true}},{"title":"hr1.de RSS-Feed","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"hr2.de","columnSize":3,"columns":[{"links":[{"hiddenText":"hr2","labelText":"Startseite hr2","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Programm","url":"programm/index.html"}},{"link":{"text":"Podcasts","url":"podcasts/index.html"}}]},{"links":[{"link":{"text":"Veranstaltungen","url":"veranstaltungen/index.html"}},{"link":{"text":"Moderation","url":"moderatoren/index.html"}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"Kontakt","url":"kontakt/index.html"}},{"link":{"text":"Hilfe","url":"hilfe/index.html"}},{"link":{"text":"Newsletter","url":"newsletter/index.html"}},{"link":{"text":"Frequenzen","url":"frequenzen/index.html"}},{"link":{"text":"hr2-App","url":"hr2-kultur-app/index.html"}},{"link":{"text":"Livestream","url":"livestream/index.html"}},{"site":"hr","extern":true,"link":{"text":"Presse hr2-kultur","url":"presse/radio/hr2/index.html","isTargetBlank":true}},{"site":"hr","extern":true,"link":{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"title":"hr2.de RSS-Feed","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"hr3.de","columnSize":3,"columns":[{"links":[{"hiddenText":"hr3","labelText":"Startseite hr3","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Aktionen","url":"aktionen/index.html"}},{"link":{"text":"Events","url":"events/index.html"}}]},{"links":[{"link":{"text":"Shows","url":"shows/index.html"}},{"link":{"text":"Playlist","url":"playlist/index.html"}},{"link":{"text":"Kontakt","url":"kontakt/index.html"}}]},{"links":[{"link":{"text":"Nachrichten","url":"nachrichten/index.html"}},{"link":{"text":"Verkehr","url":"verkehr/index.html"}},{"link":{"text":"Wetter","url":"wetter/index.html"}},{"link":{"text":"Die hr3 Morningshow","url":"shows/die-hr3-morningshow/index.html"}},{"link":{"text":"hr3 Der schöne Nachmittag","url":"shows/hr3-der-schoene-nachmittag/index.html"}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"Service-Übersicht","url":"service/index.html"}},{"link":{"text":"Frequenzen","url":"service/frequenzen/index.html"}},{"link":{"text":"hr3-App","url":"hr3-app/index.html"}},{"extern":true,"link":{"text":"hr3-Ticketservice","url":"https://hr3.adticket.de/","isTargetBlank":true}},{"link":{"text":"Hilfe","url":"hilfe/index.html"}},{"extern":true,"site":"hr","link":{"text":"Presse hr3","url":"presse/radio/hr3/index.html","isTargetBlank":true}},{"extern":true,"site":"hr","link":{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}},{"extern":true,"site":"hr-werbung","link":{"text":"hr werbung","url":"index.html","isTargetBlank":true}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"extern":true,"title":"hr3.de Facebook","link":{"text":"facebook","url":"https://www.facebook.com/hr3","isTargetBlank":true}},{"extern":true,"title":"hr3 Instagram","link":{"text":"instagram","url":"https://www.instagram.com/hr3","isTargetBlank":true}},{"extern":true,"title":"hr3 Youtube","link":{"text":"youtube","url":"https://www.youtube.com/user/hr3de","isTargetBlank":true}}]},{"links":[{"title":"hr3 Whatsapp","link":{"text":"whatsapp","url":"whatsapp/index.html"}},{"title":"Zur RSS-Seite","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"hr4.de","columnSize":3,"columns":[{"links":[{"hiddenText":"hr4","labelText":"Startseite hr4","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Programm","url":"programm/index.html"}},{"link":{"text":"Im Studio","url":"im-studio/index.html"}}]},{"links":[{"link":{"text":"Musik","url":"musik/index.html"}},{"link":{"text":"Events","url":"events/index.html"}},{"link":{"text":"Kontakt","url":"kontakt/index.html"}}]},{"links":[{"link":{"text":"Titelliste","url":"musik/titelliste/index.html"}},{"paragraphed":true,"link":{"text":"Wetter","url":"wetter/index.html"}},{"link":{"text":"Verkehr","url":"verkehr/index.html"}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"Kontakt","url":"kontakt/index.html"}},{"link":{"text":"Newsletter","url":"newsletter/index.html"}},{"link":{"text":"Frequenzen","url":"frequenzen/index.html"}},{"link":{"text":"hr4-App","url":"hr4-app/index.html"}},{"link":{"text":"Hilfe","url":"hilfe/index.html"}},{"site":"hr","link":{"text":"Presse hr4","url":"presse/radio/hr4/index.html","isTargetBlank":true}},{"extern":true,"link":{"text":"hr4-Ticketservice","url":"https://hr4.adticket.de/","isTargetBlank":true}},{"site":"hr","link":{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}},{"site":"hr-werbung","link":{"text":"hr werbung","url":"index.html","isTargetBlank":true}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"title":"hr4.de RSS-Feed","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"hr-inforadio.de","columnSize":3,"columns":[{"links":[{"hiddenText":"hr-inforadio","labelText":"Startseite hr-inforadio","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Programm","url":"programm/index.html"}},{"link":{"text":"Veranstaltungen","url":"veranstaltungen/index.html"}},{"link":{"text":"Sendezeiten","url":"sendezeiten/index.html"}},{"link":{"text":"Frequenzen","url":"frequenzen/index.html"}},{"link":{"text":"Kontakt","url":"kontakt/index.html"}}]},{"links":[]},{"links":[{"link":{"text":"Wetter","url":"wetter/index.html"}},{"link":{"text":"Verkehr","url":"verkehr/index.html"}},{"link":{"text":"Podcast","url":"podcast/index.html"}},{"paragraphed":true,"link":{"text":"Dossiers","url":"programm/dossiers/index.html"}},{"link":{"text":"Funkkolleg","url":"programm/funkkolleg/index.html"}},{"extern":true,"link":{"text":"BesserQwisser","url":"https://www.besserqwisser.info/","isTargetBlank":true}},{"site":"hr","link":{"text":"Wissen²","url":"wissen-plus/index.html","isTargetBlank":true}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"hr-iNFO-App","url":"app/index.html"}},{"link":{"text":"Livestream","url":"livestream/index.html"}},{"link":{"text":"Hilfe","url":"hilfe/index.html"}},{"site":"hr","extern":true,"link":{"text":"Presse hr-iNFO","url":"presse/radio/hrinfo/index.html","isTargetBlank":true}},{"site":"hr","extern":true,"link":{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}},{"site":"hr-werbung","extern":true,"link":{"text":"hr werbung","url":"index.html","isTargetBlank":true}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"title":"hr-iNFORadio.de RSS-Feed","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

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

@@ -0,0 +1 @@
+{"groups":[{"title":"you-fm.de","columnSize":3,"columns":[{"links":[{"hiddenText":"you-fm.de","labelText":"Startseite you-fm.de","link":{"text":"Start","url":"index.html"}},{"link":{"text":"Playlists","url":"playlists/index.html"}},{"link":{"text":"Aktionen","url":"aktionen/index.html"}}]},{"links":[{"link":{"text":"Events","url":"events/index.html"}},{"link":{"text":"Team & Shows","url":"team_shows/index.html"}},{"link":{"text":"Kontakt","url":"kontakt/index.html"}}]},{"links":[{"extern":true,"link":{"text":"WhatsApp","url":"https://wa.me/491716553040","isTargetBlank":true}},{"extern":true,"link":{"text":"Facebook","url":"https://www.facebook.com/youfm","isTargetBlank":true}},{"extern":true,"link":{"text":"Instagram","url":"https://www.instagram.com/youfm","isTargetBlank":true}},{"link":{"text":"Wetter","url":"wetter/index.html"}},{"link":{"text":"Verkehr","url":"verkehr/index.html"}}]}]},{"title":"Service","columns":[{"links":[{"link":{"text":"Service Übersicht","url":"service/index.html"}},{"link":{"text":"Mail ins Studio","url":"kontakt/index.html"}},{"link":{"text":"YOU FM App","url":"kontakt/die-you-fm-app-music-to-go,you-fm-fuer-eure-hosentasche-100.html "}},{"link":{"text":"Frequenzen","url":"kontakt/you-fm-frequenzen,frequenzen-114.html"}},{"link":{"text":"Jobs","url":"service/jobs/index.html"}},{"extern":true,"link":{"text":"YOU FM Ticketservice","url":"https://youfm.adticket.de/","isTargetBlank":true}},{"site":"hr","extern":true,"link":{"text":"Presse YOU FM ","url":"presse/radio/youfm/index.html","isTargetBlank":true}},{"site":"hr","extern":true,"link":{"text":"Korrekturen ","url":"unternehmen/korrekturen/index.html","isTargetBlank":true}},{"site":"hr-werbung","extern":true,"link":{"text":"hr werbung","url":"index.html","isTargetBlank":true}},{"link":{"text":"Hilfe","url":"service/hilfe-zu-you-fmde,hilfe-you-fm100.html"}}]}]}],"socialMedia":{"title":"Social Media","columns":[{"links":[{"extern":true,"title":"you-fm.de Facebook","link":{"text":"facebook","url":"https://www.facebook.com/youfm","isTargetBlank":true}},{"extern":true,"title":"you-fm.de Instagram","link":{"text":"instagram","url":"https://www.instagram.com/youfm","isTargetBlank":true}},{"extern":true,"title":"you-fm.de YouTube","link":{"text":"youtube","url":"https://www.youtube.com/user/YOUFMYOUNGFRESHMUSIC","isTargetBlank":true}}]},{"links":[{"title":"you-fm.de Whatsapp","link":{"text":"whatsapp","url":"whatsapp/index.html"}},{"title":"you-fm.de RSS","link":{"text":"rss","url":"rss/index.html"}},{"title":"Zum Kontaktformular","link":{"text":"mail","url":"kontakt/index.html"}}]}]},"footerMetadata":{"hrDeLink":{"text":"Hessischer Rundfunk","url":"index.html","site":"hr","targetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"targetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"targetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","targetBlank":true,"title":"Impressum"}}}

package/src/stories/views/components/footer/page_footer.data.js

@@ -0,0 +1,9 @@
+import structuredClone from 'core-js-pure/actual/structured-clone'
+import footerContent from './fixtures/footer_hessenschau.json'
+
+const FooterContent =  structuredClone(
+    Object.assign({}, footerContent)
+)
+
+export { FooterContent }
+

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

@@ -0,0 +1,25 @@
+<footer class="flex justify-center w-full pb-4 text-base border-t text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="container flex lg:px-10">
+        <span class="hidden">Footer Navigation</span>
+                
+        <div class="flex flex-wrap justify-start list-none">
+            {{~> components/footer/page_footer_content ~}}
+
+            <div class="flex flex-col w-full pt-8 text-left md:items-end md:justify-between md:pl-4 md:pt-16 md:flex-row lg:pl-0">
+
+                {{> components/footer/page_footer_metadata 
+                    _hrDeLink=this.footerMetadata.hrDeLink
+                    _ardDeLink=this.footerMetadata.ardDeLink
+                    _dataProtectionLink=this.footerMetadata.dataProtectionLink
+                    _imprintLink=this.footerMetadata.imprintLink
+                    _iconName="extern"
+                }}
+                
+                <div class="flex justify-center w-auto px-4 lg:pr-0 md:h-12">
+                    {{> components/footer/page_footer_logo }}
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</footer>

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

@@ -0,0 +1,28 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PageFooterStories from './page_footer.stories'
+
+<Meta of={PageFooterStories} />
+
+# Footer
+
+Der Fußbereich der Website - aus dem engl. "Footer" - nimmt dabei das Copyright des Urhebers, das Erstellungsdatum, sowie Links zu Datenschutz und Impressum auf.
+Daneben ermöglicht der Footer einen weiteren Zugang zu den Inhalten die auch über die Seitennavigation (Rubriken) im Kopfbereich zugänglich sind und 
+zu bezugnehmenden wichtigen Inhalten, die erreichbar sein müssen, denen aber eben keinen Platz in der Hauptnavigation zugewiesen wurde (z.B. Korrekturen).
+
+# Grundaufbau
+
+Der Footer zerfällt in zwei Gruppen:
+Die 1. Gruppe besteht aus drei Spalten, in denen Links zu Rubriken und deren Inhalte referenziert sind.
+Die 2. Gruppe besteht aus zwei Spalten und referenziert auf zusätzliche Services, wie Kontakt, Hilfe und Korrekturen, Push-Mitteilungen, RSS und Smartaudio.
+Daneben einen Suchschlitz für die seitenweite Suche, die Seite "hessenschau" bei Social-Media-Diensten wie Twitter, Instagram, Facebook und Youtube und den
+Einstellungsdialog für Tracking und externe Dienste.
+
+Die Bestückung der Gruppen unterscheidet sich von hessenschau.de zu anderen Seiten - Radio-Wellen, Klangkörper -  des Hessischen Rundfunks. 
+Bestimmte Elemente bleiben aber über alle Angebote hinweg erhalten.
+
+
+<Story of={PageFooterStories.Seitenfooter} />
+
+
+
+

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

@@ -0,0 +1,30 @@
+import { 
+    FooterContent
+} from './page_footer.data.js'
+import pageFooter from './page_footer.hbs'
+
+const TemplatePageFooter = (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 pageFooter({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Footer',
+    argTypes: {},
+
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Seitenfooter = {
+    render: TemplatePageFooter.bind({}),
+    name: 'Seitenfooter',
+    args: FooterContent, 
+}

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

@@ -0,0 +1,24 @@
+<nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
+    <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:ml-4 md:py-0 lg:m-0">
+        
+        <span class="flex justify-start text-base font-bold text-footer-heading "  title="{{_title}}" onclick="">{{_title}}  </span>  
+        
+        <div class="flex items-center md:hidden " :class="dropped ? 'transform rotate-180':''">
+            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
+        </div>
+        
+    </div>
+
+    <div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
+        {{#each _columns}} 
+            <ul class="flex flex-col text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
+                {{#each this.links}}
+                    
+                        {{> components/footer/page_footer_item  _css="hover:underline" _iconName="extern" }}
+                          
+                {{/each}}
+            </ul>
+        {{/each}}
+    </div>
+    
+</nav>

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

@@ -0,0 +1,25 @@
+<div class="flex w-full md:w-1/2 md:w-max-1/2 md:first:pr-4 --first ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[0].columns _columnSize=this.groups.[0].columnSize _title=this.groups.[0].title ~}} 
+</div>
+
+<div class="flex w-full md:w-1/4 md:w-max-1/4 -second ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}} 
+</div> 
+
+<div class="flex flex-col w-full pt-4 md:w-1/4 md:w-max-1/4 md:pt-0 md:pr-4 lg:pr-0 -third">
+
+    <div class="pb-4 md:pt-[38px] md:mt-[38px] p-0 m-0 md:border-t border-footer-heading">
+        {{> components/footer/page_footer_search }}
+    </div>
+     
+    {{> components/footer/page_footer_social_media _columns=this.socialMedia.columns _title=this.socialMedia.title}}
+    
+    <div class="flex items-center justify-center pt-4 md:justify-end">
+        {{#> components/button/button _size="md" _css="text-footer-text border-footer-text " _variant="secondary" _onBackground="true" }}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+        {{/components/button/button}}
+    </div>
+    
+</div>
+

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

@@ -0,0 +1,15 @@
+{{#if this.extern}}
+    <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
+        {{> components/footer/page_footer_nav_link  _css="flex hover:underline" _link=this _iconName="extern" }}
+    </li>
+{{else}}
+    {{#if this.paragraphed}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
+            {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
+        </li>
+    {{else}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
+            {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
+        </li>
+    {{/if}}
+{{/if}}

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

@@ -0,0 +1,9 @@
+<div class="self-end inline-block float-right mt-8 w-fit md:mt-0">
+    <a href="{{resourceUrl "index.html"}}" title="{{loca "header_homepage_link_title"}}">
+        {{#if (configProperty "iconConfig.brandlogo.footer")}}
+            {{> components/base/image/icon _icon=(configProperty "iconConfig.brandlogo.footer") _iconmap="logo" _addClass="inline-block w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg flex self-end invert-logo-footer"}}
+        {{else}}
+            {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="inline-block bg-logo-footer rounded-logo-footer w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg fill-current md:mt-2 lg:mt-1 md:flex invert-logo-footer text-footer-text"}}
+        {{/if}}
+    </a>
+</div>