@bonniernews/dn-design-system-web 32.7.44 → 32.7.46-beta.0

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'`

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

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

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.md

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

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" | \- |
+| 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" | \- |
+| 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.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" | \- |
+| 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'`

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'`

package/components/teaser-onsite/README.md

@@ -5,7 +5,7 @@ Also known as "På Plats-puffen".
 
 In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
 *   Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--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-onsite/teaser-onsite.scss'`
@@ -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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |

package/components/teaser-package/README.md

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

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

@@ -1,7 +1,7 @@
 TeaserRightNow
 ==============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-right-now](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-right-now)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-right-now](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-right-now)
 *   Storybook: [TeaserRightNow](https://designsystem.dn.se/?path=/docs/section-teaserrightnow--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-right-now)/teaser-right-now.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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | 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.md

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

package/components/teaser-standard/README.md

@@ -1,7 +1,7 @@
 TeaserStandard
 ==============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
 *   Storybook: [TeaserStandard](https://designsystem.dn.se/?path=/docs/section-teaserstandard--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-standard/teaser-standard.scss'`
@@ -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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | 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-standard/teaser-standard.js

@@ -1,10 +1,7 @@
-export {
-  dsTeaserStandard,
-  dsTeaserStandardStory
-};
+export { dsTeaserStandard, dsTeaserStandardStory };
 
 function dsTeaserStandard(params = {}) {
-  const teaser = document.createElement("a");
+  const teaser = document.createElement('a');
   // NOTE: this should match output of teaser-standard.tsx for a subset of the parameters
   teaser.innerHTML = `
     <div class="ds-teaser__content">
@@ -13,22 +10,22 @@ function dsTeaserStandard(params = {}) {
         <p class="ds-teaser__text"></p>
       </div>
     </div>`;
-  teaser.classList.add("ds-teaser");
-  teaser.classList.add("ds-teaser--standard");
-  teaser.classList.add("ds-teaser--standard-without-byline");
+  teaser.classList.add('ds-teaser');
+  teaser.classList.add('ds-teaser--standard');
+  teaser.classList.add('ds-teaser--standard-without-byline');
 
   if (params.targetLink) {
-    teaser.setAttribute("href", params.targetLink)
+    teaser.setAttribute('href', params.targetLink);
   }
 
   if (params.title) {
-    const titleEl = teaser.getElementsByClassName("ds-teaser__title")[0];
+    const titleEl = teaser.getElementsByClassName('ds-teaser__title')[0];
     titleEl.textContent = params.title;
   }
 
   if (params.text) {
-    const textEl = teaser.getElementsByClassName("ds-teaser__text")[0];
-    textEl.appendChild(document.createTextNode(params.text))
+    const textEl = teaser.getElementsByClassName('ds-teaser__text')[0];
+    textEl.appendChild(document.createTextNode(params.text));
   }
 
   if (params.classNames) {
@@ -46,9 +43,9 @@ function dsTeaserStandard(params = {}) {
 
 /** only use in storybook */
 function dsTeaserStandardStory() {
-  const jsTeasers = Array.from(document.getElementsByClassName("js-ds-teaser-standard-story"));
+  const jsTeasers = Array.from(document.getElementsByClassName('js-ds-teaser-standard-story'));
   jsTeasers.forEach((teaserEl) => {
-    const params = JSON.parse(teaserEl.getAttribute("data-params"));
+    const params = JSON.parse(teaserEl.getAttribute('data-params'));
     teaserEl.replaceWith(dsTeaserStandard(params));
   });
 }

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

@@ -1,7 +1,7 @@
 TeaserSwipeCard
 ===============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
 *   Storybook: [TeaserSwipeCard](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe-teaserswipecard--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-swipe-card/teaser-swipe-card.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" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | 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 | \- |