hr-design-system-handlebars 1.68.6 → 1.69.1

package/dist/views/components/page/components/appendix.hbs

@@ -0,0 +1,17 @@
+<div class="mt-12 md:mt-14">
+    {{~#with this.programReference~}}
+        {{~#if this.hasReference~}}
+            <div class="clear-both mb-8 md:mb-10">
+                {{> components/program_reference/program_reference _isArticle=../_isArticle}}
+            </div>
+        {{~/if~}}
+    {{~/with~}}    
+    {{#unless _webview}}
+        {{~#with this.geotag}}          
+            {{> components/geoTag/geotag_collection }}
+        {{/with~}}
+        {{#with this.topictags}}
+            {{> components/topictag/topictag_collection }}
+        {{/with}}
+    {{/unless}}
+</div>

package/dist/views/components/page/story/story_article.hbs

@@ -28,6 +28,8 @@
     {{/unless}}
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/appendix _isArticle=true }}
+    
     {{> components/page/components/comments }}
 
 {{/components/page/base/page_wrapper}}

package/dist/views/components/program_reference/program_reference.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-wrap ">
-    <span class="w-full text-sm uppercase sm:w-fit font-headingSerif ">{{loca "story_program_supplier"}}</span><!--
+    <span class="w-full text-sm {{#unless _isArticle}}uppercase{{/unless}} sm:w-fit font-headingSerif ">{{loca "story_program_supplier"}}</span><!--
      -->
     <div class="flex flex-wrap pt-2 gap-x-4 w-fit sm:w-full">
         {{#if this.link}}
@@ -11,7 +11,7 @@
         {{/if}}
         {{#if this.date}}
             <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
-                  class="pt-1 text-xs font-copy">
+                  class="{{#if _isArticle}}pt-3 md:pt-4{{else}}pt-1{{/if}} text-xs font-copy">
                 {{#if this.displayWithTime}}
                     {{loca "date_simple_at" this.date.dateSeparatorTime}}
                 {{else}}

package/dist/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -3,7 +3,7 @@
     role="search" 
     action="{{resourceUrl "suche/index.nocache"}}" 
     method="get" 
-    class="relative flex w-full border rounded cy-quick-search-form lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
+    class="relative flex w-full border rounded ui-test-quick-search-form lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
 >
     <div 
         class="flex {{~#if _footer}} flex-col-reverse h-10 gap-y-1 {{else}} lg:h-10 {{/if}} w-full" 
@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="cy-quick-search w-full px-2 {{~#if _footer}} h-10 py-3 placeholder-search-footer-text text-search-footer-text {{else}} py-2 placeholder-search-header-text text-search-header-text {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l appearance-none lg:top-10 placeholder-text-xs focus:outline-none"
+            class="ui-test-quick-search w-full px-2 {{~#if _footer}} h-10 py-3 placeholder-search-footer-text text-search-footer-text {{else}} py-2 placeholder-search-header-text text-search-header-text {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l appearance-none lg:top-10 placeholder-text-xs focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"

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

@@ -1,5 +1,5 @@
 {{#if this.isValid}}
-    <article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+    <article class="ui-test-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
         <div class="">
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}

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

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="ui-test-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

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

@@ -1,7 +1,7 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideo ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -9,7 +9,7 @@
      {{~/if~}}
      {{~#if this.isAudio ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -17,7 +17,7 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -25,7 +25,7 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -33,7 +33,7 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}

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

@@ -4,7 +4,7 @@
     
     {{#with this}}
         {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
-                {{#> components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
+                {{#> components/base/link _link=this.link _css="ui-test-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)}}

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

@@ -1,3 +1,3 @@
-<span class='cy-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
+<span class='ui-test-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -1,7 +1,7 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white ui-test-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}

package/dist/views/components/teaser/utilities/teaser_image_cypress_hook_classes.hbs

@@ -1,5 +1,5 @@
-{{~if this.teaserLead.avDocument.isVideo 'cy-video '~}}
-{{~if this.teaserLead.avDocument.isAudio 'cy-audio '~}}
-{{~if this.teaserLead.avDocument.isPodcast 'cy-podcast '~}}
-{{~if this.teaserLead.avDocument.isLivestream 'cy-video-livestream '~}}
-{{~if this.teaserLead.avDocument.isAudioEventLivestream 'cy-audio-livestream '~}}
+{{~if this.teaserLead.avDocument.isVideo 'ui-test-video '~}}
+{{~if this.teaserLead.avDocument.isAudio 'ui-test-audio '~}}
+{{~if this.teaserLead.avDocument.isPodcast 'ui-test-podcast '~}}
+{{~if this.teaserLead.avDocument.isLivestream 'ui-test-video-livestream '~}}
+{{~if this.teaserLead.avDocument.isAudioEventLivestream 'ui-test-audio-livestream '~}}

package/dist/views/components/topictag/topictag_collection.hbs

@@ -0,0 +1,12 @@
+<nav role="navigation" aria-label="{{loca "geotag_related_content_headline"}}" class="">
+    <ul class="">
+        {{~#each this~}}
+            <li class="float-left mt-2 mr-2">
+                {{~#> components/button/link_button _url=this.url _variant="secondary" _size="sm" _css="overflow-hidden" _onWhite=true}}
+                    {{> components/button/components/button_icon _icon="taglabel" _iconmap="icons" _css=""}}
+                    {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                {{/components/button/link_button}}                            
+            </li>
+        {{~/each~}}
+    </ul>
+</nav>

package/dist/views_static/components/base/link.hbs

@@ -1,8 +1,14 @@
-<a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} {{#if _link.isStaticUrl}}href="{{#if _link.site}}{{resourceUrl _link.url _site=_link.site}}{{else}}{{resourceUrl _link.url}}{{/if}}{{else}}href="{{_link.url}}{{/if}}{{#if this.hasComments}}#commentList{{/if}}"
-    class="sb-link ds-link js-load{{#if _link.isUserConsentNeeded}} js-user-consent-needed{{/if}} {{#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}}
->
-    {{~> @partial-block ~}}
-</a>
+{{#if _url}}
+    <a class="{{#if _css}}{{_css}}{{/if}} {{#> css}}{{/css}}" href="{{_url}}">
+        {{~> @partial-block ~}}    
+    </a>
+{{else}}
+    <a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} {{#if _link.isStaticUrl}}href="{{#if _link.site}}{{resourceUrl _link.url _site=_link.site}}{{else}}{{resourceUrl _link.url}}{{/if}}{{else}}href="{{_link.url}}{{/if}}{{#if this.hasComments}}#commentList{{/if}}"
+        class="sb-link ds-link js-load{{#if _link.isUserConsentNeeded}} js-user-consent-needed{{/if}} {{#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}}
+    >
+        {{~> @partial-block ~}}
+    </a>
+{{/if}}

package/dist/views_static/components/button/link_button.hbs

@@ -1,4 +1,4 @@
-{{#> components/base/link _link=_link _css=_css _isAriaHidden=_isAriaHidden}}
+{{#> components/base/link _link=_link _url=_url _css=_css _isAriaHidden=_isAriaHidden}}
     {{> @partial-block }}
 {{/components/base/link}}
 {{#*inline "css"~}}

package/dist/views_static/components/button/utilities/button_variation_classes.hbs

@@ -13,10 +13,18 @@
     ~}}
     
 {{else}}
-    {{~inline-switch
-        _variant
-        '["primary","secondary","tertiary"]'
-        '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark   hover:border-button--dark  active:bg-button--dark "]'
-    ~}}
+    {{#if _onWhite~}}
+        {{~inline-switch
+            _variant
+            '["secondary"]'
+            '[" border text-button border-button hover:text-white hover:bg-button--dark hover:border-button--dark active:bg-button--dark"]'
+        ~}}
+    {{else}}    
+        {{~inline-switch
+            _variant
+            '["primary","secondary","tertiary"]'
+            '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark   hover:border-button--dark  active:bg-button--dark "]'
+        ~}}
+    {{/if}}
 {{/if}}
 {{~#unless _disableButtonPress}} active:scale-95{{/unless}}

package/dist/views_static/components/footer/page_footer.hbs

@@ -1,4 +1,4 @@
-<footer class="relative grid justify-center w-full text-base border-t grid-page cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+<footer class="relative grid justify-center w-full text-base border-t grid-page ui-test-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
     <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
     <div class="col-full sm:col-main md:px-9.5">
         <span class="hidden">Footer Navigation</span>

package/dist/views_static/components/geoTag/geotag_collection.hbs

@@ -0,0 +1,12 @@
+<nav role="navigation" aria-label="{{loca "geotag_related_content_headline"}}" class="">
+    <ul class="">
+        {{~#each this~}}
+            <li class="float-left mt-2 mr-2">
+                {{~#> components/button/link_button _url=this.url _variant="secondary" _size="sm" _css="overflow-hidden" _onWhite=true}}
+                    {{> components/button/components/button_icon _icon="ortsmarke" _iconmap="icons" _css=""}}
+                    {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                {{/components/button/link_button}}                            
+            </li>
+        {{~/each~}}
+    </ul>
+</nav>

package/dist/views_static/components/mediaplayer/media_player.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream cy-mediaplayer" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div{{#if _isTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
 {{#if _isTeaser}}
     <div class="relative {{_aspectRatio}}" x-show="!avStart" >

package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs

@@ -1,11 +1,11 @@
 {{#with this}}
     {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
         {{#with this}}
-            {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline ") _icon=_icon}}
+            {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline ") _icon=_icon}}
             {{#*inline "css"}}{{/inline}}
         {{/with}}
         {{>components/button/components/button_label _css="sr-only" _label=_label}}
     {{/components/button/button}}
-    {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/inline}}
+    {{#*inline "css"}}js-mediaplayer__button ui-test-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/inline}}
     {{#*inline "htmlProperties"}}{{/inline}}
 {{/with}}

package/dist/views_static/components/page/components/appendix.hbs

@@ -0,0 +1,17 @@
+<div class="mt-12 md:mt-14">
+    {{~#with this.programReference~}}
+        {{~#if this.hasReference~}}
+            <div class="clear-both mb-8 md:mb-10">
+                {{> components/program_reference/program_reference _isArticle=../_isArticle}}
+            </div>
+        {{~/if~}}
+    {{~/with~}}    
+    {{#unless _webview}}
+        {{~#with this.geotag}}          
+            {{> components/geoTag/geotag_collection }}
+        {{/with~}}
+        {{#with this.topictags}}
+            {{> components/topictag/topictag_collection }}
+        {{/with}}
+    {{/unless}}
+</div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -28,6 +28,8 @@
     {{/unless}}
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/appendix _isArticle=true }}
+    
     {{> components/page/components/comments }}
 
 {{/components/page/base/page_wrapper}}

package/dist/views_static/components/program_reference/program_reference.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-wrap ">
-    <span class="w-full text-sm uppercase sm:w-fit font-headingSerif ">{{loca "story_program_supplier"}}</span><!--
+    <span class="w-full text-sm {{#unless _isArticle}}uppercase{{/unless}} sm:w-fit font-headingSerif ">{{loca "story_program_supplier"}}</span><!--
      -->
     <div class="flex flex-wrap pt-2 gap-x-4 w-fit sm:w-full">
         {{#if this.link}}
@@ -11,7 +11,7 @@
         {{/if}}
         {{#if this.date}}
             <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
-                  class="pt-1 text-xs font-copy">
+                  class="{{#if _isArticle}}pt-3 md:pt-4{{else}}pt-1{{/if}} text-xs font-copy">
                 {{#if this.displayWithTime}}
                     {{loca "date_simple_at" this.date.dateSeparatorTime}}
                 {{else}}

package/dist/views_static/components/site_header/navigation_search/quick_search_form.hbs

@@ -3,7 +3,7 @@
     role="search" 
     action="{{resourceUrl "suche/index.nocache"}}" 
     method="get" 
-    class="relative flex w-full border rounded cy-quick-search-form lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
+    class="relative flex w-full border rounded ui-test-quick-search-form lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
 >
     <div 
         class="flex {{~#if _footer}} flex-col-reverse h-10 gap-y-1 {{else}} lg:h-10 {{/if}} w-full" 
@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="cy-quick-search w-full px-2 {{~#if _footer}} h-10 py-3 placeholder-search-footer-text text-search-footer-text {{else}} py-2 placeholder-search-header-text text-search-header-text {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l appearance-none lg:top-10 placeholder-text-xs focus:outline-none"
+            class="ui-test-quick-search w-full px-2 {{~#if _footer}} h-10 py-3 placeholder-search-footer-text text-search-footer-text {{else}} py-2 placeholder-search-header-text text-search-header-text {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l appearance-none lg:top-10 placeholder-text-xs focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"

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

@@ -1,5 +1,5 @@
 {{#if this.isValid}}
-    <article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+    <article class="ui-test-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
         <div class="">
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}

package/dist/views_static/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="ui-test-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

package/dist/views_static/components/teaser/components/teaser_av_consumption.hbs

@@ -1,7 +1,7 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideo ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -9,7 +9,7 @@
      {{~/if~}}
      {{~#if this.isAudio ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -17,7 +17,7 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -25,7 +25,7 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -33,7 +33,7 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}

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

@@ -4,7 +4,7 @@
     
     {{#with this}}
         {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
-                {{#> components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
+                {{#> components/base/link _link=this.link _css="ui-test-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)}}

package/dist/views_static/components/teaser/components/teaser_title.hbs

@@ -1,3 +1,3 @@
-<span class='cy-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
+<span class='ui-test-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _isCopytext=_isCopytext}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

package/dist/views_static/components/teaser/ticker/teaser_ticker_body.hbs

@@ -1,7 +1,7 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white ui-test-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}

package/dist/views_static/components/teaser/utilities/teaser_image_cypress_hook_classes.hbs

@@ -1,5 +1,5 @@
-{{~if this.teaserLead.avDocument.isVideo 'cy-video '~}}
-{{~if this.teaserLead.avDocument.isAudio 'cy-audio '~}}
-{{~if this.teaserLead.avDocument.isPodcast 'cy-podcast '~}}
-{{~if this.teaserLead.avDocument.isLivestream 'cy-video-livestream '~}}
-{{~if this.teaserLead.avDocument.isAudioEventLivestream 'cy-audio-livestream '~}}
+{{~if this.teaserLead.avDocument.isVideo 'ui-test-video '~}}
+{{~if this.teaserLead.avDocument.isAudio 'ui-test-audio '~}}
+{{~if this.teaserLead.avDocument.isPodcast 'ui-test-podcast '~}}
+{{~if this.teaserLead.avDocument.isLivestream 'ui-test-video-livestream '~}}
+{{~if this.teaserLead.avDocument.isAudioEventLivestream 'ui-test-audio-livestream '~}}

package/dist/views_static/components/topictag/topictag_collection.hbs

@@ -0,0 +1,12 @@
+<nav role="navigation" aria-label="{{loca "geotag_related_content_headline"}}" class="">
+    <ul class="">
+        {{~#each this~}}
+            <li class="float-left mt-2 mr-2">
+                {{~#> components/button/link_button _url=this.url _variant="secondary" _size="sm" _css="overflow-hidden" _onWhite=true}}
+                    {{> components/button/components/button_icon _icon="taglabel" _iconmap="icons" _css=""}}
+                    {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                {{/components/button/link_button}}                            
+            </li>
+        {{~/each~}}
+    </ul>
+</nav>

package/package.json

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

package/postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     plugins: {
         'postcss-import': {},
+        'tailwindcss/nesting': {},
         'tailwindcss': {},
         'postcss-preset-env': {
             features: { 'focus-visible-pseudo-class': false },

package/src/assets/fixtures/audio/audios.inc.json

@@ -56,8 +56,8 @@
         },
         "playerId": "2563",
         "type": "audioOndemand",
-        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css",
-        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js",
+        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css",
+        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "100",
         "realTeaserSize": "100"
@@ -139,8 +139,8 @@
         },
         "playerId": "4076",
         "type": "audioOndemand",
-        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css",
-        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js",
+        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css",
+        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "50",
         "realTeaserSize": "50"
@@ -203,8 +203,8 @@
         },
         "playerId": "1694",
         "type": "audioLivestream",
-        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css",
-        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js",
+        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css",
+        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "50",
         "realTeaserSize": "50"