hr-design-system-handlebars 1.51.7 → 1.51.9

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.51.9 (Mon Dec 18 2023)
+
+#### 🐛 Bug Fix
+
+- Banner print view bug [#794](https://github.com/mumprod/hr-design-system-handlebars/pull/794) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.51.8 (Fri Dec 15 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2680: add additional-info component [#793](https://github.com/mumprod/hr-design-system-handlebars/pull/793) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.51.7 (Thu Dec 14 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1481,9 +1481,6 @@ article.indexText ul {
 .hidden {
   display: none;
 }
-.aspect-auto {
-  aspect-ratio: auto;
-}
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -3211,7 +3208,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1702565331298;
+  counter-reset: cnt1702897335124;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3232,6 +3229,22 @@ article.indexText ul {
 /*! ****************************/
 /*! Aspect Ratio with fallback */
 /*! ****************************/
+.ar-auto {
+        aspect-ratio: auto;
+    }
+@supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
 .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -3280,6 +3293,23 @@ article.indexText ul {
             clear: both;
         }
     }
+.ar-auto {
+        aspect-ratio: auto;
+    }
+@supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
 /*! ********************************/
 /*! Aspect Ratio with fallback end */
 /*! ********************************/
@@ -3289,6 +3319,14 @@ article.indexText ul {
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+@media print {
+        .grid-page {
+            grid-template-columns:
+                [full-start] minmax(0, 1fr)
+                [main-start] minmax(0, 43.75rem) [main-end]
+                minmax(0, 1fr) [full-end];
+        }
+    }
 .grid-content {
         grid-template-areas:
     "head"
@@ -3472,7 +3510,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1702565331298 1;
+  counter-increment: cnt1702897335124 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3488,7 +3526,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1702565331298);
+  content: counter(cnt1702897335124);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5209,8 +5247,8 @@ article.indexText ul {
 }
 @media print {
 
-  .print\:absolute {
-    position: absolute;
+  .print\:static {
+    position: static;
   }
 
   .print\:flex {
@@ -5220,6 +5258,10 @@ article.indexText ul {
   .print\:hidden {
     display: none;
   }
+
+  .print\:overflow-auto {
+    overflow: auto;
+  }
 }
 @media (min-width: 360px) {
 
@@ -5259,6 +5301,10 @@ article.indexText ul {
     margin-top: 1rem;
   }
 
+  .sm480\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
@@ -5295,6 +5341,8 @@ article.indexText ul {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
+
+
     .sm480\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -5571,6 +5619,36 @@ article.indexText ul {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
+    .sm\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .sm\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .sm\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .sm\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .sm\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
     .sm\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6155,6 +6233,8 @@ article.indexText ul {
   .md\:transition-none {
     transition-property: none;
   }
+
+
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6827,6 +6907,77 @@ article.indexText ul {
     position: relative;
   }
 }
+@media print {
+
+  @media (min-width: 1024px) {
+
+    .print\:lg\:static {
+      position: static;
+    }
+
+    .print\:lg\:hidden {
+      display: none;
+    }
+    .print\:lg\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:lg\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:lg\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    .print\:lg\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:lg\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+        .print\:lg\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
+  }
+}
 @media (min-width: 768px) and (max-width: 1023px) {
 
   .tablet\:absolute {

package/dist/views/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/dist/views/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/dist/views/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 

package/dist/views/components/content/copytext/components/additionalinfo.hbs

@@ -1,5 +1,16 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Additional-info-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/additional-info ~}}
-{{~/if~}} 
+<div class="mt-3 text-xs sm480:text-sm sm480:mt-5 text-gray-scorpion dark:text-text-dark font-headingSerif">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-2">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-2 ml-5 list-disc">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-2 ml-4 list-decimal">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{~#block "subParagraphs"}}{{/block~}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/dist/views_static/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/dist/views_static/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/dist/views_static/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views_static/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/dist/views_static/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 

package/dist/views_static/components/content/copytext/components/additionalinfo.hbs

@@ -1,5 +1,16 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Additional-info-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/additional-info ~}}
-{{~/if~}} 
+<div class="mt-3 text-xs sm480:text-sm sm480:mt-5 text-gray-scorpion dark:text-text-dark font-headingSerif">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-2">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-2 ml-5 list-disc">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-2 ml-4 list-decimal">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{~#block "subParagraphs"}}{{/block~}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -6,6 +6,25 @@
     /*! ****************************/
     /*! Aspect Ratio with fallback */
     /*! ****************************/
+    .ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
     .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -146,6 +165,14 @@
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+    @media print {
+        .grid-page {
+            grid-template-columns:
+                [full-start] minmax(0, 1fr)
+                [main-start] minmax(0, 43.75rem) [main-end]
+                minmax(0, 1fr) [full-end];
+        }
+    }
 
     .grid-content {
         grid-template-areas:
@@ -230,7 +257,7 @@
     }
 
     .toggleSwitch-checkbox:focus+.toggleSwitch-label { 
-        @apply shadow-teaser-focus shadow-focus-state outline-none;
+        @apply outline-none shadow-teaser-focus shadow-focus-state;
     }
     
     .toggleSwitch-label {

package/src/assets/fixtures/content/copytext/copytext.inc.json

@@ -98,6 +98,26 @@
                 "isHeadline": true,
                 "text": "Weitere Absatztypen"
             },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isAdditionalInfo": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Dies ist eine Zusatzinfo !"
+                        },
+                        {
+                            "isUl": true,
+                            "text": "<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"
+                        },
+                        {
+                            "isOl": true,
+                            "text": "<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"
+                        }
+                    ]   
+                }     
+            },
             {
                 "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
                 "isInfoBox": true,
@@ -117,11 +137,6 @@
                 "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
                 "isJobposting": true,
                 "text": "Dies ist ein Jobposting"
-            },
-            {
-                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
-                "isAdditionalInfo": true,
-                "text": "Dies ist eine additional Info"
             }
         ]
     },
