@bonniernews/dn-design-system-web 3.0.0-alpha.23 → 3.0.0-alpha.25

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 (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/assets/article-image/article-image.njk +9 -9
  3. package/components/article-body-image/README.md +1 -1
  4. package/components/article-top-image/README.md +1 -1
  5. package/components/image-caption/README.md +1 -1
  6. package/components/video-caption/video-caption.njk +5 -1
  7. package/foundations/variables/typographyTokensScreenLarge.scss +24 -24
  8. package/foundations/variables/typographyTokensScreenSmall.scss +24 -24
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 3.0.0-alpha.25 (2023-04-05)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ ## 3.0.0-alpha.24 (2023-04-03)
15
+
16
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
17
+
18
+
19
+
20
+
21
+
6
22
  ## 3.0.0-alpha.23 (2023-03-31)
7
23
 
8
24
 
package/assets/article-image/article-image.njk CHANGED
@@ -20,15 +20,15 @@
20
20
  {% endif %}
21
21
 
22
22
  {% if params.caption or params.author %}
23
- {% set caption = params.caption if params.caption else "" %}
24
- {% set author = params.author if params.author else "" %}
25
- {% set imageType = params.imageType if params.imageType else "" %}
26
- {{ ImageCaption({
27
- caption: caption,
28
- author: author,
29
- imageType: imageType,
30
- forcePx: params.forcePx
31
- })}}
23
+ {% set caption = params.caption if params.caption else "" %}
24
+ {% set author = params.author if params.author else "" %}
25
+ {% set imageType = params.imageType if params.imageType else "" %}
26
+ {{ ImageCaption({
27
+ caption: caption,
28
+ author: author,
29
+ imageType: imageType,
30
+ forcePx: params.forcePx
31
+ })}}
32
32
  {% endif %}
33
33
  </figure>
34
34
  {% endmacro %}
package/components/article-body-image/README.md CHANGED
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
32
32
  fullWidth: true,
33
33
  caption: "En bildtext",
34
34
  imageType: "Foto",
35
- author: "Paul Hansen",
35
+ author: "Paul Hansen"
36
36
  })}}
37
37
  ```
38
38
 
package/components/article-top-image/README.md CHANGED
@@ -30,7 +30,7 @@ These are copy paste friendly examples to quickliy get started using a component
30
30
  imageHtml: exampleArticleTopImageHtml(),
31
31
  caption: "En bildtext",
32
32
  imageType: "Foto",
33
- author: "Beatrice Lundborg",
33
+ author: "Beatrice Lundborg"
34
34
  })}}
35
35
  ```
36
36
 
package/components/image-caption/README.md CHANGED
@@ -28,7 +28,7 @@ These are copy paste friendly examples to quickliy get started using a component
28
28
  {{ ImageCaption({
29
29
  caption: "En bildtext",
30
30
  imageType: "Foto",
31
- author: "Paul Hansen",
31
+ author: "Paul Hansen"
32
32
  })}}
