hr-design-system-handlebars 0.123.6 → 0.124.0

package/src/assets/fixtures/teaser/teaser_event_calendar_100_no_future_events.json

@@ -0,0 +1,24 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "eventCalendarTeaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.eventCalendar.hasFutureEventsFromNow",
+            "@->value": false
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.eventCalendar.months",
+            "@->value": {
+                "@->jsoninclude": "event/calendar/event_calendar_months.inc.json",
+                "@->contentpath": "onlyMonthsInPast"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "eventLabelCalendar"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_event_calendar_100_serif.json

@@ -0,0 +1,21 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "eventCalendarTeaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "eventLabelCalendar"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_images.inc.json

@@ -308,6 +308,27 @@
             ]
         }
     },
+    "event-teaser_100": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "images/{#image}_v-16to9.jpg",
+            "sources": [
+                {
+                    "media": "all and (min-width: 1024px)",
+                    "sizes": "25rem",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                },
+                {
+                    "media": "all and (max-width: 1023px)",
+                    "sizes": "(min-width: 640px) 25rem, 100vw",
+                    "srcset": "images/{#image}_v-4to3__small.jpg 320w, images/{#image}_v-4to3__medium.jpg 480w, images/{#image}_v-4to3.jpg 650w, images/{#image}_v-4to3__retina.jpg 1300w"
+                }
+            ]
+        }
+    },
     "teaser_25": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",

package/src/assets/fixtures/teaser/teaser_labels.inc.json

@@ -39,6 +39,18 @@
             "bylineText": "BylineText"
         }
     },
+    "eventLabelCalendar": {
+        "type": "event",
+        "loca": "label_event",
+        "byline": {
+            "bylineSsi": " ",
+            "bylineText": "BylineText"
+        }
+    },
+    "eventCalendar": {
+        "type": "eventCalendar",
+        "loca": "event_calendar_backlink"
+    },
     "program": {
         "type": "program",
         "loca": "label_program",

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -1820,5 +1820,36 @@
             "shorttext": "Gemeinsam mit Ihnen machen wir uns stark für die Natur und die Umwelt. Wir suchen Menschen, die sich dafür engagieren. Jetzt anmelden und unser Hessen noch schöner machen.",
             "showShorttext": true
         }
+    },
+    "eventCalendarTeaser": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/teaser_standard",
+            "includeModel": {
+                "teaserSize": "100",
+                "realTeaserSize": "100",
+                "title": "Konzertkalender",
+                "eventCalendar": {
+                    "months": {
+                        "@->jsoninclude": "event/calendar/event_calendar_months.inc.json",
+                        "@->contentpath": "eventDate"
+                    },
+                    "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"
+                    }
+                }
+            }
+        }
     }
 }

package/src/assets/tailwind.css

@@ -37,6 +37,12 @@
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Dachzeile */
     --color-topline: #006dc1;
+    /* Event */
+    --color-event-status: theme('colors.red.thunderbird');
+    /* Eventkalender */
+    --color-label-event-calendar-title: theme('colors.teal.deeperPool');
+    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-secondary: theme('colors.grey.boulder');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
@@ -68,7 +74,7 @@
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
     /* Border Radius */
