hr-design-system-handlebars 0.123.6 → 0.124.0

package/src/stories/views/components/modal/modal.feature.js

@@ -0,0 +1,38 @@
+import { hr$, listen, unlisten } from 'hrQuery'
+
+const Modal = (context) => {
+    const { options } = context,
+        { element: rootElement } = context,
+        modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
+        modalTrigger = hr$(modalTriggerId)[0],
+        modalCloseTriggers = hr$('.js-modal-close', rootElement),
+        modal = hr$('.js-modal', rootElement)[0]
+
+    const configureEventListeners = () => {
+        listen('click', show, modalTrigger)
+
+        modalCloseTriggers.forEach((modalCloseTrigger) => {
+            listen('click', close, modalCloseTrigger)
+        })
+    }
+
+    const show = () => {
+        modal.showModal()
+        listen('click', closeFromOutside, modal)
+    }
+
+    const closeFromOutside = (event) => {
+        if (event.target === modal) {
+            unlisten('click', closeFromOutside, modal)
+            close()
+        }
+    }
+
+    const close = () => {
+        modal.close()
+    }
+
+    configureEventListeners()
+}
+
+export default Modal

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

@@ -0,0 +1,7 @@
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}"}'>
+    <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
+        <form method="dialog" class="js-dialog-content p-4">
+            {{> @partial-block }}
+        </form>
+    </dialog>
+</div>

package/src/stories/views/components/teaser/components/teaser_header.hbs

@@ -0,0 +1,3 @@
+<header>
+    {{> @partial-block }}
+</header>

package/src/stories/views/components/teaser/components/teaser_heading.hbs

@@ -5,11 +5,13 @@
 {{/with~}}
 
 <{{~ _headlineTag ~}}{{#if _headlineCss}} class="{{_headlineCss}}"{{/if}}>
-       {{#if _topline}}
+    {{~#block "headlineStart"}}{{/block~}}
+    {{#if _topline}}
         {{> components/teaser/components/teaser_topline _css=(if _toplineCss _toplineCss "") _text=_topline _readMore=_readMore _teaserType=_teaserType}}
     {{/if}}
     {{> components/teaser/components/teaser_title _css=(if _titleCss _titleCss "") _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}
     {{#if _extendedTitle}}
         <span class="block text-subline font-normal font-heading text-base sm:text-lg mt-1 sm:mt-1.5 leading-6">{{_extendedTitle}}</span>
     {{/if}}
+    {{~#block "headlineEnd"}}{{/block~}}
 </{{~ _headlineTag ~}}>

package/src/stories/views/components/teaser/components/teaser_headline.hbs

@@ -0,0 +1,3 @@
+<{{~ defaultIfEmpty _headlineTag "h2"~}}{{#if _css}} class="{{_css}}"{{/if}}>
+    {{> @partial-block }}
+</{{~ defaultIfEmpty _headlineTag "h2" ~}}>

package/src/stories/views/components/teaser/components/teaser_title_classes.hbs

@@ -91,4 +91,7 @@ the 4 parameters are:
     {{~#case 'stage'~}}
         {{~inline-switch _size '["100"]' '[" text-2xl md:text-4xl"," text-2xl"]'}}
     {{~/case~}}
+    {{~#case 'calendar'~}}
+       text-2xl
+    {{~/case~}}
 {{~/switch~}}

package/src/stories/views/components/teaser/components/teaser_title_test.hbs

@@ -0,0 +1,3 @@
+<span class='block mt-0.5 font-title font-bold{{#if _css}} {{_css}}{{/if}}'>
+    {{~_text~}}
+</span>

package/src/stories/views/components/teaser/components/teaser_topline.hbs

@@ -1,5 +1 @@
-<span
-    class='pt-px block text-base text-toplineColor{{#if _css}} {{_css}}{{/if}} font-heading'
->
-    {{_text}}
-</span>
+<span class='pt-px block text-base text-toplineColor{{#if _css}} {{_css}}{{/if}} font-heading'>{{_text}}</span>

package/src/stories/views/components/teaser/fixtures/teaser_event_calendar_100_no_future_events.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"teaserSize":"100","realTeaserSize":"100","title":"Konzertkalender","eventCalendar":{"months":[{"date":{"monthNameShort":"Mai","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-05-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2021-05-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-05-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2021-05-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-05-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2021-04-23"}}]},{"date":{"monthNameShort":"Jun","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-06-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2021-06-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-06-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2021-06-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-06-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2021-06-23"}}]},{"date":{"monthNameShort":"Jul","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-07-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2021-07-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-07-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2021-07-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-07-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2021-07-23"}}]},{"date":{"monthNameShort":"Aug","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-08-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2021-08-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-08-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2021-08-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-08-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2021-08-23"}}]},{"date":{"monthNameShort":"Dez","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-09-21"}}],"date":{"weekdayNameShort":"Di","day":"21","htmlDate":"2021-09-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-09-22"}}],"date":{"weekdayNameShort":"Mi","day":"22","htmlDate":"2021-09-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2021-09-23"}}],"date":{"weekdayNameShort":"Do","day":"23","htmlDate":"2021-09-23"}}]}],"hasSelectedEvents":true,"hasFutureEventsFromNow":false},"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_event","byline":{"bylineSsi":" ","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_event_calendar_100_serif.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"teaserSize":"100","realTeaserSize":"100","title":"Konzertkalender","eventCalendar":{"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":"","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":"14.10.22, 20:00 Uhr","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":""}},"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":"","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":"14.10.22, 20:00 Uhr","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":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","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":"14.10.22, 20:00 Uhr","bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","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":"","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":"14.10.22, 20:00 Uhr","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":"","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":"14.10.22, 20:00 Uhr","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":"","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":"14.10.22, 20:00 Uhr","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":"","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":"14.10.22, 20:00 Uhr","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"}}]}],"hasSelectedEvents":true,"hasFutureEventsFromNow":true},"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_event","byline":{"bylineSsi":" ","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/teaser_event_calendar.hbs

@@ -0,0 +1,8 @@
+<article class="col-span-12{{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6"]'}}">
+    {{#> components/event/calendar/event_calendar}}
+        {{> components/event/calendar/event_calendar_heading _headlineTag="h3"}}
+        {{> components/event/calendar/event_calendar_nav this.eventCalendar.months}}
+        {{> components/event/calendar/event_calendar_content this.eventCalendar}}
+        {{> components/event/calendar/event_calendar_footer}}
+    {{/components/event/calendar/event_calendar}}
+</article>

package/src/stories/views/components/teaser/teaser_event_calendar.stories.mdx

@@ -0,0 +1,131 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+import teaserEventCalendar from '../../components/teaser/teaser_event_calendar.hbs'
+import teaserEventCalendar100Serif from './fixtures/teaser_event_calendar_100_serif.json'
+import teaserEventCalendarWithNoFutureEventsData from './fixtures/teaser_event_calendar_100_no_future_events.json'
+
+<Meta
+    title="Komponenten/Teaser/Eventkalender"
+    parameters={{
+        layout: 'fullscreen',
+    }}
+    argTypes={{
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '100'],
+            },
+            description: 'Teaser Größe',
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+    }}
+    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-8 sm:col-main">  
+                ${Story()} 
+                </div></div>`
+        },
+    ]}
+/>
+
+export const TemplateEventCalendarTeaser = (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 teaserEventCalendar({ brand, ...args })
+}
+
+# Standard-Teaser
+
+## Beschreibung
+
+Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Standard 33 Single Event:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Two Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Multiple Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />{' '}
+
+## Sub-Komponenten
+
+Die Standard-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>
+        components/teaser/components/<b>teaser_lead</b>
+    </li>
+    <li>
+        components/base/<b>link</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser_heading</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser_text</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser_byline</b>
+    </li>
+</ul>
+
+## Verwendung
+
+Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_standard_event}}
+```
+
+<Preview withToolbar>
+    <Story
+        name="Teaser 100"
+        argTypes={{
+            teaserSize: {
+                control: {
+                    type: 'select',
+                    options: ['50', '100'],
+                },
+                description: 'Teaser Größe',
+                table: {
+                    defaultValue: {
+                        summary: '100',
+                    },
+                },
+            },
+        }}
+        args={teaserEventCalendar100Serif.logicItem.includeModel}
+    >
+        {TemplateEventCalendarTeaser.bind({})}
+    </Story>
+    <Story
+        name="Teaser 100 Keine Events in der Zukunft"
+        argTypes={{
+            teaserSize: {
+                control: {
+                    type: 'select',
+                    options: ['50', '100'],
+                },
+                description: 'Teaser Größe',
+                table: {
+                    defaultValue: {
+                        summary: '100',
+                    },
+                },
+            },
+        }}
+        args={teaserEventCalendarWithNoFutureEventsData.logicItem.includeModel}
+    >
+        {TemplateEventCalendarTeaser.bind({})}
+    </Story>
+</Preview>

