hr-design-system-handlebars 0.47.8 → 0.47.11

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.47.11 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- - deleted old data folder for teasers [#244](https://github.com/mumprod/hr-design-system-handlebars/pull/244) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.47.10 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- Alternative-Teaser zusammenbauen [#245](https://github.com/mumprod/hr-design-system-handlebars/pull/245) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.47.9 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- - outsourced title class logic to own template [#243](https://github.com/mumprod/hr-design-system-handlebars/pull/243) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.47.8 (Tue Jun 14 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1750,14 +1750,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     -ms-flex-negative: 0;
         flex-shrink: 0;
 }
-.basis-3\/5 {
-    -ms-flex-preferred-size: 60%;
-        flex-basis: 60%;
-}
 .basis-2\/5 {
     -ms-flex-preferred-size: 40%;
         flex-basis: 40%;
 }
+.basis-1\/3 {
+    -ms-flex-preferred-size: 33.333333%;
+        flex-basis: 33.333333%;
+}
+.basis-2\/3 {
+    -ms-flex-preferred-size: 66.666667%;
+        flex-basis: 66.666667%;
+}
+.basis-3\/5 {
+    -ms-flex-preferred-size: 60%;
+        flex-basis: 60%;
+}
 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1880,17 +1888,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 .gap-y-9 {
     row-gap: 2.25rem;
 }
-.gap-y-4 {
-    row-gap: 1rem;
-}
-.gap-x-5 {
-    -webkit-column-gap: 1.25rem;
-       -moz-column-gap: 1.25rem;
-            column-gap: 1.25rem;
-}
 .gap-y-5 {
     row-gap: 1.25rem;
 }
+.gap-x-3 {
+    -webkit-column-gap: 0.75rem;
+       -moz-column-gap: 0.75rem;
+            column-gap: 0.75rem;
+}
 .gap-x-4 {
     -webkit-column-gap: 1rem;
        -moz-column-gap: 1rem;
@@ -2154,6 +2159,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }
+.px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+}
 .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -2178,10 +2187,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
 }
-.px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-}
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2761,6 +2766,23 @@ Ensure the default browser behavior of the `hidden` attribute.
                 flex: 1 1 auto;
     }
 
+    .md\:basis-1\/3 {
+        -ms-flex-preferred-size: 33.333333%;
+            flex-basis: 33.333333%;
+    }
+
+    .md\:basis-2\/3 {
+        -ms-flex-preferred-size: 66.666667%;
+            flex-basis: 66.666667%;
+    }
+
+    .md\:flex-row {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+    }
+
     .md\:flex-col {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
@@ -2774,6 +2796,12 @@ Ensure the default browser behavior of the `hidden` attribute.
                 justify-content: flex-end;
     }
 
+    .md\:gap-x-5 {
+        -webkit-column-gap: 1.25rem;
+           -moz-column-gap: 1.25rem;
+                column-gap: 1.25rem;
+    }
+
     .md\:rounded-none {
         border-radius: 0px;
     }
@@ -2828,6 +2856,11 @@ Ensure the default browser behavior of the `hidden` attribute.
         line-height: 2.375rem;
     }
 
+    .md\:text-3xl {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+    }
+
     .md\:leading-4 {
         line-height: 1rem;
     }

package/dist/views/components/teaser/components/teaser_heading.hbs

