hr-design-system-handlebars 1.50.16 → 1.50.18

package/src/stories/views/components/content/copytext/components/image.hbs

@@ -0,0 +1,41 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
+{{~else~}}
+
+    {{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> modules/figure/figure
+                _cssClass="copytext__clearBox"
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _pictureAddClass="copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> modules/figure/figure
+                _cssClass="copytext__box"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _pictureAddClass="copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> modules/figure/figure
+                _cssClass="copytext__clearBox"
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar--16x9 copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> modules/figure/figure
+                _cssClass="copytext__box"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar--16x9 copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+
+{{~/if~}}

package/src/stories/views/components/content/copytext/components/infobox.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Infobox-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/infobox ~}}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/jobposting.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Jobposting-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/jobposting ~}}
+{{~/if~}}

package/src/stories/views/components/content/copytext/components/livestream.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Livestream-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream__outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_video_livestream__intro_sr" _a11yOutro-loca="story_video_livestream__outro_sr" }}
+    {{/if}}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/map.hbs

@@ -0,0 +1,46 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Map-component</div>
+{{~else~}}
+    {{> content/geomap/page/components/map
+        _addClass="copytext__clearBox"
+        _id=this.uuid
+        _tilesURL=this.mapTilesUrl
+        _iconURLStyle1=this.markerIconUrl
+        _iconURLStyle2=this.markerIconUrlS2
+        _iconURLStyle3=this.markerIconUrlS3
+        _markerList=this.showMarkerList
+        _fixedTooltip=this.showFixedTooltip
+        _markerCluster=this.showMarkercluster
+        _showOwnLocation=this.showOwnLocation
+        _initView=this.initView
+        _initLat=this.initViewLat
+        _initLng=this.initViewLong
+        _initZoom=this.initZoom
+        _border=this.showBorders
+        _colorBorder=this.borderColor
+        _borderStrokeWeight=this.borderStrokeWeight
+        _countryFillColor=this.countryFillColor
+        _countryFillOpacity=this.countryFillOpacity
+        _colorAreasStyle1=this.polygonColor
+        _opacityAreasStyle1=this.polygonOpacity
+        _weightAreasStyle1=this.polygonWeight
+        _colorAreasStyle2=this.polygonColorS2
+        _opacityAreasStyle2=this.polygonOpacityS2
+        _weightAreasStyle2=this.polygonWeightS2
+        _colorAreasStyle3=this.polygonColorS3
+        _opacityAreasStyle3=this.polygonOpacityS3
+        _weightAreasStyle3=this.polygonWeightS3
+        _colorLinesStyle1=this.polylineColor
+        _weightLinesStyle1=this.polylineWeight
+        _colorLinesStyle2=this.polylineColorS2
+        _weightLinesStyle2=this.polylineWeightS2
+        _colorLinesStyle3=this.polylineColorS3
+        _weightLinesStyle3=this.polylineWeightS3
+        _aspectRatio=this.mapAspectRatio
+        _initZoomMax=this.initZoomMax
+        _initZoomMin=this.initZoomMin
+        _clusterMinIconURL=this.clusterMinIconUrl
+        _clusterMedIconURL=this.clusterMedIconUrl
+        _clusterMaxIconURL=this.clusterMaxIconUrl
+    }}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/newsletter.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Newsletter-component</div>
+{{~else~}}
+    {{> modules/newsletter/newsletter _addClass="copytext__clearBox marginTrailer--m"}}
+{{~/if~}}    

package/src/stories/views/components/content/copytext/components/paragraph.hbs

