@bonniernews/dn-design-system-web 32.7.9 → 32.7.11

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.10...@bonniernews/dn-design-system-web@32.7.11) (2025-07-07)
+
+
+### Bug Fixes
+
+* **web:** group header tsx ([#1809](https://github.com/BonnierNews/dn-design-system/issues/1809)) ([d1cd7aa](https://github.com/BonnierNews/dn-design-system/commit/d1cd7aadf28c734674e2b9a6267801f27c8446f0))
+
+## [32.7.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.9...@bonniernews/dn-design-system-web@32.7.10) (2025-07-04)
+
+
+### Bug Fixes
+
+* **web:** tsx teaserimage and mask ([#1802](https://github.com/BonnierNews/dn-design-system/issues/1802)) ([4b1e264](https://github.com/BonnierNews/dn-design-system/commit/4b1e264f7134ee2eade79fb60330d90a0d9bf390))
+
 ## [32.7.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.8...@bonniernews/dn-design-system-web@32.7.9) (2025-07-03)
 
 

package/components/article-body-image/README.md

@@ -21,7 +21,7 @@ The component will not include styling by itself. Make sure to include the right
 <ArticleBodyImage
   author="Paul Hansen"
   caption="Detta är en bildtext"
-  image={<ExamplePicture 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'}}/>}
+  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'}}/>}
   imageType="Foto"
 />
 ```

package/components/byline/README.md

@@ -27,8 +27,18 @@ initModalByline(articleElement);
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
-<RunComponentJs
-  component={<><div className="ds-byline ds-byline--show-images"><div className="ds-byline__inner"><div className="ds-byline__portrait"><ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/></div><div className="ds-byline__info "><span className="ds-byline__role">Text</span><a className="ds-byline__name" data-id="https://www.dn.se/av/peter-wolodarski" data-index="1" data-label="Peter Wolodarski" data-link-category="article author" href="https://www.dn.se/av/peter-wolodarski">Peter Wolodarski</a></div></div></div></>}
-  jsFunction={() => {}}
+<Byline
+  bylineTitle="Text"
+  bylines={[
+    {
+      authorId: '123',
+      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
+      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
+      followable: true,
+      name: 'Peter Wolodarski',
+      role: 'Text',
+      variant: 'link'
+    }
+  ]}
 />
 ```

package/components/byline-list/README.md

@@ -24,7 +24,7 @@ The component will not include styling by itself. Make sure to include the right
     {
       authorId: '1',
       authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
-      bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
+      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
       followable: false,
       name: 'Byline link',
       role: 'Grafik'
@@ -32,7 +32,7 @@ The component will not include styling by itself. Make sure to include the right
     {
       authorId: '123',
       authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
-      bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
+      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
       followable: true,
       name: 'Test Testsson',
       role: 'Text'

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

@@ -0,0 +1,56 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
+- Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
+- Storybook (Latest): [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
+
+----
+
+# GroupHeader
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | string | yes | | | The title text |
+|type | string | no | icon, link, toggle, arrows | icon | The type of interactive element added to the header |
+|variant | string | no | bauta, bauataxl | | The design variant, if not bauta or bautaxl the group header will get the 'standard' design |
+|mediaHtml | string | no | | | The image markup for the header |
+|href | string | no | | | If given, the title is rendered as a link |
+|linkText | string | no | | | The link text to render (only for types `link` and `direkt`) |
+|showBottomBorder | boolean | no | | | If true there will be a bottom border |
+|toggleText | text | no | | | `text` parameter to ToggleButton (only for type `toggle`) |
+|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for type `toggle`) |
+|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for type `toggle`) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for type `toggle`) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for type `toggle`) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for type `toggle`) |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+NB: The `arrows` type is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.
+
+Depending on type, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
+
+The type `toggle` is (currently) not allowed if variant is bauta or bautaxl.
+
+## 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/group-header/group-header.njk' import GroupHeader %}
+
+{{ GroupHeader({
+  title: "Dagens Nyheter",
+  href: "https://www.dn.se/"
+}) }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/group-header/group-header";
+```
+
+### JS
+If you use the `toggle` type, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).

package/components/group-header/README.md

@@ -1,56 +1,29 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
-- Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
-- Storybook (Latest): [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--docs)
-
-----
-
-# GroupHeader
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | string | yes | | | The title text |
-|type | string | no | icon, link, toggle, arrows | icon | The type of interactive element added to the header |
-|variant | string | no | bauta, bauataxl | | The design variant, if not bauta or bautaxl the group header will get the 'standard' design |
-|mediaHtml | string | no | | | The image markup for the header |
-|href | string | no | | | If given, the title is rendered as a link |
-|linkText | string | no | | | The link text to render (only for types `link` and `direkt`) |
-|showBottomBorder | boolean | no | | | If true there will be a bottom border |
-|toggleText | text | no | | | `text` parameter to ToggleButton (only for type `toggle`) |
-|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for type `toggle`) |
-|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for type `toggle`) |
-|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for type `toggle`) |
-|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for type `toggle`) |
-|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for type `toggle`) |
-|classNames | String | no | | | Ex. "my-special-class" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-
-NB: The `arrows` type is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.
-
-Depending on type, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
-
-The type `toggle` is (currently) not allowed if variant is bauta or bautaxl.
-
-## 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/group-header/group-header.njk' import GroupHeader %}
-
-{{ GroupHeader({
-  title: "Dagens Nyheter",
-  href: "https://www.dn.se/"
-}) }}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/group-header/group-header";
-```
-
-### JS
-If you use the `toggle` type, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).
+GroupHeader
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
+*   Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--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/group-header/group-header.scss'`
+
+| 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" |
+| 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 | \- |
+| linkText | The link text to render (only for types `link` and `arrows`)<br />string | \- |
+| showBottomBorder | If true there will be a bottom border<br />boolean | false |
+| toggleText | `text` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
+| toggleSelectedText | `selectedText` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
+| toggleSelected | `selected` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
+| toggleLoading | `loading` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
+| toggleClassNames | `classNames` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
+| toggleAttributes | `attributes` parameter to ToggleButton (only for type `toggle`)<br />{ \[key: string\]: string; } | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+
+```jsx
+<GroupHeader title="Dn granskar" />
+```

package/components/mask/README-NJK.md

@@ -0,0 +1,36 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
+- Storybook: [Subcomponents > Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
+- Storybook (Latest): [Subcomponents > Mask](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-mask--docs)
+
+----
+
+# Mask
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | HTML String | yes | | | The img element or equivalent to mask |
+|variant | String | yes | quiz-mask | quiz-mask | Mask variant |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+## 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/mask/mask.njk' import Mask %}
+
+{{ Mask({
+  variant: "quiz-mask",
+  imageHtml: "<img src='cool-pic.jpg'>"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/mask/mask";
+```

package/components/mask/README.md

@@ -1,36 +1,21 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
-- Storybook: [Subcomponents > Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
-- Storybook (Latest): [Subcomponents > Mask](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-mask--docs)
-
-----
-
-# Mask
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|imageHtml | HTML String | yes | | | The img element or equivalent to mask |
-|variant | String | yes | quiz-mask | quiz-mask | Mask variant |
-|classNames | String | no | | | Ex. "my-special-class" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-
-## 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/mask/mask.njk' import Mask %}
-
-{{ Mask({
-  variant: "quiz-mask",
-  imageHtml: "<img src='cool-pic.jpg'>"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/mask/mask";
-```
+Mask
+====
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
+*   Storybook: [Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--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/mask/mask.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| image\* | ComponentChild | \- |
+| variant\* | "quiz-mask" | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<Mask
+  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'}}/>}
+  variant="quiz-mask"
+/>
+```

package/components/profile-header/README.md

@@ -27,7 +27,7 @@ The component will not include styling by itself. Make sure to include the right
 <ProfileHeader
   articleCount={400}
   descriptionHtml="<p>Peter Wolodarski är chefredaktör och ansvarig utgivare för Dagens Nyheter.</p>"
-  media={<ExamplePicture className="picture" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=120:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=240:*&output-quality=60 240w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=480:*&output-quality=60 480w" style={{aspectRatio: '450 / 1020'}}/>}
+  media={<ExamplePicture className="picture" sizes="120px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=120:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=240:*&output-quality=60 240w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=480:*&output-quality=60 480w" style={{aspectRatio: '450 / 1020'}}/>}
   subtitleHtml="<a href='mailto:peter.wolodarski@dn.se'>peter.wolodarski@dn.se</a>"
   title="Peter Wolodarski"
   toggle

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

@@ -0,0 +1,39 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
+- Storybook: [Subcomponents > TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
+- Storybook (Latest): [Subcomponents > TeaserImage](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
+
+----
+
+# teaser-image
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | HTML String | yes | | | The img element or equivalent |
+|byline | String | no | | | Media credit text |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Always applied |
+
+## 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-image/teaser-image.njk' import TeaserImage %}
+
+{{ TeaserImage({
+  imageHtml: "<img src='??'>",
+  byline: "Foto: Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
+```
+
+This scss is already included in `teaser.scss`.

package/components/teaser-image/README.md

@@ -1,39 +1,24 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
-- Storybook: [Subcomponents > TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
-- Storybook (Latest): [Subcomponents > TeaserImage](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
-
-----
-
-# teaser-image
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|imageHtml | HTML String | yes | | | The img element or equivalent |
-|byline | String | no | | | Media credit text |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Always applied |
-
-## 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-image/teaser-image.njk' import TeaserImage %}
-
-{{ TeaserImage({
-  imageHtml: "<img src='??'>",
-  byline: "Foto: Paul Hansen"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
-```
-
-This scss is already included in `teaser.scss`.
+TeaserImage
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
+*   Storybook: [TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
+
+Image caption will never scale (forcePx is always true)
+
+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-image/teaser-image.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| image\* | ComponentChild | \- |
+| byline | string | \- |
+| mask | "quiz-mask" | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<TeaserImage
+  byline="Foto: Paul Hansen"
+  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'}}/>}
+/>
+```

package/components/text-input/README.md

@@ -17,7 +17,7 @@ import textInput from '@bonniernews/dn-design-system-web/components/text-input/t
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | name\* | It's used as name and id<br />string | \- |
-| type | text, password, email, etc<br />"number", "text", "search", "color", "image", "date", "datetime-local", "email" | "text" |
+| type | text, password, email, etc<br />"number", "text", "search", "image", "color", "date", "datetime-local", "email" | "text" |
 | label\* | A label for the input<br />string | \- |
 | error | Used if error state shoud be set on load<br />boolean | \- |
 | errorMessage | What error message that should be displayed<br />string | \- |

package/package.json

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

package/preact/components/group-header/group-header.d.ts

@@ -0,0 +1,40 @@
+import { ComponentChild } from 'preact';
+import { SharedProps } from '../../assets/types/shared-props';
+export interface GroupHeaderProps extends SharedProps {
+    /** The title text */
+    title: string;
+    /** The type of interactive element added to the header */
+    type?: 'icon' | 'link' | 'toggle' | 'arrows';
+    /** The design variant, if not bauta or bautaxl the group header will get the 'standard' design */
+    variant?: 'bauta' | 'bauataxl';
+    /** The image element for the header */
+    media?: ComponentChild;
+    /** If given, the title is rendered as a link */
+    href?: string;
+    /** The link text to render (only for types `link` and `arrows`) */
+    linkText?: string;
+    /** If true there will be a bottom border */
+    showBottomBorder?: boolean;
+    /** `text` parameter to ToggleButton (only for type `toggle`) */
+    toggleText?: string;
+    /** `selectedText` parameter to ToggleButton (only for type `toggle`) */
+    toggleSelectedText?: string;
+    /** `selected` parameter to ToggleButton (only for type `toggle`) */
+    toggleSelected?: boolean;
+    /** `loading` parameter to ToggleButton (only for type `toggle`) */
+    toggleLoading?: boolean;
+    /** `classNames` parameter to ToggleButton (only for type `toggle`) */
+    toggleClassNames?: string;
+    /** `attributes` parameter to ToggleButton (only for type `toggle`) */
+    toggleAttributes?: {
+        [key: string]: string;
+    };
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
+ * - Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--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/group-header/group-header.scss'`
+ */
+export declare function GroupHeader({ title, type, variant, media, href, linkText, showBottomBorder, toggleText, toggleSelectedText, toggleSelected, toggleLoading, toggleClassNames, toggleAttributes, classNames, attributes, }: GroupHeaderProps): import("preact").JSX.Element;