hr-design-system-handlebars 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.16.0 (Wed May 03 2023)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 2284 [#620](https://github.com/mumprod/hr-design-system-handlebars/pull/620) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.15.0 (Tue May 02 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2677,7 +2677,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1683029832707;
+  counter-reset: cnt1683113019578;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2915,7 +2915,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1683029832707 1;
+  counter-increment: cnt1683113019578 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2931,7 +2931,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1683029832707);
+  content: counter(cnt1683113019578);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/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/dist/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 _onBackground=../../_onBackground}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
 {{~/inline}}

package/dist/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/dist/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/dist/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/dist/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}}

package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs

@@ -1,7 +1,12 @@
 <li :class="dropped ? 'h-auto' : 'h-10'"  
     class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
-    {{#decorator 'components/base/link' _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
-        {{this.text}}      
-        {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
-    {{/decorator}}  
+    {{#with this}}
+        {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
+            {{this.text}}      
+            {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
+        {{/components/base/link}} 
+        {{#*inline "htmlProperties"}}
+            {{> components/tracking/navigation_tracking _clickLabelType=../../_fromNav _clickLabelPrefix1=../../_parent clickLabelPrefix2=this.link.content.text}}
+        {{/inline}}
+    {{/with}} 
 </li>

package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs

@@ -2,10 +2,9 @@
     <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
             <li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
-                <span class="sr-only">{{loca "label_top_thema"}}</span>  
-                {{#decorator 'components/base/link'}} 
+                {{#> components/base/link _link=this.link}}
                     {{this.text}}       
-                {{/decorator}} 
+                {{/components/base/link}} 
             </li>
         {{/each}} 
     </ul>

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -16,7 +16,7 @@
         {{~#with this.overviewLink}}
             {{~#if this.link~}}
                 <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
-                    {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                    {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
                         {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
                         {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
                     {{/components/button/link_button}}

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,12 +1,12 @@
-{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }} 
-    {{#with this.label}}
-        {{#> components/label/label_group _css=(if ../_ordered "pl-8")}}
-            {{> components/label/label _type=this.type _text=(loca this.loca) _css=""}}
+{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }} 
+    {{#if this.label}}
+        {{#> components/label/label_group _css=(if ../../_ordered "pl-8")}}
+            {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}
             {{> components/label/label_byline _css="ml-2"}}
         {{/components/label/label_group}}
-    {{/with~}}
-    {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
+    {{/if~}}
+    {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
         {{> components/teaser/components/teaser_title _css=(appendToDefault (if ../../_ordered " pl-8") "group-hover:underline text-clusterTeaserLink") _text=this.title _size=../../_size _teaserType="cluster" _firstItem=../../_firstItem}}
     {{/components/teaser/components/teaser_headline}}    
-{{/decorator}}
+{{/components/base/link}}
 {{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}

package/dist/views/components/teaser/components/teaser_body.hbs

@@ -2,25 +2,32 @@
 {{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
 
     
-    {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
-        {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
-            {{#with this.label}}
-                {{#> components/label/label_group}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                    {{> components/label/label_byline _css="ml-2"}}
-                {{/components/label/label_group}}
-            {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
-                {{#if this.topline}}
-                    {{> components/teaser/components/teaser_topline _text=this.topline}}
-                {{/if}}
-                {{> components/teaser/components/teaser_title _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
-                {{#if this.extendedTitle}}
-                    {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
-                {{/if}}
-            {{/components/teaser/components/teaser_headline}}
-        {{/decorator}} 
-    {{/components/teaser/components/teaser_header}}
+    {{#with this}}
+        {{#> components/teaser/components/teaser_header _link=this.link _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
+                {{#> components/base/link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
+                    {{#with this.label}}
+                        {{#> components/label/label_group}}
+                            {{> components/label/label _type=this.type _css="" _text=(loca this.loca)}}
+                            {{> components/label/label_byline _css="ml-2"}}
+                        {{/components/label/label_group}}
+                    {{/with~}}
+                    {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+                        {{#if this.topline}}
+                            {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
+                        {{/if}}
+                        {{> components/teaser/components/teaser_title _css="" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
+                        {{#if this.extendedTitle}}
+                            {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
+                        {{/if}}
+                    {{/components/teaser/components/teaser_headline}}
+                {{/components/base/link}} 
+        {{/components/teaser/components/teaser_header}}
+        {{#*inline "htmlProperties"}}
+            {{#if this.isFileDownload}}
+                {{> components/tracking/download_tracking}}
+            {{/if}}
+        {{/inline}}
+    {{/with}}
 
     {{#unless this.hideBylineAndShorttext}}
         <div class="sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">

package/dist/views/components/teaser/components/teaser_comments.hbs

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="relative whitespace-nowrap z-100">
-        {{#decorator 'components/base/link' _css="hover:underline decoration-1" _isAriaHidden=true}}
+        {{#> components/base/link _link=this.link _css="hover:underline decoration-1" _isAriaHidden=true}}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
             <span class="text-toplineColor">{{../this.commentNumber}}</span>
@@ -10,6 +10,6 @@
                 <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
             {{/if}}
             <span class="sr-only">{{loca "comment_anchor_2"}}</span>
-        {{/decorator}}
+        {{/components/base/link}}
     </span>
 {{/with}}

package/dist/views/components/teaser/components/teaser_text.hbs

@@ -3,8 +3,8 @@
         {{~_text~}}
     </span>
     {{#if this.isExtOrBrandLink}}
-        {{#decorator 'components/base/link' _css="relative inline text-link z-20 ds-focus"}}
+        {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
             <span class="hover:underline decoration-1 font-copy">{{this.link.readMoreText.readMore}}{{~#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 ml-1"}}{{/if~}}</span>
-        {{/decorator}} 
+        {{/components/base/link}} 
     {{/if}}
 </div>

package/dist/views/components/teaser/components/teaser_ticker_body.hbs

@@ -3,7 +3,7 @@
 
     
     {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
-        {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
+        {{#>components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca)}}
@@ -12,15 +12,14 @@
             {{/with~}}
             {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
                 {{#if this.topline}}
-                test
-                    {{> components/teaser/components/teaser_topline _text=this.topline}}
+                    {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
                 {{/if}}
                 {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
                 {{#if this.extendedTitle}}
                     {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                 {{/if}}
             {{/components/teaser/components/teaser_headline}}
-        {{/decorator}} 
+        {{/components/base/link}} 
     {{/components/teaser/components/teaser_header}}
 
     <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">

package/dist/views/components/teaser/podcast/podcast_item_title.hbs

@@ -1,11 +1,9 @@
-{{#decorator
-    'components/base/link'
-    _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
+{{#>components/base/link _link=this.link
+    _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4'
 }}
     <span
-        class='block hover:underline text-podcast-text
-            {{~inline-switch _teaserSize '["100","50"]' '[" text-base"," text-base"]'~}}'
+        class='block hover:underline text-podcast-text text-base'
     >
-        {{~_title~}}
+        {{~../../_title~}}
     </span>
-{{/decorator}}
+{{/components/base/link}}

package/dist/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -34,10 +34,9 @@
                         
                     </div>
 
-                    <div class="flex w-fit max-w-3/4 ">          
+                    <div class="flex w-fit max-w-3/4 ">       
                         {{> components/teaser/podcast/podcast_item_title 
                             _title=this.title 
-                            _teaserSize=this.teaserSize 
                             _addClass="" }}  
                     </div>   
                 {{/if}}

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -65,17 +65,15 @@
   ax-load 
   x-ignore
   ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
-  {{#with this.playlistItems}}
-    {{#each this}}
+    {{#each this.playlistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/teaser/podcast/podcast_player_ui
           _isPlaylistPlayer=true
-          _podcastDuration=duration
-          _title=title
+          _podcastDuration=this.duration
+          _title=this.title
           _id=(nextRandom)
           _first=@first
         }}
       </div>
     {{/each}}
-  {{/with}}
 </div>

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,9 +1,9 @@
 {{#if this.isSingleChannel}}
-    {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
-        <span class="mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
+    {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
+        <span class="mt-0.5 group-hover:underline {{#if ../../_ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch ../../_teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
             {{~_title~}}
         </span>
-    {{/decorator}}
+    {{/components/base/link}}
 {{else}}
     <div class="font-title text-base mt-2.5 text-podcast-text">
         <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">

package/dist/views/components/teaser/stage/stage_text.hbs

@@ -1,6 +1,6 @@
 <div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
     <div class="relative p-4 rounded-2xl bg-stageTextBox/85 {{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]'}} ">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus before:rounded-2xl"}}
+        {{#>components/base/link _link=this.link _css="ds-teaser-focus before:rounded-2xl"}}
             {{#> components/teaser/components/teaser_header}}
                 {{#with this.label}}
                     {{#> components/label/label_group _css="!text-stageText"}}
@@ -37,6 +37,6 @@
                     {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 self-baseline fill-current ml-1" }}]
                 </span>
             {{/if}}
-        {{/decorator}}
+        {{/components/base/link}}
     </div>
 </div>

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -7,7 +7,7 @@
     </div>
     {{~#if this.link~}}
         <div class="flex justify-center min-w-0 pt-8 mx-5">
-            {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
+            {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
                 {{>components/button/components/button_label _label=(loca "group_tabbed_more" this.title) _css="flex-1 truncate mr-2"}}
                 {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
             {{/components/button/link_button}}

package/dist/views/components/teaser/teaser_poster.hbs

@@ -3,7 +3,7 @@
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
+        {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
             {{#> components/teaser/components/teaser_header}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -21,9 +21,9 @@
                     {{/if}}
                 {{/components/teaser/components/teaser_headline}}
             {{/components/teaser/components/teaser_header}}
-        {{/decorator}}
+        {{/components/base/link}}
         <span class="absolute flex w-full h-full items-end justify-center ds-cta">
-            {{#> components/button/link_button _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+            {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                 {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
             {{/components/button/link_button}}
         </span>

package/dist/views/components/tracking/download_tracking.hbs

@@ -0,0 +1,2 @@
+{{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId":
+    "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}

package/dist/views/components/tracking/navigation_tracking.hbs

@@ -0,0 +1,4 @@
+data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if
+    _clickLabelPrefix1
+}}::{{_clickLabelPrefix1}}{{/if}}{{#if _clickLabelPrefix2}}::{{_clickLabelPrefix2}}{{/if}}-Link
+geklickt"}]}'

package/package.json

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

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}}
+```