hr-design-system-handlebars 1.59.8 → 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 (30) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +27 -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/story/story_article.hbs +2 -2
  10. package/dist/views/components/program_supplier/program_supplier.hbs +1 -1
  11. package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
  12. package/dist/views_static/components/content/copytext/components/filedownload.hbs +2 -2
  13. package/dist/views_static/components/content/copytext/components/image/figcaption.hbs +1 -1
  14. package/dist/views_static/components/content/copytext/components/image/figure.hbs +1 -1
  15. package/dist/views_static/components/content/copytext/components/image/image.hbs +4 -4
  16. package/dist/views_static/components/content/copytext/components/infobox.hbs +6 -6
  17. package/dist/views_static/components/page/story/story_article.hbs +2 -2
  18. package/dist/views_static/components/program_supplier/program_supplier.hbs +1 -1
  19. package/package.json +1 -1
  20. package/src/assets/css/custom-utilities.css +3 -3
  21. package/src/assets/tailwind.css +6 -0
  22. package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +2 -2
  23. package/src/stories/views/components/content/copytext/components/filedownload.hbs +2 -2
  24. package/src/stories/views/components/content/copytext/components/image/figcaption.hbs +1 -1
  25. package/src/stories/views/components/content/copytext/components/image/figure.hbs +1 -1
  26. package/src/stories/views/components/content/copytext/components/image/image.hbs +4 -4
  27. package/src/stories/views/components/content/copytext/components/infobox.hbs +6 -6
  28. package/src/stories/views/components/page/story/story_article.hbs +2 -2
  29. package/src/stories/views/components/page/story/story_main.stories.js +8 -1
  30. package/src/stories/views/components/program_supplier/program_supplier.hbs +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
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
+
1
13
  # v1.59.8 (Fri Feb 23 2024)
2
14
 
3
15
  #### 🐛 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: cnt1708712754446;
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: cnt1708712754446 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(cnt1708712754446);
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;
@@ -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="!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"
package/dist/views/components/content/copytext/components/filedownload.hbs CHANGED
@@ -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"
package/dist/views/components/content/copytext/components/image/figcaption.hbs CHANGED
@@ -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,
package/dist/views/components/content/copytext/components/image/figure.hbs CHANGED
@@ -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}}
package/dist/views/components/content/copytext/components/image/image.hbs CHANGED
@@ -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"
package/dist/views/components/content/copytext/components/infobox.hbs CHANGED
@@ -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"
package/dist/views/components/page/story/story_article.hbs CHANGED
@@ -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"
package/dist/views/components/program_supplier/program_supplier.hbs CHANGED
@@ -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/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="!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"
package/dist/views_static/components/content/copytext/components/filedownload.hbs CHANGED
@@ -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"
package/dist/views_static/components/content/copytext/components/image/figcaption.hbs CHANGED
@@ -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,
package/dist/views_static/components/content/copytext/components/image/figure.hbs CHANGED
@@ -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}}
package/dist/views_static/components/content/copytext/components/image/image.hbs CHANGED
@@ -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"
package/dist/views_static/components/content/copytext/components/infobox.hbs CHANGED
@@ -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"
package/dist/views_static/components/page/story/story_article.hbs CHANGED
@@ -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"
package/dist/views_static/components/program_supplier/program_supplier.hbs CHANGED
@@ -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.8",
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",
package/src/assets/css/custom-utilities.css CHANGED
@@ -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
 
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="!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"
package/src/stories/views/components/content/copytext/components/filedownload.hbs CHANGED
@@ -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"
package/src/stories/views/components/content/copytext/components/image/figcaption.hbs CHANGED
@@ -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,
package/src/stories/views/components/content/copytext/components/image/figure.hbs CHANGED
@@ -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}}
package/src/stories/views/components/content/copytext/components/image/image.hbs CHANGED
@@ -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"
package/src/stories/views/components/content/copytext/components/infobox.hbs CHANGED
@@ -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"
package/src/stories/views/components/page/story/story_article.hbs CHANGED
@@ -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"
package/src/stories/views/components/page/story/story_main.stories.js CHANGED
@@ -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
  }
package/src/stories/views/components/program_supplier/program_supplier.hbs CHANGED
@@ -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