@bonniernews/dn-design-system-web 32.7.7 → 32.7.9

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.8...@bonniernews/dn-design-system-web@32.7.9) (2025-07-03)
+
+
+### Bug Fixes
+
+* **web:** teaser footer tsx ([#1805](https://github.com/BonnierNews/dn-design-system/issues/1805)) ([3f0beb4](https://github.com/BonnierNews/dn-design-system/commit/3f0beb44dcad5a4f193b12b789979a4d28804314))
+
+## [32.7.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.7...@bonniernews/dn-design-system-web@32.7.8) (2025-07-03)
+
+
+### Bug Fixes
+
+* **web:** use shared props type ([#1806](https://github.com/BonnierNews/dn-design-system/issues/1806)) ([03f6e3a](https://github.com/BonnierNews/dn-design-system/commit/03f6e3a88d292828c965cfa918aec689d6be7d99))
+
 ## [32.7.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.6...@bonniernews/dn-design-system-web@32.7.7) (2025-07-03)
 
 

package/assets/types/shared-props.ts

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

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

@@ -14,8 +14,8 @@ The component will not include styling by itself. Make sure to include the right
 | imageType | string | ", " |
 | fullWidth | boolean | \- |
 | forcePx | boolean | \- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ArticleBodyImage

package/components/blocked-content/README.md

@@ -12,9 +12,9 @@ The component will not include styling by itself. Make sure to include the right
 | body\* | string | \- |
 | link\* | string | \- |
 | forcePx | boolean | false |
-| classNames | string | ", " |
-| attributes | object | { } |
 | elementAttributes | { \[key: string\]: string; } | { } |
+| classNames | Ex. "my-special-class"<br />string | ", " |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <BlockedContent

package/components/buddy-menu/README.md

@@ -33,9 +33,9 @@ dsListItem(listElements);s
 | addons | Ex. \[{ title: 'Annonsfri', href: "[https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt](https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt)" }\]<br />{ title: string; href?: string; classNames?: string; }\[\] | \- |
 | addonsClassNames | string | \- |
 | isDnSkola | boolean | false |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <BuddyMenu

package/components/byline/README.md

@@ -23,8 +23,8 @@ initModalByline(articleElement);
 | hideBorder | boolean | false |
 | renderBylineModal | boolean | false |
 | showNameAsLink | boolean | false |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <RunComponentJs

package/components/byline-list/README.md

@@ -13,10 +13,10 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | bylines\* | BylineData\[\] | \- |
-| attributes | { \[key: string\]: string; } | \- |
 | showBorderOnLastItem | boolean | false |
 | forcePx | boolean | \- |
-| classNames | string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <BylineList

package/components/checkbox/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | disabled | boolean | \- |
 | name | string | "ds-checkbox" |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Checkbox name="ds-checkbox" />

package/components/direkt-circle/README.md

@@ -8,9 +8,9 @@ DirektCircle
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | circleColor | Hex code or supported color name<br />string | "white" |
-| classNames | string | \- |
 | isAnimated | boolean | false |
-| attributes | object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <DirektCircle />

package/components/direkt-header/README.md

@@ -13,8 +13,8 @@ The component will not include styling by itself. Make sure to include the right
 | pretitle | string | "Direkt" |
 | isAnimated | boolean | true |
 | renderAsH2 | boolean | false |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <DirektHeader

package/components/disclaimer/README.md

@@ -11,8 +11,8 @@ The component will not include styling by itself. Make sure to include the right
 | bodyHtml\* | string | \- |
 | iconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | variant | "default", "native" | "default" |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Disclaimer bodyHtml="Detta är en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal. <a href='www.dn.se'>länk</a>" />

package/components/divider/README.md

@@ -9,8 +9,8 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | variant | "soft", "medium", "hard" | "soft" |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Divider variant="soft" />

package/components/footer/README.md

@@ -13,9 +13,9 @@ The component will not include styling by itself. Make sure to include the right
 | linkGroups | FooterLinkList\[\] | \- |
 | rudolf\* | { imgUrl: string; text: string; } | \- |
 | buttons | Footerbutton\[\] | \- |
-| classNames | string | \- |
-| attributes | object | \- |
 | forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Footer

package/components/game-header/README.md

@@ -13,8 +13,8 @@ The component will not include styling by itself. Make sure to include the right
 | descriptionHtml | string | \- |
 | textColor | string | \- |
 | backgroundColor | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <GameHeader

package/components/image-caption/README.md

@@ -11,9 +11,9 @@ The component will not include styling by itself. Make sure to include the right
 | caption | Ex "Detta är en bildtext"<br />string | \- |
 | author | Ex "Paul Hansen"<br />string | \- |
 | imageType | Type of image. Ex "Foto" or "Illustration"<br />string | \- |
-| classNames | Ex. "my-special-class another-class"<br />string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ImageCaption

package/components/pill/README.md

@@ -12,8 +12,8 @@ The component will not include styling by itself. Make sure to include the right
 | variant | "link" | link |
 | size | "sm", "lg" | "lg" |
 | href\* | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
 ```jsx
 <Pill

package/components/profile-header/README.md

@@ -20,8 +20,8 @@ The component will not include styling by itself. Make sure to include the right
 | toggleLoading | boolean | false |
 | toggleClassNames | string | ", " |
 | toggleAttributes | { \[key: string\]: string; } | { } |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ProfileHeader

package/components/quote/README.md

@@ -10,9 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | bodyHtml\* | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Quote bodyHtml="<p>Vi har blivit som Kuba. Vi lever inte. Vi överlever.</p>" />

package/components/radio-button/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | stripLabel | boolean | \- |
 | disabled | boolean | \- |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <RadioButton

package/components/spinner/README.md

@@ -11,8 +11,8 @@ The component will not include styling by itself. Make sure to include the right
 | variant | "brand", "secondary", "primary", "onBrand", "onBusiness", "staticBlack", "staticWhite" | "primary" |
 | size | "small", "large", "xsmall" | "large" |
 | forcePx | boolean | \- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Spinner

package/components/switch/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | required | boolean | \- |
 | disabled | boolean | \- |
 | validation | string | \- |
-| classNames | string | \- |
 | forcePx | boolean | \- |
-| attributes | {} | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <Switch

package/components/teaser-card/README.md

@@ -11,8 +11,8 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classes | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserCard>

package/components/teaser-counter/README.md

@@ -15,8 +15,8 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta" | \- |
 | targetLink | string | \- |
 | mediaHtml | string | \- |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserCounter

package/components/teaser-onsite/README.md

@@ -15,11 +15,11 @@ The component will not include styling by itself. Make sure to include the right
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
-| classNames | string | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | mediaHtml | string | \- |
 | title | string | \- |
 | text | string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserOnSite

package/components/text-input/README.md

@@ -25,10 +25,10 @@ import textInput from '@bonniernews/dn-design-system-web/components/text-input/t
 | disabled | Set to true if the field should be disabled<br />boolean | \- |
 | validation | To use with the sites validation, some example values for dn-web: required, password, email<br />string | \- |
 | helpText | A helptext for the field if needed<br />string | \- |
-| classNames | Ex. "my-special-class"<br />string | ", " |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
 | autofocus | Set to true if field should have focus when loaded<br />boolean | \- |
-| attributes | Ex. { data-prop: value }<br />{} | \- |
+| classNames | Ex. "my-special-class"<br />string | ", " |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TextInput

package/components/thematic-break/README.md

@@ -8,8 +8,8 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| classNames | string | \- |
-| attributes | object | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <ThematicBreak />

package/components/video-caption/README.md

@@ -10,9 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | caption | Ex: "Detta är en bildtext"<br />string | \- |
 | duration | Ex: "01:23"<br />string | \- |
-| classNames | Ex: "my-special-class another-class"<br />string | \- |
-| attributes | Ex: { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
-| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <VideoCaption

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.7",
+  "version": "32.7.9",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -17,6 +17,7 @@
   "exports": {
     "./preact/*": "./preact/*",
     "./assets/*.tsx": "./assets/*.tsx",
+    "./assets/*.ts": "./assets/*.ts",
     "./assets/*.njk": "./assets/*.njk",
     "./assets/*.scss": "./assets/*.scss",
     "./components/*": "./components/*",

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

@@ -1,12 +1,11 @@
 import { ComponentChild } from 'preact';
-export interface ArticleImageProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface ArticleImageProps extends SharedProps {
     image: ComponentChild;
     caption?: string;
     author?: string;
     imageType?: string;
     fullWidth?: boolean;
     forcePx?: boolean;
-    classNames?: string;
-    attributes?: object;
 }
 export declare const ArticleImage: ({ image, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;

package/preact/assets/types/shared-props.d.ts

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

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 { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps {\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  /** Ex. \"my-special-class another-class\" */\n  classNames?: string;\n  /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\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 { ImageCaption } from '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\n\nexport interface ArticleImageProps {\n  image: ComponentChild\n  caption?: string\n  author?: string\n  imageType?: string\n  fullWidth?: boolean\n  forcePx?: boolean\n  classNames?: string\n  attributes?: object\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;;;ACuCI,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;;;AChBI,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;;;ACfI,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\";\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 '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\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;",
   "names": ["jsx", "jsxs", "jsx"]
 }

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

@@ -1,10 +1,9 @@
-export interface BlockedContentProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface BlockedContentProps extends SharedProps {
     title: string;
     body: string;
     link: string;
     forcePx?: boolean;
-    classNames?: string;
-    attributes?: object;
     elementAttributes?: {
         [key: string]: string;
     };