@@ -352,5 +367,79 @@
                 }                  
             }
         ]
-    }    
+    },
+    "copytext_additionalInfo": {
+        "copytextParagraph": [
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Speichermedien sowie Waffen und Munition sichergestellt"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        },
+                        {
+                            "isText": true,
+                            "text": "Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."
+                        }
+                    ]   
+                }                  
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isAdditionalInfo": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Sendung: hr-fernsehen, hessenschau, 13.12.2022, 19.30 Uhr"
+                        },
+                        {
+                            "isOl": true,
+                            "text": "<li>eins</li><li>zwei</li><li>drei</li>"
+                        },
+                        {
+                            "isUl": true,
+                            "text": "<li>eins</li><li>zwei</li><li>drei</li>"
+                        },
+                        {
+                            "isText": true,
+                            "text": "Quelle: hessenschau.de/Jörn Perske"
+                        }
+                    ]   
+                }     
+            }
+
+        ]
+    }     
 }    

package/src/assets/fixtures/content/copytext/copytext_additionalInfo.json

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "content/copytext/copytext.inc.json",
+    "@->contentpath": "copytext_additionalInfo"
+}

package/src/stories/views/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/src/stories/views/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/src/stories/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/src/stories/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/src/stories/views/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 

package/src/stories/views/components/content/copytext/components/additionalinfo.hbs

@@ -1,5 +1,16 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Additional-info-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/additional-info ~}}
-{{~/if~}} 
+<div class="mt-3 text-xs sm480:text-sm sm480:mt-5 text-gray-scorpion dark:text-text-dark font-headingSerif">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-2">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-2 ml-5 list-disc">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-2 ml-4 list-decimal">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{~#block "subParagraphs"}}{{/block~}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -1,6 +1,7 @@
 import copytext from './copytext.hbs'
 import copytext_json from './fixtures/copytext.json'
 import copytext_posterteaser_json from './fixtures/copytext_posterteaser.json'
