npm - hr-design-system-handlebars - Versions diffs - 0.47.0 → 0.47.1 - Mend

hr-design-system-handlebars 0.47.0 → 0.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,15 @@
+# v0.47.1 (Tue May 24 2022)
+#### 🐛 Bug Fix
+- add poster-teaser [#235](https://github.com/mumprod/hr-design-system-handlebars/pull/235) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+#### Authors: 1
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+---
 # v0.47.0 (Fri May 20 2022)
 #### 🚀 Enhancement

package/dist/assets/index.css CHANGED Viewed

@@ -1569,6 +1569,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
+.mb-7 {
+    margin-bottom: 1.75rem;
+}
 .mr-4 {
     margin-right: 1rem;
 }
@@ -1902,6 +1905,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-divide-opacity: 1;
     border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
 }
+.self-end {
+    -ms-flex-item-align: end;
+        align-self: flex-end;
+}
+.self-center {
+    -ms-flex-item-align: center;
+        align-self: center;
+}
 .overflow-hidden {
     overflow: hidden;
 }
@@ -1972,6 +1983,10 @@ Ensure the default browser behavior of the `hidden` attribute.
 .border-r {
     border-right-width: 1px;
 }
+.border-white {
+    --tw-border-opacity: 1;
+    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+}
 .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgba(229, 231, 235, var(--tw-border-opacity));
@@ -1980,10 +1995,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-border-opacity: 1;
     border-color: rgba(0, 82, 147, var(--tw-border-opacity));
 }
-.border-white {
-    --tw-border-opacity: 1;
-    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-}
 .bg-red-200 {
     --tw-bg-opacity: 1;
     background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -2075,10 +2086,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.bg-gradient-to-t {
+    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--tw-gradient-stops)));
+    background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
 .from-purple-50 {
     --tw-gradient-from: #faf5ff;
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0));
 }
+.from-black {
+    --tw-gradient-from: #000000;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
+}
 .to-purple-100 {
     --tw-gradient-to: #f3e8ff;
 }
@@ -2132,6 +2151,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
 .px-3\.5 {
     padding-left: 0.875rem;
     padding-right: 0.875rem;
@@ -2144,10 +2167,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }
-.px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
 .py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
@@ -2206,6 +2225,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .text-left {
     text-align: left;
 }
+.text-center {
+    text-align: center;
+}
 .align-top {
     vertical-align: top;
 }

package/dist/views/components/teaser/components/teaser_comments.hbs CHANGED Viewed

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
+        {{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
             <span class="text-toplineColor">{{../../this.commentNumber}}</span>

package/dist/views/components/teaser/components/teaser_topline.hbs CHANGED Viewed

@@ -1,5 +1,5 @@
 <span
-    class="leading-5.5 pt-px block text-base text-toplineColor font-heading"
+    class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
     aria-label="{{readMore}}: {{text}}"
 >
     {{text}}

package/dist/views/components/teaser/teaser_poster.hbs ADDED Viewed

@@ -0,0 +1,13 @@
+<article class="relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teasersize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="ar-1-1">
+        {{~> components/base/image/responsive_image this.teaserImage type="poster" variant=this.content.imageVariant noDelay=../_noDelay addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+    </figure>
+    <div class="absolute flex justify-center w-full h-full ar-1-1 bg-gradient-to-t from-black rounded-br-3xl">
+        <div class="self-center block mx-4 text-center text-white">
+            {{> components/teaser/components/teaser_heading headlineTag="h2" isPosterTeaser=true size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
+        </div>
+    </div>
+    {{#>components/base/link css="absolute flex w-full h-full justify-center" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teasersize clickLabelPrefix2="mediaLink" }}
+        <button class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</button>
+    {{/components/base/link}}
+</article>

package/package.json CHANGED Viewed

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.47.0",
+    "version": "0.47.1",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -207,5 +207,34 @@
                 }
             ]
         }
-    }
+    },
+    "poster_1":{
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "https://picsum.photos/id/189/480/480",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1010px) 960px, 100vw",
+                    "srcset": "https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"
+                }
+            ]
+        }
+    },
+    "poster_2":{
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "https://picsum.photos/id/164/480/480",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1010px) 960px, 100vw",
+                    "srcset": "https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"
+                }
+            ]
+        }
+    }
 }

