hr-design-system-handlebars 0.42.5 → 0.42.8

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.42.8 (Tue Apr 19 2022)
+
+#### 🐛 Bug Fix
+
+- add teaserText-component [#217](https://github.com/mumprod/hr-design-system-handlebars/pull/217) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.42.7 (Tue Apr 19 2022)
+
+#### 🐛 Bug Fix
+
+- extend byline [#216](https://github.com/mumprod/hr-design-system-handlebars/pull/216) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.42.6 (Wed Apr 13 2022)
+
+#### 🐛 Bug Fix
+
+- - added aspect ratio classes with fallback to tailwind.css [#215](https://github.com/mumprod/hr-design-system-handlebars/pull/215) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.42.5 (Wed Apr 13 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/loca.js

@@ -10,7 +10,12 @@ module.exports = function(text, options) {
         "search_input_aria_submit": "Suche starten",
         "search_input_placeholder": "Ort oder Thema suchen",
         "feature_box_anchor": "Livestream Player anspringen",
-        "header_homepage_link_title": "Startseite hessenschau . d e"
+        "header_homepage_link_title": "Startseite hessenschau . d e",
+        "comment_anchor_1": "zu den ",
+        "comment_label_text": "Kommentar",
+        "comment_label_text_many": "Kommentare",
+        "comment_anchor_2": " Kommentaren des Artikels springen",
+        "date_simple_at": options + " Uhr"
     }
 
     for (let key in locas){

package/dist/assets/index.css

@@ -796,6 +796,54 @@ Ensure the default browser behavior of the `hidden` attribute.
         grid-column: full;
     }
 
+/*! ****************************/
+
+/*! Aspect Ratio with fallback */
+
+/*! ****************************/
+
+.ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+@supports not (aspect-ratio: 16 / 9) {
+        .ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+.ar-1-1 {
+        aspect-ratio: 1 / 1    
+    }
+
+@supports not (aspect-ratio: 1 / 1) {
+        .ar-1-1::before {
+            float: left;
+            padding-top: 100%;
+            content: '';
+        }
+
+        .ar-1-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+/*! ********************************/
+
+/*! Aspect Ratio with fallback end */
+
+/*! ********************************/
+
 .headline--barrier {
         display: -webkit-box;
         display: -ms-flexbox;
@@ -1499,6 +1547,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 1rem;
     margin-right: 1rem;
 }
+.mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+}
 .mt-6 {
     margin-top: 1.5rem;
 }
@@ -1514,12 +1566,27 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
+.mr-2\.5 {
+    margin-right: 0.625rem;
+}
+.mr-2 {
+    margin-right: 0.5rem;
+}
+.mr-0\.5 {
+    margin-right: 0.125rem;
+}
+.mr-0 {
+    margin-right: 0px;
+}
 .mt-0\.5 {
     margin-top: 0.125rem;
 }
 .mt-0 {
     margin-top: 0px;
 }
+.mt-5 {
+    margin-top: 1.25rem;
+}
 .mr-4 {
     margin-right: 1rem;
 }
@@ -1541,6 +1608,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .inline-block {
     display: inline-block;
 }
+.inline {
+    display: inline;
+}
 .flex {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1638,6 +1708,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .w-40 {
     width: 10rem;
 }
+.w-5 {
+    width: 1.25rem;
+}
 .w-12 {
     width: 3rem;
 }
@@ -2173,6 +2246,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .font-bold {
     font-weight: 700;
 }
+.uppercase {
+    text-transform: uppercase;
+}
 .leading-3 {
     line-height: .75rem;
 }
@@ -2214,6 +2290,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .text-opacity-50 {
     --tw-text-opacity: 0.5;
 }
+.decoration-1 {
+    text-decoration-thickness: 1px;
+}
 .placeholder-blue-congress::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
@@ -2478,155 +2557,225 @@ Ensure the default browser behavior of the `hidden` attribute.
     }
 }
 @media (min-width: 768px) {
+    .md\:ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .md\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
     .md\:static {
         position: static;
     }
+
     .md\:top-auto {
         top: auto;
     }
+
     .md\:left-auto {
         left: auto;
     }
+
     .md\:top-12 {
         top: 3rem;
     }
+
     .md\:left-0 {
         left: 0px;
     }
+
     .md\:z-101 {
         z-index: 101;
     }
+
     .md\:order-2 {
         -webkit-box-ordinal-group: 3;
             -ms-flex-order: 2;
                 order: 2;
     }
+
     .md\:order-4 {
         -webkit-box-ordinal-group: 5;
             -ms-flex-order: 4;
                 order: 4;
     }
+
     .md\:col-span-8 {
         grid-column: span 8 / span 8;
     }
+
     .md\:col-span-6 {
         grid-column: span 6 / span 6;
     }
+
     .md\:col-span-4 {
         grid-column: span 4 / span 4;
     }
+
     .md\:col-span-3 {
         grid-column: span 3 / span 3;
     }
+
     .md\:mt-0 {
         margin-top: 0px;
     }
+
     .md\:-mt-40 {
         margin-top: -10rem;
     }
+
     .md\:block {
         display: block;
     }
+
     .md\:flex {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
     }
+
     .md\:hidden {
         display: none;
     }
+
     .md\:h-header-md {
         height: 5.5625rem;
     }
+
     .md\:h-12 {
         height: 3rem;
     }
+
     .md\:h-7 {
         height: 1.75rem;
     }
+
     .md\:h-full {
         height: 100%;
     }
+
     .md\:h-8 {
         height: 2rem;
     }
+
     .md\:w-1\/2 {
         width: 50%;
     }
+
     .md\:w-40 {
         width: 10rem;
     }
+
     .md\:w-80 {
         width: 20rem;
     }
+
     .md\:w-auto {
         width: auto;
     }
+
     .md\:w-8 {
         width: 2rem;
     }
+
     .md\:max-w-1\/2 {
         max-width: 50%;
     }
+
     .md\:flex-auto {
         -webkit-box-flex: 1;
             -ms-flex: 1 1 auto;
                 flex: 1 1 auto;
     }
+
     .md\:flex-col {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
             -ms-flex-direction: column;
                 flex-direction: column;
     }
+
     .md\:justify-end {
         -webkit-box-pack: end;
             -ms-flex-pack: end;
                 justify-content: flex-end;
     }
+
     .md\:rounded-none {
         border-radius: 0px;
     }
+
     .md\:border-0 {
         border-width: 0px;
     }
+
     .md\:border-r {
         border-right-width: 1px;
     }
+
     .md\:border-l {
         border-left-width: 1px;
     }
+
     .md\:border-white {
         --tw-border-opacity: 1;
         border-color: rgba(255, 255, 255, var(--tw-border-opacity));
     }
+
     .md\:px-0 {
         padding-left: 0px;
         padding-right: 0px;
     }
+
     .md\:px-5 {
         padding-left: 1.25rem;
         padding-right: 1.25rem;
     }
+
     .md\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }
+
     .md\:pt-4 {
         padding-top: 1rem;
     }
+
     .md\:pl-0 {
         padding-left: 0px;
     }
+
+    .md\:text-base {
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+
     .md\:text-4xl {
         font-size: 2.125rem;
         line-height: 2.25rem;
     }
+
+    .md\:leading-4 {
+        line-height: 1rem;
+    }
+
     .md\:drop-shadow-md {
         --tw-drop-shadow: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.07));
         -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
                 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
     }
+
     .md\:filter {
         -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
                 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2895,6 +3044,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     .lg\:pl-1 {
         padding-left: 0.25rem;
     }
+    .lg\:leading-5 {
+        line-height: 1.25rem;
+    }
     .lg\:leading-8 {
         line-height: 2rem;
     }

package/dist/views/components/Teaser/Byline.hbs

@@ -1 +1,74 @@
-<span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
+<p class="mt-2 text-xs text-grey-scorpion font-headingSerif">
+    
+    {{!--Teaser-Info--}}
+    {{#with this.teaserInfo}}
+        {{#if this.showTeaserInfo~}}
+            {{~#if this.showTeaserInfoDate}}
+                {{~#with ../teaserDate}}
+                    <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+                {{/with~}}
+                {{#if this.showTeaserInfoSection}}
+                    <span class="mx-px">|</span>
+                {{else}}
+                    {{#if ../profiles}}
+                        <span class="mx-px">|</span>
+                    {{/if}}
+                {{/if}}
+            {{else}}
+                {{~#if this.showTeaserInfoDateTime}}
+                    {{~#with ../teaserDate}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                    {{/with~}}
+                    {{#if this.showTeaserInfoSection}}
+                        <span class="mx-px">|</span>
+                    {{else}}
+                        {{#if ../profiles}}
+                            <span class="mx-px">|</span>
+                        {{/if}}
+                    {{/if}}
+                {{/if~}}
+            {{/if~}}    
+
+            {{~#if this.showTeaserInfoSection}}
+                <span class="uppercase">
+                    {{../documentSection~}}
+                </span>
+                {{#if ../profiles}}
+                    <span class="mx-px">|</span>
+                {{/if}}
+            {{/if}}
+
+        {{/if}}
+    {{/with}}
+
+    {{!--Profiles--}}
+    {{#if profiles}}
+        <span>{{profiles}}</span>
+    {{/if}}
+
+    {{!--
+    Gap here only if comments exists and at least one of those elements above 
+    is shown. Really ugly because we don't have any or-helper yet...
+    --}}
+    {{#if commentLink}}
+        {{#if profiles}}
+            <span class="mr-2.5"></span>
+        {{else}}
+            {{#if teaserInfo.showTeaserInfoSection}}
+                <span class="mr-2.5"></span>
+            {{else}}
+                {{#if teaserInfo.showTeaserInfoDate}}
+                    <span class="mr-2.5"></span>
+                {{else}}
+                    {{#if teaserInfo.showTeaserInfoDateTime}}
+                        <span class="mr-2.5"></span>
+                    {{/if}}
+                {{/if}}
+            {{/if}}
+        {{/if}}
+    {{/if}}
+
+    {{!--Comments--}}
+    {{> components/Teaser/Comments}}
+
+</p>

package/dist/views/components/Teaser/Comments.hbs

@@ -0,0 +1,15 @@
+{{#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/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.content.commentNumber}}</span>
+            {{#if this.content.hasOneComment}}
+                <span class="text-toplineColor">{{loca "comment_label_text"}}</span>
+            {{else}}
+                <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
+            {{/if}}
+            <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+        {{/components/base/link}}
+    </span>
+{{/with}}

package/dist/views/components/Teaser/Teaser-standard.hbs

@@ -1,5 +1,5 @@
 <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}  
@@ -9,10 +9,8 @@
             {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
         </header>
         <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            <div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
-            {{#if profiles}}
-                {{> components/Teaser/Byline text=profiles}}
-            {{/if}}
+            {{> components/Teaser/teaserText text=shorttext size=teasersize hero=isHeroTeaser font=(inline-switch isHeroTeaser '[true]' '["md:text-base md:leading-4 lg:leading-5"]') }}
+            {{> components/Teaser/Byline}} 
         </section>
     </div>
 </article>

package/dist/views/components/Teaser/jsonHelper.js

@@ -0,0 +1,4 @@
+function addCommentLink(json, commentLink) {
+    json.commentLink = commentLink;
+  }
+  export {  addCommentLink };

package/dist/views/components/Teaser/teaserText.hbs

@@ -0,0 +1 @@
+<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm leading-4 {{font}} mt-5 font-copy">{{text}}</span>

package/package.json

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

package/src/assets/tailwind.css

@@ -411,6 +411,50 @@
             grid-column: main;
         }
     }
+    /*! ****************************/
+    /*! Aspect Ratio with fallback */
+    /*! ****************************/
+    .ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    
+    .ar-1-1 {
+        aspect-ratio: 1 / 1    
+    }
+
+    @supports not (aspect-ratio: 1 / 1) {
+        .ar-1-1::before {
+            float: left;
+            padding-top: 100%;
+            content: '';
+        }
+
+        .ar-1-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
+    /*! ********************************/
+    /*! Aspect Ratio with fallback end */
+    /*! ********************************/
+
     .headline--barrier {
         display: flex;
         width: 100%;

package/src/stories/views/components/Teaser/Byline.hbs

@@ -1 +1,74 @@
-<span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
+<p class="mt-2 text-xs text-grey-scorpion font-headingSerif">
+    
+    {{!--Teaser-Info--}}
+    {{#with this.teaserInfo}}
+        {{#if this.showTeaserInfo~}}
+            {{~#if this.showTeaserInfoDate}}
+                {{~#with ../teaserDate}}
+                    <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+                {{/with~}}
+                {{#if this.showTeaserInfoSection}}
+                    <span class="mx-px">|</span>
+                {{else}}
+                    {{#if ../profiles}}
+                        <span class="mx-px">|</span>
+                    {{/if}}
+                {{/if}}
+            {{else}}
+                {{~#if this.showTeaserInfoDateTime}}
+                    {{~#with ../teaserDate}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                    {{/with~}}
+                    {{#if this.showTeaserInfoSection}}
+                        <span class="mx-px">|</span>
+                    {{else}}
+                        {{#if ../profiles}}
+                            <span class="mx-px">|</span>
+                        {{/if}}
+                    {{/if}}
+                {{/if~}}
+            {{/if~}}    
+
+            {{~#if this.showTeaserInfoSection}}
+                <span class="uppercase">
+                    {{../documentSection~}}
+                </span>
+                {{#if ../profiles}}
+                    <span class="mx-px">|</span>
+                {{/if}}
+            {{/if}}
+
+        {{/if}}
+    {{/with}}
+
+    {{!--Profiles--}}
+    {{#if profiles}}
+        <span>{{profiles}}</span>
+    {{/if}}
+
+    {{!--
+    Gap here only if comments exists and at least one of those elements above 
+    is shown. Really ugly because we don't have any or-helper yet...
+    --}}
+    {{#if commentLink}}
+        {{#if profiles}}
+            <span class="mr-2.5"></span>
+        {{else}}
+            {{#if teaserInfo.showTeaserInfoSection}}
+                <span class="mr-2.5"></span>
+            {{else}}
+                {{#if teaserInfo.showTeaserInfoDate}}
+                    <span class="mr-2.5"></span>
+                {{else}}
+                    {{#if teaserInfo.showTeaserInfoDateTime}}
+                        <span class="mr-2.5"></span>
+                    {{/if}}
+                {{/if}}
+            {{/if}}
+        {{/if}}
+    {{/if}}
+
+    {{!--Comments--}}
+    {{> components/Teaser/Comments}}
+
+</p>

package/src/stories/views/components/Teaser/Byline.stories.mdx

@@ -1,35 +1,30 @@
 import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
-
+import 'core-js/actual/structured-clone';
+import { addCommentLink } from './jsonHelper';
 import byline from "./Byline.hbs";
+import comments from './data/teaser_commentLink.json';
+import teaser from './data/teaser_article.json';
+let byline_with_comments  =  structuredClone(teaser);
+addCommentLink(byline_with_comments, comments.commentLink);
 
-<Meta
-  title="Komponenten/Teaser/Komponenten/Byline"
-  argTypes={{
-    text: {
-      control: "text",
-      description: "Bylinetext",
-    },
-  }}
-/>
+<Meta title="Komponenten/Teaser/Komponenten/Byline"/>
 
-export const Template = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<span>${topline}</span>`;
-  return byline({ text, ...args });
+export const Template = ({ ...args }) => {
+  return byline({ ...args });
 };
 
 # Byline
 
 <Preview withToolbar>
-  <Story
-    name="default"
-    args={{
-      text:
-        "Dies ist die Byline",
-    }}
-  >
+  <Story name="default" args={teaser}>
     {Template.bind({})}
   </Story>
+  <Story name="with comments" args={byline_with_comments}>
+    {Template.bind({})} 
+  </Story>
+  <Story name="comments only" args={comments}>
+    {Template.bind({})} 
+  </Story>
 </Preview>
 
 <ArgsTable story="default" />

package/src/stories/views/components/Teaser/Comments.hbs

@@ -0,0 +1,15 @@
+{{#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/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.content.commentNumber}}</span>
+            {{#if this.content.hasOneComment}}
+                <span class="text-toplineColor">{{loca "comment_label_text"}}</span>
+            {{else}}
+                <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
+            {{/if}}
+            <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+        {{/components/base/link}}
+    </span>
+{{/with}}

package/src/stories/views/components/Teaser/Teaser-standard.hbs

@@ -1,5 +1,5 @@
 <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}  
@@ -9,10 +9,8 @@
             {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
         </header>
         <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            <div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
-            {{#if profiles}}
-                {{> components/Teaser/Byline text=profiles}}
-            {{/if}}
+            {{> components/Teaser/teaserText text=shorttext size=teasersize hero=isHeroTeaser font=(inline-switch isHeroTeaser '[true]' '["md:text-base md:leading-4 lg:leading-5"]') }}
+            {{> components/Teaser/Byline}} 
         </section>
     </div>
 </article>

package/src/stories/views/components/Teaser/data/teaser_article.json

@@ -7,16 +7,17 @@
             "teasertype": "standard",
             "teasersize": "100",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
                 "showTeaserInfoSection": true,
                 "showTeaserInfoChannel": true,
                 "showTeaserInfoAll": true,
-                "showTeaserInfoDate": true,
+                "showTeaserInfoDate": false,
                 "showTeaserInfoDateTime": true,
                 "showTeaserInfoProgramRef": true
             },
@@ -81,6 +82,7 @@
             "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": ""

package/src/stories/views/components/Teaser/data/teaser_commentLink.json

@@ -0,0 +1,16 @@
+{
+    "commentLink": {
+        "link": {
+            "url": "/teaser1-comments",
+            "webviewUrl": "/teaser1-comments#webview",
+            "isTargetBlank": false,
+            "readMoreText": {
+                "readMoreScreenreader": "Zu den Kommentaren des Artikels"
+            },
+            "content": {
+                "commentNumber": "666",
+                "hasOneComment": false
+            }
+        }    
+    }
+}

package/src/stories/views/components/Teaser/data/teaser_full.json

@@ -21,9 +21,10 @@
                                 "teasertype": "standard",
                                 "teasersize": "100",
                                 "teaserDate": {
+                                    "htmlDateTime": "2022-04-17T19:30+0200",
                                     "htmlDate": "20.02.1983",
-                                    "date": "20.02.1983",
-                                    "dateSeparatorTime": "20.02.1983"
+                                    "date": "17.04.22",
+                                    "dateSeparatorTime": "17.04.22, 19:30"
                                 },
                                 "teaserInfo": {
                                     "showTeaserInfo": true,
@@ -95,6 +96,7 @@
                                 "shorttext": "shorttext",
                                 "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
                                 "profiles": "Von Alf Haubitz und Alice Merton",
+                                "documentSection": "Gesellschaft",
                                 "teaserLead": {
                                     "avDocument": "",
                                     "image": ""

package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json

@@ -7,9 +7,10 @@
             "teasertype": "standard",
             "teasersize": "lg",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
@@ -39,7 +40,7 @@
             "dontLazyload": true,
             "realTeasersize": "100",
             "isStandardTeaser": true,
-            "isHeroTeaser": true,
+            "isHeroTeaser": false,
             "isMediaTeaser": false,
             "isGuide": false,
             "isProgram": false,
@@ -71,6 +72,7 @@
             "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": ""

package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json

@@ -7,9 +7,10 @@
             "teasertype": "standard",
             "teasersize": "md",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
@@ -39,7 +40,7 @@
             "dontLazyload": true,
             "realTeasersize": "100",
             "isStandardTeaser": true,
-            "isHeroTeaser": true,
+            "isHeroTeaser": false,
             "isMediaTeaser": false,
             "isGuide": false,
             "isProgram": false,
@@ -71,6 +72,7 @@
             "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": ""

package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json

@@ -7,9 +7,10 @@
             "teasertype": "standard",
             "teasersize": "sm",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
@@ -39,7 +40,7 @@
             "dontLazyload": true,
             "realTeasersize": "100",
             "isStandardTeaser": true,
-            "isHeroTeaser": true,
+            "isHeroTeaser": false,
             "isMediaTeaser": false,
             "isGuide": false,
             "isProgram": false,
@@ -71,6 +72,7 @@
             "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": ""

package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json

@@ -7,9 +7,10 @@
             "teasertype": "standard",
             "teasersize": "xl",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
@@ -39,7 +40,7 @@
             "dontLazyload": true,
             "realTeasersize": "100",
             "isStandardTeaser": true,
-            "isHeroTeaser": true,
+            "isHeroTeaser": false,
             "isMediaTeaser": false,
             "isGuide": false,
             "isProgram": false,
@@ -71,6 +72,7 @@
             "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": ""

package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json

@@ -7,16 +7,17 @@
             "teasertype": "standard",
             "teasersize": "xxl",
             "teaserDate": {
+                "htmlDateTime": "2022-04-17T19:30+0200",
                 "htmlDate": "20.02.1983",
-                "date": "20.02.1983",
-                "dateSeparatorTime": "20.02.1983"
+                "date": "17.04.22",
+                "dateSeparatorTime": "17.04.22, 19:30"
             },
             "teaserInfo": {
                 "showTeaserInfo": true,
                 "showTeaserInfoSection": true,
                 "showTeaserInfoChannel": true,
                 "showTeaserInfoAll": true,
-                "showTeaserInfoDate": true,
+                "showTeaserInfoDate": false,
                 "showTeaserInfoDateTime": true,
                 "showTeaserInfoProgramRef": true
             },
@@ -71,6 +72,7 @@
             "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": ""

package/src/stories/views/components/Teaser/jsonHelper.js

@@ -0,0 +1,4 @@
+function addCommentLink(json, commentLink) {
+    json.commentLink = commentLink;
+  }
+  export {  addCommentLink };

package/src/stories/views/components/Teaser/teaser-standard.stories.mdx

@@ -1,6 +1,7 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 import 'core-js/actual/structured-clone';
 import { addLabel, removeLabel, changeTeaserSize } from './labelHelper';
+import { addCommentLink } from './jsonHelper';
 import teaser from './Teaser-standard.hbs'
 import hero_teaser from './data/teaser_standard_xxl_serif.json' 
 import xl_teaser from './data/teaser_standard_xl_serif.json'
@@ -8,8 +9,13 @@ import lg_teaser from './data/teaser_standard_lg_serif.json'
 import md_teaser from './data/teaser_standard_md_serif.json'
 import sm_teaser from './data/teaser_standard_sm_serif.json'
 import ticker_label from './data/ticker_label.json';
+import comments from './data/teaser_commentLink.json';
 let hero_teaser_with_label  =  structuredClone(hero_teaser);
 addLabel(hero_teaser_with_label, ticker_label.label);
+let hero_teaser_with_comments  =  structuredClone(hero_teaser);
+addCommentLink(hero_teaser_with_comments, comments.commentLink);
+let md_teaser_with_comments  =  structuredClone(md_teaser);
+addCommentLink(md_teaser_with_comments, comments.commentLink);
 
 <Meta   title="Komponenten/Teaser/Standard"
         parameters={{
@@ -51,7 +57,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 Ein toller Einleitungstext für unsere `Teaser` Komponente:
 
 <Preview withToolbar>
-    <Story  name="Standard Hero" args={hero_teaser}>
+    <Story  name="Standard Hero" args={hero_teaser_with_comments}>
         {Template.bind({})} 
     </Story>
     <Story name="Standard Hero with Label" args={hero_teaser_with_label}>
@@ -63,7 +69,7 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
     <Story name="Standard LG" args={lg_teaser}>
         {Template.bind({})}
     </Story>
-    <Story name="Standard MD" args={md_teaser}>
+    <Story name="Standard MD" args={md_teaser_with_comments}>
         {Template.bind({})}
     </Story>   
     <Story name="Standard SM" args={sm_teaser}>

package/src/stories/views/components/Teaser/teaserText.hbs

@@ -0,0 +1 @@
+<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm leading-4 {{font}} mt-5 font-copy">{{text}}</span>

package/src/stories/views/components/Teaser/teaserText.stories.mdx

@@ -0,0 +1,57 @@
+import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
+
+import teaserTextComponent from "./teaserText.hbs";
+
+<Meta
+  title="Komponenten/Teaser/Komponenten/teaserText"
+  argTypes={{
+    text: {
+      control: "text",
+      description: "teaserText",
+    },
+    size: {
+      options: ["xl", "lg", "md", "sm"],
+      control: { type: "inline-radio" },
+    },
+    font : {
+     table: {
+          disable: true
+        }
+    },
+  }}
+/>
+
+export const Template = ({ text, ...args }) => {
+  return teaserTextComponent({ text, ...args });
+};
+
+# teaserText
+
+Beispiele für die teaserText-Komponente:
+
+<Preview withToolbar>
+  <Story
+    name="Teasertext"
+    args={{
+        text: "Dies ist der Teasertext eines normalen Teasers",
+        size: "xl",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Teasertext Hero-Teaser"
+    args={{
+        text: "Dies ist der Teasertext eines Hero-Teasers",
+        size: "xxl",
+        font: "md:text-base md:leading-4 lg:leading-5",
+    }}
+    parameters={{ 
+        controls: { 
+            exclude: ['size'] 
+        } 
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Preview>