+import copytext_additionalInfo_json from './fixtures/copytext_additionalInfo.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -20,4 +21,10 @@ export const WithPosterteaser = {
     render: Template.bind({}),
     name: 'Posterteaser',
     args: copytext_posterteaser_json,
+}
+
+export const WithAdditionalInfo = {
+    render: Template.bind({}),
+    name: 'Zusatzinfo',
+    args: copytext_additionalInfo_json,
 }

package/src/stories/views/components/content/copytext/fixtures/copytext.json

@@ -1 +1 @@
-{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."},{"isUl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"},{"isOl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."},{"isText":true,"text":"Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Medienbericht: Flaschenangriff auf Mitschüler"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isCite":true,"text":"Dies ist ein Zitat. Es wird über die volle Breite angezeigt.","paragraphProperties":[{"showFullSize":true,"citeAuthor":"Horst Schlemmer"}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isCite":true,"text":"Dies ist ein Zitat. Es wird über die halbe Breite angezeigt.","paragraphProperties":[{"showFullSize":false,"citeAuthor":"Horst Schlemmer"}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Weitere Absatztypen"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":"Dies ist eine Infobox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isDownloadBox":true,"text":"Dies ist eine Downloadbox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isFAQ":true,"text":"Dies ist ein FAQ-Absatz"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isJobposting":true,"text":"Dies ist ein Jobposting"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isAdditionalInfo":true,"text":"Dies ist eine additional Info"}]}
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."},{"isUl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"},{"isOl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."},{"isText":true,"text":"Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Medienbericht: Flaschenangriff auf Mitschüler"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isCite":true,"text":"Dies ist ein Zitat. Es wird über die volle Breite angezeigt.","paragraphProperties":[{"showFullSize":true,"citeAuthor":"Horst Schlemmer"}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isCite":true,"text":"Dies ist ein Zitat. Es wird über die halbe Breite angezeigt.","paragraphProperties":[{"showFullSize":false,"citeAuthor":"Horst Schlemmer"}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Weitere Absatztypen"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isAdditionalInfo":true,"text":{"split":[{"isText":true,"text":"Dies ist eine Zusatzinfo !"},{"isUl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"},{"isOl":true,"text":"<li>In der rund 1.200 Einwohner großen Gemeinde Waldbrunn</li><li>rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":"Dies ist eine Infobox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isDownloadBox":true,"text":"Dies ist eine Downloadbox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isFAQ":true,"text":"Dies ist ein FAQ-Absatz"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isJobposting":true,"text":"Dies ist ein Jobposting"}]}

package/src/stories/views/components/content/copytext/fixtures/copytext_additionalInfo.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."},{"isText":true,"text":"Nach Informationen der Rhein-Zeitung soll es im Frühjahr 2022 einen Zwischenfall an der Schule gegeben haben. Der heute 18-Jährige soll demnach einen Mitschüler beschimpft und nach einer verbalen Auseinandersetzung mit einer Flasche geschlagen haben."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet. Der Mitschüler erlitt dem Bericht zufolge eine Schienbeinprellung und eine kleine Schnittwunde. Die Eltern hätten daraufhin Anzeige erstattet – eine hr-Anfrage an die zuständige Polizei blieb bislang unbeantwortet."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isAdditionalInfo":true,"text":{"split":[{"isText":true,"text":"Sendung: hr-fernsehen, hessenschau, 13.12.2022, 19.30 Uhr"},{"isOl":true,"text":"<li>eins</li><li>zwei</li><li>drei</li>"},{"isUl":true,"text":"<li>eins</li><li>zwei</li><li>drei</li>"},{"isText":true,"text":"Quelle: hessenschau.de/Jörn Perske"}]}}]}