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

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

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.44",
+  "version": "32.7.46-beta.0",
   "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:

package/preact/components/article-body-image/article-body-image.js

@@ -6,11 +6,7 @@ var formatClassString = (classesArray) => {
 // ../src/components/image-caption/image-caption.tsx
 import { jsx, jsxs } from "preact/jsx-runtime";
 var ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }) => {
-  const classes = formatClassString([
-    "ds-image-caption",
-    forcePx && "ds-force-px",
-    classNames
-  ]);
+  const classes = formatClassString(["ds-image-caption", forcePx && "ds-force-px", classNames]);
   const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;
   const authorClasses = [
     "ds-article-image__credits",

package/preact/components/article-body-image/article-body-image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.tsx", "../../../assets/article-image/article-image.tsx", "../../../components/article-body-image/article-body-image.tsx"],
-  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps extends SharedProps {\n  /**  Ex \"Detta \u00E4r en bildtext\" */\n  caption?: string;\n  /** Ex \"Paul Hansen\" */\n  author?: string;\n  /** Type of image. Ex \"Foto\" or \"Illustration\" */\n  imageType?: string;\n  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)\n * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/image-caption/image-caption.scss'`\n */\nexport const ImageCaption = ({caption, author, imageType, classNames, attributes, forcePx}: ImageCaptionProps) => {\n  const classes = formatClassString([\n    'ds-image-caption',\n    forcePx && 'ds-force-px',\n    classNames,\n  ]);\n\n  const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;\n\n  const authorClasses = [\n    'ds-article-image__credits',\n    authorText && authorText.length >= 27 && authorText.length < 60 // Low estimate of how much will fit on tablet/desktop\n      ? 'ds-article-image__credits--nowrap-bigscreen' : authorText && authorText.length < 27 // Low estimate of how much will fit on 320px mobile\n      ? 'ds-article-image__credits--nowrap' : null,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <figcaption className={classes} aria-hidden='true' {...attributes} >\n      {/* This needs to be on the same line to maintain a space between the caption-span and author-span */}\n      {caption && <span>{caption}</span>} {authorText && <span className={authorClasses}>{authorText}</span>}\n    </figcaption>\n  );\n};\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { ImageCaption } from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.tsx'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nexport interface ArticleImageProps extends SharedProps {\n  image: ComponentChild\n  caption?: string\n  author?: string\n  imageType?: string\n  fullWidth?: boolean\n  forcePx?: boolean\n}\n\nexport const ArticleImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n  const showCaption = !!caption || !!author\n\n  return (\n    <figure className={classes} {...attributes}>\n      {fullWidth ? (\n        <div className='ds-full-width-element'>{image}</div>\n      ) : (\n        image\n      )}\n      {showCaption && <ImageCaption caption={caption} author={author} imageType={imageType} forcePx={forcePx} />}\n    </figure>\n  )\n}\n", "import { ArticleImage, ArticleImageProps } from '../../assets/article-image/article-image'\nimport { formatClassString } from '../../helpers/formatClassString'\n\n/**\n * - 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)\n * - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`\n */\nexport const ArticleBodyImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image--body'\n  const classes = formatClassString([componentClassName, classNames])\n\n  return (\n    <ArticleImage\n      image={image}\n      caption={caption}\n      author={author}\n      imageType={imageType}\n      fullWidth={fullWidth}\n      forcePx={forcePx}\n      classNames={classes}\n      attributes={attributes}\n    />\n  )\n}\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACoCI,SAEc,KAFd;AAjBG,IAAM,eAAe,CAAC,EAAC,SAAS,QAAQ,WAAW,YAAY,YAAY,QAAO,MAAyB;AAChH,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,aAAa,aAAa,SAAS,GAAG,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK;AAElH,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc,WAAW,UAAU,MAAM,WAAW,SAAS,KACzD,gDAAgD,cAAc,WAAW,SAAS,KAClF,sCAAsC;AAAA,EAC5C,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,qBAAC,gBAAW,WAAW,SAAS,eAAY,QAAQ,GAAG,YAEpD;AAAA,eAAW,oBAAC,UAAM,mBAAQ;AAAA,IAAQ;AAAA,IAAE,cAAc,oBAAC,UAAK,WAAW,eAAgB,sBAAW;AAAA,KACjG;AAEJ;;;ACdI,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAfG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAC5F,QAAM,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;AAEnC,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC7B;AAAA,gBACC,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,iBAAM,IAE9C;AAAA,IAED,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACdI,gBAAAE,YAAA;AAdG,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["export const formatClassString = (classesArray: (string | undefined | false)[]): string => {\n  return classesArray.filter((x) => !!x).join(' ')\n}\n", "import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nexport interface ImageCaptionProps extends SharedProps {\n  /**  Ex \"Detta \u00E4r en bildtext\" */\n  caption?: string\n  /** Ex \"Paul Hansen\" */\n  author?: string\n  /** Type of image. Ex \"Foto\" or \"Illustration\" */\n  imageType?: string\n  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n  forcePx?: boolean\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)\n * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/image-caption/image-caption.scss'`\n */\nexport const ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }: ImageCaptionProps) => {\n  const classes = formatClassString(['ds-image-caption', forcePx && 'ds-force-px', classNames])\n\n  const authorText =\n    imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author\n\n  const authorClasses = [\n    'ds-article-image__credits',\n    authorText && authorText.length >= 27 && authorText.length < 60 // Low estimate of how much will fit on tablet/desktop\n      ? 'ds-article-image__credits--nowrap-bigscreen'\n      : authorText && authorText.length < 27 // Low estimate of how much will fit on 320px mobile\n        ? 'ds-article-image__credits--nowrap'\n        : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <figcaption className={classes} aria-hidden='true' {...attributes}>\n      {/* This needs to be on the same line to maintain a space between the caption-span and author-span */}\n      {caption && <span>{caption}</span>} {authorText && <span className={authorClasses}>{authorText}</span>}\n    </figcaption>\n  )\n}\n", "import { ComponentChild } from 'preact'\n\nimport type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nimport { ImageCaption } from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.tsx'\n\nexport interface ArticleImageProps extends SharedProps {\n  image: ComponentChild\n  caption?: string\n  author?: string\n  imageType?: string\n  fullWidth?: boolean\n  forcePx?: boolean\n}\n\nexport const ArticleImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n  const showCaption = !!caption || !!author\n\n  return (\n    <figure className={classes} {...attributes}>\n      {fullWidth ? <div className='ds-full-width-element'>{image}</div> : image}\n      {showCaption && <ImageCaption caption={caption} author={author} imageType={imageType} forcePx={forcePx} />}\n    </figure>\n  )\n}\n", "import {\n  ArticleImage,\n  ArticleImageProps,\n} from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\n/**\n * - 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)\n * - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`\n */\nexport const ArticleBodyImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image--body'\n  const classes = formatClassString([componentClassName, classNames])\n\n  return (\n    <ArticleImage\n      image={image}\n      caption={caption}\n      author={author}\n      imageType={imageType}\n      fullWidth={fullWidth}\n      forcePx={forcePx}\n      classNames={classes}\n      attributes={attributes}\n    />\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAyD;AACzF,SAAO,aAAa,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AACjD;;;ACsCI,SAEc,KAFd;AAlBG,IAAM,eAAe,CAAC,EAAE,SAAS,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAyB;AAClH,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAE5F,QAAM,aACJ,aAAa,SAAS,GAAG,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK;AAEjG,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc,WAAW,UAAU,MAAM,WAAW,SAAS,KACzD,gDACA,cAAc,WAAW,SAAS,KAChC,sCACA;AAAA,EACR,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,qBAAC,gBAAW,WAAW,SAAS,eAAY,QAAQ,GAAG,YAEpD;AAAA,eAAW,oBAAC,UAAM,mBAAQ;AAAA,IAAQ;AAAA,IAAE,cAAc,oBAAC,UAAK,WAAW,eAAgB,sBAAW;AAAA,KACjG;AAEJ;;;ACbI,SACe,OAAAA,MADf,QAAAC,aAAA;AAfG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAC5F,QAAM,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;AAEnC,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC7B;AAAA,gBAAY,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,iBAAM,IAAS;AAAA,IACnE,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACTI,gBAAAE,YAAA;AAdG,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;",
   "names": ["jsx", "jsxs", "jsx"]
 }

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

