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

package/components/footer/README.md

@@ -1,7 +1,7 @@
 Footer
 ======
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/footer)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/footer)
 *   Storybook: [footer](https://designsystem.dn.se/?path=/docs/page-footer--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/footer/footer.scss'`

package/components/game-header/README.md

@@ -1,7 +1,7 @@
 GameHeader
 ==========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/game-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/game-header)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/game-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/game-header)
 *   Storybook: [GameHeader](https://designsystem.dn.se/?path=/docs/section-Gameheader--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/game-header/game-header.scss'`

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

@@ -1,7 +1,7 @@
 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)
+*   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'`
@@ -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/image-caption/README.md

@@ -1,7 +1,7 @@
 ImageCaption
 ============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
 *   Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--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/image-caption/image-caption.scss'`

package/components/link-box/README.md

@@ -1,7 +1,7 @@
 LinkBox
 =======
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
 *   Storybook: [LinkBox](https://designsystem.dn.se/?path=/docs/section-linkbox--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/link-box/link-box.scss'`

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/list-item/list-item-types.ts

@@ -1,9 +1,10 @@
-import { ComponentChildren } from "preact";
+import { ComponentChildren } from 'preact'
 
-import { ButtonProps } from '../radio-button/radio-button'
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
-import { SwitchInnerProps } from '../switch/switch'
+
 import { ButtonToggleStandardProps } from '../button/button-types'
+import { ButtonProps } from '../radio-button/radio-button'
+import { SwitchInnerProps } from '../switch/switch'
 
 export interface ListItemSharedProps {
   title?: string

package/components/list-item/list-item.js

@@ -1,9 +1,6 @@
 import { dsButtonToggle } from '@bonniernews/dn-design-system-web/components/button/button-interactions.js';
 
-export {
-  dsListItem,
-  dsListItemAll
-};
+export { dsListItem, dsListItemAll };
 
 function dsListItem(listElements = []) {
   if (!listElements.length) return;
@@ -17,17 +14,17 @@ function dsListItem(listElements = []) {
 }
 
 function dsListItemAccordion(accordionEl) {
-  accordionEl.addEventListener("click", () => {
-    accordionEl.classList.toggle("ds-list-item--accordion-active");
+  accordionEl.addEventListener('click', () => {
+    accordionEl.classList.toggle('ds-list-item--accordion-active');
   });
 }
 
 function dsListItemToggle(toggleEl) {
-  const toggleElements = Array.from(toggleEl.getElementsByClassName("ds-btn--toggle"));
+  const toggleElements = Array.from(toggleEl.getElementsByClassName('ds-btn--toggle'));
   dsButtonToggle(toggleElements);
 }
 
 function dsListItemAll() {
-  const listElements = Array.from(document.getElementsByClassName("ds-list-item__content"));
+  const listElements = Array.from(document.getElementsByClassName('ds-list-item__content'));
   dsListItem(listElements);
 }

package/components/mask/README.md

@@ -1,7 +1,7 @@
 Mask
 ====
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/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'`

package/components/modal/README.md

@@ -1,7 +1,7 @@
 Modal
 =====
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/Modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/Modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
 *   Storybook: [Modal](https://designsystem.dn.se/?path=/docs/basic-modal--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/modal/modal.scss'`

package/components/modal/modal.js

@@ -1,62 +1,58 @@
-export {
-  initModal,
-  openModal,
-  initModalStorybook
-}
+export { initModal, openModal, initModalStorybook };
 
 function initModal(modalEl) {
-  const isDialogSupported = typeof HTMLDialogElement === "function";
-  let modalWrapper = modalEl.querySelector(".ds-modal__inner");
+  const isDialogSupported = typeof HTMLDialogElement === 'function';
+  let modalWrapper = modalEl.querySelector('.ds-modal__inner');
   if (!isDialogSupported) {
     modalWrapper = modalEl;
-    const modalElInner = modalEl.querySelector(".ds-modal__inner");
+    const modalElInner = modalEl.querySelector('.ds-modal__inner');
     const modalAttributes = Array.from(modalElInner.attributes);
-    const fallbackDiv = document.createElement("div");
-    modalEl.classList.add("ds-modal--hidden", "ds-modal--fallback");
+    const fallbackDiv = document.createElement('div');
+    modalEl.classList.add('ds-modal--hidden', 'ds-modal--fallback');
     modalAttributes.forEach((attr) => {
       fallbackDiv.setAttribute(attr.name, attr.value);
     });
-    fallbackDiv.setAttribute("role", "dialog");
-    fallbackDiv.setAttribute("aria-modal", "true");
+    fallbackDiv.setAttribute('role', 'dialog');
+    fallbackDiv.setAttribute('aria-modal', 'true');
     fallbackDiv.innerHTML = modalElInner.innerHTML;
     modalEl.replaceChild(fallbackDiv, modalElInner);
   }
 
-  modalEl.addEventListener("click", (e) => {
-    if (e.target === modalEl.querySelector(".ds-modal__inner")) closeModal(modalEl, isDialogSupported);
+  modalEl.addEventListener('click', (e) => {
+    if (e.target === modalEl.querySelector('.ds-modal__inner')) closeModal(modalEl, isDialogSupported);
   });
 
-  const closeButtons = Array.from(modalEl.getElementsByClassName("ds-modal__close"));
+  const closeButtons = Array.from(modalEl.getElementsByClassName('ds-modal__close'));
   closeButtons.forEach((button) => {
-    button.addEventListener("click", () => {
+    button.addEventListener('click', () => {
       closeModal(modalEl, isDialogSupported);
     });
   });
 }
 
 function openModal(modalEl) {
-  if (typeof HTMLDialogElement === "function") {
-    const modalElInner = modalEl.querySelector(".ds-modal__inner");
+  if (typeof HTMLDialogElement === 'function') {
+    const modalElInner = modalEl.querySelector('.ds-modal__inner');
     modalElInner.showModal();
     modalElInner.focus(); // Ensure the modal is focused when opened and not a button/link within it
   } else {
-    modalEl.classList.remove("ds-modal--hidden");
-    document.body.classList.add("no-scroll");
+    modalEl.classList.remove('ds-modal--hidden');
+    document.body.classList.add('no-scroll');
   }
 }
 
 function closeModal(modalEl, isDialogSupported) {
   if (isDialogSupported) {
-    const modalElInner = modalEl.querySelector(".ds-modal__inner");
+    const modalElInner = modalEl.querySelector('.ds-modal__inner');
     modalElInner.close();
   } else {
-    modalEl.classList.add("ds-modal--hidden");
-    document.body.classList.remove("no-scroll");
+    modalEl.classList.add('ds-modal--hidden');
+    document.body.classList.remove('no-scroll');
   }
 }
 
 function initModalStorybook() {
-  const modalEl = document.querySelector(".ds-modal");
+  const modalEl = document.querySelector('.ds-modal');
   initModal(modalEl);
   openModal(modalEl);
 }

package/components/pagination/README.md

@@ -1,7 +1,7 @@
 Pagination
 ==========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/commponents/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
+*   GitHub: [BonnierNews/dn-design-system/web/src/commponents/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
 *   Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--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/pagination/pagination.scss'`

package/components/pictogram/README.md

@@ -1,7 +1,7 @@
 Pictogram
 =========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
 *   Storybook: [Pictogram](https://designsystem.dn.se/?path=/docs/article-Pictogram--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/pictogram/pictogram.scss'`

package/components/pill/README.md

@@ -1,7 +1,7 @@
 Pill
 ====
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/pill](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pill)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/pill](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pill)
 *   Storybook: [Pill](https://designsystem.dn.se/?path=/docs/basic-pill--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/pill/pill.scss'`

package/components/profile-header/README.md

@@ -1,7 +1,7 @@
 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)
+*   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'`

package/components/quote/README.md

@@ -1,7 +1,7 @@
 Quote
 =====
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
 *   Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`

package/components/radio-button/README.md

@@ -1,7 +1,7 @@
 RadioButton
 ===========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
 *   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--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/radio-button/radio-button.scss`

package/components/spinner/README.md

@@ -1,7 +1,7 @@
 Spinner
 =======
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)
 *   Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--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/spinner/spinner.scss'`

package/components/switch/README.md

@@ -1,7 +1,7 @@
 Switch
 ======
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
 *   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-switch--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/switch/switch.scss`

package/components/tag-header/README.md

@@ -1,7 +1,7 @@
 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)
+*   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'`

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

@@ -1,14 +1,14 @@
 TeaserCard
 ==========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
 *   Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--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/assets/teaser/teaser.scss'`
 
 | 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

@@ -1,7 +1,7 @@
 TeaserCentered
 ==============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-centered](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-centered)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-centered](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-centered)
 *   Storybook: [Teasercentered](https://designsystem.dn.se/?path=/docs/section-teasercentered--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-centered/teaser-centered.scss'`
@@ -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", "main" | \- |
 | 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

@@ -1,7 +1,7 @@
 TeaserCounter
 =============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
 *   Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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-counter/teaser-counter.scss'`
@@ -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", "main" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
 

package/components/teaser-dot/README.md

@@ -1,7 +1,7 @@
 TeaserDot
 =========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
 *   Storybook: [TeaserDot](https://designsystem.dn.se/?path=/docs/section-teaser-dot--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-dot/teaser-dot.scss'`

package/components/teaser-footer/README.md

@@ -1,7 +1,7 @@
 TeaserFooter
 ============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-footer)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-footer)
 *   Storybook: [Subcomponents > TeaserFooter](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserfooter--docs)
 
 | Name | Description | Default |

package/components/teaser-image/README.md

@@ -1,7 +1,7 @@
 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)
+*   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)

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

@@ -1,7 +1,7 @@
 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)
+*   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'`
@@ -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", "main" | \- |
 | 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

@@ -1,7 +1,7 @@
 TeaserListSwipe
 ===============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
 *   Storybook: [TeaserListSwipe](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe--docs)
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe.scss'`
@@ -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-list-vertical/README.md

@@ -1,7 +1,7 @@
 TeaserListVertical
 ==================
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
 *   Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.scss'`

package/components/teaser-list-vertical/teaser-list-vertical.js

@@ -1,22 +1,19 @@
-export {
-  dsTeaserListVertical,
-  dsTeaserListVerticalStory
-}
+export { dsTeaserListVertical, dsTeaserListVerticalStory };
 
 function dsTeaserListVertical(teaserListVerticalWrappers = []) {
   teaserListVerticalWrappers.forEach((wrapper) => {
-    const teaserListGroupHeader = wrapper.querySelector(".ds-group-header--bottom-border");
-    teaserListGroupHeader?.classList.remove("ds-group-header--bottom-border");
+    const teaserListGroupHeader = wrapper.querySelector('.ds-group-header--bottom-border');
+    teaserListGroupHeader?.classList.remove('ds-group-header--bottom-border');
 
-    const teaserListVerticalContentContainer = wrapper.querySelector(".ds-teaser-list-vertical__content");
-    teaserListVerticalContentContainer.addEventListener("scroll", () => {
+    const teaserListVerticalContentContainer = wrapper.querySelector('.ds-teaser-list-vertical__content');
+    teaserListVerticalContentContainer.addEventListener('scroll', () => {
       const scrolledToTop = teaserListVerticalContentContainer.scrollTop === 0;
-      teaserListGroupHeader.classList.toggle("ds-group-header--bottom-border", !scrolledToTop);
+      teaserListGroupHeader.classList.toggle('ds-group-header--bottom-border', !scrolledToTop);
     });
   });
 }
 
 function dsTeaserListVerticalStory() {
-  const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
+  const teaserListVerticalWrappers = Array.from(document.getElementsByClassName('ds-teaser-list-vertical--flexible'));
   dsTeaserListVertical(teaserListVerticalWrappers);
 }

package/components/teaser-longlife/README.md

@@ -1,7 +1,7 @@
 TeaserLonglife
 ==============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-longlife](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-longlife)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-longlife](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-longlife)
 *   Storybook: [TeaserLonglife](https://designsystem.dn.se/?path=/docs/section-teaserlonglife--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-longlife/teaser-longlife.scss'`