hr-design-system-handlebars 1.59.7 → 1.59.9

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.
Files changed (56) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +31 -29
  3. package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
  4. package/dist/views/components/content/copytext/components/filedownload.hbs +2 -2
  5. package/dist/views/components/content/copytext/components/image/figcaption.hbs +1 -1
  6. package/dist/views/components/content/copytext/components/image/figure.hbs +1 -1
  7. package/dist/views/components/content/copytext/components/image/image.hbs +4 -4
  8. package/dist/views/components/content/copytext/components/infobox.hbs +6 -6
  9. package/dist/views/components/page/components/author.hbs +5 -4
  10. package/dist/views/components/page/components/commentlink.hbs +3 -3
  11. package/dist/views/components/page/components/metadatabox.hbs +1 -1
  12. package/dist/views/components/page/components/publicationdate.hbs +1 -1
  13. package/dist/views/components/page/story/story_article.hbs +2 -2
  14. package/dist/views/components/program_supplier/program_supplier.hbs +1 -1
  15. package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
  16. package/dist/views_static/components/content/copytext/components/filedownload.hbs +2 -2
  17. package/dist/views_static/components/content/copytext/components/image/figcaption.hbs +1 -1
  18. package/dist/views_static/components/content/copytext/components/image/figure.hbs +1 -1
  19. package/dist/views_static/components/content/copytext/components/image/image.hbs +4 -4
  20. package/dist/views_static/components/content/copytext/components/infobox.hbs +6 -6
  21. package/dist/views_static/components/page/components/author.hbs +5 -4
  22. package/dist/views_static/components/page/components/commentlink.hbs +3 -3
  23. package/dist/views_static/components/page/components/metadatabox.hbs +1 -1
  24. package/dist/views_static/components/page/components/publicationdate.hbs +1 -1
  25. package/dist/views_static/components/page/story/story_article.hbs +2 -2
  26. package/dist/views_static/components/program_supplier/program_supplier.hbs +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/css/custom-utilities.css +3 -3
  29. package/src/assets/fixtures/page/metadatabox.json +18 -0
  30. package/src/assets/fixtures/page/metadatabox_more_authors.json +42 -0
  31. package/src/assets/fixtures/page/metadatabox_more_authors_comments.json +46 -0
  32. package/src/assets/fixtures/page/metadatabox_one_author.json +31 -0
  33. package/src/assets/fixtures/page/metadatabox_one_author_comments.json +35 -0
  34. package/src/assets/fixtures/page/metadatabox_one_author_without_picture.json +21 -0
  35. package/src/assets/tailwind.css +6 -0
  36. package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
  37. package/src/stories/views/components/content/copytext/components/filedownload.hbs +2 -2
  38. package/src/stories/views/components/content/copytext/components/image/figcaption.hbs +1 -1
  39. package/src/stories/views/components/content/copytext/components/image/figure.hbs +1 -1
  40. package/src/stories/views/components/content/copytext/components/image/image.hbs +4 -4
  41. package/src/stories/views/components/content/copytext/components/infobox.hbs +6 -6
  42. package/src/stories/views/components/page/components/author.hbs +5 -4
  43. package/src/stories/views/components/page/components/commentlink.hbs +3 -3
  44. package/src/stories/views/components/page/components/metadatabox.hbs +1 -1
  45. package/src/stories/views/components/page/components/metadatabox.mdx +29 -0
  46. package/src/stories/views/components/page/components/metadatabox.stories.js +67 -0
  47. package/src/stories/views/components/page/components/publicationdate.hbs +1 -1
  48. package/src/stories/views/components/page/fixtures/metadatabox.json +1 -0
  49. package/src/stories/views/components/page/fixtures/metadatabox_more_authors.json +1 -0
  50. package/src/stories/views/components/page/fixtures/metadatabox_more_authors_comments.json +1 -0
  51. package/src/stories/views/components/page/fixtures/metadatabox_one_author.json +1 -0
  52. package/src/stories/views/components/page/fixtures/metadatabox_one_author_comments.json +1 -0
  53. package/src/stories/views/components/page/fixtures/metadatabox_one_author_without_picture.json +1 -0
  54. package/src/stories/views/components/page/story/story_article.hbs +2 -2
  55. package/src/stories/views/components/page/story/story_main.stories.js +8 -1
  56. package/src/stories/views/components/program_supplier/program_supplier.hbs +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.59.9 (Mon Feb 26 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Adjust grid behaviour of full width image [#862](https://github.com/mumprod/hr-design-system-handlebars/pull/862) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
13
+ # v1.59.8 (Fri Feb 23 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - add story for metadatabox [#861](https://github.com/mumprod/hr-design-system-handlebars/pull/861) ([@hanswurstsalat](https://github.com/hanswurstsalat))
18
+
19
+ #### Authors: 1
20
+
21
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
22
+
23
+ ---
24
+
1
25
  # v1.59.7 (Fri Feb 23 2024)
2
26
 
3
27
  #### 🐛 Bug Fix
@@ -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: cnt1708701758301;
3247
+ counter-reset: cnt1708960836197;
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: 40px;
3379
- --narrow-max-width: 726px;
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-breakout {
3395
- grid-column: content;
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: cnt1708701758301 1;
3570
+ counter-increment: cnt1708960836197 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(cnt1708701758301);
3586
+ content: counter(cnt1708960836197);
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;
@@ -5452,6 +5443,10 @@ article.indexText ul {
5452
5443
  margin-right: 1.25rem;
5453
5444
  }
5454
5445
 
5446
+ .sm480\:mt-1 {
5447
+ margin-top: 0.25rem;
5448
+ }
5449
+
5455
5450
  .sm480\:mt-4 {
5456
5451
  margin-top: 1rem;
5457
5452
  }
@@ -5464,6 +5459,10 @@ article.indexText ul {
5464
5459
  margin-top: 1.375rem;
5465
5460
  }
5466
5461
 
5462
+ .sm480\:mt-7 {
5463
+ margin-top: 1.75rem;
5464
+ }
5465
+
5467
5466
  .sm480\:h-5 {
5468
5467
  height: 1.25rem;
5469
5468
  }
@@ -6596,6 +6595,9 @@ article.indexText ul {
6596
6595
  clear: both;
6597
6596
  }
6598
6597
  }
6598
+ .md\:article-breakout {
6599
+ grid-column: content;
6600
+ }
6599
6601
 
6600
6602
  .md\:col-main {
6601
6603
  grid-column: main;
@@ -20,8 +20,8 @@
20
20
  _isWebview=../../_isWebview}}
21
21
  {{else}}
22
22
  {{> components/content/copytext/components/image/figure
23
- _cssClass="!mt-5 !mb-0 !mx-0"
24
- _cssClassCaption="!mx-0"
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="!mt-5 !mb-0 !mx-0"
26
- _cssClassCaption="!mx-0"
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 mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
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 my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
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,14 @@
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
5
  _type="story"
6
6
  _variant="100-copytext-portrait"
7
7
  _noAr="true"
8
8
  _isWebview=../../_isWebview}}
9
9
  {{else}}
10
10
  {{> 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"
11
+ _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"
12
12
  _type="story"
13
13
  _variant="copytext-portrait"
14
14
  _noAr="true"
@@ -17,14 +17,14 @@
17
17
  {{else}}
18
18
  {{#if this.showFullSize.isTrue}}
19
19
  {{> components/content/copytext/components/image/figure
20
- _cssClass="clear-both"
20
+ _cssClass="my-6 sm480:my-7 clear-both"
21
21
  _type="story"
22
22
  _variant="100-copytext"
23
23
  _pictureAddClass="ar-16-9"
24
24
  _isWebview=../../_isWebview}}
25
25
  {{else}}
26
26
  {{> 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"
27
+ _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"
28
28
  _type="story"
29
29
  _variant="copytext"
30
30
  _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="!mt-5 !mb-0 !mx-0"
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="!mt-0 !mb-0 !mx-0"
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="!mt-5 !mb-0 !mx-0"
36
- _cssClassCaption="!mx-0"
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="!mt-0 !mb-0 !mx-0"
44
- _cssClassCaption="!mx-0"
43
+ _cssClass="my-0"
44
+ _cssClassCaption=""
45
45
  _type="story"
46
46
  _variant="100-copytext"
47
47
  _pictureAddClass="ar-16-9"
@@ -1,7 +1,7 @@
1
1
  {{#if this.hasMoreThanOneAuthor}}
2
2
 
3
3
  {{#with this.authorItems}}
4
- <p class="mb-1 text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
4
+ <p class="mb-1 text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
5
5
  {{#each this}}
6
6
  {{#if this.hasProfileLink}}
7
7
  {{this.from}}
@@ -21,17 +21,18 @@
21
21
  {{else}}
22
22
 
23
23
  {{#if this.authorTitle~}}
24
- <div class="flex items-center h-10">
24
+ <div class="flex items-center {{#if this.authorImage.isImage}}h-10{{else}}mb-1{{/if}}">
25
25
  {{#if this.authorImage.isImage}}
26
26
  <div class="w-10 h-10 mr-4 basis-10 grow-0">
27
27
  {{~> components/base/image/responsive_image this.authorImage
28
28
  _type="profile"
29
29
  _variant="ticker"
30
30
  _addClass=""
31
- _addClassImg="ar-1-1 rounded-full" ~}}
31
+ _addClassImg="ar-1-1 rounded-full"
32
+ _noDelay=true ~}}
32
33
  </div>
33
34
  {{/if}}
34
- <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
+ <div class="self-start text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
36
  {{#unless _hideFrom }}Von{{/unless}}
36
37
  {{#if this.authorUrl~}}
37
38
  <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
@@ -1,8 +1,8 @@
1
1
  {{#with this.userComments ~}}
2
- <div class="{{#unless ../this.hasMoreThanOneAuthor}}ml-14 {{/unless}}mt-2 -mb-1">
2
+ <div class="{{#unless ../this.hasMoreThanOneAuthor}}{{#if ../this.authorImage.isImage}}ml-14 {{/if}}{{/unless}}mt-0 sm480:mt-1 -mb-1">
3
3
  <span class="relative z-30 whitespace-nowrap">
4
- <a class="text-sm font-headingSerif text-link hover:underline" href="#commentList">
5
- {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
4
+ <a class="text-xs sm480:text-sm font-headingSerif text-link hover:underline dark:text-link-dark" href="#commentList">
5
+ {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link dark:text-link-dark fill-current"}}
6
6
  <span class="sr-only">{{loca "comment_anchor_1"}}</span>
7
7
  <span class="text-link">{{this.quantity}}</span>
8
8
  {{#if this.hasOneComment}}
@@ -1,6 +1,6 @@
1
1
  <div class="clear-both mt-3 border-y border-gray-scorpion">
2
2
  <div class="flex clear-both w-full my-2 sm:my-4">
3
- <div>
3
+ <div class="self-center">
4
4
  {{> components/page/components/author _hideFrom=false }}
5
5
 
6
6
  {{#if _showDate }}
@@ -1,4 +1,4 @@
1
- <div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
1
+ <div class="{{#unless this.hasMoreThanOneAuthor}}{{#if this.authorImage.isImage}}-mt-5 ml-14 {{/if}}{{/unless}}text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
2
2
 
3
3
  {{#with this.documentModificationDate~}}
4
4
 
@@ -10,8 +10,8 @@
10
10
  {{#with this.teaseritem }}
11
11
  {{#if this.isImage}}
12
12
  {{> components/content/copytext/components/image/figure
13
- _cssClass="article-breakout !mb-0"
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 _cssClasses='programReference__link'}}
6
+ {{#>components/base/link _link=this.link }}
7
7
  {{#if this.content.programLogo}}
8
8
  {{#with this.content.programLogo}}
9
9
  <img
@@ -20,8 +20,8 @@
20
20
  _isWebview=../../_isWebview}}
21
21
  {{else}}
22
22
  {{> components/content/copytext/components/image/figure
23
- _cssClass="!mt-5 !mb-0 !mx-0"
24
- _cssClassCaption="!mx-0"
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="!mt-5 !mb-0 !mx-0"
26
- _cssClassCaption="!mx-0"
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 mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
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 my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
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,14 @@
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
5
  _type="story"
6
6
  _variant="100-copytext-portrait"
7
7
  _noAr="true"
8
8
  _isWebview=../../_isWebview}}
9
9
  {{else}}
10
10
  {{> 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"
11
+ _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"
12
12
  _type="story"
13
13
  _variant="copytext-portrait"
14
14
  _noAr="true"
@@ -17,14 +17,14 @@
17
17
  {{else}}
18
18
  {{#if this.showFullSize.isTrue}}
19
19
  {{> components/content/copytext/components/image/figure
20
- _cssClass="clear-both"
20
+ _cssClass="my-6 sm480:my-7 clear-both"
21
21
  _type="story"
22
22
  _variant="100-copytext"
23
23
  _pictureAddClass="ar-16-9"
24
24
  _isWebview=../../_isWebview}}
25
25
  {{else}}
26
26
  {{> 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"
27
+ _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"
28
28
  _type="story"
29
29
  _variant="copytext"
30
30
  _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="!mt-5 !mb-0 !mx-0"
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="!mt-0 !mb-0 !mx-0"
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="!mt-5 !mb-0 !mx-0"
36
- _cssClassCaption="!mx-0"
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="!mt-0 !mb-0 !mx-0"
44
- _cssClassCaption="!mx-0"
43
+ _cssClass="my-0"
44
+ _cssClassCaption=""
45
45
  _type="story"
46
46
  _variant="100-copytext"
47
47
  _pictureAddClass="ar-16-9"
@@ -1,7 +1,7 @@
1
1
  {{#if this.hasMoreThanOneAuthor}}
2
2
 
3
3
  {{#with this.authorItems}}
4
- <p class="mb-1 text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
4
+ <p class="mb-1 text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
5
5
  {{#each this}}
6
6
  {{#if this.hasProfileLink}}
7
7
  {{this.from}}
@@ -21,17 +21,18 @@
21
21
  {{else}}
22
22
 
23
23
  {{#if this.authorTitle~}}
24
- <div class="flex items-center h-10">
24
+ <div class="flex items-center {{#if this.authorImage.isImage}}h-10{{else}}mb-1{{/if}}">
25
25
  {{#if this.authorImage.isImage}}
26
26
  <div class="w-10 h-10 mr-4 basis-10 grow-0">
27
27
  {{~> components/base/image/responsive_image this.authorImage
28
28
  _type="profile"
29
29
  _variant="ticker"
30
30
  _addClass=""
31
- _addClassImg="ar-1-1 rounded-full" ~}}
31
+ _addClassImg="ar-1-1 rounded-full"
32
+ _noDelay=true ~}}
32
33
  </div>
33
34
  {{/if}}
34
- <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
+ <div class="self-start text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
36
  {{#unless _hideFrom }}Von{{/unless}}
36
37
  {{#if this.authorUrl~}}
37
38
  <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
@@ -1,8 +1,8 @@
1
1
  {{#with this.userComments ~}}
2
- <div class="{{#unless ../this.hasMoreThanOneAuthor}}ml-14 {{/unless}}mt-2 -mb-1">
2
+ <div class="{{#unless ../this.hasMoreThanOneAuthor}}{{#if ../this.authorImage.isImage}}ml-14 {{/if}}{{/unless}}mt-0 sm480:mt-1 -mb-1">
3
3
  <span class="relative z-30 whitespace-nowrap">
4
- <a class="text-sm font-headingSerif text-link hover:underline" href="#commentList">
5
- {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
4
+ <a class="text-xs sm480:text-sm font-headingSerif text-link hover:underline dark:text-link-dark" href="#commentList">
5
+ {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link dark:text-link-dark fill-current"}}
6
6
  <span class="sr-only">{{loca "comment_anchor_1"}}</span>
7
7
  <span class="text-link">{{this.quantity}}</span>
8
8
  {{#if this.hasOneComment}}
@@ -1,6 +1,6 @@
1
1
  <div class="clear-both mt-3 border-y border-gray-scorpion">
2
2
  <div class="flex clear-both w-full my-2 sm:my-4">
3
- <div>
3
+ <div class="self-center">
4
4
  {{> components/page/components/author _hideFrom=false }}
5
5
 
6
6
  {{#if _showDate }}
@@ -1,4 +1,4 @@
1
- <div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
1
+ <div class="{{#unless this.hasMoreThanOneAuthor}}{{#if this.authorImage.isImage}}-mt-5 ml-14 {{/if}}{{/unless}}text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
2
2
 
3
3
  {{#with this.documentModificationDate~}}
4
4
 
@@ -10,8 +10,8 @@
10
10
  {{#with this.teaseritem }}
11
11
  {{#if this.isImage}}
12
12
  {{> components/content/copytext/components/image/figure
13
- _cssClass="article-breakout !mb-0"
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 _cssClasses='programReference__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.7",
9
+ "version": "1.59.9",
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: 1.25rem;
178
- --desktop-padding: 40px;
179
- --narrow-max-width: 726px;
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
 
@@ -0,0 +1,18 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": false,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "socialSharing": {
13
+ "twitterLink": "/twitterLink-url",
14
+ "facebookLink": "/facebookLink-url",
15
+ "whatsappLink": "/whatsappLink-url",
16
+ "mailtoLink": "/mailtoLink-url"
17
+ }
18
+ }
@@ -0,0 +1,42 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": true,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "authorItems": [
13
+ {
14
+ "hasProfileLink": false,
15
+ "from": "Von",
16
+ "textAfterAuthor": "Horst Schlämmer",
17
+ "delimiter": ", "
18
+ },
19
+ {
20
+ "hasProfileLink": false,
21
+ "from": "",
22
+ "textAfterAuthor": "Karl Dall",
23
+ "delimiter": " und "
24
+ },
25
+ {
26
+ "hasProfileLink": true,
27
+ "from": "",
28
+ "authorName": "Peter Lustig",
29
+ "delimiter": "",
30
+ "link": {
31
+ "url": "/author-url",
32
+ "isTargetBlank": false
33
+ }
34
+ }
35
+ ],
36
+ "socialSharing": {
37
+ "twitterLink": "/twitterLink-url",
38
+ "facebookLink": "/facebookLink-url",
39
+ "whatsappLink": "/whatsappLink-url",
40
+ "mailtoLink": "/mailtoLink-url"
41
+ }
42
+ }
@@ -0,0 +1,46 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": true,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "userComments": {
13
+ "HasOneComment": false,
14
+ "quantity": "117"
15
+ },
16
+ "authorItems": [
17
+ {
18
+ "hasProfileLink": false,
19
+ "from": "Von",
20
+ "textAfterAuthor": "Horst Schlämmer",
21
+ "delimiter": ", "
22
+ },
23
+ {
24
+ "hasProfileLink": false,
25
+ "from": "",
26
+ "textAfterAuthor": "Karl Dall",
27
+ "delimiter": " und "
28
+ },
29
+ {
30
+ "hasProfileLink": true,
31
+ "from": "",
32
+ "authorName": "Peter Lustig",
33
+ "delimiter": "",
34
+ "link": {
35
+ "url": "/author-url",
36
+ "isTargetBlank": false
37
+ }
38
+ }
39
+ ],
40
+ "socialSharing": {
41
+ "twitterLink": "/twitterLink-url",
42
+ "facebookLink": "/facebookLink-url",
43
+ "whatsappLink": "/whatsappLink-url",
44
+ "mailtoLink": "/mailtoLink-url"
45
+ }
46
+ }
@@ -0,0 +1,31 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": false,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "authorTitle": "Steffen Rebhahn",
13
+ "authorImage": {
14
+ "@->jsoninclude": "page/story/story_images.inc.json",
15
+ "@->contentpath": "author",
16
+ "@->replaceToken": [
17
+ {
18
+ "@->token": "image",
19
+ "@->value": "mitarbeiter-portraet-steffen-rebhahn-106"
20
+ }
21
+ ]
22
+ },
23
+ "authorUrl": "/author-url",
24
+ "webviewAuthorUrl": "webview-author-url",
25
+ "socialSharing": {
26
+ "twitterLink": "/twitterLink-url",
27
+ "facebookLink": "/facebookLink-url",
28
+ "whatsappLink": "/whatsappLink-url",
29
+ "mailtoLink": "/mailtoLink-url"
30
+ }
31
+ }
@@ -0,0 +1,35 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": false,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "userComments": {
13
+ "HasOneComment": false,
14
+ "quantity": "117"
15
+ },
16
+ "authorTitle": "Steffen Rebhahn",
17
+ "authorImage": {
18
+ "@->jsoninclude": "page/story/story_images.inc.json",
19
+ "@->contentpath": "author",
20
+ "@->replaceToken": [
21
+ {
22
+ "@->token": "image",
23
+ "@->value": "mitarbeiter-portraet-steffen-rebhahn-106"
24
+ }
25
+ ]
26
+ },
27
+ "authorUrl": "/author-url",
28
+ "webviewAuthorUrl": "webview-author-url",
29
+ "socialSharing": {
30
+ "twitterLink": "/twitterLink-url",
31
+ "facebookLink": "/facebookLink-url",
32
+ "whatsappLink": "/whatsappLink-url",
33
+ "mailtoLink": "/mailtoLink-url"
34
+ }
35
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "_showDate": true,
3
+ "hasMoreThanOneAuthor": false,
4
+ "hasDwellTime": true,
5
+ "documentModificationDate": {
6
+ "isModificationDate": false,
7
+ "isPublicationDate": true,
8
+ "htmlDateTime": "2024-02-15T19:30+0200",
9
+ "date": "15.02.24",
10
+ "time": "19:30"
11
+ },
12
+ "authorTitle": "Steffen Rebhahn",
13
+ "authorUrl": "/author-url",
14
+ "webviewAuthorUrl": "webview-author-url",
15
+ "socialSharing": {
16
+ "twitterLink": "/twitterLink-url",
17
+ "facebookLink": "/facebookLink-url",
18
+ "whatsappLink": "/whatsappLink-url",
19
+ "mailtoLink": "/mailtoLink-url"
20
+ }
21
+ }
@@ -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');
@@ -20,8 +20,8 @@
20
20
  _isWebview=../../_isWebview}}
21
21
  {{else}}
22
22
  {{> components/content/copytext/components/image/figure
23
- _cssClass="!mt-5 !mb-0 !mx-0"
24
- _cssClassCaption="!mx-0"
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="!mt-5 !mb-0 !mx-0"
26
- _cssClassCaption="!mx-0"
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 mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
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 my-6 sm480:my-7 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
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,14 @@
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
5
  _type="story"
6
6
  _variant="100-copytext-portrait"
7
7
  _noAr="true"
8
8
  _isWebview=../../_isWebview}}
9
9
  {{else}}
10
10
  {{> 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"
11
+ _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"
12
12
  _type="story"
13
13
  _variant="copytext-portrait"
14
14
  _noAr="true"
@@ -17,14 +17,14 @@
17
17
  {{else}}
18
18
  {{#if this.showFullSize.isTrue}}
19
19
  {{> components/content/copytext/components/image/figure
20
- _cssClass="clear-both"
20
+ _cssClass="my-6 sm480:my-7 clear-both"
21
21
  _type="story"
22
22
  _variant="100-copytext"
23
23
  _pictureAddClass="ar-16-9"
24
24
  _isWebview=../../_isWebview}}
25
25
  {{else}}
26
26
  {{> 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"
27
+ _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"
28
28
  _type="story"
29
29
  _variant="copytext"
30
30
  _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="!mt-5 !mb-0 !mx-0"
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="!mt-0 !mb-0 !mx-0"
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="!mt-5 !mb-0 !mx-0"
36
- _cssClassCaption="!mx-0"
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="!mt-0 !mb-0 !mx-0"
44
- _cssClassCaption="!mx-0"
43
+ _cssClass="my-0"
44
+ _cssClassCaption=""
45
45
  _type="story"
46
46
  _variant="100-copytext"
47
47
  _pictureAddClass="ar-16-9"
@@ -1,7 +1,7 @@
1
1
  {{#if this.hasMoreThanOneAuthor}}
2
2
 
3
3
  {{#with this.authorItems}}
4
- <p class="mb-1 text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
4
+ <p class="mb-1 text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
5
5
  {{#each this}}
6
6
  {{#if this.hasProfileLink}}
7
7
  {{this.from}}
@@ -21,17 +21,18 @@
21
21
  {{else}}
22
22
 
23
23
  {{#if this.authorTitle~}}
24
- <div class="flex items-center h-10">
24
+ <div class="flex items-center {{#if this.authorImage.isImage}}h-10{{else}}mb-1{{/if}}">
25
25
  {{#if this.authorImage.isImage}}
26
26
  <div class="w-10 h-10 mr-4 basis-10 grow-0">
27
27
  {{~> components/base/image/responsive_image this.authorImage
28
28
  _type="profile"
29
29
  _variant="ticker"
30
30
  _addClass=""
31
- _addClassImg="ar-1-1 rounded-full" ~}}
31
+ _addClassImg="ar-1-1 rounded-full"
32
+ _noDelay=true ~}}
32
33
  </div>
33
34
  {{/if}}
34
- <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
+ <div class="self-start text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
35
36
  {{#unless _hideFrom }}Von{{/unless}}
36
37
  {{#if this.authorUrl~}}
37
38
  <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline dark:text-link-dark ">{{this.authorTitle}}</a>
@@ -1,8 +1,8 @@
1
1
  {{#with this.userComments ~}}
2
- <div class="{{#unless ../this.hasMoreThanOneAuthor}}ml-14 {{/unless}}mt-2 -mb-1">
2
+ <div class="{{#unless ../this.hasMoreThanOneAuthor}}{{#if ../this.authorImage.isImage}}ml-14 {{/if}}{{/unless}}mt-0 sm480:mt-1 -mb-1">
3
3
  <span class="relative z-30 whitespace-nowrap">
4
- <a class="text-sm font-headingSerif text-link hover:underline" href="#commentList">
5
- {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
4
+ <a class="text-xs sm480:text-sm font-headingSerif text-link hover:underline dark:text-link-dark" href="#commentList">
5
+ {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link dark:text-link-dark fill-current"}}
6
6
  <span class="sr-only">{{loca "comment_anchor_1"}}</span>
7
7
  <span class="text-link">{{this.quantity}}</span>
8
8
  {{#if this.hasOneComment}}
@@ -1,6 +1,6 @@
1
1
  <div class="clear-both mt-3 border-y border-gray-scorpion">
2
2
  <div class="flex clear-both w-full my-2 sm:my-4">
3
- <div>
3
+ <div class="self-center">
4
4
  {{> components/page/components/author _hideFrom=false }}
5
5
 
6
6
  {{#if _showDate }}
@@ -0,0 +1,29 @@
1
+ import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
2
+ import * as MetadataboxStories from './metadatabox.stories'
3
+
4
+ <Meta of={MetadataboxStories} />
5
+
6
+ # Metadaten-Box
7
+
8
+ ## Beschreibung
9
+
10
+ Die Metadaten-Box enthält folgende Elemente:
11
+ - Autor-Name(n)
12
+ - Autor-Bild (wenn nur ein Autor)
13
+ - Aktualisierungs- oder Veröffentlichungsdatum
14
+ - Anker-Link zu den Kommentaren
15
+ - social-sharing-buttons
16
+
17
+ ## Verwendung
18
+
19
+ Die Metadatenbox-Komponente wird in handlebars wie folgt eingebaut:
20
+
21
+ ```html
22
+ {{> components/page/components/metadatabox _showDate=true|false }}
23
+ ```
24
+
25
+ <Canvas withToolbar>
26
+ <Story of={MetadataboxStories.Default} />
27
+ </Canvas>
28
+
29
+ <ArgsTable story="default" />
@@ -0,0 +1,67 @@
1
+ import metadatabox_template from './metadatabox.hbs'
2
+ import metadatabox_json from '../fixtures/metadatabox.json'
3
+ import metadatabox_one_author_json from '../fixtures/metadatabox_one_author.json'
4
+ import metadatabox_one_author_without_picture_json from '../fixtures/metadatabox_one_author_without_picture.json'
5
+ import metadatabox_one_author_comments_json from '../fixtures/metadatabox_one_author_comments.json'
6
+ import metadatabox_more_authors_json from '../fixtures/metadatabox_more_authors.json'
7
+ import metadatabox_more_authors_comments_json from '../fixtures/metadatabox_more_authors_comments.json'
8
+
9
+ const Template = ({ ...args }) => {
10
+ // You can either use a function to create DOM elements or use a plain html string!
11
+ // return `<span>${topline}</span>`;
12
+ return metadatabox_template({ ...args })
13
+ }
14
+
15
+ export default {
16
+ title: 'Seiten/Komponenten/Metadaten-Box',
17
+ argTypes: {
18
+ _showDate: {
19
+ control: 'boolean',
20
+ description: 'Datum anzeigen',
21
+ },
22
+ },
23
+ decorators: [
24
+ (Story) => {
25
+ return `<div class="max-w-[724px] mx-auto mt-10">
26
+ ${Story()}
27
+ </div>`
28
+ },
29
+ ],
30
+ }
31
+
32
+ export const Default = {
33
+ render: Template.bind({}),
34
+ name: 'Nur Datum',
35
+ args: metadatabox_json,
36
+ }
37
+
38
+ export const WithOneAuthor = {
39
+ render: Template.bind({}),
40
+ name: 'Ein Autor',
41
+ args: metadatabox_one_author_json,
42
+ }
43
+
44
+ export const WithOneAuthorWithoutPicture = {
45
+ render: Template.bind({}),
46
+ name: 'Ein Autor ohne Bild',
47
+ args: metadatabox_one_author_without_picture_json,
48
+ }
49
+
50
+
51
+ export const WithMoreAuthors = {
52
+ render: Template.bind({}),
53
+ name: 'Mehrere Autoren',
54
+ args: metadatabox_more_authors_json,
55
+ }
56
+
57
+ export const WithOneAuthorAndComments = {
58
+ render: Template.bind({}),
59
+ name: 'Ein Autor und Kommentar-Link',
60
+ args: metadatabox_one_author_comments_json,
61
+ }
62
+
63
+ export const WithMoreAuthorsAndComments = {
64
+ render: Template.bind({}),
65
+ name: 'Mehrere Autoren und Kommentar-Link',
66
+ args: metadatabox_more_authors_comments_json,
67
+ }
@@ -1,4 +1,4 @@
1
- <div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
1
+ <div class="{{#unless this.hasMoreThanOneAuthor}}{{#if this.authorImage.isImage}}-mt-5 ml-14 {{/if}}{{/unless}}text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
2
2
 
3
3
  {{#with this.documentModificationDate~}}
4
4
 
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":true,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"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}}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":true,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"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}}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"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","socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"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","socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -0,0 +1 @@
1
+ {"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"authorTitle":"Steffen Rebhahn","authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"}}
@@ -10,8 +10,8 @@
10
10
  {{#with this.teaseritem }}
11
11
  {{#if this.isImage}}
12
12
  {{> components/content/copytext/components/image/figure
13
- _cssClass="article-breakout !mb-0"
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"
@@ -17,5 +17,12 @@ export const Default = {
17
17
  args: story_json,
18
18
  parameters: {
19
19
  layout: 'fullscreen',
20
- }
20
+ },
21
+ decorators: [
22
+ (Story) => {
23
+ return `<div class="grid grid-page">
24
+ ${Story()}
25
+ </div>`
26
+ },
27
+ ],
21
28
  }
@@ -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 _cssClasses='programReference__link'}}
6
+ {{#>components/base/link _link=this.link }}
7
7
  {{#if this.content.programLogo}}
8
8
  {{#with this.content.programLogo}}
9
9
  <img