hr-design-system-handlebars 1.1.4 → 1.1.6

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

@@ -1,4 +1,4 @@
-<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 }">
+<article id="{{this.startDate.htmlDate}}" class="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">
@@ -13,7 +13,7 @@
                     <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">
+                                <header class="absolute bottom-0 left-0 p-4 w-full 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}}

package/src/stories/views/components/event/filtererDs.feature.js

@@ -6,19 +6,23 @@ require('zepto-modules/callbacks')
 require('zepto-modules/deferred')
 
 const Filterer = (context) => {
-    const { options } = context
-    const { element: rootElement } = context
-    const contentTargetClass = '.js-fr-content'
-    const errorTargetClass = 'js-fr-error-target'
-    const errorClass = 'js-fr-error'
-    const reloadTriggerClass = 'js-fr-reload-trigger'
-    const targetClass = 'js-fr-target'
-    const triggerClass = 'js-fr-trigger'
-    const triggerDomNodes = hr$(`.${triggerClass}`, rootElement)
+    const { options } = context,
+        { element: rootElement } = context,
+        pushToBrowserHistory = options.pushToBrowserHistory || false,
+        loadingCssTrigger = options.loadingCssTrigger || 'is-loading',
+        hiddenElementCssTrigger = options.hiddenElementCssTrigger || 'hidden',
+        navItemSelectedCssTrigger = options.navItemSelectedCssTrigger || 'selected',
+        contentTargetClass = '.js-fr-content',
+        errorTargetClass = 'js-fr-error-target',
+        errorClass = 'js-fr-error',
+        reloadTriggerClass = 'js-fr-reload-trigger',
+        targetClass = 'js-fr-target',
+        triggerClass = 'js-fr-trigger',
+        triggerDomNodes = hr$(`.${triggerClass}`, rootElement),
+        errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
+        errorDomNodes = hr$(`.${errorClass}`),
+        contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
     let targetDomNodes = hr$(`.${targetClass}`, rootElement)
-    const errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement)
-    const errorDomNodes = hr$(`.${errorClass}`)
-    const contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
 
     const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
@@ -40,13 +44,13 @@ const Filterer = (context) => {
             }
         }
 
