hr-design-system-handlebars 1.14.0 → 1.16.0

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

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

@@ -86,6 +86,7 @@
 	"label_small-art": "Kleinkunst",
 	"label_sports": "Sport",
 	"label_talk": "Talk",
+	"label_top_thema": "Top-Thema",
 	"livestream_has_played": "Beendet",
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -1123,6 +1123,10 @@
                 "hideGeotag": false,
                 "hideEditableByline": true,
                 "doTracking": true,
+                "trackingData": {
+                    "secondLevelId": "2",
+                    "pageName": "download"
+                },
                 "trackingForArdMediatheksLink": false,
                 "showMediatheksLink": false,
                 "showAirdate": false,

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

@@ -1,13 +1,8 @@
-<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}}
+<a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{_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 _link.isTargetBlank}} target="_blank"  rel="noopener{{#if _link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
     {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+    {{#> htmlProperties}}{{/htmlProperties}}
 >
-    {{~ decorator_body ~}}   
+    {{> @partial-block }}
 </a>

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

@@ -0,0 +1,57 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as LinkStories from './link.stories'
+
+<Meta of={LinkStories} />
+
+# Link
+
+Die Komponente ist überall da einzusetzen, wo ein Link benötigt wird. Sie erzeugt lediglich ein öffnendes und schließendes
+`<a>`-Tag. Der Inhalt des Links muss durch Subkomponenten hinzugefügt werden. Da es nicht den "einen" Link gibt und die Komponente
+in den unterschiedlichsten Szenarien genutzt wird, bringt sie, zumindest derzeit, kein eigenes Styling mit.
+Es werden lediglich die Klassen `js-load` als Vorbereitung für die Nutzung mit unserem Featureloader
+und `ds-link` für die Bereitstellung der Focus-Zustände gesetzt. Bei der Einbindung können dem Link über den
+Parameter `_css` CSS-Klassen übergeben werden oder, wenn [Style-Komponenten](?path=/docs/grundlegendes-konventionen-und-datenstrukturen--docs#setzen-kontextabhängiger-css-klassen-mit-style-komponenten)
+genutzt werden sollen, diese innerhalb des Inline-Partials `css` aufgerufen werden.
+Soll der Klick auf den Link getracked werden, kann das Link-Tracking innerhalb des Inline-Partials
+`htmlProperties` gesetzt werden. Zum Tracking eines Downloads in einem Standard- oder Alternativ-Teaser
+oder zum Klick-Tracking innerhalb der Navigation gibt es schon entsprechende Komponenten (`navigation_tracking.hbs` und `download_tracking.hbs`),
+die genutzt werden können.
+
+Sobald es einen standardisierten Text-Link oder etwas ähnliches gibt kann und sollte dieser hier als eigene Story ergänzt werden.
+
+## Eigenschaften
+
+<ArgsTable story="Spielplatz" />
+
+## Verwendung
+
+Die Komponente wird wie in folgendem Codebeispiel gezeigt in einem Handlebar Template eingebunden.
+
+```handlebars
+{{#> components/base/link _link=this.link _css='CSS Klassen'}}
+    Hier kommt der Inhalt des Links hin.
+{{/components/base/link}}
+```
+
+Sollen statt einfachen CSS-Klassen Style-Komponenten an den Link übergeben werden, muss er wie in folgendem Beispiel genutzt werden:
+
+```handlebars
+{{#> components/base/link _link=this.link}}
+    Hier kommt der Inhalt des Links hin.
+{{/components/base/link}}
+{{#*inline "css"}}
+    Hier kann eine oder mehrere Style-Komponente/n eingebunden werden
+{{/inline}}
+```
+
+Schließlich kann dem Link auch eine Konfiguration für das Link-Tracking übergeben werden:
+
+```handlebars
+{{#> components/base/link _link=this.link}}
+    Hier kommt der Inhalt des Links hin.
+{{/components/base/link}}
+{{#*inline "htmlProperties"}}
+    {{!-- Das ist jetzt nur eine Beispielhafte Einbindung des Klick-Trackings --}}
+    {{> components/tracking/navigation_tracking _clickLabelType=_fromNav-adjust_context _clickLabelPrefix1=_parent-adjust_context clickLabelPrefix2=this.link.content.text}}
+{{/inline}}
+```

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

@@ -0,0 +1,61 @@
+const handlebars = require('hrHandlebars')
+
+const linkTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/base/link}}
+        Link
+    {{/components/base/link}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Navigation/Link',
+
+    argTypes: {
+        _link: {
+            description:
+                'Das Objekt, welches, den Link beschreibt. Es muss mindestens das Feld `url` beinhalten. Weitere mögliche Felder sind `webviewUrl`, `isTargetBlank`, `hasIcon`, `iconName`, `readMoreText`, `hasNoReferrerFlag`',
+            control: 'object',
+        },
+
+        _isAriaHidden: {
+            description:
+                'Wenn ausgewählt, wird die Eigenschaft "aria-hidden" auf true und die Eigenschaft "tab-index" auf -1 gesetzt.',
+            control: 'boolean',
+
+            table: {
+                defaultValue: {
+                    summary: false,
+                },
+            },
+        },
+        _css: {
+            description: 'Erlaubt die Angabe zusätzlicher CSS Klassen für den Link',
+            control: 'text',
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+    },
+}
+
+export const playground = {
+    render: linkTemplate.bind({}),
+    name: 'Spielplatz',
+
+    args: {
+        _link: {
+            url: '/test.html',
+            webviewUrl: '/webview.html',
+            readMoreText: 'mehr lesen',
+            isTargetBlank: false,
+            hasIcon: false,
+            iconName: '',
+            hasNoReferrerFlag: false,
+        },
+    },
+}

package/src/stories/views/components/button/button.mdx

@@ -134,9 +134,9 @@ Soll ein Button auf einem farbigen Hintergrund (bietet sich vor allem bei dunkle
 </Canvas>
 
 ```handlebars
-{{#> components/button/link_button _size="lg" _onBackground=true}}
+{{#> components/button/button _size="lg" _onBackground=true}}
     {{> components/button/components/button_label _label="Primary"}}
-{{/components/button/link_button}}
+{{/components/button/button}}
 ```
 
 ### Besonderheiten

package/src/stories/views/components/button/link_button.hbs

@@ -1,6 +1,6 @@
-{{#> components/base/link_v2 _css=_css _isAriaHidden=_isAriaHidden}}
+{{#> components/base/link _link=_link _css=_css _isAriaHidden=_isAriaHidden}}
     {{> @partial-block }}
-{{/components/base/link_v2}}
+{{/components/base/link}}
 {{#*inline "css"~}}
     {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant-adjust_context _onBackground=_onBackground-adjust_context}} {{> components/button/utilities/button_dimension_classes _size=_size-adjust_context~}}
 {{~/inline}}

package/src/stories/views/components/button/link_button.stories.js

@@ -62,6 +62,16 @@ export default {
             },
         },
 
+        _link: {
+            description:
+                'Link des Buttons. Dies muss ein Objekt in der Form {"url":"","isTargetBlank"=true|false, "webviewUrl"=""}',
+            control: 'object',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
         _icon: {
             description: 'Der Name des Icons in der Iconmap',
             control: 'text',

package/src/stories/views/components/content_nav/content_nav_item.hbs

@@ -6,25 +6,21 @@
         {{~#if _isflow}} content-nav-item-flow{{/if~}}
         {{~#if this.isSelected}} font-bold -current{{/if~}}
     ">
-     {{#decorator 'components/base/link' 
-        _doNavigationTracking="true" 
-        _clickLabelType="Contentnavigation" 
-        _clickLabelPrefix1=this.title 
-        _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
-        _isSelected=this.isSelected
-        _selectedCssClass="is-selected"
-    }}
-        
-        <span class="block text-base leading-4 grow font-copy js-title truncate ... ">
-            {{~this.title~}}
-            {{~#if this.link.hasIcon~}}
-                {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 -mt-0.5 h-4 w-4 inline" _iconmap="icons"}}
-            {{~/if~}}
-        </span>
-        
-        <span>
-            {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }} 
-        </span>
-
-    {{/decorator}} 
+    {{#with this}}
+        {{#> components/base/link _link=this.link _isSelected=this.isSelected _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" _selectedCssClass="is-selected"}}
+            <span class="block text-base leading-4 grow font-copy js-title truncate">
+                {{~this.title~}}
+                {{~#if this.link.hasIcon~}}
+                    {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 -mt-0.5 h-4 w-4 inline" _iconmap="icons"}}
+                {{~/if~}}
+            </span>
+            
+            <span>
+                {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }} 
+            </span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{> components/tracking/navigation_tracking _clickLabelType="Contentnavigation" _clickLabelPrefix1=this.title}}
+        {{/inline}}
+    {{/with}}
 </li>

package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -13,8 +13,8 @@
                     <div class="flex flex-col items-start basis-10/12 w-10/12">
                         <div class="absolute top-0 left-0 w-full sm:static">
                             <div class="ar-4-3 sm:ar-auto">
-                                {{#> components/teaser/components/teaser_header _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
-                                    {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
+                                {{#> components/teaser/components/teaser_header _link=this.link _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
+                                    {{#> components/base/link _css="ds-teaser-focus hover:text-toplineColor" }} 
                                             {{#with this.label}}
                                                 {{#> components/label/label_group}}
                                                     {{> components/label/label _type=this.type _text=(loca this.loca) _css="mr-2"}}
@@ -23,14 +23,14 @@
                                                     {{/if}}
                                                 {{/components/label/label_group}}
                                             {{/with~}}
-                                            {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
+                                            {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
                                                 {{#if this.topline}}
                                                     {{> components/teaser/components/teaser_topline _text=this.topline}}
                                                 {{/if}}
                                                 {{> components/teaser/components/teaser_title _text=this.title _css="text-2xl"}}
                                                 {{> components/event/event_tags this.eventtags}} 
                                             {{/components/teaser/components/teaser_headline}}
-                                    {{/decorator}}
+                                    {{/components/base/link  }}
                                 {{/components/teaser/components/teaser_header}} 
                             </div>
                         </div>

package/src/stories/views/components/event/calendar/event_calendar_footer.hbs

@@ -1,8 +1,7 @@
 <footer class='bg-event-calendar-primary text-center'>
-    {{#decorator
-        'components/base/link'
+    {{#> components/base/link _link=this.link
         _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
     }}
         {{loca 'event_calendar_monthly_overview_link'}}
-    {{/decorator}}
+    {{/components/base/link}}
 </footer>

package/src/stories/views/components/event/event_ticket_button.hbs

@@ -13,7 +13,7 @@
             {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
                 {{>components/button/components/button_label _label="Abbrechen" _css=""}}
             {{/components/button/button}}
-            {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
+            {{#> components/button/link_button _link=this.link _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
                 {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
             {{/components/button/link_button}}
         </div>
@@ -24,7 +24,7 @@
                 display:none;
             }
         </style>
-            {{#> components/button/link_button _size="lg"}}
+            {{#> components/button/link_button _link=this.link _size="lg"}}
                 {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
                 {{>components/button/components/button_label _label="Tickets"}}
             {{/components/button/link_button}}