hr-design-system-handlebars 0.56.15 → 0.58.0

package/.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/async-alpine@0.4.x/dist/async-alpine.script.js"></script>
 <script defer src="https://unpkg.com/@alpinejs/collapse@3.8.1/dist/cdn.min.js"></script>
-<script src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js" defer></script>
+<script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v0.58.0 (Fri Sep 30 2022)
+
+#### 🚀 Enhancement
+
+- Adds async alpine.script.js to dynamically load alpine components [#327](https://github.com/mumprod/hr-design-system-handlebars/pull/327) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.57.0 (Tue Sep 27 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1766 [#329](https://github.com/mumprod/hr-design-system-handlebars/pull/329) ([@vascoeduardo](https://github.com/vascoeduardo) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.56.15 (Fri Sep 16 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -441,7 +441,7 @@ video {
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
 }
 
-.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
+.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white, .focus\:ring {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -801,6 +801,9 @@ video {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .mb-7 {
   margin-bottom: 1.75rem;
 }
@@ -886,6 +889,9 @@ video {
 .h-24 {
   height: 6rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .max-h-0 {
   max-height: 0px;
 }
@@ -1193,6 +1199,12 @@ video {
 .rounded-3xl {
   border-radius: 1.5rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1401,6 +1413,13 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
 .bg-gradient-to-r {
   background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1457,6 +1476,9 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1603,15 +1625,15 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .pb-10 {
   padding-bottom: 2.5rem;
 }
 .pt-8 {
   padding-top: 2rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-left {
   text-align: left;
 }
@@ -1941,7 +1963,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1663336382306;
+  counter-reset: cnt1664530151236;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2324,7 +2346,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1663336382306 1;
+  counter-increment: cnt1664530151236 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2341,7 +2363,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1663336382306);
+  content: counter(cnt1664530151236);
 }
 /*! purgecss start ignore */
 :root,
@@ -2823,6 +2845,19 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+}
+.focus\:ring-\[\#1F89AE\]:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(31, 137, 174, var(--tw-ring-opacity));
+}
 .active\:font-bold:active {
   font-weight: 700;
 }
@@ -2837,6 +2872,41 @@ video {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (prefers-color-scheme: dark) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
 @media print {
 
   .print\:flex {

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

@@ -1,5 +1,9 @@
-<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 "]'}}"
+<div id="contentNavWrapper"
+    x-ignore
+    ax-load
+    ax-load-src="/js/content_nav_alpine.js"
+    x-data="contentNavigationHandler()"
+    class="col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
     {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
 </div>

package/dist/views/components/teaser/group_teaser/group_teaser.hbs

@@ -1,20 +1,10 @@
-{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
-    {{#if this.accentedGroup}}
-        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
-    {{/if}}  
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} 
         {{~#if this.hasGroupTitle}}
             <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                 {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
                     {{this.groupTitle}}
                 {{~#if this.hasLink}}</a>{{/if~}}
             </h2>
-        {{/if}}
-    {{#if this.accentedGroup}}
-        </div>
-        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
-    {{/if}}  
+        {{/if}}  
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
-    {{#if this.accentedGroup}}
-        </div>
-    {{/if}}
 {{/components/grid/grid_group}}

package/dist/views/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -0,0 +1,20 @@
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
+    
+        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
+
+        {{~#if this.hasGroupTitle}}
+            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
+                    {{this.groupTitle}}
+                {{~#if this.hasLink}}</a>{{/if~}}
+            </h2>
+        {{/if}}
+
+        </div>
+        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
+    
+        {{~> components/teaser/teaser_logic/teaser_logic ~}}
+    
+        </div>
+    
+{{/components/grid/grid_group}}

package/dist/views/components/teaser/podcast/podcast.hbs

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6" > 
+    {{> components/teaser/podcast/podcast_player }}
+ </div>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -0,0 +1,39 @@
+<div class="w-full col-span-12 js-load" 
+    x-data="playaudio()"
+    ax-load
+    x-ignore
+    ax-load-src="/js/podcastPlayer.alpine.js">
+    <button x-on:keydown.tab="playAndStop" x-on:click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">       
+        <div class="">
+            <div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5 text-white">
+                start
+            </div>
+            <div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5  text-white">
+                stop
+            </div>
+        </div>
+    </button>
+
+    <input x-ref="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="w-full h-1 mb-6 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" >
+    
+    <div class="c-audioPlayer__metaText text__byline">
+      <span x-text="currentTime">00:00</span>
+      <span class="">/</span>
+      <span x-text="audioDuration">06:21 Min</span>
+    </div>
+
+    <audio x-ref="audio" >
+        <source src="https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3" type="audio/mp3" />
+    </audio>
+
+  <div class="">
+    currentTime: <span x-text="currentTime"></span><br>
+    currentTimePercentage:  <span x-text="currentTimePercentage"></span><br>
+    currentTimeMs: <span x-text="currentTimeMs"></span><br>
+    currentTimeS: <span x-text="currentTimeS"></span><br>
+    currentTimeM: <span x-text="currentTimeM"></span><br>
+    currentTimeH: <span x-text="currentTimeH"></span><br>
+    audioDuration: <span x-text="audioDuration"></span><br>
+  </div>
+</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.15",
+    "version": "0.58.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -0,0 +1,189 @@
+{ 
+    "realTeasersize" : "50",
+    "teasersize" : "50",
+
+    "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": false,
+                    "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_groups.inc.json

@@ -15,23 +15,22 @@
         }
     },
     "teaser_contentnav": {
-        "includePath": "components/teaser/group_teaser/group_teaser",
+        "includePath": "components/teaser/group_teaser/group_teaser_accented",
         "includeModel": {
             "hasLink": false,
             "link": "#gruppe1",
             "hasGroupTitle": true,
             "groupTitle": "Akzentuier-Gruppe 100%, 1 x 100% ContentNav Aufklapp ",
             "teaserSize": "100",
-            "isHighlightGroup": true,
-            "accentedGroup" : true,
-            "backgroundColor": "1",
+            "isHighlightGroup": false,
+            "backgroundColor": "",
             "logicItems": [
                 {
                     "isSsi": true,
                     "logicItem": {
                         "includePath": "components/teaser/content_nav/teaser_content_nav",
                         "includeModel": {
-                            "@->jsoninclude": "teaser/teaser_content_nav_dropdown_100.json"
+                            "@->jsoninclude": "teaser/teaser_content_nav_dropdown_50.json"
                         }
 
                     }

package/src/assets/js/content_nav_alpine.js

@@ -0,0 +1,88 @@
+export default function contentNavigationHandler(){ 
+    return{   
+        open: false,
+
+        shouldDropdownBeShown(teasersize,isDropdown,isMixed){  
+            if (isDropdown){
+                return true
+            } 
+
+            if (isMixed) {
+                if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
+                    if (this.$screen('lg')) return false
+                    if (this.$screen('md')) return false
+                    if (this.$screen('xs')) return true
+                } else if (teasersize === 33 || teasersize === 25 ) { 
+                    return true 
+                }
+            }
+        },
+
+        shouldContentBeShown(teasersize,isDropdown,isMixed){
+            if (isDropdown){                   
+                return this.$store.contentNavDropdownIsOpen               
+            }  
+            if (isMixed) {
+                if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
+                    if (this.$screen('lg')) return true
+                    if (this.$screen('md')) return true
+                    if (this.$screen('xs')) return this.$store.contentNavDropdownIsOpen
+                } else if (teasersize === 33 || teasersize === 25 ) { 
+                    return this.$store.contentNavDropdownIsOpen
+                }
+            }
+
+            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','hover:no-underline') 
+                    : 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','md:border-blue-congress','border-gray-400','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress','md:hover:no-underline','md:hover:text-white','md:hover:!bg-blue-congress','md:hover:!fill-white') 
+                    : isDropdown ? classes.push('!w-full','ml-0','md:!w-full','md:mb-0','md:!mr-0','border-gray-400','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
+                    break;
+                case 66:
+                    classes.push('w-fit')
+                    isList == true ? classes.push('border','mb-2','mr-2','md:!mr-2','hover:no-underline') 
+                    : 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','hover:text-blue-congress','hover:!fill-congress','hover:!bg-white','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:no-underline','md:hover:!fill-white') 
+                    : 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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
+                    break;
+                case 50:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','border','md:mb-2','last:mb-0','border-gray-400','border-l-0','border-r-0','border-t-0','md:border','md:border-blue-congress','hover:underline','hover:!bg-white','hover:text-blue-congress','hover:fill-congress','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:fill-white','md:hover:no-underline') 
+                    : 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','border-gray-400','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
+                    break;
+                case 33:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:text-blue-congress','hover:!fill-congress') 
+                    : 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','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
+                    break;
+                case 25:
+                    classes.push('w-full')
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:!text-blue-congress','hover:!fill-congress') 
+                    : 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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
+                    break;
+            }
+            for (let i = 0; i < classes.length; i++) {
+                this.$el.classList.add(classes[i])
+            }
+            
+        }
+    }
+}