hr-design-system-handlebars 1.17.0 → 1.17.1

package/src/stories/views/components/page/page_pagination.mdx

@@ -3,6 +3,55 @@ import * as PagePaginationStories from './page_pagination.stories'
 
 <Meta of={PagePaginationStories} />
 
-<Canvas withToolbar>
-    <Story of={PagePaginationStories.MitPagination} />
-</Canvas>
+
+# Pagination (allgemein)
+
+Um eine große Anzahl von Seiteninhalten (wie z.B. bei einem Suchergebnis mit vielen Treffern) auf mehrer Seiten aufzuteilen, wird die Anzahl der Inhalte
+pro Seite begrenzt und eine sog. Pagination, also eine Unterseitennavigation am Ende der Seite angezeigt. Die Inhalte werden equivalent auf alle Unterseiten
+aufgeteilt.
+
+# Grundaufbau
+
+Die Pagination besteht zum einen aus zwei "Pfeil-Buttons" die es ermöglichen in den erzeugten Unterseiten vor und zurück zu navigieren, 
+einer Darstellung auf welcher Unterseite ich mich gerade befinde, sowie eine Sprungmöglichkeiten, um Unterseiten direkt über die Seitenzahl zu erreichen.
+Die Darstellung startet initial mit Unterseite 1 sowie der Gesamtzahl aller zur Verfügung stehenden Unterseiten. Als Platzhalter wird "..." eingefügt.
+
+
+# Darstellung bei mehr als 3 Unterseiten 
+Im folgenden Beispiel gibt es 999 Unterseiten. Je nachdem welche Unterseite ausgewählt ist, verändert sich die Darstellung. So sind die Unterseite nach 
+Unterseite 1 sowie die vorletzte Seite nicht durch Platzhalter "..." abgetrennt. Liegt die Seite irgendwo zwischen der erste und der letzten Unterseite,
+wird in beiden Richtungen mit Platzhalter "..." abgetrennt.
+
+
+<Story of={PagePaginationStories.MitPagination} />
+
+
+### Zweite Seite gewählt 
+
+<Story of={PagePaginationStories.MitPagination2} />
+
+### Seite mittendrin gewählt 
+
+<Story of={PagePaginationStories.MitPagination4} />
+
+### Vorletzte Seite gewählt 
+
+<Story of={PagePaginationStories.MitPagination3} />
+
+### Letzte Seite gewählt 
+
+<Story of={PagePaginationStories.MitPagination5} />
+
+
+# Sonderformen 
+Die Logik erzeugt bei nur einer, bei zweien oder drei Unterseiten eine etwas andere Darstellung. Der Platzhalter "..." kann bei einer so geringen Anzahl von
+Unterseiten entfallen.
+
+### Mit nur zwei Unterseiten 
+
+<Story of={PagePaginationStories.MitPagination6} />
+
+
+### Mit nur drei Unterseiten
+
+<Story of={PagePaginationStories.MitPagination7} />

package/src/stories/views/components/page/page_pagination.stories.js

@@ -1,14 +1,110 @@
 import { NavigationDataWithMixedContent } from './page_pagination.data.js'
-import page from './page_pagination.hbs'
+import page from '../pagination/pagination.hbs'
 
-const Template = (args, { globals: { customConditionalToolbar } }) => {
+const TemplateMoreThanThreeFirst = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
+    args['currentPageValid'] = true
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = false
+    args['secondPage'] = false
+    args['firstPage'] = true
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = false
+    args['totalPages'] = 999
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+const TemplateMoreThanThreeSecond = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = false
+    args['secondPage'] = true
+    args['firstPage'] = false
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = false
+    args['totalPages'] = 999
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+const TemplateMoreThanThreeButNotLast = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = false
+    args['secondPage'] = false
+    args['firstPage'] = false
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = true
+    args['totalPages'] = 999
+    args['currentPage'] = 998
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+const TemplateMoreThanThreeOneButNotLast = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = false
+    args['secondPage'] = false
+    args['firstPage'] = false
+    args['notLastButOnePage'] = true
+    args['notLastPage'] = true
+    args['totalPages'] = 999
+    args['currentPage'] = 555
     let brand =
         undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
     return page({ brand, ...args })
 }
 
+const TemplateMoreThanThreeLast = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = false
+    args['secondPage'] = false
+    args['firstPage'] = false
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = false
+    args['totalPages'] = 999
+    args['currentPage'] = 999
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+const TemplateOnlyTwo= (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = false
+    args['onlyTwoPages'] = true
+    args['secondPage'] = false
+    args['firstPage'] = true
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = false
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+
+const TemplateOnlyThree = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    args['onlyThreePages'] = true
+    args['onlyTwoPages'] = false
+    args['secondPage'] = false
+    args['firstPage'] = false
+    args['notLastButOnePage'] = false
+    args['notLastPage'] = false
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+
+
 export default {
     title: 'Komponenten/Page/Pagination',
     argTypes: {},
@@ -28,7 +124,41 @@ export default {
 }
 
 export const MitPagination = {
-    render: Template.bind({}),
-    name: 'Mit Pagination',
+    render: TemplateMoreThanThreeFirst.bind({}),
+    name: 'Pagination mehr als 3 Seiten',
+    args: NavigationDataWithMixedContent,
+}
+export const MitPagination2 = {
+    render: TemplateMoreThanThreeSecond.bind({}),
+    name: 'Pagination mehr als 3 Seiten (zweite Seite aktiv)',
+    args: NavigationDataWithMixedContent,
+}
+export const MitPagination3 = {
+    render: TemplateMoreThanThreeButNotLast.bind({}),
+    name: 'Pagination mehr als 3 Seiten (vorletzte Seite aktiv)',
+    args: NavigationDataWithMixedContent,
+}
+
+export const MitPagination4 = {
+    render: TemplateMoreThanThreeOneButNotLast.bind({}),
+    name: 'Pagination mehr als 3 Seiten (Seite mitten drin aktiv)',
+    args: NavigationDataWithMixedContent,
+}
+
+export const MitPagination5 = {
+    render: TemplateMoreThanThreeLast.bind({}),
+    name: 'Pagination mehr als 3 Seiten (letzte Seite aktiv)',
+    args: NavigationDataWithMixedContent,
+}
+
+export const MitPagination6 = {
+    render: TemplateOnlyTwo.bind({}),
+    name: 'Pagination mit nur 2 Seiten',
+    args: NavigationDataWithMixedContent,
+}
+
+export const MitPagination7 = {
+    render: TemplateOnlyThree.bind({}),
+    name: 'Pagination mit nur 3 Seiten',
     args: NavigationDataWithMixedContent,
 }

package/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/tailwind.config.js

@@ -341,6 +341,8 @@ module.exports = {
                 'button--dark': 'var(--color-button--dark)',
                 'button-inverted': 'var(--color-button-inverted)',
                 'button-inverted--dark': 'var(--color-button-inverted--dark)',
+                'button-disabled': 'var(--color-button-disabled)',
+                'button-disabled--dark': 'var(--color-button-disabled--dark)',
                 'media-button': 'var(--color-media-button)',
                 'focus-state': 'var(--color-focus-state)',
                 'content-nav': 'var(--color-content-nav)',