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

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

@@ -13,7 +13,7 @@
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
 |nativeVariant | String | no | "standard" or "large" or "right"  | "standard" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |
 |mediaHtml | HTML String | no | | | Main image or other media |

package/components/teaser-native/README.md

@@ -13,7 +13,7 @@
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
 |nativeVariant | String | no | "standard" or "large" or "right"  | "standard" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |
 |mediaHtml | HTML String | no | | | Main image or other media |

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

@@ -16,7 +16,7 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |mediaHtml | HTML String | no | | | Main image or other media |

package/components/teaser-onsite/README.md

@@ -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", "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 | \- |
 | 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", "bautaxl" | \- |
+| 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-NJK.md → README-njk.md}

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

package/components/teaser-slideshow/README.md

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

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

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

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

@@ -12,8 +12,8 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|~variant~ | String | no | "default" or "podcast" | "default" | Not implemented |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|variant | String | no | "default" or "podcast" | "default" | |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |

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

@@ -13,7 +13,7 @@
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
 |variant | String | no | "default" or "podcast" | "default" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |

package/components/teaser-standard/README.md

@@ -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", "bautaxl" | \- |
+| 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", "bautaxl" | \- |
+| 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-text-on-image/README.md

@@ -1,7 +1,7 @@
 TeaserTextOnImage
 =================
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
 *   Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--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-text-on-image)/teaser-text-on-image.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-tipsa/{README-NJK.md → README-njk.md}

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

package/components/teaser-tipsa/README.md

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

package/components/text-button/README.md

@@ -1,7 +1,7 @@
 TextButton
 ==========
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/text-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-button)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/text-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-button)
 *   Storybook: [TextButton](https://designsystem.dn.se/?path=/docs/basic-buttons-textbutton--docs)
 
 | Name | Description | Default |

package/components/text-button-toggle/README.md

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

package/components/text-button-toggle/text-button-toggle.js

@@ -1,21 +1,18 @@
-export {
-  dsTextButtonToggle,
-  dsTextButtonToggleAll
-};
+export { dsTextButtonToggle, dsTextButtonToggleAll };
 
 function dsTextButtonToggle(toggleElements = []) {
   if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
-    toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-text-btn-toggle--disabled")) return;
-      toggleEl.classList.toggle("ds-text-btn-toggle--selected");
-      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
-      toggleEl.setAttribute("aria-checked", ariaChecked);
+    toggleEl.addEventListener('click', () => {
+      if (toggleEl.classList.contains('ds-text-btn-toggle--disabled')) return;
+      toggleEl.classList.toggle('ds-text-btn-toggle--selected');
+      const ariaChecked = toggleEl.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
+      toggleEl.setAttribute('aria-checked', ariaChecked);
     });
   });
 }
 
 function dsTextButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-text-btn-toggle"));
+  const toggleElements = Array.from(document.getElementsByClassName('ds-text-btn-toggle'));
   dsTextButtonToggle(toggleElements);
 }

package/components/text-input/README.md

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

package/components/text-input/text-input-interactions.js

@@ -1,28 +1,28 @@
 export const textInput = () => {
   function passwordToggle(id, toggle) {
-    var x = document.getElementById(id)
+    var x = document.getElementById(id);
     if (x.type === 'password') {
-      x.type = 'text'
-      toggle.classList.add('ds-btn--selected')
-      toggle.setAttribute('aria-checked', 'true')
-      toggle.setAttribute('aria-label', 'Dölj lösenord')
+      x.type = 'text';
+      toggle.classList.add('ds-btn--selected');
+      toggle.setAttribute('aria-checked', 'true');
+      toggle.setAttribute('aria-label', 'Dölj lösenord');
     } else {
-      x.type = 'password'
-      toggle.classList.remove('ds-btn--selected')
-      toggle.setAttribute('aria-checked', 'false')
-      toggle.setAttribute('aria-label', 'Visa lösenord')
+      x.type = 'password';
+      toggle.classList.remove('ds-btn--selected');
+      toggle.setAttribute('aria-checked', 'false');
+      toggle.setAttribute('aria-label', 'Visa lösenord');
     }
   }
 
-  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]')
+  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]');
   passwordInputs.forEach((input) => {
-    const toggle = document.getElementById(`${input.id}-password-toggle`)
+    const toggle = document.getElementById(`${input.id}-password-toggle`);
     if (toggle) {
       toggle.addEventListener('click', () => {
-        passwordToggle(input.id, toggle)
-      })
+        passwordToggle(input.id, toggle);
+      });
     }
