hr-design-system-handlebars 1.17.0 → 1.17.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.17.2 (Thu May 04 2023)
+
+#### 🐛 Bug Fix
+
+- 1913 - Top Topics für Desktop einbauen [#615](https://github.com/mumprod/hr-design-system-handlebars/pull/615) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.17.1 (Wed May 03 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2079 Pagination Refactoring [#618](https://github.com/mumprod/hr-design-system-handlebars/pull/618) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.17.0 (Wed May 03 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1129,6 +1129,10 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1803,6 +1807,9 @@ video {
 .border-button {
   border-color: var(--color-button);
 }
+.border-button-disabled {
+  border-color: var(--color-button-disabled);
+}
 .border-button-inverted {
   border-color: #ffffff;
   border-color: var(--color-button-inverted);
@@ -1858,12 +1865,19 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
+.bg-blue-linkWater {
+  --tw-bg-opacity: 1;
+  background-color: rgba(211, 226, 244, var(--tw-bg-opacity));
+}
 .bg-button {
   background-color: var(--color-button);
 }
 .bg-button--dark {
   background-color: var(--color-button--dark);
 }
+.bg-button-disabled {
+  background-color: var(--color-button-disabled);
+}
 .bg-button-inverted {
   background-color: #ffffff;
   background-color: var(--color-button-inverted);
@@ -2085,10 +2099,6 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-20 {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2217,9 +2227,6 @@ video {
 .pl-4 {
   padding-left: 1rem;
 }
-.pl-5 {
-  padding-left: 1.25rem;
-}
 .pl-8 {
   padding-left: 2rem;
 }
@@ -2244,6 +2251,9 @@ video {
 .pt-0 {
   padding-top: 0px;
 }
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -2426,10 +2436,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(29, 78, 216, var(--tw-text-opacity));
 }
-.text-blue-astronautBlue {
-  --tw-text-opacity: 1;
-  color: rgba(0, 55, 93, var(--tw-text-opacity));
-}
 .text-blue-congress {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -2441,6 +2447,9 @@ video {
 .text-button {
   color: var(--color-button);
 }
+.text-button-disabled--dark {
+  color: var(--color-button-disabled--dark);
+}
 .text-button-inverted {
   color: #ffffff;
   color: var(--color-button-inverted);
@@ -2677,7 +2686,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1683117136588;
+  counter-reset: cnt1683193563945;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2915,7 +2924,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1683117136588 1;
+  counter-increment: cnt1683193563945 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2931,7 +2940,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1683117136588);
+  content: counter(cnt1683193563945);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3102,6 +3111,8 @@ video {
     --color-button--dark: #005293;
     --color-button-inverted: #ffffff;
     --color-button-inverted--dark: #eaf3fa;
+    --color-button-disabled: #d4d4d4;
+    --color-button-disabled--dark: #797979;
     /* Media-Button */
     --color-media-button: #006dc1;
     /* States */
@@ -3941,10 +3952,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
-.hover\:bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
-}
 .hover\:bg-blue-congress:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
@@ -4873,6 +4880,14 @@ video {
     margin-top: -2rem;
   }
 
+  .lg\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .lg\:mb-2\.5 {
+    margin-bottom: 0.625rem;
+  }
+
   .lg\:ml-0 {
     margin-left: 0px;
   }
@@ -5148,10 +5163,6 @@ video {
     padding-bottom: 0px;
   }
 
-  .lg\:pb-1 {
-    padding-bottom: 0.25rem;
-  }
-
   .lg\:pb-3 {
     padding-bottom: 0.75rem;
   }

package/dist/views/components/button/button.hbs

@@ -1,6 +1,6 @@
 <button
     {{#if _id}} id="{{_id}}"{{/if}} 
-    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
+    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress _disabled=_disabled}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
     {{#if _openModal}} aria-haspopup="true"{{/if}}
     {{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
     type="{{defaultIfEmpty _type "submit"}}"

package/dist/views/components/button/link_button.hbs

@@ -2,5 +2,5 @@
     {{> @partial-block }}
 {{/components/base/link}}
 {{#*inline "css"~}}
-    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=../../_variant _onBackground=../../_onBackground}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
+    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=../../_variant _onBackground=../../_onBackground _disableButtonPress=../../_disableButtonPress _disabled=../../_disabled}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
 {{~/inline}}

package/dist/views/components/button/top_topics_button.hbs

@@ -0,0 +1,5 @@
+{{#> components/base/link _link=this.link _css="inline-flex items-center"}}
+    <span class="rounded-full font-copy my-2 lg:mb-2.5 pt-0.5 px-1.5 leading-5 {{> components/button/utilities/button_variation_classes _variant="primary" _onBackground="true"}}">
+        {{> @partial-block }}
+    </span>
+{{/components/base/link}}

package/dist/views/components/button/utilities/button_variation_classes.hbs

@@ -1,14 +1,22 @@
 {{#if _onBackground~}}
+     {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark  active:bg-button-inverted--dark "]'
+    ~}}
+   {{else if _disabled~}}
+
     {{inline-switch
         _variant
         '["primary","secondary","tertiary"]'
-        '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark  active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark  active:bg-button-inverted--dark "]'
+        '[" border text-button-disabled--dark bg-button-disabled border-button-disabled "," border text-button-disabled--dark border-button-disabled  "," bg-transparent border-transparent text-button-disabled--dark "," border text-button-disabled--dark bg-button-disabled border-button-disabled "]'
     ~}}
+    
 {{else}}
     {{~inline-switch
         _variant
         '["primary","secondary","tertiary"]'
-        '[" border text-button-inverted bg-button border-button hover:bg-button--dark  hover:border-button--dark  active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark   hover:border-button--dark  active:bg-button--dark "]'
+        '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark   hover:border-button--dark  active:bg-button--dark "]'
     ~}}
 {{/if}}
 {{~#unless _disableButtonPress}} active:scale-95{{/unless}}

package/dist/views/components/event/event_ticket_button.hbs

@@ -1,4 +1,4 @@
-<div class="static pl-4 pt-1 pb-3 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
+<div class="static pt-1 pb-3 pl-4 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
     {{#> components/button/button _id=(nextRandom) _size="lg"}}
         {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
         {{>components/button/components/button_label _label="Tickets"}}
@@ -7,7 +7,7 @@
         {{#> components/teaser/components/teaser_headline}}
             {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
         {{/components/teaser/components/teaser_headline}}
-        <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
+        <p class="mt-2 text-base font-copy">{{loca "ticket_modal_text"}}</p>
 
         <div class="flex flex-wrap mt-4">
             {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -16,7 +16,7 @@
             </button>
         </div>
     </template>
-    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
         {{> @partial-block }} 
     </div> 
 </div>

package/dist/views/components/pagination/pagination_button_left.hbs

@@ -1,3 +1,3 @@
-<div class="w-10 py-10"> 
-    <span>{{>components/base/image/icon _icon="arrow-left" _addClass="fill-current pb-0.5 h-8 w-8 ml-2 inline" }}</span> 
-</div>
+{{#> components/button/link_button _size="lg" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="mr-1"}}
+{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
+{{/components/button/link_button}}  

package/dist/views/components/pagination/pagination_button_left_linked.hbs

@@ -1,5 +1,3 @@
-<div class="w-10 py-10">   
-    <a rel="prev" href="{{previousItemUrl}}" class="font-bold sb-link js-load hover:text-toplineColor text-toplineColor font-title" aria-label="Zur vorherigen Seite">   
-        <span>{{>components/base/image/icon _icon="arrow-left" _addClass="fill-current pb-0.5 h-8 w-8 ml-2 inline" }}</span>   
-    </a>   
-</div> 
+{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.previousItemLink  _css="mr-1"}}
+{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
+{{/components/button/link_button}} 

package/dist/views/components/pagination/pagination_button_right.hbs

@@ -1,3 +1,4 @@
-<div class="w-10 py-10">   
-    <span>{{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-8 w-8 ml-2 inline" }}</span>    
-</div>  
+{{#> components/button/link_button _size="lg" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1"}}
+{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+{{/components/button/link_button}}   
+ 

package/dist/views/components/pagination/pagination_button_right_linked.hbs

@@ -1,5 +1,3 @@
-<div class="w-10 py-10"> 
-    <a rel="next" href="{{nextItemUrl}}" class="font-bold sb-link js-load hover:text-toplineColor text-toplineColor font-title" aria-label="Zur nächsten Seite"> 
-        <span>{{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-8 w-8 ml-2 inline" }}</span> 
-    </a> 
-</div> 
+{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
+{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+{{/components/button/link_button}}  

package/dist/views/components/pagination/pagination_current_page_invalid.hbs

@@ -1,17 +1,24 @@
-<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
+<nav class="flex flex-row content-center justify-center py-10" role="navigation" aria-label="Paginierung">
+        <div class="flex h-10"></div>
         {{> components/pagination/pagination_button_left }} 
-        <div class="px-20 py-10">
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>
+            {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+            {{> components/button/components/button_label _label="1"}}
+            {{/components/button/link_button}} 
             {{~#if _moreThanOnePage ~}}
                 {{~#unless _onlyTwoPages ~}}
                     {{~#if _onlyThreePages ~}}
-                        <a href="{{lastButOnePageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>
+                        {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastButOnePageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+                        {{> components/button/components/button_label _label="2"}}
+                        {{/components/button/link_button}}
                     {{else}}
-                        <span class="px-5 py-10 font-title">&hellip;</span>
+                        <span class="pt-1 ml-2 mr-2 font-title">&hellip;</span>
                     {{~/if~}}
                 {{~/unless~}}
-                <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>
+                {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+                {{> components/button/components/button_label _label=_totalPages}}
+                {{/components/button/link_button}}
             {{~/if~}}
-        </div>
+        
        {{> components/pagination/pagination_button_right }} 
+       </div>
 </nav>

package/dist/views/components/pagination/pagination_current_page_valid.hbs

@@ -1,5 +1,5 @@
 {{~#if _moreThanOnePage~}}
-    <nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
+    <nav class="flex flex-row content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{~#if _onlyTwoPages~}}
              {{> components/pagination/pagination_only_two_pages
              _firstPage=_firstPage 

package/dist/views/components/pagination/pagination_more_than_three_pages.hbs

@@ -1,38 +1,54 @@
 {{~#if _firstPage~}}   
-    {{> components/pagination/pagination_button_left }}   
-    <div class="px-20 py-10">   
-        <span class="font-title">1</span>   
-        <span class="px-5 py-10 font-title">&hellip;</span>   
-        <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
-    </div>   
-    {{> components/pagination/pagination_button_right_linked }}   
+    <div class="flex h-10"> 
+        {{> components/pagination/pagination_button_left }}   
+        {{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="1"}}
+        {{/components/button/link_button}}   
+        <span class="pt-1 ml-2 mr-2 font-title">&hellip;</span>  
+        {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label=_totalPages}}
+        {{/components/button/link_button}}
+        {{> components/pagination/pagination_button_right_linked }} 
+    </div>     
 {{else}}   
-    {{~#if _secondPage~}}   
+    {{~#if _secondPage~}}  
+    <div class="flex h-10">  
         {{> components/pagination/pagination_button_left_linked }}    
-        <div class="px-20 py-10">   
-            <a href="{{this.firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="pl-5 font-title">2</span>   
-            <span class="px-5 py-10 font-title">&hellip;</span>   
-            <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
-        </div>   
+        {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="1"}}
+        {{/components/button/link_button}}  
+        {{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="2"}}
+        {{/components/button/link_button}}   
+        <span class="pt-1 ml-2 mr-2 font-title">&hellip;</span>   
+        {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label=_totalPages}}
+        {{/components/button/link_button}}
         {{> components/pagination/pagination_button_right_linked }} 
+    </div>   
     {{else}}
-        {{> components/pagination/pagination_button_left_linked }}   
-        <div class="px-20 py-10">   
-            <a href="{{this.firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="py-10 pl-5 font-title">&hellip;</span>   
-            <span class="px-5 py-10 font-bold font-title">{{_currentPage}}</span>   
+        <div class="flex h-10"> 
+            {{> components/pagination/pagination_button_left_linked }}   
+            {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+            {{> components/button/components/button_label _label="1"}}
+            {{/components/button/link_button}}  
+            <span class="pt-1 ml-2 mr-2 font-title">&hellip;</span>   
+            {{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+            {{> components/button/components/button_label _label=_currentPage}}
+            {{/components/button/link_button}}     
             {{~#if _notLastPage~}}   
                 {{~#if _notLastButOnePage~}}   
-                    <span class="py-10 pr-5 font-title">&hellip;</span>   
+                    <span class="pt-1 ml-2 mr-2 font-title">&hellip;</span>   
                 {{~/if~}}   
-                <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
-            {{~/if~}}   
-        </div>   
+            {{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+            {{> components/button/components/button_label _label=_totalPages}}
+            {{/components/button/link_button}}
+            {{~/if~}}      
             {{~#if _notLastPage~}}   
                 {{> components/pagination/pagination_button_right_linked }}  
             {{else}}   
                 {{> components/pagination/pagination_button_right }}  
-            {{~/if~}}   
+            {{~/if~}} 
+         </div>  
     {{~/if~}}   
 {{~/if~}}  

package/dist/views/components/pagination/pagination_only_three_pages.hbs

@@ -1,27 +1,45 @@
-{{~#if _firstPage~}}   
+{{~#if _firstPage~}} 
+    <div class="flex h-10">     
     {{> components/pagination/pagination_button_left }}  
-    <div class="px-20 py-10">   
-        <span class="py-10 pr-5 font-title">1</span>   
-        <a href="{{nextItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-        <a href="{{lastPageItemUrl}}" class="py-10 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
-    </div>   
-    {{> components/pagination/pagination_button_right_linked }}  
+    {{#> components/button/link_button _size="lg"  _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="1"}}
+    {{/components/button/link_button}}   
+    {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="2"}}
+    {{/components/button/link_button}}
+    {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="3"}}
+    {{/components/button/link_button}}  
+    {{> components/pagination/pagination_button_right_linked }} 
+     </div>  
 {{else}}
-    {{~#if _secondPage~}}   
-        {{> components/pagination/pagination_button_left_linked }}   
-        <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="py-10 pr-5 font-title">2</span>   
-            <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
-        </div>   
-        {{> components/pagination/pagination_button_right_linked }}    
-    {{else}}   
-        {{> components/pagination/pagination_button_left_linked }}   
-            <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <a href="{{lastButOnePageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-            <span class="py-10 pl-5 font-bold font-title">3</span>   
-        </div>   
-        {{> components/pagination/pagination_button_right }}  
+    {{~#if _secondPage~}}
+        <div class="flex h-10"> 
+        {{> components/pagination/pagination_button_left_linked }}    
+        {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="1"}}
+        {{/components/button/link_button}}
+        {{#> components/button/link_button _size="lg"  _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="2"}}
+        {{/components/button/link_button}}    
+        {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="3"}}
+        {{/components/button/link_button}}
+        {{> components/pagination/pagination_button_right_linked }} 
+         </div>      
+    {{else}}  
+        <div class="flex h-10"> 
+        {{> components/pagination/pagination_button_left_linked }}         
+        {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="1"}}
+        {{/components/button/link_button}}
+        {{#> components/button/link_button _size="lg"  _variant="secondary" _link=this.lastButOneItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="2"}}
+        {{/components/button/link_button}}
+        {{#> components/button/link_button _size="lg"  _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+        {{> components/button/components/button_label _label="3"}}
+        {{/components/button/link_button}}        
+        {{> components/pagination/pagination_button_right }}
+        </div> 
     {{~/if~}}     
 {{~/if~}}

package/dist/views/components/pagination/pagination_only_two_pages.hbs

@@ -1,15 +1,23 @@
 {{~#if _firstPage~}}
+    <div class="flex h-10"> 
     {{> components/pagination/pagination_button_left }}
-    <div class="px-20 py-10"> 
-    <span class="py-10 pr-5 font-title">1</span> 
-    <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a> 
-    </div> 
+    {{#> components/button/button _size="lg"  _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="1"}}
+    {{/components/button/button}}   
+    {{#> components/button/button _size="lg"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="2"}}
+    {{/components/button/button}}
     {{> components/pagination/pagination_button_right_linked }}
-{{else}}   
-     {{> components/pagination/pagination_button_left_linked }} 
-    <div class="px-20 py-10">   
-        <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-        <span class="py-10 pl-5 font-title">2</span>   
-    </div>   
-    {{> components/pagination/pagination_button_right }}     
+    </div> 
+{{else}} 
+    <div class="flex h-10">   
+    {{> components/pagination/pagination_button_left_linked }} 
+    {{#> components/button/button _size="lg"  _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="1"}}
+    {{/components/button/button}}
+    {{#> components/button/button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
+    {{> components/button/components/button_label _label="2"}}
+    {{/components/button/button}}  
+    {{> components/pagination/pagination_button_right }}  
+    </div>     
 {{~/if~}}

package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs

@@ -1,10 +1,11 @@
 <li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
-    <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
+    <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-blue-linkWater lg:p-0 lg:bg-transparent lg:h-10">
         {{#each this.items}}
-            <li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
-                {{#> components/base/link _link=this.link}}
-                    {{this.text}}       
-                {{/components/base/link}} 
+            <li class="{{#unless @last}}mr-3 {{/unless}}">
+                {{#> components/button/top_topics_button}}
+                    <div class="sr-only">{{loca "label_top_thema"}}</div>  
+                    {{> components/button/components/button_label _label=this.text }}
+                {{/components/button/top_topics_button}}
             </li>
         {{/each}} 
     </ul>

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

@@ -22,7 +22,7 @@
                 {{/components/teaser/components/teaser_headline}}
             {{/components/teaser/components/teaser_header}}
         {{/components/base/link}}
-        <span class="absolute flex w-full h-full items-end justify-center ds-cta">
+        <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                 {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
             {{/components/button/link_button}}

package/package.json

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

package/src/assets/fixtures/page/page_pagination.json

@@ -6,11 +6,21 @@
     "secondPage": false,
     "notLastButOnePage": false,
     "notLastPage": false,
-    "firstPageItemUrl":"page1",
-    "nextItemUrl":"page2",
-    "previousItemUrl":"empty",
-    "lastPageItemUrl":"page4",
-    "lastButOnePageItemUrl":"page1",
+    "firstPageItemLink" : {
+        "url": "firstPage"
+    },
+    "nextItemLink" : {
+        "url": "nextItem"
+    },
+    "previousItemLink" : {
+        "url": "previousItem"
+    },
+    "lastPageItemLink" : {
+        "url": "lastPage"
+    },
+    "lastButOnePageItemLink" : {
+        "url": "LastButOnePage"
+    },
     "totalPages": 4, 
     "currentPage": 2,
     "currentPageIndex": 0,