hr-design-system-handlebars 1.102.1 → 1.102.3
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 +63 -6
- package/dist/views/components/forms/fields.hbs +8 -10
- package/dist/views/components/forms/select.hbs +8 -1
- package/dist/views/components/teaser/teaser_poster.hbs +12 -7
- package/dist/views_static/components/forms/fields.hbs +8 -10
- package/dist/views_static/components/forms/select.hbs +8 -1
- package/dist/views_static/components/teaser/teaser_poster.hbs +12 -7
- package/package.json +1 -1
- package/src/assets/fixtures/forms/form_fields.inc.json +8 -0
- package/src/assets/fixtures/forms/form_group.json +46 -0
- package/src/stories/views/components/forms/fields.hbs +8 -10
- package/src/stories/views/components/forms/fixtures/form_group.json +1 -0
- package/src/stories/views/components/forms/form_group.stories.js +34 -0
- package/src/stories/views/components/forms/select.hbs +8 -1
- package/src/stories/views/components/teaser/teaser_poster.hbs +12 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.102.3 (Tue Sep 24 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- modify Posterteaser [#1077](https://github.com/mumprod/hr-design-system-handlebars/pull/1077) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.102.2 (Tue Sep 24 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- ✨ Formulargruppen mit und ohne Überschriften [#1076](https://github.com/mumprod/hr-design-system-handlebars/pull/1076) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.102.1 (Tue Sep 24 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1136,6 +1136,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1136
1136
|
.right-0 {
|
|
1137
1137
|
right: 0px;
|
|
1138
1138
|
}
|
|
1139
|
+
.right-14 {
|
|
1140
|
+
right: 3.5rem;
|
|
1141
|
+
}
|
|
1139
1142
|
.right-4 {
|
|
1140
1143
|
right: 1rem;
|
|
1141
1144
|
}
|
|
@@ -1390,9 +1393,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1390
1393
|
.-mt-6 {
|
|
1391
1394
|
margin-top: -1.5rem;
|
|
1392
1395
|
}
|
|
1393
|
-
.-mt-8 {
|
|
1394
|
-
margin-top: -2rem;
|
|
1395
|
-
}
|
|
1396
1396
|
.-mt-\[33px\] {
|
|
1397
1397
|
margin-top: -33px;
|
|
1398
1398
|
}
|
|
@@ -2652,6 +2652,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2652
2652
|
--tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
|
|
2653
2653
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
2654
2654
|
}
|
|
2655
|
+
.to-80\% {
|
|
2656
|
+
--tw-gradient-to-position: 80%;
|
|
2657
|
+
}
|
|
2655
2658
|
.fill-\[\#006dc1\] {
|
|
2656
2659
|
fill: #006dc1;
|
|
2657
2660
|
}
|
|
@@ -2850,6 +2853,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2850
2853
|
.pb-10 {
|
|
2851
2854
|
padding-bottom: 2.5rem;
|
|
2852
2855
|
}
|
|
2856
|
+
.pb-16 {
|
|
2857
|
+
padding-bottom: 4rem;
|
|
2858
|
+
}
|
|
2853
2859
|
.pb-2 {
|
|
2854
2860
|
padding-bottom: 0.5rem;
|
|
2855
2861
|
}
|
|
@@ -2874,6 +2880,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2874
2880
|
.pb-9 {
|
|
2875
2881
|
padding-bottom: 2.25rem;
|
|
2876
2882
|
}
|
|
2883
|
+
.pb-\[70px\] {
|
|
2884
|
+
padding-bottom: 70px;
|
|
2885
|
+
}
|
|
2877
2886
|
.pb-footer-padding-bottom {
|
|
2878
2887
|
padding-bottom: 16px;
|
|
2879
2888
|
padding-bottom: var(--footer-padding-bottom);
|
|
@@ -3483,7 +3492,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3483
3492
|
border-bottom-color: var(--color-secondary-ds);
|
|
3484
3493
|
}
|
|
3485
3494
|
.counter-reset {
|
|
3486
|
-
counter-reset:
|
|
3495
|
+
counter-reset: cnt1727189191460;
|
|
3487
3496
|
}
|
|
3488
3497
|
.hyphens-auto {
|
|
3489
3498
|
-webkit-hyphens: auto;
|
|
@@ -3891,7 +3900,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3891
3900
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3892
3901
|
}
|
|
3893
3902
|
.-ordered {
|
|
3894
|
-
counter-increment:
|
|
3903
|
+
counter-increment: cnt1727189191460 1;
|
|
3895
3904
|
}
|
|
3896
3905
|
.-ordered::before {
|
|
3897
3906
|
position: absolute;
|
|
@@ -3907,7 +3916,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3907
3916
|
letter-spacing: .0125em;
|
|
3908
3917
|
--tw-text-opacity: 1;
|
|
3909
3918
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3910
|
-
content: counter(
|
|
3919
|
+
content: counter(cnt1727189191460);
|
|
3911
3920
|
}
|
|
3912
3921
|
/*! ****************************/
|
|
3913
3922
|
/*! DataPolicy stuff */
|
|
@@ -6343,6 +6352,14 @@ input[type="checkbox"]:checked::after {
|
|
|
6343
6352
|
width: 2rem;
|
|
6344
6353
|
}
|
|
6345
6354
|
|
|
6355
|
+
.sm480\:pb-24 {
|
|
6356
|
+
padding-bottom: 6rem;
|
|
6357
|
+
}
|
|
6358
|
+
|
|
6359
|
+
.sm480\:pb-\[86px\] {
|
|
6360
|
+
padding-bottom: 86px;
|
|
6361
|
+
}
|
|
6362
|
+
|
|
6346
6363
|
.sm480\:align-top {
|
|
6347
6364
|
vertical-align: top;
|
|
6348
6365
|
}
|
|
@@ -6536,10 +6553,18 @@ input[type="checkbox"]:checked::after {
|
|
|
6536
6553
|
margin-bottom: 3.5rem;
|
|
6537
6554
|
}
|
|
6538
6555
|
|
|
6556
|
+
.sm\:mb-3 {
|
|
6557
|
+
margin-bottom: 0.75rem;
|
|
6558
|
+
}
|
|
6559
|
+
|
|
6539
6560
|
.sm\:mb-5 {
|
|
6540
6561
|
margin-bottom: 1.25rem;
|
|
6541
6562
|
}
|
|
6542
6563
|
|
|
6564
|
+
.sm\:mb-7 {
|
|
6565
|
+
margin-bottom: 1.75rem;
|
|
6566
|
+
}
|
|
6567
|
+
|
|
6543
6568
|
.sm\:mb-8 {
|
|
6544
6569
|
margin-bottom: 2rem;
|
|
6545
6570
|
}
|
|
@@ -6731,10 +6756,22 @@ input[type="checkbox"]:checked::after {
|
|
|
6731
6756
|
padding-bottom: 0px;
|
|
6732
6757
|
}
|
|
6733
6758
|
|
|
6759
|
+
.sm\:pb-16 {
|
|
6760
|
+
padding-bottom: 4rem;
|
|
6761
|
+
}
|
|
6762
|
+
|
|
6734
6763
|
.sm\:pb-2 {
|
|
6735
6764
|
padding-bottom: 0.5rem;
|
|
6736
6765
|
}
|
|
6737
6766
|
|
|
6767
|
+
.sm\:pb-24 {
|
|
6768
|
+
padding-bottom: 6rem;
|
|
6769
|
+
}
|
|
6770
|
+
|
|
6771
|
+
.sm\:pb-\[86px\] {
|
|
6772
|
+
padding-bottom: 86px;
|
|
6773
|
+
}
|
|
6774
|
+
|
|
6738
6775
|
.sm\:pl-0 {
|
|
6739
6776
|
padding-left: 0px;
|
|
6740
6777
|
}
|
|
@@ -7274,6 +7311,22 @@ input[type="checkbox"]:checked::after {
|
|
|
7274
7311
|
padding-bottom: 1.75rem;
|
|
7275
7312
|
}
|
|
7276
7313
|
|
|
7314
|
+
.md\:pb-16 {
|
|
7315
|
+
padding-bottom: 4rem;
|
|
7316
|
+
}
|
|
7317
|
+
|
|
7318
|
+
.md\:pb-24 {
|
|
7319
|
+
padding-bottom: 6rem;
|
|
7320
|
+
}
|
|
7321
|
+
|
|
7322
|
+
.md\:pb-32 {
|
|
7323
|
+
padding-bottom: 8rem;
|
|
7324
|
+
}
|
|
7325
|
+
|
|
7326
|
+
.md\:pb-\[70px\] {
|
|
7327
|
+
padding-bottom: 70px;
|
|
7328
|
+
}
|
|
7329
|
+
|
|
7277
7330
|
.md\:pl-0 {
|
|
7278
7331
|
padding-left: 0px;
|
|
7279
7332
|
}
|
|
@@ -7345,6 +7398,10 @@ input[type="checkbox"]:checked::after {
|
|
|
7345
7398
|
line-height: 1.6875rem;
|
|
7346
7399
|
}
|
|
7347
7400
|
|
|
7401
|
+
.md\:leading-10 {
|
|
7402
|
+
line-height: 2.5rem;
|
|
7403
|
+
}
|
|
7404
|
+
|
|
7348
7405
|
.md\:leading-4 {
|
|
7349
7406
|
line-height: 1rem;
|
|
7350
7407
|
}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
|
|
15
15
|
{{/if}}
|
|
16
16
|
</figure>
|
|
17
|
-
<div class="absolute flex flex-col justify-
|
|
17
|
+
<div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
|
|
18
18
|
{{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}}
|
|
19
|
-
<div class="
|
|
19
|
+
<div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
|
|
20
20
|
{{#> components/teaser/components/teaser_header _css="text-center"}}
|
|
21
21
|
{{#with this.label}}
|
|
22
22
|
{{#> components/label/label_group}}
|
|
@@ -24,11 +24,15 @@
|
|
|
24
24
|
<span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
|
|
25
25
|
{{/components/label/label_group}}
|
|
26
26
|
{{/with~}}
|
|
27
|
-
{{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white
|
|
27
|
+
{{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
|
|
28
28
|
{{#if this.topline}}
|
|
29
29
|
{{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
|
|
30
30
|
{{/if}}
|
|
31
|
-
{{
|
|
31
|
+
{{#if ../../_isCopytext-adjust_context}}
|
|
32
|
+
{{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
|
|
33
|
+
{{else}}
|
|
34
|
+
{{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
|
|
35
|
+
{{/if}}
|
|
32
36
|
{{#if this.extendedTitle}}
|
|
33
37
|
{{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
|
|
34
38
|
{{/if}}
|
|
@@ -36,10 +40,11 @@
|
|
|
36
40
|
{{/components/teaser/components/teaser_header}}
|
|
37
41
|
</div>
|
|
38
42
|
{{/components/base/link}}
|
|
43
|
+
</div>
|
|
39
44
|
<span class="absolute flex items-end justify-center w-full h-full ds-cta">
|
|
40
45
|
{{#if _isCopytext~}}
|
|
41
46
|
{{#if this.showFullSize.isTrue~}}
|
|
42
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7
|
|
47
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
43
48
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
44
49
|
{{/components/button/link_button}}
|
|
45
50
|
{{else}}
|
|
@@ -48,10 +53,10 @@
|
|
|
48
53
|
{{/components/button/link_button}}
|
|
49
54
|
{{/if}}
|
|
50
55
|
{{else}}
|
|
51
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-
|
|
56
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
52
57
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
53
58
|
{{/components/button/link_button}}
|
|
54
59
|
{{/if}}
|
|
55
60
|
</span>
|
|
56
|
-
|
|
61
|
+
|
|
57
62
|
</article>
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
|
|
15
15
|
{{/if}}
|
|
16
16
|
</figure>
|
|
17
|
-
<div class="absolute flex flex-col justify-
|
|
17
|
+
<div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
|
|
18
18
|
{{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}}
|
|
19
|
-
<div class="
|
|
19
|
+
<div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
|
|
20
20
|
{{#> components/teaser/components/teaser_header _css="text-center"}}
|
|
21
21
|
{{#with this.label}}
|
|
22
22
|
{{#> components/label/label_group}}
|
|
@@ -24,11 +24,15 @@
|
|
|
24
24
|
<span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
|
|
25
25
|
{{/components/label/label_group}}
|
|
26
26
|
{{/with~}}
|
|
27
|
-
{{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white
|
|
27
|
+
{{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
|
|
28
28
|
{{#if this.topline}}
|
|
29
29
|
{{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
|
|
30
30
|
{{/if}}
|
|
31
|
-
{{
|
|
31
|
+
{{#if _isCopytext}}
|
|
32
|
+
{{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
|
|
33
|
+
{{else}}
|
|
34
|
+
{{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
|
|
35
|
+
{{/if}}
|
|
32
36
|
{{#if this.extendedTitle}}
|
|
33
37
|
{{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
|
|
34
38
|
{{/if}}
|
|
@@ -36,10 +40,11 @@
|
|
|
36
40
|
{{/components/teaser/components/teaser_header}}
|
|
37
41
|
</div>
|
|
38
42
|
{{/components/base/link}}
|
|
43
|
+
</div>
|
|
39
44
|
<span class="absolute flex items-end justify-center w-full h-full ds-cta">
|
|
40
45
|
{{#if _isCopytext~}}
|
|
41
46
|
{{#if this.showFullSize.isTrue~}}
|
|
42
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7
|
|
47
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
43
48
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
44
49
|
{{/components/button/link_button}}
|
|
45
50
|
{{else}}
|
|
@@ -48,10 +53,10 @@
|
|
|
48
53
|
{{/components/button/link_button}}
|
|
49
54
|
{{/if}}
|
|
50
55
|
{{else}}
|
|
51
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-
|
|
56
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
52
57
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
53
58
|
{{/components/button/link_button}}
|
|
54
59
|
{{/if}}
|
|
55
60
|
</span>
|
|
56
|
-
|
|
61
|
+
|
|
57
62
|
</article>
|
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.102.
|
|
9
|
+
"version": "1.102.3",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"fields":[
|
|
3
|
+
{
|
|
4
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
5
|
+
"@->contentpath": "group",
|
|
6
|
+
"@->overrides": [
|
|
7
|
+
{
|
|
8
|
+
"@->contentpath": "fields",
|
|
9
|
+
"@->value": [
|
|
10
|
+
{
|
|
11
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
12
|
+
"@->contentpath": "input-text-vorname-required"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
16
|
+
"@->contentpath": "input-text-nachname-required"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
24
|
+
"@->contentpath": "group",
|
|
25
|
+
"@->overrides": [
|
|
26
|
+
{
|
|
27
|
+
"@->contentpath": "fields",
|
|
28
|
+
"@->value": [
|
|
29
|
+
{
|
|
30
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
31
|
+
"@->contentpath": "input-text-vorname-required"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
35
|
+
"@->contentpath": "input-text-nachname-required"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"@->contentpath": "caption",
|
|
41
|
+
"@->value": "Noch eine Gruppe mit einer anderen Überschrift"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
{{#each this.fields}}
|
|
2
2
|
{{#if this.type.isGroup}}
|
|
3
3
|
|
|
4
|
-
{{#if this.caption}}
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{~> modules/forms/fields}}
|
|
10
|
-
</div>
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<fieldset>
|
|
6
|
+
<legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
|
|
7
|
+
{{~> components/forms/fields}}
|
|
8
|
+
</fieldset>
|
|
11
9
|
{{else}}
|
|
12
|
-
<
|
|
13
|
-
{{~>
|
|
14
|
-
</
|
|
10
|
+
<fieldset>
|
|
11
|
+
{{~> components/forms/fields}}
|
|
12
|
+
</fieldset>
|
|
15
13
|
{{/if}}
|
|
16
14
|
|
|
17
15
|
{{else}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"type":{"isGroup":true,"asString":"group"},"caption":"Eine Gruppe mit Überschrift","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]},{"type":{"isGroup":true,"asString":"group"},"caption":"Noch eine Gruppe mit einer anderen Überschrift","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
import groupJson from './fixtures/form_group.json'
|
|
3
|
+
|
|
4
|
+
const handlebars = require('hrHandlebars')
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Komponenten/Formulare',
|
|
9
|
+
decorators: [
|
|
10
|
+
(Story) => {
|
|
11
|
+
return `<div class="grid grid-page">
|
|
12
|
+
<div class="grid bg-white grid-article">
|
|
13
|
+
${Story()}
|
|
14
|
+
</div>
|
|
15
|
+
</div>`
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
}
|
|
19
|
+
const Template = (args) => {
|
|
20
|
+
let hbsTemplate = handlebars.compile(`
|
|
21
|
+
{{#>components/forms/backgroundBox }}
|
|
22
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
23
|
+
{{> components/forms/fields }}
|
|
24
|
+
</form>
|
|
25
|
+
{{/components/forms/backgroundBox }}
|
|
26
|
+
`)
|
|
27
|
+
return hbsTemplate({ ...args })
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const Gruppe = {
|
|
31
|
+
render: Template.bind({}),
|
|
32
|
+
name: 'Gruppe',
|
|
33
|
+
args: groupJson,
|
|
34
|
+
}
|
|
@@ -43,9 +43,16 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
+
{{#if _required}}
|
|
47
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
49
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
{{/if}}
|
|
46
53
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
47
54
|
{{#if _description}}
|
|
48
|
-
<div class="pl-4 text-xs text-gray-500
|
|
55
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
49
56
|
{{/if}}
|
|
50
57
|
{{#if _required}}
|
|
51
58
|
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
|
|
15
15
|
{{/if}}
|
|
16
16
|
</figure>
|
|
17
|
-
<div class="absolute flex flex-col justify-
|
|
17
|
+
<div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% from-black rounded-tl-hr rounded-br-hr">
|
|
18
18
|
{{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}}
|
|
19
|
-
<div class="
|
|
19
|
+
<div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
|
|
20
20
|
{{#> components/teaser/components/teaser_header _css="text-center"}}
|
|
21
21
|
{{#with this.label}}
|
|
22
22
|
{{#> components/label/label_group}}
|
|
@@ -24,11 +24,15 @@
|
|
|
24
24
|
<span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
|
|
25
25
|
{{/components/label/label_group}}
|
|
26
26
|
{{/with~}}
|
|
27
|
-
{{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white
|
|
27
|
+
{{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
|
|
28
28
|
{{#if this.topline}}
|
|
29
29
|
{{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
|
|
30
30
|
{{/if}}
|
|
31
|
-
{{
|
|
31
|
+
{{#if _isCopytext-adjust_context}}
|
|
32
|
+
{{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
|
|
33
|
+
{{else}}
|
|
34
|
+
{{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
|
|
35
|
+
{{/if}}
|
|
32
36
|
{{#if this.extendedTitle}}
|
|
33
37
|
{{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
|
|
34
38
|
{{/if}}
|
|
@@ -36,10 +40,11 @@
|
|
|
36
40
|
{{/components/teaser/components/teaser_header}}
|
|
37
41
|
</div>
|
|
38
42
|
{{/components/base/link}}
|
|
43
|
+
</div>
|
|
39
44
|
<span class="absolute flex items-end justify-center w-full h-full ds-cta">
|
|
40
45
|
{{#if _isCopytext~}}
|
|
41
46
|
{{#if this.showFullSize.isTrue~}}
|
|
42
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7
|
|
47
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
43
48
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
44
49
|
{{/components/button/link_button}}
|
|
45
50
|
{{else}}
|
|
@@ -48,10 +53,10 @@
|
|
|
48
53
|
{{/components/button/link_button}}
|
|
49
54
|
{{/if}}
|
|
50
55
|
{{else}}
|
|
51
|
-
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-
|
|
56
|
+
{{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
|
|
52
57
|
{{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
|
|
53
58
|
{{/components/button/link_button}}
|
|
54
59
|
{{/if}}
|
|
55
60
|
</span>
|
|
56
|
-
|
|
61
|
+
|
|
57
62
|
</article>
|