hr-design-system-handlebars 1.90.2 → 1.91.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.91.0 (Fri Aug 09 2024)
+
+#### 🚀 Enhancement
+
+- Bug/dpe 3260 [#1046](https://github.com/mumprod/hr-design-system-handlebars/pull/1046) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.90.3 (Fri Aug 09 2024)
+
+#### 🐛 Bug Fix
+
+- refactoring of metadatabox [#1045](https://github.com/mumprod/hr-design-system-handlebars/pull/1045) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.90.2 (Thu Aug 08 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -439,7 +439,7 @@ video {
   --tw-gradient-to-position:  ;
 }
 
-.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .link, .link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
+.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .copytext-ds__link, .copytext-ds__link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -987,7 +987,7 @@ article.indexTextDS .indexTextHighlighted .link {
   text-decoration-thickness: 1px;
 }
 /* -----------------------------COPYTEXT ---------------------------- */
-.copytextParagraphDS .link:focus {
+.copytext-ds__link:focus {
   --tw-shadow: 0 0 0 0.25rem;
   --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -997,32 +997,46 @@ article.indexTextDS .indexTextHighlighted .link {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.copytextParagraphDS .link:focus:not(:focus-visible) {
+.copytext-ds__link:focus:not(:focus-visible) {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.copytextParagraphDS .link.ds-teaser-focus:focus {
+.copytext-ds__link.ds-teaser-focus:focus {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.copytextParagraphDS .link {
+.copytext-ds__link {
   color: #006eb7;
   color: var(--color-link);
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
   text-decoration-thickness: 1px;
 }
-.copytextParagraphDS .link:hover {
+.copytext-ds__link:hover {
   text-decoration-thickness: 1px;
 }
-[class~='tw-dark'] .copytextParagraphDS .link {
+[class~='tw-dark'] .copytext-ds__link {
   color: #006eb7;
   color: var(--color-link-dark);
 }
+.copytext-ds__icon {
+  margin-top: -0.125rem;
+  margin-left: 0.25rem;
+  display: inline;
+  fill: currentColor;
+}
+.copytext-ds__box .copytext-ds__icon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.copytext-ds__paragraph .copytext-ds__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1347,9 +1361,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-8 {
   margin-top: -2rem;
 }
-.-mt-\[18px\] {
-  margin-top: -18px;
-}
 .-mt-\[33px\] {
   margin-top: -33px;
 }
@@ -3327,7 +3338,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1723115931168;
+  counter-reset: cnt1723214517291;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3735,7 +3746,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1723115931168 1;
+  counter-increment: cnt1723214517291 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3751,7 +3762,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1723115931168);
+  content: counter(cnt1723214517291);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5961,6 +5972,35 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
             clear: both;
         }
     }
+
+    .print\:ar-16-9,.print\:ar-16-9 > img {
+        aspect-ratio: 16 / 9;
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .print\:ar-16-9::before {
+            float: left;
+            padding-top: calc(9 / 16 * 100%);
+            content: '';
+        }
+
+        .print\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:ar-16-9::before {
+            float: left;
+            padding-top: calc(9 / 16 * 100%);
+            content: '';
+        }
+
+        .print\:ar-16-9::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
 }
 @media (min-width: 360px) {
 

package/dist/views/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}{{#if _cssClasses}} {{_cssClasses}}{{/if}}">
     {{~> @partial-block ~}}
 </div>

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 
@@ -33,13 +33,13 @@
         {{#each this.paragraph}}
             {{#each this.text.split}}
                 {{#if this.isText}}
-                    <p class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                    <p class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
                 {{/if}}
                 {{#if this.isUl}}
-                    <ul class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                    <ul class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
                 {{/if}}
                 {{#if this.isOl}}
-                    <ol class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                    <ol class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
                 {{/if}}
             {{/each}}
         {{/each}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -31,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}

package/dist/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="mt-4 sm:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="copytext-ds__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views/components/page/components/author.hbs

@@ -19,9 +19,9 @@
 {{else}}
 
     {{#if this.hasOneAuthor~}}
-        <div class="flex items-center {{#if this.authorImage.isImage}}h-10{{else}}mb-1{{/if}}">
+        <div class="flex items-center">
             {{#if this.authorImage.isImage}}
-                <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                <div class="self-start w-10 h-10 mr-4 basis-10 grow-0">
                     {{~> components/base/image/responsive_image this.authorImage
                             _type="profile" 
                             _variant="ticker" 
@@ -31,13 +31,16 @@
                 </div>
             {{/if}}
             <div class="self-start text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
-                {{#unless _hideFrom }}Von{{/unless}}
-                {{#if this.authorUrl~}}
-                    <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="{{if (isUserConsentNeeded this.authorUrl) 'js-user-consent-needed ' ''}}ds-link text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
-                {{else}}
-                    {{this.authorTitle}}
-                {{/if}}
-                {{#with this.textAfterAuthor}} {{this}}{{/with}}
+                <div class="mb-1">
+                    {{#unless _hideFrom }}Von{{/unless}}
+                    {{#if this.authorUrl~}}
+                        <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="{{if (isUserConsentNeeded this.authorUrl) 'js-user-consent-needed ' ''}}ds-link text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
+                    {{else}}
+                        {{this.authorTitle}}
+                    {{/if}}
+                    {{#with this.textAfterAuthor}} {{this}}{{/with}}
+                </div>
+                {{> components/page/components/publicationdate }}
             </div>
         </div>
     {{~/if}}

package/dist/views/components/page/components/metadatabox.hbs

@@ -5,7 +5,13 @@
                 {{> components/page/components/author _hideFrom=false }}
 
                 {{#if _showDate }}
-                    {{> components/page/components/publicationdate }}
+                    {{#if this.hasMoreThanOneAuthor}}
+                        {{> components/page/components/publicationdate }}
+                    {{else}}
+                        {{#unless this.hasOneAuthor}}
+                            {{> components/page/components/publicationdate }}
+                        {{/unless}}
+                    {{/if}}
                 {{/if}}
 
                 {{> components/page/components/commentinfo }}

package/dist/views/components/page/components/publicationdate.hbs

@@ -1,4 +1,4 @@
-<div class="{{#unless this.hasMoreThanOneAuthor}}{{#if this.authorImage.isImage}}-mt-[18px] ml-14 {{/if}}{{/unless}}text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+<div class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
 
     {{#with this.documentModificationDate~}}
         

package/dist/views/components/page/story/story_article.hbs

@@ -15,7 +15,7 @@
                     _cssClassCaption="mx-5 md:mx-0"
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
-                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
+                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
                     _isWebview=../../../_webview-adjust_context
                     _noDelay=true}}
             {{/if}}

package/dist/views_static/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}{{#if _cssClasses}} {{_cssClasses}}{{/if}}">
     {{~> @partial-block ~}}
 </div>

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 
@@ -33,13 +33,13 @@
         {{#each this.paragraph}}
             {{#each this.text.split}}
                 {{#if this.isText}}
-                    <p class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                    <p class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
                 {{/if}}
                 {{#if this.isUl}}
-                    <ul class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                    <ul class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
                 {{/if}}
                 {{#if this.isOl}}
-                    <ol class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                    <ol class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
                 {{/if}}
             {{/each}}
         {{/each}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -31,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}

package/dist/views_static/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="mt-4 sm:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="copytext-ds__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views_static/components/page/components/author.hbs

@@ -19,9 +19,9 @@
 {{else}}
 
     {{#if this.hasOneAuthor~}}
-        <div class="flex items-center {{#if this.authorImage.isImage}}h-10{{else}}mb-1{{/if}}">
+        <div class="flex items-center">
             {{#if this.authorImage.isImage}}
-                <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                <div class="self-start w-10 h-10 mr-4 basis-10 grow-0">
                     {{~> components/base/image/responsive_image this.authorImage
                             _type="profile" 
                             _variant="ticker" 
@@ -31,13 +31,16 @@
                 </div>
             {{/if}}
             <div class="self-start text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
-                {{#unless _hideFrom }}Von{{/unless}}
-                {{#if this.authorUrl~}}
-                    <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="{{if (isUserConsentNeeded this.authorUrl) 'js-user-consent-needed ' ''}}ds-link text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
-                {{else}}
-                    {{this.authorTitle}}
-                {{/if}}
-                {{#with this.textAfterAuthor}} {{this}}{{/with}}
+                <div class="mb-1">
+                    {{#unless _hideFrom }}Von{{/unless}}
+                    {{#if this.authorUrl~}}
+                        <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="{{if (isUserConsentNeeded this.authorUrl) 'js-user-consent-needed ' ''}}ds-link text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
+                    {{else}}
+                        {{this.authorTitle}}
+                    {{/if}}
+                    {{#with this.textAfterAuthor}} {{this}}{{/with}}
+                </div>
+                {{> components/page/components/publicationdate }}
             </div>
         </div>
     {{~/if}}

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -5,7 +5,13 @@
                 {{> components/page/components/author _hideFrom=false }}
 
                 {{#if _showDate }}
-                    {{> components/page/components/publicationdate }}
+                    {{#if this.hasMoreThanOneAuthor}}
+                        {{> components/page/components/publicationdate }}
+                    {{else}}
+                        {{#unless this.hasOneAuthor}}
+                            {{> components/page/components/publicationdate }}
+                        {{/unless}}
+                    {{/if}}
                 {{/if}}
 
                 {{> components/page/components/commentinfo }}

package/dist/views_static/components/page/components/publicationdate.hbs

@@ -1,4 +1,4 @@
-<div class="{{#unless this.hasMoreThanOneAuthor}}{{#if this.authorImage.isImage}}-mt-[18px] ml-14 {{/if}}{{/unless}}text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+<div class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
 
     {{#with this.documentModificationDate~}}
         

package/dist/views_static/components/page/story/story_article.hbs

@@ -15,7 +15,7 @@
                     _cssClassCaption="mx-5 md:mx-0"
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
-                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
+                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
                     _isWebview=../_webview
                     _noDelay=true}}
             {{/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.90.2",
+  "version": "1.91.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -310,6 +310,24 @@ article.indexTextDS .indexTextHighlighted .link {
 }
 
 /* -----------------------------COPYTEXT ---------------------------- */
-.copytextParagraphDS .link {
-    @apply underline text-link decoration-1 hover:decoration-1 dark:text-link-dark ds-link;
-}
+.copytext-ds {
+    &__link {
+        @apply underline text-link decoration-1 hover:decoration-1 dark:text-link-dark ds-link;
+    }
+
+    &__icon {
+        @apply inline -mt-0.5 fill-current ml-1;
+    }
+
+    &__box {
+        .copytext-ds__icon {
+            @apply w-5 h-5;
+        }
+    }
+
+    &__paragraph {
+        .copytext-ds__icon {
+            @apply w-6 h-6;
+        }
+    }
+}

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

@@ -4,8 +4,8 @@
         "split": [
             {
                 "isText": true,
-                "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."
+                "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."
             }
-        ]   
+        ]
     }
-}
+}

package/src/assets/fixtures/page/metadatabox_one_author.json

@@ -11,6 +11,7 @@
         "time": "19:30"
     },
     "authorTitle": "Steffen Rebhahn",
+    "textAfterAuthor": "(Redaktion hessenschau.de)",
     "authorImage": {
         "@->jsoninclude": "page/story/story_images.inc.json",
         "@->contentpath": "author",

package/src/assets/fixtures/page/metadatabox_one_author_comments.json

@@ -15,6 +15,7 @@
         "quantity": "117"
     },
     "authorTitle": "Steffen Rebhahn",
+    "textAfterAuthor": "(Redaktion hessenschau.de)",
     "authorImage": {
         "@->jsoninclude": "page/story/story_images.inc.json",
         "@->contentpath": "author",

package/src/assets/fixtures/page/metadatabox_one_author_without_picture.json

@@ -11,6 +11,7 @@
         "time": "19:30"
     },
     "authorTitle": "Steffen Rebhahn",
+    "textAfterAuthor": "(Redaktion hessenschau.de)",
     "authorUrl": "/author-url",
     "webviewAuthorUrl": "webview-author-url",
     "socialSharing": {

package/src/stories/views/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}{{#if _cssClasses}} {{_cssClasses}}{{/if}}">
     {{~> @partial-block ~}}
 </div>

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 
@@ -33,13 +33,13 @@
         {{#each this.paragraph}}
             {{#each this.text.split}}
                 {{#if this.isText}}
-                    <p class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                    <p class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
                 {{/if}}
                 {{#if this.isUl}}
-                    <ul class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                    <ul class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
                 {{/if}}
                 {{#if this.isOl}}
-                    <ol class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                    <ol class="{{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
                 {{/if}}
             {{/each}}
         {{/each}}

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

@@ -1 +1 @@
-{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite und Ü","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}
+{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite und Ü","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -31,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="{{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}