@bonniernews/dn-design-system-web 32.7.23 → 32.7.25

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.25](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.24...@bonniernews/dn-design-system-web@32.7.25) (2025-07-10)
+
+
+### Bug Fixes
+
+* **web:** teaser large as tsx ([#1821](https://github.com/BonnierNews/dn-design-system/issues/1821)) ([d106246](https://github.com/BonnierNews/dn-design-system/commit/d106246f2e9a2e3b3a65d5d7171b19270c396c13))
+
+## [32.7.24](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.23...@bonniernews/dn-design-system-web@32.7.24) (2025-07-09)
+
+
+### Bug Fixes
+
+* **web:** tag header tsx ([#1826](https://github.com/BonnierNews/dn-design-system/issues/1826)) ([08b70e3](https://github.com/BonnierNews/dn-design-system/commit/08b70e3d56705253a4774bccd51f60c0a650e37c))
+
 ## [32.7.23](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.22...@bonniernews/dn-design-system-web@32.7.23) (2025-07-09)
 
 

package/assets/types/teaser-props.ts

@@ -0,0 +1,44 @@
+import { ComponentChild } from 'preact'
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'
+
+export interface TeaserProps extends SharedProps {
+  /** Heading of the teaser */
+  title: string;
+  /** Target URL for the teaser */
+  targetLink: string;
+  /** Variant of the teaser */
+  variant?: "default" | "podcast";
+  /** The area where the column is rendered */
+  areaType?: "right" | "bauta" | "bautaxl";
+  /** The theme-class to apply to the teaser */
+  theme?: "nyheter" | "kultur";
+  /** Teaser subtext */
+  text?: string;
+  /** Top text in the teaser */
+  vignette?: string;
+  /** Text before the heading */
+  highlight?: string;
+  /** Red text before the text */
+  sticker?: string;
+  /** Main image or other media */
+  media?: ComponentChild;
+  /** Image of the author */
+  bylinePicture?: ComponentChild;
+  /** If the headline should be italic */
+  isItalicHeadline?: boolean;
+  /** If the headline should be large (only if `isItalicHeadline` is true) */
+  isLargeHeadline?: boolean;
+  /** If there should be a flashing ball before the text */
+  isFlashingDot?: boolean;
+  /** Publication time text */
+  publicationTime?: string;
+  /** Duration of podcast */
+  duration?: string;
+  /** Byline aspect ratio */
+  bylineAspectRatio?: string;
+  /** Byline HTML */
+  bylineHtml?: string;
+  /** Shows in teaser footer */
+  sectionName?: string;
+}
+

package/components/group-header/README.md

@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | title\* | The title text<br />string | \- |
-| type | The type of interactive element added to the header<br />"toggle", "link", "icon", "arrows" | "icon" |
+| type | The type of interactive element added to the header<br />"link", "toggle", "icon", "arrows" | "icon" |
 | variant | The design variant, if not bauta or bautaxl the group header will get the 'standard' design<br />"bauta", "bauataxl" | \- |
 | media | The image element for the header<br />ComponentChild | \- |
 | href | If given, the title is rendered as a link<br />string | \- |

package/components/tag-header/README-njk.md

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/tag-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tag-header)
+- Storybook: [TagHeader](https://designsystem.dn.se/?path=/docs/section-Tagheader--docs)
+- Storybook (Latest): [TagHeader](https://designsystem-latest.dn.se/?path=/docs/section-Tagheader--docs)
+
+----
+
+# Tag header
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | H1 Title |
+|vignetteText | String | no | | | Heading of the link box |
+|vignetteTargetUrl | String | no | | | Target URL for the vignette |
+|mediaHtml | String | no | | | Main image |
+|descriptionHtml | String | no | | | Intended use is text, links |
+|articleCount | int | no | | | Total articles on this list-page |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the vignette |
+|toggle | Bool | no | true, false | false | Show/hide toggle button |
+|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|~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/tag-header/tag-header.njk' import TagHeader %}
+
+{{ TagHeader(
+  {
+    vignette: "SPEL",
+    title: "Quiz",
+    descriptionHtml: "<p>Utmana dig själv med smarta quiz av DN:s medarbetare. Välj mellan olika kategorier och svårighetsgrad.</p>"
+  }
+)}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/tag-header/tag-header" as *;
+```

package/components/tag-header/README.md

@@ -1,52 +1,38 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/tag-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tag-header)
-- Storybook: [TagHeader](https://designsystem.dn.se/?path=/docs/section-Tagheader--docs)
-- Storybook (Latest): [TagHeader](https://designsystem-latest.dn.se/?path=/docs/section-Tagheader--docs)
-
-----
-
-# Tag header
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | H1 Title |
-|vignetteText | String | no | | | Heading of the link box |
-|vignetteTargetUrl | String | no | | | Target URL for the vignette |
-|mediaHtml | String | no | | | Main image |
-|descriptionHtml | String | no | | | Intended use is text, links |
-|articleCount | int | no | | | Total articles on this list-page |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the vignette |
-|toggle | Bool | no | true, false | false | Show/hide toggle button |
-|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
-|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
-|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
-|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
-|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
-|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
-|classNames | String | no | | | Ex. "my-special-class" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|~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/tag-header/tag-header.njk' import TagHeader %}
-
-{{ TagHeader(
-  {
-    vignette: "SPEL",
-    title: "Quiz",
-    descriptionHtml: "<p>Utmana dig själv med smarta quiz av DN:s medarbetare. Välj mellan olika kategorier och svårighetsgrad.</p>"
-  }
-)}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/tag-header/tag-header" as *;
-```
+TagHeader
+=========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/tag-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tag-header)
+*   Storybook: [TagHeader](https://designsystem.dn.se/?path=/docs/section-tagheader--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/tag-header/tag-header.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | *   H1 Title<br />string | \- |
+| vignetteText | Heading of the link box<br />string | \- |
+| vignetteTargetUrl | Target URL for the vignette<br />string | \- |
+| media | Main image<br />ComponentChild | \- |
+| descriptionHtml | Intended use is text, links<br />string | \- |
+| articleCount | Total articles on this list-page<br />number | \- |
+| theme | The theme-class to apply to the vignette<br />"kultur", "nyheter" | \- |
+| toggle | Show/hide toggle button<br />boolean | false |
+| toggleText | `text` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
+| toggleSelectedText | `selectedText` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
+| toggleSelected | `selected` parameter to ToggleButton (only if `toggle` is enabled)<br />boolean | false |
+| toggleLoading | `loading` parameter to ToggleButton (only if `toggle` is enabled)<br />boolean | false |
+| toggleClassNames | `classNames` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
+| toggleAttributes | `attributes` parameter to ToggleButton (only if `toggle` is enabled)<br />Record<string, unknown> | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+
+```jsx
+<TagHeader
+  articleCount={123}
+  descriptionHtml="<p>Här samlas alla DN:s skivrecensioner – från Claude Debussy till Cannibal Corpse.</p>"
+  media={<TeaserImage byline="Foto: Alexander Mahmoud" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}/>}
+  title="Skivrecensioner"
+  toggle
+  toggleSelectedText="Följer"
+  toggleText="Följ"
+/>
+```

package/components/teaser-counter/README.md

@@ -8,22 +8,22 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| title\* | string | \- |
 | counterText\* | string | \- |
 | counterNumber\* | number | \- |
 | subtitle | string | \- |
-| areaType | "right", "bauta" | \- |
-| targetLink | string | \- |
-| mediaHtml | string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+| targetLink\* | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| title\* | Heading of the teaser<br />string | \- |
+| media | Main image or other media<br />ComponentChild | \- |
 
 ```jsx
 <TeaserCounter
   classNames="test-class"
   counterNumber={124}
   counterText="DAGAR I <br> FÄNGELSE"
-  mediaHtml="<div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&amp;crop=3:4,smart&amp;height=184' alt='' aria-hidden='true'></div>"
+  media={<ExamplePicture className="picture picture--placeholder" src="https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&crop=3:4,smart&height=184" style={{aspectRatio: '3 / 4'}}/>}
   subtitle="fängslad i Turkiet för sin journalistik"
   title="Joakim Medin"
 />

package/components/teaser-counter/teaser-counter.njk

@@ -16,32 +16,34 @@
     classNames: extraClasses
   }) %}
     <div class="ds-teaser__content">
-      {% if params.title %}
-        <h2 class="{{ componentClassName + '__title' }}">
-          <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
-          {% if params.subtitle %}
-            – {{ params.subtitle }}
-          {% endif %}
-        </h2>
-      {% endif %}
+      <div class="ds-teaser__content-inner">
+        {% if params.title %}
+          <h2 class="{{ componentClassName + '__title' }}">
+            <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
+            {% if params.subtitle %}
+              – {{ params.subtitle }}
+            {% endif %}
+          </h2>
+        {% endif %}
 
-      {% if params.counterNumber is not null or params.counterText %}
-        <div class="{{ componentClassName + '__counter-wrapper' }}">
-          {% if params.counterNumber is not null %}
-            <ul class="{{ componentClassName + '__list' }}">
-              {% for digit in params.counterNumber | string %}
-                <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
-              {% endfor %}
-            </ul>
-          {% endif %}
+        {% if params.counterNumber is not null or params.counterText %}
+          <div class="{{ componentClassName + '__counter-wrapper' }}">
+            {% if params.counterNumber is not null %}
+              <ul class="{{ componentClassName + '__list' }}">
+                {% for digit in params.counterNumber | string %}
+                  <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
+                {% endfor %}
+              </ul>
+            {% endif %}
 
-          {% if params.counterText %}
-            <p class="{{ componentClassName + '__counter-text' }}">
-              {{ params.counterText | safe }}
-            </p>
-          {% endif %}
-        </div>
-      {% endif %}
+            {% if params.counterText %}
+              <p class="{{ componentClassName + '__counter-text' }}">
+                {{ params.counterText | safe }}
+              </p>
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
     </div>
 
     {% if params.countdown %}

package/components/teaser-counter/teaser-counter.scss

@@ -11,10 +11,11 @@ a.ds-teaser--counter.ds-teaser {
   gap: ds-spacing($ds-s-075);
   padding: ds-spacing($ds-s-075);
 
-  .ds-teaser__content {
+  .ds-teaser__content-inner {
     display: flex;
     flex-direction: column;
     gap: ds-spacing($ds-s-100);
+    height: 100%;
     justify-content: space-between;
   }
 

package/components/teaser-footer/README.md

@@ -6,8 +6,8 @@ TeaserFooter
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| variant\* | The variant to render<br />"informationText", "podcast" | \- |
-| publicationTime | The time of publication<br />string | \- |
+| variant\* | "default", "podcast", "informationText" | \- |
+| publicationTime | string | \- |
 | sectionName | Name of section the teaser is connected to<br />string | \- |
 | duration | The length of the podcast<br />string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |

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

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
+- Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--docs)
+- Storybook (Latest): [TeaserLarge](https://designsystem-latest.dn.se/?path=/docs/section-teaserlarge--docs)
+
+----
+
+# teaser-large
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|variant | String | no | "default" or "podcast" | "default" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|publicationTime | string | no | | null | Publication time text. |
+|duration | string | no | | null | Duration of podcast. |
+|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-large/teaser-large.njk' import TeaserLarge %}
+
+{{ TeaserLarge({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
+```

package/components/teaser-large/README.md

@@ -1,52 +1,44 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
-- Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--docs)
-- Storybook (Latest): [TeaserLarge](https://designsystem-latest.dn.se/?path=/docs/section-teaserlarge--docs)
-
-----
-
-# teaser-large
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|variant | String | no | "default" or "podcast" | "default" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
-|text | String | no | | | Teaser subtext |
-|vignette | String | no | | | Top text in the teaser |
-|highlight | String | no | | | Text before the heading |
-|sticker | String | no | | | Red text before the text |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|bylineHtml | HTML String | no | | | Side image of the author |
-|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
-|isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
-|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
-|publicationTime | string | no | | null | Publication time text. |
-|duration | string | no | | null | Duration of podcast. |
-|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-large/teaser-large.njk' import TeaserLarge %}
-
-{{ TeaserLarge({
-  title: "Upp på börsen",
-  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
-  highlight: "Ekonominytt:"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
-```
+TeaserLarge
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
+*   Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--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-large/teaser-large.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| bylinePicture | Image of the author<br />ComponentChild | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| sectionName | Shows in teaser footer<br />string | \- |
+| bylineHtml | Byline HTML<br />string | \- |
+| bylineAspectRatio | Byline aspect ratio<br />string | \- |
+| duration | Duration of podcast<br />string | \- |
+| publicationTime | Publication time text<br />string | \- |
+| isFlashingDot | If there should be a flashing ball before the text<br />boolean | false |
+| isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | false |
+| isItalicHeadline | If the headline should be italic<br />boolean | false |
+| title\* | Heading of the teaser<br />string | \- |
+| media | Main image or other media<br />ComponentChild | \- |
+| sticker | Red text before the text<br />string | \- |
+| highlight | Text before the heading<br />string | \- |
+| vignette | Top text in the teaser<br />string | \- |
+| text | Teaser subtext<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| variant | Variant of the teaser<br />"default", "podcast" | "default" |
+| targetLink\* | Target URL for the teaser<br />string | \- |
+
+```jsx
+<TeaserLarge
+  highlight="Large:"
+  isLargeHeadline
+  media={<TeaserImage byline="Foto: Alexander Mahmoud" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C227:128&crop=227:h;center,top&output-quality=80 227w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80 300w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C454:256&crop=454:h;center,top&output-quality=60 454w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C600:338&crop=600:h;center,top&output-quality=60 600w" style={{aspectRatio: '16 / 9'}}/>}/>}
+  sticker="TV"
+  targetLink="https://www.dn.se/krigets-svallvagor/"
+  text="Rysslandsexperten: Därför anföll han Ukraina • Så har invasionen förändrat världen."
+  title="”I kriget kunde Putin ge efter för sina instinkter”"
+  vignette="EN PUFF MED ALLT"
+/>
+```

package/components/teaser-large/teaser-large.njk

@@ -31,7 +31,7 @@
         componentClassName + '__media'
       ] | join(" ") %}
       <div class="{{ mediaClass }}">
-        {{ params.mediaHtml }}
+        {{ params.mediaHtml | safe }}
       </div>
     {% endif %}
 

package/components/teaser-onsite/README.md

@@ -12,18 +12,18 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| areaType | "right", "bauta", "bautaxl" | \- |
-| targetLink | string | \- |
-| theme | "kultur", "nyheter" | "nyheter" |
-| mediaHtml | string | \- |
-| title | string | \- |
-| text | string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+| targetLink\* | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| title\* | Heading of the teaser<br />string | \- |
+| text | Teaser subtext<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
+| media | Main image or other media<br />ComponentChild | \- |
 
 ```jsx
 <TeaserOnSite
-  mediaHtml="<figure class='ds-teaser-image'><div class='picture picture--placeholder' style='aspect-ratio: 1 / 1;'><img class='picture__img' src='https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&amp;fit=around%7C56:56&amp;crop=56:h;center,top&amp;output-quality=80' alt='' aria-hidden='true'></div></figure>"
+  media={<TeaserImage image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&fit=around%7C56:56&crop=56:h;center,top&output-quality=80" style={{aspectRatio: '1 / 1'}}/>} />}
   targetLink="https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/"
   text="Henrik Brandão Jönsson och Eduardo Leal"
   title="Azorerna"

package/package.json

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

package/preact/assets/types/teaser-props.d.ts

@@ -0,0 +1,42 @@
+import { ComponentChild } from 'preact';
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
+export interface TeaserProps extends SharedProps {
+    /** Heading of the teaser */
+    title: string;
+    /** Target URL for the teaser */
+    targetLink: string;
+    /** Variant of the teaser */
+    variant?: "default" | "podcast";
+    /** The area where the column is rendered */
+    areaType?: "right" | "bauta" | "bautaxl";
+    /** The theme-class to apply to the teaser */
+    theme?: "nyheter" | "kultur";
+    /** Teaser subtext */
+    text?: string;
+    /** Top text in the teaser */
+    vignette?: string;
+    /** Text before the heading */
+    highlight?: string;
+    /** Red text before the text */
+    sticker?: string;
+    /** Main image or other media */
+    media?: ComponentChild;
+    /** Image of the author */
+    bylinePicture?: ComponentChild;
+    /** If the headline should be italic */
+    isItalicHeadline?: boolean;
+    /** If the headline should be large (only if `isItalicHeadline` is true) */
+    isLargeHeadline?: boolean;
+    /** If there should be a flashing ball before the text */
+    isFlashingDot?: boolean;
+    /** Publication time text */
+    publicationTime?: string;
+    /** Duration of podcast */
+    duration?: string;
+    /** Byline aspect ratio */
+    bylineAspectRatio?: string;
+    /** Byline HTML */
+    bylineHtml?: string;
+    /** Shows in teaser footer */
+    sectionName?: string;
+}