hr-design-system-handlebars 0.55.2 → 0.55.3

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.55.3 (Fri Aug 19 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part4 [#304](https://github.com/mumprod/hr-design-system-handlebars/pull/304) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.55.2 (Fri Aug 19 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -902,6 +902,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-auto {
+  width: auto;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -914,9 +917,6 @@ video {
 .w-40 {
   width: 10rem;
 }
-.w-auto {
-  width: auto;
-}
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -1218,15 +1218,15 @@ video {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-r {
   border-right-width: 1px;
 }
 .border-l-2 {
   border-left-width: 2px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-b-0 {
   border-bottom-width: 0px;
 }
@@ -1442,6 +1442,14 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1466,18 +1474,10 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -1867,7 +1867,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1660924214352;
+  counter-reset: cnt1660939134937;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2250,7 +2250,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1660924214352 1;
+  counter-increment: cnt1660939134937 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2267,7 +2267,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1660924214352);
+  content: counter(cnt1660939134937);
 }
 /*! purgecss start ignore */
 :root,
@@ -2644,6 +2644,9 @@ 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;
 }
@@ -2861,6 +2864,10 @@ video {
     display: none;
   }
 
+  .md\:h-auto {
+    height: auto;
+  }
+
   .md\:h-header-md {
     height: 5.5625rem;
   }
@@ -2873,10 +2880,6 @@ video {
     height: 1.75rem;
   }
 
-  .md\:h-auto {
-    height: auto;
-  }
-
   .md\:h-full {
     height: 100%;
   }
@@ -3151,6 +3154,10 @@ 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/content_nav/content_nav.hbs

@@ -1,10 +1,10 @@
-{{#with this.contentNav}}
+{{#with this.contentNav}} 
     {{#if this.isList}}
         <nav class="c-content-nav {{../_modifier}} ">
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
         </nav>
     {{else}}
-        {{#>components/base/menu/dropdown
+        {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
@@ -14,18 +14,19 @@
         }} 
             <div x-on:click.outside ="open = false;" class="flex flex-wrap {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
                 {{#if this.isAutosuggest}}
-                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'>
-                
+                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+                {{/if}}
+                >
+                {{#if this.isAutosuggest}}
                     <div class="flex w-full h-10 my-2 c-content-nav__autosuggest border-blue-congress align-center">
                         <input x-ref="autosuggestInput" class="w-full pl-4 focus:outline-none js-autosuggest-input" type="text"
                                 placeholder="Eintrag filtern"/>
                     </div>
                 {{/if}}
-
                 {{> components/content_nav/content_nav_list  _teasersize=_teasersize}}
 
             </div>
-        {{/components/base/menu/dropdown}}
+        {{/components/content_nav/dropdown}}
 
-    {{/if}}
+    {{/if}}   
 {{/with}}

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

@@ -1,15 +1,14 @@
 <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 ' 
+            : {{_islist}} ? 'border rounded mb-2 last:mb-0 md:last: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">
      {{#>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 rounded-sm whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}

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

@@ -1,5 +1,5 @@
-<ul 
-    :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)]' : ''"  
+<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">
     
     {{~#each this.contentNavEntries~}}
@@ -25,3 +25,4 @@
         {{~/if~}}
     {{~/each~}}
 </ul>
+

package/{src/stories/views/components/base/menu → dist/views/components/content_nav}/dropdown.hbs

@@ -1,11 +1,12 @@
-<nav x-data="contentNavigationHandler()" 
-    x-init="init()"
+<nav  
     class="w-full {{_componentClass}} {{_modifier}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
     aria-labelledby="dropdown__label--{{getRandom}}">
+
     <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"  >
         
@@ -22,8 +23,10 @@
             </span>
         </div>
 
-    </div>        
+    </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">
        {{> @partial-block }}
     </div>
+    
 </nav>

package/dist/views/components/site_header/header_alpine.js

@@ -347,10 +347,7 @@ document.addEventListener('alpine:init', () => {
 
     Alpine.data('contentNavigationHandler', () =>({    
         open: false,
-        
-        init(){  
-        },
-
+    
         shouldDropdownBeShown(teasersize,isDropdown,isMixed){  
             if (isDropdown){
                 return true

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

@@ -1,4 +1,4 @@
-<div class="col-span-12 flex gap-y-3 gap-x-4  {{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 "]'}}">
+<div  x-data="contentNavigationHandler()" class="col-span-12 flex gap-y-3 gap-x-4  {{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 "]'}}">
 
     {{#if this.contentNav.isDropdown}}
         

package/package.json

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

package/src/assets/fixtures/teaser/{teaser_content_nav_mixed_25.json → teaser_content_nav_mixed_autosuggest.json}

@@ -1,6 +1,6 @@
 { 
-    "realTeasersize" : "25",
-    "teasersize" : "25",
+    "realTeasersize" : "100",
+    "teasersize" : "100",
 
     "contentNav" : {
         "title"       : "Geiler Titel",
@@ -8,7 +8,7 @@
         "isDropdown" : false,
         "isList" : false,
         "isMixed" : true,
-        "isAutoSuggest" : false,
+        "isAutosuggest" : true,
         "selectedItem": {
             "title" : "Themen Wirtschaft"
         },

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

@@ -1,10 +1,10 @@
-{{#with this.contentNav}}
+{{#with this.contentNav}} 
     {{#if this.isList}}
         <nav class="c-content-nav {{../_modifier}} ">
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
         </nav>
     {{else}}
-        {{#>components/base/menu/dropdown
+        {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
@@ -14,18 +14,19 @@
         }} 
             <div x-on:click.outside ="open = false;" class="flex flex-wrap {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
                 {{#if this.isAutosuggest}}
-                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'>
-                
+                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+                {{/if}}
+                >
+                {{#if this.isAutosuggest}}
                     <div class="flex w-full h-10 my-2 c-content-nav__autosuggest border-blue-congress align-center">
                         <input x-ref="autosuggestInput" class="w-full pl-4 focus:outline-none js-autosuggest-input" type="text"
                                 placeholder="Eintrag filtern"/>
                     </div>
                 {{/if}}
-
                 {{> components/content_nav/content_nav_list  _teasersize=_teasersize}}
 
             </div>
-        {{/components/base/menu/dropdown}}
+        {{/components/content_nav/dropdown}}
 
-    {{/if}}
+    {{/if}}   
 {{/with}}

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

@@ -1,15 +1,14 @@
 <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 ' 
+            : {{_islist}} ? 'border rounded mb-2 last:mb-0 md:last: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">
      {{#>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 rounded-sm whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}

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

@@ -1,5 +1,5 @@
-<ul 
-    :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)]' : ''"  
+<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">
     
     {{~#each this.contentNavEntries~}}
@@ -25,3 +25,4 @@
         {{~/if~}}
     {{~/each~}}
 </ul>
+

package/{dist/views/components/base/menu → src/stories/views/components/content_nav}/dropdown.hbs

@@ -1,11 +1,12 @@
-<nav x-data="contentNavigationHandler()" 
-    x-init="init()"
+<nav  
     class="w-full {{_componentClass}} {{_modifier}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
     aria-labelledby="dropdown__label--{{getRandom}}">
+
     <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"  >
         
@@ -22,8 +23,10 @@
             </span>
         </div>
 
-    </div>        
+    </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">
        {{> @partial-block }}
     </div>
+    
 </nav>

package/src/stories/views/components/site_header/header_alpine.js

@@ -347,10 +347,7 @@ document.addEventListener('alpine:init', () => {
 
     Alpine.data('contentNavigationHandler', () =>({    
         open: false,
-        
-        init(){  
-        },
-
+    
         shouldDropdownBeShown(teasersize,isDropdown,isMixed){  
             if (isDropdown){
                 return true

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

@@ -1,4 +1,4 @@
-<div class="col-span-12 flex gap-y-3 gap-x-4  {{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 "]'}}">
+<div  x-data="contentNavigationHandler()" class="col-span-12 flex gap-y-3 gap-x-4  {{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 "]'}}">
 
     {{#if this.contentNav.isDropdown}}
         

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

@@ -5,22 +5,14 @@ import { addCommentLink } from '../jsonHelper'
 
 import teaser from './teaser_content_nav.hbs'
 
-import contentNavList_100 from '../fixtures/teaser_content_nav_list_100.json'
-import contentNavList_66 from '../fixtures/teaser_content_nav_list_66.json'
-import contentNavList_50 from '../fixtures/teaser_content_nav_list_50.json'
-import contentNavList_33 from '../fixtures/teaser_content_nav_list_33.json'
-import contentNavList_25 from '../fixtures/teaser_content_nav_list_25.json'
+import contentNavList from '../fixtures/teaser_content_nav_list_100.json'
 
-import contentNavMixed_100 from '../fixtures/teaser_content_nav_mixed_100.json'
-import contentNavMixed_66 from '../fixtures/teaser_content_nav_mixed_66.json'
-import contentNavMixed_50 from '../fixtures/teaser_content_nav_mixed_50.json'
-import contentNavMixed_33 from '../fixtures/teaser_content_nav_mixed_33.json'
-import contentNavMixed_25 from '../fixtures/teaser_content_nav_mixed_25.json'
+import contentNavMixed from '../fixtures/teaser_content_nav_mixed_100.json'
+import contentNavMixed_autosuggest from '../fixtures/teaser_content_nav_mixed_autosuggest.json'
+
+import contentNavDropdown_autosuggest from '../fixtures/teaser_content_nav_dropdown_autosuggest_100.json'
+import contentNavDropdown from '../fixtures/teaser_content_nav_dropdown_100.json'
 
-import contentNavDropdown_autosuggest_100 from '../fixtures/teaser_content_nav_dropdown_autosuggest_100.json'
-import contentNavDropdown_100 from '../fixtures/teaser_content_nav_dropdown_100.json'
-import contentNavDropdown_autosuggest_50 from '../fixtures/teaser_content_nav_dropdown_autosuggest_50.json'
-import contentNavDropdown_50 from '../fixtures/teaser_content_nav_dropdown_50.json'
 
 <Meta
     title="Komponenten/Teaser/Content-Navi"
@@ -31,6 +23,16 @@ import contentNavDropdown_50 from '../fixtures/teaser_content_nav_dropdown_50.js
         }
     }}
     argTypes={{
+        realTeasersize: {
+            table: {
+                disable: true
+            }
+        },
+        contentNav: {
+            table: {
+                disable: true
+            }
+        },
         teasersize: {
             control: {
                 type: 'select',
@@ -66,63 +68,25 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 ## Beschreibung
 
 
-<Preview withToolbar>
-    
-    <b>Liste 100%</b>
-    <Story name="Liste 100%" args={contentNavList_100}>
-        {Template.bind({})}
-    </Story>
-    <b>Liste 66%</b>
-    <Story name="Liste 66%" args={contentNavList_66}>
-        {Template.bind({})}
-    </Story>
-    <b>Liste 50%</b>
-    <Story name="Liste 50%" args={contentNavList_50}>
-        {Template.bind({})}
-    </Story>
-    <b>Liste 33%</b>
-    <Story name="Liste 33%" args={contentNavList_33}>
+<Preview withToolbar>    
+    <b>Liste</b>
+    <Story name="Liste" args={contentNavList}>
         {Template.bind({})}
     </Story>
-    <b>Liste 25%</b>
-    <Story name="Liste 25%" args={contentNavList_25}>
+    <b>Gemischt</b>
+    <Story name="Gemischt" args={contentNavMixed}>
         {Template.bind({})}
     </Story>
-    <b>Gemischt 100%</b>
-    <Story name="Gemischt 100%" args={contentNavMixed_100}>
+    <b>Gemischt Autosuggest</b>
+    <Story name="Gemischt Autosuggest" args={contentNavMixed_autosuggest}>
         {Template.bind({})}
     </Story>
-    <b>Gemischt 100%</b>
-    <Story name="Gemischt 66%" args={contentNavMixed_66}>
+    <b>Dropdown</b>
+    <Story name="Dropdown" args={contentNavDropdown}>
         {Template.bind({})}
     </Story>
-    <b>Gemischt 100%</b>
-    <Story name="Gemischt 50%" args={contentNavMixed_50}>
+    <b>Dropdown Autosuggest</b>
+    <Story name="Dropdown Autosuggest" args={contentNavDropdown_autosuggest}>
         {Template.bind({})}
     </Story>
-    <b>Gemischt 100%</b>
-    <Story name="Gemischt 33%" args={contentNavMixed_33}>
-        {Template.bind({})}
-    </Story>
-    <b>Gemischt 25%</b>
-    <Story name="Gemischt 25%" args={contentNavMixed_25}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown 100%</b>
-    <Story name="Dropdown 100%" args={contentNavDropdown_100}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown 100% Autosuggest</b>
-    <Story name="Dropdown 100% Autosuggest" args={contentNavDropdown_autosuggest_100}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown 50%</b>
-    <Story name="Dropdown 50%" args={contentNavDropdown_50}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown 50% Autosuggest</b>
-    <Story name="Dropdown 50% Autosuggest" args={contentNavDropdown_autosuggest_50}>
-        {Template.bind({})}
-    </Story>  
-    
 </Preview>

package/src/stories/views/components/teaser/fixtures/{teaser_content_nav_dropdown_50.json → teaser_content_nav_mixed_autosuggest.json}

@@ -1 +1 @@
-{"realTeasersize":"50","teasersize":"50","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":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}]}}

package/tailwind.config.js

@@ -54,7 +54,7 @@ module.exports = {
             },
             boxShadow: {
                 'inner': 'inset 0 0px 5px 0 rgba(0, 0, 0, 0.25)',
-                'dropdown': 'outset 0 7px 29px 0 rgb(100, 100, 111, 0.2)'
+                'dropdown': '0 13px 27px -2px rgba(100, 100, 111, 0.2)'
             },
             dropShadow: {
                 'md': '0 5px 3px rgb(0 0 0 / 0.07)',