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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+
 ## [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)
 
 

package/components/pictogram/README.md

@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | variant | "brand", "business" | "brand" |
 | iconName\* | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
-| size | "small", "large" | "small" |
+| size | "large", "small" | "small" |
 | classNames | string | \- |
 | attributes | object | \- |
 | forcePx | boolean | \- |

package/components/spinner/README.md

@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | variant | "brand", "secondary", "primary", "onBrand", "onBusiness", "staticBlack", "staticWhite" | "primary" |
-| size | "small", "large", "xsmall" | "large" |
+| size | "large", "small", "xsmall" | "large" |
 | forcePx | boolean | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

package/components/teaser-list-vertical/README-njk.md

@@ -0,0 +1,57 @@
+- 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)
+- Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
+- Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)
+
+----
+
+# teaser-list-vertical
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|listTitle | String | yes | | | List title |
+|listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
+|flexible | bool | no | true, false | false | |
+|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 } ] |
+|~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
+
+{{ TeaserListVertical({
+  listTitle: "Senaste artiklarna",
+  listLink: { text: "Alla nyheter", url: "#"},
+  flexible: true,
+  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" } } ]
+})}}
+
+{{ TeaserListVertical({
+  listTitle: "Senaste klippen",
+  mediaIcon: "play_arrow-filled",
+  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" } } ]
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
+```
+### Javascript
+
+Only run this if there is a scrollable list
+```javascript
+import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
+const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
+dsTeaserListVertical(teaserListVerticalWrappers);
+```

package/components/teaser-list-vertical/README.md

@@ -1,57 +1,61 @@
-- 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)
-- Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
-- Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)
-
-----
-
-# teaser-list-vertical
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|listTitle | String | yes | | | List title |
-|listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
-|flexible | bool | no | true, false | false | |
-|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 } ] |
-|~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
-
-{{ TeaserListVertical({
-  listTitle: "Senaste artiklarna",
-  listLink: { text: "Alla nyheter", url: "#"},
-  flexible: true,
-  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" } } ]
-})}}
-
-{{ TeaserListVertical({
-  listTitle: "Senaste klippen",
-  mediaIcon: "play_arrow-filled",
-  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" } } ]
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
-```
-### Javascript
-
-Only run this if there is a scrollable list
-```javascript
-import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
-const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
-dsTeaserListVertical(teaserListVerticalWrappers);
-```
+TeaserListVertical
+==================
+
+*   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)
+*   Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
+
+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'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| listTitle\* | List title<br />string | \- |
+| listLink\* | Ex. { text: "Alla nyheter", url: "#" }<br />ListLink | \- |
+| flexible | If true, the list will be flexible<br />boolean | false |
+| 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\[\] | \- |
+| theme | The theme-class to apply to _all_ teasers in the list.<br />"kultur", "nyheter" | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+
+```jsx
+<TeaserListVertical
+  listLink={{
+    text: 'Alla nyheter',
+    url: '#'
+  }}
+  listTitle="Senaste artiklarna"
+  teasers={[
+    {
+      publicationTime: '14:25',
+      sectionName: 'Världen',
+      targetLink: '#',
+      title: 'Ukraina och Nato närmar sig varandra'
+    },
+    {
+      publicationTime: '14:20',
+      sectionName: 'Världen',
+      targetLink: '#',
+      title: 'Protester mot Sverige i Pakistan'
+    },
+    {
+      publicationTime: '14:06',
+      sectionName: 'Kultur',
+      targetLink: '#',
+      title: 'Därför frossar populärkulturen i nostalgi: ”Vill tillbaka till kollektiv glädje”'
+    },
+    {
+      highlight: undefined,
+      publicationTime: '14:25',
+      sectionName: 'Sverige',
+      targetLink: '#',
+      title: 'Växlingskontor tvättade miljontals kronor – tre män döms till långa fängelsestraff'
+    },
+    {
+      highlight: undefined,
+      publicationTime: 'I GÅR 12:28',
+      sectionName: 'Kultur',
+      targetLink: '#',
+      title: 'Hanna Fahl: Malmö var det enda rimliga valet för Eurovision'
+    }
+  ]}
+/>
+```

package/components/teaser-native/README-NJK.md

@@ -0,0 +1,41 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-native](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-native)
+- Storybook: [TeaserNative](https://designsystem.dn.se/?path=/docs/section-teasernative--docs)
+- Storybook (Latest): [TeaserNative](https://designsystem-latest.dn.se/?path=/docs/section-teasernative--docs)
+
+----
+
+# teaser-native
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|nativeVariant | String | no | "standard" or "large" or "right"  | "standard" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+These are copy paste friendly examples to quickly get started using a component.
+
+### Nunjucks
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-native/teaser-native.njk' import TeaserNative %}
+
+{{ TeaserNative({
+  title: "Fossilfri vätgas – en nyckel till minskade koldioxidutsläpp",
+  text: "Det blir en viktig konkurrensfördel att kunna leverera produkter som inte skadar klimatet",
+  vignette: "Innehåll från Vattenfall"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-native/teaser-native";
+```

package/components/teaser-native/teaser-native.njk

@@ -22,7 +22,7 @@
 
   {% if params.mediaHtml and nativeVariant !== "standard" %}
     <div class="{{ componentClassName + '__media'}}">
-      {{ params.mediaHtml }}
+      {{ params.mediaHtml | safe}}
     </div>
   {% endif %}
 
@@ -33,7 +33,7 @@
         componentClassName + '__media--rounded'
       ] | join(" ") %}
       <div class="{{ mediaClass }}">
-        {{ params.mediaHtml }}
+        {{ params.mediaHtml | safe }}
       </div>
     {% endif %}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.26",
+  "version": "32.7.28",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/teaser-counter/teaser-counter.d.ts

@@ -1,5 +1,5 @@
 import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
-import { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
+import type { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
 interface TeaserCounterProps extends SharedProps, Pick<TeaserProps, 'media' | 'title' | 'targetLink' | 'areaType'> {
     counterText: string;
     counterNumber: number;