hr-design-system-handlebars 1.35.1 → 1.35.2

package/dist/assets/index.css

@@ -1201,6 +1201,14 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.my-3\.5 {
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1327,6 +1335,9 @@ video {
 .mt-10 {
   margin-top: 2.5rem;
 }
+.mt-11 {
+  margin-top: 2.75rem;
+}
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1357,6 +1368,12 @@ video {
 .box-content {
   box-sizing: content-box;
 }
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .line-clamp-4 {
   overflow: hidden;
   display: -webkit-box;
@@ -1420,9 +1437,6 @@ video {
 .h-3\.5 {
   height: 0.875rem;
 }
-.h-36 {
-  height: 9rem;
-}
 .h-4 {
   height: 1rem;
 }
@@ -1517,9 +1531,6 @@ video {
 .w-3\/5 {
   width: 60%;
 }
-.w-36 {
-  width: 9rem;
-}
 .w-4 {
   width: 1rem;
 }
@@ -1832,9 +1843,6 @@ video {
 .self-baseline {
   align-self: baseline;
 }
-.justify-self-end {
-  justify-self: end;
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1861,9 +1869,6 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.text-ellipsis {
-  text-overflow: ellipsis;
-}
 .hyphens-auto {
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -2431,6 +2436,9 @@ video {
 .pb-10 {
   padding-bottom: 2.5rem;
 }
+.pb-11 {
+  padding-bottom: 2.75rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2581,9 +2589,6 @@ video {
   font-size: 3rem;
   line-height: 1;
 }
-.text-\[40px\] {
-  font-size: 40px;
-}
 .text-base {
   font-size: 1rem;
   line-height: 1.375rem;
@@ -2616,9 +2621,6 @@ video {
 .font-semibold {
   font-weight: 600;
 }
-.font-thin {
-  font-weight: 100;
-}
 .font-title {
   font-weight: 700;
   font-weight: var(--font-weight-title);
@@ -3013,7 +3015,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1690902834655;
+  counter-reset: cnt1691064710658;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3248,7 +3250,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1690902834655 1;
+  counter-increment: cnt1691064710658 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3264,7 +3266,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1690902834655);
+  content: counter(cnt1691064710658);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5221,6 +5223,11 @@ video {
     margin-right: 1.25rem;
   }
 
+  .md\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
   .md\:-mt-40 {
     margin-top: -10rem;
   }
@@ -5257,6 +5264,10 @@ video {
     margin-top: 1rem;
   }
 
+  .md\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .md\:mt-6 {
     margin-top: 1.5rem;
   }
@@ -5304,10 +5315,6 @@ video {
     height: 2rem;
   }
 
-  .md\:h-88 {
-    height: 22rem;
-  }
-
   .md\:h-auto {
     height: auto;
   }
@@ -5353,10 +5360,6 @@ video {
     width: 20rem;
   }
 
-  .md\:w-88 {
-    width: 22rem;
-  }
-
   .md\:w-auto {
     width: auto;
   }

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

@@ -1,46 +1,35 @@
-<h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
-<div x-data="{selected:0}">
-    {{~#with this.copytext }}
-        {{#each this.copytextParagraph }}
-            {{#if this.isHeadline}}
-                <button type="button"
-                        class="w-full text-left" 
-                        @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
-                >
-                    <div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
-                        <h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
-                        <span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
-                    </div>
-                </button>
-            {{/if}}
-            {{#if this.isParagraph}}
-                <div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}" 
-                    style="" 
-                    x-ref="container{{getRandom}}" 
-                    x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
-                >
-                    {{~#with this.paragraphBoxItem }}
-                        {{~#if this.isImage}}
-                            <figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
-                                {{~> components/base/image/responsive_image this.Image  _type="poster" _variant="50" _addClassImg="" ~}}
-                            </figure>
-                        {{/if}}
-                    {{/with}}
-                    <div>
-                        {{#each this.text.split}}
-                            {{#if this.isText}}
-                                <p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
-                            {{/if}}
-                            {{#if this.isUl}}
-                                <ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
-                            {{/if}}
-                            {{#if this.isOl}}
-                                <ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
-                            {{/if}}
-                        {{/each}}
-                    </div>
+<h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
+<div x-cloak x-data="{selected:0}" class="pb-11">
+    {{#each this.copytextParagraph }}
+        {{#if this.isHeadline}}
+            {{#unless @first}}</div></div>{{/unless}}
+            <button type="button"
+                    class="w-full text-left"
+                    @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
+            >
+                <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
+                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <span :class="selected == {{getRandom}} ? 'hidden' : ''">
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
+                    </span>
+                    <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
+                    </span>
                 </div>
+            </button>
+            <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
+                style=""
+                x-ref="container{{getRandom}}"
+                x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
+            >
+                <div class="mb-8 accordionItem">
+        {{else}}
+            {{#if (isStorybook)}}  
+                {{> components/article/components/accordion/accordion_item }}   
+            {{else}}            
+                {{> modules/story/copytext-accordion ~}}
             {{/if}}    
-        {{/each}}
-    {{/with}}
+            {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
+        {{/if}}
+    {{/each}}
 </div>

package/dist/views/components/article/components/accordion/accordion_item.hbs

@@ -0,0 +1,13 @@
+{{#if this.isParagraph}}
+    {{#each this.text.split}}
+        {{#if this.isText}}
+            <p class="mb-5">{{{this.text}}}</p>
+        {{/if}}
+        {{#if this.isUl}}
+            <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
+        {{/if}}
+        {{#if this.isOl}}
+            <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
+        {{/if}}
+    {{/each}}
+{{/if}}

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

@@ -1,46 +1,35 @@
-<h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
-<div x-data="{selected:0}">
-    {{~#with this.copytext }}
-        {{#each this.copytextParagraph }}
-            {{#if this.isHeadline}}
-                <button type="button"
-                        class="w-full text-left" 
-                        @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
-                >
-                    <div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
-                        <h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
-                        <span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
-                    </div>
-                </button>
-            {{/if}}
-            {{#if this.isParagraph}}
-                <div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}" 
-                    style="" 
-                    x-ref="container{{getRandom}}" 
-                    x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
-                >
-                    {{~#with this.paragraphBoxItem }}
-                        {{~#if this.isImage}}
-                            <figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
-                                {{~> components/base/image/responsive_image this.Image  _type="poster" _variant="50" _addClassImg="" ~}}
-                            </figure>
-                        {{/if}}
-                    {{/with}}
-                    <div>
-                        {{#each this.text.split}}
-                            {{#if this.isText}}
-                                <p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
-                            {{/if}}
-                            {{#if this.isUl}}
-                                <ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
-                            {{/if}}
-                            {{#if this.isOl}}
-                                <ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
-                            {{/if}}
-                        {{/each}}
-                    </div>
+<h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
+<div x-cloak x-data="{selected:0}" class="pb-11">
+    {{#each this.copytextParagraph }}
+        {{#if this.isHeadline}}
+            {{#unless @first}}</div></div>{{/unless}}
+            <button type="button"
+                    class="w-full text-left"
+                    @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
+            >
+                <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
+                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <span :class="selected == {{getRandom}} ? 'hidden' : ''">
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
+                    </span>
+                    <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
+                    </span>
                 </div>
+            </button>
+            <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
+                style=""
+                x-ref="container{{getRandom}}"
+                x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
+            >
+                <div class="mb-8 accordionItem">
+        {{else}}
+            {{#if (isStorybook)}}  
+                {{> components/article/components/accordion/accordion_item }}   
+            {{else}}            
+                {{> modules/story/copytext-accordion ~}}
             {{/if}}    
-        {{/each}}
-    {{/with}}
+            {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
+        {{/if}}
+    {{/each}}
 </div>

package/dist/views_static/components/article/components/accordion/accordion_item.hbs

@@ -0,0 +1,13 @@
+{{#if this.isParagraph}}
+    {{#each this.text.split}}
+        {{#if this.isText}}
+            <p class="mb-5">{{{this.text}}}</p>
+        {{/if}}
+        {{#if this.isUl}}
+            <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
+        {{/if}}
+        {{#if this.isOl}}
+            <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
+        {{/if}}
+    {{/each}}
+{{/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.35.1",
+    "version": "1.35.2",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

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

@@ -1,6 +1,6 @@
 {
-    "title": "Akkordeon Titel",
     "copytext": {
+        "title": "Akkordeon Titel",
         "copytextParagraph": [
             {
                 "isHeadline": true,
@@ -33,7 +33,7 @@
                         },
                         {
                             "isOl": true,
-                            "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt,<li>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"
+                            "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
                         }
                     ]   
                 }                  

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="minus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M250,150H70c-5.5,0-10,4.5-10,10s4.5,10,10,10h180c5.5,0,10-4.5,10-10S255.5,150,250,150z"/>
+</svg>

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m250,150h-80v-80c0-5.52-4.48-10-10-10s-10,4.48-10,10v80h-80c-5.52,0-10,4.48-10,10s4.48,10,10,10h80v80c0,5.52,4.48,10,10,10s10-4.48,10-10v-80h80c5.52,0,10-4.48,10-10s-4.48-10-10-10Z"/>
+</svg>