hr-design-system-handlebars 0.47.13 → 0.47.16

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.47.16 (Mon Jun 27 2022)
+
+#### 🐛 Bug Fix
+
+- add documentation [#251](https://github.com/mumprod/hr-design-system-handlebars/pull/251) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.47.15 (Thu Jun 23 2022)
+
+#### 🐛 Bug Fix
+
+- Posterteaser-final [#250](https://github.com/mumprod/hr-design-system-handlebars/pull/250) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.47.14 (Tue Jun 21 2022)
+
+#### 🐛 Bug Fix
+
+- 100% & 50% Alternativ in mobile 100% Standard [#249](https://github.com/mumprod/hr-design-system-handlebars/pull/249) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
 # v0.47.13 (Fri Jun 17 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1548,6 +1548,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 1.25rem;
     margin-right: 1.25rem;
 }
+.mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
 .mx-px {
     margin-left: 1px;
     margin-right: 1px;
@@ -1573,8 +1577,8 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.mb-7 {
-    margin-bottom: 1.75rem;
+.mb-8 {
+    margin-bottom: 2rem;
 }
 .mr-4 {
     margin-right: 1rem;
@@ -1892,21 +1896,16 @@ Ensure the default browser behavior of the `hidden` attribute.
 .gap-y-9 {
     row-gap: 2.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-y-3 {
+    row-gap: 0.75rem;
 }
 .gap-x-4 {
     -webkit-column-gap: 1rem;
        -moz-column-gap: 1rem;
             column-gap: 1rem;
 }
-.gap-y-3 {
-    row-gap: 0.75rem;
+.gap-y-5 {
+    row-gap: 1.25rem;
 }
 .divide-y > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-y-reverse: 0;
@@ -2163,10 +2162,6 @@ 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;
@@ -2191,6 +2186,10 @@ 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;
@@ -2711,6 +2710,10 @@ Ensure the default browser behavior of the `hidden` attribute.
         margin-top: -10rem;
     }
 
+    .md\:mb-16 {
+        margin-bottom: 4rem;
+    }
+
     .md\:block {
         display: block;
     }
@@ -2805,12 +2808,6 @@ 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;
     }

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

@@ -14,7 +14,11 @@
         ~}}       
     {{~/case~}}
     {{~#case "poster"~}}
-        text-2xl      
+        {{~inline-switch
+            size
+            '["50","33"]'
+            '["text-2xl md:text-4xl","text-2xl"]'
+        ~}}     
     {{~/case~}}
 {{~/switch~}}
 {{~inline-switch

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

@@ -1,11 +1,11 @@
-<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"]'}} ">
+<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
     <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 '["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"]'}}">
+        <header class="px-5 md: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="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
+        <section class="px-5 md: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_poster.hbs

@@ -3,12 +3,12 @@
         {{~> components/base/image/responsive_image this.teaserImage type=this.teaserType 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 bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
-        <div class="self-center block mx-4 text-center text-white">
+        <div class="self-center block mx-8 text-center text-white">
             {{> components/teaser/components/teaser_heading headlineTag="h2" 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" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
-        <div class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</div>
+        <div class="self-end px-2 {{inline-switch teaserSize '["33","50"]' '["mb-8","mb-8 md:mb-16"]'}} text-white border border-white font-heading">{{this.link.readMoreText.readMoreLong}}</div>
     {{/components/base/link}} 
     <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> 
 </article>

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.13",
+    "version": "0.47.16",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -12,6 +12,57 @@ export const Template = ({ ...args }) => {
 
 # Byline
 
+## Beschreibung
+
+In der Byline-Komponente werden folgende Teaser-Zusatzinformationen angezeigt:
+
+<ul>
+    <li><b>Datum</b> (mit oder ohne Uhrzeit)</li>
+    <li><b>Strukturknoten</b> (Rubrik)</li>
+    <li><b>Autor(en)</b></li>
+    <li><b>Link zu den Kommentaren des Artikels</b> (mit aktueller Kommentar-Anzahl)</li>
+</ul>
+
+Alle Informationen sind optional. Der Kommentar-Link wird per SSI eingebunden und ist in components/teaser/components/teaser_comments.hbs implementiert.
+
+## Sub-Komponenten
+
+Die Byline-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>components/base/<b>loadSSI</b></li>
+    <li>components/teaser/components/<b>teaser_comments</b></li>
+</ul>
+
+
+## Props
+
+Die Byline-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
+
+<ul>
+    <li><b>teaserInfo</b></li>
+    <li><b>teaserInfo.showTeaserInfo</b></li>
+    <li><b>teaserInfo.showTeaserInfoDate</b></li>
+    <li><b>teaserInfo.showTeaserInfoDateTime</b></li>
+    <li><b>teaserInfo.showTeaserInfoSection</b></li>
+    <li><b>teaserDate</b></li>
+    <li><b>teaserDate.htmlDateTime</b></li>
+    <li><b>teaserDate.date</b></li>
+    <li><b>teaserDate.dateSeparatorTime</b></li>
+    <li><b>documentSection</b></li>
+    <li><b>profiles</b></li>
+</ul>
+
+
+## Verwendung
+
+Die Byline-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_byline}}    
+```
+
+
 <Preview withToolbar>
     <Story name="default" args={teaserWithoutComments.logicItem.includeModel}>
         {Template.bind({})}
@@ -24,4 +75,4 @@ export const Template = ({ ...args }) => {
     </Story>
 </Preview>
 
-<ArgsTable story="default" />
+<ArgsTable story="default" />

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

@@ -42,7 +42,39 @@ export const Template = ({ text, ...args }) => {
 
 # Titel
 
-Beispiele für die Titel-Komponente:
+## Beschreibung
+
+In der Titel-Komponente wird der Titel des Artikels dargestellt. Textgröße und Schriftart werden
+anhand der Parameter <b>teaserType</b> und <b>fontVariant</b> in der inkludierten Sub-Komponente <b>teaser_title_classes</b> ermitelt.
+
+## Sub-Komponenten
+
+Die Titel-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>components/teaser/components/<b>teaser_title_classes</b></li>
+</ul>
+
+
+## Parameter
+
+Die Titel-Komponente benötigt folgende Parameter:
+
+<ul>
+    <li><b>text</b></li>
+    <li><b>fontVariant</b></li>
+    <li><b>size</b></li>
+    <li><b>teaserType</b></li>
+</ul>
+
+
+## Verwendung
+
+Die Titel-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}   
+```
 
 <Preview withToolbar>
     <Story
@@ -80,4 +112,4 @@ Beispiele für die Titel-Komponente:
     </Story>
 </Preview>
 
-<ArgsTable story="title-large" />
+<ArgsTable story="Titel Serif - Hero" />

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

@@ -14,7 +14,11 @@
         ~}}       
     {{~/case~}}
     {{~#case "poster"~}}
-        text-2xl      
+        {{~inline-switch
+            size
+            '["50","33"]'
+            '["text-2xl md:text-4xl","text-2xl"]'
+        ~}}     
     {{~/case~}}
 {{~/switch~}}
 {{~inline-switch

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

@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
 import topline from "./teaser_topline.hbs";
 
 <Meta
-  title="Komponenten/Teaser/Komponenten/Dachzeile"
+  title="Komponenten/Teaser/Komponenten/Topline"
   argTypes={{
     text: {
       control: "text",
@@ -20,11 +20,33 @@ export const Template = ({ text, ...args }) => {
 
 # Topline
 
-Beispieltext für die Topline-Komponente:
+## Beschreibung
+
+In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
+
+
+## Parameter
+
+Die Topline-Komponente benötigt folgende Parameter:
+
+<ul>
+    <li><b>teaserType</b></li>
+    <li><b>readMore</b></li>
+    <li><b>text</b></li>
+</ul>
+
+
+## Verwendung
+
+Die Topline-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_topline text=topline readMore=readMore teaserType=teaserType}}    
+```
 
 <Preview withToolbar>
   <Story
-    name="topline-1"
+    name="default"
     args={{
       text:
         "Dies ist die Dachzeile",
@@ -34,4 +56,4 @@ Beispieltext für die Topline-Komponente:
   </Story>
 </Preview>
 
-<ArgsTable story="topline-1" />
+<ArgsTable story="default" />

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

@@ -1,11 +1,11 @@
-<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"]'}} ">
+<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
     <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 '["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"]'}}">
+        <header class="px-5 md: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="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
+        <section class="px-5 md: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_poster.hbs

@@ -3,12 +3,12 @@
         {{~> components/base/image/responsive_image this.teaserImage type=this.teaserType 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 bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
-        <div class="self-center block mx-4 text-center text-white">
+        <div class="self-center block mx-8 text-center text-white">
             {{> components/teaser/components/teaser_heading headlineTag="h2" 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" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
-        <div class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</div>
+        <div class="self-end px-2 {{inline-switch teaserSize '["33","50"]' '["mb-8","mb-8 md:mb-16"]'}} text-white border border-white font-heading">{{this.link.readMoreText.readMoreLong}}</div>
     {{/components/base/link}} 
     <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> 
 </article>

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

@@ -57,18 +57,6 @@ Inhalt dieses spans: Zusatztext + ": " + Titel
 
 Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
 
-<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>
-
 
 ## Sub-Komponenten
 
@@ -104,4 +92,18 @@ Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
 {{> components/teaser/teaser_poster}}    
-```
+```
+
+<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>
+
+<ArgsTable story="Poster 50" />