hr-design-system-handlebars 1.35.13 → 1.35.15

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.35.15 (Thu Aug 17 2023)
+
+#### 🐛 Bug Fix
+
+- Dark mode styling for accordion in webview [#711](https://github.com/mumprod/hr-design-system-handlebars/pull/711) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.35.14 (Fri Aug 11 2023)
+
+#### 🐛 Bug Fix
+
+- Footer Search: Suggestions open upward [#710](https://github.com/mumprod/hr-design-system-handlebars/pull/710) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.35.13 (Fri Aug 11 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1745,6 +1745,9 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1802,6 +1805,9 @@ video {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
 }
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
 .gap-y-10 {
   row-gap: 2.5rem;
 }
@@ -3025,7 +3031,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1691753693775;
+  counter-reset: cnt1692280696557;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3260,7 +3266,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1691753693775 1;
+  counter-increment: cnt1692280696557 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3276,7 +3282,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1691753693775);
+  content: counter(cnt1692280696557);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4918,6 +4924,11 @@ video {
     }
 @media (color-index: 48) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4930,6 +4941,11 @@ video {
 }
 @media (color: 48842621) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4942,6 +4958,11 @@ video {
 }
 @media (color-index: 48) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4954,6 +4975,11 @@ video {
 }
 @media (color: 48842621) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4966,6 +4992,11 @@ video {
 }
 @media (prefers-color-scheme: dark) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);

package/dist/views/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>

package/dist/views/components/footer/page_footer_search.hbs

@@ -1,6 +1,6 @@
 <div class="relative mx-auto ">
     <div class="flex px-8 pt-4 md:pt-0 md:px-0">
-        {{> components/site_header/navigation_search/quick_search_form }}
+        {{> components/site_header/navigation_search/quick_search_form _footer=true }}
     </div>
     
 </div>

package/dist/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -6,7 +6,7 @@
     class="relative flex w-full border rounded lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
 >
     <div 
-        class="flex w-full lg:h-10" 
+        class="flex {{~#if _footer}} flex-col-reverse h-10 gap-y-1 {{else}} lg:h-10 {{/if}} w-full" 
         id="search-content"
         @click.away="active=false; cursorIndex=-1"
         @keydown.arrow-down="moveDownList()"
@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
+            class="w-full px-2 {{~#if _footer}} py-3 {{else}} py-2 {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"
@@ -31,7 +31,7 @@
             aria-controls="suggestionlist--{{getRandom}}"
         > 
         <div 
-            class="absolute left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
+            class="{{~#unless _footer}} absolute {{/unless}}left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
             x-show="query.length > 1 && active && suggestions.length"
             x-cloak
             x-transition:leave="transition ease-in duration-100"

package/dist/views_static/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>

package/dist/views_static/components/footer/page_footer_search.hbs

@@ -1,6 +1,6 @@
 <div class="relative mx-auto ">
     <div class="flex px-8 pt-4 md:pt-0 md:px-0">
-        {{> components/site_header/navigation_search/quick_search_form }}
+        {{> components/site_header/navigation_search/quick_search_form _footer=true }}
     </div>
     
 </div>

package/dist/views_static/components/site_header/navigation_search/quick_search_form.hbs

@@ -6,7 +6,7 @@
     class="relative flex w-full border rounded lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
 >
     <div 
-        class="flex w-full lg:h-10" 
+        class="flex {{~#if _footer}} flex-col-reverse h-10 gap-y-1 {{else}} lg:h-10 {{/if}} w-full" 
         id="search-content"
         @click.away="active=false; cursorIndex=-1"
         @keydown.arrow-down="moveDownList()"
@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
+            class="w-full px-2 {{~#if _footer}} py-3 {{else}} py-2 {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"
@@ -31,7 +31,7 @@
             aria-controls="suggestionlist--{{getRandom}}"
         > 
         <div 
-            class="absolute left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
+            class="{{~#unless _footer}} absolute {{/unless}}left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
             x-show="query.length > 1 && active && suggestions.length"
             x-cloak
             x-transition:leave="transition ease-in duration-100"

package/package.json

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

package/src/stories/views/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>

package/src/stories/views/components/footer/page_footer_search.hbs

@@ -1,6 +1,6 @@
 <div class="relative mx-auto ">
     <div class="flex px-8 pt-4 md:pt-0 md:px-0">
-        {{> components/site_header/navigation_search/quick_search_form }}
+        {{> components/site_header/navigation_search/quick_search_form _footer=true }}
     </div>
     
 </div>

package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -6,7 +6,7 @@
     class="relative flex w-full border rounded lg:search-border-desktop search-border-mobile sb-quick-search-form md:justify-end"
 >
     <div 
-        class="flex w-full lg:h-10" 
+        class="flex {{~#if _footer}} flex-col-reverse h-10 gap-y-1 {{else}} lg:h-10 {{/if}} w-full" 
         id="search-content"
         @click.away="active=false; cursorIndex=-1"
         @keydown.arrow-down="moveDownList()"
@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
+            class="w-full px-2 {{~#if _footer}} py-3 {{else}} py-2 {{/if}} text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"
@@ -31,7 +31,7 @@
             aria-controls="suggestionlist--{{getRandom}}"
         > 
         <div 
-            class="absolute left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
+            class="{{~#unless _footer}} absolute {{/unless}}left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
             x-show="query.length > 1 && active && suggestions.length"
             x-cloak
             x-transition:leave="transition ease-in duration-100"