hr-design-system-handlebars 1.11.12 → 1.12.0

package/src/stories/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/src/stories/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/src/stories/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/src/stories/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/tailwind.config.js

@@ -272,13 +272,14 @@ module.exports = {
                     DEFAULT: '#007A7C',
                     deeperPool: '#097d8e',
                 },
-                'grey': {
+                'gray': {
                     alabaster: '#f7f7f7',
                     alto: '#e0e0e0',
                     boulder: '#797979',
                     brightGray: '#E5F2F3',
                     concrete: '#f3f3f3',
                     dark: '#707070',
+                    lightGray: '#d4d4d4',
                     mercury: '#E6E6E6',
                     platinum: '#E5E8E8',
                     scorpion: '#606060',
@@ -337,7 +338,13 @@ module.exports = {
                 'clusterTeaserLink': 'var(--color-cluster-teaser-link,#000)',
                 'clusterTeaserHeadline': 'var(--color-cluster-teaser-headline,#000)',
                 'button': 'var(--color-button)',
+                'button-primary': 'var(--color-button-primary)',
+                'button-primary--dark': 'var(--color-button-primary-dark)',
+                'button-primary--inverted': 'var(--color-button-primary-inverted)',
+                'button-primary--inverted-dark': 'var(--color-button-primary-inverted-dark)',
                 'button-hollow': 'var(--color-button-hollow)',
+                'button-secondary': 'var(--color-button-secondary)',
+                'button-ghost': 'var(--color-button-ghost)',
                 'button-inverted': 'var(--color-button-inverted)',
                 'media-button': 'var(--color-media-button)',
                 'focus-state': 'var(--color-focus-state)',

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

@@ -1,8 +0,0 @@
-{{#if _withLink}}
-    {{#decorator 'components/base/link' _isAriaHidden=_isLinkAriaHidden _css=_linkCss}}
-        {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
-    {{/decorator}}
-{{else}}
-    {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
-{{/if}}
-

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

@@ -1,18 +0,0 @@
-<span
-    class='px-4 py-2.5 border flex items-center
-        {{inline-switch
-            _type
-            '["normal","hollow","hollow-white"]'
-            '["text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}
-        font-heading{{#if _buttonCss}} {{_buttonCss}}{{/if}}'
->
-    <span class="flex-1 truncate">
-        {{_buttonText}}
-    </span>
-    <span>
-        {{~#if _showIcon~}}
-            {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addClass _webview=_webview}}
-        {{/if~}}
-    </span>
-</span>

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

@@ -1,12 +0,0 @@
-
-<span
-    class='px-4 py-2.5 border flex items-center font-heading
-        {{inline-switch
-            _type
-            '["hollow","hollow-white","inverted"]'
-            '["text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}
-        {{#if _css}} {{_css}}{{/if}}'
->
-    {{> @partial-block }}
-</span>

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

@@ -1,23 +0,0 @@
-{{> components/button/button 
-    _aria=_aria
-    _isButton=_isButton
-    _title=_title
-    _name=_name
-    _label=_label
-    _value=_value
-    _showIcon="true"
-    _icon=_icon
-    _iconmap=_iconmap
-    _addIconClass="w-10 h-10 inline"
-    _addClass=_addClass
-    _webview=_webview
-    _x-show=_x-show
-    _alpineClick=_alpineClick
-    _srOnly=_srOnly
-    _buttonColor=_buttonColor
-    _buttonSpace=true
-    _teaserType=_teaserType
-    _teaserSize=_teaserSize
-    _isMobile1to1=_isMobile1to1
-    _noFocus=_noFocus
-}}

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

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

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

@@ -1,17 +0,0 @@
-{{> components/button/button 
-    _aria=_aria
-    _isButton=_isButton
-    _title=_title
-    _name=_name
-    _label=_label
-    _value=_value
-    _showIcon="true"
-    _icon=_icon
-    _iconmap=_iconmap
-    _addIconClass=_addIconClass
-    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "
-    _addClass2=_addClass
-    _webview=_webview
-    _x-show=_x-show
-    _alpineClick=_alpineClick
-}}

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

@@ -1,7 +0,0 @@
-<button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
-            _type
-            '["hollow","hollow-white","inverted"]'
-            '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
-    {{> @partial-block }}
-</button>

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

@@ -1,3 +0,0 @@
-{{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
-    {{> @partial-block }} 
-</a>

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

@@ -1,8 +0,0 @@
-{{#if _withLink}}
-    {{#decorator 'components/base/link' _isAriaHidden=_isLinkAriaHidden _css=_linkCss}}
-        {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
-    {{/decorator}}
-{{else}}
-    {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
-{{/if}}
-

package/src/stories/views/components/button/button_pseudo.inc.hbs

@@ -1,18 +0,0 @@
-<span
-    class='px-4 py-2.5 border flex items-center
-        {{inline-switch
-            _type
-            '["normal","hollow","hollow-white"]'
-            '["text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}
-        font-heading{{#if _buttonCss}} {{_buttonCss}}{{/if}}'
->
-    <span class="flex-1 truncate">
-        {{_buttonText}}
-    </span>
-    <span>
-        {{~#if _showIcon~}}
-            {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addClass _webview=_webview}}
-        {{/if~}}
-    </span>
-</span>

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

@@ -1,12 +0,0 @@
-
-<span
-    class='px-4 py-2.5 border flex items-center font-heading
-        {{inline-switch
-            _type
-            '["hollow","hollow-white","inverted"]'
-            '["text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}
-        {{#if _css}} {{_css}}{{/if}}'
->
-    {{> @partial-block }}
-</span>

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

@@ -1,23 +0,0 @@
-{{> components/button/button 
-    _aria=_aria
-    _isButton=_isButton
-    _title=_title
-    _name=_name
-    _label=_label
-    _value=_value
-    _showIcon="true"
-    _icon=_icon
-    _iconmap=_iconmap
-    _addIconClass="w-10 h-10 inline"
-    _addClass=_addClass
-    _webview=_webview
-    _x-show=_x-show
-    _alpineClick=_alpineClick
-    _srOnly=_srOnly
-    _buttonColor=_buttonColor
-    _buttonSpace=true
-    _teaserType=_teaserType
-    _teaserSize=_teaserSize
-    _isMobile1to1=_isMobile1to1
-    _noFocus=_noFocus
-}}

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

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

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

@@ -1,17 +0,0 @@
-{{> components/button/button 
-    _aria=_aria
-    _isButton=_isButton
-    _title=_title
-    _name=_name
-    _label=_label
-    _value=_value
-    _showIcon="true"
-    _icon=_icon
-    _iconmap=_iconmap
-    _addIconClass=_addIconClass
-    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "
-    _addClass2=_addClass
-    _webview=_webview
-    _x-show=_x-show
-    _alpineClick=_alpineClick
-}}

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

@@ -1,7 +0,0 @@
-<button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
-            _type
-            '["hollow","hollow-white","inverted"]'
-            '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
-        }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
-    {{> @partial-block }}
-</button>

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

@@ -1,3 +0,0 @@
-{{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
-    {{> @partial-block }} 
-</a>