hr-design-system-handlebars 1.11.12 → 1.12.1

package/src/stories/views/components/teaser/fixtures/ticker_teaser_standard_100.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/ticker/teaser_ticker","includeModel":{"byline":"Byline","title":"Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":false,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sportschau-image-5708_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sportschau-image-5708_v-16to9__small.jpg 320w, images/sportschau-image-5708_v-16to9__medium.jpg 480w, images/sportschau-image-5708_v-16to9__medium__extended.jpg 640w, images/sportschau-image-5708_v-16to9.jpg 960w, images/sportschau-image-5708_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":true,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/ticker/teaser_ticker","includeModel":{"byline":"Byline","title":"Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sportschau-image-5708_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sportschau-image-5708_v-16to9__small.jpg 320w, images/sportschau-image-5708_v-16to9__medium.jpg 480w, images/sportschau-image-5708_v-16to9__medium__extended.jpg 640w, images/sportschau-image-5708_v-16to9.jpg 960w, images/sportschau-image-5708_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":true,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":true,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Karsten Hufer","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}

package/src/stories/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/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/src/stories/views/components/teaser/ticker/teaser_ticker.hbs

@@ -1,4 +1,4 @@
-<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+<article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
 {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
 {{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
  "
@@ -18,12 +18,12 @@
                 <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
                     {{> components/event/instant_dates}}
                 </div>
-                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
+                {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
             {{/decorator}}
         {{else}}
-            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
+            {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
         {{/if}}
     {{else}}
-        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
+        {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
     {{/if}}
 </article>

package/src/stories/views/components/teaser/ticker/teaser_ticker.stories.js

@@ -29,6 +29,6 @@ export default {
 
 export const TickerTeaser100 = {
     render: Template.bind({}),
-    name: 'Ticker Teaser 100',
+    name: 'Standard 100',
     args: tickerTeaser100Standard.logicItem.includeModel,
 }

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>