hr-design-system-handlebars 1.51.13 → 1.51.15

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.51.15 (Wed Jan 10 2024)
+
+#### 🐛 Bug Fix
+
+- Adding short doc for Quicksearch [#800](https://github.com/mumprod/hr-design-system-handlebars/pull/800) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 2
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.51.14 (Wed Jan 10 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe-2706 Lupe in Suchfeld hat falsche Farbe [#798](https://github.com/mumprod/hr-design-system-handlebars/pull/798) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
 # v1.51.13 (Wed Jan 10 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2449,6 +2449,10 @@ article.indexText ul {
   fill: #006eb7;
   fill: var(--color-link);
 }
+.fill-search {
+  fill: #000000;
+  fill: var(--search-icon-color);
+}
 .fill-structure-nav-text {
   fill: #ffffff;
   fill: var(--structure-nav-text);
@@ -3218,7 +3222,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1704890437363;
+  counter-reset: cnt1704901654668;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3520,7 +3524,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1704890437363 1;
+  counter-increment: cnt1704901654668 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3536,7 +3540,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1704890437363);
+  content: counter(cnt1704901654668);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -3671,6 +3675,7 @@ article.indexText ul {
     --search-border-color-desktop:  #000000;
     --search-border-color-mobile:  #000000;
     --color-search-footer-text:  #000000;
+    --search-icon-color: #000000;
 
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
@@ -3807,6 +3812,7 @@ article.indexText ul {
     --search-border-color-desktop: transparent;
     --search-border-color-mobile: var(--color-primary-ds);
     --color-search-footer-text: #000;
+    --search-icon-color: #005293;
 
     /* Logo-Container Padding */
     --logo-padding-top: 6px;

package/dist/views/components/site_header/header.hbs

@@ -35,11 +35,7 @@
                         class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
                         {{> components/site_header/service_navigation/service_list }}
 
-                        {{> components/site_header/navigation_search/quick_search_button }}
-
-                        <div class="hidden lg:flex">
-                            {{> components/site_header/navigation_search/quick_search_form }}
-                        </div>
+                        {{> components/site_header/navigation_search/navigation_search }}
                     
                         <div id="burgerWrapper" 
                             class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 

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

@@ -0,0 +1,4 @@
+{{> components/site_header/navigation_search/quick_search_button }}
+<div class="hidden lg:flex">
+    {{> components/site_header/navigation_search/quick_search_form }}
+</div>

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

@@ -62,13 +62,23 @@
             </ul>
         </div>  
     </div>
-    <button 
+    
+    {{#if _footer}}
+        <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary "
-    >
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
         {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
-    </button>
+        </button>
+            {{else}}
+        <button 
+        aria-label='{{loca "search_input_aria_submit" }}' 
+        type="submit" 
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
+        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}} 
+        </button>  
+     {{/if}}
+    
 </form>
 
 <script type="text/javascript">

package/dist/views_static/components/site_header/header.hbs

@@ -35,11 +35,7 @@
                         class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
                         {{> components/site_header/service_navigation/service_list }}
 
-                        {{> components/site_header/navigation_search/quick_search_button }}
-
-                        <div class="hidden lg:flex">
-                            {{> components/site_header/navigation_search/quick_search_form }}
-                        </div>
+                        {{> components/site_header/navigation_search/navigation_search }}
                     
                         <div id="burgerWrapper" 
                             class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 

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

@@ -0,0 +1,4 @@
+{{> components/site_header/navigation_search/quick_search_button }}
+<div class="hidden lg:flex">
+    {{> components/site_header/navigation_search/quick_search_form }}
+</div>

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

@@ -62,13 +62,23 @@
             </ul>
         </div>  
     </div>
-    <button 
+    
+    {{#if _footer}}
+        <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary "
-    >
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
         {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
-    </button>
+        </button>
+            {{else}}
+        <button 
+        aria-label='{{loca "search_input_aria_submit" }}' 
+        type="submit" 
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
+        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}} 
+        </button>  
+     {{/if}}
+    
 </form>
 
 <script type="text/javascript">

package/package.json

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

package/src/assets/tailwind.css

@@ -37,6 +37,7 @@
     --search-border-color-desktop:  theme('colors.black.DEFAULT');
     --search-border-color-mobile:  theme('colors.black.DEFAULT');
     --color-search-footer-text:  theme('colors.black.DEFAULT');
+    --search-icon-color: theme('colors.black.DEFAULT');
 
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
@@ -174,6 +175,7 @@
     --search-border-color-desktop: theme('colors.transparent');
     --search-border-color-mobile: var(--color-primary-ds);
     --color-search-footer-text: #000;
+    --search-icon-color: theme('colors.blue.congress');
 
     /* Logo-Container Padding */
     --logo-padding-top: 6px;

package/src/stories/views/components/site_header/header.hbs

@@ -35,11 +35,7 @@
                         class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
                         {{> components/site_header/service_navigation/service_list }}
 
-                        {{> components/site_header/navigation_search/quick_search_button }}
-
-                        <div class="hidden lg:flex">
-                            {{> components/site_header/navigation_search/quick_search_form }}
-                        </div>
+                        {{> components/site_header/navigation_search/navigation_search }}
                     
                         <div id="burgerWrapper" 
                             class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> 

package/src/stories/views/components/site_header/header.mdx

@@ -361,6 +361,40 @@ Innerhalb der Service-List können mittels der Funktion **"shouldServiceIconsBeH
 
 <br />
 
+<b>Quicksearch</b>
+
+Der sog. Suchschlitz ermöglicht die Eingabe von Suchbegriffen, um gezielt Inhalte auf der Hessenschau-Seite (und auch bei den Seiten der Programmbegleitung) zu finden. 
+Nach der Eingabe eines Suchbegriffs erscheint (s. Abb.) eine Liste unterhalb mit Vorschlägen zum Suchbegriff.
+
+<br />
+
+<img src="/images/quicksearch.png" />
+
+<br />
+
+Nach der Bestätigung der Eingabe über Klick auf das Lupen-Icon erscheint die Suchseite. Sie enthält folgenden Angaben:
+
+<ul>
+<li>Anzahl aller gefundenen Einträge zum gewählten Suchbegriff (und die jeweilige Webseite)</li>
+<li>Erweitertes Suchformular, mit eingrenzender Filterung nach Webseite</li>
+<li>Darstellung der Inhalte als Liste, wobei Einzelinhalte als Alternativ-Teaser dargestellt werden. Die Liste ist nach Datum und Relevanz sortierbar</li>
+<li>Paginierung am Ende der Seite, bei einer hohen Anzahl von Suchergebnissen</li>
+</ul>
+
+<img src="/images/quicksearch_results.png" />
+
+<br />
+<br />
+
+Die Quicksearch besteht aus Suchschlitz - einem Eingabefeld - und einem Button mit Lupen-Icon - ein Absenden-Button - und ist damit ein minimales Suchformular. Die beiden Bestandteile sind wiederverwendbar und werden über
+```html
+{{> components/site_header/navigation_search/quick_search_button }}
+{{> components/site_header/navigation_search/quick_search_form }}
+```
+in das Markup eingebunden. Beide gemeinsam bilden die Komponente **(navigation_search.hbs)**
+
+<br />
+
 Service-Navigation Flyout Desktop:
 
 <br />

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

@@ -0,0 +1,4 @@
+{{> components/site_header/navigation_search/quick_search_button }}
+<div class="hidden lg:flex">
+    {{> components/site_header/navigation_search/quick_search_form }}
+</div>

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

@@ -62,13 +62,23 @@
             </ul>
         </div>  
     </div>
-    <button 
+    
+    {{#if _footer}}
+        <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary "
-    >
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
         {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
-    </button>
+        </button>
+            {{else}}
+        <button 
+        aria-label='{{loca "search_input_aria_submit" }}' 
+        type="submit" 
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
+        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}} 
+        </button>  
+     {{/if}}
+    
 </form>
 
 <script type="text/javascript">

package/tailwind.config.js

@@ -79,6 +79,7 @@ module.exports = {
             },
             fill: {
                 current: 'currentColor',
+                search: 'var(--search-icon-color)',
                 black: '#000000',
             },
             borderWidth: {