hr-design-system-handlebars 1.11.9 → 1.11.10

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.11.10 (Mon Apr 17 2023)
+
+#### 🐛 Bug Fix
+
+- DPE 2227: JSON modellieren für Storybook [#605](https://github.com/mumprod/hr-design-system-handlebars/pull/605) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.11.9 (Wed Apr 12 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2679,7 +2679,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1681323182167;
+  counter-reset: cnt1681728211612;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2909,7 +2909,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1681323182167 1;
+  counter-increment: cnt1681728211612 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2925,7 +2925,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1681323182167);
+  content: counter(cnt1681728211612);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/base/load_dynamic.hbs

@@ -38,4 +38,7 @@
     {{#case "components/multimedia/livestream/label_byline.ssi"}}
         {{> components/multimedia/livestream/label_byline.ssi _context}}
     {{/case}}
+    {{#case "components/teaser/ticker/teaser_ticker"}}
+        {{> components/teaser/ticker/teaser_ticker}}
+    {{/case}}
 {{/switch}}

package/dist/views/components/teaser/ticker/teaser_ticker.hbs

@@ -0,0 +1,29 @@
+<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
+{{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
+ "
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}}   
+    >
+    {{#if this.teaserImage}}
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
+        {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
+        {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     
+        </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 basis-1/12">
+                    {{> components/event/instant_dates}}
+                </div>
+                {{> 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')}}
+        {{/if}}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
+    {{/if}}
+</article>

package/package.json

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

package/src/assets/fixtures/teaser/teaser_ticker.inc.json

@@ -0,0 +1,121 @@
+{
+    "tickerTeaser": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/ticker/teaser_ticker",
+            "includeModel": {
+                "byline": "Byline",
+                "title": "Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++",
+                "topline": "",
+                "headingFontVariant": "serif",
+                "extendedTitle": "",
+                "teaserType": "standard",
+                "teaserSize": "hero",
+                "realTeaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserDate": {
+                    "htmlDateTime": "2022-04-17T19:30+0200",
+                    "htmlDate": "20.02.1983",
+                    "date": "17.04.22",
+                    "dateSeparatorTime": "17.04.22, 19:30"
+                },
+                "hasByline": false,
+                "teaserInfo": {
+                    "showTeaserInfo": false,
+                    "showTeaserInfoSection": true,
+                    "showTeaserInfoChannel": false,
+                    "showTeaserInfoAll": false,
+                    "showTeaserInfoDate": false,
+                    "showTeaserInfoDateTime": true,
+                    "showTeaserInfoProgramRef": false
+                },
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "teaser_standard",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "sportschau-image-5708"
+                        }
+                    ]
+                },
+                "displayTeaserBodyAsImageOverlay": false,
+                "hasMediaButtons": false,
+                "dontLazyload": true,
+                "isStandardTeaser": true,
+                "isHeroTeaser": true,
+                "isMediaTeaser": false,
+                "isGuide": false,
+                "isProgram": false,
+                "isEvent": false,
+                "isTicker": true,
+                "isAudio": false,
+                "isVideo": false,
+                "isPodcast": false,
+                "isPodcastEpisode": false,
+                "isExtOrBrandLink": false,
+                "isAuthor": false,
+                "copyright": "Copyright Text",
+                "audioAuthor": "Audio Author",
+                "hasStatus": false,
+                "hasTeaserItem": true,
+                "moreThenOneEvent": false,
+                "moreThenTwoEvents": false,
+                "firstInstant": {
+                    "startDate": {
+                        "monthNameShort": "APR",
+                        "weekdayNameShort": "Do",
+                        "day": "9"
+                    }
+                },
+                "lastInstant": {
+                    "startDate": {
+                        "monthNameShort": "APR",
+                        "weekdayNameShort": "Fr",
+                        "day": "10"
+                    }
+                },
+                "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": "Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.",
+                "hideBylineAndShorttext": false,
+                "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
+                "profiles": "",
+                "teaserLead": {
+                    "avDocument": "",
+                    "image": ""
+                },
+                "geotag": [
+                    {
+                        "title": "Frankfurt"
+                    }
+                ],
+                "link": {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": false,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                }
+            }
+        }
+    }
+}

package/src/assets/fixtures/teaser/ticker_teaser_standard_100.json

@@ -0,0 +1,25 @@
+{
+    "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+    "@->contentpath": "tickerTeaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
+                {
+            "@->contentpath": "logicItem.includeModel.topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker"
+            }
+        }
+    ]
+}

package/src/stories/views/components/base/load_dynamic.hbs

@@ -38,4 +38,7 @@
     {{#case "components/multimedia/livestream/label_byline.ssi"}}
         {{> components/multimedia/livestream/label_byline.ssi _context}}
     {{/case}}
+    {{#case "components/teaser/ticker/teaser_ticker"}}
+        {{> components/teaser/ticker/teaser_ticker}}
+    {{/case}}
 {{/switch}}

package/src/stories/views/components/teaser/fixtures/ticker_teaser_standard_100.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/ticker/teaser_ticker","includeModel":{"byline":"Byline","title":"Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":false,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sportschau-image-5708_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sportschau-image-5708_v-16to9__small.jpg 320w, images/sportschau-image-5708_v-16to9__medium.jpg 480w, images/sportschau-image-5708_v-16to9__medium__extended.jpg 640w, images/sportschau-image-5708_v-16to9.jpg 960w, images/sportschau-image-5708_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":true,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"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":"Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/ticker/teaser_ticker.hbs

@@ -0,0 +1,29 @@
+<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
+{{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
+ "
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}}   
+    >
+    {{#if this.teaserImage}}
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
+        {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
+        {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     
+        </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 basis-1/12">
+                    {{> components/event/instant_dates}}
+                </div>
+                {{> 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')}}
+        {{/if}}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
+    {{/if}}
+</article>

package/src/stories/views/components/teaser/ticker/teaser_ticker.stories.mdx

@@ -0,0 +1,33 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+
+import ticker from './teaser_ticker.hbs'
+import tickerTeaser100Standard from '../fixtures/ticker_teaser_standard_100.json'
+
+<Meta
+    title="Komponenten/Teaser/Ticker"
+    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-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!
+    // return `<div>${label}</div>`;
+    let brand = 
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return ticker({ brand, ...args })
+}
+
+<Preview withToolbar>
+    <Story name="Ticker Teaser 100" args={tickerTeaser100Standard.logicItem.includeModel} >
+        {Template.bind({})}    
+    </Story>
+</Preview>