@bonniernews/dn-design-system-web 32.7.26 → 32.7.28

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 (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/components/pictogram/README.md +1 -1
  3. package/components/spinner/README.md +1 -1
  4. package/components/teaser-list-vertical/README-njk.md +57 -0
  5. package/components/teaser-list-vertical/README.md +61 -57
  6. package/components/teaser-native/README-NJK.md +41 -0
  7. package/components/teaser-native/teaser-native.njk +2 -2
  8. package/package.json +1 -1
  9. package/preact/components/teaser-counter/teaser-counter.d.ts +1 -1
  10. package/preact/components/teaser-counter/teaser-counter.js.map +1 -1
  11. package/preact/components/teaser-list-vertical/teaser-list-vertical.d.ts +30 -0
  12. package/preact/components/teaser-list-vertical/teaser-list-vertical.js +420 -0
  13. package/preact/components/teaser-list-vertical/teaser-list-vertical.js.map +7 -0
  14. package/preact/components/teaser-native/teaser-native.d.ts +15 -0
  15. package/preact/components/teaser-native/teaser-native.js +139 -0
  16. package/preact/components/teaser-native/teaser-native.js.map +7 -0
  17. package/components/teaser-list-vertical/README-UXD.md +0 -0
  18. package/components/teaser-native/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.28](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.27...@bonniernews/dn-design-system-web@32.7.28) (2025-07-10)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** native teaser as tsx ([#1828](https://github.com/BonnierNews/dn-design-system/issues/1828)) ([3732ce3](https://github.com/BonnierNews/dn-design-system/commit/3732ce372364d87844d07331e3ad672cebcf89ca))
13
+
14
+ ## [32.7.27](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.26...@bonniernews/dn-design-system-web@32.7.27) (2025-07-10)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** teaser list vertical tsx ([#1816](https://github.com/BonnierNews/dn-design-system/issues/1816)) ([e675ddd](https://github.com/BonnierNews/dn-design-system/commit/e675ddd61d0ea0f760528ab41378df35e362fae7))
20
+
7
21
  ## [32.7.26](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.25...@bonniernews/dn-design-system-web@32.7.26) (2025-07-10)
8
22
 
9
23
 
package/components/pictogram/README.md CHANGED
@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
10
10
  |:--- | :--- | :--- |
11
11
  | variant | "brand", "business" | "brand" |
12
12
  | iconName\* | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
13
- | size | "small", "large" | "small" |
13
+ | size | "large", "small" | "small" |
14
14
  | classNames | string | \- |
15
15
  | attributes | object | \- |
16
16
  | forcePx | boolean | \- |
package/components/spinner/README.md CHANGED
@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
9
9
  | Name | Description | Default |
10
10
  |:--- | :--- | :--- |
11
11
  | variant | "brand", "secondary", "primary", "onBrand", "onBusiness", "staticBlack", "staticWhite" | "primary" |
12
- | size | "small", "large", "xsmall" | "large" |
12
+ | size | "large", "small", "xsmall" | "large" |
13
13
  | forcePx | boolean | \- |
14
14
  | classNames | Ex. "my-special-class"<br />string | \- |
15
15
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
package/components/teaser-list-vertical/README-njk.md ADDED
@@ -0,0 +1,57 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
2
+ - Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
3
+ - Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)
4
+
5
+ ----
6
+
7
+ # teaser-list-vertical
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |listTitle | String | yes | | | List title |
14
+ |listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
15
+ |flexible | bool | no | true, false | false | |
16
+ |teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } ] |
17
+ |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
18
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
19
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
+ |classNames | String | no | | | Ex. "my-special-class" |
21
+ |~forcePx~ | | | | | Not supported |
22
+
23
+ ## Minimum requirement example
24
+
25
+ ### Nunjucks
26
+
27
+ These are copy paste friendly examples to quickliy get started using a component.
28
+
29
+ ```html
30
+ {% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
31
+
32
+ {{ TeaserListVertical({
33
+ listTitle: "Senaste artiklarna",
34
+ listLink: { text: "Alla nyheter", url: "#"},
35
+ flexible: true,
36
+ teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
37
+ })}}
38
+
39
+ {{ TeaserListVertical({
40
+ listTitle: "Senaste klippen",
41
+ mediaIcon: "play_arrow-filled",
42
+ teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', vignette: "VÄRLDEN", targetLink: '#', theme: 'nyheter', isItalicHeadline: false, publicationTime: 'I går 21:22', mediaHtml: '<div class="picture"><img class="picture__img" src="??"></div>', video: 'true', attributes: { "data-test": "list-item-test-data" } } ]
43
+ })}}
44
+ ```
45
+
46
+ ### SCSS
47
+ ```scss
48
+ @use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
49
+ ```
50
+ ### Javascript
51
+
52
+ Only run this if there is a scrollable list
53
+ ```javascript
54
+ import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
55
+ const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
56
+ dsTeaserListVertical(teaserListVerticalWrappers);
57
+ ```
package/components/teaser-list-vertical/README.md CHANGED
@@ -1,57 +1,61 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
2
- - Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
3
- - Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)
4
-
5
- ----
6
-
7
- # teaser-list-vertical
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listTitle | String | yes | | | List title |
14
- |listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
15
- |flexible | bool | no | true, false | false | |
16
- |teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } ] |
17
- |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
18
- |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
19
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
- |classNames | String | no | | | Ex. "my-special-class" |
21
- |~forcePx~ | | | | | Not supported |
22
-
23
- ## Minimum requirement example
24
-
25
- ### Nunjucks
26
-
27
- These are copy paste friendly examples to quickliy get started using a component.
28
-
29
- ```html
30
- {% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
31
-
32
- {{ TeaserListVertical({
33
- listTitle: "Senaste artiklarna",
34
- listLink: { text: "Alla nyheter", url: "#"},
35
- flexible: true,
36
- teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
37
- })}}
38
-
39
- {{ TeaserListVertical({
40
- listTitle: "Senaste klippen",
41
- mediaIcon: "play_arrow-filled",
42
- teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', vignette: "VÄRLDEN", targetLink: '#', theme: 'nyheter', isItalicHeadline: false, publicationTime: 'I går 21:22', mediaHtml: '<div class="picture"><img class="picture__img" src="??"></div>', video: 'true', attributes: { "data-test": "list-item-test-data" } } ]
43
- })}}
44
- ```
45
-
46
- ### SCSS
47
- ```scss
48
- @use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
49
- ```
50
- ### Javascript
51
-
52
- Only run this if there is a scrollable list
53
- ```javascript
54
- import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
55
- const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
56
- dsTeaserListVertical(teaserListVerticalWrappers);
57
- ```
1
+ TeaserListVertical
2
+ ==================
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
5
+ * Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--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/teaser-list-vertical/teaser-list-vertical.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | listTitle\* | List title<br />string | \- |
12
+ | listLink\* | Ex. { text: "Alla nyheter", url: "#" }<br />ListLink | \- |
13
+ | flexible | If true, the list will be flexible<br />boolean | false |
14
+ | teasers\* | Array with teaser objects. Ex. \[ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } \]<br />ListTeaser\[\] | \- |
15
+ | theme | The theme-class to apply to _all_ teasers in the list.<br />"kultur", "nyheter" | \- |
16
+ | classNames | Ex. "my-special-class"<br />string | \- |
17
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
18
+
19
+ ```jsx
20
+ <TeaserListVertical
21
+ listLink={{
22
+ text: 'Alla nyheter',
23
+ url: '#'
24
+ }}
25
+ listTitle="Senaste artiklarna"
26
+ teasers={[
27
+ {
28
+ publicationTime: '14:25',
29
+ sectionName: 'Världen',
30
+ targetLink: '#',
31
+ title: 'Ukraina och Nato närmar sig varandra'
32
+ },
33
+ {
34
+ publicationTime: '14:20',
35
+ sectionName: 'Världen',
36
+ targetLink: '#',
37
+ title: 'Protester mot Sverige i Pakistan'
38
+ },
39
+ {
40
+ publicationTime: '14:06',
41
+ sectionName: 'Kultur',
42
+ targetLink: '#',
43
+ title: 'Därför frossar populärkulturen i nostalgi: ”Vill tillbaka till kollektiv glädje”'
44
+ },
45
+ {
46
+ highlight: undefined,
47
+ publicationTime: '14:25',
48
+ sectionName: 'Sverige',
49
+ targetLink: '#',
50
+ title: 'Växlingskontor tvättade miljontals kronor – tre män döms till långa fängelsestraff'
51
+ },
52
+ {
53
+ highlight: undefined,
54
+ publicationTime: 'I GÅR 12:28',
55
+ sectionName: 'Kultur',
56
+ targetLink: '#',
57
+ title: 'Hanna Fahl: Malmö var det enda rimliga valet för Eurovision'
58
+ }
59
+ ]}
60
+ />
61
+ ```
package/components/teaser-native/README-NJK.md ADDED
@@ -0,0 +1,41 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-native](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-native)
2
+ - Storybook: [TeaserNative](https://designsystem.dn.se/?path=/docs/section-teasernative--docs)
3
+ - Storybook (Latest): [TeaserNative](https://designsystem-latest.dn.se/?path=/docs/section-teasernative--docs)
4
+
5
+ ----
6
+
7
+ # teaser-native
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |title | String | yes | | | Heading of the teaser |
14
+ |targetLink | String | yes | | | Target URL for the teaser |
15
+ |nativeVariant | String | no | "standard" or "large" or "right" | "standard" | |
16
+ |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
+ |text | String | no | | | Teaser subtext |
18
+ |vignette | String | no | | | Top text in the teaser |
19
+ |mediaHtml | HTML String | no | | | Main image or other media |
20
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
21
+ |classNames | String | no | | | Ex. "my-special-class" |
22
+ |~forcePx~ | | | | | Not supported |
23
+
24
+ ## Minimum requirement example
25
+ These are copy paste friendly examples to quickly get started using a component.
26
+
27
+ ### Nunjucks
28
+ ```html
29
+ {% from '@bonniernews/dn-design-system-web/components/teaser-native/teaser-native.njk' import TeaserNative %}
30
+
31
+ {{ TeaserNative({
32
+ title: "Fossilfri vätgas – en nyckel till minskade koldioxidutsläpp",
33
+ text: "Det blir en viktig konkurrensfördel att kunna leverera produkter som inte skadar klimatet",
34
+ vignette: "Innehåll från Vattenfall"
35
+ })}}
36
+ ```
37
+
38
+ ### SCSS
39
+ ```scss
40
+ @use "@bonniernews/dn-design-system-web/components/teaser-native/teaser-native";
41
+ ```
package/components/teaser-native/teaser-native.njk CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  {% if params.mediaHtml and nativeVariant !== "standard" %}
24
24
  <div class="{{ componentClassName + '__media'}}">
25
- {{ params.mediaHtml }}
25
+ {{ params.mediaHtml | safe}}
26
26
  </div>
27
27
  {% endif %}
28
28
 
@@ -33,7 +33,7 @@
33
33
  componentClassName + '__media--rounded'
34
34
  ] | join(" ") %}
35
35
  <div class="{{ mediaClass }}">
36
- {{ params.mediaHtml }}
36
+ {{ params.mediaHtml | safe }}
37
37
  </div>
38
38
  {% endif %}
39
39
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.26",
3
+ "version": "32.7.28",
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/teaser-counter/teaser-counter.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
2
- import { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
2
+ import type { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
3
3
  interface TeaserCounterProps extends SharedProps, Pick<TeaserProps, 'media' | 'title' | 'targetLink' | 'areaType'> {
4
4
  counterText: string;
5
5
  counterNumber: number;