-    --border-radius-hr: theme('borderRadius.none'); ;
+    --border-radius-hr: theme('borderRadius.none');
 }
 
 [data-theme='hessenschau'] {
@@ -97,6 +103,8 @@
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: #006dc1;
     /* Subline */
@@ -130,8 +138,8 @@
     --font-weight-title: theme('fontWeight.normal');
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
-     /* Border */
-    --border-radius-hr: theme('borderRadius.3xl'); 
+    /* Border */
+    --border-radius-hr: theme('borderRadius.3xl');
 }
 
 [data-theme='hr-fernsehen'] {
@@ -156,6 +164,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: theme('colors.purple.jazzberry');
     /* Subline */
@@ -209,6 +219,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: theme('colors.blue.jellyBean');
     /* Subline */
@@ -263,6 +275,8 @@
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: theme('colors.blue.deepCerulean');
     /* Dachzeile */
     --color-topline: theme('colors.blue.deepCerulean');
     /* Subline */
@@ -317,6 +331,8 @@
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: theme('colors.blue.deepCerulean');
     /* Dachzeile */
     --color-topline: theme('colors.blue.deepCerulean');
     /* Subline */
@@ -369,6 +385,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: theme('colors.red.wellRead');
     /* Subline */
@@ -421,6 +439,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: theme('colors.blue.teal');
     /* Subline */
@@ -475,6 +495,8 @@
     --color-label-pm: var(--color-primary);
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: var(--color-primary);
     /* Subline */
@@ -527,10 +549,14 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Event */
+    --color-event-status: theme('colors.purple.disco');
+    /* Eventkalender */
+    --color-eventcalendar-primary: theme('colors.blue.turquoiseCerulian');
     /* Dachzeile */
     --color-topline: theme('colors.yellow.olive');
     /* Subline */
-    --color-subline: var(--color-topline);
+    --color-subline: theme('colors.yellow.olive');
     /* Link */
     --color-link: theme('colors.yellow.olive');
     /* Stage */
@@ -579,6 +605,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: theme('colors.red.paprika');
     /* Dachzeile */
     --color-topline: theme('colors.red.paprika');
     /* Subline */
@@ -632,6 +660,10 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Event */
+    --color-event-status: theme('colors.green.pineGreen');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: var(--color-primary);
     /* Subline */
@@ -685,6 +717,10 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Event */
+    --color-event-status: theme('colors.red.alizarinCrimson');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-primary);
     /* Dachzeile */
     --color-topline: theme('colors.green.eden');
     /* Subline */
@@ -715,7 +751,7 @@
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
     /* Border */
