hr-design-system-handlebars 1.34.0 → 1.34.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.34.2 (Wed Jul 26 2023)
+
+#### 🐛 Bug Fix
+
+- add accordion-component [#689](https://github.com/mumprod/hr-design-system-handlebars/pull/689) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.34.1 (Tue Jul 25 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2272 [#688](https://github.com/mumprod/hr-design-system-handlebars/pull/688) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.34.0 (Tue Jul 25 2023)
 
 #### 🚀 Enhancement

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

@@ -93,6 +93,7 @@
     "livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
     "search_input_aria_submit": "Suche starten",
     "search_input_placeholder": "Ort oder Thema suchen",
+    "social_media_links_text": "Folgen Sie mir:",
     "ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
     "ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
     "ticker_more":"Zum Ticker"

package/dist/assets/index.css

@@ -578,6 +578,9 @@ video {
     .justifyLine.headline-barrier:after {
   padding-top: 0.875rem;
 }
+.max-h-0 {
+        max-height: 0;
+    }
 /* PODCAST SEEK SLIDER*/
 .seek_slider::-webkit-slider-thumb {
         -webkit-appearance: none;
@@ -1270,6 +1273,9 @@ video {
 .ml-4 {
   margin-left: 1rem;
 }
+.ml-5 {
+  margin-left: 1.25rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -1399,6 +1405,9 @@ video {
 .h-3\.5 {
   height: 0.875rem;
 }
+.h-36 {
+  height: 9rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -1487,6 +1496,9 @@ video {
 .w-3\/5 {
   width: 60%;
 }
+.w-36 {
+  width: 9rem;
+}
 .w-4 {
   width: 1rem;
 }
@@ -1663,6 +1675,12 @@ video {
 .resize {
   resize: both;
 }
+.list-decimal {
+  list-style-type: decimal;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .list-none {
   list-style-type: none;
 }
@@ -1692,6 +1710,9 @@ video {
 .content-start {
   align-content: flex-start;
 }
+.content-evenly {
+  align-content: space-evenly;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -1781,6 +1802,9 @@ video {
 .self-baseline {
   align-self: baseline;
 }
+.justify-self-end {
+  justify-self: end;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1804,6 +1828,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
 .hyphens-auto {
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -1944,6 +1971,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgba(156, 163, 175, var(--tw-border-opacity));
 }
+.border-gray-alto {
+  --tw-border-opacity: 1;
+  border-color: rgba(224, 224, 224, var(--tw-border-opacity));
+}
 .border-navigation-border-color {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
@@ -2485,6 +2516,9 @@ video {
   font-size: 3rem;
   line-height: 1;
 }
+.text-\[40px\] {
+  font-size: 40px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.375rem;
@@ -2517,6 +2551,9 @@ video {
 .font-semibold {
   font-weight: 600;
 }
+.font-thin {
+  font-weight: 100;
+}
 .font-title {
   font-weight: 700;
   font-weight: var(--font-weight-title);
@@ -2890,6 +2927,9 @@ video {
 .duration-500 {
   transition-duration: 500ms;
 }
+.duration-700 {
+  transition-duration: 700ms;
+}
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -2904,7 +2944,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1690289760048;
+  counter-reset: cnt1690365962927;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3139,7 +3179,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1690289760048 1;
+  counter-increment: cnt1690365962927 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3155,7 +3195,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1690289760048);
+  content: counter(cnt1690365962927);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -5086,6 +5126,10 @@ video {
     height: 2rem;
   }
 
+  .md\:h-88 {
+    height: 22rem;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -5131,6 +5175,10 @@ video {
     width: 20rem;
   }
 
+  .md\:w-88 {
+    width: 22rem;
+  }
+
   .md\:w-auto {
     width: auto;
   }

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

@@ -0,0 +1,46 @@
+<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>
+                </div>
+            {{/if}}    
+        {{/each}}
+    {{/with}}
+</div>

package/dist/views/components/content/social_media_links/social_media_links.hbs

@@ -0,0 +1,17 @@
+{{#with this.socialMediaLinks }}
+    <div class="flex">
+        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <ul class="inline">
+            {{~#each this~}}
+                <li class="inline mr-1">
+                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                        {{~this.linkText~}}
+                        {{~#if this.link.hasIcon~}}
+                            {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}
+                        {{~/if~}}
+                    {{~/components/base/link~}}
+                </li>
+            {{/each}}
+        </ul>
+    </div>        
+{{/with}}

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

@@ -0,0 +1,46 @@
+<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>
+                </div>
+            {{/if}}    
+        {{/each}}
+    {{/with}}
+</div>

package/dist/views_static/components/content/social_media_links/social_media_links.hbs

@@ -0,0 +1,17 @@
+{{#with this.socialMediaLinks }}
+    <div class="flex">
+        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <ul class="inline">
+            {{~#each this~}}
+                <li class="inline mr-1">
+                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                        {{~this.linkText~}}
+                        {{~#if this.link.hasIcon~}}
+                            {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}
+                        {{~/if~}}
+                    {{~/components/base/link~}}
+                </li>
+            {{/each}}
+        </ul>
+    </div>        
+{{/with}}

package/package.json

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

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

@@ -93,6 +93,7 @@
     "livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
     "search_input_aria_submit": "Suche starten",
     "search_input_placeholder": "Ort oder Thema suchen",
+    "social_media_links_text": "Folgen Sie mir:",
     "ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
     "ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
     "ticker_more":"Zum Ticker"

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -93,6 +93,7 @@
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"social_media_links_text": "Folgen Sie mir:",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
 	"ticker_more": "Zum Ticker",

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

@@ -50,6 +50,10 @@
         @apply pt-3.5;
     }
 
+    .max-h-0 {
+        max-height: 0;
+    }
+
     /* PODCAST SEEK SLIDER*/
     .seek_slider::-webkit-slider-thumb {
         -webkit-appearance: none;

package/src/assets/fixtures/content/social_media_links/social_media_links.json

@@ -0,0 +1,32 @@
+{
+
+    "socialMediaLinks": [
+        {
+            "link": {
+                "url": "https://www.twitter.com",
+                "isTargetBlank": true,
+                "hasIcon": true,
+                "iconName": "extern"  
+            },
+            "linkText": "Twitter"
+        },
+        {
+            "link": {
+                "url": "https://www.facebook.com",
+                "isTargetBlank": true,
+                "hasIcon": true,
+                "iconName": "extern"  
+            },
+            "linkText": "Facebook"
+        },
+        {
+            "link": {
+                "url": "https://www.instagram.com",
+                "isTargetBlank": true,
+                "hasIcon": true,
+                "iconName": "extern"  
+            },
+            "linkText": "Instagram"
+        }
+    ]
+}

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

@@ -0,0 +1,90 @@
+{
+    "title": "Akkordeon Titel",
+    "copytext": {
+        "copytextParagraph": [
+            {
+                "isHeadline": true,
+                "text": "Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"
+            },
+            {
+                "paragraphBoxItem": {
+                    "isImage": true,
+                    "Image": {
+                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                        "@->contentpath": "teaser_poster_50",
+                        "@->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>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"
+                        }
+                    ]   
+                }                  
+            },
+            {
+                "isHeadline": true,
+                "text": "Das ist der zweite Eintrag"
+            },
+            {
+                "paragraphBoxItem": {
+                    "isImage": true,
+                    "Image": {
+                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                        "@->contentpath": "teaser_poster_50",
+                        "@->replaceToken": [
+                            {
+                                "@->token": "image",
+                                "@->value": "buchmesse-fahnen-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?"
+                        }
+                    ]   
+                }
+            },
+            {
+                "isHeadline": true,
+                "text": "Das ist der dritte Eintrag"
+            },
+            {
+                "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>"
+                        }
+                    ]   
+                }
+            }
+        ]
+    }
+}

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

@@ -0,0 +1,46 @@
+<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>
+                </div>
+            {{/if}}    
+        {{/each}}
+    {{/with}}
+</div>

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

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

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

@@ -0,0 +1,18 @@
+import accordion from './accordion.hbs'
+import accordionJson from '../../../teaser/fixtures/accordion.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 accordion({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Artikel/Komponenten/Akkordeon',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: accordionJson,
+}

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

@@ -0,0 +1 @@
+{"socialMediaLinks":[{"link":{"url":"https://www.twitter.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Twitter"},{"link":{"url":"https://www.facebook.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Facebook"},{"link":{"url":"https://www.instagram.com","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"linkText":"Instagram"}]}

package/src/stories/views/components/content/social_media_links/social_media_links.hbs

@@ -0,0 +1,17 @@
+{{#with this.socialMediaLinks }}
+    <div class="flex">
+        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <ul class="inline">
+            {{~#each this~}}
+                <li class="inline mr-1">
+                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                        {{~this.linkText~}}
+                        {{~#if this.link.hasIcon~}}
+                            {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}
+                        {{~/if~}}
+                    {{~/components/base/link~}}
+                </li>
+            {{/each}}
+        </ul>
+    </div>        
+{{/with}}

package/src/stories/views/components/content/social_media_links/social_media_links.mdx

@@ -0,0 +1,28 @@
+import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as socialMediaLinksStories from './social_media_links.stories'; 
+
+import socialMediaLinks from './social_media_links.hbs'
+
+<Meta of={socialMediaLinksStories} />
+
+export const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${geoTag}</div>`;
+    return socialMediaLinks({ ...args })
+}
+
+# Social Media Links
+
+<Canvas withToolbar>
+  <Story of={socialMediaLinksStories.ThreeLinks} />
+</Canvas>
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/content/social_media_links/social_media_links.hbs }}
+```
+
+Die Komponente kann zur Zeit nicht über parameter Konfiguriert werden

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

@@ -0,0 +1,33 @@
+import socialMediaLinks from './social_media_links.hbs'
+import socialMediaLinksData from './fixtures/social_media_links.json'
+
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${socialMediaLinks}</div>`;
+    return socialMediaLinks({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Content/SocialMediaLinks',
+
+    argTypes: {
+    },
+
+    decorators: [
+        (Story) => {
+            return `<div class="relative py-8">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+}
+
+export const ThreeLinks = {
+    render: Template.bind({}),
+    name: '3 Links',
+
+    args: {
+        ...socialMediaLinksData
+    },
+}

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

@@ -0,0 +1 @@
+{"title":"Akkordeon Titel","copytext":{"copytextParagraph":[{"isHeadline":true,"text":"Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"}]}}},"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>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"}]}},{"isHeadline":true,"text":"Das ist der zweite Eintrag"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/buchmesse-fahnen-102_v-1to1__small.jpg 380w, images/buchmesse-fahnen-102_v-1to1__medium.jpg 480w, images/buchmesse-fahnen-102_v-1to1.jpg 720w, images/buchmesse-fahnen-102_v-1to1__large.jpg 960w"}]}}},"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?"}]}},{"isHeadline":true,"text":"Das ist der dritte Eintrag"},{"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>"}]}}]}}

package/tailwind.config.js

@@ -148,6 +148,7 @@ module.exports = {
                 '35': '8.75rem',
                 '42': '10.5rem',
                 '45': '11.25rem',
+                '88': '22rem',
                 'header-lg-small': '8.8125rem',
                 'header-lg-big': '11.0625rem',
                 'header-md': '5.5625rem',