hr-design-system-handlebars 1.50.8 → 1.50.10

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.50.10 (Mon Nov 20 2023)
+
+#### 🐛 Bug Fix
+
+- Fixxed some px values in Typography documentation [#758](https://github.com/mumprod/hr-design-system-handlebars/pull/758) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.50.9 (Mon Nov 20 2023)
+
+#### 🐛 Bug Fix
+
+- add featured-content-component [#757](https://github.com/mumprod/hr-design-system-handlebars/pull/757) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.50.8 (Fri Nov 17 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/_default/conf/locatags.json

@@ -29,6 +29,7 @@
     "event_status_moved_online_short": "Als Livestream!",
     "event_status_gets_update": "Wird aktualisiert!",
     "feature_box_anchor": "Livestream Player anspringen",
+    "featured_content_headline": "Mehr zum Thema:",
     "gallery_image_copyright": "Bild © {0}",
     "geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
     "geotag_metadescription_prefix": "",

package/dist/assets/index.css

@@ -533,7 +533,7 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 0.75rem;
-  line-height: 1.063rem;
+  line-height: 1.0625rem;
 }
 .btn--md {
   padding-left: 1.25rem;
@@ -541,7 +541,7 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: 0.875rem;
-  line-height: 1.188rem;
+  line-height: 1.1875rem;
 }
 .btn--lg {
   padding-left: 1.5rem;
@@ -2645,15 +2645,15 @@ article.indexText ul {
 }
 .text-sm {
   font-size: 0.875rem;
-  line-height: 1.188rem;
+  line-height: 1.1875rem;
 }
 .text-xl {
   font-size: 1.25rem;
-  line-height: 1.675rem;
+  line-height: 1.6875rem;
 }
 .text-xs {
   font-size: 0.75rem;
-  line-height: 1.063rem;
+  line-height: 1.0625rem;
 }
 .\!font-bold {
   font-weight: 700 !important;
@@ -3055,7 +3055,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1700228596250;
+  counter-reset: cnt1700494081377;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3063,15 +3063,15 @@ article.indexText ul {
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
-  line-height: 1.063rem;
+  line-height: 1.0625rem;
 }
 .placeholder-text-xs::-moz-placeholder {
   font-size: 0.75rem;
-  line-height: 1.063rem;
+  line-height: 1.0625rem;
 }
 .placeholder-text-xs::placeholder {
   font-size: 0.75rem;
-  line-height: 1.063rem;
+  line-height: 1.0625rem;
 }
 /*! ****************************/
 /*! Aspect Ratio with fallback */
@@ -3316,7 +3316,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1700228596250 1;
+  counter-increment: cnt1700494081377 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3332,7 +3332,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1700228596250);
+  content: counter(cnt1700494081377);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5197,7 +5197,7 @@ article.indexText ul {
 
   .sm\:text-xl {
     font-size: 1.25rem;
-    line-height: 1.675rem;
+    line-height: 1.6875rem;
   }
     .sm\:ar-16-9 {
         aspect-ratio: 16 / 9;

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

@@ -37,4 +37,8 @@
             {{> components/teaser/components/teaser_byline}} 
         </div>
     {{/unless}}
+
+    {{!--Featured Content--}}
+    {{> components/teaser/components/teaser_featured_content}}
+
 </div>

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

@@ -0,0 +1,16 @@
+{{#if this.showFeaturedContent}}
+    {{#if this.featuredContentItems}}
+        <div class="relative ds-focus sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}} {{inline-switch _size '["25"]' '["hidden "]'~}}">
+            <span class="block mt-4 text-base font-heading">{{loca "featured_content_headline"}}</span>
+            <ul class="list-disc">
+                {{#each this.featuredContentItems}}
+                    <li class="mt-3 ml-4">
+                        {{#> components/base/link _link=this.link _css="hover:underline relative inline text-link text-sm ds-focus" }}
+                            {{this.title}}
+                        {{/components/base/link}}
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    {{/if}}
+{{/if}}

package/dist/views_static/components/teaser/components/teaser_body.hbs

@@ -37,4 +37,8 @@
             {{> components/teaser/components/teaser_byline}} 
         </div>
     {{/unless}}
+
+    {{!--Featured Content--}}
+    {{> components/teaser/components/teaser_featured_content}}
+
 </div>

package/dist/views_static/components/teaser/components/teaser_featured_content.hbs

@@ -0,0 +1,16 @@
+{{#if this.showFeaturedContent}}
+    {{#if this.featuredContentItems}}
+        <div class="relative ds-focus sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}} {{inline-switch _size '["25"]' '["hidden "]'~}}">
+            <span class="block mt-4 text-base font-heading">{{loca "featured_content_headline"}}</span>
+            <ul class="list-disc">
+                {{#each this.featuredContentItems}}
+                    <li class="mt-3 ml-4">
+                        {{#> components/base/link _link=this.link _css="hover:underline relative inline text-link text-sm ds-focus" }}
+                            {{this.title}}
+                        {{/components/base/link}}
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    {{/if}}
+{{/if}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.50.8",
+    "version": "1.50.10",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -55,7 +55,7 @@
         "auto": "^10.26.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.2",
-        "chromatic": "^5.6.2",
+        "chromatic": "^9.1.0",
         "copyfiles": "^2.4.1",
         "core-js-pure": "^3.30.1",
         "cross-env": "^7.0.3",

package/src/assets/brand/_default/conf/locatags.json

@@ -29,6 +29,7 @@
     "event_status_moved_online_short": "Als Livestream!",
     "event_status_gets_update": "Wird aktualisiert!",
     "feature_box_anchor": "Livestream Player anspringen",
+    "featured_content_headline": "Mehr zum Thema:",
     "gallery_image_copyright": "Bild © {0}",
     "geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
     "geotag_metadescription_prefix": "",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -29,6 +29,7 @@
 	"event_status_moved_online_short": "Als Livestream!",
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
+	"featured_content_headline": "Mehr zum Thema:",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

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

@@ -0,0 +1,38 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser.logicItem.includeModel",
+    "@->extends": {
+        "@->jsoninclude": "teaser/teaser_featured_content.inc.json"
+    },
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "teaserType",
+            "@->value": "alternative"
+        },
+        {
+            "@->contentpath": "isMobile1to1",
+            "@->value": true
+        },
+        {
+            "@->contentpath": "teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "teaser_alternative_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "rueckkehr-nach-abschiebung-102"
+                    }
+                ]
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,50 @@
+{
+    "showFeaturedContent": true,
+    "featuredContentItems": [
+        {
+            "title": "Lindemann-Konzert in Kassel abgesagt",
+            "link": {
+                "url": "/teaser1",
+                "webviewUrl": "/teaser1#webview",
+                "isTargetBlank": false,
+                "hasIcon": false,
+                "iconName": "iconName",
+                "readMoreText": {
+                    "readMoreScreenreader": "Zum Artikel",
+                    "readMore": "mehr",
+                    "readMoreLong": "read More Long"
+                }
+            }
+        },
+        {
+            "title": "Ex-Kraftwerk-Mitglied vertont Stummfilm-Klassiker | Video",
+            "link": {
+                "url": "/teaser2",
+                "webviewUrl": "/teaser2#webview",
+                "isTargetBlank": false,
+                "hasIcon": false,
+                "iconName": "iconName",
+                "readMoreText": {
+                    "readMoreScreenreader": "Zum Videp",
+                    "readMore": "mehr",
+                    "readMoreLong": "read More Long"
+                }
+            }
+        },
+        {
+            "title": "Lilien-Trainingslager wieder in El Saler | Audio",
+            "link": {
+                "url": "/teaser3",
+                "webviewUrl": "/teaser3#webview",
+                "isTargetBlank": false,
+                "hasIcon": false,
+                "iconName": "iconName",
+                "readMoreText": {
+                    "readMoreScreenreader": "Zum Audio",
+                    "readMore": "mehr",
+                    "readMoreLong": "read More Long"
+                }
+            }
+        }
+    ]
+}    

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

@@ -0,0 +1,3 @@
+{
+    "@->jsoninclude": "teaser/teaser_featured_content.inc.json"
+}

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

@@ -0,0 +1,17 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser.logicItem.includeModel",
+    "@->extends": {
+        "@->jsoninclude": "teaser/teaser_featured_content.inc.json"
+    },
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        }
+    ]
+}

package/src/stories/Typography.mdx

@@ -12,14 +12,14 @@ die Schriftart **DIN**. Überschriften werden mit **Roboto** ausgezeichnet und M
 
 Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verfügung:
 
-| Klasse      | Properties                                          | Pixel Werte        | Erläuterung                                           |
-| :---------- | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
-| `font-copy` | `font-family: DIN, sans-serif`                      |                    | Setzt die Eigenschaft `font-family`                   |
-| `text-xs`   | `font-size: 0.75rem` <br /> `line-height: 1rem`     | `12px`<br />`16px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-sm`   | `font-size: 0.875rem` <br /> `line-height: 1.88rem` | `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-base` | `font-size: 1rem` <br /> `line-height: 1.375rem`    | `16px`<br />`22px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-lg`   | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-xl`   | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| Klasse      | Properties                                           | Pixel Werte        | Erläuterung                                           |
+| :---------- | :--------------------------------------------------- | ------------------ | :---------------------------------------------------- |
+| `font-copy` | `font-family: DIN, sans-serif`                       |                    | Setzt die Eigenschaft `font-family`                   |
+| `text-xs`   | `font-size: 0.75rem` <br /> `line-height: 1.0625rem` | `12px`<br />`17px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-sm`   | `font-size: 0.875rem` <br /> `line-height: 1.1875rem`| `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-base` | `font-size: 1rem` <br /> `line-height: 1.375rem`     | `16px`<br />`22px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-lg`   | `font-size: 1.125rem` <br /> `line-height: 1.5rem`   | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-xl`   | `font-size: 1.25rem` <br /> `line-height: 1.6875rem` | `20px`<br />`27px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung
 
@@ -90,7 +90,7 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
 | `font-headingSerif` | `font-family: RobotoSlab, serif`                     |                    | Setzt die Eigenschaft `font-family`                   |
 | `font-heading`      | `font-family: RobotoCond, sans-serif`                |                    | Setzt die Eigenschaft `font-family`                   |
 | `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.5rem`   | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.675rem`  | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.6875rem` | `20px`<br />`27px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 1.75rem`  | `22px`<br />`28px` | 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: 2.125rem` <br /> `line-height: 2.375rem` | `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |

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

@@ -37,4 +37,8 @@
             {{> components/teaser/components/teaser_byline}} 
         </div>
     {{/unless}}
+
+    {{!--Featured Content--}}
+    {{> components/teaser/components/teaser_featured_content}}
+
 </div>

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

@@ -0,0 +1,16 @@
+{{#if this.showFeaturedContent}}
+    {{#if this.featuredContentItems}}
+        <div class="relative ds-focus sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}} {{inline-switch _size '["25"]' '["hidden "]'~}}">
+            <span class="block mt-4 text-base font-heading">{{loca "featured_content_headline"}}</span>
+            <ul class="list-disc">
+                {{#each this.featuredContentItems}}
+                    <li class="mt-3 ml-4">
+                        {{#> components/base/link _link=this.link _css="hover:underline relative inline text-link text-sm ds-focus" }}
+                            {{this.title}}
+                        {{/components/base/link}}
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    {{/if}}
+{{/if}}

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

@@ -0,0 +1,25 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserFeaturedContentStories from './teaser_featured_content.stories'
+
+<Meta of={TeaserFeaturedContentStories} />
+
+# Zeilenteaser
+
+## Beschreibung
+
+Im Zeilentaeser werden links zu featured Dokumenten angezeigt. Er wird unterhalb des Teasertextes bzw. unterhalb der Byline angezeigt.
+Beispiele: [Standard 50 mit Zeilenteaser](?path=/story/komponenten-teaser-standard--standard-50-mit-featured-content), [Alternativ 100 mit Zeilenteaser](?path=/story/komponenten-teaser-alternativ--alternativ-100-mit-featured-content)
+
+## Verwendung
+
+Die Zeilenteaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_featured_content}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserFeaturedContentStories.Default} />
+</Canvas>
+
+<ArgsTable story="default" />

package/src/stories/views/components/teaser/components/teaser_featured_content.stories.js

@@ -0,0 +1,16 @@
+import featuredcontent from './teaser_featured_content.hbs'
+import teaserFeaturedContent from '../fixtures/teaser_featured_content.json'
+
+const Template = ({ ...args }) => {
+    return featuredcontent({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Komponenten/Zeilenteaser',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: teaserFeaturedContent,
+}

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

@@ -0,0 +1 @@
+{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative","teaserSize":"100","realTeaserSize":"100","isMobile1to1":true,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"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.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"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"}},"showFeaturedContent":true,"featuredContentItems":[{"title":"Lindemann-Konzert in Kassel abgesagt","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Ex-Kraftwerk-Mitglied vertont Stummfilm-Klassiker | Video","link":{"url":"/teaser2","webviewUrl":"/teaser2#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Videp","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Lilien-Trainingslager wieder in El Saler | Audio","link":{"url":"/teaser3","webviewUrl":"/teaser3#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Audio","readMore":"mehr","readMoreLong":"read More Long"}}}]}

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

@@ -0,0 +1 @@
+{"showFeaturedContent":true,"featuredContentItems":[{"title":"Lindemann-Konzert in Kassel abgesagt","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Ex-Kraftwerk-Mitglied vertont Stummfilm-Klassiker | Video","link":{"url":"/teaser2","webviewUrl":"/teaser2#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Videp","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Lilien-Trainingslager wieder in El Saler | Audio","link":{"url":"/teaser3","webviewUrl":"/teaser3#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Audio","readMore":"mehr","readMoreLong":"read More Long"}}}]}

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

@@ -0,0 +1 @@
+{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"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.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"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"}},"showFeaturedContent":true,"featuredContentItems":[{"title":"Lindemann-Konzert in Kassel abgesagt","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Ex-Kraftwerk-Mitglied vertont Stummfilm-Klassiker | Video","link":{"url":"/teaser2","webviewUrl":"/teaser2#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Videp","readMore":"mehr","readMoreLong":"read More Long"}}},{"title":"Lilien-Trainingslager wieder in El Saler | Audio","link":{"url":"/teaser3","webviewUrl":"/teaser3#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Audio","readMore":"mehr","readMoreLong":"read More Long"}}}]}

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

@@ -8,6 +8,7 @@ import heroTeaserLink from './fixtures/teaser_alternative_hero_serif_link.json'
 import heroTeaserProgram from './fixtures/teaser_alternative_hero_serif_program.json'
 import teaser100Link from './fixtures/teaser_alternative_100_serif_link.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
+import teaser100FeaturedContent from './fixtures/teaser_alternative_100_serif_featured_content.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
 import teaser50WithoutTeaserImage from './fixtures/teaser_alternative_without_teaserimage_50_serif.json'
 import teaser50Link from './fixtures/teaser_alternative_50_serif_link.json'
@@ -101,6 +102,12 @@ export const Alternativ100MitExternemLink = {
     args: teaser100Link.logicItem.includeModel,
 }
 
+export const Alternativ100MitFeaturedContent = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 mit Zeilenteaser',
+    args: teaser100FeaturedContent,
+}
+
 export const Alternativ50 = {
     render: Template.bind({}),
     name: 'Alternativ 50',

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

@@ -6,6 +6,7 @@ import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
 import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
 import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
 import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
+import teaser50SerifFeaturedContent from'./fixtures/teaser_standard_50_serif_featured_content'
 import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
 import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
 import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'
@@ -123,6 +124,12 @@ export const Standard50MitExternemLink = {
     args: teaser50Link.logicItem.includeModel,
 }
 
+export const Standard50MitFeaturedContent = {
+    render: Template.bind({}),
+    name: 'Standard 50 mit Zeilenteaser',
+    args: teaser50SerifFeaturedContent,
+}
+
 export const Standard33 = {
     render: Template.bind({}),
     name: 'Standard 33',

package/tailwind.config.js

@@ -53,11 +53,11 @@ module.exports = {
                 'logo-footer' : 'var(--rounded-logo-footer)',
             },
             fontSize: {
-                'xs': ['0.75rem', '1.063rem'],
-                'sm': ['0.875rem', '1.188rem'],
+                'xs': ['0.75rem', '1.0625rem'],
+                'sm': ['0.875rem', '1.1875rem'],
                 'base': ['1rem', '1.375rem'],
                 'lg': ['1.125rem', '1.5rem'],
-                'xl': ['1.25rem', '1.675rem'],
+                'xl': ['1.25rem', '1.6875rem'],
                 '2xl': ['1.375rem', '1.75rem'],
                 '4xl': ['2.125rem', '2.375rem'],
             },