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

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 }),