@@ -0,0 +1,11 @@
+{{#each this.text.split}}
+    {{#if this.isText}}
+        <p class="mt-6 text-base sm480:text-lg dark:text-text-dark">{{{this.text}}}</p>
+    {{/if}}
+    {{#if this.isUl}}
+        <ul class="mt-6 ml-5 text-base list-disc sm480:text-lg dark:text-text-dark">{{{this.text}}}</ul>
+    {{/if}}
+    {{#if this.isOl}}
+        <ol class="mt-6 ml-5 text-base list-decimal sm480:text-lg dark:text-text-dark">{{{this.text}}}</ol>
+    {{/if}}
+{{/each}}

package/src/stories/views/components/content/copytext/components/podcastepisode.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Podcast-episode-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}}

package/src/stories/views/components/content/copytext/components/posterteaser.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Posterteaser-component</div>
+{{~else~}}
+    {{> modules/teaser/poster-teaser/posterTeaser-story}}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/radioplaylist.hbs

@@ -0,0 +1,11 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Radioplaylist-component</div>
+{{~else~}}
+    {{#with this.toModel.songvoteParagraphBox}}
+        {{#if this.showRanking }}
+            <div class="copytext__clearBox marginTrailer--m">
+                {{{this.rankingSSI}}}
+            </div>
+        {{/if}}
+    {{/with}}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/tweet.hbs

@@ -0,0 +1,7 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Tweet-component</div>
+{{~else~}}
+    {{#with this.toModel.tweet}}
+        {{> modules/twitter/copytext_twitter _addClass="copytext__clearBox" }}
+    {{/with}}
+{{~/if~}} 

package/src/stories/views/components/content/copytext/components/video.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Video-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _fullSize=true _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _fullSize=false _addClass="copytext__box dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{/if}}
+{{~/if~}}

package/src/stories/views/components/content/copytext/components/voting.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Voting-component</div>
+{{~else~}}
+    {{#if this.isMultiVote}}
+        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="copytext__clearBox"}}
+    {{else}}
+        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="copytext__clearBox"}}
+    {{/if}}
+{{~/if~}}

package/src/stories/views/components/content/copytext/components/webform.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Webform-component</div>
+{{~else~}}
+    {{> content/webform/components/webform _addClass="copytext__clearBox marginTrailer--m"}}
+{{~/if~}}     

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

@@ -0,0 +1,129 @@
+{{#each this.copytextParagraph }}
+    {{{this.structuredDataSsi}}}
+    {{#if this.isHeadline}}
+        {{> components/content/copytext/components/headline }}
+    {{/if}}
+
+    {{#unless this.isInfoBox}}
+        {{~#with this.paragraphBoxItem }}
+            {{~#if this.isImage}}
+                {{> components/content/copytext/components/image }}    
+            {{/if~}}
+            {{~#if this.isContentBox}}
+                {{~> components/article/components/contentbox/contentbox ~}}
+            {{/if~}}
+            {{~#if this.isAccordion}}
+               {{~> components/article/components/accordion/accordion ~}}
+            {{/if~}}
+            {{~#if this.isGallery}}                
+                {{> components/content/copytext/components/gallery }}                
+            {{/if~}}
+            {{~#if this.isFileDownload}}
+                {{> components/content/copytext/components/filedownload }}                
+            {{/if~}}
+            {{~#if this.isMap}}
+                {{> components/content/copytext/components/map }}    
+            {{/if~}}
+            {{~#if this.isWebForm}}
+                {{> components/content/copytext/components/webform }}
+            {{/if~}}
+            {{~#if this.isNewsletter}}
+                {{> components/content/copytext/components/newsletter }}    
+            {{/if~}}
+            {{~#if this.isAudio}}
+                {{> components/content/copytext/components/audio }}
+            {{/if~}}
+            {{~#if this.isAudioEventLivestream}}
+                {{> components/content/copytext/components/audioeventlivestream }}
+            {{/if~}}
+            {{~#if this.isPodcastEpisode}}
+                {{> components/content/copytext/components/podcastepisode }}
+            {{/if~}}
+            {{~#if this.isVideo}}
+                {{> components/content/copytext/components/video }}
+            {{/if~}}
+            {{~#if this.isLivestream}}
+                {{> components/content/copytext/components/livestream }}
+            {{/if~}}
+            {{~#if this.isTweet}}
+                {{> components/content/copytext/components/tweet }}
+            {{~/if}}
+            {{~#if this.isRadioPlaylist}}
+                {{> components/content/copytext/components/radioplaylist }}
+            {{~/if}}
+            {{~#if this.isVoting}}
+                {{> components/content/copytext/components/voting }}
+            {{/if~}}
+            {{~#if this.isExternalService}}
+                {{> components/content/copytext/components/externalservice }}
+            {{/if~}}
+            {{~#if this.isContentNav}}
+                {{#with this.toModel.contentNavigationTeaser}}
+                    {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
+                {{/with}}
+            {{/if~}}
+        {{~/with}}
+    {{/unless}}
+
+    {{~#with this.paragraphTeaserItem }}
+        {{~#if this.isTopictag}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isTicker}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isLink}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isStructureNodeDocument}}
+            {{#with this.toModel.structureNodeTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isStory}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isProgram}}
+            {{#with this.toModel.genericTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+        {{~#if this.isEvent}}
+            {{#with this.toModel.eventTeaser}}
+                {{> components/content/copytext/components/posterteaser }}
+            {{/with}}
+        {{/if~}}
+    {{~/with}}
+
+    {{#if this.isParagraph}}
+        {{> components/content/copytext/components/paragraph }}
+    {{/if}}
+
+    {{#if this.isCite}}
+        {{> components/content/copytext/components/cite }}
+    {{/if}}
+
+    {{#if this.isInfoBox}}
+        {{> components/content/copytext/components/infobox }}
+    {{/if}}
+    {{#if this.isAdditionalInfo}}
+        {{> components/content/copytext/components/additionalinfo }}
+    {{/if}}
+    {{#if this.isDownloadBox}}
+        {{> components/content/copytext/components/downloadbox }}
+    {{/if}}
+    {{#if this.isFAQ}}
+        {{> components/content/copytext/components/faq }}
+    {{/if}}
+    {{#if this.isJobposting}}
+        {{> components/content/copytext/components/jobposting }}
+    {{/if}}
+{{/each}}

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

@@ -0,0 +1,25 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as CopytextStories from './copytext.stories'
+
+<Meta of={CopytextStories} />
+
+# Copytext
+
+## Beschreibung
+
+Copytext ist der Haupt-Bestandteil eines Artikels. Er enthält Text-Absätze, Zwischenüberschriften, Bilder, Audios, Videos und vieles mehr.
+Die insgesamt 26 Sub-Komponenten werden nach und nach entwickelt. Bis dahin werden Dummies angezeigt (*"coming soon: XY-component"*).
+
+## Verwendung
+
+Die Copytext-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/content/copytext/copytext _isWebview=true|false }}
+```
+
+<Canvas withToolbar>
+    <Story of={CopytextStories.Default} />
+</Canvas>
+
+<ArgsTable story="default" />

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

@@ -0,0 +1,16 @@
+import copytext from './copytext.hbs'
+import copytext_json from './fixtures/copytext.json'
+
+const Template = ({ ...args }) => {
+    return copytext({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Content/Copytext',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: copytext_json,
+}

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

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."},{"isUl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"},{"isOl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."},{"isText":true,"text":"Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."}]},"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":true}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Medienbericht: Flaschenangriff auf Mitschüler"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isCite":true,"text":"Dies ist ein Zitat"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":"Dies ist eine Infobox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isAdditionalInfo":true,"text":"Dies ist eine additional Info"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isDownloadBox":true,"text":"Dies ist eine Downloadbox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isFAQ":true,"text":"Dies ist ein FAQ-Absatz"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isJobposting":true,"text":"Dies ist ein Jobposting"}]}

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>