hr-design-system-handlebars 0.116.5 → 0.117.0

package/src/assets/fixtures/teaser/teaser_standard_25_serif_link.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "25"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "25"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_25_serif_live.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "25"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "25"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_25_serif_podcast.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "25"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "25"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_25_serif_video.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "25"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "25"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_33_long_geotag.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "logicItem.includeModel.geotag",
             "@->value": [

package/src/assets/fixtures/teaser/teaser_standard_33_serif.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_33_serif_link.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_33_serif_multiple_events.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "logicItem.includeModel.moreThenOneEvent",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_33_serif_single_event.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "event-ds"

package/src/assets/fixtures/teaser/teaser_standard_33_serif_tabbox.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_33_serif_two_events.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "event-ds"

package/src/assets/fixtures/teaser/teaser_standard_50_serif.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_audio.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_audio_livestream.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_download.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "logicItem.includeModel.label",
             "@->value": {

package/src/assets/fixtures/teaser/teaser_standard_50_serif_link.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_live.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_podcast.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_50_serif_single_event.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         },        {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "event-ds"

package/src/assets/fixtures/teaser/teaser_standard_50_serif_tabbox.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"

package/src/assets/fixtures/teaser/teaser_standard_50_serif_video.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_standard_66_serif_single_event.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "66"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "66"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "event-ds"

package/src/assets/fixtures/teaser/teaser_standard_without_teaserimage_25_serif.json

@@ -6,6 +6,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "25"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "25"
+        },
         {
             "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": false

package/src/assets/fixtures/teaser/teaser_standard_without_teaserimage_50_serif.json

@@ -5,6 +5,10 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
         }
     ]
 }

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -11,6 +11,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-04-17T19:30+0200",
@@ -128,6 +129,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-04-17T19:30+0200",
@@ -235,6 +237,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-11T06:57+0200",
@@ -331,6 +334,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-25T12:35+0200",
@@ -427,6 +431,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-23T16:04+0200",
@@ -527,6 +532,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-13T16:04+0200",
@@ -628,6 +634,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-11T19:46+0200",
@@ -728,6 +735,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-08-09T19:46+0200",
@@ -832,6 +840,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2020-10-02T19:46+0200",
@@ -935,6 +944,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-10-14T20:00+0200",
@@ -1050,6 +1060,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-04-17T19:30+0200",
@@ -1151,6 +1162,7 @@
                 "extendedTitle": "Einsatz für die Enteiser am Flughafen",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-04-17T19:30+0200",
@@ -1251,6 +1263,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserDate": {
                     "htmlDateTime": "2022-04-17T19:30+0200",
