hr-design-system-handlebars 1.11.11 → 1.12.0

package/src/assets/tailwind.css

@@ -28,7 +28,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.matisse');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Sendungsdokument */
@@ -42,7 +42,7 @@
     /* Eventkalender */
     --color-label-event-calendar-title: theme('colors.teal.deeperPool');
     --color-eventcalendar-primary: var(--color-primary-ds);
-    --color-eventcalendar-secondary: theme('colors.grey.boulder');
+    --color-eventcalendar-secondary: theme('colors.gray.boulder');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
@@ -53,7 +53,7 @@
     --color-stage-primary: theme('colors.blue.deepCerulean');
     --color-stage-link: var('--color-link');
     /* geoTag */
-    --color-geoTag: theme('colors.grey.brightGray');
+    --color-geoTag: theme('colors.gray.brightGray');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
@@ -61,6 +61,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
+    --color-button-secondary: theme('colors.blue.science');
+    --color-button-ghost: theme('colors.blue.science');
     /* Media-Button */
     --color-media-button: theme('colors.blue.jellyBean');
     /* States */
@@ -71,7 +73,7 @@
     --color-podcast: theme('colors.blue.science');
     --color-podcast-text: var(--color-link);
     /* Byline */
-    --color-byline: theme('colors.grey.scorpion');
+    --color-byline: theme('colors.gray.scorpion');
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
@@ -102,7 +104,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.matisse');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Kurzmeldung */
@@ -121,14 +123,20 @@
     --color-stage-text: theme('colors.white.DEFAULT');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* geoTag */
-    --color-geoTag: theme('colors.grey.brightGray');
+    --color-geoTag: theme('colors.gray.brightGray');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
     /* Button */
     --color-button: var(--color-primary-ds);
+    --color-button-primary: theme('colors.blue.science');
+    --color-button-primary-dark: theme('colors.blue.congress');
+    --color-button-primary-inverted: theme('colors.white.DEFAULT');
+    --color-button-primary-inverted-dark: theme('colors.blue.accented');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
+    --color-button-secondary: theme('colors.blue.science');
+    --color-button-ghost: theme('colors.blue.science');
     /* Media-Button */
     --color-media-button: theme('colors.blue.science');
     /* States */
@@ -165,7 +173,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -190,6 +198,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.purple.jazzberry');
+    --color-button-secondary: theme('colors.purple.jazzberry');
+    --color-button-ghost: theme('colors.purple.jazzberry');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -222,7 +232,7 @@
     /* Sendung */
     --color-label-program: theme('colors.pink.rose');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -246,6 +256,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.jellyBean');
