hr-design-system-handlebars 1.51.9 → 1.51.11

package/dist/assets/index.css

@@ -1229,6 +1229,10 @@ article.indexText ul {
   margin-left: 1.25rem;
   margin-right: 1.25rem;
 }
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1430,6 +1434,9 @@ article.indexText ul {
 .mt-\[1px\] {
   margin-top: 1px;
 }
+.mt-px {
+  margin-top: 1px;
+}
 .box-border {
   box-sizing: border-box;
 }
@@ -2817,6 +2824,9 @@ article.indexText ul {
 .italic {
   font-style: italic;
 }
+.not-italic {
+  font-style: normal;
+}
 .\!leading-6 {
   line-height: 1.5rem !important;
 }
@@ -3208,7 +3218,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1702897335124;
+  counter-reset: cnt1703256994857;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3510,7 +3520,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1702897335124 1;
+  counter-increment: cnt1703256994857 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3526,7 +3536,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1702897335124);
+  content: counter(cnt1703256994857);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5262,6 +5272,64 @@ article.indexText ul {
   .print\:overflow-auto {
     overflow: auto;
   }
+    .print\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    .print\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+        .print\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
 }
 @media (min-width: 360px) {
 
@@ -5279,6 +5347,11 @@ article.indexText ul {
 }
 @media (min-width: 480px) {
 
+  .sm480\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
   .sm480\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -5305,10 +5378,18 @@ article.indexText ul {
     margin-top: 1.25rem;
   }
 
+  .sm480\:h-8 {
+    height: 2rem;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
 
+  .sm480\:w-8 {
+    width: 2rem;
+  }
+
   .sm480\:pb-7 {
     padding-bottom: 1.75rem;
   }
@@ -5429,6 +5510,69 @@ article.indexText ul {
         }
     }
 }
+@media print {
+
+  @media (min-width: 480px) {
+    .print\:sm480\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:sm480\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:sm480\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:sm480\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:sm480\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    .print\:sm480\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:sm480\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:sm480\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+        .print\:sm480\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:sm480\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:not-sr-only {
@@ -5466,11 +5610,20 @@ article.indexText ul {
     order: 2;
   }
 
+  .sm\:float-left {
+    float: left;
+  }
+
   .sm\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
   }
 
+  .sm\:mx-14 {
+    margin-left: 3.5rem;
+    margin-right: 3.5rem;
+  }
+
   .sm\:mx-8 {
     margin-left: 2rem;
     margin-right: 2rem;
@@ -5480,10 +5633,18 @@ article.indexText ul {
     margin-bottom: 1.75rem;
   }
 
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .sm\:ml-8 {
     margin-left: 2rem;
   }
 
+  .sm\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
   .sm\:mr-6 {
     margin-right: 1.5rem;
   }
@@ -5500,6 +5661,10 @@ article.indexText ul {
     display: block;
   }
 
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
+
   .sm\:w-5\/12 {
     width: 41.666667%;
   }
@@ -5774,10 +5939,6 @@ article.indexText ul {
     grid-column: span 9 / span 9;
   }
 
-  .md\:float-left {
-    float: left;
-  }
-
   .md\:m-3 {
     margin: 0.75rem;
   }
@@ -5816,10 +5977,6 @@ article.indexText ul {
     margin-bottom: 0.75rem;
   }
 
-  .md\:mb-7 {
-    margin-bottom: 1.75rem;
-  }
-
   .md\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -5832,10 +5989,6 @@ article.indexText ul {
     margin-left: 1rem;
   }
 
-  .md\:ml-6 {
-    margin-left: 1.5rem;
-  }
-
   .md\:mr-5 {
     margin-right: 1.25rem;
   }
@@ -6358,6 +6511,69 @@ article.indexText ul {
     padding-top: 0px;
   }
 }
+@media print {
+
+  @media (min-width: 768px) {
+    .print\:md\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:md\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:md\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:md\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:md\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    .print\:md\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:md\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:md\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+        .print\:md\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:md\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
+  }
+}
 @media (min-width: 1024px) {
 
   .lg\:fixed {

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 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}} 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}}">
+        <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 print:ar-auto print:sm480:ar-auto print:md:ar-auto{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

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

@@ -1,13 +1,15 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}clear-both mt-7{{else}}mr-0 md:mr-5 mb-0 md:mb-7 mt-7 w-full md:w-1/2 md:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-7{{else}}mr-0 sm:mr-5 mb-0 sm:mb-7 mt-7 w-full sm:w-1/2 sm:float-left{{/if}}">
+    {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
-    <blockquote class="">
-        <cite class="block text-base italic font-bold font-headingSerif md:ml-6 sm480:text-lg dark:text-text-dark">„{{{this.text}}}“</cite>
+    <blockquote>
+        <cite class="block mx-8 text-base not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl dark:text-text-dark">{{{this.text}}}</cite>
         {{#with this.paragraphProperties}}
             {{#with this.[0]}}
                 {{#with this.citeAuthor}}
-                    <span class="block md:ml-6 italic mt-2.5 font-headingSerif text-sm text-gray-scorpion">
+                    <span class="block mx-8 mt-3 text-xs sm480:mx-10 sm480:text-sm sm:mx-14 font-headingSerif text-gray-scorpion dark:text-text-dark">
                         <span class="sr-only">{{loca "story_cite_author_sr" }}</span>
-                        {{this}}</span>
+                        {{this}}
+                    </span>
                 {{/with}}
             {{/with}}
         {{/with}}

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

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

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 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}} 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}}">
+        <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 print:ar-auto print:sm480:ar-auto print:md:ar-auto{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

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

@@ -1,13 +1,15 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}clear-both mt-7{{else}}mr-0 md:mr-5 mb-0 md:mb-7 mt-7 w-full md:w-1/2 md:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-7{{else}}mr-0 sm:mr-5 mb-0 sm:mb-7 mt-7 w-full sm:w-1/2 sm:float-left{{/if}}">
+    {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
-    <blockquote class="">
-        <cite class="block text-base italic font-bold font-headingSerif md:ml-6 sm480:text-lg dark:text-text-dark">„{{{this.text}}}“</cite>
+    <blockquote>
+        <cite class="block mx-8 text-base not-italic sm480:mx-10 font-headingSerif sm:mx-14 sm480:text-xl dark:text-text-dark">{{{this.text}}}</cite>
         {{#with this.paragraphProperties}}
             {{#with this.[0]}}
                 {{#with this.citeAuthor}}
-                    <span class="block md:ml-6 italic mt-2.5 font-headingSerif text-sm text-gray-scorpion">
+                    <span class="block mx-8 mt-3 text-xs sm480:mx-10 sm480:text-sm sm:mx-14 font-headingSerif text-gray-scorpion dark:text-text-dark">
                         <span class="sr-only">{{loca "story_cite_author_sr" }}</span>
-                        {{this}}</span>
+                        {{this}}
+                    </span>
                 {{/with}}
             {{/with}}
         {{/with}}

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

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

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

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

@@ -62,22 +62,22 @@
             {
                 "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
                 "isCite": true,
-                "text":"Dies ist ein Zitat. Es wird über die volle Breite angezeigt.",
+                "text":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
                 "paragraphProperties": [
                     {
                         "showFullSize":true,
-                        "citeAuthor":"Horst Schlemmer"
+                        "citeAuthor":"Marlene Dietrich"
                     }
                 ]
             },
             {
                 "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
                 "isCite": true,
-                "text":"Dies ist ein Zitat. Es wird über die halbe Breite angezeigt.",
+                "text":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
                 "paragraphProperties": [
                     {
                         "showFullSize":false,
-                        "citeAuthor":"Horst Schlemmer"
+                        "citeAuthor":"Marlene Dietrich"
                     }
                 ]
             },
@@ -88,7 +88,7 @@
                     "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."
+                            "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."
                         }
                     ]   
                 }                  
@@ -441,5 +441,72 @@
             }
 
         ]
-    }     
+    },
+    "copytext_cite": {
+        "copytextParagraph": [
+            {
+                "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":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+                "paragraphProperties": [
+                    {
+                        "showFullSize":true,
+                        "citeAuthor":"Marlene Dietrich"
+                    }
+                ]
+            },
+            {
+                "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":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+                "paragraphProperties": [
+                    {
+                        "showFullSize":false,
+                        "citeAuthor":"Marlene Dietrich"
+                    }
+                ]
+            },
+            {
+                "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."
+                        }
+                    ]   
+                }                  
+            }
+        ]
+    }
 }    

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

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

package/src/assets/icons/icons/svgmap/quotation.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 66" style="enable-background:new 0 0 80 66;" xml:space="preserve">
+<g>
+	<path d="M14.85,66L0,56.82c4.19-5.95,7.36-12.03,9.5-18.24s3.21-12.78,3.21-19.73V0h26.35v18.48c0,8.11-2.19,16.58-6.56,25.43
+		C28.14,52.77,22.25,60.13,14.85,66z M55.79,66l-14.85-9.18c4.19-5.95,7.36-12.03,9.5-18.24s3.21-12.78,3.21-19.73V0H80v18.48
+		c0,8.11-2.19,16.58-6.56,25.43C69.07,52.77,63.19,60.13,55.79,66z"/>
+</g>
+</svg>