hr-design-system-handlebars 1.1.3 → 1.1.5

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%',