hr-design-system-handlebars 1.25.0 → 1.26.0
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 +24 -0
- package/dist/assets/index.css +12 -9
- package/dist/views/components/button/button.hbs +2 -1
- package/dist/views/components/button/components/button_label.hbs +1 -1
- package/dist/views/components/button/utilities/button_dimension_classes.hbs +5 -1
- package/dist/views/components/pagination/pagination_button_left.hbs +2 -2
- package/dist/views/components/pagination/pagination_button_left_linked.hbs +1 -0
- package/dist/views/components/pagination/pagination_button_right.hbs +2 -2
- package/dist/views/components/pagination/pagination_button_right_linked.hbs +1 -0
- package/dist/views/components/pagination/pagination_more_than_three_pages.hbs +33 -10
- package/dist/views/components/pagination/pagination_only_three_pages.hbs +37 -13
- package/dist/views/components/pagination/pagination_only_two_pages.hbs +24 -10
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/dist/views/components/teaser/tabbox/group_tabbox.hbs +2 -0
- package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs +2 -2
- package/package.json +1 -1
- package/src/stories/conventions-and-datastructure.mdx +4 -4
- package/src/stories/views/components/button/button.hbs +2 -1
- package/src/stories/views/components/button/button.mdx +2 -2
- package/src/stories/views/components/button/components/button_label.hbs +1 -1
- package/src/stories/views/components/button/utilities/button_dimension_classes.hbs +5 -1
- package/src/stories/views/components/pagination/pagination_button_left.hbs +2 -2
- package/src/stories/views/components/pagination/pagination_button_left_linked.hbs +1 -0
- package/src/stories/views/components/pagination/pagination_button_right.hbs +2 -2
- package/src/stories/views/components/pagination/pagination_button_right_linked.hbs +1 -0
- package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs +33 -10
- package/src/stories/views/components/pagination/pagination_only_three_pages.hbs +37 -13
- package/src/stories/views/components/pagination/pagination_only_two_pages.hbs +24 -10
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs +2 -0
- package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +2 -2
- package/tailwind.config.js +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.26.0 (Wed May 24 2023)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Bugfix/dpe 2330 [#646](https://github.com/mumprod/hr-design-system-handlebars/pull/646) ([@szuelch](https://github.com/szuelch))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@szuelch](https://github.com/szuelch)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.25.1 (Tue May 23 2023)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- DPE 2327 - Paging bei 2 Unterseiten funktioniert nicht [#644](https://github.com/mumprod/hr-design-system-handlebars/pull/644) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.25.0 (Tue May 23 2023)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -1477,14 +1477,14 @@ video {
|
|
|
1477
1477
|
.min-w-0 {
|
|
1478
1478
|
min-width: 0px;
|
|
1479
1479
|
}
|
|
1480
|
-
.min-w-10
|
|
1481
|
-
min-width: 2.
|
|
1480
|
+
.min-w-10 {
|
|
1481
|
+
min-width: 2.5rem;
|
|
1482
1482
|
}
|
|
1483
|
-
.min-w-11
|
|
1484
|
-
min-width: 2.
|
|
1483
|
+
.min-w-11 {
|
|
1484
|
+
min-width: 2.75rem;
|
|
1485
1485
|
}
|
|
1486
|
-
.min-w-7
|
|
1487
|
-
min-width: 1.
|
|
1486
|
+
.min-w-7 {
|
|
1487
|
+
min-width: 1.75rem;
|
|
1488
1488
|
}
|
|
1489
1489
|
.max-w-3\/4 {
|
|
1490
1490
|
max-width: 75%;
|
|
@@ -2424,6 +2424,9 @@ video {
|
|
|
2424
2424
|
.\!leading-8 {
|
|
2425
2425
|
line-height: 2rem !important;
|
|
2426
2426
|
}
|
|
2427
|
+
.\!leading-none {
|
|
2428
|
+
line-height: 1 !important;
|
|
2429
|
+
}
|
|
2427
2430
|
.leading-10 {
|
|
2428
2431
|
line-height: 2.5rem;
|
|
2429
2432
|
}
|
|
@@ -2729,7 +2732,7 @@ video {
|
|
|
2729
2732
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2730
2733
|
}
|
|
2731
2734
|
.counter-reset {
|
|
2732
|
-
counter-reset:
|
|
2735
|
+
counter-reset: cnt1684934652046;
|
|
2733
2736
|
}
|
|
2734
2737
|
.hyphens-auto {
|
|
2735
2738
|
-webkit-hyphens: auto;
|
|
@@ -2965,7 +2968,7 @@ video {
|
|
|
2965
2968
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2966
2969
|
}
|
|
2967
2970
|
.-ordered {
|
|
2968
|
-
counter-increment:
|
|
2971
|
+
counter-increment: cnt1684934652046 1;
|
|
2969
2972
|
}
|
|
2970
2973
|
.-ordered::before {
|
|
2971
2974
|
position: absolute;
|
|
@@ -2981,7 +2984,7 @@ video {
|
|
|
2981
2984
|
letter-spacing: .0125em;
|
|
2982
2985
|
--tw-text-opacity: 1;
|
|
2983
2986
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2984
|
-
content: counter(
|
|
2987
|
+
content: counter(cnt1684934652046);
|
|
2985
2988
|
}
|
|
2986
2989
|
/*! ****************************/
|
|
2987
2990
|
/*! text-shadow */
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
{{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
|
|
11
11
|
{{~#if _x-show}} x-show="{{_x-show}}"{{/if}}
|
|
12
12
|
{{~#if _noFocus}} tabindex="-1"{{/if}}
|
|
13
|
-
{{
|
|
13
|
+
{{~#if _disabled~}} disabled{{/if}}
|
|
14
|
+
{{#> htmlProperties}}{{/htmlProperties}}>
|
|
14
15
|
{{> @partial-block }}
|
|
15
16
|
</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class='ds-button-label {{_css}}'>{{_label}}</span>
|
|
1
|
+
<span class='ds-button-label text-base {{_css}}'>{{_label}}</span>
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
{{~inline-switch
|
|
1
|
+
{{~inline-switch
|
|
2
|
+
_size
|
|
3
|
+
'["sm","md","lg"]'
|
|
4
|
+
'[" px-2 py-0.5 min-w-7 justify-center"," p-2 min-w-10 justify-center"," px-4 py-2.5 min-w-11 justify-center",""]'
|
|
5
|
+
~}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
{{#> components/button/
|
|
1
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="mr-1" _type="button"}}
|
|
2
2
|
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
|
-
{{/components/button/
|
|
3
|
+
{{/components/button/button}}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.previousItemLink _css="mr-1"}}
|
|
2
|
+
<span class="sr-only">Vorherige Seite</span>
|
|
2
3
|
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
4
|
{{/components/button/link_button}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{{#> components/button/
|
|
1
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
|
|
2
2
|
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
3
|
-
{{/components/button/
|
|
3
|
+
{{/components/button/button}}
|
|
4
4
|
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
8
|
+
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
7
13
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
8
14
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
9
16
|
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
10
17
|
{{/components/button/link_button}}
|
|
11
18
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -15,13 +22,21 @@
|
|
|
15
22
|
<div class="flex">
|
|
16
23
|
{{> components/pagination/pagination_button_left_linked }}
|
|
17
24
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
25
|
+
<span class="sr-only">Zur Seite: </span>
|
|
18
26
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
19
27
|
{{/components/button/link_button}}
|
|
20
|
-
{{
|
|
21
|
-
{{
|
|
22
|
-
|
|
28
|
+
{{#with this}}
|
|
29
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
30
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
31
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
32
|
+
{{/components/button/link_button}}
|
|
33
|
+
{{#*inline "htmlProperties"}}
|
|
34
|
+
aria-current="true"
|
|
35
|
+
{{/inline}}
|
|
36
|
+
{{/with}}
|
|
23
37
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
24
38
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
39
|
+
<span class="sr-only">Zur Seite: </span>
|
|
25
40
|
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
26
41
|
{{/components/button/link_button}}
|
|
27
42
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -30,17 +45,25 @@
|
|
|
30
45
|
<div class="flex">
|
|
31
46
|
{{> components/pagination/pagination_button_left_linked }}
|
|
32
47
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
48
|
+
<span class="sr-only">Zur Seite: </span>
|
|
33
49
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
34
50
|
{{/components/button/link_button}}
|
|
35
|
-
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
36
|
-
{{
|
|
37
|
-
{{
|
|
38
|
-
|
|
51
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
52
|
+
{{#with this}}
|
|
53
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
54
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
55
|
+
{{> components/button/components/button_label _label=../../_currentPage-adjust_context _css=""}}
|
|
56
|
+
{{/components/button/link_button}}
|
|
57
|
+
{{#*inline "htmlProperties"}}
|
|
58
|
+
aria-current="true"
|
|
59
|
+
{{/inline}}
|
|
60
|
+
{{/with}}
|
|
39
61
|
{{~#if _notLastPage~}}
|
|
40
62
|
{{~#if _notLastButOnePage~}}
|
|
41
63
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
42
64
|
{{~/if~}}
|
|
43
65
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
66
|
+
<span class="sr-only">Zur Seite: </span>
|
|
44
67
|
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
45
68
|
{{/components/button/link_button}}
|
|
46
69
|
{{~/if~}}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
{{> components/button/components/button_label _label="2" _css=""}}
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
9
8
|
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
13
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
|
|
14
|
+
<span class="sr-only">Zur Seite: </span>
|
|
15
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
16
|
+
{{/components/button/link_button}}
|
|
10
17
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
18
|
+
<span class="sr-only">Zur Seite: </span>
|
|
11
19
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
12
20
|
{{/components/button/link_button}}
|
|
13
21
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -17,12 +25,20 @@
|
|
|
17
25
|
<div class="flex">
|
|
18
26
|
{{> components/pagination/pagination_button_left_linked }}
|
|
19
27
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
28
|
+
<span class="sr-only">Zur Seite: </span>
|
|
20
29
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
21
30
|
{{/components/button/link_button}}
|
|
22
|
-
{{
|
|
23
|
-
{{
|
|
24
|
-
|
|
31
|
+
{{#with this}}
|
|
32
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
33
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
34
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
35
|
+
{{/components/button/link_button}}
|
|
36
|
+
{{#*inline "htmlProperties"}}
|
|
37
|
+
aria-current="true"
|
|
38
|
+
{{/inline}}
|
|
39
|
+
{{/with}}
|
|
25
40
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
41
|
+
<span class="sr-only">Zur Seite: </span>
|
|
26
42
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
27
43
|
{{/components/button/link_button}}
|
|
28
44
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -31,14 +47,22 @@
|
|
|
31
47
|
<div class="flex">
|
|
32
48
|
{{> components/pagination/pagination_button_left_linked }}
|
|
33
49
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
34
|
-
|
|
50
|
+
<span class="sr-only">Zur Seite: </span>
|
|
51
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
35
52
|
{{/components/button/link_button}}
|
|
36
53
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastButOneItemLink _css="mr-1 ml-1"}}
|
|
37
|
-
|
|
54
|
+
<span class="sr-only">Zur Seite: </span>
|
|
55
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
38
56
|
{{/components/button/link_button}}
|
|
39
|
-
{{
|
|
40
|
-
|
|
41
|
-
|
|
57
|
+
{{#with this}}
|
|
58
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
59
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
60
|
+
{{> components/button/components/button_label _label="3" _css=""}}
|
|
61
|
+
{{/components/button/link_button}}
|
|
62
|
+
{{#*inline "htmlProperties"}}
|
|
63
|
+
aria-current="true"
|
|
64
|
+
{{/inline}}
|
|
65
|
+
{{/with}}
|
|
42
66
|
{{> components/pagination/pagination_button_right }}
|
|
43
67
|
</div>
|
|
44
68
|
{{~/if~}}
|
|
@@ -1,23 +1,37 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
8
|
+
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
13
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
14
|
+
<span class="sr-only">Zur Seite: </span>
|
|
8
15
|
{{> components/button/components/button_label _label="2" _css=""}}
|
|
9
|
-
{{/components/button/
|
|
16
|
+
{{/components/button/link_button}}
|
|
10
17
|
{{> components/pagination/pagination_button_right_linked }}
|
|
11
18
|
</div>
|
|
12
19
|
{{else}}
|
|
13
20
|
<div class="flex">
|
|
14
21
|
{{> components/pagination/pagination_button_left_linked }}
|
|
15
|
-
{{#> components/button/
|
|
22
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
23
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
24
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
17
|
-
{{/components/button/
|
|
18
|
-
{{
|
|
19
|
-
{{
|
|
20
|
-
|
|
25
|
+
{{/components/button/link_button}}
|
|
26
|
+
{{#with this}}
|
|
27
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
28
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
29
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
30
|
+
{{/components/button/link_button}}
|
|
31
|
+
{{#*inline "htmlProperties"}}
|
|
32
|
+
aria-current="true"
|
|
33
|
+
{{/inline}}
|
|
34
|
+
{{/with}}
|
|
21
35
|
{{> components/pagination/pagination_button_right }}
|
|
22
36
|
</div>
|
|
23
37
|
{{~/if~}}
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
6
6
|
<div class="sr-only">{{loca "label_top_thema"}}</div>
|
|
7
|
-
{{> components/button/components/button_label _label=this.text _css=""}}
|
|
7
|
+
{{> components/button/components/button_label _label=this.text _css="!leading-none"}}
|
|
8
8
|
{{/components/button/top_topics_button}}
|
|
9
9
|
</li>
|
|
10
10
|
{{/each}}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
31
31
|
</span>
|
|
32
32
|
{{/components/button/button}}
|
|
33
|
-
{{#*inline "
|
|
33
|
+
{{#*inline "htmlProperties"}}
|
|
34
34
|
x-ref="button"
|
|
35
35
|
x-on:click="toggle()"
|
|
36
36
|
:aria-expanded="open"
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
<div class="flex flex-wrap gap-y-3 justify-center mb-7 mx-1.5" role="tablist">
|
|
8
8
|
{{~#each this.tabbedGroup~}}
|
|
9
9
|
{{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
|
|
10
|
-
{{> components/button/components/button_label _label=this.title}}
|
|
10
|
+
{{> components/button/components/button_label _css="" _label=this.title}}
|
|
11
11
|
{{/components/button/button }}
|
|
12
|
-
{{#*inline "
|
|
12
|
+
{{#*inline "htmlProperties"~}}
|
|
13
13
|
:class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button--dark ":tab ==="{{this.title}}",
|
|
14
14
|
"{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}'
|
|
15
15
|
x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
|
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.
|
|
9
|
+
"version": "1.26.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -399,13 +399,13 @@ Button-Komponente als weitere Standard-HTML-Properties hinzugefügt wurden. Stat
|
|
|
399
399
|
zu übergeben.
|
|
400
400
|
|
|
401
401
|
```handlebars
|
|
402
|
-
<button class="ds-button" {{#>
|
|
402
|
+
<button class="ds-button" {{#> htmlProperties}}{{/htmlProperties}}>
|
|
403
403
|
{{> @partial-block }}
|
|
404
404
|
</button>
|
|
405
405
|
```
|
|
406
406
|
|
|
407
407
|
Das Beispiel zeigt eine vereinfachte (aus Gründen der Übersichtlichkeit wurden alle anderen HTML-Properties weggelassen)
|
|
408
|
-
Ansicht der Button-Komponente. Innerhalb des HTML-Button-Elements wird hier das Inline-Partial `
|
|
408
|
+
Ansicht der Button-Komponente. Innerhalb des HTML-Button-Elements wird hier das Inline-Partial `htmlProperties`
|
|
409
409
|
aufgerufen. Der Inhalt dieses Partials kann, wie im folgenden Codebeispiel zu sehen, gesetzt werden.
|
|
410
410
|
|
|
411
411
|
```handlebars
|
|
@@ -419,7 +419,7 @@ aufgerufen. Der Inhalt dieses Partials kann, wie im folgenden Codebeispiel zu se
|
|
|
419
419
|
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
420
420
|
</span>
|
|
421
421
|
{{/components/button/button}}
|
|
422
|
-
{{#*inline "
|
|
422
|
+
{{#*inline "htmlProperties"}}
|
|
423
423
|
x-ref="button"
|
|
424
424
|
x-on:click="toggle()"
|
|
425
425
|
:aria-expanded="open"
|
|
@@ -430,7 +430,7 @@ aufgerufen. Der Inhalt dieses Partials kann, wie im folgenden Codebeispiel zu se
|
|
|
430
430
|
{{/with}}
|
|
431
431
|
```
|
|
432
432
|
|
|
433
|
-
Unterhalb des Aufrufs der Button-Komponente wird hier das Inline-Partial `
|
|
433
|
+
Unterhalb des Aufrufs der Button-Komponente wird hier das Inline-Partial `htmlProperties` implementiert. Ein Inline-Partial
|
|
434
434
|
muss immer in der Form `{{#*inline NAME_DES_PARTIALS}}` aufgerufen werden. Alle Inhalte die zwischen öffnendem und schließenden
|
|
435
435
|
`inline` stehen, werden in der Komponente in der dieses Inline-Partial aufgerufen wird gerendert.
|
|
436
436
|
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
{{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
|
|
11
11
|
{{~#if _x-show}} x-show="{{_x-show}}"{{/if}}
|
|
12
12
|
{{~#if _noFocus}} tabindex="-1"{{/if}}
|
|
13
|
-
{{
|
|
13
|
+
{{~#if _disabled~}} disabled{{/if}}
|
|
14
|
+
{{#> htmlProperties}}{{/htmlProperties}}>
|
|
14
15
|
{{> @partial-block }}
|
|
15
16
|
</button>
|
|
@@ -162,7 +162,7 @@ Attribute gesetzt werden (z.B. zum Setzen von alpine.js Direktiven), muss dies w
|
|
|
162
162
|
{{#> components/button/button _size="lg"}}
|
|
163
163
|
{{> components/button/components/button_label _label="Button"}}
|
|
164
164
|
{{/components/button/button}}
|
|
165
|
-
{{#*inline "
|
|
165
|
+
{{#*inline "htmlProperties"}}
|
|
166
166
|
x-ref="button"
|
|
167
167
|
x-on:click="toggle()"
|
|
168
168
|
:aria-expanded="open"
|
|
@@ -172,7 +172,7 @@ Attribute gesetzt werden (z.B. zum Setzen von alpine.js Direktiven), muss dies w
|
|
|
172
172
|
{{/inline}}
|
|
173
173
|
```
|
|
174
174
|
|
|
175
|
-
Dem hier gerenderten HTML-Button werden mit Hilfe des Inline-Partials `
|
|
175
|
+
Dem hier gerenderten HTML-Button werden mit Hilfe des Inline-Partials `htmlProperties` die Attribute `x-ref`, `x-on`, `:aria-expanded`, `:aria-controls`, `:class`
|
|
176
176
|
sowie `data-hr-click-tracking` hinzugefügt.
|
|
177
177
|
|
|
178
178
|
#### Setzen von in Subkomponenten ausgelagerte CSS Klassen
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class='ds-button-label {{_css}}'>{{_label}}</span>
|
|
1
|
+
<span class='ds-button-label text-base {{_css}}'>{{_label}}</span>
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
{{~inline-switch
|
|
1
|
+
{{~inline-switch
|
|
2
|
+
_size
|
|
3
|
+
'["sm","md","lg"]'
|
|
4
|
+
'[" px-2 py-0.5 min-w-7 justify-center"," p-2 min-w-10 justify-center"," px-4 py-2.5 min-w-11 justify-center",""]'
|
|
5
|
+
~}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
{{#> components/button/
|
|
1
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="mr-1" _type="button"}}
|
|
2
2
|
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
|
-
{{/components/button/
|
|
3
|
+
{{/components/button/button}}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.previousItemLink _css="mr-1"}}
|
|
2
|
+
<span class="sr-only">Vorherige Seite</span>
|
|
2
3
|
{{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
|
|
3
4
|
{{/components/button/link_button}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{{#> components/button/
|
|
1
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
|
|
2
2
|
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
3
|
-
{{/components/button/
|
|
3
|
+
{{/components/button/button}}
|
|
4
4
|
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
8
|
+
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
7
13
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
8
14
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
9
16
|
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
10
17
|
{{/components/button/link_button}}
|
|
11
18
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -15,13 +22,21 @@
|
|
|
15
22
|
<div class="flex">
|
|
16
23
|
{{> components/pagination/pagination_button_left_linked }}
|
|
17
24
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
25
|
+
<span class="sr-only">Zur Seite: </span>
|
|
18
26
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
19
27
|
{{/components/button/link_button}}
|
|
20
|
-
{{
|
|
21
|
-
{{
|
|
22
|
-
|
|
28
|
+
{{#with this}}
|
|
29
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
30
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
31
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
32
|
+
{{/components/button/link_button}}
|
|
33
|
+
{{#*inline "htmlProperties"}}
|
|
34
|
+
aria-current="true"
|
|
35
|
+
{{/inline}}
|
|
36
|
+
{{/with}}
|
|
23
37
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
24
38
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
39
|
+
<span class="sr-only">Zur Seite: </span>
|
|
25
40
|
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
26
41
|
{{/components/button/link_button}}
|
|
27
42
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -30,17 +45,25 @@
|
|
|
30
45
|
<div class="flex">
|
|
31
46
|
{{> components/pagination/pagination_button_left_linked }}
|
|
32
47
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
48
|
+
<span class="sr-only">Zur Seite: </span>
|
|
33
49
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
34
50
|
{{/components/button/link_button}}
|
|
35
|
-
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
36
|
-
{{
|
|
37
|
-
{{
|
|
38
|
-
|
|
51
|
+
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
52
|
+
{{#with this}}
|
|
53
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
54
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
55
|
+
{{> components/button/components/button_label _label=_currentPage-adjust_context _css=""}}
|
|
56
|
+
{{/components/button/link_button}}
|
|
57
|
+
{{#*inline "htmlProperties"}}
|
|
58
|
+
aria-current="true"
|
|
59
|
+
{{/inline}}
|
|
60
|
+
{{/with}}
|
|
39
61
|
{{~#if _notLastPage~}}
|
|
40
62
|
{{~#if _notLastButOnePage~}}
|
|
41
63
|
<span class="pt-1 ml-2 mr-2 font-title">…</span>
|
|
42
64
|
{{~/if~}}
|
|
43
65
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
66
|
+
<span class="sr-only">Zur Seite: </span>
|
|
44
67
|
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
45
68
|
{{/components/button/link_button}}
|
|
46
69
|
{{~/if~}}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
{{> components/button/components/button_label _label="2" _css=""}}
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
9
8
|
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
13
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
|
|
14
|
+
<span class="sr-only">Zur Seite: </span>
|
|
15
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
16
|
+
{{/components/button/link_button}}
|
|
10
17
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
18
|
+
<span class="sr-only">Zur Seite: </span>
|
|
11
19
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
12
20
|
{{/components/button/link_button}}
|
|
13
21
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -17,12 +25,20 @@
|
|
|
17
25
|
<div class="flex">
|
|
18
26
|
{{> components/pagination/pagination_button_left_linked }}
|
|
19
27
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
28
|
+
<span class="sr-only">Zur Seite: </span>
|
|
20
29
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
21
30
|
{{/components/button/link_button}}
|
|
22
|
-
{{
|
|
23
|
-
{{
|
|
24
|
-
|
|
31
|
+
{{#with this}}
|
|
32
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
33
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
34
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
35
|
+
{{/components/button/link_button}}
|
|
36
|
+
{{#*inline "htmlProperties"}}
|
|
37
|
+
aria-current="true"
|
|
38
|
+
{{/inline}}
|
|
39
|
+
{{/with}}
|
|
25
40
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
41
|
+
<span class="sr-only">Zur Seite: </span>
|
|
26
42
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
27
43
|
{{/components/button/link_button}}
|
|
28
44
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -31,14 +47,22 @@
|
|
|
31
47
|
<div class="flex">
|
|
32
48
|
{{> components/pagination/pagination_button_left_linked }}
|
|
33
49
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
34
|
-
|
|
50
|
+
<span class="sr-only">Zur Seite: </span>
|
|
51
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
35
52
|
{{/components/button/link_button}}
|
|
36
53
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastButOneItemLink _css="mr-1 ml-1"}}
|
|
37
|
-
|
|
54
|
+
<span class="sr-only">Zur Seite: </span>
|
|
55
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
38
56
|
{{/components/button/link_button}}
|
|
39
|
-
{{
|
|
40
|
-
|
|
41
|
-
|
|
57
|
+
{{#with this}}
|
|
58
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
59
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
60
|
+
{{> components/button/components/button_label _label="3" _css=""}}
|
|
61
|
+
{{/components/button/link_button}}
|
|
62
|
+
{{#*inline "htmlProperties"}}
|
|
63
|
+
aria-current="true"
|
|
64
|
+
{{/inline}}
|
|
65
|
+
{{/with}}
|
|
42
66
|
{{> components/pagination/pagination_button_right }}
|
|
43
67
|
</div>
|
|
44
68
|
{{~/if~}}
|
|
@@ -1,23 +1,37 @@
|
|
|
1
1
|
{{~#if _firstPage~}}
|
|
2
2
|
<div class="flex">
|
|
3
3
|
{{> components/pagination/pagination_button_left }}
|
|
4
|
-
{{
|
|
5
|
-
{{
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
{{#with this}}
|
|
5
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
6
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
7
|
+
{{> components/button/components/button_label _label="1" _css=""}}
|
|
8
|
+
{{/components/button/link_button}}
|
|
9
|
+
{{#*inline "htmlProperties"}}
|
|
10
|
+
aria-current="true"
|
|
11
|
+
{{/inline}}
|
|
12
|
+
{{/with}}
|
|
13
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
14
|
+
<span class="sr-only">Zur Seite: </span>
|
|
8
15
|
{{> components/button/components/button_label _label="2" _css=""}}
|
|
9
|
-
{{/components/button/
|
|
16
|
+
{{/components/button/link_button}}
|
|
10
17
|
{{> components/pagination/pagination_button_right_linked }}
|
|
11
18
|
</div>
|
|
12
19
|
{{else}}
|
|
13
20
|
<div class="flex">
|
|
14
21
|
{{> components/pagination/pagination_button_left_linked }}
|
|
15
|
-
{{#> components/button/
|
|
22
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.firstPageItemLink _css="mr-1 ml-1"}}
|
|
23
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
24
|
{{> components/button/components/button_label _label="1" _css=""}}
|
|
17
|
-
{{/components/button/
|
|
18
|
-
{{
|
|
19
|
-
{{
|
|
20
|
-
|
|
25
|
+
{{/components/button/link_button}}
|
|
26
|
+
{{#with this}}
|
|
27
|
+
{{#> components/button/link_button _size="md" _variant="primary" _css="mr-1 ml-1"}}
|
|
28
|
+
<span class="sr-only">Aktuelle Seite: </span>
|
|
29
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
30
|
+
{{/components/button/link_button}}
|
|
31
|
+
{{#*inline "htmlProperties"}}
|
|
32
|
+
aria-current="true"
|
|
33
|
+
{{/inline}}
|
|
34
|
+
{{/with}}
|
|
21
35
|
{{> components/pagination/pagination_button_right }}
|
|
22
36
|
</div>
|
|
23
37
|
{{~/if~}}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
6
6
|
<div class="sr-only">{{loca "label_top_thema"}}</div>
|
|
7
|
-
{{> components/button/components/button_label _label=this.text _css=""}}
|
|
7
|
+
{{> components/button/components/button_label _label=this.text _css="!leading-none"}}
|
|
8
8
|
{{/components/button/top_topics_button}}
|
|
9
9
|
</li>
|
|
10
10
|
{{/each}}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
31
31
|
</span>
|
|
32
32
|
{{/components/button/button}}
|
|
33
|
-
{{#*inline "
|
|
33
|
+
{{#*inline "htmlProperties"}}
|
|
34
34
|
x-ref="button"
|
|
35
35
|
x-on:click="toggle()"
|
|
36
36
|
:aria-expanded="open"
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
<div class="flex flex-wrap gap-y-3 justify-center mb-7 mx-1.5" role="tablist">
|
|
8
8
|
{{~#each this.tabbedGroup~}}
|
|
9
9
|
{{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
|
|
10
|
-
{{> components/button/components/button_label _label=this.title}}
|
|
10
|
+
{{> components/button/components/button_label _css="" _label=this.title}}
|
|
11
11
|
{{/components/button/button }}
|
|
12
|
-
{{#*inline "
|
|
12
|
+
{{#*inline "htmlProperties"~}}
|
|
13
13
|
:class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button--dark ":tab ==="{{this.title}}",
|
|
14
14
|
"{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}'
|
|
15
15
|
x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
|
package/tailwind.config.js
CHANGED