+    --color-button-secondary: theme('colors.blue.jellyBean');
+    --color-button-ghost: theme('colors.blue.jellyBean');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -262,7 +274,7 @@
 }
 
 [data-theme='hr-rundfunkrat'] {
-    --color-primary-ds: theme('colors.grey.scorpion');
+    --color-primary-ds: theme('colors.gray.scorpion');
     --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
@@ -278,7 +290,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -304,6 +316,8 @@
     --color-button: theme('colors.blue.deepCerulean');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.deepCerulean');
+    --color-button-secondary: theme('colors.blue.deepCerulean');
+    --color-button-ghost: theme('colors.blue.deepCerulean');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -336,7 +350,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -362,6 +376,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -380,7 +396,7 @@
 [data-theme='hr-sinfonieorchester'] {
     --color-primary-ds: theme('colors.red.burntUmber');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.alto');
+    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -394,7 +410,7 @@
     /* Sendung */
     --color-label-program: theme('colors.green.goBen');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -418,6 +434,8 @@
     --color-button: theme('colors.red.wellRead');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.wellRead');
+    --color-button-secondary: theme('colors.red.wellRead');
+    --color-button-ghost: theme('colors.red.wellRead');
     /* Media-Button */
     --color-media-button: theme('colors.red.wellRead');
     /* States */
@@ -450,7 +468,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.blueStone');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -474,6 +492,8 @@
     --color-button: theme('colors.blue.teal');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.teal');
+    --color-button-secondary: theme('colors.blue.teal');
+    --color-button-ghost: theme('colors.blue.teal');
     /* Media-Button */
     --color-media-button: theme('colors.blue.teal');
     /* States */
@@ -506,7 +526,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -532,6 +552,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -590,6 +612,8 @@
     --color-button: theme('colors.yellow.olive');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.yellow.olive');
+    --color-button-secondary: theme('colors.yellow.olive');
+    --color-button-ghost: theme('colors.yellow.olive');
     /* Media-Button */
     --color-media-button: theme('colors.yellow.olive');
     /* States */
@@ -608,7 +632,7 @@
 [data-theme='hr2'] {
     --color-primary-ds: theme('colors.orange.clementine');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.alto');
+    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -622,7 +646,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.paprika');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -647,6 +671,8 @@
     --color-button: theme('colors.red.paprika');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.paprika');
+    --color-button-secondary: theme('colors.red.paprika');
+    --color-button-ghost: theme('colors.red.paprika');
     /* Media-Button */
     --color-media-button: theme('colors.orange.burntOrange');
     /* States */
@@ -665,7 +691,7 @@
 [data-theme='hr3'] {
     --color-primary-ds: theme('colors.red.monza');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.mercury');
+    --color-highlight-1: theme('colors.gray.mercury');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -679,7 +705,7 @@
     /* Sendung */
     --color-label-program: theme('colors.green.pineGreen');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -706,6 +732,8 @@
     --color-button: theme('colors.red.scarlett');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.scarlett');
+    --color-button-secondary: theme('colors.red.scarlett');
+    --color-button-ghost: theme('colors.red.scarlett');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -738,7 +766,7 @@
     /* Sendung */
     --color-label-program: theme('colors.pink.fuchsie');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -765,6 +793,8 @@
     --color-button: theme('colors.green.casal');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.green.casal');
+    --color-button-secondary: theme('colors.green.casal');
+    --color-button-ghost: theme('colors.green.casal');
     /* Media-Button */
     --color-media-button: theme('colors.green.eden');
     /* States */
@@ -785,7 +815,7 @@
 [data-theme='you-fm'] {
     --color-primary-ds: #c20016;
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.platinum');
+    --color-highlight-1: theme('colors.gray.platinum');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerien */
@@ -799,7 +829,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.lightCerulean');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -824,6 +854,8 @@
     --color-button: var(--color-link);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-link);
+    --color-button-secondary: var(--color-link);
+    --color-button-ghost: var(--color-link);
     /* Media-Button */
     --color-media-button: theme('colors.black.DEFAULT');
     /* States */

package/src/stories/conventions-and-datastructure.mdx

@@ -4,6 +4,18 @@ import { Meta, Canvas } from '@storybook/addon-docs'
 
 # Konventionen und Datenstrukturen
 
+-   [Übersicht](#übersicht)
+-   [Aufbau der Datenstruktur des Designsystems](#aufbau-der-datenstruktur-des-designsystems)
+-   [Namenskonventionen](#namenskonventionen)
+    -   [Stories](#stories)
+    -   [Handlebar-Komponenten](#handlebar-komponenten)
+    -   [JSON](#json)
+-   [Konventionen beim Bau von Komponenten](#konventionen-beim-bau-von-komponentenn)
+    -   [Styling von Komponenten](#styling-von-komponenten)
+    -   [Wiederverwendbarkeit und Erweiterbarkeit von Komponenten](#wiederverwendbarkeit-und-erweiterbarkeit-von-komponenten)
+
+## Übersicht
+
 Dieses Kapitel richtet sich vor allem an die Entwickler des Designsystems. Es erläutert den grundlegenden Aufbau der Datenstruktur und legt Konventionen für die Benennung von Dateien fest.
 
 ## Aufbau der Datenstruktur des Designsystems
@@ -159,7 +171,11 @@ svg_optimization.stories.mdx`}
     </pre>
 </div>
 
-### Handlebar Komponenten
+### Handlebar-Komponenten
+
+Bei der Erstellung von Handlebar-Komponenten müssen verschiedenen Namenskonvention eingehalten werden.
+
+#### Namen von Komponenten
 
 Für die Namen von Handlebar-Komponenten gelten die gleichen Regeln wie für Stories.
 
@@ -192,8 +208,11 @@ Namen und deren einzelnen Bestandteile sind immer auszuschreiben. Abkürzungen s
     <pre class="!bg-white !p-4 !leading-8">{`brand_navigation_item.hbs`}</pre>
 </div>
 
+#### Namen von Komponenten-Parametern
+
 Die Namen von Parametern in Handlebar-Komponenten sind, anders als der Datainame, in
-[Camel-Case](https://en.wikipedia.org/wiki/Camel_case) Notation zu schreiben.
+[Camel-Case](https://en.wikipedia.org/wiki/Camel_case) Notation zu schreiben und mit einem Unterstrich
+zu prefixen.
 
 <div class="bg-red-200 !mt-4 p-4">
     <h4 class="!text-red-900 font-bold">Falsch</h4>
@@ -204,11 +223,58 @@ Die Namen von Parametern in Handlebar-Komponenten sind, anders als der Datainame
 <div class="bg-green-200 !mt-4 p-4">
     <h4 class="!text-green-900 font-bold">Korrekt</h4>
     <pre class="!bg-white !p-4 !leading-8">
-        &#123;&#123;#>components/base/link cssClasses="" isAriaHidden=true
-        clickLabelPrefix2="mediaLink"&#125;&#125;
+        &#123;&#123;#>components/base/link _cssClasses="" _isAriaHidden=true
+        _clickLabelPrefix2="mediaLink"&#125;&#125;
     </pre>
 </div>
 
+#### Namen übergebener Komponenten-Parameter in Partial-Blocks und Inline-Partials
+
+Sollen an Subkomponenten, die in Partial-Blocks und/oder Inline-Partials aufgerufen werden Komponenten-Parameter der Parent-Komponente
+übergeben werden, muss an die Namen der zu übergebenden Parameter das Postfix `-adjust_context` angefügt werden.
+Dies ist leider notwendig, da [Handlebars.js](https://handlebarsjs.com) und [Handlebars.java](https://github.com/jknack/handlebars.java)
+innerhalb von Partial-Blocks und Inline-Partials die Datenkontexte anders auflösen. Der Wert des Parameters `_css` kann in
+Handlebars.js direkt, in Handlebars.java aber nur ausgelesen werden, wenn mittels `../../_css` zwei Ebenen nach oben gegangen wird.
+Durch setzen des Postfixes `-adjust_context` können mittels eines Gulp-Skriptes diese Vatriablen in Komponenten herausgefiltert werden
+und je nachdem wofür gerade gebaut wird der Kontext automatisiert angepasst werden oder nicht. Hierzu ein kurzes Beispiel.
+
+```handlebars
+{{#with this}}
+    {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+    {{#*inline "css"~}}
+        {{~> components/button/utilities/button_on_image_classes _isMobile1to1=_isMobile1to1-adjust_context}}
+    {{/inline}}
+{{/with}}
+```
+
+Dem Play-Button Icon werden hier in einem Inline-Partial mit der [Style-Komponente](#setzen-kontextabhängiger-css-klassen-mit-style-komponenten)
+`button_on_image_classes` zusätzliche CSS Klassen übergeben. Je nach Wert des Parameters `_isMobile1to1` werden darin unterschiedliche CSS Klassen gesetzt.
+Der Wert dieses Parameters kommt in diesem Beispiel aus einem Parameter gleichen Namens aus dem Parent-Kontext. Damit dieser korrekt von
+den unterschiedlichen Handlebars Implementierungen aufgelöst werden kann, hat er den Postfix `-adjust_context` erhalten. Das oben angesprochene
+Gulp-Skript filtert diesen Parameter jetzt heraus und macht daraus, wenn Storybook mit `yarn storybook` lokal ausgeführt wird wieder den Parameter `_isMobile1to1`.
+
+```handlebars
+{{#with this}}
+    {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+    {{#*inline "css"~}}
+        {{~> components/button/utilities/button_on_image_classes _isMobile1to1=_isMobile1to1}}
+    {{/inline}}
+{{/with}}
+```
+
+Anders verhält es sich, wenn mit `yarn build` das Designsystem für die Verwendung im Delivery gebaut wird (dieses Skript wird beim bauen eines Releases
+in Github aufgerufen). Der Parameter `_isMobile1to1-adjust_context` wird jetzt durch `../../_isMobile1to1` ersetzt, sodass auch im Kontext von Handlebars.java
+der Wert des Parameters korrekt ausgelesen werden kann.
+
+```handlebars
+{{#with this}}
+    {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+    {{#*inline "css"~}}
+        {{~> components/button/utilities/button_on_image_classes _isMobile1to1=../../_isMobile1to1}}
+    {{/inline}}
+{{/with}}
+```
+
 ### JSON
 
 Im Designsystem werden Testdaten für Komponenten mittels JSON-Dateien bereitgestellt. Auch diese Dateinamen werden in Snake-Case Notation
@@ -238,3 +304,150 @@ sofern sie aus mehreren Worten zusammengesetzt werden, mit Minus voneinander get
 |— navigation-flyout`}
     </pre>
 </div>
+
+## Konventionen beim Bau von Komponenten
+
+Bei der Entwicklung neuer Komponenten müssen einige Konventionen beachtet werden.
+
+### Styling von Komponenten
+
+Zum Styling von Komponenten verwenden wir das CSS Framework [Tailwind CSS](https://tailwindcss.com/). Tailwind CSS
+ist ein auf dem Utility-First Ansatz basierendes Framework. Für nahezu jede CSS Eigenschaft gibt es eine eigene
+Utility Klasse, mit deren Hilfe die Styles einer Komponente im HTML Markup zusammengesetzt werden. Anstatt
+wie üblich Klassen mit beliebig vielen CSS Eigenschaften zu erstellen, setzen Tailwind CSS Klassen in der Regel
+immer nur jeweils eine einzelne Style Eigenschaft. Auf diese Weise wird ein sehr hohes Maß an Wiederverwendung
+erreicht und die Dateigröße der ausglieferten CSS Dateien ist in der Regel deutlich kleiner als beim klassischen
+Ansatz mit mehreren CSS Eigenschaften pro Klasse.
+Nachteil ist jedoch, dass alle CSS Logik auf diese Weise in die Templates verlagert wird und diese auf den ersten
+Blick recht unübersichtlich wirken können.
+
+#### Definition eigener CSS Klassen
+
+Tailwind CSS gestattet es auch sehr einfach eigene CSS Klassen zu schreiben. Sollte es für eine bestimmte CSS Eigenschaft
+noch keine eigene Utility Klasse geben, kann diese problemlos in der Datei `custom-utilities.css` definiert werden.
+Auch ist es möglich in der Datei `custom-components.css` eigene, vom Utility-First Ansatz abweichende, Klassen zu schreiben.
+
+Von dieser Möglichkeit sollte aber nur in Ausnahmefällen gebrauch gemacht werden, da ansonsten der Vorteil der kleinen Dateigrößen
+sehr schnell zunichte gemacht werden kann.
+
+#### Setzen Kontextabhängiger CSS Klassen mit Style-Komponenten
+
+An vielen Stellen im Design System müssen CSS Klassen abhängig vom Kontext, in dem die zu stylende Komponente genutzt wird, gesetzt
+werden. Ein Beispiel dafür sind Teaser auf Übersichtsseiten. Wie diese auf der Webseite angezeigt werden sollen, können Redakteure
+auf der Webseite durch setzen entsprechender Parameter dynamisch festlegen.
+Mit der Verwendung von Tailwind CSS und dem Einsatz von Utility Klassen, verlagert sich die ganze Logik aus den CSS Dateien in die
+Komponenten. Als Best-Practice haben sich hierfür separate, ausschließlich CSS Klassen setzende, Handlebar-Komponenten (Style-Komponenten) herausgestellt.
+Diesen Komponenten werden die von den Redakteuren im CMS vorgenommenen Einstellungen als Parameter übergeben. Abhängig von deren Wert
+werden die entsprechenden CSS Utility Klassen gesetzt. Style-Komponenten können beliebig oft und an beliebigen Stellen wiederverwendet werden.
+
+### Wiederverwendbarkeit und Erweiterbarkeit von Komponenten
+
+Damit nicht bei jeder neuen Anforderung das Rad neu erfunden werden muss, ist es wichtig, dass
+beim Bau von Komponenten auf ein hohes Maß an Wiederverwendbarkeit sowie eine
+gute und einfache Erweiterbarkeit geachtet wird.  
+Komponenten sollten demgemäß möglichst einfach gehalten und nicht mit einer vielzahl an Features überladen werden.
+
+Ein gutes Beispiel, wie man es nicht machen sollte ist die Button-Komponente. Bei ihr wurde versucht alle Anforderungen,
+die an einen Button gestellt wurden in einer einzigen Komponente abzubilden. Dies ging bei den initialen Anforderungen
+noch halbwegs, aber je mehr zusätzliche Anforderungen und Features im Laufe der Zeit hinzukamen, desto unübersichtlicher
+und schlechter wartbar wurde die Komponente. Am Ende hatte die Komponente fast zwanzig Parameter, mit denen ihr Verhalten
+gesteuert werden konnte und sie war zu einem richtigen "Monster" angewachsen.
+Aus diesem Grund wurde sie umgebaut und vereinfacht. Gemäß dem Prinzip der "[Component Selfishness](https://www.smashingmagazine.com/2023/01/key-good-component-design-selfishness/)"
+rendert die Komponente nur noch den Rahmen eines Buttons. Alle Inhalte, wie das Label oder ein mögliches Icon,
+werden dem Button mit Hilfe von Subkomponenten hinzugefügt.
+
+#### Erweitern von Basis-Komponenten mit Subkomponenten
+
+Um einer Basis-Komponente weitere Inhalte mittels Subkomponenten hinzuzufügen, sieht Handlebars das Konzept der
+sogenannten "[Partial-Blocks}(https://handlebarsjs.com/guide/partials.html#partial-blocks)" vor. Mit `@partial-block`
+stellt Handlebars hierfür ein spezielles Partial bereit. Es erlaubt in einer Basis-Komponente, wie z.B. der Button-Komponente,
+an einer bestimmten Stelle im Markup einen Platzhalter für mögliche Subkomponenten anzugeben.
+Schauen wir uns das ganze anhand der Button-Komponente an.
+
+```handlebars
+<button>
+    {{> @partial-block }}
+</button>
+```
+
+Die Komponente rendert lediglich das Markup des Button-Elements (alle HTML-Properties des Button wurden der besseren Übersichtlichkeit halber an
+dieser Stelle weggelassen) und ruft das `@partial-block` Partial auf. Der Button Komponente können jetzt, wie nachfolgend gezeigt, Subkomponenten hinzugefügt
+werden.
+
+```handlebars
+{{#> components/button/button _size="lg"}}
+    {{> components/button/components/button_label _label="Icon rechts"}}
+    {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+{{/components/button/button}}
+```
+
+Auf diese Weise ist es möglich neue Funktionen sehr einfach über Subkomponenten hinzuzufügen.
+
+#### Komponenten mit Inline-Partials um zusätzliche Eigenschaften Erweitern
+
+Wie im vorigen Abschnitt erläutert, können Basis-Komponenten mit Hilfe des `@partial-block` Partials
+sehr gut mit Hilfe von Subkomponenten erweitert werden. Sollen jedoch einem von einer Komponente gerenderten HTML-Element
+dynamisch weitere Eigenschaften (z.B. über Style-Komponenten bereitgestellte CSS-Klassen) übergeben werden,
+ist dies auf diesem Wege nicht möglich. Hierfür lassen sich in Handlebars sogenannte [`Inline-Partials`](https://handlebarsjs.com/guide/partials.html#inline-partials)
+nutzen. Deren Gebrauch lässt sich am besten mit einem Beispiel erläutern.
+
+Für den Abonieren-Button in der Podcast-Player-Komponente wird die Button-Komponente verwendet.
+Diese setzt standardmäßig verschiedenen HTML-Properties im HTML-Button-Element. Der Abonieren-Button
+benötigt darüber hinaus weitere HTML-Properties. Diese sind aber so speziell, dass sie nicht der
+Button-Komponente als weitere Standard-HTML-Properties hinzugefügt wurden. Stattdessen wurde mit einem
+`Inline-Partial` die Möglichkeit geschaffen der Button-Komponente dynamisch beliebige weitere HTML-Properties
+zu übergeben.
+
+```handlebars
+<button class="ds-button" {{#> html_properties}}{{/html_properties}}>
+    {{> @partial-block }}
+</button>
+```
+
+Das Beispiel zeigt eine vereinfachte (aus Gründen der Übersichtlichkeit wurden alle anderen HTML-Properties weggelassen)
+Ansicht der Button-Komponente. Innerhalb des HTML-Button-Elements wird hier das Inline-Partial `html_properties`
+aufgerufen. Der Inhalt dieses Partials kann, wie im folgenden Codebeispiel zu sehen, gesetzt werden.
+
+```handlebars
+{{#with this}}
+    {{#> components/button/button _size="md" _disableButtonPress=true}}
+        {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}
+        <span x-cloak x-show="open" class="w-3 h-3">
+            {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
+        </span>
+        <span x-show="!open" class="w-3 h-3">
+            {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
+        </span>
+    {{/components/button/button}}
+    {{#*inline "html_properties"}}
+    x-ref="button"
+    x-on:click="toggle()"
+    :aria-expanded="open"
+    :aria-controls="$id('dropdown-button')"
+    :class="open ? 'drop-shadow' : ''"
+    data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'
+    {{/inline}}
+{{/with}}
+```
+
+Unterhalb des Aufrufs der Button-Komponente wird hier das Inline-Partial `html_properties` implementiert. Ein Inline-Partial
+muss immer in der Form `{{#*inline NAME_DES_PARTIALS}}` aufgerufen werden. Alle Inhalte die zwischen öffnendem und schließenden
+`inline` stehen, werden in der Komponente in der dieses Inline-Partial aufgerufen wird gerendert.
+
+Zu Beachten ist, dass, wie hier im Codebeispiel zu sehen, der Aufruf der Komponente und die Definition des Inline-Partials Von
+einem `with` Block umschlossen werden sollten. Auf diese Weise wird sichergestellt, dass ausschließlich die hier aufgerufene
+Button-Komponente die zusätzlichen Eigenschaften erhält. Würde der `with` Block weggelassen und irgendwo im weitere
+Verlauf der Seite ein weiteres Mal die Button-Komponente aufgerufen, würde auch das HTML-Button-Element in dieser Komponente
+diese zuätzlichen HTML-Properties rendern.
+
+<div class="bg-blue-200 !mt-4 p-4">
+    <h4 class="!text-stone-950 font-bold">Wichtig</h4>
+    <p>
+        Sollen beim Aufruf von Subkomponenten in einem Partial-Block oder einem Inline-Partial
+        Hash-Parameter (`_NAME_DES_PARAMETERS`) der umliegenden Komponente übergeben werden, muss
+        die [hier](#namen-übergebener-komponenten-parameter-in-partial-blocks-und-inline-partials)
+        beschriebene Namenskonvention zwingend eingehalten werden. Aufgrund von Unterschieden beim
+        Auflösen der Kontexte zwischen Handlebars.js und Handlebars.java können andernfalls die
+        Werte der Parameter nicht ausgelesen werden.
+    </p>
+</div>

package/src/stories/views/components/base/image/icon.hbs

@@ -40,7 +40,7 @@ Erklärung / Hinweise / Best Practices für "Accessible SVG":
 
 --}}
 {{#if _icon}}
-<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"
+<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}} {{#>css}}{{/css}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"
 {{# if brand}} data-brand="{{brand}}"{{/if}}
         {{~#if _iconTitle }} {{changeRandom~}}
             aria-labelledby="iconTitle--{{getRandom}}"

package/src/stories/views/components/base/link.hbs

@@ -1,3 +1,13 @@
-{{> components/base/link_open _clickLabelPrefix1=_clickLabelPrefix1 _clickLabelPrefix2=_clickLabelPrefix2 _clickLabelType=_clickLabelType _css=_css _doNavigationTracking=_doNavigationTracking _isAriaHidden=_isAriaHidden _isSelected=_isSelected _selectedCssClass=_selectedCssClass}}
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load{{#if _css}} {{_css}}{{/if}} {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}"
+    {{#if _doNavigationTracking}}
+    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
+    {{/if}}
+    {{#if this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
     {{~ decorator_body ~}}   
 </a>

package/src/stories/views/components/base/link_open.hbs

@@ -1,13 +1,12 @@
-{{#with this.link}}
-    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}{{#if ../this.hasComments}}#commentList{{/if}}"
-        class="sb-link js-load{{#if ../_css}} {{../_css}}{{/if}} {{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
-        {{#if ../_doNavigationTracking}}
-        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
-        {{/if}}
-        {{#if ../this.isFileDownload}}
-            {{#with ../this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
-        {{/if}}
-        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
-    >
-{{/with}}  
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    {{#if _doNavigationTracking}}
+    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
+    {{/if}}
+    {{#if this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
+ 

package/src/stories/views/components/base/link_v2.hbs

@@ -0,0 +1,14 @@
+<a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    {{#if _doNavigationTracking}}
+    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
+    {{/if}}
+    {{#if this.isFileDownload}}
+        {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
+    {{/if}}
+    {{#if this.link.isTargetBlank}} target="_blank"  rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+>
+ 
+    {{> @partial-block }}
+</a>