hr-design-system-handlebars 0.109.0 → 0.110.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.110.0 (Wed Dec 14 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1715 akzentuiergruppe 3 [#440](https://github.com/mumprod/hr-design-system-handlebars/pull/440) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.109.0 (Wed Dec 14 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -673,9 +673,6 @@ video {
 .relative {
   position: relative;
 }
-.\!relative {
-  position: relative !important;
-}
 .sticky {
   position: -webkit-sticky;
   position: sticky;
@@ -805,10 +802,6 @@ video {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1790,6 +1783,9 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pt-0 {
+  padding-top: 0px;
+}
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -2212,7 +2208,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1671025495910;
+  counter-reset: cnt1671028606125;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2444,7 +2440,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1671025495910 1;
+  counter-increment: cnt1671028606125 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2460,7 +2456,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1671025495910);
+  content: counter(cnt1671028606125);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3874,10 +3870,6 @@ video {
     padding: 2.5rem;
   }
 
-  .md\:p-4 {
-    padding: 1rem;
-  }
-
   .md\:\!px-0 {
     padding-left: 0px !important;
     padding-right: 0px !important;

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

@@ -15,17 +15,12 @@
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
                      _hiddenNavigationLabel="Unternavigation"
         }}
-            {{#if (isStorybook)}}
-                {{> components/content_nav/content_nav_container
-                        _teasersize=_teasersize
-                        _maindivclass="flex flex-col w-full mt-0"
-                }}
-            {{else}}
-                {{> components/content_nav/content_nav_container
-                        _teasersize=_teasersize
-                        _maindivclass="relative flex flex-col w-full mt-0"
-                }}
-            {{/if}}
+            
+        {{> components/content_nav/content_nav_container
+                _teasersize=_teasersize
+                _maindivclass="flex flex-col w-full mt-0"
+        }}
+            
         {{/decorator}}
     {{/if}}
 {{/with}} 

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

@@ -1,5 +1,6 @@
-<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}} relative {{else}} absolute {{/if}} {{#if isStorybook}} !relative {{else}} absolute {{/if}} "
+<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
      @click.outside ="contentNavDropdownIsOpen = false; console.log('clicked outside')"
+
     {{#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"}'
     {{/if}}

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

@@ -29,8 +29,8 @@
     </div>
     <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
          aria-haspopup="true"
-         :class="contentNavDropdownIsOpen ? 'z-9999 w-auto relative' : ' z-1003'"
-         class="{{#if this.isDropdown}} mx-2 md:mx-0 {{else}}{{#if this.isMixed}} mx-2 {{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
+         :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"
+         class="{{#if this.isDropdown}} mx-2 md:mx-0 bla {{else}}{{#if this.isMixed}} mx-2 {{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
         {{~decorator_body~}}
     </div>
 

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

@@ -1,4 +1,4 @@
-<ul class=" flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
+<ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
     :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
     > 
     

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

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

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

@@ -1,20 +1,15 @@
-{{#>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-highlight-1 rounded-3xl">
+{{#>components/grid/grid_group size=this.teasersize _backgroundColor=this.backgroundColor }}
 
+    <div class="h-auto p-8 mx-4 rounded-tr-none rounded-bl-none bg-highlight-1 rounded-3xl col-span-full {{inline-switch size '["100","50"]' '["","md:col-span-6"]'}}">
         {{~#if this.hasGroupTitle}}
-            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+            <h2 class="text-2xl md:text-4xl col-span-full pt-0 pb-4 font-title {{#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}}
+                {{this.groupTitle}}
                 {{~#if this.hasLink}}</a>{{/if~}}
             </h2>
         {{/if}}
-
-        </div>
-        <div class="h-auto col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-highlight-1 rounded-3xl">
-    
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
-    
-        </div>
-    
+    </div>
+
+
 {{/components/grid/grid_group}}

package/package.json

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

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

@@ -15,17 +15,12 @@
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
                      _hiddenNavigationLabel="Unternavigation"
         }}
-            {{#if (isStorybook)}}
-                {{> components/content_nav/content_nav_container
-                        _teasersize=_teasersize
-                        _maindivclass="flex flex-col w-full mt-0"
-                }}
-            {{else}}
-                {{> components/content_nav/content_nav_container
-                        _teasersize=_teasersize
-                        _maindivclass="relative flex flex-col w-full mt-0"
-                }}
-            {{/if}}
+            
+        {{> components/content_nav/content_nav_container
+                _teasersize=_teasersize
+                _maindivclass="flex flex-col w-full mt-0"
+        }}
+            
         {{/decorator}}
     {{/if}}
 {{/with}} 

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

@@ -1,5 +1,6 @@
-<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}} relative {{else}} absolute {{/if}} {{#if isStorybook}} !relative {{else}} absolute {{/if}} "
+<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
      @click.outside ="contentNavDropdownIsOpen = false; console.log('clicked outside')"
+
     {{#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"}'
     {{/if}}

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

@@ -29,8 +29,8 @@
     </div>
     <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
          aria-haspopup="true"
-         :class="contentNavDropdownIsOpen ? 'z-9999 w-auto relative' : ' z-1003'"
-         class="{{#if this.isDropdown}} mx-2 md:mx-0 {{else}}{{#if this.isMixed}} mx-2 {{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
+         :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"
+         class="{{#if this.isDropdown}} mx-2 md:mx-0 bla {{else}}{{#if this.isMixed}} mx-2 {{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
         {{~decorator_body~}}
     </div>
 

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

@@ -1,4 +1,4 @@
-<ul class=" flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
+<ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
     :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
     > 
     

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

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

package/src/stories/views/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -1,20 +1,15 @@
-{{#>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-highlight-1 rounded-3xl">
+{{#>components/grid/grid_group size=this.teasersize _backgroundColor=this.backgroundColor }}
 
+    <div class="h-auto p-8 mx-4 rounded-tr-none rounded-bl-none bg-highlight-1 rounded-3xl col-span-full {{inline-switch size '["100","50"]' '["","md:col-span-6"]'}}">
         {{~#if this.hasGroupTitle}}
-            <h2 class="text-2xl md:text-4xl col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+            <h2 class="text-2xl md:text-4xl col-span-full pt-0 pb-4 font-title {{#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}}
+                {{this.groupTitle}}
                 {{~#if this.hasLink}}</a>{{/if~}}
             </h2>
         {{/if}}
-
-        </div>
-        <div class="h-auto col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-highlight-1 rounded-3xl">
-    
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
-    
-        </div>
-    
+    </div>
+
+
 {{/components/grid/grid_group}}