@bonniernews/dn-design-system-web 32.3.2 → 32.4.1

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 (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/components/video-caption/README-NJK.md +37 -0
  3. package/components/video-caption/README.md +22 -37
  4. package/foundations/variables/colorsDnDark.scss +1 -1
  5. package/foundations/variables/typographyList.scss +5 -4
  6. package/foundations/variables/typographyScreenExtraLarge.scss +33 -26
  7. package/foundations/variables/typographyScreenLarge.scss +33 -26
  8. package/foundations/variables/typographyScreenSmall.scss +33 -26
  9. package/package.json +1 -1
  10. package/preact/components/video-caption/video-caption.d.ts +20 -0
  11. package/preact/components/video-caption/video-caption.js +31 -0
  12. package/preact/components/video-caption/video-caption.js.map +7 -0
  13. package/preact/foundations/a11y/visually-hidden.d.ts +4 -0
  14. package/variables/colors-dark-mode.json +1 -1
  15. package/variables/typography-list.json +6 -5
package/CHANGELOG.md CHANGED
@@ -4,6 +4,22 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.4.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.0...@bonniernews/dn-design-system-web@32.4.1) (2025-05-23)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **foundations:** update variables from Figma ([#1747](https://github.com/BonnierNews/dn-design-system/issues/1747)) ([0d268c2](https://github.com/BonnierNews/dn-design-system/commit/0d268c274d6704f707e63e0a72e4ba9e28d31dde))
13
+ * prerelease packages ([cd36380](https://github.com/BonnierNews/dn-design-system/commit/cd36380468c30032e363d97552fdf642a3863f55))
14
+ * **web:** fix broken workflow ([#1748](https://github.com/BonnierNews/dn-design-system/issues/1748)) ([96320ca](https://github.com/BonnierNews/dn-design-system/commit/96320ca146bcdc20dd6131fb0ff1b2f999f7b044))
15
+
16
+ ## [32.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.2...@bonniernews/dn-design-system-web@32.4.0) (2025-05-19)
17
+
18
+
19
+ ### Features
20
+
21
+ * **web:** videocaption as tsx ([#1737](https://github.com/BonnierNews/dn-design-system/issues/1737)) ([fe29ca1](https://github.com/BonnierNews/dn-design-system/commit/fe29ca158036190b9af50917832a29f7e43ddbd8))
22
+
7
23
  ## [32.3.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.1...@bonniernews/dn-design-system-web@32.3.2) (2025-05-19)
8
24
 
9
25
 
package/components/video-caption/README-NJK.md ADDED
@@ -0,0 +1,37 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
2
+ - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
3
+ - Storybook (Latest): [VideoCaption](https://designsystem-latest.dn.se/?path=/docs/article-videocaption--docs)
4
+
5
+ ----
6
+
7
+ # VideoCaption
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |caption | String | no | | | |
14
+ |duration | String | no | | | |
15
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
+ |classNames | String | no | | | Ex. "my-special-class" |
17
+ |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
18
+
19
+ ## Minimum requirement example
20
+
21
+ ### Nunjucks
22
+
23
+ These are copy paste friendly examples to quickliy get started using a component.
24
+
25
+ ```html
26
+ {% from '@bonniernews/dn-design-system-web/components/video-caption/video-caption.njk' import VideoCaption %}
27
+
28
+ {{ VideoCaption({
29
+ caption: "Tre år har gått sedan terrordåden i Paris.",
30
+ duration: "47 sek"
31
+ }) }}
32
+ ```
33
+
34
+ ### SCSS
35
+ ```scss
36
+ @use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
37
+ ```
package/components/video-caption/README.md CHANGED
@@ -1,37 +1,22 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
2
- - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
3
- - Storybook (Latest): [VideoCaption](https://designsystem-latest.dn.se/?path=/docs/article-videocaption--docs)
4
-
5
- ----
6
-
7
- # VideoCaption
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |caption | String | no | | | |
14
- |duration | String | no | | | |
15
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
- |classNames | String | no | | | Ex. "my-special-class" |
17
- |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
18
-
19
- ## Minimum requirement example
20
-
21
- ### Nunjucks
22
-
23
- These are copy paste friendly examples to quickliy get started using a component.
24
-
25
- ```html
26
- {% from '@bonniernews/dn-design-system-web/components/video-caption/video-caption.njk' import VideoCaption %}
27
-
28
- {{ VideoCaption({
29
- caption: "Tre år har gått sedan terrordåden i Paris.",
30
- duration: "47 sek"
31
- }) }}
32
- ```
33
-
34
- ### SCSS
35
- ```scss
36
- @use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
37
- ```
1
+ VideoCaption
2
+ ============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
5
+ * Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
6
+
7
+ The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/video-caption/video-caption.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | caption | Ex: "Detta är en bildtext"<br />string | \- |
12
+ | duration | Ex: "01:23"<br />string | \- |
13
+ | classNames | Ex: "my-special-class another-class"<br />string | \- |
14
+ | attributes | Ex: { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
15
+ | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
16
+
17
+ ```jsx
18
+ <VideoCaption
19
+ caption="Tre år har gått sedan terrordåden i Paris. 130 människor dog och hundratals skadades i attackerna. Nu inför Frankrike omstridda antiterrorlaga"
20
+ duration="47 sek"
21
+ />
22
+ ```
package/foundations/variables/colorsDnDark.scss CHANGED
@@ -20,7 +20,7 @@ $ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.25);
20
20
  $ds-hex-dark-border-primary-strongest: #ffffff;
21
21
  $ds-hex-dark-border-primaryinvert: rgba(5, 5, 5, 0.13);
22
22
  $ds-hex-dark-border-primaryinvert-strong: rgba(5, 5, 5, 0.5);
23
- $ds-hex-dark-border-primaryinvert-strongest: #0d0d0d;
23
+ $ds-hex-dark-border-primaryinvert-strongest: #171717;
24
24
  $ds-hex-dark-border-brand: #fd2330;
25
25
  $ds-hex-dark-border-culture: #4293d7;
26
26
  $ds-hex-dark-text-primary: #e5e5e5;
package/foundations/variables/typographyList.scss CHANGED
@@ -30,8 +30,6 @@ $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
30
30
  $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
31
31
  $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
32
32
  $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
33
- $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
34
- $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
35
33
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
36
34
  $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
37
35
  $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
@@ -40,7 +38,8 @@ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
40
38
  $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
41
39
  $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
42
40
  $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
43
- $ds-typography-detail-medryckare: 'detail-medryckare';
41
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
42
+ $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
44
43
  $ds-typography-detail-article-quote: 'detail-article-quote';
45
44
  $ds-typography-detail-article-standard: 'detail-article-standard';
46
45
  $ds-typography-detail-article-direkt: 'detail-article-direkt';
@@ -49,6 +48,8 @@ $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium
49
48
  $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
50
49
  $ds-typography-detail-article-opinion: 'detail-article-opinion';
51
50
  $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
52
- $ds-typography-detail-direkt-header: 'detail-direkt-header';
53
51
  $ds-typography-detail-gameheader: 'detail-gameheader';
54
52
  $ds-typography-detail-dropcap: 'detail-dropcap';
53
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
54
+ $ds-typography-detail-medryckare: 'detail-medryckare';
55
+ $ds-typography-detail-direkt-body: 'detail-direkt-body';
package/foundations/variables/typographyScreenExtraLarge.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenExtraLarge: (
224
224
  fontSize: 80,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 40,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.1,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Display",
238
- fontSize: 36,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenExtraLarge: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Display",
290
+ fontSize: 36,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 40,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenExtraLarge: (
363
356
  fontSize: 28,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 48,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenExtraLarge: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 92,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Display",
377
+ fontSize: 36,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 18,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/foundations/variables/typographyScreenLarge.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenLarge: (
224
224
  fontSize: 56,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 40,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.1,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Display",
238
- fontSize: 26,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenLarge: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Display",
290
+ fontSize: 26,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 40,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenLarge: (
363
356
  fontSize: 28,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 48,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenLarge: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 92,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Display",
377
+ fontSize: 36,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 18,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/foundations/variables/typographyScreenSmall.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenSmall: (
224
224
  fontSize: 32,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 32,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.2,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Headline",
238
- fontSize: 22,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenSmall: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Headline",
290
+ fontSize: 22,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 32,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenSmall: (
363
356
  fontSize: 22,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 32,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenSmall: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 52,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Headline",
377
+ fontSize: 26,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 16,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.3.2",
3
+ "version": "32.4.1",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/preact/components/video-caption/video-caption.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ export interface VideoCaptionProps {
2
+ /** Ex: "Detta är en bildtext" */
3
+ caption?: string;
4
+ /** Ex: "01:23" */
5
+ duration?: string;
6
+ /** Ex: "my-special-class another-class" */
7
+ classNames?: string;
8
+ /** Ex: { target: "_blank", "data-test": "lorem ipsum" } */
9
+ attributes?: object;
10
+ /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
11
+ forcePx?: boolean;
12
+ }
13
+ /**
14
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
15
+ * - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
16
+ *
17
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
18
+ * `@use '@bonniernews/dn-design-system-web/components/video-caption/video-caption.scss'`
19
+ */
20
+ export declare const VideoCaption: ({ caption, duration, classNames, attributes, forcePx }: VideoCaptionProps) => import("preact").JSX.Element;
package/preact/components/video-caption/video-caption.js ADDED
@@ -0,0 +1,31 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/foundations/a11y/visually-hidden.tsx
7
+ import { jsx } from "preact/jsx-runtime";
8
+ var VisuallyHidden = ({ text }) => {
9
+ return /* @__PURE__ */ jsx("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
10
+ };
11
+
12
+ // ../src/components/video-caption/video-caption.tsx
13
+ import { Fragment, jsx as jsx2, jsxs } from "preact/jsx-runtime";
14
+ var VideoCaption = ({ caption, duration, classNames, attributes, forcePx }) => {
15
+ const classes = formatClassString([
16
+ "ds-video-caption",
17
+ forcePx && "ds-force-px",
18
+ classNames
19
+ ]);
20
+ return /* @__PURE__ */ jsxs("figcaption", { className: classes, ...attributes, children: [
21
+ duration && /* @__PURE__ */ jsxs(Fragment, { children: [
22
+ /* @__PURE__ */ jsx2("span", { className: "ds-video-caption__duration", "aria-hidden": "true", children: duration }),
23
+ /* @__PURE__ */ jsx2(VisuallyHidden, { text: `Videon \xE4r ${duration} l\xE5ng.` })
24
+ ] }),
25
+ caption && /* @__PURE__ */ jsx2("span", { className: "ds-video-caption__text", children: caption })
26
+ ] });
27
+ };
28
+ export {
29
+ VideoCaption
30
+ };
31
+ //# sourceMappingURL=video-caption.js.map
package/preact/components/video-caption/video-caption.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../foundations/a11y/visually-hidden.tsx", "../../../components/video-caption/video-caption.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "export interface VisuallyHiddenProps {\n text: string;\n};\n\nexport const VisuallyHidden = ({ text }: VisuallyHiddenProps) => {\n return (<span className=\"visually-hidden\" dangerouslySetInnerHTML={{ __html: text }}></span>);\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { VisuallyHidden } from '../../foundations/a11y/visually-hidden';\n\nexport interface VideoCaptionProps {\n /** Ex: \"Detta \u00E4r en bildtext\" */\n caption?: string;\n /** Ex: \"01:23\" */\n duration?: string;\n /** Ex: \"my-special-class another-class\" */\n classNames?: string;\n /** Ex: { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)\n * - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/video-caption/video-caption.scss'`\n */\nexport const VideoCaption = ({ caption, duration, classNames, attributes, forcePx }: VideoCaptionProps) => {\n const classes = formatClassString([\n 'ds-video-caption',\n forcePx && 'ds-force-px',\n classNames,\n ]);\n\n return (\n <figcaption className={classes} {...attributes}>\n {duration && (\n <>\n <span className=\"ds-video-caption__duration\" aria-hidden=\"true\">\n {duration}\n </span>\n <VisuallyHidden text={`Videon \u00E4r ${duration} l\u00E5ng.`} />\n </>\n )}\n {caption && (\n <span className=\"ds-video-caption__text\">\n {caption}\n </span>\n )}\n </figcaption>\n );\n};\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACGU;AADH,IAAM,iBAAiB,CAAC,EAAE,KAAK,MAA2B;AAC/D,SAAQ,oBAAC,UAAK,WAAU,mBAAkB,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AACvF;;;AC2BQ,mBACE,OAAAA,MADF;AAVD,IAAM,eAAe,CAAC,EAAE,SAAS,UAAU,YAAY,YAAY,QAAQ,MAAyB;AACzG,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACE,qBAAC,gBAAW,WAAW,SAAU,GAAG,YACjC;AAAA,gBACC,iCACE;AAAA,sBAAAA,KAAC,UAAK,WAAU,8BAA6B,eAAY,QACtD,oBACH;AAAA,MACA,gBAAAA,KAAC,kBAAe,MAAM,gBAAa,QAAQ,aAAU;AAAA,OACvD;AAAA,IAED,WACC,gBAAAA,KAAC,UAAK,WAAU,0BACb,mBACH;AAAA,KAEJ;AAEJ;",
6
+ "names": ["jsx"]
7
+ }
package/preact/foundations/a11y/visually-hidden.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export interface VisuallyHiddenProps {
2
+ text: string;
3
+ }
4
+ export declare const VisuallyHidden: ({ text }: VisuallyHiddenProps) => import("preact").JSX.Element;
package/variables/colors-dark-mode.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "primary-strongest": "#ffffff",
25
25
  "primaryinvert": "rgba(5, 5, 5, 0.13)",
26
26
  "primaryinvert-strong": "rgba(5, 5, 5, 0.5)",
27
- "primaryinvert-strongest": "#0d0d0d",
27
+ "primaryinvert-strongest": "#171717",
28
28
  "brand": "#fd2330",
29
29
  "culture": "#4293d7"
30
30
  },
package/variables/typography-list.json CHANGED
@@ -31,8 +31,6 @@
31
31
  "detail-teaser-standard": "'detail-teaser-standard'",
32
32
  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
33
33
  "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
34
- "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
35
- "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
36
34
  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
37
35
  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
38
36
  "detail-teaser-twin": "'detail-teaser-twin'",
@@ -41,7 +39,8 @@
41
39
  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
42
40
  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
43
41
  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
44
- "detail-medryckare": "'detail-medryckare'",
42
+ "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
43
+ "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
45
44
  "detail-article-quote": "'detail-article-quote'",
46
45
  "detail-article-standard": "'detail-article-standard'",
47
46
  "detail-article-direkt": "'detail-article-direkt'",
@@ -50,7 +49,9 @@
50
49
  "detail-article-direct-opinion": "'detail-article-direct-opinion'",
51
50
  "detail-article-opinion": "'detail-article-opinion'",
52
51
  "detail-mellanrubrik": "'detail-mellanrubrik'",
53
- "detail-direkt-header": "'detail-direkt-header'",
54
52
  "detail-gameheader": "'detail-gameheader'",
55
- "detail-dropcap": "'detail-dropcap'"
53
+ "detail-dropcap": "'detail-dropcap'",
54
+ "detail-direkt-header": "'detail-direkt-header'",
55
+ "detail-medryckare": "'detail-medryckare'",
56
+ "detail-direkt-body": "'detail-direkt-body'"
56
57
  }