hr-design-system-handlebars 1.25.0 → 1.25.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 +3 -3
- package/dist/views/components/button/button.hbs +2 -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/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
- 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/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/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.25.1 (Tue May 23 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE 2327 - Paging bei 2 Unterseiten funktioniert nicht [#644](https://github.com/mumprod/hr-design-system-handlebars/pull/644) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.25.0 (Tue May 23 2023)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -2729,7 +2729,7 @@ video {
|
|
|
2729
2729
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2730
2730
|
}
|
|
2731
2731
|
.counter-reset {
|
|
2732
|
-
counter-reset:
|
|
2732
|
+
counter-reset: cnt1684849265448;
|
|
2733
2733
|
}
|
|
2734
2734
|
.hyphens-auto {
|
|
2735
2735
|
-webkit-hyphens: auto;
|
|
@@ -2965,7 +2965,7 @@ video {
|
|
|
2965
2965
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2966
2966
|
}
|
|
2967
2967
|
.-ordered {
|
|
2968
|
-
counter-increment:
|
|
2968
|
+
counter-increment: cnt1684849265448 1;
|
|
2969
2969
|
}
|
|
2970
2970
|
.-ordered::before {
|
|
2971
2971
|
position: absolute;
|
|
@@ -2981,7 +2981,7 @@ video {
|
|
|
2981
2981
|
letter-spacing: .0125em;
|
|
2982
2982
|
--tw-text-opacity: 1;
|
|
2983
2983
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2984
|
-
content: counter(
|
|
2984
|
+
content: counter(cnt1684849265448);
|
|
2985
2985
|
}
|
|
2986
2986
|
/*! ****************************/
|
|
2987
2987
|
/*! 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,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~}}
|
|
@@ -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"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
|
|
10
10
|
{{> components/button/components/button_label _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.25.
|
|
9
|
+
"version": "1.25.1",
|
|
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,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~}}
|
|
@@ -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"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
|
|
10
10
|
{{> components/button/components/button_label _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"}]}'
|