-  })
-}
+  });
+};
 
-export default textInput
+export default textInput;

package/components/text-input/text-input.js

@@ -1,22 +1,22 @@
 const textInput = () => {
   function passwordToggle(id) {
-    var x = document.getElementById(id)
+    var x = document.getElementById(id);
     if (x.type === 'password') {
-      x.type = 'text'
+      x.type = 'text';
     } else {
-      x.type = 'password'
+      x.type = 'password';
     }
   }
 
-  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]')
+  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]');
   passwordInputs.forEach((input) => {
-    const toggle = document.getElementById(`${input.id}-password-toggle`)
+    const toggle = document.getElementById(`${input.id}-password-toggle`);
     if (toggle) {
       toggle.addEventListener('click', () => {
-        passwordToggle(input.id)
-      })
+        passwordToggle(input.id);
+      });
     }
-  })
-}
+  });
+};
 
-export default textInput
+export default textInput;

package/components/thematic-break/README.md

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

package/components/tooltip/README.md

@@ -1,7 +1,7 @@
 Tooltip
 =======
 
-*   GitHub: [BonnierNews/dn-design-system/../web/src/components/tooltip](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tooltip)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/tooltip](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tooltip)
 *   Storybook: [Tooltip](https://designsystem.dn.se/?path=/docs/basic-tooltip--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/tooltip/tooltip.scss'`
@@ -19,8 +19,16 @@ The component will not include styling by itself. Make sure to include the right
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
-<RunComponentJs
-  component={<div className="ds-tooltip ds-tooltip--arrow-top ds-tooltip--close-outside-click ds-tooltip--hidden"><div className="ds-tooltip__content"><React.Fragment key=".1"><h2>Senaste nytt</h2><p>Här är en text om en ny liten funktion vi har.</p></React.Fragment></div><Button attributes={{'aria-label': 'Stäng'}} classNames="ds-tooltip__close" iconName="close" isIconButton size="sm" variant="transparent"/></div>}
-  jsFunction={() => {}}
-/>
+<Tooltip
+  arrowPosition="top"
+  closeButton
+  closeOnClickOutside
+>
+  <React.Fragment key=".0">
+    <h2>
+      Senaste nytt    </h2>
+    <p>
+      Här är en text om en ny liten funktion vi har.    </p>
+  </React.Fragment>
+</Tooltip>
 ```

package/components/tooltip/tooltip.js

@@ -1,35 +1,29 @@
-export {
-  initTooltip,
-  openTooltip,
-  closeTooltip,
-  toggleTooltip,
-  initTooltipStorybook
-}
+export { initTooltip, openTooltip, closeTooltip, toggleTooltip, initTooltipStorybook };
 
-const TOOLTIP_HIDDEN = "ds-tooltip--hidden";
+const TOOLTIP_HIDDEN = 'ds-tooltip--hidden';
 
 let setupTooltipClickListener = true;
 
 function initTooltip(tooltipEl) {
-  const tooltipsClosingOnOutsideClick = document.getElementsByClassName("ds-tooltip--close-outside-click");
-  
+  const tooltipsClosingOnOutsideClick = document.getElementsByClassName('ds-tooltip--close-outside-click');
+
   if (setupTooltipClickListener && tooltipsClosingOnOutsideClick.length > 0) {
     setupTooltipClickListener = false;
 
-    document.addEventListener("click", (e) => {
-      const tooltipClick = e.target.closest(".ds-tooltip");
+    document.addEventListener('click', (e) => {
+      const tooltipClick = e.target.closest('.ds-tooltip');
       if (tooltipClick) return;
-      
+
       const tooltipsToClose = document.getElementsByClassName('ds-tooltip--close-outside-click');
       for (const tooltip of tooltipsToClose) {
-        closeTooltip(tooltip)
+        closeTooltip(tooltip);
       }
     });
   }
 
-  const closeButtons = Array.from(tooltipEl.getElementsByClassName("ds-tooltip__close"));
+  const closeButtons = Array.from(tooltipEl.getElementsByClassName('ds-tooltip__close'));
   closeButtons.forEach((button) => {
-    button.addEventListener("click", () => {
+    button.addEventListener('click', () => {
       closeTooltip(tooltipEl);
     });
   });
@@ -51,7 +45,7 @@ function closeTooltip(tooltipEl) {
 }
 
 function initTooltipStorybook() {
-  const tooltips = Array.from(document.getElementsByClassName("ds-tooltip"));
+  const tooltips = Array.from(document.getElementsByClassName('ds-tooltip'));
   tooltips.forEach((tooltipEl) => {
     initTooltip(tooltipEl);
     openTooltip(tooltipEl);

package/components/video-caption/README.md

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

package/helpers/formatClassString.ts

@@ -1,3 +1,3 @@
-export const formatClassString = (classesArray: (string|undefined|false)[]): string => {
-  return classesArray.filter(x => !!x).join(' ');
+export const formatClassString = (classesArray: (string | undefined | false)[]): string => {
+  return classesArray.filter((x) => !!x).join(' ')
 }

package/index.d.ts

@@ -1,4 +1,4 @@
-declare module '\*.svg' {
+declare module '*.svg' {
   const filePathString: string
   export default filePathString
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.43",
+  "version": "32.7.45",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -42,10 +42,12 @@
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@release-it/conventional-changelog": "^8.0.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "node-html-parser": "^7.0.1",
     "postcss": "8.4.31",
     "preact": "^10.24.0",
+    "prettier": "^3.0.1",
     "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
@@ -56,6 +58,8 @@
   },
   "scripts": {
     "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\"",
+    "prettier-src-check": "prettier --check . --config ./.prettierrc",
+    "prettier-src-fix": "prettier --write . --config ./.prettierrc",
     "release:web": "release-it --ci --vv",
     "prerelease:web": "release-it --preRelease=beta --ci --vv --config .release-it-beta.cjs"
   }

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

@@ -1,5 +1,5 @@
 import { ComponentChild } from 'preact';
-import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
 export interface ArticleImageProps extends SharedProps {
     image: ComponentChild;
     caption?: string;

package/preact/assets/form-field/form-field.d.ts

@@ -1,4 +1,4 @@
-import { ComponentChildren } from "preact";
+import { ComponentChildren } from 'preact';
 export interface FormFieldProps {
     error?: boolean;
     errorMessage?: string;
@@ -8,5 +8,5 @@ export interface FormFieldProps {
     type?: string;
     children?: ComponentChildren;
 }
-export declare const FormField: ({ error, errorMessage, wrapperClasses, helpHtml, helpText, type, children }: FormFieldProps) => import("preact").JSX.Element;
+export declare const FormField: ({ error, errorMessage, wrapperClasses, helpHtml, helpText, type, children, }: FormFieldProps) => import("preact").JSX.Element;
 export default FormField;

package/preact/components/article-body-image/article-body-image.d.ts

@@ -1,6 +1,6 @@
-import { ArticleImageProps } from '../../assets/article-image/article-image';
+import { ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx';
 /**
- * - 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: