hr-design-system-handlebars 1.50.13 → 1.50.14

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.50.14 (Wed Nov 22 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2593: Contentbox kommt aus Storybook [#762](https://github.com/mumprod/hr-design-system-handlebars/pull/762) (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.50.13 (Tue Nov 21 2023)
 
 #### 🐛 Bug Fix

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

@@ -143,6 +143,8 @@
     "ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
     "ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
     "ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
-    "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen"
+    "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+    "story_infobox_intro_sr": "Weitere Informationen",
+    "story_infobox_outro_sr": "Ende der weiteren Informationen"
 
 }

package/dist/assets/index.css

@@ -1164,6 +1164,9 @@ article.indexText ul {
 .float-right {
   float: right;
 }
+.float-left {
+  float: left;
+}
 .\!m-0 {
   margin: 0px !important;
 }
@@ -1289,6 +1292,9 @@ article.indexText ul {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .mb-7 {
   margin-bottom: 1.75rem;
 }
@@ -1361,6 +1367,9 @@ article.indexText ul {
 .mt-12 {
   margin-top: 3rem;
 }
+.mt-13 {
+  margin-top: 3.125rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -1376,9 +1385,18 @@ article.indexText ul {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-7 {
+  margin-top: 1.75rem;
+}
+.mt-7\.5 {
+  margin-top: 1.875rem;
+}
 .mt-\[1px\] {
   margin-top: 1px;
 }
@@ -1962,6 +1980,10 @@ article.indexText ul {
   border-left-width: 1px;
   border-right-width: 1px;
 }
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2049,6 +2071,10 @@ article.indexText ul {
   --tw-border-opacity: 1;
   border-color: rgba(224, 224, 224, var(--tw-border-opacity));
 }
+.border-gray-boulder {
+  --tw-border-opacity: 1;
+  border-color: rgba(121, 121, 121, var(--tw-border-opacity));
+}
 .border-navigation-border-color {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
@@ -2400,6 +2426,10 @@ article.indexText ul {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+.px-5\.5 {
+  padding-left: 1.3125rem;
+  padding-right: 1.3125rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -3058,7 +3088,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1700587370068;
+  counter-reset: cnt1700657771655;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3319,7 +3349,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1700587370068 1;
+  counter-increment: cnt1700657771655 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3335,7 +3365,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1700587370068);
+  content: counter(cnt1700657771655);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5010,6 +5040,14 @@ article.indexText ul {
     margin-top: 1rem;
   }
 
+  .sm480\:pb-7 {
+    padding-bottom: 1.75rem;
+  }
+
+  .sm480\:pb-7\.5 {
+    padding-bottom: 1.875rem;
+  }
+
   .sm480\:text-2xl {
     font-size: 1.375rem;
     line-height: 1.75rem;
@@ -5071,6 +5109,10 @@ article.indexText ul {
     margin-left: 2rem;
   }
 
+  .sm\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
   .sm\:mt-1 {
     margin-top: 0.25rem;
   }
@@ -5450,6 +5492,10 @@ article.indexText ul {
     width: 8rem;
   }
 
+  .md\:w-6\/12 {
+    width: 50%;
+  }
+
   .md\:w-8 {
     width: 2rem;
   }

package/dist/views/components/article/components/contentbox/contentbox.hbs

@@ -0,0 +1,12 @@
+<div class="border-y border-gray-boulder mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+    {{#if this.title}}
+        <h3 class="mt-6 -mb-1 text-lg font-normal contentbox font-headingSerif dark:text-text-dark">{{this.title}}</h3>
+    {{/if}}
+    {{#if (isStorybook)}}  
+        {{> components/article/components/contentbox/storybook-contentbox }} 
+    {{else}}            
+        {{> modules/story/copytext-contentbox ~}}
+    {{/if}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/dist/views/components/article/components/contentbox/storybook-contentbox.hbs

@@ -0,0 +1,15 @@
+{{#each this.copytextParagraph }}
+    {{#if this.isParagraph}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/if}}
+{{/each}}

package/dist/views/components/base/a11y/hiddenText.hbs

@@ -0,0 +1,22 @@
+{{!--@
+Creates a text element that is only relevant for screenreaders. It will not be visible at all.
+
+```hbs
+{{> base/a11y/hiddenText
+    _text="..."
+    _locaTag="..."
+    }}
+```
+
+`_text`     The text for the screen reader.<br>
+`_locaTag`  The loca tag for the text for the screen reader.<br>
+
+--}}
+<span class="sr-only">
+    {{~#if _text ~}}
+        {{~_text~}}
+    {{else}}
+        {{~#with _locaTag ~}}
+            {{~loca this ~}}
+        {{~/with~}}
+    {{~/if}} </span>

package/dist/views_static/components/article/components/contentbox/contentbox.hbs

@@ -0,0 +1,12 @@
+<div class="border-y border-gray-boulder mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+    {{#if this.title}}
+        <h3 class="mt-6 -mb-1 text-lg font-normal contentbox font-headingSerif dark:text-text-dark">{{this.title}}</h3>
+    {{/if}}
+    {{#if (isStorybook)}}  
+        {{> components/article/components/contentbox/storybook-contentbox }} 
+    {{else}}            
+        {{> modules/story/copytext-contentbox ~}}
+    {{/if}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/dist/views_static/components/article/components/contentbox/storybook-contentbox.hbs

@@ -0,0 +1,15 @@
+{{#each this.copytextParagraph }}
+    {{#if this.isParagraph}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/if}}
+{{/each}}

package/dist/views_static/components/base/a11y/hiddenText.hbs

@@ -0,0 +1,22 @@
+{{!--@
+Creates a text element that is only relevant for screenreaders. It will not be visible at all.
+
+```hbs
+{{> base/a11y/hiddenText
+    _text="..."
+    _locaTag="..."
+    }}
+```
+
+`_text`     The text for the screen reader.<br>
+`_locaTag`  The loca tag for the text for the screen reader.<br>
+
+--}}
+<span class="sr-only">
+    {{~#if _text ~}}
+        {{~_text~}}
+    {{else}}
+        {{~#with _locaTag ~}}
+            {{~loca this ~}}
+        {{~/with~}}
+    {{~/if}} </span>

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

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

@@ -143,6 +143,8 @@
     "ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
     "ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
     "ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
-    "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen"
+    "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+    "story_infobox_intro_sr": "Weitere Informationen",
+    "story_infobox_outro_sr": "Ende der weiteren Informationen"
 
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

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

@@ -144,6 +144,8 @@
 	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
 	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
+	"story_infobox_intro_sr": "Weitere Informationen",
+	"story_infobox_outro_sr": "Ende der weiteren Informationen",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

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

@@ -0,0 +1,44 @@
+{
+    "copytext": {
+        "title": "ContentBox Titel",
+        "showFullSize":{
+            "isTrue": true
+        },
+        "copytextParagraph": [
+            {
+                "paragraphBoxItem": {
+                    "isImage": true,
+                    "Image": {
+                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                        "@->contentpath": "teaser_standard",
+                        "@->replaceToken": [
+                            {
+                                "@->token": "image",
+                                "@->value": "hasebe-kane-102"
+                            }
+                        ]
+                    }
+                }
+            },
+            {
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
+                        },
+                        {
+                            "isUl": true,
+                            "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
+                        },
+                        {
+                            "isOl": true,
+                            "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
+                        }
+                    ]   
+                }
+            }
+        ]
+    }
+}

package/src/stories/views/components/article/components/contentbox/contentbox.hbs

@@ -0,0 +1,12 @@
+<div class="border-y border-gray-boulder mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+    {{#if this.title}}
+        <h3 class="mt-6 -mb-1 text-lg font-normal contentbox font-headingSerif dark:text-text-dark">{{this.title}}</h3>
+    {{/if}}
+    {{#if (isStorybook)}}  
+        {{> components/article/components/contentbox/storybook-contentbox }} 
+    {{else}}            
+        {{> modules/story/copytext-contentbox ~}}
+    {{/if}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+</div>

package/src/stories/views/components/article/components/contentbox/contentbox.mdx

@@ -0,0 +1,26 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as contentboxStories from './contentbox.stories'
+
+<Meta of={contentboxStories} />
+
+# Contentbox
+
+## Beschreibung
+
+
+## Parameter
+
+
+<ArgsTable story="default" />
+
+## Verwendung
+
+Die Contentbox-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/article/components/contentbox/contentbox }}
+```
+
+<Canvas withToolbar>
+    <Story of={contentboxStories.Default} />
+</Canvas>

package/src/stories/views/components/article/components/contentbox/contentbox.stories.js

@@ -0,0 +1,18 @@
+import contentbox from './contentbox.hbs'
+import contentboxJson from '../../../teaser/fixtures/contentbox.json'
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<span>${topline}</span>`;
+    return contentbox({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Artikel/Komponenten/Contentbox',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: contentboxJson.copytext,
+}

package/src/stories/views/components/article/components/contentbox/storybook-contentbox.hbs

@@ -0,0 +1,15 @@
+{{#each this.copytextParagraph }}
+    {{#if this.isParagraph}}
+        {{#each this.text.split}}
+            {{#if this.isText}}
+                <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/if}}
+{{/each}}

package/src/stories/views/components/base/a11y/hiddenText.hbs

@@ -0,0 +1,22 @@
+{{!--@
+Creates a text element that is only relevant for screenreaders. It will not be visible at all.
+
+```hbs
+{{> base/a11y/hiddenText
+    _text="..."
+    _locaTag="..."
+    }}
+```
+
+`_text`     The text for the screen reader.<br>
+`_locaTag`  The loca tag for the text for the screen reader.<br>
+
+--}}
+<span class="sr-only">
+    {{~#if _text ~}}
+        {{~_text~}}
+    {{else}}
+        {{~#with _locaTag ~}}
+            {{~loca this ~}}
+        {{~/with~}}
+    {{~/if}} </span>

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

@@ -0,0 +1 @@
+{"copytext":{"title":"ContentBox Titel","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"Image":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w, images/hasebe-kane-102_v-16to9__retina.jpg 1920w"}]}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"},{"isOl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}}]}}

package/tailwind.config.js

@@ -98,6 +98,8 @@ module.exports = {
             padding: {
                 '1.5': '0.375rem',
                 '2.5': '0.625rem',
+                '5.5': '1.3125rem',
+                '7.5': '1.875rem',
                 '11.5': '2.875rem',
                 '13': '3.25rem',
                 '3/4': '75%',
@@ -172,8 +174,8 @@ module.exports = {
                 11: '2.75rem',
             },
             margin: {
+                '7.5': '1.875rem',
                 '13': '3.125rem',
-                '13-2': '3.375rem',
                 '30': '7.5rem',
                 '240': '60rem',
                 'half-screen': '50vw',