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

package/.prettierignore

@@ -0,0 +1,10 @@
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+**/CHANGELOG.md
+**/*.md
+**/*.json
+**/*.scss
+.release-it-beta.cjs
+.release-it.cjs

package/.prettierrc

@@ -6,12 +6,31 @@
   "jsxSingleQuote": true,
   "trailingComma": "all",
   "bracketSpacing": true,
+  "importOrder": [
+    "^@bonniernews/dn-design-system-web/assets/(.*)$",
+    "^@bonniernews/dn-design-system-web/foundations/(.*)$",
+    "^@bonniernews/dn-design-system-web/helpers/(.*)$",
+    "^@bonniernews/dn-design-system-web/types-lib/(.*)$",
+    "^@bonniernews/dn-design-system-web/variables/(.*)$",
+    "^@bonniernews/dn-design-system-web/components/(.*)$",
+    "^@bonniernews/dn-design-system-web/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
   "overrides": [
     {
       "files": "**/*.scss",
       "options": {
         "singleQuote": false
       }
+    },
+    {
+      "files": "**/*.js",
+      "options": {
+        "semi": true
+      }
     }
-  ]
+  ],
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.45](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.44...@bonniernews/dn-design-system-web@32.7.45) (2025-08-06)
+
+
+### Bug Fixes
+
+* **web:** no relative imports ([#1855](https://github.com/BonnierNews/dn-design-system/issues/1855)) ([4d82749](https://github.com/BonnierNews/dn-design-system/commit/4d82749b3efa712c3c20c44d4818aacde8a43619))
+
+## [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/shared-props.ts

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

package/assets/types/teaser-props.ts

@@ -1,46 +1,46 @@
 import { ComponentChild } from 'preact'
+
 import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'
 
 export interface TeaserProps extends SharedProps {
   /** Heading of the teaser */
-  title: string;
+  title: string
   /** Target URL for the teaser */
-  targetLink: string;
+  targetLink: string
   /** Variant of the teaser */
-  variant?: "default" | "podcast" | "insandare" | "direkt";
+  variant?: 'default' | 'podcast' | 'insandare' | 'direkt'
   /** The area where the column is rendered */
-  areaType?: "right" | "bauta" | "bautaxl";
+  areaType?: 'right' | 'bauta' | 'main'
   /** The theme-class to apply to the teaser */
-  theme?: "nyheter" | "kultur";
+  theme?: 'nyheter' | 'kultur'
   /** Teaser subtext */
-  text?: string;
+  text?: string
   /** Top text in the teaser */
-  vignette?: string;
+  vignette?: string
   /** Text before the heading */
-  highlight?: string;
+  highlight?: string
   /** Red text before the text */
-  sticker?: string;
+  sticker?: string
   /** Main image or other media */
-  media?: ComponentChild;
+  media?: ComponentChild
   /** Flag so we can handle square teaser images */
   isSquareImage?: boolean
   /** Image of the author */
-  bylinePicture?: ComponentChild;
+  bylinePicture?: ComponentChild
   /** If the headline should be italic */
-  isItalicHeadline?: boolean;
+  isItalicHeadline?: boolean
   /** If the headline should be large (only if `isItalicHeadline` is true) */
-  isLargeHeadline?: boolean;
+  isLargeHeadline?: boolean
   /** If there should be a flashing ball before the text */
-  isFlashingDot?: boolean;
+  isFlashingDot?: boolean
   /** Publication time text */
-  publicationTime?: string;
+  publicationTime?: string
   /** Duration of podcast */
-  duration?: string;
+  duration?: string
   /** Byline aspect ratio */
-  bylineAspectRatio?: string;
+  bylineAspectRatio?: string
   /** Byline HTML */
-  bylineHtml?: string;
+  bylineHtml?: string
   /** Shows in teaser footer */
-  sectionName?: string;
+  sectionName?: string
 }
-

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

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

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

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

package/components/blocked-content/README.md

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

package/components/blocked-content/blocked-content.js

@@ -1,19 +1,16 @@
-export {
-  dsBlockedContent,
-  dsBlockedContentStory
-};
+export { dsBlockedContent, dsBlockedContentStory };
 
 function dsBlockedContent(params) {
   params = params || {};
 
-  const blockedContentTmpl = document.createElement("div");
+  const blockedContentTmpl = document.createElement('div');
   // NOTE: this should match output of blocked-content.njk and blocked-content.tsx
   blockedContentTmpl.innerHTML = `
     <div class="ds-blocked-content">
       <div class="ds-blocked-content__inner">
         <div class="ds-blocked-content__content">
           <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
-          <div class="ds-blocked-content__body">Innehållet ${ params.vendor ? `från ${params.vendor}` : '' } kunde inte visas på grund av dina val i kakinställningarna.</div>
+          <div class="ds-blocked-content__body">Innehållet ${params.vendor ? `från ${params.vendor}` : ''} kunde inte visas på grund av dina val i kakinställningarna.</div>
         </div>
         <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--default ds-btn--md ds-btn--full-width">
           <div class="ds-btn__inner">
@@ -27,12 +24,12 @@ function dsBlockedContent(params) {
     </div>
   `;
 
-  const newBlockedContent = blockedContentTmpl.getElementsByClassName("ds-blocked-content")[0];
-  const btnEl = newBlockedContent.getElementsByClassName("ds-btn")[0];
-  const bodyEl = newBlockedContent.getElementsByClassName("ds-blocked-content__body")[0];
+  const newBlockedContent = blockedContentTmpl.getElementsByClassName('ds-blocked-content')[0];
+  const btnEl = newBlockedContent.getElementsByClassName('ds-btn')[0];
+  const bodyEl = newBlockedContent.getElementsByClassName('ds-blocked-content__body')[0];
 
   if (params.title) {
-    const titleEl = newBlockedContent.getElementsByClassName("ds-blocked-content__title")[0];
+    const titleEl = newBlockedContent.getElementsByClassName('ds-blocked-content__title')[0];
     titleEl.textContent = params.title;
   }
 
@@ -41,15 +38,15 @@ function dsBlockedContent(params) {
   }
 
   if (params.link) {
-    const linkContainerEl = document.createElement("div");
-    const linkEl = document.createElement("a");
+    const linkContainerEl = document.createElement('div');
+    const linkEl = document.createElement('a');
     linkEl.href = params.link;
     linkEl.innerText = params.link;
-    linkEl.className = "ds-blocked-content__link";
+    linkEl.className = 'ds-blocked-content__link';
     if (params.vendor) {
-      linkEl.setAttribute("aria-label", `Länk till innehåll på ${params.vendor}`);
+      linkEl.setAttribute('aria-label', `Länk till innehåll på ${params.vendor}`);
     }
-    linkContainerEl.appendChild(linkEl)
+    linkContainerEl.appendChild(linkEl);
     bodyEl.appendChild(linkContainerEl);
   }
 
@@ -58,8 +55,8 @@ function dsBlockedContent(params) {
   }
 
   if (params.forcePx) {
-    newBlockedContent.classList.add("ds-force-px");
-    btnEl.classList.add("ds-force-px");
+    newBlockedContent.classList.add('ds-force-px');
+    btnEl.classList.add('ds-force-px');
   }
 
   if (params.attributes) {
@@ -79,11 +76,11 @@ function dsBlockedContent(params) {
 
 /** only use in storybook */
 function dsBlockedContentStory() {
-  const blockedContentElements = Array.from(document.getElementsByClassName("js-ds-blocked-content-story"));
+  const blockedContentElements = Array.from(document.getElementsByClassName('js-ds-blocked-content-story'));
   if (!blockedContentElements.length) return;
 
   blockedContentElements.forEach((blockedContentEl) => {
-    const params = JSON.parse(blockedContentEl.getAttribute("data-params"));
+    const params = JSON.parse(blockedContentEl.getAttribute('data-params'));
 
     const newBlockedContent = dsBlockedContent(params);
     blockedContentEl.replaceWith(newBlockedContent);

package/components/buddy-menu/README.md

@@ -1,7 +1,7 @@
 BuddyMenu
 =========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
 *   Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--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/buddy-menu/buddy-menu" as *;`

package/components/button/README.md

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

package/components/button/button-interactions.js

@@ -1,25 +1,22 @@
-export {
-  dsButtonToggle,
-  dsButtonToggleAll
-};
+export { dsButtonToggle, dsButtonToggleAll };
 
 function dsButtonToggle(toggleElements = []) {
   if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
-    toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-btn--disabled")) return;
-      const selectedText = toggleEl.querySelector(".ds-btn__on").textContent;
-      const unselectedText = toggleEl.querySelector(".ds-btn__off").textContent;
-      toggleEl.classList.toggle("ds-btn--selected");
-      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
-      const ariaLabel = toggleEl.getAttribute("aria-label") === selectedText ? unselectedText : selectedText;
-      toggleEl.setAttribute("aria-checked", ariaChecked);
-      toggleEl.setAttribute("aria-label", ariaLabel);
+    toggleEl.addEventListener('click', () => {
+      if (toggleEl.classList.contains('ds-btn--disabled')) return;
+      const selectedText = toggleEl.querySelector('.ds-btn__on').textContent;
+      const unselectedText = toggleEl.querySelector('.ds-btn__off').textContent;
+      toggleEl.classList.toggle('ds-btn--selected');
+      const ariaChecked = toggleEl.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
+      const ariaLabel = toggleEl.getAttribute('aria-label') === selectedText ? unselectedText : selectedText;
+      toggleEl.setAttribute('aria-checked', ariaChecked);
+      toggleEl.setAttribute('aria-label', ariaLabel);
     });
   });
 }
 
 function dsButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+  const toggleElements = Array.from(document.getElementsByClassName('ds-btn--toggle'));
   dsButtonToggle(toggleElements);
 }

package/components/button/button-types.ts

@@ -16,7 +16,7 @@ export interface ButtonSharedProps {
   /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
   forcePx?: boolean
   size?: 'sm' | 'md' | 'lg' | 'xl'
-  loading?: boolean,
+  loading?: boolean
   isIconButton?: boolean
 }
 
@@ -57,57 +57,50 @@ export interface ToggleWrapperProps {
 
 export interface ButtonStandardProps
   extends ButtonSharedProps,
-    Pick<
-      ButtonBaseProps,
-       'iconPosition' | 'type' | 'href' | 'mobileFullWidth'
-    > {
-      text: string
-    }
+    Pick<ButtonBaseProps, 'iconPosition' | 'type' | 'href' | 'mobileFullWidth'> {
+  text: string
+}
 
-    export interface ButtonIconProps
+export interface ButtonIconProps
   extends ButtonSharedProps,
-    Pick<
-      ButtonBaseProps,
-       'iconPosition' | 'type' | 'href' | 'mobileFullWidth'> {
-        iconName: DsIcon
-      }
+    Pick<ButtonBaseProps, 'iconPosition' | 'type' | 'href' | 'mobileFullWidth'> {
+  iconName: DsIcon
+}
 
-export type ButtonProps =
-| ({ isIconButton: true } & ButtonIconProps)
-| ({ isIconButton?: false } & ButtonStandardProps)
+export type ButtonProps = ({ isIconButton: true } & ButtonIconProps) | ({ isIconButton?: false } & ButtonStandardProps)
 
 export interface ButtonToggleStandardProps
   extends ButtonSharedProps,
-    Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'selectedIconName' | 'mobileFullWidth' > {
-      selectedText: string
-    }
+    Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'selectedIconName' | 'mobileFullWidth'> {
+  selectedText: string
+}
 
 export interface ButtonToggleIconProps
-extends ButtonSharedProps,
-  Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'mobileFullWidth' > {
-    iconName: DsIcon
-    selectedIconName: DsIcon
-  }
+  extends ButtonSharedProps,
+    Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'mobileFullWidth'> {
+  iconName: DsIcon
+  selectedIconName: DsIcon
+}
 
-  export type ButtonToggleProps =
-    | ({ isIconButton?: false } & ButtonToggleStandardProps)
-    | ({ isIconButton: true } & ButtonToggleIconProps)
+export type ButtonToggleProps =
+  | ({ isIconButton?: false } & ButtonToggleStandardProps)
+  | ({ isIconButton: true } & ButtonToggleIconProps)
 
 export interface TextButtonProps {
-  text: string;
-  type?: 'button' | 'submit';
+  text: string
+  type?: 'button' | 'submit'
   /** If href is set the button will be rendered as an a-tag */
-  href?: string;
-  disabled?: boolean;
+  href?: string
+  disabled?: boolean
   fullWidth?: boolean
   /** Button will only full width on mobile */
   mobileFullWidth?: boolean
   /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
-  iconName?: DsIcon;
-  iconPosition?: 'none' | 'left' | 'right';
-  hideTextOnMobile?: boolean;
-  size?: 'sm' | 'lg';
-  loading?: boolean,
+  iconName?: DsIcon
+  iconPosition?: 'none' | 'left' | 'right'
+  hideTextOnMobile?: boolean
+  size?: 'sm' | 'lg'
+  loading?: boolean
   forcePx?: boolean
   classNames?: string
   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */

package/components/button-toggle/README.md

@@ -1,7 +1,7 @@
 ButtonToggle
 ============
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
 *   Storybook: [Buttons > ButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
 
 ### [](#javascript)Javascript

package/components/byline/README.md

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

package/components/byline/byline-interaction.js

@@ -1,14 +1,14 @@
-import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js'
+import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js';
 
 export function initModalByline(article) {
-  const modalEl = article.querySelector(".ds-modal--byline");
+  const modalEl = article.querySelector('.ds-modal--byline');
   if (!modalEl) return;
   initModal(modalEl);
 
-  const bylines = article.getElementsByClassName("ds-byline");
+  const bylines = article.getElementsByClassName('ds-byline');
   for (const byline of bylines) {
-    byline.addEventListener("click", (e) => {
+    byline.addEventListener('click', (e) => {
       openModal(modalEl);
     });
-  };
+  }
 }

package/components/byline-list/README.md

@@ -1,7 +1,7 @@
 BylineList
 ==========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/byline-list](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/byline-list](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list)
 *   Storybook: [Byline-list](https://designsystem.dn.se/?path=/docs/article-byline-list--docs)
 
 BylineList is a component that renders a list of bylines with optional media and titles. It is used for the sheet that displays if we click a byline with more than one author.

package/components/byline-list/byline-list.js

@@ -1,14 +1,11 @@
 import { dsButtonToggle } from '@bonniernews/dn-design-system-web/components/button/button-interactions.js';
 
-export {
-  dsBylineList,
-  dsBylineListAll
-};
+export { dsBylineList, dsBylineListAll };
 
 function dsBylineList(listElements = []) {
   if (!listElements.length) return;
   listElements.forEach((listEl) => {
-    const toggleElements = Array.from(listEl.getElementsByClassName("ds-btn--toggle"));
+    const toggleElements = Array.from(listEl.getElementsByClassName('ds-btn--toggle'));
     dsButtonToggle(toggleElements);
     if (listEl.classList.contains('ds-btn--toggle')) {
       dsButtonToggle(listEl);
@@ -17,6 +14,6 @@ function dsBylineList(listElements = []) {
 }
 
 function dsBylineListAll() {
-  const listElements = Array.from(document.getElementsByClassName("ds-byline-list__item__content"));
+  const listElements = Array.from(document.getElementsByClassName('ds-byline-list__item__content'));
   dsBylineList(listElements);
 }

package/components/checkbox/README.md

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

package/components/direkt-circle/README.md

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

package/components/direkt-header/README.md

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

package/components/disclaimer/README.md

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

package/components/divider/README.md

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

package/components/empty-state/README.md

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

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/factbox/factbox.js

@@ -1,9 +1,6 @@
-export {
-  dsFactbox,
-  dsFactboxAll
-};
+export { dsFactbox, dsFactboxAll };
 
-const selector = "ds-factbox";
+const selector = 'ds-factbox';
 const expandedClass = `${selector}--expanded`;
 const maxHeight = 468; // this has to match max-height in factbox.scss exluding top/bottom spacing
 
@@ -24,14 +21,14 @@ function dsFactbox(factboxElements) {
     const expandMoreBtn = factboxEl.getElementsByClassName(`${selector}__expand-more`)[0];
     const expandLessBtn = factboxEl.getElementsByClassName(`${selector}__expand-less`)[0];
 
-    expandMoreBtn.addEventListener("click", () => {
+    expandMoreBtn.addEventListener('click', () => {
       factboxEl.classList.add(expandedClass);
-      showMoreEl.setAttribute("data-factbox-expanded", "");
+      showMoreEl.setAttribute('data-factbox-expanded', '');
     });
 
-    expandLessBtn.addEventListener("click", () => {
+    expandLessBtn.addEventListener('click', () => {
       factboxEl.classList.remove(expandedClass);
-      showMoreEl.removeAttribute("data-factbox-expanded");
+      showMoreEl.removeAttribute('data-factbox-expanded');
     });
   });
 }