@@ -7,5 +7,5 @@
     {{#if topline}}
         {{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
     {{/if}}
-    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
 </{{~ headlineTag ~}}>

package/dist/views/components/teaser/components/teaser_title.hbs

@@ -1,13 +1,3 @@
-<span
-    class='block mt-0.5
-        {{inline-switch
-            size
-            '["hero","100","25"]'
-            '[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
-        }}
-        {{inline-switch
-            fontVariant
-            '["serif", "sans-serif"]'
-            '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
-        }}'
->{{text}}</span>
+<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
+    {{~text~}}
+</span>

package/dist/views/components/teaser/components/teaser_title_classes.hbs

@@ -0,0 +1,21 @@
+{{#switch teaserType~}}
+    {{~#case "standard"~}}   
+        {{~inline-switch
+            size
+            '["hero","100","25"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+        ~}}              
+    {{~/case~}}
+    {{~#case "alternative"~}}
+        {{~inline-switch
+            size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+        ~}}       
+    {{~/case~}}
+{{~/switch~}}
+{{~inline-switch
+    fontVariant
+    '["serif", "sans-serif"]'
+    '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
+~}}

package/dist/views/components/teaser/teaser_alternativ.hbs

@@ -1,11 +1,11 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
+    <figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
         {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
+        <header class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
                 {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
                     headlineTag=this.headlineTag 
@@ -16,7 +16,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/dist/views/components/teaser/teaser_standard.hbs

@@ -14,7 +14,8 @@
                 readMore=this.link.readMoreText.readMoreScreenreader 
                 size=this.teaserSize 
                 title=this.title 
-                topline=this.topline }}            
+                topline=this.topline 
+                teaserType=this.teaserType}}            
             {{/components/base/link}}   
         </header>
         <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">

package/package.json

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

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

@@ -7,5 +7,5 @@
     {{#if topline}}
         {{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
     {{/if}}
-    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
 </{{~ headlineTag ~}}>

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

@@ -80,6 +80,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: 'hero',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -108,6 +109,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: '33',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -134,6 +136,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: '25',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}

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

@@ -1,13 +1,3 @@
-<span
-    class='block mt-0.5
-        {{inline-switch
-            size
-            '["hero","100","25"]'
-            '[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
-        }}
-        {{inline-switch
-            fontVariant
-            '["serif", "sans-serif"]'
-            '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
-        }}'
->{{text}}</span>
+<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
+    {{~text~}}
+</span>

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

@@ -51,6 +51,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 100%-Teasers',
             size: 'hero',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -61,6 +62,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers',
             size: '33',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -71,6 +73,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 25%-Teasers',
             size: '25',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}

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

@@ -0,0 +1,21 @@
+{{#switch teaserType~}}
+    {{~#case "standard"~}}   
+        {{~inline-switch
+            size
+            '["hero","100","25"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+        ~}}              
+    {{~/case~}}
+    {{~#case "alternative"~}}
+        {{~inline-switch
+            size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+        ~}}       
+    {{~/case~}}
+{{~/switch~}}
+{{~inline-switch
+    fontVariant
+    '["serif", "sans-serif"]'
+    '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
+~}}

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

@@ -1,11 +1,11 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
+    <figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
         {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
+        <header class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
                 {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
                     headlineTag=this.headlineTag 
@@ -16,7 +16,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

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

@@ -14,7 +14,8 @@
                 readMore=this.link.readMoreText.readMoreScreenreader 
                 size=this.teaserSize 
                 title=this.title 
-                topline=this.topline }}            
+                topline=this.topline 
+                teaserType=this.teaserType}}            
             {{/components/base/link}}   
         </header>
         <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">

package/src/stories/views/components/teaser/data/16_7_teaserImage.json

@@ -1,27 +0,0 @@
-{
-    "teaserImage": {
-        "copyrightWithLinks": "",
-        "responsiveImage": {
-            "asPicture": true,
-            "asImage": false,
-            "fallback": "https://picsum.photos/id/188/480/210",
-            "sources": [
-                {
-                    "media": "all and (max-width: 43.688em)",
-                    "sizes": "100vw",
-                    "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"
-                },
-                {
-                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                    "sizes": "100vw",
-                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                },
-                {
-                    "media": "all and (min-width: 64em)",
-                    "sizes": "960px",
-                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                }
-            ]
-        }
-    }
-}

package/src/stories/views/components/teaser/data/16_9_teaserImage.json

@@ -1,17 +0,0 @@
-{
-    "teaserImage": {
-        "copyrightWithLinks": "",
-        "responsiveImage": {
-            "asPicture": false,
-            "asImage": true,
-            "fallback": "https://picsum.photos/id/188/480/210",
-            "sources": [
-                {
-                    
-                    "sizes": "(min-width: 1010px) 960px, 100vw",
-                    "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
-                }
-            ]
-        }
-    }
-}

package/src/stories/views/components/teaser/data/teaser_alternativ_lg_serif.json

@@ -1,130 +0,0 @@
-{
-            "byline": "Byline",
-            "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
-            "topline": "Überglücklich, aber ohne Mama",
-            "isSerifHeading": true,
-            "extendedTitle": null,
-            "teasertype": "standard",
-            "teasersize": "lg",
-            "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": true,
-                "showTeaserInfoDateTime": true,
-                "showTeaserInfoProgramRef": true
-            },
-            "teaserImage": {
-                "copyrightWithLinks": "",
-                "responsiveImage": {
-                    "asPicture": false,
-                    "asImage": true,
-                    "fallback": "https://picsum.photos/id/188/480/210",
-                    "sources": [
-                        {
-                            
-                            "sizes": "(min-width: 1010px) 960px, 100vw",
-                            "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
-                        }
-                    ]
-                }
-            },
-            "hasMediaButtons": false,
-            "dontLazyload": true,
-            "realTeasersize": "100",
-            "isStandardTeaser": true,
-            "isHeroTeaser": false,
-            "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",
-            "headingSize": "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",
-            "documentSection": "Gesellschaft",
-            "teaserLead": {
-                "avDocument": "",
-                "image": ""
-            },
-            "label": {
-                "type": "Ticker",
-                "loca": "ticker",
-                "byline": {
-                    "bylineSsi": "BylineText aus ssi",
-                    "bylineText": "BylineText"
-                }
-            },
-            "geotag": [
-                {
-                    "title": "Wolfhagen"
-                }
-            ],
-            "link": {
-                "url": "/teaser1",
-                "webviewUrl": "/teaser1#webview",
-                "isTargetBlank": false,
-                "hasIcon": false,
-                "iconName": "iconName",
-                "readMoreText": {
-                    "readMoreScreenreader": "Zum Artikel",
-                    "readMore": "mehr",
-                    "readMoreLong": "read More Long"
-                },
-                "content": {
-                    "teaserImage": {
-                        "copyrightWithLinks": "",
-                        "responsiveImage": {
-                            "asPicture": false,
-                            "asImage": true,
-                            "fallback": "https://picsum.photos/id/188/480/210",
-                            "sources": [
-                                {
-                                    
-                                    "sizes": "(min-width: 1010px) 960px, 100vw",
-                                    "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
-                                }
-                            ]
-                        }
-                    },
-                    "teasertype": "standard",
-                    "imageVariant": "topteaser",
-                    "isFileDownload": false,
-                    "topline": "Überglücklich, aber ohne Mama",
-                    "trackingData": {
-                        "secondLevelId": "2",
-                        "pageName": "hessenschau"
-                    }
-                }
-            }
-        }