hr-design-system-handlebars 1.1.3 → 1.1.5

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>`
         },

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}}