hr-design-system-handlebars 0.40.1 → 0.42.1

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.42.1 (Mon Apr 11 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1496 [#208](https://github.com/mumprod/hr-design-system-handlebars/pull/208) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.42.0 (Thu Apr 07 2022)
+
+#### 🚀 Enhancement
+
+- FEATURE: employs a loadDynamic template as a [#207](https://github.com/mumprod/hr-design-system-handlebars/pull/207) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.41.0 (Wed Apr 06 2022)
+
+#### 🚀 Enhancement
+
+- Bild für Standard-Teaser [#206](https://github.com/mumprod/hr-design-system-handlebars/pull/206) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.40.1 (Wed Apr 06 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/case.js

@@ -1,5 +1,6 @@
 module.exports = function (value, options) {
-  this.switch_value = value;
-  this.switch_break = false;
-  return options.fn(this);
-};
+    if (value == this.switch_value) {
+        this.switch_break = true
+        return options.fn(this)
+    }
+}

package/build/helpers/switch.js

@@ -1,6 +1,5 @@
 module.exports = function (value, options) {
-  if (value == this.switch_value) {
-    this.switch_break = true;
-    return options.fn(this);
-  }
-};
+    this.switch_value = value
+    this.switch_break = false
+    return options.fn(this)
+}

package/dist/assets/index.css

@@ -1514,15 +1514,15 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.mb-4 {
-    margin-bottom: 1rem;
-}
 .mt-4 {
     margin-top: 1rem;
 }
 .mt-1 {
     margin-top: 0.25rem;
 }
+.mb-4 {
+    margin-bottom: 1rem;
+}
 .mt-0\.5 {
     margin-top: 0.125rem;
 }
@@ -2000,9 +2000,13 @@ Ensure the default browser behavior of the `hidden` attribute.
 .p-2 {
     padding: 0.5rem;
 }
-.px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+.px-1\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+}
+.px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
 }
 .py-6 {
     padding-top: 1.5rem;
@@ -2040,6 +2044,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
 .py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
@@ -2056,6 +2064,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 1rem;
     padding-right: 1rem;
 }
+.pt-px {
+    padding-top: 1px;
+}
 .pl-4 {
     padding-left: 1rem;
 }
@@ -2092,9 +2103,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .pr-4 {
     padding-right: 1rem;
 }
-.pt-px {
-    padding-top: 1px;
-}
 .text-left {
     text-align: left;
 }
