hr-design-system-handlebars 1.1.4 → 1.1.6

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

@@ -38,7 +38,7 @@ import dataTeserIndextext50Accented from './fixtures/teaser_indextext_50_accente
     }}
     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>`
         },
@@ -53,47 +53,59 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return teaser({ brand, ...args })
 }
 
-# Indextext-Teaser 
+# Indextext-Teaser
 
 ## Beschreibung
 
-
 ## Props
 
 Die Indextext-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
 
 <ul>
-    <li><b>title</b></li>
-    <li><b>shorttext</b></li>
-    <li><b>teaserSize</b></li>
-    <li><b>teaserType</b></li>
+    <li>
+        <b>title</b>
+    </li>
+    <li>
+        <b>shorttext</b>
+    </li>
+    <li>
+        <b>teaserSize</b>
+    </li>
+    <li>
+        <b>teaserType</b>
+    </li>
 </ul>
 
-
 ## Verwendung
 
 Die Indextext-Teaser-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/teaser/teaser_indextext}}    
+{{> components/teaser/teaser_indextext}}
 ```
 
-
 <Preview withToolbar>
-    <Story name="Text mit Hintergrund 100" args={dataTeserIndextext100Accented.logicItem.includeModel}>
+    <Story
+        name="Text mit Hintergrund 100"
+        args={dataTeserIndextext100Accented.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
     <Story name="Text mit Box 100" args={dataTeserIndextext100Boxed.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
     <Story
-        name="Hintergrund orange 100" args={dataTeserIndextext100Highlighted.logicItem.includeModel}
+        name="Hintergrund orange 100"
+        args={dataTeserIndextext100Highlighted.logicItem.includeModel}
     >
         {Template.bind({})}
     </Story>
-    <Story name="Text mit Hintergrund 50" args={dataTeserIndextext50Accented.logicItem.includeModel}>
+    <Story
+        name="Text mit Hintergrund 50"
+        args={dataTeserIndextext50Accented.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
 </Preview>
 
-<ArgsTable story="Text mit Hintergrund 100" />
+<ArgsTable story="Text mit Hintergrund 100" />

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

@@ -1,24 +1,24 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 
 import teaser from './teaser_logic.hbs'
-import index_site from '../fixtures/teaser_index.json' 
+import index_site from '../fixtures/teaser_index.json'
 
-<Meta   title="Komponenten/Teaser/Logic"
-        parameters={{
-            layout: 'fullscreen',
-        }}
-        argTypes={{
-        }} 
-        decorators={[
-            (Story) => {
-                return `<div class="grid bg-white grid-page">   
-                            <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">                            
+<Meta
+    title="Komponenten/Teaser/Logic"
+    parameters={{
+        layout: 'fullscreen',
+    }}
+    argTypes={{}}
+    decorators={[
+        (Story) => {
+            return `<div class="grid bg-white grid-page">   
+                            <div class="grid grid-cols-12 py-6 bg-white sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-6">                            
                                 ${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!
@@ -33,7 +33,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 Ein toller Einleitungstext für unsere `Teaser` Komponente:
 
 <Preview withToolbar>
-    <Story  name="logic" args={index_site}>
-        {Template.bind({})} 
-    </Story> 
+    <Story name="logic" args={index_site}>
+        {Template.bind({})}
+    </Story>
 </Preview>

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

@@ -9,7 +9,7 @@ import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
     parameters={{
         layout: 'fullscreen',
         chromatic: {
-            diffThreshold: 0.5
+            diffThreshold: 0.5,
         },
     }}
     argTypes={{
@@ -28,7 +28,7 @@ import teserPosterMdLabel from './fixtures/teaser_poster_md_label.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>`
         },
@@ -43,7 +43,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return teaser({ brand, ...args })
 }
 
-# Poster-Teaser 
+# Poster-Teaser
 
 ## Beschreibung
 
@@ -60,40 +60,59 @@ Inhalt dieses spans: Zusatztext + ": " + Titel
 
 Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
 
-
 ## Sub-Komponenten
 
 Die Poster-Teaser-Komponente inkludiert folgende Komponenten:
 
 <ul>
-    <li>components/base/image/<b>responsive_image</b></li>
-    <li>components/base/<b>link</b></li>
-    <li>components/teaser/components/<b>teaser_heading</b></li>
+    <li>
+        components/base/image/<b>responsive_image</b>
+    </li>
+    <li>
+        components/base/<b>link</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser_heading</b>
+    </li>
 </ul>
 
-
 ## Props
 
 Die Poster-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
 
 <ul>
-    <li><b>topline</b></li>
-    <li><b>title</b></li>
-    <li><b>teaserSize</b></li>
-    <li><b>teaserType</b></li>
-    <li><b>teaserImage</b></li>
-    <li><b>content.imageVariant</b></li>
-    <li><b>isSerifHeading</b></li>
-    <li><b>link.readMoreText.readMoreLong</b></li>
+    <li>
+        <b>topline</b>
+    </li>
+    <li>
+        <b>title</b>
+    </li>
+    <li>
+        <b>teaserSize</b>
+    </li>
+    <li>
+        <b>teaserType</b>
+    </li>
+    <li>
+        <b>teaserImage</b>
+    </li>
+    <li>
+        <b>content.imageVariant</b>
+    </li>
+    <li>
+        <b>isSerifHeading</b>
+    </li>
+    <li>
+        <b>link.readMoreText.readMoreLong</b>
+    </li>
 </ul>
 
-
 ## Verwendung
 
 Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/teaser/teaser_poster}}    
+{{> components/teaser/teaser_poster}}
 ```
 
 <Preview withToolbar>
@@ -108,4 +127,4 @@ Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     </Story>
 </Preview>
 
-<ArgsTable story="Poster 50" />
+<ArgsTable story="Poster 50" />

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

@@ -6,7 +6,7 @@
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
             {{/unless}}
-            <div class="col-full lg:col-main lg:px-8 relative">
+            <div class="col-full lg:col-main lg:px-9.5 relative">
                 <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
                     <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
                         {{#if this.isWide}}

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

@@ -15,10 +15,10 @@
         </figure>
         {{#if this.displayTeaserBodyAsImageOverlay}}
             {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-                <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
+                <div class="basis-1/12 flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
                     {{> components/event/instant_dates}}
                 </div>
-                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'py-4 md:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'py-4 md:px-4')}}
+                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
             {{/decorator}}
         {{else}}
             {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}

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

@@ -22,10 +22,10 @@ import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.json'
     title="Komponenten/Teaser/Standard"
     parameters={{
         layout: 'fullscreen',
-         chromatic: {
+        chromatic: {
             viewports: [360, 1024],
-            diffThreshold: 0.5
-        }
+            diffThreshold: 0.5,
+        },
     }}
     argTypes={{
         teaserSize: {
@@ -43,7 +43,7 @@ import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.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>`
         },
@@ -58,35 +58,44 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return teaser({ brand, ...args })
 }
 
-# Standard-Teaser 
+# Standard-Teaser
 
 ## Beschreibung
 
-
 Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
 
-<b>Standard Hero:</b> <br/>
-    Desktop = Text unter dem Bild <br/>
-    Mobile = Text unter dem Bild <b>ohne</b> Teasertext <br/>
+<b>Standard Hero:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild <b>ohne</b> Teasertext <br />
 
-<b>Standard 100%, 50%, 33%:</b> <br/>
-    Desktop = Text unter dem Bild <br/>
-    Mobile = Text unter dem Bild ohne Teasertext <br/>
+<b>Standard 100%, 50%, 33%:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild ohne Teasertext <br />
 
-<b>Standard 25%:</b> <br/>
-    Desktop = Text unter dem Bild ohne Teasertext <br/>
-    Mobile =  Bild(1x1) neben Text ohne Teasertext <br/>
+<b>Standard 25%:</b> <br />
+Desktop = Text unter dem Bild ohne Teasertext <br />
+Mobile = Bild(1x1) neben Text ohne 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>
+    <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
@@ -94,7 +103,7 @@ Die Standard-Teaser-Komponente inkludiert folgende Komponenten:
 Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/teaser/teaser_standard}}    
+{{> components/teaser/teaser_standard}}
 ```
 
 <Preview withToolbar>
@@ -119,16 +128,19 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Standard 100 mit externem Link" args={teaser100Link.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-        <Story name="Standard 100 mit Sendungsdokument" args={teaser100Program.logicItem.includeModel}>
+    <Story name="Standard 100 mit Sendungsdokument" args={teaser100Program.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
     <Story name="Standard 50" args={teaser50Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Standard 50 ohne Teaserbild" args={teaser50SerifWithoutTeaserImage.logicItem.includeModel}>
+    <Story
+        name="Standard 50 ohne Teaserbild"
+        args={teaser50SerifWithoutTeaserImage.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
-        <Story name="Standard 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
+    <Story name="Standard 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
     <Story name="Standard 33" args={teaser33Serif.logicItem.includeModel}>
@@ -140,7 +152,10 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Standard 25" args={teaser25Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Standard 25 ohne Teaserbild" args={teaser25SerifWithoutTeaserimage.logicItem.includeModel}>
+    <Story
+        name="Standard 25 ohne Teaserbild"
+        args={teaser25SerifWithoutTeaserimage.logicItem.includeModel}
+    >
         {Template.bind({})}
     </Story>
     <Story name="Standard 25 mit externem Link" args={teaser25Link.logicItem.includeModel}>
@@ -153,4 +168,3 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
         {Template.bind({})}
     </Story>
 </Preview>
-

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

@@ -17,8 +17,8 @@ import teaser25live from './fixtures/teaser_standard_25_serif_live.json'
     parameters={{
         layout: 'fullscreen',
         chromatic: {
-            diffThreshold: 0.5
-        }
+            diffThreshold: 0.5,
+        },
     }}
     argTypes={{
         teaserSize: {
@@ -36,7 +36,7 @@ import teaser25live from './fixtures/teaser_standard_25_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_standard_event.stories.mdx

@@ -15,8 +15,8 @@ import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_10
     parameters={{
         layout: 'fullscreen',
         chromatic: {
-            diffThreshold: 0.5
-        }
+            diffThreshold: 0.5,
+        },
     }}
     argTypes={{
         teaserSize: {
@@ -34,7 +34,7 @@ import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_10
     }}
     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/tailwind.config.js

@@ -111,6 +111,7 @@ module.exports = {
                 '-1000': '-1000',
             },
             spacing: {
+                '9.5': '2.375rem',
                 '22': '5.5rem',
                 '135': '33.75rem',
                 'stage': '56%',