-    --border-radius-hr: theme('borderRadius.3xl'); 
+    --border-radius-hr: theme('borderRadius.3xl');
 }
 
 [data-theme='you-fm'] {
@@ -740,6 +776,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
+    /* Eventkalender */
+    --color-eventcalendar-primary: var(--color-link);
     /* Dachzeile */
     --color-topline: var(--color-link);
     /* Subline */

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -10,6 +10,7 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
+
 {{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">

package/src/stories/views/components/base/link.hbs

@@ -1,15 +1,3 @@
-{{#with this.link}}
-    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
-        class="sb-link{{#if ../_css}} {{../_css}}{{/if}} {{#if ../this.content.isFileDownload}} js-load{{/if}}{{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
-        {{#if ../_doNavigationTracking}}
-        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
-        {{/if}}
-        {{#if ../this.content.isFileDownload}}
-            {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
-        {{/if}}
-        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
-    >
-{{/with}}  
-        {{~ decorator_body ~}}   
-    </a>
+{{> components/base/link_open _clickLabelPrefix1=_clickLabelPrefix1 _clickLabelPrefix2=_clickLabelPrefix2 _clickLabelType=_clickLabelType _css=_css _doNavigationTracking=_doNavigationTracking _isAriaHidden=_isAriaHidden _isSelected=_isSelected _selectedCssClass=_selectedCssClass}}
+    {{~ decorator_body ~}}   
+</a>

package/src/stories/views/components/base/link_open.hbs

@@ -0,0 +1,13 @@
+{{#with this.link}}
+    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
+        class="sb-link js-load{{#if ../_css}} {{../_css}}{{/if}} {{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
+        {{#if ../_doNavigationTracking}}
+        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
+        {{/if}}
+        {{#if ../this.isFileDownload}}
+            {{#with ../this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
+        {{/if}}
+        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+    >
+{{/with}}  

package/src/stories/views/components/button/button_pseudo_v2.hbs

@@ -0,0 +1,12 @@
+
+<span
+    class='px-4 py-2.5 border flex items-center font-heading
+        {{inline-switch
+            _type
+            '["hollow","hollow-white","inverted"]'
+            '["text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
+        }}
+        {{#if _css}} {{_css}}{{/if}}'
+>
+    {{> @partial-block }}
+</span>

package/src/stories/views/components/button/button_v2.hbs

@@ -0,0 +1,7 @@
+<button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
+            _type
+            '["hollow","hollow-white","inverted"]'
+            '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
+        }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
+    {{> @partial-block }}
+</button>

package/src/stories/views/components/button/components/button_icon.hbs

@@ -0,0 +1 @@
+{{> components/base/image/icon _addClass=(appendToDefault _css "w-4 h-4 fill-inherit ") _icon=_icon _iconmap=_iconmap}}

package/src/stories/views/components/button/components/button_label.hbs

@@ -0,0 +1 @@
+<span class="{{#if _css}} {{_css}}{{/if}}">{{_label}}</span>

package/src/stories/views/components/button/components/button_pseudo_link.hbs

@@ -0,0 +1,3 @@
+{{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }} 
+</a>

package/src/stories/views/components/content_nav/content_nav_dropdown.hbs

@@ -14,7 +14,7 @@
             @resize.window="if(window.innerWidth > 767){contentNavDropdownIsOpen = false}; $dispatch('hr:global:resetinputAutoSuggest')"
          {{/if}}
     >
-        <span class="self-center w-full p-2 text-base leading-4 text-left">{{_buttonText}}</span>
+        <span class="self-center w-full px-2 pt-1 text-base leading-4 text-left">{{_buttonText}}</span>
         <div class="flex self-center w-auto h-full border-l border-content-nav">
             <span :class="{'hidden' : contentNavDropdownIsOpen}"
                   class="flex self-center px-3 py-3"

package/src/stories/views/components/content_nav/content_nav_item.hbs

@@ -23,7 +23,7 @@
         </span>
         
         <span>
-            {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2 inline" }} 
+            {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }} 
         </span>
 
     {{/decorator}} 

package/src/stories/views/components/event/artist.hbs

@@ -0,0 +1 @@
+<span class="font-bold uppercase">{{this.name}}</span>{{#with this.role}} | <span>{{this}}</span>{{/with}}

package/src/stories/views/components/event/calendar/event_calendar.hbs

@@ -0,0 +1,3 @@
+<div class="flex flex-col border-event-calendar-secondary border gap-x-4"> 
+    {{> @partial-block }}
+</div>

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

@@ -0,0 +1,161 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+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'
+
+<Meta
+    title="Komponenten/Teaser/Eventkalender/Komponenten"
+    parameters={{
+        layout: 'fullscreen',
+    }}
+    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"><div class="col-span-12">
+                ${Story()} 
+                </div></div></div>`
+        },
+    ]}
+/>
+
+export 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 })
+}
+
+export 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 })
+}
+
+export 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 })
+}
+
+export 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 })
+}
+
+# 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="Heading"
+        argTypes={{
+            title: {
+                description: 'Überschrift',
+                table: {
+                    defaultValue: {
+                        summary: 'Eventkalender',
+                    },
+                },
+            },
+        }}
+        args={{ title: 'Eventkalender' }}
+    >
+        {TemplateEventCalendarHeading.bind({})}
+    </Story>
+    <Story
+        name="Navigation"
+        args={teaserEventCalendar100Serif.logicItem.includeModel.eventCalendar.months}
+    >
+        {TemplateEventCalendarNav.bind({})}
+    </Story>
+    <Story
+        name="Inhalt"
+        argTypes={{
+            statusDescriptionForLabelShort: {
+                control: {
+                    type: 'select',
+                    labels: {
+                        event_status_cancelled: 'Abgesagt!',
+                        event_status_rescheduled: 'Verschoben!',
+                        event_status_moved_online_short: 'Als Livestream',
+                        event_status_gets_update: 'Wird aktualisiert!',
+                    },
+                    options: [
+                        'event_status_cancelled',
+                        'event_status_rescheduled',
+                        'event_status_moved_online_short',
+                        'event_status_gets_update',
+                    ],
+                },
+                description: 'Status des Events',
+                table: {
+                    defaultValue: {
+                        summary: 'event_status_cancelled',
+                    },
+                },
+            },
+        }}
+        args={{ ...eventCalendarEventTeaserData, _withConcertInfo: false, _showTeaser: true }}
+    >
+        {TemplateEventCalendarContent.bind({})}
+    </Story>
+    <Story name="Footer" args={eventCalendarFooterData}>
+        {TemplateEventCalendarFooter.bind({})}
+    </Story>
+</Preview>

package/src/stories/views/components/event/calendar/event_calendar_content.hbs

@@ -0,0 +1,18 @@
+<div class="js-fr-content">
+    {{#each this.months}}
+        {{#each this.days}}
+            {{#each this.instants}}
+                {{#unless this.isDateInstant}}
+                    {{> components/event/calendar/event_calendar_event_teaser _showTeaser=../this.isFirstAvailable _withConcertInfo=../../../_withConcertInfo}}
+                {{/unless}}
+            {{/each}}
+        {{/each}}
+    {{/each}}
+    {{#unless this.hasFutureEventsFromNow}}
+        <article class="p-4 js-fr-error-target">
+            <p class="">
+                {{loca "event_calendar_no_events_available"}}
+            </p>
+        </article>
+    {{/unless}}
+</div>

package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -0,0 +1,60 @@
+<article id="{{this.startDate.htmlDate}}" class="flex col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
+    <div class="border-none h-full">
+        <div class="relative">
+            <div class="flex flex-col items-stretch sm:flex-row">
+                <div class="flex basis-full w-full order-2 py-1 sm:basis-7/12 sm:w-7/12 sm:order-1">
+                    <div class="flex flex-col  basis-2/12 w-2/12 align-top items-center justify-center px-4 py-3  border-dotted border-r border-event-calendar-secondary">
+                        {{#with this.startDate}}
+                            <span class='text-base font-serif'>{{this.weekdayNameShort}}</span>
+                            <span class='text-3xl font-serif font-bold'>{{this.day}}</span>
+                            <span class='text-base font-serif'>{{this.monthNameShort}}</span>
+                        {{/with}}
+                    </div>
+                    <div class="flex flex-col items-start basis-10/12 w-10/12">
+                        <div class="absolute top-0 left-0 w-full sm:static">
+                            <div class="ar-4-3 sm:ar-auto">
+                                <header class="absolute bottom-0 left-0 p-4 sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
+                                    {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
+                                        {{#> components/teaser/components/teaser_header}}
+                                            {{#with this.label}}
+                                                {{#> components/label/label_group}}
+                                                    {{> components/label/label_test _type=this.type _text=(loca this.loca) _css="mr-2"}}
+                                                    {{#if ../this.hasStatus}}
+                                                        {{> components/event/event_status _status=(loca ../this.statusDescriptionForLabelShort)}} 
+                                                    {{/if}}
+                                                {{/components/label/label_group}}
+                                            {{/with~}}
+                                            {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
+                                                {{#if this.topline}}
+                                                    {{> components/teaser/components/teaser_topline _text=this.topline}}
+                                                {{/if}}
+                                                {{> components/teaser/components/teaser_title_test _text=this.title _css="text-2xl"}}
+                                                {{> components/event/event_tags this.eventtags}} 
+                                            {{/components/teaser/components/teaser_headline}}
+                                        {{/components/teaser/components/teaser_header}} 
+                                    {{/decorator}}
+                                </header>
+                            </div>
+                        </div>
+                        {{> components/event/event_details this}}
+                        {{#with this.ticketLink}}
+                            {{> components/event/event_ticket_button}}
+                        {{/with}}
+                    </div> 
+                </div>
+                <figure class="basis-full w-full order-1 sm:basis-5/12 sm:w-5/12 sm:order-2 ar-4-3 sm:ar-16-9">
+                    {{> components/base/image/responsive_image this.image _type="event-teaser" _variant="100" _addClass="w-full"}}
+                </figure>
+            </div>
+        </div>
+        {{#if _withConcertInfo}}
+            {{#with this.concertInfo}}
+                {{#unless this.isEmpty}}
+                <div class="flex flex-col grow-0 shrink basis-full py-7 w-full border-event-calendar-secondary border-t border-dotted">
+                    {{> components/event/concert_info}}
+                </div>
+                {{/unless}}
+            {{/with}}
+        {{/if}}
+    </div>
+</article>