@bonniernews/dn-design-system-web 32.7.6 → 32.7.8

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.7...@bonniernews/dn-design-system-web@32.7.8) (2025-07-03)
+
+
+### Bug Fixes
+
+* **web:** use shared props type ([#1806](https://github.com/BonnierNews/dn-design-system/issues/1806)) ([03f6e3a](https://github.com/BonnierNews/dn-design-system/commit/03f6e3a88d292828c965cfa918aec689d6be7d99))
+
+## [32.7.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.6...@bonniernews/dn-design-system-web@32.7.7) (2025-07-03)
+
+
+### Bug Fixes
+
+* **web:** tsx profile header component ([#1801](https://github.com/BonnierNews/dn-design-system/issues/1801)) ([92561e6](https://github.com/BonnierNews/dn-design-system/commit/92561e6ff1f91494c82867bf2b74fdf1232f10e0))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/preset-env from 7.27.2 to 7.28.0 ([#1804](https://github.com/BonnierNews/dn-design-system/issues/1804)) ([8c21649](https://github.com/BonnierNews/dn-design-system/commit/8c21649c7d60920eabd5c54ca3959ad3b1288190))
+* **deps-dev:** bump axios from 1.9.0 to 1.10.0 ([#1791](https://github.com/BonnierNews/dn-design-system/issues/1791)) ([10c02e7](https://github.com/BonnierNews/dn-design-system/commit/10c02e7e8bf850f25f3a7619c1e2caeac4363d25))
+
 ## [32.7.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.5...@bonniernews/dn-design-system-web@32.7.6) (2025-07-02)
 
 

package/assets/types/shared-props.ts

@@ -0,0 +1,6 @@
+  export interface SharedProps {
+    /** Ex. "my-special-class" */
+    classNames?: string
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: Record<string, unknown>
+  }

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

@@ -14,8 +14,8 @@ The component will not include styling by itself. Make sure to include the right
 | imageType | string | ", " |
 | fullWidth | boolean | \- |
 | forcePx | boolean | \- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ArticleBodyImage

package/components/blocked-content/README.md

@@ -12,9 +12,9 @@ The component will not include styling by itself. Make sure to include the right
 | body\* | string | \- |
 | link\* | string | \- |
 | forcePx | boolean | false |
-| classNames | string | ", " |
-| attributes | object | { } |
 | elementAttributes | { \[key: string\]: string; } | { } |
+| classNames | Ex. "my-special-class"<br />string | ", " |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <BlockedContent

package/components/buddy-menu/README.md

@@ -33,9 +33,9 @@ dsListItem(listElements);s
 | addons | Ex. \[{ title: 'Annonsfri', href: "[https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt](https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt)" }\]<br />{ title: string; href?: string; classNames?: string; }\[\] | \- |
 | addonsClassNames | string | \- |
 | isDnSkola | boolean | false |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <BuddyMenu

package/components/button/README.md

@@ -10,7 +10,7 @@ Button
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | isIconButton | boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
 | text | Note: only works on button-tag, not on a-tag<br />string | \- |
 | disabled | boolean | false |
@@ -20,8 +20,8 @@ Button
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
 | size | "sm", "lg", "md", "xl" | "md" |
 | loading | boolean | false |
-| href | If href is set the button will be rendered as an a-tag<br />string | \- |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
+| href | If href is set the button will be rendered as an a-tag<br />string | \- |
 | type | "button", "submit" | "button" |
 | iconPosition | "right", "none", "left" | "none" |
 

package/components/button-toggle/README.md

@@ -21,7 +21,7 @@ The component will not include styling by itself. Make sure to include the right
 | variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
 | text | Note: only works on button-tag, not on a-tag<br />string | \- |
 | disabled | boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
@@ -29,7 +29,7 @@ The component will not include styling by itself. Make sure to include the right
 | size | "sm", "lg", "md", "xl" | "md" |
 | loading | boolean | false |
 | selected | boolean | false |
-| selectedIconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
+| selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 
 ```jsx

package/components/byline/README.md

@@ -23,8 +23,8 @@ initModalByline(articleElement);
 | hideBorder | boolean | false |
 | renderBylineModal | boolean | false |
 | showNameAsLink | boolean | false |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <RunComponentJs

package/components/byline-list/README.md

@@ -13,10 +13,10 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | bylines\* | BylineData\[\] | \- |
-| attributes | { \[key: string\]: string; } | \- |
 | showBorderOnLastItem | boolean | false |
 | forcePx | boolean | \- |
-| classNames | string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <BylineList

package/components/checkbox/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | disabled | boolean | \- |
 | name | string | "ds-checkbox" |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Checkbox name="ds-checkbox" />

package/components/direkt-circle/README.md

@@ -8,9 +8,9 @@ DirektCircle
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | circleColor | Hex code or supported color name<br />string | "white" |
-| classNames | string | \- |
 | isAnimated | boolean | false |
-| attributes | object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <DirektCircle />

package/components/direkt-header/README.md

@@ -13,8 +13,8 @@ The component will not include styling by itself. Make sure to include the right
 | pretitle | string | "Direkt" |
 | isAnimated | boolean | true |
 | renderAsH2 | boolean | false |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <DirektHeader

package/components/disclaimer/README.md

@@ -9,10 +9,10 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | bodyHtml\* | string | \- |
-| iconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
+| iconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | variant | "default", "native" | "default" |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Disclaimer bodyHtml="Detta är en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal. <a href='www.dn.se'>länk</a>" />

package/components/divider/README.md

@@ -9,8 +9,8 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | variant | "soft", "medium", "hard" | "soft" |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Divider variant="soft" />

package/components/footer/README.md

@@ -13,9 +13,9 @@ The component will not include styling by itself. Make sure to include the right
 | linkGroups | FooterLinkList\[\] | \- |
 | rudolf\* | { imgUrl: string; text: string; } | \- |
 | buttons | Footerbutton\[\] | \- |
-| classNames | string | \- |
-| attributes | object | \- |
 | forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Footer

package/components/game-header/README.md

@@ -13,8 +13,8 @@ The component will not include styling by itself. Make sure to include the right
 | descriptionHtml | string | \- |
 | textColor | string | \- |
 | backgroundColor | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <GameHeader

package/components/image-caption/README.md

@@ -11,9 +11,9 @@ The component will not include styling by itself. Make sure to include the right
 | caption | Ex "Detta är en bildtext"<br />string | \- |
 | author | Ex "Paul Hansen"<br />string | \- |
 | imageType | Type of image. Ex "Foto" or "Illustration"<br />string | \- |
-| classNames | Ex. "my-special-class another-class"<br />string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ImageCaption

package/components/pill/README.md

@@ -12,8 +12,8 @@ The component will not include styling by itself. Make sure to include the right
 | variant | "link" | link |
 | size | "sm", "lg" | "lg" |
 | href\* | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <Pill

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

@@ -0,0 +1,49 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/profile-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/profile-header)
+- Storybook: [ProfileHeader](https://designsystem.dn.se/?path=/docs/section-Profileheader--docs)
+- Storybook (Latest): [ProfileHeader](https://designsystem-latest.dn.se/?path=/docs/section-Profileheader--docs)
+
+----
+
+# Profile header
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | H1 Title |
+|subtitleHtml | String | yes | | | Subtitle (email) |
+|mediaHtml | String | no | | | Main image |
+|descriptionHtml | String | no | | | Intended use is text, links |
+|articleCount | int | no | | | Total articles on this list-page |
+|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/profile-header/profile-header.njk' import ProfileHeader %}
+
+{{ ProfileHeader(
+  {
+    title: "Johan Croneman",
+    descriptionHtml: "<p>Johan Croneman är journalist på Dagens Nyheter.</p>"
+  }
+)}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/profile-header/profile-header" as *;
+```

package/components/profile-header/README.md

@@ -1,49 +1,37 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/profile-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/profile-header)
-- Storybook: [ProfileHeader](https://designsystem.dn.se/?path=/docs/section-Profileheader--docs)
-- Storybook (Latest): [ProfileHeader](https://designsystem-latest.dn.se/?path=/docs/section-Profileheader--docs)
-
-----
-
-# Profile header
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | H1 Title |
-|subtitleHtml | String | yes | | | Subtitle (email) |
-|mediaHtml | String | no | | | Main image |
-|descriptionHtml | String | no | | | Intended use is text, links |
-|articleCount | int | no | | | Total articles on this list-page |
-|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/profile-header/profile-header.njk' import ProfileHeader %}
-
-{{ ProfileHeader(
-  {
-    title: "Johan Croneman",
-    descriptionHtml: "<p>Johan Croneman är journalist på Dagens Nyheter.</p>"
-  }
-)}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/profile-header/profile-header" as *;
-```
+ProfileHeader
+=============
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/profile-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/profile-header)
+*   Storybook: [ProfileHeader](https://designsystem.dn.se/?path=/docs/section-profileheader--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/profile-header/profile-header.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | string | \- |
+| subtitleHtml | string | \- |
+| media | ComponentChild | \- |
+| descriptionHtml | string | \- |
+| articleCount | number | \- |
+| toggle | boolean | \- |
+| toggleText | string | \- |
+| toggleSelectedText | string | \- |
+| toggleSelected | boolean | false |
+| toggleLoading | boolean | false |
+| toggleClassNames | string | ", " |
+| toggleAttributes | { \[key: string\]: string; } | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<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'}}/>}
+  subtitleHtml="<a href='mailto:peter.wolodarski@dn.se'>peter.wolodarski@dn.se</a>"
+  title="Peter Wolodarski"
+  toggle
+  toggleSelectedText="Följer"
+  toggleText="Följ"
+/>
+```

package/components/quote/README.md

@@ -10,9 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | bodyHtml\* | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Quote bodyHtml="<p>Vi har blivit som Kuba. Vi lever inte. Vi överlever.</p>" />

package/components/radio-button/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | stripLabel | boolean | \- |
 | disabled | boolean | \- |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <RadioButton

package/components/spinner/README.md

@@ -9,10 +9,10 @@ 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 | "large", "small", "xsmall" | "large" |
+| size | "small", "large", "xsmall" | "large" |
 | forcePx | boolean | \- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Spinner

package/components/switch/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | required | boolean | \- |
 | disabled | boolean | \- |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Switch

package/components/teaser-card/README.md

@@ -11,8 +11,8 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classes | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserCard>

package/components/teaser-counter/README.md

@@ -15,8 +15,8 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta" | \- |
 | targetLink | string | \- |
 | mediaHtml | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserCounter

package/components/teaser-onsite/README.md

@@ -15,11 +15,11 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | 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> | \- |
 
 ```jsx
 <TeaserOnSite

package/components/text-button/README.md

@@ -12,7 +12,7 @@ TextButton
 | disabled | boolean | false |
 | fullWidth | boolean | false |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | iconPosition | "right", "none", "left" | "none" |
 | hideTextOnMobile | boolean | false |
 | size | "sm", "lg" | \- |

package/components/text-input/README.md

@@ -25,10 +25,10 @@ import textInput from '@bonniernews/dn-design-system-web/components/text-input/t
 | disabled | Set to true if the field should be disabled<br />boolean | \- |
 | validation | To use with the sites validation, some example values for dn-web: required, password, email<br />string | \- |
 | helpText | A helptext for the field if needed<br />string | \- |
-| classNames | Ex. "my-special-class"<br />string | ", " |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
 | autofocus | Set to true if field should have focus when loaded<br />boolean | \- |
-| attributes | Ex. { data-prop: value }<br />{} | \- |
+| classNames | Ex. "my-special-class"<br />string | ", " |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TextInput

package/components/thematic-break/README.md

@@ -8,8 +8,8 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ThematicBreak />

package/components/video-caption/README.md

@@ -10,9 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | caption | Ex: "Detta är en bildtext"<br />string | \- |
 | duration | Ex: "01:23"<br />string | \- |
-| classNames | Ex: "my-special-class another-class"<br />string | \- |
-| attributes | Ex: { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
-| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <VideoCaption

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.6",
+  "version": "32.7.8",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -17,6 +17,7 @@
   "exports": {
     "./preact/*": "./preact/*",
     "./assets/*.tsx": "./assets/*.tsx",
+    "./assets/*.ts": "./assets/*.ts",
     "./assets/*.njk": "./assets/*.njk",
     "./assets/*.scss": "./assets/*.scss",
     "./components/*": "./components/*",

package/preact/assets/article-image/article-image.d.ts

@@ -1,12 +1,11 @@
 import { ComponentChild } from 'preact';
-export interface ArticleImageProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface ArticleImageProps extends SharedProps {
     image: ComponentChild;
     caption?: string;
     author?: string;
     imageType?: string;
     fullWidth?: boolean;
     forcePx?: boolean;
-    classNames?: string;
-    attributes?: object;
 }
 export declare const ArticleImage: ({ image, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;