hr-design-system-handlebars 0.56.4 → 0.56.5

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.56.5 (Wed Aug 31 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part6 [#310](https://github.com/mumprod/hr-design-system-handlebars/pull/310) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.4 (Wed Aug 31 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -596,6 +596,9 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -728,15 +731,6 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
-.\!mb-0 {
-  margin-bottom: 0px !important;
-}
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-.\!mr-2 {
-  margin-right: 0.5rem !important;
-}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -758,6 +752,15 @@ video {
 .-mt-10 {
   margin-top: -2.5rem;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
+.\!mr-2 {
+  margin-right: 0.5rem !important;
+}
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -891,6 +894,18 @@ video {
 .w-full {
   width: 100%;
 }
+.w-4 {
+  width: 1rem;
+}
+.w-auto {
+  width: auto;
+}
+.w-6 {
+  width: 1.5rem;
+}
+.w-screen {
+  width: 100vw;
+}
 .\!w-full {
   width: 100% !important;
 }
@@ -904,18 +919,6 @@ video {
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-4 {
-  width: 1rem;
-}
-.w-auto {
-  width: auto;
-}
-.w-6 {
-  width: 1.5rem;
-}
-.w-screen {
-  width: 100vw;
-}
 .w-7 {
   width: 1.75rem;
 }
@@ -1205,6 +1208,12 @@ video {
   border-left-width: 1px;
   border-right-width: 1px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-l {
+  border-left-width: 1px;
+}
 .border-l-0 {
   border-left-width: 0px;
 }
@@ -1214,12 +1223,6 @@ video {
 .border-t-0 {
   border-top-width: 0px;
 }
-.border-b {
-  border-bottom-width: 1px;
-}
-.border-l {
-  border-left-width: 1px;
-}
 .border-r {
   border-right-width: 1px;
 }
@@ -1873,7 +1876,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1661946876001;
+  counter-reset: cnt1661948075085;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2256,7 +2259,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1661946876001 1;
+  counter-increment: cnt1661948075085 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2273,7 +2276,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1661946876001);
+  content: counter(cnt1661948075085);
 }
 /*! purgecss start ignore */
 :root,
@@ -2821,12 +2824,16 @@ video {
     margin-right: 0px;
   }
 
-  .md\:mb-0 {
-    margin-bottom: 0px;
+  .md\:mt-0 {
+    margin-top: 0px;
   }
 
-  .md\:\!mr-0 {
-    margin-right: 0px !important;
+  .md\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .md\:\!mr-2 {
+    margin-right: 0.5rem !important;
   }
 
   .md\:\!mb-2 {
@@ -2837,16 +2844,12 @@ video {
     margin-right: 0.5rem;
   }
 
-  .md\:\!mr-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .md\:mt-0 {
-    margin-top: 0px;
+  .md\:mb-0 {
+    margin-bottom: 0px;
   }
 
-  .md\:-mt-40 {
-    margin-top: -10rem;
+  .md\:\!mr-0 {
+    margin-right: 0px !important;
   }
 
   .md\:mb-16 {
@@ -2891,14 +2894,8 @@ video {
     height: 2rem;
   }
 
-  .md\:\!w-full {
-    width: 100% !important;
-  }
-
-  .md\:\!w-fit {
-    width: -webkit-fit-content !important;
-    width: -moz-fit-content !important;
-    width: fit-content !important;
+  .md\:w-1\/2 {
+    width: 50%;
   }
 
   .md\:w-fit {
@@ -2907,8 +2904,14 @@ video {
     width: fit-content;
   }
 
-  .md\:w-1\/2 {
-    width: 50%;
+  .md\:\!w-fit {
+    width: -webkit-fit-content !important;
+    width: -moz-fit-content !important;
+    width: fit-content !important;
+  }
+
+  .md\:\!w-full {
+    width: 100% !important;
   }
 
   .md\:w-40 {
@@ -2992,14 +2995,14 @@ video {
     border-bottom-right-radius: 1.5rem;
   }
 
-  .md\:\!border {
-    border-width: 1px !important;
-  }
-
   .md\:border-0 {
     border-width: 0px;
   }
 
+  .md\:\!border {
+    border-width: 1px !important;
+  }
+
   .md\:border-r {
     border-right-width: 1px;
   }

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

@@ -1,13 +1,5 @@
-<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","w-fit","w-full","w-full","w-full"]'}} h-8 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">
+<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
+class="h-8 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" 
@@ -29,3 +21,5 @@ class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-
 
     {{/components/base/link.hbs}} 
 </li>
+
+

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

@@ -11,7 +11,7 @@
                     <div class="p-2 c-content-nav__group-title">{{this.title}}</div>
                     <ul class="c-content-nav__group-list">
                         {{~#each this.navigationGroup~}}
-                            {{> components/content_nav/content_nav_item  _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
+                            {{> components/content_nav/content_nav_item _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
                         {{~/each~}}
                     </ul>
                 </li>

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

@@ -379,6 +379,40 @@ document.addEventListener('alpine:init', () => {
             }
 
             return false 
+        }, 
+
+        chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow){
+            let classes = []
+            
+            switch (teasersize) {
+                case 100:
+                    classes.push('w-full','md:w-fit')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!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') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 66:
+                    classes.push('w-fit')
+                    isList == true ? classes.push('border','mb-2','mr-2') : isMixed ? classes.push('!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') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    console.log(classes)
+                    break;
+                case 50:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 33:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 25:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+
+            }
+
+            for (let i = 0; i < classes.length; i++) {
+                this.$el.classList.add(classes[i])
+            }
+            
         }
     }))  
 })

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.4",
+    "version": "0.56.5",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -1,13 +1,5 @@
-<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","w-fit","w-full","w-full","w-full"]'}} h-8 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">
+<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
+class="h-8 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" 
@@ -29,3 +21,5 @@ class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-
 
     {{/components/base/link.hbs}} 
 </li>
+
+

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

@@ -11,7 +11,7 @@
                     <div class="p-2 c-content-nav__group-title">{{this.title}}</div>
                     <ul class="c-content-nav__group-list">
                         {{~#each this.navigationGroup~}}
-                            {{> components/content_nav/content_nav_item  _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
+                            {{> components/content_nav/content_nav_item _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
                         {{~/each~}}
                     </ul>
                 </li>

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

@@ -379,6 +379,40 @@ document.addEventListener('alpine:init', () => {
             }
 
             return false 
+        }, 
+
+        chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow){
+            let classes = []
+            
+            switch (teasersize) {
+                case 100:
+                    classes.push('w-full','md:w-fit')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!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') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 66:
+                    classes.push('w-fit')
+                    isList == true ? classes.push('border','mb-2','mr-2') : isMixed ? classes.push('!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') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    console.log(classes)
+                    break;
+                case 50:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 33:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+                case 25:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2', 'md:!mr-2') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0') : isDropdown ? classes.push('!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') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2') : ''
+                    break;
+
+            }
+
+            for (let i = 0; i < classes.length; i++) {
+                this.$el.classList.add(classes[i])
+            }
+            
         }
     }))  
 })

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

@@ -90,12 +90,12 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="Dropdown" args={contentNavDropdown}>
         {Template.bind({})}
     </Story>
-    <b>Dropdown mit Subgruppen</b>
-    <Story name="Dropdown mit Subgruppen" args={contentNavDropdown_subgroups}>
-        {Template.bind({})}
-    </Story>
     <b>Dropdown Autosuggest</b>
     <Story name="Dropdown Autosuggest" args={contentNavDropdown_autosuggest}>
         {Template.bind({})}
     </Story>
+    <b>Dropdown mit Subgruppen</b>
+    <Story name="Dropdown mit Subgruppen" args={contentNavDropdown_subgroups}>
+        {Template.bind({})}
+    </Story>
 </Preview>

package/tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
     experimental: {
         optimizeUniversalDefaults: true,
     },
-    content: ['./src/stories/*.mdx', './src/stories/views/**/*.{mdx,hbs}'],
+    content: ['./src/stories/*.mdx', './src/stories/views/**/*.{mdx,hbs,js}'],
     theme: {
         
         fill: {