package/tailwind.config.js

@@ -185,6 +185,7 @@ module.exports = {
                     '"Noto Sans"',
                     'sans-serif',
                 ],
+                serif: ['RobotoSlab', ...defaultTheme.fontFamily.serif],
                 headingSerif: [
                     'RobotoSlab',
                     'ui-serif',
@@ -214,6 +215,7 @@ module.exports = {
                 titleCluster: 'var(--font-weight-titleCluster)',
             },
             colors: {
+                'inherit': 'inherit',
                 'blue': {
                     accented: '#eaf3fa',
                     allports: '#007899',
@@ -235,14 +237,14 @@ module.exports = {
                     tarawera: '#0a3355',
                     teal: '#007A7CFF',
                     turquoiseCerulian: '#007fa0',
-                    midnight : '#023770',
-                    deepSeaDream : '#002c6b',
-
+                    midnight: '#023770',
+                    deepSeaDream: '#002c6b',
                 },
                 'black': {
                     DEFAULT: '#000000',
                 },
                 'red': {
+                    alizarinCrimson: '#e81f18',
                     thunderbird: '#cc1a14',
                     monza: '#c20016',
                     burntUmber: '#8d2725',
@@ -281,6 +283,7 @@ module.exports = {
                     brightGray: '#E5F2F3',
                     platinum: '#E5E8E8',
                     mercury: '#E6E6E6',
+                    boulder: '#797979',
                 },
                 'green': {
                     casal: '#29675d',
@@ -292,6 +295,7 @@ module.exports = {
                     teal: '#00727A',
                 },
                 'purple': {
+                    disco: '#88114b',
                     pompadour: '#6d0041',
                     jazzberry: '#a00d65',
                     purpleHeart: '#832baf',
@@ -305,7 +309,7 @@ module.exports = {
                 'yellow': {
                     corn: '#e0ae00',
                     goldenSand: '#f2da6c',
-                    olive: '#916B00FF',
+                    olive: '#916B00',
                     givry: '#f7ebbf',
                     sunshine: '#ffb114',
                 },
@@ -342,6 +346,9 @@ module.exports = {
                 'podcast': 'var(--color-podcast)',
                 'podcast-text': 'var(--color-podcast-text)',
                 'podcast-highlight': 'var(--color-podcast-highlight)',
+                'event-status': 'var(--color-event-status)',
+                'event-calendar-primary': 'var(--color-eventcalendar-primary)',
+                'event-calendar-secondary': 'var(--color-eventcalendar-secondary)',
             },
         },
     },