hr-design-system-handlebars 1.59.8 → 1.59.10
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 +27 -29
- package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
- package/dist/views/components/content/copytext/components/filedownload.hbs +2 -2
- package/dist/views/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/dist/views/components/content/copytext/components/image/figure.hbs +1 -1
- package/dist/views/components/content/copytext/components/image/image.hbs +8 -4
- package/dist/views/components/content/copytext/components/infobox.hbs +6 -6
- package/dist/views/components/page/base/page_header.hbs +16 -0
- package/dist/views/components/page/base/page_wrapper.hbs +4 -2
- package/dist/views/components/page/story/story_article.hbs +4 -4
- package/dist/views/components/program_supplier/program_supplier.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
- package/dist/views_static/components/content/copytext/components/filedownload.hbs +2 -2
- package/dist/views_static/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/image/figure.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/image/image.hbs +8 -4
- package/dist/views_static/components/content/copytext/components/infobox.hbs +6 -6
- package/dist/views_static/components/page/base/page_header.hbs +16 -0
- package/dist/views_static/components/page/base/page_wrapper.hbs +4 -2
- package/dist/views_static/components/page/story/story_article.hbs +4 -4
- package/dist/views_static/components/program_supplier/program_supplier.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +3 -3
- package/src/assets/fixtures/page/story/story_with_label.json +15 -0
- package/src/assets/fixtures/teaser/teaser_labels.inc.json +4 -0
- package/src/assets/tailwind.css +6 -0
- package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
- package/src/stories/views/components/content/copytext/components/filedownload.hbs +2 -2
- package/src/stories/views/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/src/stories/views/components/content/copytext/components/image/figure.hbs +1 -1
- package/src/stories/views/components/content/copytext/components/image/image.hbs +8 -4
- package/src/stories/views/components/content/copytext/components/infobox.hbs +6 -6
- package/src/stories/views/components/page/base/page_header.hbs +16 -0
- package/src/stories/views/components/page/base/page_wrapper.hbs +4 -2
- package/src/stories/views/components/page/story/fixtures/story_with_label.json +1 -0
- package/src/stories/views/components/page/story/story_article.hbs +4 -4
- package/src/stories/views/components/page/story/story_main.stories.js +14 -4
- package/src/stories/views/components/program_supplier/program_supplier.hbs +1 -1
- package/src/stories/views/components/teaser/cluster/teaser_cluster.stories.js +3 -0
- package/src/stories/views/components/teaser/group_teaser/group.stories.js +3 -0
- package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.js +2 -2
- package/src/stories/views/components/teaser/teaser_alternativ_av.stories.js +1 -0
- package/src/stories/views/components/teaser/teaser_event_calendar.stories.js +3 -0
- package/src/stories/views/components/teaser/teaser_indextext.stories.js +3 -0
- package/src/stories/views/components/teaser/teaser_logic/teaser_logic.stories.js +3 -0
- package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.stories.js +3 -0
- package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.stories.js +3 -0
- package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.59.10 (Mon Feb 26 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- :sparkles: DPE 2722 [#851](https://github.com/mumprod/hr-design-system-handlebars/pull/851) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.59.9 (Mon Feb 26 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Adjust grid behaviour of full width image [#862](https://github.com/mumprod/hr-design-system-handlebars/pull/862) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.59.8 (Fri Feb 23 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1153,14 +1153,6 @@ article.indexText ul {
|
|
|
1153
1153
|
.m-4 {
|
|
1154
1154
|
margin: 1rem;
|
|
1155
1155
|
}
|
|
1156
|
-
.\!mx-0 {
|
|
1157
|
-
margin-left: 0px !important;
|
|
1158
|
-
margin-right: 0px !important;
|
|
1159
|
-
}
|
|
1160
|
-
.-mx-4 {
|
|
1161
|
-
margin-left: -1rem;
|
|
1162
|
-
margin-right: -1rem;
|
|
1163
|
-
}
|
|
1164
1156
|
.mx-0 {
|
|
1165
1157
|
margin-left: 0px;
|
|
1166
1158
|
margin-right: 0px;
|
|
@@ -1197,6 +1189,10 @@ article.indexText ul {
|
|
|
1197
1189
|
margin-left: 1px;
|
|
1198
1190
|
margin-right: 1px;
|
|
1199
1191
|
}
|
|
1192
|
+
.my-0 {
|
|
1193
|
+
margin-top: 0px;
|
|
1194
|
+
margin-bottom: 0px;
|
|
1195
|
+
}
|
|
1200
1196
|
.my-12 {
|
|
1201
1197
|
margin-top: 3rem;
|
|
1202
1198
|
margin-bottom: 3rem;
|
|
@@ -1229,18 +1225,9 @@ article.indexText ul {
|
|
|
1229
1225
|
margin-top: 1.75rem;
|
|
1230
1226
|
margin-bottom: 1.75rem;
|
|
1231
1227
|
}
|
|
1232
|
-
.\!mb-0 {
|
|
1233
|
-
margin-bottom: 0px !important;
|
|
1234
|
-
}
|
|
1235
|
-
.\!mt-0 {
|
|
1236
|
-
margin-top: 0px !important;
|
|
1237
|
-
}
|
|
1238
1228
|
.\!mt-4 {
|
|
1239
1229
|
margin-top: 1rem !important;
|
|
1240
1230
|
}
|
|
1241
|
-
.\!mt-5 {
|
|
1242
|
-
margin-top: 1.25rem !important;
|
|
1243
|
-
}
|
|
1244
1231
|
.-mb-1 {
|
|
1245
1232
|
margin-bottom: -0.25rem;
|
|
1246
1233
|
}
|
|
@@ -1403,6 +1390,9 @@ article.indexText ul {
|
|
|
1403
1390
|
.mt-4\.5 {
|
|
1404
1391
|
margin-top: 1.125rem;
|
|
1405
1392
|
}
|
|
1393
|
+
.mt-5 {
|
|
1394
|
+
margin-top: 1.25rem;
|
|
1395
|
+
}
|
|
1406
1396
|
.mt-6 {
|
|
1407
1397
|
margin-top: 1.5rem;
|
|
1408
1398
|
}
|
|
@@ -3254,7 +3244,7 @@ article.indexText ul {
|
|
|
3254
3244
|
border-bottom-color: var(--color-secondary-ds);
|
|
3255
3245
|
}
|
|
3256
3246
|
.counter-reset {
|
|
3257
|
-
counter-reset:
|
|
3247
|
+
counter-reset: cnt1708967595192;
|
|
3258
3248
|
}
|
|
3259
3249
|
.hyphens-auto {
|
|
3260
3250
|
-webkit-hyphens: auto;
|
|
@@ -3375,8 +3365,8 @@ article.indexText ul {
|
|
|
3375
3365
|
}
|
|
3376
3366
|
.grid-article {
|
|
3377
3367
|
--mobile-padding: 1.25rem;
|
|
3378
|
-
--desktop-padding:
|
|
3379
|
-
--narrow-max-width:
|
|
3368
|
+
--desktop-padding: 2.5rem;
|
|
3369
|
+
--narrow-max-width: calc(var(--breakpoint-md) - (var(--mobile-padding) * 2));
|
|
3380
3370
|
--content-max-width: 940px;
|
|
3381
3371
|
--breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
|
|
3382
3372
|
|
|
@@ -3391,8 +3381,8 @@ article.indexText ul {
|
|
|
3391
3381
|
.grid-article > :not(.article-breakout):not(.article-full-width){
|
|
3392
3382
|
grid-column: narrow;
|
|
3393
3383
|
}
|
|
3394
|
-
.article-
|
|
3395
|
-
grid-column:
|
|
3384
|
+
.article-full-width {
|
|
3385
|
+
grid-column: full-width;
|
|
3396
3386
|
}
|
|
3397
3387
|
.grid-content {
|
|
3398
3388
|
grid-template-areas:
|
|
@@ -3577,7 +3567,7 @@ article.indexText ul {
|
|
|
3577
3567
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3578
3568
|
}
|
|
3579
3569
|
.-ordered {
|
|
3580
|
-
counter-increment:
|
|
3570
|
+
counter-increment: cnt1708967595192 1;
|
|
3581
3571
|
}
|
|
3582
3572
|
.-ordered::before {
|
|
3583
3573
|
position: absolute;
|
|
@@ -3593,7 +3583,7 @@ article.indexText ul {
|
|
|
3593
3583
|
letter-spacing: .0125em;
|
|
3594
3584
|
--tw-text-opacity: 1;
|
|
3595
3585
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3596
|
-
content: counter(
|
|
3586
|
+
content: counter(cnt1708967595192);
|
|
3597
3587
|
}
|
|
3598
3588
|
/*! ****************************/
|
|
3599
3589
|
/*! DataPolicy stuff */
|
|
@@ -3698,6 +3688,12 @@ article.indexText ul {
|
|
|
3698
3688
|
/*! purgecss start ignore */
|
|
3699
3689
|
:root,
|
|
3700
3690
|
[data-theme='default'] {
|
|
3691
|
+
--breakpoint-xs: 360px;
|
|
3692
|
+
--breakpoint-sm480: 480px;
|
|
3693
|
+
--breakpoint-sm: 640px;
|
|
3694
|
+
--breakpoint-md: 768px;
|
|
3695
|
+
--breakpoint-lg: 1024px;
|
|
3696
|
+
|
|
3701
3697
|
--color-primary-ds: #005293;
|
|
3702
3698
|
--color-secondary-ds: #606060;
|
|
3703
3699
|
--color-highlight-1: #eaf3fa;
|
|
@@ -5420,11 +5416,6 @@ article.indexText ul {
|
|
|
5420
5416
|
float: left;
|
|
5421
5417
|
}
|
|
5422
5418
|
|
|
5423
|
-
.sm480\:mx-0 {
|
|
5424
|
-
margin-left: 0px;
|
|
5425
|
-
margin-right: 0px;
|
|
5426
|
-
}
|
|
5427
|
-
|
|
5428
5419
|
.sm480\:mx-10 {
|
|
5429
5420
|
margin-left: 2.5rem;
|
|
5430
5421
|
margin-right: 2.5rem;
|
|
@@ -5468,6 +5459,10 @@ article.indexText ul {
|
|
|
5468
5459
|
margin-top: 1.375rem;
|
|
5469
5460
|
}
|
|
5470
5461
|
|
|
5462
|
+
.sm480\:mt-7 {
|
|
5463
|
+
margin-top: 1.75rem;
|
|
5464
|
+
}
|
|
5465
|
+
|
|
5471
5466
|
.sm480\:h-5 {
|
|
5472
5467
|
height: 1.25rem;
|
|
5473
5468
|
}
|
|
@@ -6600,6 +6595,9 @@ article.indexText ul {
|
|
|
6600
6595
|
clear: both;
|
|
6601
6596
|
}
|
|
6602
6597
|
}
|
|
6598
|
+
.md\:article-breakout {
|
|
6599
|
+
grid-column: content;
|
|
6600
|
+
}
|
|
6603
6601
|
|
|
6604
6602
|
.md\:col-main {
|
|
6605
6603
|
grid-column: main;
|
package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
_isWebview=../../_isWebview}}
|
|
21
21
|
{{else}}
|
|
22
22
|
{{> components/content/copytext/components/image/figure
|
|
23
|
-
_cssClass="
|
|
24
|
-
_cssClassCaption="
|
|
23
|
+
_cssClass="mt-5 mb-0"
|
|
24
|
+
_cssClassCaption=""
|
|
25
25
|
_type="story"
|
|
26
26
|
_variant="100-copytext"
|
|
27
27
|
_pictureAddClass="ar-16-9"
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
{{/with}}
|
|
23
23
|
{{~#with this.teaseritem }}
|
|
24
24
|
{{> components/content/copytext/components/image/figure
|
|
25
|
-
_cssClass="
|
|
26
|
-
_cssClassCaption="
|
|
25
|
+
_cssClass="mt-5 mb-0"
|
|
26
|
+
_cssClassCaption=""
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext"
|
|
29
29
|
_pictureAddClass="ar-16-9"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figcaption class="flex items-start
|
|
1
|
+
<figcaption class="flex items-start mt-3 text-xs sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
|
|
2
2
|
x-data="{
|
|
3
3
|
open: false,
|
|
4
4
|
truncated: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative
|
|
1
|
+
<figure class="relative{{#if _cssClass}} {{_cssClass}}{{/if}}">
|
|
2
2
|
{{#if _noAr }}
|
|
3
3
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
|
|
4
4
|
{{else}}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{{#if this.showPortrait.isTrue }}
|
|
2
2
|
{{#if this.showFullSize.isTrue }}
|
|
3
3
|
{{> components/content/copytext/components/image/figure
|
|
4
|
-
_cssClass="clear-both"
|
|
4
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
5
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
5
6
|
_type="story"
|
|
6
7
|
_variant="100-copytext-portrait"
|
|
7
8
|
_noAr="true"
|
|
8
9
|
_isWebview=../../_isWebview}}
|
|
9
10
|
{{else}}
|
|
10
11
|
{{> components/content/copytext/components/image/figure
|
|
11
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
12
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
13
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
12
14
|
_type="story"
|
|
13
15
|
_variant="copytext-portrait"
|
|
14
16
|
_noAr="true"
|
|
@@ -17,14 +19,16 @@
|
|
|
17
19
|
{{else}}
|
|
18
20
|
{{#if this.showFullSize.isTrue}}
|
|
19
21
|
{{> components/content/copytext/components/image/figure
|
|
20
|
-
_cssClass="clear-both"
|
|
22
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
23
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
21
24
|
_type="story"
|
|
22
25
|
_variant="100-copytext"
|
|
23
26
|
_pictureAddClass="ar-16-9"
|
|
24
27
|
_isWebview=../../_isWebview}}
|
|
25
28
|
{{else}}
|
|
26
29
|
{{> components/content/copytext/components/image/figure
|
|
27
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
30
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
31
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
28
32
|
_type="story"
|
|
29
33
|
_variant="copytext"
|
|
30
34
|
_pictureAddClass="ar-16-9"
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
{{#if this.showPortrait.isTrue }}
|
|
17
17
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
18
18
|
{{> components/content/copytext/components/image/figure
|
|
19
|
-
_cssClass="
|
|
19
|
+
_cssClass="mt-5 mb-0"
|
|
20
20
|
_type="story"
|
|
21
21
|
_variant="copytext-portrait"
|
|
22
22
|
_noAr="true"
|
|
23
23
|
_isWebview=../../_isWebview}}
|
|
24
24
|
{{else}}
|
|
25
25
|
{{> components/content/copytext/components/image/figure
|
|
26
|
-
_cssClass="
|
|
26
|
+
_cssClass="my-0"
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext-portrait"
|
|
29
29
|
_noAr="true"
|
|
@@ -32,16 +32,16 @@
|
|
|
32
32
|
{{else}}
|
|
33
33
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
34
34
|
{{> components/content/copytext/components/image/figure
|
|
35
|
-
_cssClass="
|
|
36
|
-
_cssClassCaption="
|
|
35
|
+
_cssClass="mt-5 mb-0"
|
|
36
|
+
_cssClassCaption=""
|
|
37
37
|
_type="story"
|
|
38
38
|
_variant="100-copytext"
|
|
39
39
|
_pictureAddClass="ar-16-9"
|
|
40
40
|
_isWebview=../../_isWebview}}
|
|
41
41
|
{{else}}
|
|
42
42
|
{{> components/content/copytext/components/image/figure
|
|
43
|
-
_cssClass="
|
|
44
|
-
_cssClassCaption="
|
|
43
|
+
_cssClass="my-0"
|
|
44
|
+
_cssClassCaption=""
|
|
45
45
|
_type="story"
|
|
46
46
|
_variant="100-copytext"
|
|
47
47
|
_pictureAddClass="ar-16-9"
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<header class="mt-6 sm480:mt12">
|
|
2
|
+
<h2>
|
|
3
|
+
{{#if this.label }}
|
|
4
|
+
{{#with this.label}}
|
|
5
|
+
{{#> components/label/label_group}}
|
|
6
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
7
|
+
{{/components/label/label_group}}
|
|
8
|
+
{{/with}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{~#if topline}}
|
|
11
|
+
<span class="block text-base font-heading">{{this.topline}}</span>
|
|
12
|
+
{{/if~}}
|
|
13
|
+
{{/if~}}
|
|
14
|
+
<span class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</span>
|
|
15
|
+
</h2>
|
|
16
|
+
</header>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper}}
|
|
2
|
-
|
|
3
|
-
<h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
|
|
2
|
+
{{> components/page/base/page_header}}
|
|
4
3
|
|
|
5
4
|
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
5
|
|
|
7
6
|
{{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
|
|
8
7
|
|
|
8
|
+
|
|
9
9
|
{{#unless this.displayPageLead.isFalse}}
|
|
10
10
|
{{#with this.teaseritem }}
|
|
11
11
|
{{#if this.isImage}}
|
|
12
12
|
{{> components/content/copytext/components/image/figure
|
|
13
|
-
_cssClass="article-breakout
|
|
14
|
-
_cssClassCaption=""
|
|
13
|
+
_cssClass="article-full-width md:article-breakout mt-6 sm480:mt-7 "
|
|
14
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
15
15
|
_type="story"
|
|
16
16
|
_variant="100-top"
|
|
17
17
|
_pictureAddClass="ar-16-9"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
|
|
5
5
|
{{#if this.link}}
|
|
6
|
-
{{#>components/base/link _link=this.link
|
|
6
|
+
{{#>components/base/link _link=this.link }}
|
|
7
7
|
{{#if this.content.programLogo}}
|
|
8
8
|
{{#with this.content.programLogo}}
|
|
9
9
|
<img
|
package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
_isWebview=../../_isWebview}}
|
|
21
21
|
{{else}}
|
|
22
22
|
{{> components/content/copytext/components/image/figure
|
|
23
|
-
_cssClass="
|
|
24
|
-
_cssClassCaption="
|
|
23
|
+
_cssClass="mt-5 mb-0"
|
|
24
|
+
_cssClassCaption=""
|
|
25
25
|
_type="story"
|
|
26
26
|
_variant="100-copytext"
|
|
27
27
|
_pictureAddClass="ar-16-9"
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
{{/with}}
|
|
23
23
|
{{~#with this.teaseritem }}
|
|
24
24
|
{{> components/content/copytext/components/image/figure
|
|
25
|
-
_cssClass="
|
|
26
|
-
_cssClassCaption="
|
|
25
|
+
_cssClass="mt-5 mb-0"
|
|
26
|
+
_cssClassCaption=""
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext"
|
|
29
29
|
_pictureAddClass="ar-16-9"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figcaption class="flex items-start
|
|
1
|
+
<figcaption class="flex items-start mt-3 text-xs sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
|
|
2
2
|
x-data="{
|
|
3
3
|
open: false,
|
|
4
4
|
truncated: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative
|
|
1
|
+
<figure class="relative{{#if _cssClass}} {{_cssClass}}{{/if}}">
|
|
2
2
|
{{#if _noAr }}
|
|
3
3
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
|
|
4
4
|
{{else}}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{{#if this.showPortrait.isTrue }}
|
|
2
2
|
{{#if this.showFullSize.isTrue }}
|
|
3
3
|
{{> components/content/copytext/components/image/figure
|
|
4
|
-
_cssClass="clear-both"
|
|
4
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
5
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
5
6
|
_type="story"
|
|
6
7
|
_variant="100-copytext-portrait"
|
|
7
8
|
_noAr="true"
|
|
8
9
|
_isWebview=../../_isWebview}}
|
|
9
10
|
{{else}}
|
|
10
11
|
{{> components/content/copytext/components/image/figure
|
|
11
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
12
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
13
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
12
14
|
_type="story"
|
|
13
15
|
_variant="copytext-portrait"
|
|
14
16
|
_noAr="true"
|
|
@@ -17,14 +19,16 @@
|
|
|
17
19
|
{{else}}
|
|
18
20
|
{{#if this.showFullSize.isTrue}}
|
|
19
21
|
{{> components/content/copytext/components/image/figure
|
|
20
|
-
_cssClass="clear-both"
|
|
22
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
23
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
21
24
|
_type="story"
|
|
22
25
|
_variant="100-copytext"
|
|
23
26
|
_pictureAddClass="ar-16-9"
|
|
24
27
|
_isWebview=../../_isWebview}}
|
|
25
28
|
{{else}}
|
|
26
29
|
{{> components/content/copytext/components/image/figure
|
|
27
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
30
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
31
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
28
32
|
_type="story"
|
|
29
33
|
_variant="copytext"
|
|
30
34
|
_pictureAddClass="ar-16-9"
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
{{#if this.showPortrait.isTrue }}
|
|
17
17
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
18
18
|
{{> components/content/copytext/components/image/figure
|
|
19
|
-
_cssClass="
|
|
19
|
+
_cssClass="mt-5 mb-0"
|
|
20
20
|
_type="story"
|
|
21
21
|
_variant="copytext-portrait"
|
|
22
22
|
_noAr="true"
|
|
23
23
|
_isWebview=../../_isWebview}}
|
|
24
24
|
{{else}}
|
|
25
25
|
{{> components/content/copytext/components/image/figure
|
|
26
|
-
_cssClass="
|
|
26
|
+
_cssClass="my-0"
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext-portrait"
|
|
29
29
|
_noAr="true"
|
|
@@ -32,16 +32,16 @@
|
|
|
32
32
|
{{else}}
|
|
33
33
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
34
34
|
{{> components/content/copytext/components/image/figure
|
|
35
|
-
_cssClass="
|
|
36
|
-
_cssClassCaption="
|
|
35
|
+
_cssClass="mt-5 mb-0"
|
|
36
|
+
_cssClassCaption=""
|
|
37
37
|
_type="story"
|
|
38
38
|
_variant="100-copytext"
|
|
39
39
|
_pictureAddClass="ar-16-9"
|
|
40
40
|
_isWebview=../../_isWebview}}
|
|
41
41
|
{{else}}
|
|
42
42
|
{{> components/content/copytext/components/image/figure
|
|
43
|
-
_cssClass="
|
|
44
|
-
_cssClassCaption="
|
|
43
|
+
_cssClass="my-0"
|
|
44
|
+
_cssClassCaption=""
|
|
45
45
|
_type="story"
|
|
46
46
|
_variant="100-copytext"
|
|
47
47
|
_pictureAddClass="ar-16-9"
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<header class="mt-6 sm480:mt12">
|
|
2
|
+
<h2>
|
|
3
|
+
{{#if this.label }}
|
|
4
|
+
{{#with this.label}}
|
|
5
|
+
{{#> components/label/label_group}}
|
|
6
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
7
|
+
{{/components/label/label_group}}
|
|
8
|
+
{{/with}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{~#if topline}}
|
|
11
|
+
<span class="block text-base font-heading">{{this.topline}}</span>
|
|
12
|
+
{{/if~}}
|
|
13
|
+
{{/if~}}
|
|
14
|
+
<span class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</span>
|
|
15
|
+
</h2>
|
|
16
|
+
</header>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper}}
|
|
2
|
-
|
|
3
|
-
<h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
|
|
2
|
+
{{> components/page/base/page_header}}
|
|
4
3
|
|
|
5
4
|
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
5
|
|
|
7
6
|
{{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
|
|
8
7
|
|
|
8
|
+
|
|
9
9
|
{{#unless this.displayPageLead.isFalse}}
|
|
10
10
|
{{#with this.teaseritem }}
|
|
11
11
|
{{#if this.isImage}}
|
|
12
12
|
{{> components/content/copytext/components/image/figure
|
|
13
|
-
_cssClass="article-breakout
|
|
14
|
-
_cssClassCaption=""
|
|
13
|
+
_cssClass="article-full-width md:article-breakout mt-6 sm480:mt-7 "
|
|
14
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
15
15
|
_type="story"
|
|
16
16
|
_variant="100-top"
|
|
17
17
|
_pictureAddClass="ar-16-9"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
|
|
5
5
|
{{#if this.link}}
|
|
6
|
-
{{#>components/base/link _link=this.link
|
|
6
|
+
{{#>components/base/link _link=this.link }}
|
|
7
7
|
{{#if this.content.programLogo}}
|
|
8
8
|
{{#with this.content.programLogo}}
|
|
9
9
|
<img
|
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.59.
|
|
9
|
+
"version": "1.59.10",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -174,9 +174,9 @@
|
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
.grid-article {
|
|
177
|
-
--mobile-padding:
|
|
178
|
-
--desktop-padding:
|
|
179
|
-
--narrow-max-width:
|
|
177
|
+
--mobile-padding: theme(margin.5);
|
|
178
|
+
--desktop-padding: theme(margin.10);
|
|
179
|
+
--narrow-max-width: calc(var(--breakpoint-md) - (var(--mobile-padding) * 2));
|
|
180
180
|
--content-max-width: 940px;
|
|
181
181
|
--breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
|
|
182
182
|
|
package/src/assets/tailwind.css
CHANGED
|
@@ -7,6 +7,12 @@
|
|
|
7
7
|
/*! purgecss start ignore */
|
|
8
8
|
:root,
|
|
9
9
|
[data-theme='default'] {
|
|
10
|
+
--breakpoint-xs: theme(screens.xs);
|
|
11
|
+
--breakpoint-sm480: theme(screens.sm480);
|
|
12
|
+
--breakpoint-sm: theme(screens.sm);
|
|
13
|
+
--breakpoint-md: theme(screens.md);
|
|
14
|
+
--breakpoint-lg: theme(screens.lg);
|
|
15
|
+
|
|
10
16
|
--color-primary-ds: theme('colors.blue.congress');
|
|
11
17
|
--color-secondary-ds: #606060;
|
|
12
18
|
--color-highlight-1: theme('colors.blue.accented');
|
package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
_isWebview=../../_isWebview}}
|
|
21
21
|
{{else}}
|
|
22
22
|
{{> components/content/copytext/components/image/figure
|
|
23
|
-
_cssClass="
|
|
24
|
-
_cssClassCaption="
|
|
23
|
+
_cssClass="mt-5 mb-0"
|
|
24
|
+
_cssClassCaption=""
|
|
25
25
|
_type="story"
|
|
26
26
|
_variant="100-copytext"
|
|
27
27
|
_pictureAddClass="ar-16-9"
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
{{/with}}
|
|
23
23
|
{{~#with this.teaseritem }}
|
|
24
24
|
{{> components/content/copytext/components/image/figure
|
|
25
|
-
_cssClass="
|
|
26
|
-
_cssClassCaption="
|
|
25
|
+
_cssClass="mt-5 mb-0"
|
|
26
|
+
_cssClassCaption=""
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext"
|
|
29
29
|
_pictureAddClass="ar-16-9"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figcaption class="flex items-start
|
|
1
|
+
<figcaption class="flex items-start mt-3 text-xs sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
|
|
2
2
|
x-data="{
|
|
3
3
|
open: false,
|
|
4
4
|
truncated: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative
|
|
1
|
+
<figure class="relative{{#if _cssClass}} {{_cssClass}}{{/if}}">
|
|
2
2
|
{{#if _noAr }}
|
|
3
3
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
|
|
4
4
|
{{else}}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{{#if this.showPortrait.isTrue }}
|
|
2
2
|
{{#if this.showFullSize.isTrue }}
|
|
3
3
|
{{> components/content/copytext/components/image/figure
|
|
4
|
-
_cssClass="clear-both"
|
|
4
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
5
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
5
6
|
_type="story"
|
|
6
7
|
_variant="100-copytext-portrait"
|
|
7
8
|
_noAr="true"
|
|
8
9
|
_isWebview=../../_isWebview}}
|
|
9
10
|
{{else}}
|
|
10
11
|
{{> components/content/copytext/components/image/figure
|
|
11
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
12
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
13
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
12
14
|
_type="story"
|
|
13
15
|
_variant="copytext-portrait"
|
|
14
16
|
_noAr="true"
|
|
@@ -17,14 +19,16 @@
|
|
|
17
19
|
{{else}}
|
|
18
20
|
{{#if this.showFullSize.isTrue}}
|
|
19
21
|
{{> components/content/copytext/components/image/figure
|
|
20
|
-
_cssClass="clear-both"
|
|
22
|
+
_cssClass="my-6 sm480:my-7 clear-both"
|
|
23
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
21
24
|
_type="story"
|
|
22
25
|
_variant="100-copytext"
|
|
23
26
|
_pictureAddClass="ar-16-9"
|
|
24
27
|
_isWebview=../../_isWebview}}
|
|
25
28
|
{{else}}
|
|
26
29
|
{{> components/content/copytext/components/image/figure
|
|
27
|
-
_cssClass="sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
30
|
+
_cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
|
|
31
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
28
32
|
_type="story"
|
|
29
33
|
_variant="copytext"
|
|
30
34
|
_pictureAddClass="ar-16-9"
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
{{#if this.showPortrait.isTrue }}
|
|
17
17
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
18
18
|
{{> components/content/copytext/components/image/figure
|
|
19
|
-
_cssClass="
|
|
19
|
+
_cssClass="mt-5 mb-0"
|
|
20
20
|
_type="story"
|
|
21
21
|
_variant="copytext-portrait"
|
|
22
22
|
_noAr="true"
|
|
23
23
|
_isWebview=../../_isWebview}}
|
|
24
24
|
{{else}}
|
|
25
25
|
{{> components/content/copytext/components/image/figure
|
|
26
|
-
_cssClass="
|
|
26
|
+
_cssClass="my-0"
|
|
27
27
|
_type="story"
|
|
28
28
|
_variant="copytext-portrait"
|
|
29
29
|
_noAr="true"
|
|
@@ -32,16 +32,16 @@
|
|
|
32
32
|
{{else}}
|
|
33
33
|
{{~#if ../this.paragraphProperties.[0].title}}
|
|
34
34
|
{{> components/content/copytext/components/image/figure
|
|
35
|
-
_cssClass="
|
|
36
|
-
_cssClassCaption="
|
|
35
|
+
_cssClass="mt-5 mb-0"
|
|
36
|
+
_cssClassCaption=""
|
|
37
37
|
_type="story"
|
|
38
38
|
_variant="100-copytext"
|
|
39
39
|
_pictureAddClass="ar-16-9"
|
|
40
40
|
_isWebview=../../_isWebview}}
|
|
41
41
|
{{else}}
|
|
42
42
|
{{> components/content/copytext/components/image/figure
|
|
43
|
-
_cssClass="
|
|
44
|
-
_cssClassCaption="
|
|
43
|
+
_cssClass="my-0"
|
|
44
|
+
_cssClassCaption=""
|
|
45
45
|
_type="story"
|
|
46
46
|
_variant="100-copytext"
|
|
47
47
|
_pictureAddClass="ar-16-9"
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<header class="mt-6 sm480:mt12">
|
|
2
|
+
<h2>
|
|
3
|
+
{{#if this.label }}
|
|
4
|
+
{{#with this.label}}
|
|
5
|
+
{{#> components/label/label_group}}
|
|
6
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
7
|
+
{{/components/label/label_group}}
|
|
8
|
+
{{/with}}
|
|
9
|
+
{{else}}
|
|
10
|
+
{{~#if topline}}
|
|
11
|
+
<span class="block text-base font-heading">{{this.topline}}</span>
|
|
12
|
+
{{/if~}}
|
|
13
|
+
{{/if~}}
|
|
14
|
+
<span class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</span>
|
|
15
|
+
</h2>
|
|
16
|
+
</header>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasMoreThanOneAuthor":false,"hasDwellTime":true,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritem":{"isImage":true,"caption":"Bildunterschrift","copyrightWithLinks":"picture-alliance/dpa","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorTitle":"Steffen Rebhahn","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Zwischenüberschrift"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"Program-name","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}},"label":{"type":"glosse","loca":"label_glosse"}}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper}}
|
|
2
|
-
|
|
3
|
-
<h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
|
|
2
|
+
{{> components/page/base/page_header}}
|
|
4
3
|
|
|
5
4
|
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
5
|
|
|
7
6
|
{{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
|
|
8
7
|
|
|
8
|
+
|
|
9
9
|
{{#unless this.displayPageLead.isFalse}}
|
|
10
10
|
{{#with this.teaseritem }}
|
|
11
11
|
{{#if this.isImage}}
|
|
12
12
|
{{> components/content/copytext/components/image/figure
|
|
13
|
-
_cssClass="article-breakout
|
|
14
|
-
_cssClassCaption=""
|
|
13
|
+
_cssClass="article-full-width md:article-breakout mt-6 sm480:mt-7 "
|
|
14
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
15
15
|
_type="story"
|
|
16
16
|
_variant="100-top"
|
|
17
17
|
_pictureAddClass="ar-16-9"
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import story_template from './story_article.hbs'
|
|
2
|
-
import
|
|
2
|
+
import data_story from './fixtures/story.json'
|
|
3
|
+
import data_story_with_label from './fixtures/story_with_label.json'
|
|
3
4
|
|
|
4
5
|
const Template = ({ ...args }) => {
|
|
5
6
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
@@ -13,9 +14,18 @@ export default {
|
|
|
13
14
|
|
|
14
15
|
export const Default = {
|
|
15
16
|
render: Template.bind({}),
|
|
16
|
-
name: '
|
|
17
|
-
args:
|
|
17
|
+
name: 'Artikel mit Topline',
|
|
18
|
+
args: data_story,
|
|
18
19
|
parameters: {
|
|
19
20
|
layout: 'fullscreen',
|
|
20
|
-
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const WithLabel = {
|
|
25
|
+
render: Template.bind({}),
|
|
26
|
+
name: 'Artikel mit Label',
|
|
27
|
+
args: data_story_with_label,
|
|
28
|
+
parameters: {
|
|
29
|
+
layout: 'fullscreen',
|
|
30
|
+
}
|
|
21
31
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<div class='flex flex-wrap pt-2 w-fit sm:w-full gap-x-6 sm:gap-x-2 gap-y-2'>
|
|
5
5
|
{{#if this.link}}
|
|
6
|
-
{{#>components/base/link _link=this.link
|
|
6
|
+
{{#>components/base/link _link=this.link }}
|
|
7
7
|
{{#if this.content.programLogo}}
|
|
8
8
|
{{#with this.content.programLogo}}
|
|
9
9
|
<img
|