33
33
  ```
34
34
 
package/components/video-caption/video-caption.njk CHANGED
@@ -1,4 +1,5 @@
1
1
  {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+ {% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
2
3
 
3
4
  {% macro VideoCaption(params) %}
4
5
  {%- set componentClassName = "ds-video-caption" %}
@@ -13,9 +14,12 @@
13
14
  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
14
15
  <figcaption class="{{ classes }}" {{- attributes | safe }}>
15
16
  {%- if params.duration -%}
16
- <span class="{{ componentClassName + '__duration'}}" aria-label="Videon är {{ params.duration }} lång">
17
+ <span class="{{ componentClassName + '__duration'}}" aria-hidden="true">
17
18
  {{- params.duration -}}
18
19
  </span>
20
+ {{ VisuallyHidden({
21
+ text: "Videon är " + params.duration + " lång."
22
+ })}}
19
23
  {%- endif %}
20
24
  {% if params.caption -%}
21
25
  <span class="{{ componentClassName + '__text'}}">
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -20,21 +20,21 @@ $typographyTokensScreenLarge: (
20
20
  expressive-heading01italicregular: (
21
21
  lineHeight: 20,
22
22
  fontSize: 16,
23
- fontFamily: "DN Serif Italic 25",
23
+ fontFamily: "DN Serif Italic",
24
24
  fontWeight: Regular,
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading01italicsemibold: (
28
28
  lineHeight: 20,
29
29
  fontSize: 16,
30
- fontFamily: "DN Serif Italic 25",
30
+ fontFamily: "DN Serif Italic",
31
31
  fontWeight: SemiBold,
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading01italicbold: (
35
35
  lineHeight: 20,
36
36
  fontSize: 16,
37
- fontFamily: "DN Serif Italic 25",
37
+ fontFamily: "DN Serif Italic",
38
38
  fontWeight: Bold,
39
39
  fontStyle: italic
40
40
  ),
@@ -61,21 +61,21 @@ $typographyTokensScreenLarge: (
61
61
  fontSize: 22,
62
62
  lineHeight: 26,
63
63
  fontWeight: Regular,
64
- fontFamily: "DN Serif Italic 25",
64
+ fontFamily: "DN Serif Italic",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicsemibold: (
68
68
  fontSize: 22,
69
69
  lineHeight: 26,
70
70
  fontWeight: SemiBold,
71
- fontFamily: "DN Serif Italic 25",
71
+ fontFamily: "DN Serif Italic",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
75
  fontSize: 22,
76
76
  lineHeight: 26,
77
77
  fontWeight: Bold,
78
- fontFamily: "DN Serif Italic 25",
78
+ fontFamily: "DN Serif Italic",
79
79
  fontStyle: italic
80
80
  ),
81
81
  expressive-heading03regular: (
@@ -100,21 +100,21 @@ $typographyTokensScreenLarge: (
100
100
  fontSize: 32,
101
101
  lineHeight: 36,
102
102
  fontWeight: Regular,
103
- fontFamily: "DN Serif Italic 25",
103
+ fontFamily: "DN Serif Italic",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
107
  fontSize: 32,
108
108
  lineHeight: 36,
109
109
  fontWeight: SemiBold,
110
- fontFamily: "DN Serif Italic 25",
110
+ fontFamily: "DN Serif Italic",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
114
  fontSize: 32,
115
115
  lineHeight: 36,
116
116
  fontWeight: Bold,
117
- fontFamily: "DN Serif Italic 25",
117
+ fontFamily: "DN Serif Italic",
118
118
  fontStyle: italic
119
119
  ),
120
120
  expressive-heading04regular: (
@@ -139,21 +139,21 @@ $typographyTokensScreenLarge: (
139
139
  fontSize: 48,
140
140
  lineHeight: 52,
141
141
  fontWeight: Regular,
142
- fontFamily: "DN Serif Italic 25",
142
+ fontFamily: "DN Serif Italic",
143
143
  fontStyle: italic
144
144
  ),
145
145
  expressive-heading04italicsemibold: (
146
146
  fontSize: 48,
147
147
  lineHeight: 52,
148
148
  fontWeight: SemiBold,
149
- fontFamily: "DN Serif Italic 25",
149
+ fontFamily: "DN Serif Italic",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
153
  fontSize: 48,
154
154
  lineHeight: 52,
155
155
  fontWeight: Bold,
156
- fontFamily: "DN Serif Italic 25",
156
+ fontFamily: "DN Serif Italic",
157
157
  fontStyle: italic
158
158
  ),
159
159
  expressive-heading05regular: (
@@ -175,21 +175,21 @@ $typographyTokensScreenLarge: (
175
175
  fontSize: 56
176
176
  ),
177
177
  expressive-heading05italicregular: (
178
- fontFamily: "DN Serif Italic 25",
178
+ fontFamily: "DN Serif Italic",
179
179
  fontWeight: Regular,
180
180
  fontSize: 56,
181
181
  lineHeight: 64,
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading05italicsemibold: (
185
- fontFamily: "DN Serif Italic 25",
185
+ fontFamily: "DN Serif Italic",
186
186
  fontWeight: SemiBold,
187
187
  fontSize: 56,
188
188
  lineHeight: 64,
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading05italicbold: (
192
- fontFamily: "DN Serif Italic 25",
192
+ fontFamily: "DN Serif Italic",
193
193
  fontWeight: Bold,
194
194
  fontSize: 56,
195
195
  lineHeight: 64,
@@ -304,21 +304,21 @@ $typographyTokensScreenLarge: (
304
304
  lineHeight: 30
305
305
  ),
306
306
  expressive-preamble01italicregular: (
307
- fontFamily: "DN Serif Italic 25",
307
+ fontFamily: "DN Serif Italic",
308
308
  fontWeight: Regular,
309
309
  lineHeight: 30,
310
310
  fontSize: 20,
311
311
  fontStyle: italic
312
312
  ),
313
313
  expressive-preamble01italicsemibold: (
314
- fontFamily: "DN Serif Italic 25",
314
+ fontFamily: "DN Serif Italic",
315
315
  fontWeight: SemiBold,
316
316
  lineHeight: 30,
317
317
  fontSize: 20,
318
318
  fontStyle: italic
319
319
  ),
320
320
  expressive-preamble01italicbold: (
321
- fontFamily: "DN Serif Italic 25",
321
+ fontFamily: "DN Serif Italic",
322
322
  fontWeight: Bold,
323
323
  lineHeight: 30,
324
324
  fontSize: 20,
@@ -343,21 +343,21 @@ $typographyTokensScreenLarge: (
343
343
  lineHeight: 24
344
344
  ),
345
345
  expressive-body01italicregular: (
346
- fontFamily: "DN Serif Italic 25",
346
+ fontFamily: "DN Serif Italic",
347
347
  fontWeight: Regular,
348
348
  lineHeight: 24,
349
349
  fontSize: 16,
350
350
  fontStyle: italic
351
351
  ),
352
352
  expressive-body01italicsemibold: (
353
- fontFamily: "DN Serif Italic 25",
353
+ fontFamily: "DN Serif Italic",
354
354
  fontWeight: SemiBold,
355
355
  lineHeight: 24,
356
356
  fontSize: 16,
357
357
  fontStyle: italic
358
358
  ),
359
359
  expressive-body01italicbold: (
360
- fontFamily: "DN Serif Italic 25",
360
+ fontFamily: "DN Serif Italic",
361
361
  fontWeight: Bold,
362
362
  lineHeight: 24,
363
363
  fontSize: 16,
@@ -382,21 +382,21 @@ $typographyTokensScreenLarge: (
382
382
  fontSize: 18
383
383
  ),
384
384
  expressive-body02italicregular: (
385
- fontFamily: "DN Serif Italic 25",
385
+ fontFamily: "DN Serif Italic",
386
386
  fontWeight: Regular,
387
387
  lineHeight: 28,
388
388
  fontSize: 18,
389
389
  fontStyle: italic
390
390
  ),
391
391
  expressive-body02italicsemibold: (
392
- fontFamily: "DN Serif Italic 25",
392
+ fontFamily: "DN Serif Italic",
393
393
  fontWeight: SemiBold,
394
394
  lineHeight: 28,
395
395
  fontSize: 18,
396
396
  fontStyle: italic
397
397
  ),
398
398
  expressive-body02italicbold: (
399
- fontFamily: "DN Serif Italic 25",
399
+ fontFamily: "DN Serif Italic",
400
400
  fontWeight: Bold,
401
401
  lineHeight: 28,
402
402
  fontSize: 18,
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -18,7 +18,7 @@ $typographyTokensScreenSmall: (
18
18
  lineHeight: 20
19
19
  ),
20
20
  expressive-heading01italicregular: (
21
- fontFamily: "DN Serif Italic 25",
21
+ fontFamily: "DN Serif Italic",
22
22
  fontWeight: Regular,
23
23
  fontSize: 16,
24
24
  letterSpacing: "",
@@ -26,7 +26,7 @@ $typographyTokensScreenSmall: (
26
26
  fontStyle: italic
27
27
  ),
28
28
  expressive-heading01italicsemibold: (
29
- fontFamily: "DN Serif Italic 25",
29
+ fontFamily: "DN Serif Italic",
30
30
  fontWeight: SemiBold,
31
31
  fontSize: 16,
32
32
  letterSpacing: "",
@@ -34,7 +34,7 @@ $typographyTokensScreenSmall: (
34
34
  fontStyle: italic
35
35
  ),
36
36
  expressive-heading01italicbold: (
37
- fontFamily: "DN Serif Italic 25",
37
+ fontFamily: "DN Serif Italic",
38
38
  fontWeight: Bold,
39
39
  fontSize: 16,
40
40
  letterSpacing: "",
@@ -60,21 +60,21 @@ $typographyTokensScreenSmall: (
60
60
  lineHeight: 20
61
61
  ),
62
62
  expressive-heading02italicregular: (
63
- fontFamily: "DN Serif Italic 25",
63
+ fontFamily: "DN Serif Italic",
64
64
  fontWeight: Regular,
65
65
  fontSize: 16,
66
66
  lineHeight: 20,
67
67
  fontStyle: italic
68
68
  ),
69
69
  expressive-heading02italicsemibold: (
70
- fontFamily: "DN Serif Italic 25",
70
+ fontFamily: "DN Serif Italic",
71
71
  fontWeight: SemiBold,
72
72
  fontSize: 16,
73
73
  lineHeight: 20,
74
74
  fontStyle: italic
75
75
  ),
76
76
  expressive-heading02italicbold: (
77
- fontFamily: "DN Serif Italic 25",
77
+ fontFamily: "DN Serif Italic",
78
78
  fontWeight: Bold,
79
79
  fontSize: 16,
80
80
  lineHeight: 20,
@@ -99,21 +99,21 @@ $typographyTokensScreenSmall: (
99
99
  lineHeight: 24
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
- fontFamily: "DN Serif Italic 25",
102
+ fontFamily: "DN Serif Italic",
103
103
  fontSize: 20,
104
104
  lineHeight: 24,
105
105
  fontWeight: Regular,
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicsemibold: (
109
- fontFamily: "DN Serif Italic 25",
109
+ fontFamily: "DN Serif Italic",
110
110
  fontSize: 20,
111
111
  lineHeight: 24,
112
112
  fontWeight: SemiBold,
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
- fontFamily: "DN Serif Italic 25",
116
+ fontFamily: "DN Serif Italic",
117
117
  fontSize: 20,
118
118
  lineHeight: 24,
119
119
  fontWeight: Bold,
@@ -138,21 +138,21 @@ $typographyTokensScreenSmall: (
138
138
  lineHeight: 32
139
139
  ),
140
140
  expressive-heading04italicregular: (
141
- fontFamily: "DN Serif Italic 25",
141
+ fontFamily: "DN Serif Italic",
142
142
  fontWeight: Regular,
143
143
  lineHeight: 32,
144
144
  fontSize: 26,
145
145
  fontStyle: italic
146
146
  ),
147
147
  expressive-heading04italicsemibold: (
148
- fontFamily: "DN Serif Italic 25",
148
+ fontFamily: "DN Serif Italic",
149
149
  fontWeight: SemiBold,
150
150
  lineHeight: 32,
151
151
  fontSize: 26,
152
152
  fontStyle: italic
153
153
  ),
154
154
  expressive-heading04italicbold: (
155
- fontFamily: "DN Serif Italic 25",
155
+ fontFamily: "DN Serif Italic",
156
156
  fontWeight: Bold,
157
157
  lineHeight: 32,
158
158
  fontSize: 26,
@@ -179,21 +179,21 @@ $typographyTokensScreenSmall: (
179
179
  letterSpacing: ""
180
180
  ),
181
181
  expressive-heading05italicregular: (
182
- fontFamily: "DN Serif Italic 25",
182
+ fontFamily: "DN Serif Italic",
183
183
  fontWeight: Regular,
184
184
  lineHeight: 36,
185
185
  fontSize: 32,
186
186
  fontStyle: italic
187
187
  ),
188
188
  expressive-heading05italicsemibold: (
189
- fontFamily: "DN Serif Italic 25",
189
+ fontFamily: "DN Serif Italic",
190
190
  fontWeight: SemiBold,
191
191
  lineHeight: 36,
192
192
  fontSize: 32,
193
193
  fontStyle: italic
194
194
  ),
195
195
  expressive-heading05italicbold: (
196
- fontFamily: "DN Serif Italic 25",
196
+ fontFamily: "DN Serif Italic",
197
197
  fontWeight: Bold,
198
198
  lineHeight: 36,
199
199
  fontSize: 32,
@@ -308,21 +308,21 @@ $typographyTokensScreenSmall: (
308
308
  lineHeight: 26
309
309
  ),
310
310
  expressive-preamble01italicregular: (
311
- fontFamily: "DN Serif Italic 25",
311
+ fontFamily: "DN Serif Italic",
312
312
  fontWeight: Regular,
313
313
  fontSize: 18,
314
314
  lineHeight: 26,
315
315
  fontStyle: italic
316
316
  ),
317
317
  expressive-preamble01italicsemibold: (
318
- fontFamily: "DN Serif Italic 25",
318
+ fontFamily: "DN Serif Italic",
319
319
  fontWeight: SemiBold,
320
320
  fontSize: 18,
321
321
  lineHeight: 26,
322
322
  fontStyle: italic
323
323
  ),
324
324
  expressive-preamble01italicbold: (
325
- fontFamily: "DN Serif Italic 25",
325
+ fontFamily: "DN Serif Italic",
326
326
  fontWeight: Bold,
327
327
  fontSize: 18,
328
328
  lineHeight: 26,
@@ -347,21 +347,21 @@ $typographyTokensScreenSmall: (
347
347
  lineHeight: 24
348
348
  ),
349
349
  expressive-body01italicregular: (
350
- fontFamily: "DN Serif Italic 25",
350
+ fontFamily: "DN Serif Italic",
351
351
  fontWeight: Regular,
352
352
  lineHeight: 24,
353
353
  fontSize: 16,
354
354
  fontStyle: italic
355
355
  ),
356
356
  expressive-body01italicsemibold: (
357
- fontFamily: "DN Serif Italic 25",
357
+ fontFamily: "DN Serif Italic",
358
358
  fontWeight: SemiBold,
359
359
  lineHeight: 24,
360
360
  fontSize: 16,
361
361
  fontStyle: italic
362
362
  ),
363
363
  expressive-body01italicbold: (
364
- fontFamily: "DN Serif Italic 25",
364
+ fontFamily: "DN Serif Italic",
365
365
  fontWeight: Bold,
366
366
  lineHeight: 24,
367
367
  fontSize: 16,
@@ -387,21 +387,21 @@ $typographyTokensScreenSmall: (
387
387
  fontSize: 18
388
388
  ),
389
389
  expressive-body02italicregular: (
390
- fontFamily: "DN Serif Italic 25",
390
+ fontFamily: "DN Serif Italic",
391
391
  fontWeight: Regular,
392
392
  lineHeight: 28,
393
393
  fontSize: 18,
394
394
  fontStyle: italic
395
395
  ),
396
396
  expressive-body02italicsemibold: (
397
- fontFamily: "DN Serif Italic 25",
397
+ fontFamily: "DN Serif Italic",
398
398
  fontWeight: SemiBold,
399
399
  lineHeight: 28,
400
400
  fontSize: 18,
401
401
  fontStyle: italic
402
402
  ),
403
403
  expressive-body02italicbold: (
404
- fontFamily: "DN Serif Italic 25",
404
+ fontFamily: "DN Serif Italic",
405
405
  fontWeight: Bold,
406
406
  lineHeight: 28,
407
407
  fontSize: 18,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.23",
3
+ "version": "3.0.0-alpha.25",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",