@@ -1366,6 +1379,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "100",
+                "realTeaserSize": "100",
                 "isMobile1to1": false,
                 "airdateDate": {
                     "htmlDateTime": "2022-10-31T19:30+0200",
@@ -1518,6 +1532,7 @@
                 "extendedTitle": "",
                 "teaserType": "standard-ds",
                 "teaserSize": "hero",
+                "realTeaserSize": "hero",
                 "isMobile1to1": false,
                 "teaserImage": {
                     "@->jsoninclude": "teaser/teaser_images.inc.json",
@@ -1585,9 +1600,8 @@
         }
     },
     "teaserContentNav": {
-        "realTeasersize": "100",
-        "teasersize": "100",
-
+        "teaserSize": "100",
+        "realTeaserSize": "100",
         "contentNav": {
             "title": "Geiler Titel",
             "isListOrFlow": false,

package/src/assets/fixtures/teaser/teasersPodcastPlaylist.inc.json

@@ -4,6 +4,7 @@
             "includePath": "components/teaser/podcast/podcast-playlist",
             "includeModel": {
                 "teaserSize": "100",
+                "realTeaserSize": "100",
                 "isSingleChannel": true,
                 "url": "#url",
                 "title": "Im Haifischbecken - der Social-Media-Podcast",

package/src/assets/fixtures/video/videos.inc.json

@@ -72,7 +72,8 @@
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js",
         "isAutoplay": true,
-        "teaserSize": "100"
+        "teaserSize": "100",
+        "realTeaserSize": "100"
     },
     "video-livestream-hr-fernsehen": {
         "playerConfig": {
@@ -137,7 +138,8 @@
         "type": "videoLivestream",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js",
-        "teaserSize": "00",
+        "teaserSize": "100",
+        "realTeaserSize": "100",
         "isAutoplay": true
     }
 }

package/src/stories/views/components/content_nav/content_nav.hbs

@@ -2,14 +2,14 @@
     {{#if this.isListOrFlow}}
         <nav x-cloak class="w-full px-2 md:px-0 c-content-nav">
             {{> components/content_nav/content_nav_container
-                    _teasersize=../_teasersize
+                    _teaserSize=../_teaserSize
                     _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
             }}
         </nav>
     {{else}}
         {{#decorator 'components/content_nav/content_nav_dropdown'
                      _componentClass="c-content-nav h-10 md:h-auto w-full"
-                     _teasersize=../_teasersize
+                     _teaserSize=../_teaserSize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
@@ -17,7 +17,7 @@
         }}
             
         {{> components/content_nav/content_nav_container
-                _teasersize=_teasersize
+                _teaserSize=_teaserSize
                 _maindivclass="flex flex-col w-full mt-0"
         }}
             

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -14,6 +14,6 @@
         </div>
     {{/if}}
 
-    {{> components/content_nav/content_nav_list _teasersize=_teasersize }}
+    {{> components/content_nav/content_nav_list _teaserSize=_teaserSize }}
 
 </div>

package/src/stories/views/components/content_nav/content_nav_dropdown.hbs

@@ -7,7 +7,7 @@
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
 
-    <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
+    <div x-show="shouldDropdownBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
          :class="contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
          class="relative flex w-auto h-10 mx-2 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
@@ -26,7 +26,7 @@
             </button>
         </div>
     </div>
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
+    <div x-show="shouldContentBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
          aria-haspopup="true"
          @click.outside="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
          :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"

package/src/stories/views/components/content_nav/content_nav_item.hbs

@@ -1,4 +1,4 @@
-<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
+<li x-init="chooseListItemStyles({{_teaserSize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
 class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button fill-content-nav text-content-nav bg-white hover:bg-content-nav hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
      {{#decorator 'components/base/link' 
         _doNavigationTracking="true" 

package/src/stories/views/components/content_nav/content_nav_list.hbs

@@ -1,5 +1,5 @@
 <ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
-    :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
+    :class="( ({{this.isMixed}} && {{_teaserSize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
     > 
     
     {{~#each this.contentNavEntries~}}
@@ -12,7 +12,7 @@
                     <ul class="c-content-nav__group-list !px-0 mt-0">
                         {{~#each this.navigationGroup~}}
                             {{> components/content_nav/content_nav_item 
-                                _teasersize=../../_teasersize 
+                                _teaserSize=../../_teaserSize 
                                 _isdropdown=../../isDropdown 
                                 _ismixed=../../isMixed 
                                 _islist=../../isList 
@@ -23,7 +23,7 @@
             {{/if}}
         {{else}}           
             {{> components/content_nav/content_nav_item  
-                _teasersize=../_teasersize 
+                _teaserSize=../_teaserSize 
                 _isdropdown=../isDropdown 
                 _ismixed=../isMixed 
                 _islist=../isList 

package/src/stories/views/components/grid/grid_group.hbs

@@ -3,7 +3,7 @@
         {{> @partial-block }}
     {{/components/grid/grid_group_highlight }}
 {{else}}
-    {{#>components/grid/grid_group_standard _size=this.teaserSize }}  
+    {{#>components/grid/grid_group_standard _groupSize=this.teaserSize }}  
         {{> @partial-block }}
     {{/components/grid/grid_group_standard }}
 {{/if}}

package/src/stories/views/components/grid/grid_group_standard.hbs

@@ -1,3 +1,3 @@
-<section class="grid grid-cols-12 first:mt-6 items-start bg-white content-start gap-x-6 gap-y-5 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
+<section class="grid grid-cols-12 first:mt-6 items-start bg-white content-start gap-x-6 gap-y-5 col-span-12 {{inline-switch _groupSize '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
     {{> @partial-block }}
 </section>

package/src/stories/views/components/mediaplayer/mediaplayerLoader.feature.js

@@ -8,7 +8,7 @@ const MediaplayerLoader = function (context) {
     const { options } = context,
         { element: rootElement } = context,
         isAutoplay = options.isAutoplay,
-        teaserSize = options.teaserSize,
+        teasersize = options.teasersize,
         mediaplayerButton = hr$('.js-mediaplayer__button', rootElement.parentNode)[0]
 
     const removeVideoHover = function () {
@@ -19,7 +19,7 @@ const MediaplayerLoader = function (context) {
     const loadArdPlayerLoader = function () {
         new ArdPlayerLoader(options)
         removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+        uxAction('mediabuttonclick::' + teasersize + '::playButtonClick')
     }
 
     if (isAutoplay) {

package/src/stories/views/components/page/page.hbs

@@ -34,11 +34,11 @@
                         {{> components/teaser/teaser_standard }}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="100"}}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="50"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="50"}}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
                         {{> components/teaser/teaser_standard teaserSize="50"}}

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs

@@ -3,7 +3,7 @@
     ax-load
     ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
     x-data="contentNavigationHandler()"
-    class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
+    class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teaserSize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
-    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
+    {{> components/content_nav/content_nav _teaserSize=this.teaserSize }}           
 </div>

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx

@@ -25,7 +25,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
         },
     }}
     argTypes={{
-        realTeasersize: {
+        realTeaserSize: {
             table: {
                 disable: true
             },
@@ -36,7 +36,7 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
                 disable: false,
             },
         },        
-        teasersize: {
+        teaserSize: {
             control: {
                 type: 'select',
                 options: ['100', '66', '50', '33', '25'],