@@ -2142,7 +2150,7 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 2.25rem;
 }
 .text-4xl {
-    font-size: 2rem;
+    font-size: 2.125rem;
     line-height: 2.25rem;
 }
 .text-5xl {
@@ -2185,14 +2193,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
-.text-indigo-500 {
-    --tw-text-opacity: 1;
-    color: rgba(99, 102, 241, var(--tw-text-opacity));
-}
 .text-gray-500 {
     --tw-text-opacity: 1;
     color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
+.text-indigo-500 {
+    --tw-text-opacity: 1;
+    color: rgba(99, 102, 241, var(--tw-text-opacity));
+}
 .text-toplineColor {
     color: #006dc1;
     color: var(--color-topline);
@@ -2620,7 +2628,7 @@ Ensure the default browser behavior of the `hidden` attribute.
         padding-left: 0px;
     }
     .md\:text-4xl {
-        font-size: 2rem;
+        font-size: 2.125rem;
         line-height: 2.25rem;
     }
     .md\:drop-shadow-md {

package/dist/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}

package/dist/views/components/Label.hbs

@@ -1 +1,12 @@
-<span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
+<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
+    {{text}}
+</span>
+{{~#with this.byline ~}}
+    <span class="">
+        {{#if this.bylineSsi}}
+            {{{this.bylineSsi}}}
+        {{else}}
+            {{this.bylineText}}
+        {{/if}}
+    </span>
+{{~/with~}}

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

@@ -1,8 +1,13 @@
-<a href="#" class="hover:text-toplineColor">
-    <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
-        {{#if topline}}
-            {{> components/Teaser/Topline text=topline }}
-        {{/if}}
-        {{> components/Teaser/Title text=headline }}
-    </{{headlineTag}}>
-</a>
+{{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
+    {{#with this.content.label}}
+        <div class="mt-4">
+            {{> components/Label type=loca text=type}}
+        </div>
+    {{/with~}}    
+    <{{~ ../headlineTag }} class="{{../class}}" >
+        {{#with this.content.topline}}
+            {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
+        {{/with}}
+        {{> components/Teaser/Title text=../this.title font=../font size=../size }}
+    </{{~ ../headlineTag }}>
+{{/components/base/link}}   

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

@@ -0,0 +1,18 @@
+<article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
+    {{#>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}}  
+    {{#if labelType}}
+        <div class="mt-4">
+            {{> components/Label type=labelType text=labelText}}
+        </div>
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
+    {{else}}
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
+    {{/if}}
+    
+    <div class="mt-2 text-base font-copy">{{shorttext}}</div>
+    {{#if profiles}}
+        <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
+    {{/if}}
+</article>

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

@@ -1 +1 @@
-<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl","text-lg","text-2xl"]'}} font-headingSerif mt-0.5">{{text}}</span>
+<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl ","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>

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

@@ -1,6 +1,6 @@
 <span 
     class="block mt-4 text-base text-toplineColor font-heading"
-    aria-label="Zum Artikel: {{text}}"
+    aria-label="{{readMore}}: {{text}}"
 >
     {{text}}
 </span>

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

@@ -0,0 +1,13 @@
+function addLabel(json, label) {
+    json.link.content.label = label;
+    json.link.content.topline = false;
+}
+function removeLabel(json, topline) {
+  json.link.content.label = false;
+  json.link.content.topline = topline;
+}
+function changeTeaserSize(json, size) {
+  json.teasersize = size
+}
+export { addLabel, removeLabel, changeTeaserSize};
+//export default addLabel;

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

@@ -0,0 +1,5 @@
+{{#switch templatePath}}
+    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
+        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{/case}}
+{{/switch}}

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

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> (lookup . '_template') }}   
+    {{> components/base/loadDynamic templatePath=templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}        

package/package.json

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

package/src/stories/Typography.stories.mdx

@@ -94,7 +94,7 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
 | `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 2rem`    | `22px`<br />`32px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-4xl`          | `font-size: 2rem` <br /> `line-height: 2.25rem`     | `32px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.25rem` | `34px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung RobotoSlab
 

package/src/stories/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}

package/src/stories/views/components/Label.hbs

@@ -1 +1,12 @@
-<span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
+<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
+    {{text}}
+</span>
+{{~#with this.byline ~}}
+    <span class="">
+        {{#if this.bylineSsi}}
+            {{{this.bylineSsi}}}
+        {{else}}
+            {{this.bylineText}}
+        {{/if}}
+    </span>
+{{~/with~}}

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

@@ -1,8 +1,13 @@
-<a href="#" class="hover:text-toplineColor">
-    <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
-        {{#if topline}}
-            {{> components/Teaser/Topline text=topline }}
-        {{/if}}
-        {{> components/Teaser/Title text=headline }}
-    </{{headlineTag}}>
-</a>
+{{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
+    {{#with this.content.label}}
+        <div class="mt-4">
+            {{> components/Label type=loca text=type}}
+        </div>
+    {{/with~}}    
+    <{{~ ../headlineTag }} class="{{../class}}" >
+        {{#with this.content.topline}}
+            {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
+        {{/with}}
+        {{> components/Teaser/Title text=../this.title font=../font size=../size }}
+    </{{~ ../headlineTag }}>
+{{/components/base/link}}   

package/src/stories/views/components/Teaser/Teaser-Heading.stories.mdx

@@ -3,13 +3,17 @@ import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
 import teaserHeading from "./Teaser-Heading.hbs";
 
 <Meta
-  title="Komponenten/TeaserHeading"
+  title="Komponenten/Teaser/Komponenten/TeaserHeading"
   argTypes={{
-    topline: {
-      control: "text",
-      description: "Topline Text",
+    link:{
+      content:{
+        topline: {
+          control: "text",
+          description: "Topline Text",
+        }
+      }
     },
-    headline: {
+    title: {
       control: "text",
       description: "Headline Text",
     },
@@ -29,7 +33,7 @@ import teaserHeading from "./Teaser-Heading.hbs";
       description: "Schriftart",
       control: {
         type: "inline-radio",
-        options: ["headingSerif", "heading"],
+        options: ["font-headingSerif", "font-heading"],
       },
       table: {
         defaultValue: {
@@ -38,7 +42,7 @@ import teaserHeading from "./Teaser-Heading.hbs";
       },
     },
     size: {
-      options: ["lg", "sm"],
+      options: ["xxl", "md", "sm"],
       control: { type: "inline-radio" },
     },
   }}
@@ -58,7 +62,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
 
 <Canvas>
   <Story
-    name="Serif large"
+    name="Serif Hero"
     parameters={{
       docs: {
         source: {
@@ -69,11 +73,16 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
-      font: "headingSerif",
-      size: "lg",
+      font: "font-headingSerif",
+      size: "xxl",
+      link: {
+              content: {
+                topline: "Das ist eine wirklich sehr lange Topline"
+              },
+              url: "/teaser1"
+            }
     }}
   >
     {Template.bind({})}
@@ -97,11 +106,16 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
-      font: "headingSerif",
+      font: "font-headingSerif",
       size: "md",
+      link: {
+              content: {
+                topline: "Das ist eine wirklich sehr lange Topline"
+              },
+              url: "/teaser1"
+            }
     }}
   >
     {Template.bind({})}
@@ -123,11 +137,16 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
-      font: "headingSerif",
+      font: "font-headingSerif",
       size: "sm",
+      link: {
+        content: {
+          topline: "Das ist eine wirklich sehr lange Topline"
+        },
+        url: "/teaser1"
+      }
     }}
   >
     {Template.bind({})}

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

@@ -0,0 +1,18 @@
+<article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
+    {{#>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}}  
+    {{#if labelType}}
+        <div class="mt-4">
+            {{> components/Label type=labelType text=labelText}}
+        </div>
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
+    {{else}}
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
+    {{/if}}
+    
+    <div class="mt-2 text-base font-copy">{{shorttext}}</div>
+    {{#if profiles}}
+        <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
+    {{/if}}
+</article>

package/src/stories/views/components/Teaser/{Teaser.stories.mdx → Teaser.stories.mdx.old}

@@ -1,6 +1,7 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 
-import teaser from './Teaser.hbs'
+import teaser from './Teaser-default.hbs'
+import JsonData from './teaser_article.json'
 
 <Meta
     title="Komponenten/Teaser/Standard"

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

@@ -1 +1 @@
-<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl","text-lg","text-2xl"]'}} font-headingSerif mt-0.5">{{text}}</span>
+<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl ","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>

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

@@ -3,14 +3,14 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
 import titleComponent from "./Title.hbs";
 
 <Meta
-  title="Komponenten/Teaser/Titel"
+  title="Komponenten/Teaser/Komponenten/Titel"
   argTypes={{
     text: {
       control: "text",
       description: "Titel",
     },
     size: {
-      options: ["lg", "md", "sm"],
+      options: ["xxl","xl","lg", "md", "sm"],
       control: { type: "inline-radio" },
     },
   }}
@@ -28,28 +28,31 @@ Beispiele für die Titel-Komponente:
 
 <Preview withToolbar>
   <Story
-    name="title-large"
+    name="Titel Serif - Hero"
     args={{
         text: "Dies ist der Titel eines 100%-Teasers",
-        size: "lg",
+        size: "xxl",
+        font: "font-headingSerif"
     }}
   >
     {Template.bind({})}
   </Story>
   <Story
-    name="title-medium"
+    name="Titel Serif - normal"
     args={{
         text: "Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers",
         size: "md",
+        font: "font-headingSerif"
     }}
   >
     {Template.bind({})}
   </Story>
   <Story
-    name="title-small"
+    name="Titel Serif - small"
     args={{
         text: "Dies ist der Titel eines 25%-Teasers",
         size: "sm",
+        font: "font-headingSerif"
     }}
   >
     {Template.bind({})}

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

@@ -1,6 +1,6 @@
 <span 
     class="block mt-4 text-base text-toplineColor font-heading"
-    aria-label="Zum Artikel: {{text}}"
+    aria-label="{{readMore}}: {{text}}"
 >
     {{text}}
 </span>

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

@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
 import topline from "./Topline.hbs";
 
 <Meta
-  title="Komponenten/Teaser/Dachzeile"
+  title="Komponenten/Teaser/Komponenten/Dachzeile"
   argTypes={{
     text: {
       control: "text",

package/src/stories/views/components/Teaser/{teaser_article.json → data/teaser_article.json}

@@ -2,6 +2,7 @@
             "byline": "Byline",
             "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
             "topline": "Überglücklich, aber ohne Mama",
+            "serifHeading": true,
             "extendedTitle": null,
             "teasertype": "standard",
             "teasersize": "100",
@@ -77,7 +78,7 @@
             "headingSize": "h1",
             "icon": "ortsmarke",
             "imageVariant": "topteaser",
-            "shorttext": "shorttext",
+            "shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
             "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
             "profiles": "Von Alf Haubitz und Alice Merton",
             "teaserLead": {
@@ -88,7 +89,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -146,7 +147,7 @@
                         "type": "Ticker",
                         "loca": "ticker",
                         "byline": {
-                            "bylineSsi": "ssi",
+                            "bylineSsi": "BylineText aus ssi",
                             "bylineText": "BylineText"
                         }
                     }

package/src/stories/views/components/Teaser/{teaser_full.json → data/teaser_full.json}

@@ -103,7 +103,7 @@
                                     "type": "Ticker",
                                     "loca": "ticker",
                                     "byline": {
-                                        "bylineSsi": "ssi",
+                                        "bylineSsi": "BylineText aus ssi",
                                         "bylineText": "BylineText"
                                     }
                                 },
@@ -161,7 +161,7 @@
                                             "type": "Ticker",
                                             "loca": "ticker",
                                             "byline": {
-                                                "bylineSsi": "ssi",
+                                                "bylineSsi": "BylineText aus ssi",
                                                 "bylineText": "BylineText"
                                             }
                                         }