npm - hr-design-system-handlebars - Versions diffs - 1.17.0 → 1.17.2 - Mend

hr-design-system-handlebars 1.17.0 → 1.17.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/src/stories/views/components/page/page.stories.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import page from './page.hbs'
+import page_pagination from './page_pagination.hbs'
 import {
     NavigationDataWithTeaser,
     NavigationDataWithTeaser2,
@@ -7,6 +8,8 @@ import {
 } from './page.data.js'
+import { NavigationDataWithMixedContent } from './page_pagination.data.js'
 const Template = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
@@ -15,6 +18,14 @@ const Template = (args, { globals: { customConditionalToolbar } }) => {
     return page({ brand, ...args })
 }
+const Template2 = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page_pagination({ brand, ...args })
+}
 export default {
     title: 'Komponenten/Page/Page',
     argTypes: {},
@@ -51,8 +62,13 @@ export const MitSubnavigation = {
     args: NavigationDataWithTeaser3,
 }
+export const MitPagination = {
+    render: Template2.bind({}),
+    name: 'Mit Pagination',
+    args: NavigationDataWithMixedContent,
+}
 export const MitTopTopics = {
     render: Template.bind({}),
     name: 'Mit Top-Topics',
     args: NavigationDataWithTeaser4,
-}
+}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/site_header/fixtures/site_header_mit_top_topics.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"hasOpenSubNavigation":false,"_useSticky":true,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Übersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Übersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Übersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Schulausfälle","text":"Schulausfälle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Flugpläne Frankfurt / Parkhausbelegung","text":"Flugpläne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"topTopicsNavigation":{"items":[{"title":"Corona","text":"Corona","link":{"url":"http://www.Corona.de","hasIcon":false,"iconName":"extern"}},{"title":"Unwetter","text":"Unwetter","selected":true,"link":{"url":"http://www.Unwetter.de","hasIcon":false,"iconName":"extern"}},{"title":"~~Lottozahlen~~","text":"~~Lottozahlen~~","selected":false,"link":{"url":"http://www.~~Lotto~~.de","hasIcon":false,"iconName":"extern"}}]},"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hessenschau","text":"Start","hiddenText":"hessenschau","url":"index.html","labelText":"Startseite der hessenschau","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"regionen","text":"Regionen","url":"rheinmain/index.html","isCluster":"true","subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Nordhessen","text":"Nordhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Osthessen","text":"Osthessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Mittelhessen","text":"Mittelhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Rhein-Main","text":"Rhein-Main","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Südhessen","text":"Südhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]},"clusterItems":[{"name":"nordhessen","text":"Nordhessen","url":"nordhessen/index.html"},{"name":"osthessen","text":"Osthessen","url":"osthessen/index.html"},{"name":"mittelhessen","text":"Mittelhessen","url":"mittelhessen/index.html"},{"name":"rheinmain","text":"Rhein-Main","url":"rheinmain/index.html"},{"name":"suedhessen","text":"Südhessen","url":"suedhessen/index.html"}]}]},{"navigationItems":[{"name":"politik","text":"Politik","url":"politik/index.html","qualifiedRelatedContentOn404":true,"isCluster":false,"subNavigation":{"showAsFlyout":false,"columnCount":"1","items":[{"title":"Bundestagswahl 2021","text":"Bundestagswahl 2021","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Landtag","text":"Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Videos aus dem Landtag","text":"Videos aus dem Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wahlen","text":"Wahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Direktwahlen","text":"Direktwahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]}}]},{"navigationItems":[{"name":"gesellschaft","text":"Gesellschaft","url":"gesellschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"wirtschaft","text":"Wirtschaft","url":"wirtschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kultur","text":"Kultur","url":"kultur/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"sport","text":"Sport","url":"sport/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"panorama","text":"Panorama","url":"panorama/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"freizeit","text":"Freizeit","url":"freizeit/index.html","qualifiedRelatedContentOn404":true}]}]}
1	+ {"hasOpenSubNavigation":false,"_useSticky":true,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Übersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Übersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Übersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Schulausfälle","text":"Schulausfälle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Flugpläne Frankfurt / Parkhausbelegung","text":"Flugpläne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"topTopicsNavigation":{"items":[{"title":"Corona","text":"Corona","link":{"url":"http://www.Corona.de","hasIcon":false,"iconName":"extern"}},{"title":"Unwetter","text":"Unwetter","selected":true,"link":{"url":"http://www.Unwetter.de","hasIcon":false,"iconName":"extern"}},{"title":"Regionen","text":"Regionen","selected":false,"link":{"url":"http://www.Regionen.de","hasIcon":false,"iconName":"extern"}}]},"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hessenschau","text":"Start","hiddenText":"hessenschau","url":"index.html","labelText":"Startseite der hessenschau","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"regionen","text":"Regionen","url":"rheinmain/index.html","isCluster":"true","subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Nordhessen","text":"Nordhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Osthessen","text":"Osthessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Mittelhessen","text":"Mittelhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Rhein-Main","text":"Rhein-Main","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Südhessen","text":"Südhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]},"clusterItems":[{"name":"nordhessen","text":"Nordhessen","url":"nordhessen/index.html"},{"name":"osthessen","text":"Osthessen","url":"osthessen/index.html"},{"name":"mittelhessen","text":"Mittelhessen","url":"mittelhessen/index.html"},{"name":"rheinmain","text":"Rhein-Main","url":"rheinmain/index.html"},{"name":"suedhessen","text":"Südhessen","url":"suedhessen/index.html"}]}]},{"navigationItems":[{"name":"politik","text":"Politik","url":"politik/index.html","qualifiedRelatedContentOn404":true,"isCluster":false,"subNavigation":{"showAsFlyout":false,"columnCount":"1","items":[{"title":"Bundestagswahl 2021","text":"Bundestagswahl 2021","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Landtag","text":"Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Videos aus dem Landtag","text":"Videos aus dem Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wahlen","text":"Wahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Direktwahlen","text":"Direktwahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]}}]},{"navigationItems":[{"name":"gesellschaft","text":"Gesellschaft","url":"gesellschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"wirtschaft","text":"Wirtschaft","url":"wirtschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kultur","text":"Kultur","url":"kultur/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"sport","text":"Sport","url":"sport/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"panorama","text":"Panorama","url":"panorama/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"freizeit","text":"Freizeit","url":"freizeit/index.html","qualifiedRelatedContentOn404":true}]}]}