@@ -1,9 +1,9 @@
 import { ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx';
 /**
- * - 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'`
  */
-export declare const ArticleTopImage: ({ caption, imageType, author, image, forcePx, classNames, attributes }: ArticleImageProps) => import("preact").JSX.Element;
+export declare const ArticleTopImage: ({ caption, imageType, author, image, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;

package/preact/components/article-top-image/article-top-image.js

@@ -6,11 +6,7 @@ var formatClassString = (classesArray) => {
 // ../src/components/image-caption/image-caption.tsx
 import { jsx, jsxs } from "preact/jsx-runtime";
 var ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }) => {
-  const classes = formatClassString([
-    "ds-image-caption",
-    forcePx && "ds-force-px",
-    classNames
-  ]);
+  const classes = formatClassString(["ds-image-caption", forcePx && "ds-force-px", classNames]);
   const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;
   const authorClasses = [
     "ds-article-image__credits",
@@ -46,7 +42,15 @@ var ArticleImage = ({
 
 // ../src/components/article-top-image/article-top-image.tsx
 import { jsx as jsx3 } from "preact/jsx-runtime";
-var ArticleTopImage = ({ caption, imageType, author, image, forcePx, classNames, attributes }) => {
+var ArticleTopImage = ({
+  caption,
+  imageType,
+  author,
+  image,
+  forcePx,
+  classNames,
+  attributes
+}) => {
   const classes = formatClassString(["ds-article-image--top", classNames]);
   const imageParams = {
     fullWidth: true,

package/preact/components/article-top-image/article-top-image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.tsx", "../../../assets/article-image/article-image.tsx", "../../../components/article-top-image/article-top-image.tsx"],
-  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps extends SharedProps {\n  /**  Ex \"Detta \u00E4r en bildtext\" */\n  caption?: string;\n  /** Ex \"Paul Hansen\" */\n  author?: string;\n  /** Type of image. Ex \"Foto\" or \"Illustration\" */\n  imageType?: string;\n  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)\n * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/image-caption/image-caption.scss'`\n */\nexport const ImageCaption = ({caption, author, imageType, classNames, attributes, forcePx}: ImageCaptionProps) => {\n  const classes = formatClassString([\n    'ds-image-caption',\n    forcePx && 'ds-force-px',\n    classNames,\n  ]);\n\n  const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;\n\n  const authorClasses = [\n    'ds-article-image__credits',\n    authorText && authorText.length >= 27 && authorText.length < 60 // Low estimate of how much will fit on tablet/desktop\n      ? 'ds-article-image__credits--nowrap-bigscreen' : authorText && authorText.length < 27 // Low estimate of how much will fit on 320px mobile\n      ? 'ds-article-image__credits--nowrap' : null,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <figcaption className={classes} aria-hidden='true' {...attributes} >\n      {/* This needs to be on the same line to maintain a space between the caption-span and author-span */}\n      {caption && <span>{caption}</span>} {authorText && <span className={authorClasses}>{authorText}</span>}\n    </figcaption>\n  );\n};\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { ImageCaption } from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.tsx'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nexport interface ArticleImageProps extends SharedProps {\n  image: ComponentChild\n  caption?: string\n  author?: string\n  imageType?: string\n  fullWidth?: boolean\n  forcePx?: boolean\n}\n\nexport const ArticleImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n  const showCaption = !!caption || !!author\n\n  return (\n    <figure className={classes} {...attributes}>\n      {fullWidth ? (\n        <div className='ds-full-width-element'>{image}</div>\n      ) : (\n        image\n      )}\n      {showCaption && <ImageCaption caption={caption} author={author} imageType={imageType} forcePx={forcePx} />}\n    </figure>\n  )\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { ArticleImage, ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx'\n\n/**\n * - 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)\n * - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.scss'`\n */\nexport const ArticleTopImage = ({ caption, imageType, author, image, forcePx, classNames, attributes }: ArticleImageProps) => {\n  const classes = formatClassString(['ds-article-image--top', classNames])\n\n  const imageParams = {\n    fullWidth: true,\n    caption,\n    imageType,\n    author,\n    image,\n    forcePx,\n    classNames: classes,\n    attributes,\n  }\n\n  return (\n    <ArticleImage {...imageParams} />\n  )\n}\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACoCI,SAEc,KAFd;AAjBG,IAAM,eAAe,CAAC,EAAC,SAAS,QAAQ,WAAW,YAAY,YAAY,QAAO,MAAyB;AAChH,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,aAAa,aAAa,SAAS,GAAG,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK;AAElH,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc,WAAW,UAAU,MAAM,WAAW,SAAS,KACzD,gDAAgD,cAAc,WAAW,SAAS,KAClF,sCAAsC;AAAA,EAC5C,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,qBAAC,gBAAW,WAAW,SAAS,eAAY,QAAQ,GAAG,YAEpD;AAAA,eAAW,oBAAC,UAAM,mBAAQ;AAAA,IAAQ;AAAA,IAAE,cAAc,oBAAC,UAAK,WAAW,eAAgB,sBAAW;AAAA,KACjG;AAEJ;;;ACdI,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAfG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAC5F,QAAM,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;AAEnC,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC7B;AAAA,gBACC,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,iBAAM,IAE9C;AAAA,IAED,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACbI,gBAAAE,YAAA;AAfG,IAAM,kBAAkB,CAAC,EAAE,SAAS,WAAW,QAAQ,OAAO,SAAS,YAAY,WAAW,MAAyB;AAC5H,QAAM,UAAU,kBAAkB,CAAC,yBAAyB,UAAU,CAAC;AAEvE,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF;AAEA,SACE,gBAAAA,KAAC,gBAAc,GAAG,aAAa;AAEnC;",
+  "sourcesContent": ["export const formatClassString = (classesArray: (string | undefined | false)[]): string => {\n  return classesArray.filter((x) => !!x).join(' ')\n}\n", "import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nexport interface ImageCaptionProps extends SharedProps {\n  /**  Ex \"Detta \u00E4r en bildtext\" */\n  caption?: string\n  /** Ex \"Paul Hansen\" */\n  author?: string\n  /** Type of image. Ex \"Foto\" or \"Illustration\" */\n  imageType?: string\n  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n  forcePx?: boolean\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)\n * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/image-caption/image-caption.scss'`\n */\nexport const ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }: ImageCaptionProps) => {\n  const classes = formatClassString(['ds-image-caption', forcePx && 'ds-force-px', classNames])\n\n  const authorText =\n    imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author\n\n  const authorClasses = [\n    'ds-article-image__credits',\n    authorText && authorText.length >= 27 && authorText.length < 60 // Low estimate of how much will fit on tablet/desktop\n      ? 'ds-article-image__credits--nowrap-bigscreen'\n      : authorText && authorText.length < 27 // Low estimate of how much will fit on 320px mobile\n        ? 'ds-article-image__credits--nowrap'\n        : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <figcaption className={classes} aria-hidden='true' {...attributes}>\n      {/* This needs to be on the same line to maintain a space between the caption-span and author-span */}\n      {caption && <span>{caption}</span>} {authorText && <span className={authorClasses}>{authorText}</span>}\n    </figcaption>\n  )\n}\n", "import { ComponentChild } from 'preact'\n\nimport type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nimport { ImageCaption } from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.tsx'\n\nexport interface ArticleImageProps extends SharedProps {\n  image: ComponentChild\n  caption?: string\n  author?: string\n  imageType?: string\n  fullWidth?: boolean\n  forcePx?: boolean\n}\n\nexport const ArticleImage = ({\n  image,\n  caption = '',\n  author = '',\n  imageType = '',\n  fullWidth,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const componentClassName = 'ds-article-image'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n  const showCaption = !!caption || !!author\n\n  return (\n    <figure className={classes} {...attributes}>\n      {fullWidth ? <div className='ds-full-width-element'>{image}</div> : image}\n      {showCaption && <ImageCaption caption={caption} author={author} imageType={imageType} forcePx={forcePx} />}\n    </figure>\n  )\n}\n", "import {\n  ArticleImage,\n  ArticleImageProps,\n} from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\n/**\n * - 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)\n * - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.scss'`\n */\nexport const ArticleTopImage = ({\n  caption,\n  imageType,\n  author,\n  image,\n  forcePx,\n  classNames,\n  attributes,\n}: ArticleImageProps) => {\n  const classes = formatClassString(['ds-article-image--top', classNames])\n\n  const imageParams = {\n    fullWidth: true,\n    caption,\n    imageType,\n    author,\n    image,\n    forcePx,\n    classNames: classes,\n    attributes,\n  }\n\n  return <ArticleImage {...imageParams} />\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAyD;AACzF,SAAO,aAAa,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AACjD;;;ACsCI,SAEc,KAFd;AAlBG,IAAM,eAAe,CAAC,EAAE,SAAS,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAyB;AAClH,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAE5F,QAAM,aACJ,aAAa,SAAS,GAAG,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK;AAEjG,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc,WAAW,UAAU,MAAM,WAAW,SAAS,KACzD,gDACA,cAAc,WAAW,SAAS,KAChC,sCACA;AAAA,EACR,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,qBAAC,gBAAW,WAAW,SAAS,eAAY,QAAQ,GAAG,YAEpD;AAAA,eAAW,oBAAC,UAAM,mBAAQ;AAAA,IAAQ;AAAA,IAAE,cAAc,oBAAC,UAAK,WAAW,eAAgB,sBAAW;AAAA,KACjG;AAEJ;;;ACbI,SACe,OAAAA,MADf,QAAAC,aAAA;AAfG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAC5F,QAAM,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;AAEnC,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC7B;AAAA,gBAAY,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,iBAAM,IAAS;AAAA,IACnE,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACDS,gBAAAE,YAAA;AAtBF,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,UAAU,kBAAkB,CAAC,yBAAyB,UAAU,CAAC;AAEvE,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF;AAEA,SAAO,gBAAAA,KAAC,gBAAc,GAAG,aAAa;AACxC;",
   "names": ["jsx", "jsxs", "jsx"]
 }

package/preact/components/blocked-content/blocked-content.d.ts

@@ -1,4 +1,4 @@
-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 BlockedContentProps extends SharedProps {
     title: string;
     body: string;
@@ -9,7 +9,7 @@ export interface BlockedContentProps extends SharedProps {
     };
 }
 /**
- * - 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:

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

@@ -161,23 +161,28 @@ var Button = ({
   attributes,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx5(ButtonBase, { ...{
-    text,
-    disabled,
-    variant,
-    size,
-    fullWidth,
-    mobileFullWidth,
-    iconPosition,
-    iconName,
-    loading,
-    type,
-    href,
-    isIconButton,
-    classNames,
-    attributes,
-    forcePx
-  } });
+  return /* @__PURE__ */ jsx5(
+    ButtonBase,
+    {
+      ...{
+        text,
+        disabled,
+        variant,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        iconPosition,
+        iconName,
+        loading,
+        type,
+        href,
+        isIconButton,
+        classNames,
+        attributes,
+        forcePx
+      }
+    }
+  );
 };
 
 // ../src/components/blocked-content/blocked-content.tsx
@@ -192,11 +197,7 @@ var BlockedContent = ({
   elementAttributes = {}
 }) => {
   const componentClassName = "ds-blocked-content";
-  const classes = [
-    componentClassName,
-    forcePx ? "ds-force-px" : "",
-    classNames
-  ].filter(Boolean).join(" ");
+  const classes = formatClassString([componentClassName, forcePx ? "ds-force-px" : "", classNames]);
   return /* @__PURE__ */ jsx6("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__inner`, children: [
     /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__content`, children: [
       /* @__PURE__ */ jsx6("h2", { className: `${componentClassName}__title`, children: title }),