-        if (
-            !rootElement.classList.contains('-excerpt') &&
-            !!(window.history && window.history.pushState)
-        ) {
+        if (pushToBrowserHistory && !!(window.history && window.history.pushState)) {
             listen('popstate', handlePopstate, window)
             //initial state ersetzen so dass es ein rückkehrpunkt gibt
-            const selectedTrigger = hr$('.' + triggerClass + '.-selected', rootElement)
+            const selectedTrigger = hr$(
+                `.${triggerClass}.${navItemSelectedCssTrigger}`,
+                rootElement
+            )
             history.replaceState(
                 {
                     sel: triggerClass,
@@ -66,7 +70,7 @@ const Filterer = (context) => {
         clearSelected()
 
         if (!forceReset) {
-            e.currentTarget.classList.add('-selected')
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -76,10 +80,10 @@ const Filterer = (context) => {
     }
 
     const clearSelected = function () {
-        let triggerDomNodes = hr$(`.${triggerClass}.-selected`, rootElement)
+        let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
         triggerDomNodes.forEach(function (triggerDomNode) {
-            triggerDomNode.classList.remove('-selected')
+            triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }
 
@@ -108,10 +112,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersById(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -127,10 +131,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersStartsWithId(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -146,7 +150,7 @@ const Filterer = (context) => {
             }
         }
 
-       /* if (countXTClick) {
+        /* if (countXTClick) {
             pi(
                 xtpage +
                     '&pchap=' +
@@ -163,11 +167,11 @@ const Filterer = (context) => {
     }
     const removeErrors = function () {
         if (errorTargetDomNodes.length > 0) {
-            errorTargetDomNodes[0].classList.add('hidden')
+            errorTargetDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
 
         if (errorDomNodes.length > 0) {
-            errorDomNodes[0].classList.add('hidden')
+            errorDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
     }
     const loadContent = function (currentTarget) {
@@ -184,7 +188,7 @@ const Filterer = (context) => {
             cache: true,
             beforeSend: function () {
                 console.log('before load')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             },
         })
             .done(function (data, status, xhr) {
@@ -198,7 +202,7 @@ const Filterer = (context) => {
                         $(contentTargetClass, rootElement).append(data)
 
                         targetDomNodes = hr$('.' + targetClass, rootElement)
-                        $(contentTargetClass, rootElement).removeClass('-isLoading')
+                        $(contentTargetClass, rootElement).removeClass(loadingCssTrigger)
                         $(currentTarget, rootElement)
                             .closest('.' + reloadTriggerClass)
                             .removeClass(reloadTriggerClass)
@@ -210,7 +214,7 @@ const Filterer = (context) => {
             })
             .fail(function (data, status, xhr) {
                 console.log('load error')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             })
     }
     const createInlineUrl = function (element) {
@@ -229,7 +233,7 @@ const Filterer = (context) => {
             )[0]
             doFilter(target, false, false)
             clearSelected()
-            target.classList.add('-selected')
+            target.classList.add(navItemSelectedCssTrigger)
         }
     }
     const initial = function () {
@@ -242,16 +246,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id') !== crit) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -267,16 +271,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id').indexOf(crit) !== 0) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -289,7 +293,7 @@ const Filterer = (context) => {
     const displayErrorTarget = function () {
         if (targetDomNodes.length >= 1) {
             if (errorTargetDomNodes.length > 0) {
-                errorTargetDomNodes[0].classList.remove('hidden')
+                errorTargetDomNodes[0].classList.remove(hiddenElementCssTrigger)
             }
         }
     }

package/src/stories/views/components/grid/grid_group_highlight.hbs

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page mt-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

package/src/stories/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-9.5 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

package/src/stories/views/components/grid/grid_group_wrapper_classes.hbs

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

package/src/stories/views/components/teaser/cluster/teaser_cluster.stories.mdx

@@ -19,21 +19,20 @@ import clusterTeaserImage33 from '../fixtures/cluster_teaser_33_image.json'
 import PodcastChannelClusterTeaser from '../fixtures/cluster_teaser_Podcast_Channel.json'
 import clusterTeaserOrdered33LongTitle from '../fixtures/cluster_teaser_33_long_title.json'
 
-<Meta   title="Komponenten/Teaser/Cluster"
-        parameters={{
-            layout: '',
-        }}
-        argTypes={{
-        }}
-            decorators={[
+<Meta
+    title="Komponenten/Teaser/Cluster"
+    parameters={{
+        layout: '',
+    }}
+    argTypes={{}}
+    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">  
+            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>`
         },
     ]}
-        
-        />
+/>
 
 export const Template = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -43,7 +42,6 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return cluster({ brand, ...args })
 }
 
-
 <Preview withToolbar>
     <Story name="Kurzmeldungen 100" args={clusterTeaser100}>
         {Template.bind({})}
@@ -96,4 +94,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Meistgeklickt-Box mit langem Titel" args={clusterTeaserOrdered33LongTitle}>
         {Template.bind({})}
     </Story>
-</Preview>
+</Preview>

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx

@@ -42,7 +42,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
                 expanded: false,
                 disable: false,
             },
-        },        
+        },
         teaserSize: {
             control: {
                 type: 'select',
@@ -58,7 +58,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
     }}
     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">  
+            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>`
         },
@@ -77,8 +77,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 
 ## Beschreibung
 
-
-<Preview withToolbar>    
+<Preview withToolbar>
     <b>Liste</b>
     <Story name="Liste" args={contentNavList}>
         {Template.bind({})}
@@ -115,4 +114,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Dropdown mit Subgruppen" args={contentNavDropdown_subgroups}>
         {Template.bind({})}
     </Story>
-</Preview>
+</Preview>

package/src/stories/views/components/teaser/group_teaser/group.stories.mdx

@@ -1,19 +1,18 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 
-
-import groupTeaser from "./group_teaser.hbs";
-import groupTeaserAccented from "./group_teaser_accented.hbs"; 
-import teaserGroup100 from '../fixtures/teaser_group_100.json' 
+import groupTeaser from './group_teaser.hbs'
+import groupTeaserAccented from './group_teaser_accented.hbs'
+import teaserGroup100 from '../fixtures/teaser_group_100.json'
 import teaserGroupRelatedContent100 from '../fixtures/teaser_group_related_content_100.json'
-import teaserGroup100highlight from '../fixtures/teaser_group_100_highlight.json' 
+import teaserGroup100highlight from '../fixtures/teaser_group_100_highlight.json'
 import teaserGroup100highlight2 from '../fixtures/teaser_group_100_highlight_2.json'
- 
-import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentnav.json' 
+
+import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentnav.json'
 
 <Meta
-  title="Komponenten/Teaser/Gruppen"
-  argTypes={{
-    teaserSize: {
+    title="Komponenten/Teaser/Gruppen"
+    argTypes={{
+        teaserSize: {
             control: {
                 type: 'select',
                 options: ['100', '66', '50', '33', '25'],
@@ -25,69 +24,62 @@ import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentnav.js
                 },
             },
         },
-  }}
-  parameters={{
+    }}
+    parameters={{
         layout: 'fullscreen',
-  }}
-  decorators={[
-    (Story) => {
-        return `<div class="grid my-5 grid-page">
-                  <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 md:gap-y-14 gap-y-6">
+    }}
+    decorators={[
+        (Story) => {
+            return `<div class="grid my-5 grid-page">
+                  <div class="grid grid-cols-12 py-6 bg-white sm:px-9.5 col-full sm:col-main gap-x-6 md:gap-y-14 gap-y-6">
                     ${Story()}
                   </div>
                 </div>`
-    },
-  ]}
+        },
+    ]}
 />
 
 export const groupTeaserTemplate = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return groupTeaser({ text, ...args });
-};
-
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return groupTeaser({ text, ...args })
+}
 
 export const groupTeaserAccentedTemplate = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return groupTeaserAccented({ text, ...args });
-};
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return groupTeaserAccented({ text, ...args })
+}
 
 # Button
 
 Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
 
 <Preview withToolbar>
-  <Story
-    name="100% Gruppe mit Überschrift"
-    args={teaserGroup100.includeModel} 
-  >
-    {groupTeaserTemplate.bind({})}
-  </Story>
-  <Story
-    name="100% Gruppe mit Überschrift Highlight 1"
-    args={teaserGroup100highlight.includeModel} 
-  >
-    {groupTeaserTemplate.bind({})}
-  </Story>
-  <Story
-    name="100% Gruppe mit Überschrift Highlight 2"
-    args={teaserGroup100highlight2.includeModel} 
-  >
-    {groupTeaserTemplate.bind({})}
-  </Story>
-  <Story
-    name="100% Gruppe mit Content Navigation Aufklapp"
-    args={teaserGroup100contentnav.includeModel} 
-  >
-    {groupTeaserAccentedTemplate.bind({})}
-  </Story>
-  <Story
-    name="100% Gruppe mit Related Content"
-    args={teaserGroupRelatedContent100.includeModel}   
-  >
-    {groupTeaserTemplate.bind({})}
-  </Story>
+    <Story name="100% Gruppe mit Überschrift" args={teaserGroup100.includeModel}>
+        {groupTeaserTemplate.bind({})}
+    </Story>
+    <Story
+        name="100% Gruppe mit Überschrift Highlight 1"
+        args={teaserGroup100highlight.includeModel}
+    >
+        {groupTeaserTemplate.bind({})}
+    </Story>
+    <Story
+        name="100% Gruppe mit Überschrift Highlight 2"
+        args={teaserGroup100highlight2.includeModel}
+    >
+        {groupTeaserTemplate.bind({})}
+    </Story>
+    <Story
+        name="100% Gruppe mit Content Navigation Aufklapp"
+        args={teaserGroup100contentnav.includeModel}
+    >
+        {groupTeaserAccentedTemplate.bind({})}
+    </Story>
+    <Story name="100% Gruppe mit Related Content" args={teaserGroupRelatedContent100.includeModel}>
+        {groupTeaserTemplate.bind({})}
+    </Story>
 </Preview>
 
 <ArgsTable story="main" />

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

@@ -7,27 +7,26 @@ import episodeJson50 from '../fixtures/teaser_podcast_50.json'
 import playlistJson100 from '../fixtures/teaser_podcast_playlist.json'
 import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
 
-<Meta   title="Komponenten/Teaser/Podcast"
-        parameters={{
-            chromatic: {
-                viewports: [360, 768, 1024],
-                diffThreshold: 0.5
-            },
-            layout: 'fullscreen',
-        }}
-        argTypes={{
-        }} 
-        decorators={[
+<Meta
+    title="Komponenten/Teaser/Podcast"
+    parameters={{
+        chromatic: {
+            viewports: [360, 768, 1024],
+            diffThreshold: 0.5,
+        },
+        layout: 'fullscreen',
+    }}
+    argTypes={{}}
+    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="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">
                             ${Story()} 
                         </div>
                     </div>`
-        }
-    
-    ]} 
-        />
+        },
+    ]}
+/>
 
 export const episodeTemplate = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -45,18 +44,17 @@ export const playlistTemplate = (args, { globals: { customConditionalToolbar } }
     return podcastPlaylist({ brand, ...args })
 }
 
-
-<Preview withToolbar>    
-    <Story  name="100% Episode Player" args={episodeJson.logicItem.includeModel}>
-        {episodeTemplate.bind({})} 
+<Preview withToolbar>
+    <Story name="100% Episode Player" args={episodeJson.logicItem.includeModel}>
+        {episodeTemplate.bind({})}
+    </Story>
+    <Story name="50% Episode Player" args={episodeJson50.logicItem.includeModel}>
+        {episodeTemplate.bind({})}
     </Story>
-    <Story  name="50% Episode Player" args={episodeJson50.logicItem.includeModel}>
-        {episodeTemplate.bind({})} 
-    </Story>  
-    <Story  name="100% Channel Player" args={playlistJson100.logicItem.includeModel}>
-        {playlistTemplate.bind({})} 
+    <Story name="100% Channel Player" args={playlistJson100.logicItem.includeModel}>
+        {playlistTemplate.bind({})}
     </Story>
-        <Story  name="50% Channel Player" args={playlistJson50.logicItem.includeModel}>
-        {playlistTemplate.bind({})} 
+    <Story name="50% Channel Player" args={playlistJson50.logicItem.includeModel}>
+        {playlistTemplate.bind({})}
     </Story>
-</Preview>
+</Preview>

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

@@ -21,7 +21,7 @@ import teaser50Download from './fixtures/teaser_alternative_50_serif_download.js
         layout: 'fullscreen',
         chromatic: {
             viewports: [360, 1024],
-            diffThreshold: 0.5
+            diffThreshold: 0.5,
         },
     }}
     argTypes={{
@@ -40,7 +40,7 @@ import teaser50Download from './fixtures/teaser_alternative_50_serif_download.js
     }}
     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">  
+            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>`
         },
@@ -123,10 +123,16 @@ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Alternativ Hero mit Label" args={heroTeaserWithLabel.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Alternativ Hero mit externen Link Dokument" args={heroTeaserLink.logicItem.includeModel}>
+    <Story
+        name="Alternativ Hero mit externen Link Dokument"
+        args={heroTeaserLink.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
-    <Story name="Alternativ Hero mit Sendungsdokument" args={heroTeaserProgram.logicItem.includeModel}>
+    <Story
+        name="Alternativ Hero mit Sendungsdokument"
+        args={heroTeaserProgram.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
     <b>Alternativ 100%</b>
@@ -141,10 +147,13 @@ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Alternativ 50 ohne Teaserbild" args={teaser50WithoutTeaserImage.logicItem.includeModel}>
+    <Story
+        name="Alternativ 50 ohne Teaserbild"
+        args={teaser50WithoutTeaserImage.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
-        <b>Alternativ 50% mit externem Link</b>
+    <b>Alternativ 50% mit externem Link</b>
     <Story name="Alternativ 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
         {Template.bind({})}
     </Story>

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

@@ -37,7 +37,7 @@ import teaser50_live from './fixtures/teaser_alternative_50_serif_live.json'
     }}
     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">  
+            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>`
         },

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

@@ -24,7 +24,7 @@ import teaserEventCalendarWithNoFutureEventsData from './fixtures/teaser_event_c
     }}
     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">  
+            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>`
         },