hr-design-system-handlebars 1.33.3 → 1.34.1

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

@@ -0,0 +1,87 @@
+<div class="flex flex-col self-center text-sm md:self-end w-fit md:flex-row">
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_hrDeLink _css="flex whitespace-nowrap hover:underline"}}
+            &copy; {{{_hrDeLink-adjust_context.text}}} {{{_hrDeLink-adjust_context.currentTime.year}}}
+                {{~#if _hrDeLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_hrDeLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _hrDeLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _hrDeLink-adjust_context.labelText}} aria-label="{{_hrDeLink-adjust_context.labelText}}"{{/if}}
+            {{#if _hrDeLink-adjust_contexttitle}} title="{{_hrDeLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_ardDeLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_ardDeLink-adjust_context.text}}}
+                {{~#if _ardDeLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_ardDeLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _ardDeLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _ardDeLink-adjust_context.labelText}} aria-label="{{_ardDeLink-adjust_context.labelText}}"{{/if}}
+            {{#if _ardDeLink-adjust_context.title}} title="{{_ardDeLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_dataProtectionLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_dataProtectionLink-adjust_context.text}}}
+                {{~#if _dataProtectionLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_dataProtectionLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _dataProtectionLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _dataProtectionLink-adjust_context.labelText}} aria-label="{{_dataProtectionLink-adjust_context.labelText}}"{{/if}}
+            {{#if _dataProtectionLink-adjust_context.title}} title="{{_dataProtectionLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_imprintLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{_imprintLink-adjust_context.text}}}
+                {{~#if _imprintLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~_imprintLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if _imprintLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if _imprintLink-adjust_context.labelText}} aria-label="{{_imprintLink-adjust_context.labelText}}"{{/if}}
+            {{#if _imprintLink-adjust_context.title}} title="{{_imprintLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+</div>

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

@@ -0,0 +1,18 @@
+{{#> components/base/link _link=_link _css=_css}}
+    {{ _link-adjust_context.text}}
+    {{~#if  _link-adjust_context.hiddenText~}}
+        <span class="sr-only">
+            {{~ _link-adjust_context.hiddenText~}}
+        </span>
+    {{~/if~}}
+    {{~#if  _link-adjust_context.isTargetBlank}}
+        <span class="inline-flex md:mt-0.5 md:ml-1">
+            {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
+        </span>
+    {{/if~}}
+{{/components/base/link}}
+{{#*inline "htmlProperties"}}
+    {{#with _link-adjust_context}}
+        {{#if _link.labelText}} aria-label="{{_link.labelText}}"{{/if}}
+    {{/with}}
+{{/inline}}

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

@@ -0,0 +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 }}
+    </div>
+    
+</div>

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

@@ -0,0 +1,29 @@
+<nav class="block pb-0 mx-auto md:mx-0" aria-labelledby="c-footer_social_media_title" >
+    <span id="c-footer_social_media_title" class="hidden">{{_title}}</span>
+    {{#each _columns}}
+        <ul class="flex flex-row justify-end pb-2 pr-2 md:pr-0 md:last:pb-4">
+            {{#each this.links}}
+                {{#if this.extern}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+            
+                    </li>
+                {{else}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+                    </li>
+                {{/if}}
+            {{/each}}
+        </ul>
+    {{/each}}
+</nav>

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

@@ -65,7 +65,7 @@
                     </div>
                 </div>
             </main>
-
+        {{!-- {{> components/footer/page_footer }}  --}}
         </div>
     </body>
 </html>

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

@@ -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-primary text-primary focus:outline-none"
+            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"
             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 top-8 lg:top-10" 
+            class="absolute 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"
@@ -52,7 +52,7 @@
                         <a  
                             x-bind:active="false"
                             x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
-                            x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
+                            x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full text-secondary rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
                         >
                             <span x-text="suggestion"></span>
                         </a>

package/tailwind.config.js

@@ -38,9 +38,15 @@ module.exports = {
         },
 
         extend: {
-            backgroundImage: {},
+            backgroundImage: {
+                'logo-footer' : 'var(--bg-logo-footer)'
+            },
+            invert: {
+                'logo-footer' : 'var(--invert-logo-footer)',
+            },
             borderRadius: {
                 hr: 'var(--border-radius-hr)',
+                'logo-footer' : 'var(--rounded-logo-footer)',
             },
             fontSize: {
                 'xs': ['0.75rem', '1.063rem'],
@@ -132,6 +138,9 @@ module.exports = {
                 '92': '23rem',
                 'half-screen': '50vw',
                 '15/12': '120%',
+                'footer-logo': 'var(--width-footer-logo)',
+                'footer-logo-md': 'var(--width-footer-logo-md)',
+                'footer-logo-lg': 'var(--width-footer-logo-lg)',
             },
             height: {
                 '22': '5.5rem',
@@ -143,6 +152,9 @@ module.exports = {
                 'header-lg-big': '11.0625rem',
                 'header-md': '5.5625rem',
                 'header-sm': '7.5625rem',
+                'footer-logo':'var(--height-footer-logo)',
+                'footer-logo-md': 'var(--height-footer-logo-md)',
+                'footer-logo-lg': 'var(--height-footer-logo-lg)',
             },
             maxHeight: {
                 stage: '34.3125rem',
@@ -338,6 +350,11 @@ module.exports = {
                 'brandnavigation-bg': 'var(--color-brandnavigation-bg)',
                 'navigation-border-color': 'var(--color-navigation-border-color)',
 
+                'footer-bg': 'var(--color-footer-bg)',
+                'footer-text': 'var(--color-footer-text)',
+                'footer-heading': 'var(--color-footer-heading)',
+                'footer-border': 'var(--color-footer-border)',
+
                 'labelMedia': 'var(--color-label-media)',
                 'labelEvent': 'var(--color-label-event)',
                 'labelBreakingnews': 'var(--color-label-breakingnews)',