@bonniernews/dn-design-system-web 32.7.43 → 32.7.44

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.44](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.43...@bonniernews/dn-design-system-web@32.7.44) (2025-08-05)
+
+
+### Bug Fixes
+
+* **web:** remove readme uxd ([#1852](https://github.com/BonnierNews/dn-design-system/issues/1852)) ([e3df108](https://github.com/BonnierNews/dn-design-system/commit/e3df108b74cb80f278d528b37569533030a243cf))
+
 ## [32.7.43](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.42...@bonniernews/dn-design-system-web@32.7.43) (2025-08-04)
 
 

package/assets/types/teaser-props.ts

@@ -9,7 +9,7 @@ export interface TeaserProps extends SharedProps {
   /** Variant of the teaser */
   variant?: "default" | "podcast" | "insandare" | "direkt";
   /** The area where the column is rendered */
-  areaType?: "right" | "bauta" | "bautaxl";
+  areaType?: "right" | "bauta";
   /** The theme-class to apply to the teaser */
   theme?: "nyheter" | "kultur";
   /** Teaser subtext */

package/components/factbox/README.md

@@ -0,0 +1,35 @@
+Factbox
+=======
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/factbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/factbox)
+*   Storybook: [Factbox](https://designsystem.dn.se/?path=/docs/basic-factbox--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/factbox/factbox.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title | string | \- |
+| titleHighlight | string | \- |
+| titleImage | ComponentChild | \- |
+| bodyParts\* | BodyPart\[\] | \- |
+| theme | "nyheter", "kultur", "default" | \- |
+| forceExpand | boolean | false |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<Factbox
+  bodyParts={[
+    {
+      bodyHtml: '<p>• Minska andelen kött, och framför allt nötkött, i kosten. Nötkött, men även mejeriprodukter som ost, mjölk och smör, bidrar till stora utsläpp när de produceras. Testa att äta mer plantbaserad kost, eller byt ut nötköttet mot kyckling.</p>',
+      type: 'paragraph'
+    },
+    {
+      bodyHtml: '<p>• Handla efter säsong. Sockerärtor som är flygfraktade över halva jordklotet ger en stor klimatpåverkan, samma sak med andra färska grönsaker som kräver flygfrakt i stället för båtfrakt. Naturskyddsföreningen har på sin hemsida <a href="https://www.naturskyddsforeningen.se/nyheter/valj-bland-sasongens-godsaker">en lista</a> över när svenska och europeiska frukt- och grönsaker är i säsong.</p>',
+      type: 'paragraph'
+    }
+  ]}
+  title="Livsmedel du kan byta ut för att minska ditt klimatavtryck"
+  titleHighlight="Tips."
+/>
+```

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

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |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 |
+|variant | string | no | bauta, default | | The design variant, if not bauta 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`) |
@@ -30,7 +30,7 @@ NB: The `arrows` type is only active in desktop environments. It is equivalent t
 
 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.
+The type `toggle` is (currently) not allowed if variant is bauta.
 
 ## Minimum requirement example
 

package/components/group-header/README.md

@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | title\* | The title text<br />string | \- |
 | type | The type of interactive element added to the header<br />"link", "icon", "toggle", "arrows" | "icon" |
-| variant | The design variant, if not bauta or bautaxl the group header will get the 'standard' design<br />"bauta", "bauataxl" | \- |
+| variant | The design variant, if not bauta the group header will get the 'standard' design<br />"bauta", "default" | \- |
 | 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 | \- |

package/components/list-item/README.md

@@ -0,0 +1,70 @@
+ListItem
+========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
+*   Storybook: [ListItem](https://designsystem.dn.se/?path=/docs/basic-listitem--docs)
+
+This component is used to render a list item with different types of content. This lists all possible properties. Some are restricted to certain list item types. Check the list item types for more information.
+
+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/list-item/list-item.scss'`
+
+[](#javascript)Javascript
+-------------------------
+
+_The javascript is only needed for list items of type accordion or toggle_
+
+```javascript
+import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
+const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
+dsListItem(listElements);
+```
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "radio", "switch" | \- |
+| title | string | \- |
+| subtitle | string | \- |
+| meta | string | \- |
+| border | boolean | \- |
+| fontWeight | "bold", "regular", "semibold" | \- |
+| attributes | { \[key: string\]: string; } | \- |
+| forcePx | boolean | \- |
+| classNames | string | \- |
+| leadingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
+| accordionContent | any | \- |
+| name | string | "ds-list-item" |
+| href | string | \- |
+| disabled | boolean | \- |
+| checked | boolean | \- |
+| stripLabel | boolean | \- |
+| mediaHtml\* | string | \- |
+| trailingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
+| selected | boolean | \- |
+| id | string | "ds-list-item" |
+| value | string | \- |
+| showMeta | boolean | \- |
+| metaOn | string | \- |
+| metaOff | string | \- |
+| componentClassName | string | \- |
+| titleHref | string | \- |
+| toggleText\* | string | \- |
+| toggleSelectedText\* | string | \- |
+| selectedText\* | string | \- |
+| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | \- |
+| text | Note: only works on button-tag, not on a-tag<br />string | \- |
+| 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 | \- |
+| size | "sm", "lg", "md", "xl" | \- |
+| loading | boolean | \- |
+| isIconButton | boolean | \- |
+| selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
+| mobileFullWidth | Button will only full width on mobile<br />boolean | \- |
+
+```jsx
+<ListItem
+  leadingIcon="notifications"
+  listItemType="standard"
+  title="Standard list item"
+  trailingIcon="chevron_right"
+/>
+```

package/components/teaser-card/{README-NJK.md → README-njk.md}

@@ -13,7 +13,7 @@ This component is the basis for all Teasers. While it does not render much itsel
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |targetLink | String | no | | | If given, the card will render as a link |
-|areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
+|areaType | String | no | '', 'right', 'bauta', | '' | The area the teaser will be rendered in |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |classNames | String | no | | | Ex. "ds-teaser--large" |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/teaser-card/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| areaType | "right", "bauta", "bautaxl", "main" | \- |
+| areaType | "right", "bauta", "main" | \- |
 | targetLink | string | \- |
 | theme | "nyheter", "kultur" | "nyheter" |
 | classNames | Ex. "my-special-class"<br />string | \- |

package/components/teaser-centered/README.md

@@ -11,7 +11,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | vignette | Top text in the teaser<br />string | \- |

package/components/teaser-counter/README.md

@@ -14,7 +14,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
 

package/components/teaser-large/{README-NJK.md → README-njk.md}

@@ -13,7 +13,7 @@
 |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 |
+|areaType | String | no | "right" or "bauta" | | 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 |

package/components/teaser-large/README.md

@@ -27,7 +27,7 @@ The component will not include styling by itself. Make sure to include the right
 | vignette | Top text in the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | "default" |
 | targetLink\* | Target URL for the teaser<br />string | \- |
 

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

@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | title\* | Heading of the teaser<br />string | \- |
 | titleHref | Target URL for the header<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl", "main" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | arrowPosition | Determines where the scroll arrows are rendered<br />"floating", "header" | "header" |
 | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
 | teasers | A list of arguments to TeaserSwipeCard<br />TeaserSwipeCardProps\[\] | \[\] |

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

@@ -14,7 +14,6 @@
 |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" |

package/components/teaser-native/{README-NJK.md → README-njk.md}

@@ -13,7 +13,7 @@
 |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 |
+|areaType | String | no | "right" or "bauta" | | 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 |

package/components/teaser-native/README.md

@@ -13,7 +13,7 @@
 |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 |
+|areaType | String | no | "right" or "bauta" | | 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 |

package/components/teaser-onsite/{README-NJK.md → README-njk.md}

@@ -16,7 +16,7 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | 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 |
 |mediaHtml | HTML String | no | | | Main image or other media |

package/components/teaser-onsite/README.md

@@ -15,7 +15,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |

package/components/teaser-right-now/README.md

@@ -11,7 +11,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
 

package/components/teaser-slideshow/{README-NJK.md → README-njk.md}

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |text | String | no | | | Teaser subtext |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |mediaHtml | HTML String | no | | | Gallery html |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/teaser-slideshow/README.md

@@ -10,9 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| areaType | "right", "bauta", "bautaxl" | \- |
+| areaType | "right", "bauta", "main" | \- |
 | targetLink | string | \- |
-| theme | "kultur", "nyheter" | \- |
+| theme | "nyheter", "kultur" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |

package/components/teaser-split/README-container-njk.md

@@ -14,7 +14,7 @@
 |theme | String | no | nyheter, kultur | (empty) | The theme is applied to all teasers in the container |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
-|areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | string | no | "right" or "bauta" | | The area where the column is rendered |
 |~forcePx~ | | | | | Not supported |
 
 ## Minimum requirement example

package/components/teaser-split/README-njk.md

@@ -12,8 +12,8 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|~variant~ | String | no | "default" or "podcast" | "default" | Not implemented |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|variant | String | no | "default" or "podcast" | "default" | |
+|areaType | String | no | "right" or "bauta" | | 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 |

package/components/teaser-standard/README-njk.md

@@ -13,7 +13,7 @@
 |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 |
+|areaType | String | no | "right" or "bauta" | | 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 |

package/components/teaser-standard/README.md

@@ -44,7 +44,7 @@ const teaserStandardHtml = dsTeaserStandard(parameters);
 | vignette | Top text in the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | \- |
 | targetLink\* | Target URL for the teaser<br />string | \- |
 | title\* | Heading of the teaser<br />string | \- |

package/components/teaser-swipe-card/README.md

@@ -27,7 +27,7 @@ The component will not include styling by itself. Make sure to include the right
 | vignette | Top text in the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | \- |
 | targetLink\* | Target URL for the teaser<br />string | \- |
 | title\* | Heading of the teaser<br />string | \- |

package/components/teaser-text-on-image/README.md

@@ -11,7 +11,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | vignette | Top text in the teaser<br />string | \- |

package/components/teaser-tipsa/{README-NJK.md → README-njk.md}

@@ -15,7 +15,7 @@ It's quite common to include a dot in the title string, like "• This is a titl
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
 |text | String | no | | | Teaser subtext |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |

package/components/teaser-tipsa/README.md

@@ -11,7 +11,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 

package/components/tooltip/README.md

@@ -19,8 +19,16 @@ The component will not include styling by itself. Make sure to include the right
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
-<RunComponentJs
-  component={<div className="ds-tooltip ds-tooltip--arrow-top ds-tooltip--close-outside-click ds-tooltip--hidden"><div className="ds-tooltip__content"><React.Fragment key=".1"><h2>Senaste nytt</h2><p>Här är en text om en ny liten funktion vi har.</p></React.Fragment></div><Button attributes={{'aria-label': 'Stäng'}} classNames="ds-tooltip__close" iconName="close" isIconButton size="sm" variant="transparent"/></div>}
-  jsFunction={() => {}}
-/>
+<Tooltip
+  arrowPosition="top"
+  closeButton
+  closeOnClickOutside
+>
+  <React.Fragment key=".0">
+    <h2>
+      Senaste nytt    </h2>
+    <p>
+      Här är en text om en ny liten funktion vi har.    </p>
+  </React.Fragment>
+</Tooltip>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.43",
+  "version": "32.7.44",
   "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

@@ -8,7 +8,7 @@ export interface TeaserProps extends SharedProps {
     /** Variant of the teaser */
     variant?: "default" | "podcast" | "insandare" | "direkt";
     /** The area where the column is rendered */
-    areaType?: "right" | "bauta" | "bautaxl";
+    areaType?: "right" | "bauta";
     /** The theme-class to apply to the teaser */
     theme?: "nyheter" | "kultur";
     /** Teaser subtext */

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

@@ -6,8 +6,8 @@ export interface GroupHeaderProps extends SharedProps {
     title: string;
     /** The type of interactive element added to the header */
     type?: GroupHeaderType;
-    /** The design variant, if not bauta or bautaxl the group header will get the 'standard' design */
-    variant?: 'bauta' | 'bauataxl';
+    /** The design variant, if not bauta the group header will get the 'standard' design */
+    variant?: 'bauta' | 'default';
     /** The image element for the header */
     media?: ComponentChild;
     /** If given, the title is rendered as a link */

package/preact/components/group-header/group-header.js

@@ -247,6 +247,7 @@ function GroupHeader({
   attributes = {}
 }) {
   const componentClassName = "ds-group-header";
+  variant = variant !== "bauta" ? void 0 : variant;
   const classes = formatClassString([
     componentClassName,
     type && `${componentClassName}--${type}`,