package/src/assets/fixtures/teaser/teaser_poster_lg.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teasersize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.readMoreText.readMoreLong",
+            "@->value": "Zum Artikel"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_1"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_1"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_poster_md.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teasersize",
+            "@->value": "33"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.readMoreText.readMoreLong",
+            "@->value": "Zum Artikel"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_1"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_1"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_poster_md_label.json ADDED Viewed

@@ -0,0 +1,74 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teasersize",
+            "@->value": "33"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.title",
+            "@->value": "Liveticker ausm Urlaub"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.readMoreText.readMoreLong",
+            "@->value": "Zum Ticker"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_2"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "poster_2"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "byline.bylineSsi",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "byline.bylineText",
+                        "@->value": ""
+                    }
+                ]
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "byline.bylineSsi",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "byline.bylineText",
+                        "@->value": ""
+                    }
+                ]
+            }
+        }
+    ]
+}

package/src/stories/views/components/teaser/components/teaser_comments.hbs CHANGED Viewed

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
+        {{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
             <span class="text-toplineColor">{{../../this.commentNumber}}</span>

package/src/stories/views/components/teaser/components/teaser_topline.hbs CHANGED Viewed

@@ -1,5 +1,5 @@
 <span
-    class="leading-5.5 pt-px block text-base text-toplineColor font-heading"
+    class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
     aria-label="{{readMore}}: {{text}}"
 >
     {{text}}

package/src/stories/views/components/teaser/fixtures/teaser_poster_lg.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"teasersize":"50"}}}

package/src/stories/views/components/teaser/fixtures/teaser_poster_md.json ADDED Viewed

@@ -0,0 +1 @@

package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label.json ADDED Viewed

@@ -0,0 +1 @@

+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"},"label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"","bylineText":""}}}},"teasersize":"33","label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"","bylineText":""}}}}}

package/src/stories/views/components/teaser/teaser_poster.hbs ADDED Viewed

@@ -0,0 +1,13 @@
+<article class="relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teasersize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="ar-1-1">
+        {{~> components/base/image/responsive_image this.teaserImage type="poster" variant=this.content.imageVariant noDelay=../_noDelay addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+    </figure>
+    <div class="absolute flex justify-center w-full h-full ar-1-1 bg-gradient-to-t from-black rounded-br-3xl">
+        <div class="self-center block mx-4 text-center text-white">
+            {{> components/teaser/components/teaser_heading headlineTag="h2" isPosterTeaser=true size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
+        </div>
+    </div>
+    {{#>components/base/link css="absolute flex w-full h-full justify-center" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teasersize clickLabelPrefix2="mediaLink" }}
+        <button class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</button>
+    {{/components/base/link}}
+</article>

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

@@ -0,0 +1,53 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+import teaser from './teaser_poster.hbs'
+import teserPosterLg from './fixtures/teaser_poster_lg.json'
+import teserPosterMd from './fixtures/teaser_poster_md.json'
+import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
+<Meta
+    title="Komponenten/Teaser/Poster"
+    parameters={{
+        layout: 'fullscreen',
+    }}
+    argTypes={{
+        teasersize: {
+            control: {
+                type: 'select',
+                options: ['50', '33'],
+            },
+            description: 'Teaser Größe',
+            table: {
+                defaultValue: {
+                    summary: '50',
+                },
+            },
+        },
+    }}
+    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">
+                ${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!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return teaser({ brand, ...args })
+}
+<Preview withToolbar>
+    <Story name="Poster 50" args={teserPosterLg.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
+    <Story name="Poster 33" args={teserPosterMd.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
+    <Story name="Poster 33 mit Label" args={teserPosterMdLabel.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
+</Preview>