hr-design-system-handlebars 1.103.9 → 1.104.0

package/src/stories/views/components/event/calendar/event_calendar_components.stories.js

@@ -1,41 +1,41 @@
-import eventCalendarHeading from './event_calendar_heading.hbs'
-import eventCalendarNav from './event_calendar_nav.hbs'
-import eventCalendarContent from './event_calendar_event_teaser.hbs'
-import eventCalendarFooter from './event_calendar_footer.hbs'
-import teaserEventCalendar100Serif from '../../teaser/fixtures/teaser_event_calendar_100_serif.json'
-import eventCalendarEventTeaserData from './fixtures/event_calendar_event_teaser.json'
-import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
-
-const TemplateEventCalendarHeading = (args, { globals: { customConditionalToolbar } }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    let brand =
-        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    return eventCalendarHeading({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/event_calendar_components.json'
+
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['heading'] = handlebars.compile(`
+    {{> components/event/calendar/event_calendar_heading }}   
+  `)
+hbsTemplates['navigation'] = handlebars.compile(`
+    {{> components/event/calendar/event_calendar_nav }}   
+  `)
+hbsTemplates['content'] = handlebars.compile(`
+    {{> components/event/calendar/event_calendar_event_teaser }}   
+  `)
+hbsTemplates['footer'] = handlebars.compile(`
+    {{> components/event/calendar/event_calendar_footer }}   
+  `)
+
+
+const TemplateEventCalendarHeading = (args) => {
+    return hbsTemplates['heading']({ ...args })
 }
 
-const TemplateEventCalendarNav = (args, { globals: { customConditionalToolbar } }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    let brand =
-        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    return eventCalendarNav({ brand, ...args })
+const TemplateEventCalendarNav = (args) => {
+    return hbsTemplates['navigation']({ ...args })
 }
 
 const TemplateEventCalendarContent = (args, { globals: { customConditionalToolbar } }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    let brand =
-        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    return eventCalendarContent({ brand, ...args })
+    return hbsTemplates['content']({ ...args })
 }
 
 const TemplateEventCalendarFooter = (args, { globals: { customConditionalToolbar } }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    let brand =
-        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    return eventCalendarFooter({ brand, ...args })
+    return hbsTemplates['footer']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -43,13 +43,16 @@ export default {
 
     parameters: {
         layout: 'fullscreen',
+        chromatic: {
+            disableSnapshot: true
+        },
     },
 
     decorators: [
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main"><div class="col-span-12">
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">
              ${Story()} 
-             </div></div></div>`
+             </div></div>`
         },
     ],
 }
@@ -57,6 +60,13 @@ export default {
 export const Heading = {
     render: TemplateEventCalendarHeading.bind({}),
     name: 'Heading',
+    decorators: [
+        (Story) => {
+            return `<div class="col-span-12"> 
+             ${Story()} 
+             </div>`
+        },
+    ],
 
     argTypes: {
         title: {
@@ -70,20 +80,32 @@ export const Heading = {
         },
     },
 
-    args: {
-        title: 'Eventkalender',
-    },
+    args: fixtures.heading.args,
 }
 
 export const Navigation = {
     render: TemplateEventCalendarNav.bind({}),
     name: 'Navigation',
-    args: teaserEventCalendar100Serif.logicItem.includeModel.eventCalendar.months,
+    decorators: [
+        (Story) => {
+            return `<div class="col-span-12"> 
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.navigation.args.months,
 }
 
 export const Inhalt = {
     render: TemplateEventCalendarContent.bind({}),
     name: 'Inhalt',
+    decorators: [
+        (Story) => {
+            return `<div class="col-span-12"> 
+             ${Story()} 
+             </div>`
+        },
+    ],
 
     argTypes: {
         statusDescriptionForLabelShort: {
@@ -115,15 +137,28 @@ export const Inhalt = {
         },
     },
 
-    args: {
-        ...eventCalendarEventTeaserData,
-        _withConcertInfo: false,
-        _showTeaser: true,
-    },
+    args: fixtures.content.args,
 }
 
 export const Footer = {
     render: TemplateEventCalendarFooter.bind({}),
     name: 'Footer',
-    args: eventCalendarFooterData,
+    decorators: [
+        (Story) => {
+            return `<div class="col-span-12"> 
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.footer.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/event/calendar/fixtures/event_calendar_components.json

@@ -0,0 +1 @@
+{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"heading":{"config":{"template":"heading","renderSnapshotItemWrapper":true,"css":"col-span-12"},"args":{"title":"Eventkalender"}},"navigation":{"config":{"template":"navigation","path":"args.months","renderSnapshotItemWrapper":true,"css":"col-span-12 mt-12"},"args":{"months":[{"date":{"monthNameShort":"Mai","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-05-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-05-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-04-23"}}]},{"date":{"monthNameShort":"Jun","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-06-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-06-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-06-23"}}]},{"date":{"monthNameShort":"Jul","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-07-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-07-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-07-23"}}]},{"date":{"monthNameShort":"Aug","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-08-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-08-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-08-23"}}]},{"date":{"monthNameShort":"Sep","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-21"}}],"date":{"weekdayNameShort":"Di","day":"21","htmlDate":"2022-09-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-22"}}],"date":{"weekdayNameShort":"Mi","day":"22","htmlDate":"2022-09-22"}},{"date":{"weekdayNameShort":"Do","day":"23","htmlDate":"2022-09-23"},"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-23"}}],"isStartOfWeek":false}]},{"date":{"monthNameShort":"Jan","yearShort":"23"},"hasDays":true,"isCurrentMonth":true,"hasFutureEventsFromNow":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":true,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mo","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"isEventFinished":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","ticketLink":{"link":{"url":"https://hr.de","isTargetBlank":true,"webviewUrl":"","readMoreText":"","cmsDocument":{"trackingInformations":{"ticketLink":"finale-_landeswettbewerb_jugend_jazzt_hessen_fuer_big_bands_ticketoverlay_ok_geklickt_dokumentent_id_sophora_id_des_dokumentes_100"}}}},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}},{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-01-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-10","day":10,"weekdayNameShort":"Di","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Di","day":"10","htmlDate":"2023-01-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-01-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-01-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-01-13"}}]},{"date":{"monthNameShort":"Feb","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-02-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-02-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-02-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-02-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-02-13"}}]},{"date":{"monthNameShort":"Mär","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-03-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-03-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-03-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-03-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-03-13"}}]}]}},"content":{"config":{"template":"content","renderSnapshotItemWrapper":true,"css":"col-span-12 mt-12"},"args":{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mon","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false},"isPodcastEpisode":true,"_withConcertInfo":false,"_showTeaser":true}},"footer":{"config":{"template":"footer","renderSnapshotItemWrapper":true,"css":"col-span-12 mt-12"},"args":{"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

package/{dist/views_static/components/externalService → src/stories/views/components/external-service}/components/external_service_data_policy.hbs

@@ -5,15 +5,15 @@
     <div>
         <p class="pt-4 text-base font-copy">
             {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
-            {{~> components/externalService/components/data_policy_link ~}}
+            {{~> components/external-service/components/data_policy_link ~}}
         </p>
         <div class="pt-4">
-            {{~> components/externalService/components/external_service_form_checkbox ~}}
+            {{~> components/external-service/components/external_service_form_checkbox ~}}
         </div>
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
+                 {{~> components/external-service/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"
@@ -21,7 +21,7 @@
                 </div>
             {{/with}}
             <div class="inline-flex">
-            {{~> components/externalService/components/external_service_load_content_button ~}}
+            {{~> components/external-service/components/external_service_load_content_button ~}}
             {{#*inline "htmlProperties"}}{{/inline}}
             </div>
         </div>

package/{dist/views_static/components/externalService → src/stories/views/components/external-service}/external_service.hbs

@@ -1,6 +1,6 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
     <!-- Embedding via JS with DataPolicyCheck-->  
-    {{> components/externalService/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
+    {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
 
 {{else}}
     
@@ -20,7 +20,7 @@
                     data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
                 </div>  
             {{/if}}    
-            {{~> components/externalService/components/external_service_caption ~}}
+            {{~> components/external-service/components/external_service_caption ~}}
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/src/stories/views/components/{externalService → external-service}/external_service.stories.js

@@ -1,19 +1,28 @@
-import { ExternalServiceContent } from './external_service.data.js'
-import externalService from './external_service_with_datapolicy_check.hbs'
-import externalServiceNoDatapolicyCheck from './external_service.hbs'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/external_service.json'
 
-const TemplatePageExternalService = (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 externalService({ brand, ...args })
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+  {{> components/external-service/external_service }}   
+`)
+hbsTemplates['noDatapolicyCheck'] = handlebars.compile(`
+    {{> components/external-service/external_service_with_datapolicy_check }}   
+  `)
+
+
+
+const TemplatePageExternalService = (args) => {
+    return hbsTemplates['default']({ ...args })
 }
-const TemplatePageExternalServiceNoDatapolicyCheck = (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 externalServiceNoDatapolicyCheck({ brand, ...args })
+const TemplatePageExternalServiceNoDatapolicyCheck = (args) => {
+    return hbsTemplates['noDatapolicyCheck']({ ...args })
 }
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
+}
+
 export default {
     title: 'Komponenten/Externe Dienste',
     argTypes: {},
@@ -24,41 +33,54 @@ export default {
             inlineStories: false,
             iframeHeight: 400,
         },
+        chromatic: {
+            disableSnapshot: true
+        },
     },
 }
 
 export const ExterneDiensteGiphy = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Giphy',
-    args: ExternalServiceContent.Giphy,
+    args: fixtures.Giphy.args,
 }
 export const ExterneDiensteFlourish = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Flourish',
-    args: ExternalServiceContent.Flourish,
+    args: fixtures.Flourish.args,
 }
 export const ExterneDiensteDatawrapper = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',
-    args: ExternalServiceContent.Datawrapper_CDN,
+    args: fixtures.Datawrapper_CDN.args,
 }
 export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Feste Höhe)',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeight,
+    args: fixtures.Datawrapper_CDN_NoResponsiveFixedHeight.args,
 }
 export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveAspectRatio,
+    args: fixtures.Datawrapper_CDN_NoResponsiveAspectRatio.args
 }
 export const ExterneDiensteDatawrapperContentRefresher = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper mit ContentRefresher',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload,
+    args: fixtures.Datawrapper_CDN_NoResponsiveFixedHeightReload.args,
 }
 export const WahlGemeindeErgebnis = {
     render: TemplatePageExternalServiceNoDatapolicyCheck.bind({}),
     name: 'Externe Dienste Wahl Gemeinde Ergebnis',
-    args: ExternalServiceContent.Wahl_Gemeinde_Ergebnis,
+    args: fixtures.Wahl_Gemeinde_Ergebnis.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -0,0 +1,19 @@
+<div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
+                this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.makeDatapolicyCheck}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+            {{~> components/external-service/components/external_service_data_policy ~}}
+        </div>
+        {{~> components/external-service/components/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div class="hidden js-content-settings-button">
+            <div class="float-right">
+            {{~> components/external-service/components/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~#if (isStorybook)~}}
+<div id="{{this.externalServiceConfig.externalServiceId}}" data-whitelist="{{this.externalServiceConfig.makeDatapolicyCheck}}"></div>
+{{/if}}

package/src/stories/views/components/external-service/fixtures/external_service.json

@@ -0,0 +1 @@
+{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}

package/src/stories/views/components/forms/controls.hbs

@@ -3,7 +3,7 @@
     <div class="flex items-center">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

package/src/stories/views/components/forms/input.hbs

@@ -1,4 +1,5 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+   :class="{'animate-shake': hideDescription() }"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
@@ -7,9 +8,10 @@
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
+      x-bind:data-is-valid="valid ? 'true' : 'false'" 
       {{#if _required}}
          @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
          x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"

package/src/stories/views/components/forms/inputHandler.alpine.js

@@ -1,7 +1,7 @@
 export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
-        valid: false, 
+        valid: true, 
         wasFocused: false, 
         isFocused: false,
         validEmail: false,

package/src/stories/views/components/forms/textarea.hbs

@@ -1,11 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
+:class="{'animate-shake': !valid && wasFocused && !isFocused }">
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
          x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
       {{/if}}
       value=""

package/src/stories/views/components/forms/webform.hbs

@@ -6,11 +6,59 @@
             {{this.title}}
         </h3>
         
-        <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+        <form x-data="contactForm()"
+            
+            @submit.prevent="submitData"
+            x-ref="contactFormRef" 
+            class="relative flex flex-col justify-center overflow-hidden group" 
+            id="form--{{nextRandom}}" 
+            action="{{this.url}}" 
+            method="post" 
+            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+            accept-charset="utf-8" >     
             {{> components/forms/fields }}
 
             {{> components/forms/controls }}
         </form>
+        <script>
+        function contactForm() {
+            return {
+                formData: {
+                    name: '',
+                    email: '',
+                    message: ''
+                },
+                clickHandler() {
+                    console.log('check for Error ');
+                    const form = this.$refs.contactFormRef;
+                    const formData = new FormData(form);
+                    const fields = Array.from(form.elements); // Array of all form fields
+
+                    // Loop through each field, focus it, blur it, and serialize the data
+                    fields.forEach((field) => {
+                        if (field.type !== 'submit') {  // Skip the submit button
+                            field.focus();  // Focus the field
+                            field.blur();   // Immediately unfocus (blur) the field
+                        }
+                    });
+                    if(form.reportValidity()){
+                        this.submitData();
+                    }
+                    
+                },
+                submitData() {
+                    const formData = new FormData(this.$refs.contactFormRef);
+                    // Convert the FormData to a serialized string
+                    const serializedData = Array.from(formData.entries())
+                        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+                        .join('&');
+
+                    // Log the serialized form data
+                    console.log('DATA: ' + serializedData);
+                }
+            }
+        }
+    </script>
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/src/stories/views/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -1,6 +1,6 @@
 import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 
 const ArdPlayerLoader = function (options, trackingData, rootElement) {
     'use strict'