hr-design-system-handlebars 1.17.0 → 1.17.1
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.
- package/CHANGELOG.md +12 -0
- package/dist/assets/index.css +14 -10
- package/dist/views/components/button/button.hbs +1 -1
- package/dist/views/components/button/link_button.hbs +1 -1
- package/dist/views/components/button/utilities/button_variation_classes.hbs +9 -1
- package/dist/views/components/event/event_ticket_button.hbs +2 -2
- package/dist/views/components/pagination/pagination_button_left.hbs +3 -3
- package/dist/views/components/pagination/pagination_button_left_linked.hbs +3 -5
- package/dist/views/components/pagination/pagination_button_right.hbs +4 -3
- package/dist/views/components/pagination/pagination_button_right_linked.hbs +3 -5
- package/dist/views/components/pagination/pagination_current_page_invalid.hbs +14 -7
- package/dist/views/components/pagination/pagination_current_page_valid.hbs +1 -1
- package/dist/views/components/pagination/pagination_more_than_three_pages.hbs +40 -24
- package/dist/views/components/pagination/pagination_only_three_pages.hbs +41 -23
- package/dist/views/components/pagination/pagination_only_two_pages.hbs +19 -11
- package/dist/views/components/teaser/teaser_poster.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/brand/hessenschau/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-bigband/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-inforadio/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr-werbung/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr1/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr2/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr3/conf/locatags.merged.json +0 -1
- package/src/assets/brand/hr4/conf/locatags.merged.json +0 -1
- package/src/assets/brand/you-fm/conf/locatags.merged.json +0 -1
- package/src/assets/fixtures/page/page_pagination.json +15 -5
- package/src/assets/tailwind.css +2 -0
- package/src/stories/views/components/button/button.hbs +1 -1
- package/src/stories/views/components/button/button.mdx +10 -1
- package/src/stories/views/components/button/button.stories.js +66 -0
- package/src/stories/views/components/button/link_button.hbs +1 -1
- package/src/stories/views/components/button/link_button.mdx +8 -0
- package/src/stories/views/components/button/link_button.stories.js +66 -0
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +9 -1
- package/src/stories/views/components/event/event_ticket_button.hbs +2 -2
- package/src/stories/views/components/page/fixtures/page_pagination.json +1 -1
- package/src/stories/views/components/page/page.stories.js +17 -1
- package/src/stories/views/components/page/page_pagination.mdx +52 -3
- package/src/stories/views/components/page/page_pagination.stories.js +134 -4
- package/src/stories/views/components/pagination/pagination_button_left.hbs +3 -3
- package/src/stories/views/components/pagination/pagination_button_left_linked.hbs +3 -5
- package/src/stories/views/components/pagination/pagination_button_right.hbs +4 -3
- package/src/stories/views/components/pagination/pagination_button_right_linked.hbs +3 -5
- package/src/stories/views/components/pagination/pagination_current_page_invalid.hbs +14 -7
- package/src/stories/views/components/pagination/pagination_current_page_valid.hbs +1 -1
- package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs +40 -24
- package/src/stories/views/components/pagination/pagination_only_three_pages.hbs +41 -23
- package/src/stories/views/components/pagination/pagination_only_two_pages.hbs +19 -11
- package/src/stories/views/components/teaser/teaser_poster.hbs +1 -1
- package/tailwind.config.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.17.1 (Wed May 03 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-2079 Pagination Refactoring [#618](https://github.com/mumprod/hr-design-system-handlebars/pull/618) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.17.0 (Wed May 03 2023)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -1803,6 +1803,9 @@ video {
|
|
|
1803
1803
|
.border-button {
|
|
1804
1804
|
border-color: var(--color-button);
|
|
1805
1805
|
}
|
|
1806
|
+
.border-button-disabled {
|
|
1807
|
+
border-color: var(--color-button-disabled);
|
|
1808
|
+
}
|
|
1806
1809
|
.border-button-inverted {
|
|
1807
1810
|
border-color: #ffffff;
|
|
1808
1811
|
border-color: var(--color-button-inverted);
|
|
@@ -1864,6 +1867,9 @@ video {
|
|
|
1864
1867
|
.bg-button--dark {
|
|
1865
1868
|
background-color: var(--color-button--dark);
|
|
1866
1869
|
}
|
|
1870
|
+
.bg-button-disabled {
|
|
1871
|
+
background-color: var(--color-button-disabled);
|
|
1872
|
+
}
|
|
1867
1873
|
.bg-button-inverted {
|
|
1868
1874
|
background-color: #ffffff;
|
|
1869
1875
|
background-color: var(--color-button-inverted);
|
|
@@ -2085,10 +2091,6 @@ video {
|
|
|
2085
2091
|
padding-left: 0.5rem;
|
|
2086
2092
|
padding-right: 0.5rem;
|
|
2087
2093
|
}
|
|
2088
|
-
.px-20 {
|
|
2089
|
-
padding-left: 5rem;
|
|
2090
|
-
padding-right: 5rem;
|
|
2091
|
-
}
|
|
2092
2094
|
.px-3 {
|
|
2093
2095
|
padding-left: 0.75rem;
|
|
2094
2096
|
padding-right: 0.75rem;
|
|
@@ -2217,9 +2219,6 @@ video {
|
|
|
2217
2219
|
.pl-4 {
|
|
2218
2220
|
padding-left: 1rem;
|
|
2219
2221
|
}
|
|
2220
|
-
.pl-5 {
|
|
2221
|
-
padding-left: 1.25rem;
|
|
2222
|
-
}
|
|
2223
2222
|
.pl-8 {
|
|
2224
2223
|
padding-left: 2rem;
|
|
2225
2224
|
}
|
|
@@ -2441,6 +2440,9 @@ video {
|
|
|
2441
2440
|
.text-button {
|
|
2442
2441
|
color: var(--color-button);
|
|
2443
2442
|
}
|
|
2443
|
+
.text-button-disabled--dark {
|
|
2444
|
+
color: var(--color-button-disabled--dark);
|
|
2445
|
+
}
|
|
2444
2446
|
.text-button-inverted {
|
|
2445
2447
|
color: #ffffff;
|
|
2446
2448
|
color: var(--color-button-inverted);
|
|
@@ -2677,7 +2679,7 @@ video {
|
|
|
2677
2679
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2678
2680
|
}
|
|
2679
2681
|
.counter-reset {
|
|
2680
|
-
counter-reset:
|
|
2682
|
+
counter-reset: cnt1683118889767;
|
|
2681
2683
|
}
|
|
2682
2684
|
.hyphens-auto {
|
|
2683
2685
|
-webkit-hyphens: auto;
|
|
@@ -2915,7 +2917,7 @@ video {
|
|
|
2915
2917
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2916
2918
|
}
|
|
2917
2919
|
.-ordered {
|
|
2918
|
-
counter-increment:
|
|
2920
|
+
counter-increment: cnt1683118889767 1;
|
|
2919
2921
|
}
|
|
2920
2922
|
.-ordered::before {
|
|
2921
2923
|
position: absolute;
|
|
@@ -2931,7 +2933,7 @@ video {
|
|
|
2931
2933
|
letter-spacing: .0125em;
|
|
2932
2934
|
--tw-text-opacity: 1;
|
|
2933
2935
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2934
|
-
content: counter(
|
|
2936
|
+
content: counter(cnt1683118889767);
|
|
2935
2937
|
}
|
|
2936
2938
|
/*! ****************************/
|
|
2937
2939
|
/*! text-shadow */
|
|
@@ -3102,6 +3104,8 @@ video {
|
|
|
3102
3104
|
--color-button--dark: #005293;
|
|
3103
3105
|
--color-button-inverted: #ffffff;
|
|
3104
3106
|
--color-button-inverted--dark: #eaf3fa;
|
|
3107
|
+
--color-button-disabled: #d4d4d4;
|
|
3108
|
+
--color-button-disabled--dark: #797979;
|
|
3105
3109
|
/* Media-Button */
|
|
3106
3110
|
--color-media-button: #006dc1;
|
|
3107
3111
|
/* States */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<button
|
|
2
2
|
{{#if _id}} id="{{_id}}"{{/if}}
|
|
3
|
-
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}}"
|
|
3
|
+
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}}"
|
|
4
4
|
{{#if _openModal}} aria-haspopup="true"{{/if}}
|
|
5
5
|
{{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
|
|
6
6
|
type="{{defaultIfEmpty _type "submit"}}"
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
{{> @partial-block }}
|
|
3
3
|
{{/components/base/link}}
|
|
4
4
|
{{#*inline "css"~}}
|
|
5
|
-
{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=../../_variant _onBackground=../../_onBackground}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
|
|
5
|
+
{{> 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~}}
|
|
6
6
|
{{~/inline}}
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
{{#if _onBackground~}}
|
|
2
|
-
|
|
2
|
+
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
5
|
'[" 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 "]'
|
|
6
6
|
~}}
|
|
7
|
+
{{else if _disabled~}}
|
|
8
|
+
|
|
9
|
+
{{inline-switch
|
|
10
|
+
_variant
|
|
11
|
+
'["primary","secondary","tertiary"]'
|
|
12
|
+
'[" 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 "]'
|
|
13
|
+
~}}
|
|
14
|
+
|
|
7
15
|
{{else}}
|
|
8
16
|
{{~inline-switch
|
|
9
17
|
_variant
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="static
|
|
1
|
+
<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">
|
|
2
2
|
{{#> components/button/button _id=(nextRandom) _size="lg"}}
|
|
3
3
|
{{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
|
|
4
4
|
{{>components/button/components/button_label _label="Tickets"}}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{{#> components/teaser/components/teaser_headline}}
|
|
8
8
|
{{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
|
|
9
9
|
{{/components/teaser/components/teaser_headline}}
|
|
10
|
-
<p class="text-base font-copy
|
|
10
|
+
<p class="mt-2 text-base font-copy">{{loca "ticket_modal_text"}}</p>
|
|
11
11
|
|
|
12
12
|
<div class="flex flex-wrap mt-4">
|
|
13
13
|
{{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
{{#> components/button/link_button _size="lg" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="mr-1"}}
|
|
2
|
+
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
|
+
{{/components/button/link_button}}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</a>
|
|
5
|
-
</div>
|
|
1
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.previousItemLink _css="mr-1"}}
|
|
2
|
+
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
|
+
{{/components/button/link_button}}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
{{#> components/button/link_button _size="lg" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1"}}
|
|
2
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
3
|
+
{{/components/button/link_button}}
|
|
4
|
+
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</a>
|
|
5
|
-
</div>
|
|
1
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
|
|
2
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
3
|
+
{{/components/button/link_button}}
|
|
@@ -1,17 +1,24 @@
|
|
|
1
|
-
<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
|
|
1
|
+
<nav class="flex flex-row content-center justify-center py-10" role="navigation" aria-label="Paginierung">
|
|
2
|
+
<div class="flex h-10"></div>
|
|
2
3
|
{{> components/pagination/pagination_button_left }}
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
5
|
+
{{> components/button/components/button_label _label="1"}}
|
|
6
|
+
{{/components/button/link_button}}
|
|
5
7
|
{{~#if _moreThanOnePage ~}}
|
|
6
8
|
{{~#unless _onlyTwoPages ~}}
|
|
7
9
|
{{~#if _onlyThreePages ~}}
|
|
8
|
-
|
|
10
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastButOnePageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
11
|
+
{{> components/button/components/button_label _label="2"}}
|
|
12
|
+
{{/components/button/link_button}}
|
|
9
13
|
{{else}}
|
|
10
|
-
<span class="
|
|
14
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
11
15
|
{{~/if~}}
|
|
12
16
|
{{~/unless~}}
|
|
13
|
-
|
|
17
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
18
|
+
{{> components/button/components/button_label _label=_totalPages}}
|
|
19
|
+
{{/components/button/link_button}}
|
|
14
20
|
{{~/if~}}
|
|
15
|
-
|
|
21
|
+
|
|
16
22
|
{{> components/pagination/pagination_button_right }}
|
|
23
|
+
</div>
|
|
17
24
|
</nav>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{~#if _moreThanOnePage~}}
|
|
2
|
-
<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
|
|
2
|
+
<nav class="flex flex-row content-center justify-center py-10" role="navigation" aria-label="Paginierung">
|
|
3
3
|
{{~#if _onlyTwoPages~}}
|
|
4
4
|
{{> components/pagination/pagination_only_two_pages
|
|
5
5
|
_firstPage=_firstPage
|
|
@@ -1,38 +1,54 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<div class="flex h-10">
|
|
3
|
+
{{> components/pagination/pagination_button_left }}
|
|
4
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
5
|
+
{{> components/button/components/button_label _label="1"}}
|
|
6
|
+
{{/components/button/link_button}}
|
|
7
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
8
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
9
|
+
{{> components/button/components/button_label _label=_totalPages}}
|
|
10
|
+
{{/components/button/link_button}}
|
|
11
|
+
{{> components/pagination/pagination_button_right_linked }}
|
|
12
|
+
</div>
|
|
9
13
|
{{else}}
|
|
10
|
-
{{~#if _secondPage~}}
|
|
14
|
+
{{~#if _secondPage~}}
|
|
15
|
+
<div class="flex h-10">
|
|
11
16
|
{{> components/pagination/pagination_button_left_linked }}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
18
|
+
{{> components/button/components/button_label _label="1"}}
|
|
19
|
+
{{/components/button/link_button}}
|
|
20
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
21
|
+
{{> components/button/components/button_label _label="2"}}
|
|
22
|
+
{{/components/button/link_button}}
|
|
23
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
24
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
25
|
+
{{> components/button/components/button_label _label=_totalPages}}
|
|
26
|
+
{{/components/button/link_button}}
|
|
18
27
|
{{> components/pagination/pagination_button_right_linked }}
|
|
28
|
+
</div>
|
|
19
29
|
{{else}}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
30
|
+
<div class="flex h-10">
|
|
31
|
+
{{> components/pagination/pagination_button_left_linked }}
|
|
32
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
33
|
+
{{> components/button/components/button_label _label="1"}}
|
|
34
|
+
{{/components/button/link_button}}
|
|
35
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
36
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
37
|
+
{{> components/button/components/button_label _label=_currentPage}}
|
|
38
|
+
{{/components/button/link_button}}
|
|
25
39
|
{{~#if _notLastPage~}}
|
|
26
40
|
{{~#if _notLastButOnePage~}}
|
|
27
|
-
<span class="
|
|
41
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
28
42
|
{{~/if~}}
|
|
29
|
-
|
|
30
|
-
{{
|
|
31
|
-
|
|
43
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
44
|
+
{{> components/button/components/button_label _label=_totalPages}}
|
|
45
|
+
{{/components/button/link_button}}
|
|
46
|
+
{{~/if~}}
|
|
32
47
|
{{~#if _notLastPage~}}
|
|
33
48
|
{{> components/pagination/pagination_button_right_linked }}
|
|
34
49
|
{{else}}
|
|
35
50
|
{{> components/pagination/pagination_button_right }}
|
|
36
|
-
{{~/if~}}
|
|
51
|
+
{{~/if~}}
|
|
52
|
+
</div>
|
|
37
53
|
{{~/if~}}
|
|
38
54
|
{{~/if~}}
|
|
@@ -1,27 +1,45 @@
|
|
|
1
|
-
{{~#if _firstPage~}}
|
|
1
|
+
{{~#if _firstPage~}}
|
|
2
|
+
<div class="flex h-10">
|
|
2
3
|
{{> components/pagination/pagination_button_left }}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
{{
|
|
4
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
5
|
+
{{> components/button/components/button_label _label="1"}}
|
|
6
|
+
{{/components/button/link_button}}
|
|
7
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
8
|
+
{{> components/button/components/button_label _label="2"}}
|
|
9
|
+
{{/components/button/link_button}}
|
|
10
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
11
|
+
{{> components/button/components/button_label _label="3"}}
|
|
12
|
+
{{/components/button/link_button}}
|
|
13
|
+
{{> components/pagination/pagination_button_right_linked }}
|
|
14
|
+
</div>
|
|
9
15
|
{{else}}
|
|
10
|
-
{{~#if _secondPage~}}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
{{> components/
|
|
18
|
-
|
|
19
|
-
{{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
{{~#if _secondPage~}}
|
|
17
|
+
<div class="flex h-10">
|
|
18
|
+
{{> components/pagination/pagination_button_left_linked }}
|
|
19
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
20
|
+
{{> components/button/components/button_label _label="1"}}
|
|
21
|
+
{{/components/button/link_button}}
|
|
22
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
23
|
+
{{> components/button/components/button_label _label="2"}}
|
|
24
|
+
{{/components/button/link_button}}
|
|
25
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
26
|
+
{{> components/button/components/button_label _label="3"}}
|
|
27
|
+
{{/components/button/link_button}}
|
|
28
|
+
{{> components/pagination/pagination_button_right_linked }}
|
|
29
|
+
</div>
|
|
30
|
+
{{else}}
|
|
31
|
+
<div class="flex h-10">
|
|
32
|
+
{{> components/pagination/pagination_button_left_linked }}
|
|
33
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
34
|
+
{{> components/button/components/button_label _label="1"}}
|
|
35
|
+
{{/components/button/link_button}}
|
|
36
|
+
{{#> components/button/link_button _size="lg" _variant="secondary" _link=this.lastButOneItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
37
|
+
{{> components/button/components/button_label _label="2"}}
|
|
38
|
+
{{/components/button/link_button}}
|
|
39
|
+
{{#> components/button/link_button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
40
|
+
{{> components/button/components/button_label _label="3"}}
|
|
41
|
+
{{/components/button/link_button}}
|
|
42
|
+
{{> components/pagination/pagination_button_right }}
|
|
43
|
+
</div>
|
|
26
44
|
{{~/if~}}
|
|
27
45
|
{{~/if~}}
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
|
+
<div class="flex h-10">
|
|
2
3
|
{{> components/pagination/pagination_button_left }}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
{{#> components/button/button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
5
|
+
{{> components/button/components/button_label _label="1"}}
|
|
6
|
+
{{/components/button/button}}
|
|
7
|
+
{{#> components/button/button _size="lg" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
8
|
+
{{> components/button/components/button_label _label="2"}}
|
|
9
|
+
{{/components/button/button}}
|
|
7
10
|
{{> components/pagination/pagination_button_right_linked }}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div class="
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{{
|
|
11
|
+
</div>
|
|
12
|
+
{{else}}
|
|
13
|
+
<div class="flex h-10">
|
|
14
|
+
{{> components/pagination/pagination_button_left_linked }}
|
|
15
|
+
{{#> components/button/button _size="lg" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
16
|
+
{{> components/button/components/button_label _label="1"}}
|
|
17
|
+
{{/components/button/button}}
|
|
18
|
+
{{#> components/button/button _size="lg" _variant="primary" _css="mr-1 ml-1 pr-2 pl-2"}}
|
|
19
|
+
{{> components/button/components/button_label _label="2"}}
|
|
20
|
+
{{/components/button/button}}
|
|
21
|
+
{{> components/pagination/pagination_button_right }}
|
|
22
|
+
</div>
|
|
15
23
|
{{~/if~}}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{/components/teaser/components/teaser_headline}}
|
|
23
23
|
{{/components/teaser/components/teaser_header}}
|
|
24
24
|
{{/components/base/link}}
|
|
25
|
-
<span class="absolute flex w-full h-full
|
|
25
|
+
<span class="absolute flex items-end justify-center w-full h-full ds-cta">
|
|
26
26
|
{{#> 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}}
|
|
27
27
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
28
28
|
{{/components/button/link_button}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.17.
|
|
9
|
+
"version": "1.17.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -6,11 +6,21 @@
|
|
|
6
6
|
"secondPage": false,
|
|
7
7
|
"notLastButOnePage": false,
|
|
8
8
|
"notLastPage": false,
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
|
|
9
|
+
"firstPageItemLink" : {
|
|
10
|
+
"url": "firstPage"
|
|
11
|
+
},
|
|
12
|
+
"nextItemLink" : {
|
|
13
|
+
"url": "nextItem"
|
|
14
|
+
},
|
|
15
|
+
"previousItemLink" : {
|
|
16
|
+
"url": "previousItem"
|
|
17
|
+
},
|
|
18
|
+
"lastPageItemLink" : {
|
|
19
|
+
"url": "lastPage"
|
|
20
|
+
},
|
|
21
|
+
"lastButOnePageItemLink" : {
|
|
22
|
+
"url": "LastButOnePage"
|
|
23
|
+
},
|
|
14
24
|
"totalPages": 4,
|
|
15
25
|
"currentPage": 2,
|
|
16
26
|
"currentPageIndex": 0,
|
package/src/assets/tailwind.css
CHANGED
|
@@ -129,6 +129,8 @@
|
|
|
129
129
|
--color-button--dark: theme('colors.blue.congress');
|
|
130
130
|
--color-button-inverted: theme('colors.white.DEFAULT');
|
|
131
131
|
--color-button-inverted--dark: theme('colors.blue.accented');
|
|
132
|
+
--color-button-disabled: theme('colors.gray.lightGray');
|
|
133
|
+
--color-button-disabled--dark: theme('colors.gray.boulder');
|
|
132
134
|
/* Media-Button */
|
|
133
135
|
--color-media-button: theme('colors.blue.science');
|
|
134
136
|
/* States */
|