hr-design-system-handlebars 0.56.0 → 0.56.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.56.1 (Tue Aug 30 2022)
+
+#### 🐛 Bug Fix
+
+- first try with groups, diverse changes in css, adds load_dynamic for … [#306](https://github.com/mumprod/hr-design-system-handlebars/pull/306) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.0 (Tue Aug 30 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -725,11 +725,14 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.\!mb-0 {
-  margin-bottom: 0px !important;
+.\!mr-2 {
+  margin-right: 0.5rem !important;
 }
 .mr-2 {
   margin-right: 0.5rem;
@@ -888,6 +891,11 @@ video {
 .\!w-full {
   width: 100% !important;
 }
+.\!w-fit {
+  width: -webkit-fit-content !important;
+  width: -moz-fit-content !important;
+  width: fit-content !important;
+}
 .w-fit {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1155,18 +1163,9 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.\!rounded-none {
-  border-radius: 0px !important;
-}
-.rounded-none {
-  border-radius: 0px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-sm {
-  border-radius: 0.125rem;
-}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1407,6 +1406,9 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
+.p-0 {
+  padding: 0px;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1435,6 +1437,10 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1860,7 +1866,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1661851888889;
+  counter-reset: cnt1661863471171;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2243,7 +2249,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1661851888889 1;
+  counter-increment: cnt1661863471171 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2260,7 +2266,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1661851888889);
+  content: counter(cnt1661863471171);
 }
 /*! purgecss start ignore */
 :root,
@@ -2637,9 +2643,6 @@ video {
 .first\:font-bold:first-child {
   font-weight: 700;
 }
-.last\:mb-0:last-child {
-  margin-bottom: 0px;
-}
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -2819,10 +2822,6 @@ video {
     margin-right: 0px !important;
   }
 
-  .md\:\!mr-2 {
-    margin-right: 0.5rem !important;
-  }
-
   .md\:\!mb-2 {
     margin-bottom: 0.5rem !important;
   }
@@ -2831,6 +2830,10 @@ video {
     margin-right: 0.5rem;
   }
 
+  .md\:\!mr-2 {
+    margin-right: 0.5rem !important;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -2970,10 +2973,6 @@ video {
     overflow: visible;
   }
 
-  .md\:\!rounded {
-    border-radius: 0.25rem !important;
-  }
-
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -3147,10 +3146,6 @@ video {
         }
     }
 
-    .md\:last\:mb-2:last-child {
-    margin-bottom: 0.5rem;
-  }
-
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
   }

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

@@ -1,4 +1,7 @@
 {{#switch _templatePath}}
+    {{#case "components/teaser/content_nav/teaser_content_nav"}}
+        {{> components/teaser/content_nav/teaser_content_nav}}
+    {{/case}}
     {{#case "components/site_header/service_navigation/service_navigation_item"}}
         {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}

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

@@ -3,7 +3,11 @@
         <nav class="c-content-nav {{../_modifier}} ">
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
         </nav>
-    {{else}}
+    {{else if this.isFlow}}
+        <nav class="c-content-nav {{../_modifier}} ">
+            {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+        </nav>
+    {{else}} 
         {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize

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

@@ -1,14 +1,18 @@
-<li :class="{{_isdropdown}} ? '!w-full md:!w-full mb-2 md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 !rounded-none ' 
-            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit md:!mr-2 !mb-0 md:!mb-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 rounded-none md:!border md:!rounded' 
-            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full border-b !mb-0 last:border-b-0'
-            : {{_islist}} ? 'border rounded mb-2 last:mb-0 md:last:mb-2' 
+<li :class="{{_isdropdown}} ? '!w-full md:!w-full md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0' 
+            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit !mb-0 md:!mb-2 md:mr-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 md:!border' 
+            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full !mb-0 border-b last:border-b-0'
+            : {{_islist}} && {{_teasersize}} == 100 ? 'border mb-2 md:!mr-2 '
+            : {{_islist}} && {{_teasersize}} >= 66 ? 'border mb-2 !mr-2 '
+            : {{_islist}} && {{_teasersize}} <= 50 ? 'border mb-2 md:!mr-2'
+            : {{_isflow}} ? '!w-fit !mr-2 border mb-2'
             : '' " 
-class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit md:mr-2","w-fit mb-2 md:mr-2","w-full mb-2","w-full mb-2","w-full mb-2"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
+
+class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit","w-fit","w-full","w-full","w-full"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
      {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress rounded-sm whitespace-nowrap overflow-hidden" 
+        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}
@@ -24,4 +28,4 @@ class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-
         {{/if}}
 
     {{/components/base/link.hbs}} 
-</li>
+</li>

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

@@ -1,6 +1,5 @@
-<ul {{!-- x-init="addDependentCssToUl({{this.isMixed}},{{this.isDropdown}},{{_teasersize}})"   --}}
-:class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)]' : ''" 
-    class="flex flex-wrap w-full m-0 last:border-b-0">
+<ul :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)] !px-0 ' : ''" 
+    class="flex flex-wrap w-full px-2 m-0 last:border-b-0">
     
     {{~#each this.contentNavEntries~}}
           
@@ -20,7 +19,7 @@
             {{/if}}
         {{else}}
             
-            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList}}
+            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList _isflow=../isFlow}}
  
         {{~/if~}}
     {{~/each~}}

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

@@ -1,5 +1,5 @@
 <nav  
-    class="w-full {{_componentClass}} {{_modifier}} " 
+    class="w-full px-2 {{_componentClass}} {{_modifier}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
@@ -8,7 +8,7 @@
     <span id="o-dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
 
     <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
-        class="flex w-full h-8 overflow-hidden bg-white border rounded border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
+        class="flex w-full h-8 overflow-hidden bg-white border border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
         
         <span class="text-base p-2 self-center w-full {{_componentClass}}__button-text">
                 {{_buttonText}}
@@ -25,7 +25,7 @@
 
     </div>    
 
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="md:relative md:left-0 md:h-auto md:overflow-visible">
+    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="p-0 m-0 md:relative md:left-0 md:h-auto md:overflow-visible">
        {{> @partial-block }}
     </div>
     

package/package.json

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

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

@@ -7,6 +7,7 @@
         
         "isDropdown" : true,
         "isList" : false,
+        "isFlow" : false,
         "isMixed" : false,
         "isAutosuggest" : false,
         "selectedItem": {

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

@@ -7,6 +7,7 @@
         
         "isDropdown" : true,
         "isList" : false,
+        "isFlow" : false,
         "isMixed" : false,
         "isAutosuggest" : true,
         "selectedItem": {

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

@@ -0,0 +1,183 @@
+{ 
+    "realTeasersize" : "100",
+    "teasersize" : "100",
+
+    "contentNav" : {
+        "title"       : "Geiler Titel",
+        
+        "isDropdown" : false,
+        "isList" : false,
+        "isFlow" : true,
+        "isMixed" : false,
+        "isAutoSuggest" : false,
+        "contentNavEntries": [
+            {
+            "title" : "Arbeitsmarkt",            
+            "isGroup" : false,
+            "isSelected" : true,
+            "link" : {
+                "url": "/teaser1",
+                "webviewUrl": "/teaser1#webview",
+                "isTargetBlank": true,
+                "hasIcon": true,
+                "iconName": "extern"
+                },
+            "navigationGroup" : [{}]
+            },
+            {
+                "title" : "Banken",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": false,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+
+            {
+                "title" : "Energie",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Flughafen Kassel-Calden",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Gewerkschaften",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Handel",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Handwerk",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Immobilien",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "K + S",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            },
+            {
+                "title" : "Landwirtschaft",
+                "link" : {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                },
+                "isGroup" : false,
+                "isSelected" : false
+            }
+        ]
+    }
+}

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

@@ -1,12 +1,12 @@
 { 
     "realTeasersize" : "100",
     "teasersize" : "100",
-
     "contentNav" : {
         "title"       : "Geiler Titel",
         
         "isDropdown" : false,
         "isList" : true,
+        "isFlow" : false,
         "isMixed" : false,
         "isAutoSuggest" : false,
         "contentNavEntries": [

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

@@ -7,6 +7,7 @@
         
         "isDropdown" : false,
         "isList" : false,
+        "isFlow" : false,
         "isMixed" : true,
         "isAutoSuggest" : false,
         "selectedItem": {

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

@@ -7,6 +7,7 @@
         
         "isDropdown" : false,
         "isList" : false,
+        "isFlow" : false,
         "isMixed" : true,
         "isAutosuggest" : true,
         "selectedItem": {

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "teaser/teaser_groups.inc.json",
+    "@->contentpath": "teaser_contentnav"
+}

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

@@ -14,6 +14,32 @@
             ]
         }
     },
+    "teaser_contentnav": {
+        "includePath": "components/teaser/group_teaser/group_teaser",
+        "includeModel": {
+            "hasLink": true,
+            "link": "#gruppe1",
+            "hasGroupTitle": true,
+            "groupTitle": "Gruppe 100% - 1 x 100% ContentNavTeaser",
+            "teaserSize": "100",
+            "isAccentedGroup" : true,
+            "isHighlightGroup": true,
+            "backgroundColor": "1",
+            "logicItems": [
+                {
+                    "isSsi": true,
+                    "isAccentedGroup" : true,
+                    "logicItem": {
+                        "includePath": "components/teaser/content_nav/teaser_content_nav",
+                        "includeModel": {
+                            "@->jsoninclude": "teaser/teaser_content_nav_list_100.json"
+                        }
+
+                    }
+                }
+            ]
+        }
+    },
     "teaser_2_50": {
         "includePath": "components/teaser/group_teaser/group_teaser",
         "includeModel": {

package/src/stories/views/components/base/load_dynamic.hbs

@@ -1,4 +1,7 @@
 {{#switch _templatePath}}
+    {{#case "components/teaser/content_nav/teaser_content_nav"}}
+        {{> components/teaser/content_nav/teaser_content_nav}}
+    {{/case}}
     {{#case "components/site_header/service_navigation/service_navigation_item"}}
         {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}

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

@@ -3,7 +3,11 @@
         <nav class="c-content-nav {{../_modifier}} ">
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
         </nav>
-    {{else}}
+    {{else if this.isFlow}}
+        <nav class="c-content-nav {{../_modifier}} ">
+            {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+        </nav>
+    {{else}} 
         {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize

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

@@ -1,14 +1,18 @@
-<li :class="{{_isdropdown}} ? '!w-full md:!w-full mb-2 md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 !rounded-none ' 
-            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit md:!mr-2 !mb-0 md:!mb-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 rounded-none md:!border md:!rounded' 
-            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full border-b !mb-0 last:border-b-0'
-            : {{_islist}} ? 'border rounded mb-2 last:mb-0 md:last:mb-2' 
+<li :class="{{_isdropdown}} ? '!w-full md:!w-full md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0' 
+            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit !mb-0 md:!mb-2 md:mr-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 md:!border' 
+            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full !mb-0 border-b last:border-b-0'
+            : {{_islist}} && {{_teasersize}} == 100 ? 'border mb-2 md:!mr-2 '
+            : {{_islist}} && {{_teasersize}} >= 66 ? 'border mb-2 !mr-2 '
+            : {{_islist}} && {{_teasersize}} <= 50 ? 'border mb-2 md:!mr-2'
+            : {{_isflow}} ? '!w-fit !mr-2 border mb-2'
             : '' " 
-class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit md:mr-2","w-fit mb-2 md:mr-2","w-full mb-2","w-full mb-2","w-full mb-2"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
+
+class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit","w-fit","w-full","w-full","w-full"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
      {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress rounded-sm whitespace-nowrap overflow-hidden" 
+        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}
@@ -24,4 +28,4 @@ class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-
         {{/if}}
 
     {{/components/base/link.hbs}} 
-</li>
+</li>

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

@@ -1,6 +1,5 @@
-<ul {{!-- x-init="addDependentCssToUl({{this.isMixed}},{{this.isDropdown}},{{_teasersize}})"   --}}
-:class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)]' : ''" 
-    class="flex flex-wrap w-full m-0 last:border-b-0">
+<ul :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)] !px-0 ' : ''" 
+    class="flex flex-wrap w-full px-2 m-0 last:border-b-0">
     
     {{~#each this.contentNavEntries~}}
           
@@ -20,7 +19,7 @@
             {{/if}}
         {{else}}
             
-            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList}}
+            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList _isflow=../isFlow}}
  
         {{~/if~}}
     {{~/each~}}

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

@@ -1,5 +1,5 @@
 <nav  
-    class="w-full {{_componentClass}} {{_modifier}} " 
+    class="w-full px-2 {{_componentClass}} {{_modifier}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
@@ -8,7 +8,7 @@
     <span id="o-dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
 
     <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
-        class="flex w-full h-8 overflow-hidden bg-white border rounded border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
+        class="flex w-full h-8 overflow-hidden bg-white border border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
         
         <span class="text-base p-2 self-center w-full {{_componentClass}}__button-text">
                 {{_buttonText}}
@@ -25,7 +25,7 @@
 
     </div>    
 
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="md:relative md:left-0 md:h-auto md:overflow-visible">
+    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="p-0 m-0 md:relative md:left-0 md:h-auto md:overflow-visible">
        {{> @partial-block }}
     </div>
     

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

@@ -6,6 +6,7 @@ import { addCommentLink } from '../jsonHelper'
 import teaser from './teaser_content_nav.hbs'
 
 import contentNavList from '../fixtures/teaser_content_nav_list_100.json'
+import contentNavFlow from '../fixtures/teaser_content_nav_flow_100.json'
 
 import contentNavMixed from '../fixtures/teaser_content_nav_mixed_100.json'
 import contentNavMixed_autosuggest from '../fixtures/teaser_content_nav_mixed_autosuggest.json'
@@ -73,6 +74,10 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Liste" args={contentNavList}>
         {Template.bind({})}
     </Story>
+    <b>Fluss</b>
+    <Story name="Fluss" args={contentNavFlow}>
+        {Template.bind({})}
+    </Story>
     <b>Gemischt</b>
     <Story name="Gemischt" args={contentNavMixed}>
         {Template.bind({})}

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

@@ -1 +1 @@
-{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":true,"isList":false,"isMixed":false,"isAutosuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":true,"isList":false,"isFlow":false,"isMixed":false,"isAutosuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -1 +1 @@
-{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":true,"isList":false,"isMixed":false,"isAutosuggest":true,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":true,"isList":false,"isFlow":false,"isMixed":false,"isAutosuggest":true,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -0,0 +1 @@
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":false,"isFlow":true,"isMixed":false,"isAutoSuggest":false,"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -1 +1 @@
-{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":true,"isMixed":false,"isAutoSuggest":false,"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":true,"isFlow":false,"isMixed":false,"isAutoSuggest":false,"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -1 +1 @@
-{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":false,"isMixed":true,"isAutoSuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":false,"isFlow":false,"isMixed":true,"isAutoSuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -1 +1 @@
-{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":false,"isMixed":true,"isAutosuggest":true,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}
+{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":false,"isFlow":false,"isMixed":true,"isAutosuggest":true,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}

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

@@ -0,0 +1 @@
+{"includePath":"components/teaser/group_teaser/group_teaser","includeModel":{"hasLink":true,"link":"#gruppe1","hasGroupTitle":true,"groupTitle":"Gruppe 100% - 1 x 100% ContentNavTeaser","teaserSize":"100","isAccentedGroup":true,"isHighlightGroup":true,"backgroundColor":"1","logicItems":[{"isSsi":true,"isAccentedGroup":true,"logicItem":{"includePath":"components/teaser/content_nav/teaser_content_nav","includeModel":{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":false,"isList":true,"isFlow":false,"isMixed":false,"isAutoSuggest":false,"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":true,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}}}]}}

package/src/stories/views/components/teaser/group_teaser/group.stories.mdx

@@ -5,7 +5,9 @@ import groupTeaser from "./group_teaser.hbs";
 
 import teaserGroup100 from '../fixtures/teaser_group_100.json' 
 import teaserGroup100highlight from '../fixtures/teaser_group_100_highlight.json' 
-import teaserGroup100highlight2 from '../fixtures/teaser_group_100_highlight_2.json' 
+import teaserGroup100highlight2 from '../fixtures/teaser_group_100_highlight_2.json'
+ 
+import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentNav.json' 
 
 <Meta
   title="Komponenten/Teaser/Gruppen"
@@ -56,6 +58,12 @@ Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
   >
     {groupTeaserTemplate.bind({})}
   </Story>
+  <Story
+    name="100% Gruppe mit Content Navigation"
+    args={teaserGroup100contentnav.includeModel} 
+  >
+    {groupTeaserTemplate.bind({})}
+  </Story>
 </Preview>
 
 <ArgsTable story="main" />