hr-design-system-handlebars 1.11.12 → 1.12.0

package/dist/views/components/base/image/icon.hbs

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

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

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

package/dist/views/components/base/link_open.hbs

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

package/dist/views/components/base/link_v2.hbs

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

package/dist/views/components/button/button.hbs

@@ -1,30 +1,15 @@
-<button 
-    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
-    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
+<button
+    {{#if _id}} id="{{_id}}"{{/if}} 
+    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
+    {{#if _openModal}} aria-haspopup="true"{{/if}}
+    {{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
+    type="{{defaultIfEmpty _type "submit"}}"
     {{~#if _name}} name="{{_name}}"{{/if}} 
-    {{~#if _title}} title="{{_title}}"{{/if}} 
-    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/if}}{{#if _webview}} -webview{{/if}}"
+    {{~#if _title}} title="{{_title}}"{{/if}}
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
     {{~#if _noFocus}} tabindex="-1"{{/if}}
->
-    {{~#if _showIcon~}}
-        {{> components/base/image/icon
-                _icon=_icon
-                _iconmap=_iconmap
-                _addClass=_addIconClass
-                _webview=_webview
-                _ariaHidden=false
-                _iconTitle=false
-                _iconDesc=false
-                _iconText=false
-                _overlayIcon=false
-        }}
-    {{/if~}}
-    {{~#if _label~}}
-        <span {{#if _srOnly}}class="sr-only"{{/if}}>
-            {{~_label~}}
-        </span>
-    {{/if~}}
+    {{#> html_properties}}{{/html_properties}}>
+    {{> @partial-block }}
 </button>

package/dist/views/components/button/components/button_icon.hbs

@@ -1 +1,2 @@
-{{> components/base/image/icon _addClass=(appendToDefault _css "w-4 h-4 fill-inherit") _icon=_icon _iconmap=_iconmap}}
+{{> components/base/image/icon _addClass=(appendToDefault _css "ds-button-icon w-4 h-4 fill-current") _icon=_icon _iconmap=_iconmap}}
+{{#*inline "css"}}{{/inline}}

package/dist/views/components/button/components/button_label.hbs

@@ -1 +1 @@
-<span class="{{#if _css}} {{_css}}{{/if}}">{{_label}}</span>
+<span class='ds-button-label {{defaultIfEmpty _css "hallo"}}'>{{_label}}</span>

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

@@ -0,0 +1,6 @@
+{{#> components/base/link_v2 _css=_css _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }}
+{{/components/base/link_v2}}
+{{#*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/button/utilities/button_base_classes.hbs

@@ -0,0 +1 @@
+inline-flex items-center font-heading

package/dist/views/components/button/utilities/button_dimension_classes.hbs

@@ -0,0 +1 @@
+{{~inline-switch _size '["sm","md","lg"]' '[" px-2 py-0.5"," p-2"," px-4 py-2.5",""]'~}}

package/dist/views/components/button/utilities/button_on_image_classes.hbs

@@ -0,0 +1,39 @@
+absolute bottom-0 right-0
+{{~#switch _teaserType~}}
+    {{~#case 'standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4"]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4 "]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+{{~/switch~}}

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

@@ -0,0 +1,14 @@
+{{#if _onBackground~}}
+    {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"," border text-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark hover:text-button-primary active:text-button-primary active:bg-button-primary--inverted-dark"," bg-transparent border-transparent text-button-inverted hover:bg-button-primary--inverted-dark hover:text-button-primary hover:border-button-primary--inverted-dark active:text-button-primary active:bg-button-primary--inverted-dark"," border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"]'
+    ~}}
+{{else}}
+    {{~inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"," border text-button-secondary border-button-primary hover:bg-button-primary--inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button-primary hover:bg-button-primary--inverted hover:border-button-primary active:bg-button-primary--inverted"," border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark  hover:border-button-primary--dark active:bg-button-primary--dark"]'
+    ~}}
+{{/if}}
+{{~#unless _disableButtonPress}} active:scale-95{{/unless}}

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-grey-alabaster text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/dist/views/components/content_nav/content_nav_item.hbs

@@ -10,7 +10,7 @@
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex ds-link-inset items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
+        _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
     }}

package/dist/views/components/event/calendar/event_calendar_footer.hbs

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

package/dist/views/components/event/event_ticket_button.hbs

@@ -1,8 +1,8 @@
 <div class="static pl-4 pt-1 pb-3 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
-    {{#> components/button/button_v2 _id=(nextRandom) _type="inverted"}}
+    {{#> components/button/button _id=(nextRandom) _size="lg"}}
         {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
         {{>components/button/components/button_label _label="Tickets"}}
-    {{/components/button/button_v2}}
+    {{/components/button/button}}
     {{#> components/modal/modal _trigger=(getRandom)}}
         {{#> components/teaser/components/teaser_headline}}
             {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
@@ -10,8 +10,12 @@
         <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
 
         <div class="flex flex-wrap mt-4">
-            {{> components/button/button_pseudo _linkCss="js-ticket-ok-button mr-4 mt-4 ds-button js-modal-close" _buttonText="Zum Ticketshop" _withLink="true"}}
-            <button class="mt-4 ds-button" value="cancel">Abbrechen</button>
+            {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mr-4 mt-4"}}
+                {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
+            {{/components/button/link_button}}
+            {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mt-4"}}
+                {{>components/button/components/button_label _label="Abbrechen" _css=""}}
+            {{/components/button/button}}
         </div>
     {{/components/modal/modal}}
     <noscript>
@@ -20,11 +24,9 @@
                 display:none;
             }
         </style>
-        {{#> components/button/components/button_pseudo_link}}
-            {{#> components/button/button_pseudo_v2 _type="inverted"}}
-                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+            {{#> components/button/link_button _size="lg"}}
+                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
                 {{>components/button/components/button_label _label="Tickets"}}
-            {{/components/button/button_pseudo_v2}}
-        {{/components/button/components/button_pseudo_link}}
+            {{/components/button/link_button}}
     </noscript>
 </div>

package/dist/views/components/grid/grid_group_highlight.hbs

@@ -1,5 +1,5 @@
 </div>
-<div class="grid col-full grid-page my-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-concrete"," bg-orange-bridesmaid"]'}}">
+<div class="grid col-full grid-page my-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
     <section class="grid grid-cols-12 py-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}

package/dist/views/components/label/label_old.hbs

@@ -10,7 +10,7 @@
 
 </span>
 {{~#with this.byline~}}
-    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-grey-scorpion{{/if}}'>
+    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-gray-scorpion{{/if}}'>
         {{~#if this.bylineSsi~}}
             {{> components/base/loadSSI _context=this.context _templatePath=this.bylineSsi}}
         {{~else~}}

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

@@ -10,27 +10,9 @@
         {{#with _teaser}}
             {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=this.dontLazyload ~}}                             
         {{/with}}
-        {{> components/button/button_round 
-            _isButton="true" 
-            _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button cy-mediaplayer-trigger'
-            _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-media-button hover:fill-media-button')
-            _teaserType=_teaserType
-            _teaserSize=_teaserSize
-            _isMobile1to1=_isMobile1to1
-            _showIcon=true
-            _icon=_mediaButtonIcon 
-            _label=_mediaButtonLabel 
-            _srOnly="true" 
-            _alpineClick="avStart = !avStart; $dispatch('player_start')"
-            _aria=""
-            _title=""
-            _name=""
-            _value=""
-            _iconmap="icons"
-            _addIconClass=""
-            _webview=""
-            _x-show=""
-            _noFocus=""
-        }}    
+
+        {{#with this}}
+            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
+        {{/with}} 
     </div>
 {{/if}}

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

@@ -0,0 +1,9 @@
+{{#with this}}
+    {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
+        {{#> 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}}
+            {{#*inline "css"}}{{/inline}}
+        {{/components/base/image/icon}}
+        {{>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}}
+{{/with}}

package/dist/views/components/modal/modal.hbs

@@ -1,5 +1,5 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
-    <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\\" {{this.link.cmsDocument.title}} \\" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+    <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}
         </form>

package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs

@@ -3,7 +3,7 @@
         @resize.window="checkIfScrollable($refs.container)"
         class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
 
-    <div class="flex justify-center text-xs list-none text-grey-scorpion ">
+    <div class="flex justify-center text-xs list-none text-gray-scorpion ">
 
         <template x-if="isScrollable">
             <div>

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

@@ -16,7 +16,10 @@
         {{~#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/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink=true _buttonText=this.title _buttonCss="truncate" _linkCss="flex min-w-0"~}}
+                    {{~#> components/button/link_button _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}}
                 </div>
             {{~/if~}}
         {{/with~}}

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

@@ -2,7 +2,7 @@
 {{#with this.teaserInfo}}
     {{!--Teaser-Info--}}
         {{#if this.showTeaserInfo~}}
-         <p class="mt-1 text-xs text-grey-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
+         <p class="mt-1 text-xs text-gray-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
             {{~#if this.showTeaserInfoSection}}
                <span>
                   {{../this.documentSection~}}

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

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus" "ds-link-clusterTeaser") "group") }} 
+{{#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=""}}

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

@@ -1,20 +1,6 @@
-{{> components/button/button_transparent 
-    _showIcon="true" 
-    _title="Mediaplayer schließen" 
-    _icon="arrow-up"
-    _iconmap="icons"
-    _addIconClass="w-3 h-3 fill-current" 
-    _addClass="md:hidden absolute top-full right-0 z-20" 
-    _x-show="avStart" 
-    _alpineClick=(loca "close_button_alpine_click" _playerId)
-
-    _isButton="true"   
-    _buttonColor=""
-    _label=""
-    _srOnly=true
-    _aria=""
-    _name=""
-    _value=""
-    _webview=""
-    _noFocus=""
-}}
+{{#with this}}
+    {{#> components/button/button _css="absolute top-full right-0 py-3.5 px-3.5 text-blue-700 font-semibold z-20 md:hidden hover:bg-slate-300" _title="Mediaplayer schließen" _variant="tertiary" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
+        {{> components/base/image/icon _icon="arrow-up"  _addClass="w-3 h-3 fill-current"}}
+    {{/components/button/button}} 
+    {{#*inline "css"}}{{/inline}}
+{{/with}}

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

@@ -1,5 +1,5 @@
 {{#if this.hasByline}}
-    <p class="mt-2 text-xs text-grey-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
+    <p class="mt-2 text-xs text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
         {{!--Teaser-Info--}}
         {{~#with this.teaserInfo~}}
             {{~#if this.showTeaserInfo~}}

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

@@ -6,20 +6,12 @@
 {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
 {{#if this.isProgram}}
     {{#if this.showMediatheksLink}}
-        {{#decorator 'components/base/link' _isAriaHidden=true}}
-            {{> components/button/button_round 
-        _isButton="true" 
-        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
-        _buttonColor='text-media-button hover:fill-media-button'
-        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-        _showIcon=true 
-        _icon='play_button' 
-        _label='Sendung' 
-        _srOnly="true" 
-        _alpineClick=""
-         _noFocus="true"
-        }}    
-        {{/decorator}}
+        {{#with this}}
+            {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+            {{#*inline "css"~}}
+                {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=../../_isMobile1to1}}
+            {{/inline}}
+        {{/with}}
     {{/if}}
 {{/if}}
 

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

@@ -20,22 +20,25 @@
     >
 
     {{!-- Button --}}
-    <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
+    {{#with this}}
+        {{#> components/button/button _size="md" _disableButtonPress=true}}
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            <span x-cloak x-show="open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+            <span x-show="!open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+        {{/components/button/button}}
+        {{#*inline "html_properties"}}
+        x-ref="button" 
+        x-on:click="toggle()" 
+        :aria-expanded="open" 
+        :aria-controls="$id('dropdown-button')" 
         :class="open ? 'drop-shadow' : ''" 
-        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-text js-load"
-        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
-        <div x-cloak x-show="open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-        <div x-show="!open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-    </button>
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'
+        {{/inline}}
+    {{/with}}
 
     {{!-- Flyout --}}
     <div

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

@@ -1,12 +1,12 @@
 {{#if this.isSingleChannel}}
     {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
-        <span class="block 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"]' ~}}">
+        <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}}
 {{else}}
     <div class="font-title text-base mt-2.5 text-podcast-text">
-        <span class="block 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"]' ~}}">
+        <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"]' ~}}">
             {{~_title~}}
         </span>
     </div>

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

@@ -7,7 +7,10 @@
     </div>
     {{~#if this.link~}}
         <div class="flex justify-center min-w-0 pt-8 mx-5">
-            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
+            {{~#> components/button/link_button _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}}
         </div>
     {{~/if~}}
 </section>

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

@@ -1,20 +1,19 @@
 </div>
 <div 
-  x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
+  x-data="{ tab: '{{this.tabbedGroup.[0].title}}', test:true }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0">
-    <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
+    <div class="flex flex-wrap gap-y-3 justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
-        <button :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
-                x-on:click.prevent="tab = '{{this.title}}'; "  
-                class="border ds-button text-base font-heading py-px px-2 m-1.5 js-load" 
-                type="button" 
-                role="tab"
-                data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
-        >
-          {{this.title}}
-        </button>
+        {{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
+          {{> components/button/components/button_label _label=this.title}}
+        {{/components/button/button }}
+        {{#*inline "html_properties"~}} 
+          :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button-primary--dark":tab ==="{{this.title}}",
+          "{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}' 
+          x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'   
+        {{~/inline}}
       {{~/each~}}
     </div>
     {{~> components/teaser/teaser_logic/teaser_logic ~}}

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

@@ -22,6 +22,10 @@
                 {{/components/teaser/components/teaser_headline}}
             {{/components/teaser/components/teaser_header}}
         {{/decorator}}
-        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
+        <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/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+            {{/components/button/link_button}}
+        </span>
     </div>
 </article>

package/gulpfile.js

@@ -1,5 +1,6 @@
 const { src, dest, series, parallel, watch } = require('gulp')
 const debug = require('gulp-debug')
+const replace = require('gulp-replace')
 const fs = require('fs')
 const mergeStream = require('merge-stream')
 const glob = require('glob')
@@ -316,10 +317,17 @@ function watchFiles() {
 
 async function convertPartialsToJs() {
     src(`${options.paths.assets.views}/**/*.hbs`)
+        .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '$1'))
         .pipe(htmlToJs({ concat: 'handlebar-partials.js' }))
         .pipe(dest(options.paths.dist.handlebarPartials))
 }
 
+async function preparePartialsForDelivery() {
+    src(`${options.paths.assets.components}/**/*.hbs`)
+        .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '../../$1'))
+        .pipe(dest(options.paths.dist.dist_components))
+}
+
 function createModernizr() {
     return src(`${options.paths.assets.views}/**/*.js`)
         .pipe(modernizr(require('./build/modernizr/config.json')))
@@ -371,3 +379,4 @@ exports.parseJson = series(parseJson, watchForChanges)
 exports.createModernizrConfig = series(createModernizr, addCustomModernizrTests)
 exports.mergeLocatags = mergeLocatags
 exports.convertPartialsToJs = convertPartialsToJs
+exports.preparePartialsForDelivery = preparePartialsForDelivery