@bonniernews/dn-design-system-web 32.4.8 → 32.5.0

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.9...@bonniernews/dn-design-system-web@32.5.0) (2025-06-02)
+
+
+### Features
+
+* **web:** byline list item tsx ([#1749](https://github.com/BonnierNews/dn-design-system/issues/1749)) ([93d50b8](https://github.com/BonnierNews/dn-design-system/commit/93d50b8832afba8383396a65dc60e73d536385e1))
+
+
+### Maintenance
+
+* **web:** add cloudflare to white lists ([#1761](https://github.com/BonnierNews/dn-design-system/issues/1761)) ([0046451](https://github.com/BonnierNews/dn-design-system/commit/0046451d880d3a7910fbc0e4411e5ba0fba480a1))
+
+## [32.4.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.8...@bonniernews/dn-design-system-web@32.4.9) (2025-05-30)
+
+
+### Bug Fixes
+
+* **web:** article body image as tsx ([#1755](https://github.com/BonnierNews/dn-design-system/issues/1755)) ([8db5387](https://github.com/BonnierNews/dn-design-system/commit/8db538783e39272f866ea13ba7411484ed0a25ca))
+
 ## [32.4.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.7...@bonniernews/dn-design-system-web@32.4.8) (2025-05-28)
 
 

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

@@ -0,0 +1,43 @@
+- 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)
+- Storybook (Latest): [ArticleBodyImage](https://designsystem-latest.dn.se/?path=/docs/article-articlebodyimage--docs)
+
+----
+
+# ArticleBodyImage
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | String | yes | | | Use to populate figure tag with image information |
+|fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
+
+{{ ArticleBodyImage({
+  imageHtml: exampleArticleBodyImageHtml(),
+  fullWidth: true,
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
+```

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

@@ -1,43 +1,27 @@
-- 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)
-- Storybook (Latest): [ArticleBodyImage](https://designsystem-latest.dn.se/?path=/docs/article-articlebodyimage--docs)
-
-----
-
-# ArticleBodyImage
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|imageHtml | String | yes | | | Use to populate figure tag with image information |
-|fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
-|caption | String | no | | | Ex "Detta är en bildtext" |
-|imageType | String | no | | | Type of image. Ex "Foto" |
-|author | String | no | | | Ex "Paul Hansen" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
-
-{{ ArticleBodyImage({
-  imageHtml: exampleArticleBodyImageHtml(),
-  fullWidth: true,
-  caption: "En bildtext",
-  imageType: "Foto",
-  author: "Paul Hansen"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
-```
+ArticleBodyImage
+================
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
+*   Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| imageHtml\* | string | \- |
+| caption | string | ", " |
+| author | string | ", " |
+| imageType | string | ", " |
+| fullWidth | boolean | \- |
+| forcePx | boolean | \- |
+| classNames | string | \- |
+| attributes | object | \- |
+
+```jsx
+<ArticleBodyImage
+  author="Paul Hansen"
+  caption="Detta är en bildtext"
+  imageHtml="<div class='picture picture--placeholder' style='aspect-ratio: 1920 / 1081'><img class='picture__img' src='https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=480:*&amp;output-quality=80' srcset='https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=750:*&amp;output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=960:*&amp;output-quality=60 960w' sizes='100vw' alt='Stridsvagnssoldaterna håller sitt förbandsläger prydligt. Man tar hand om sina persedlar, även i smällkalla vintern. Skräp läggs på speciella platser, röker gör man utomhus och det luktar nykokt te i skyddsvärnen.'></div>"
+  imageType="Foto"
+/>
+```

package/components/byline-list/README.md

@@ -0,0 +1,31 @@
+BylineList
+==========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/byline-list](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list)
+*   Storybook: [Byline-list](https://designsystem.dn.se/?path=/docs/article-byline-list--docs)
+
+BylineList is a component that renders a list of bylines with optional media and titles. It is used for the sheet that displays if we click a byline with more than one author.
+
+**This is only implemented in tsx. Nkj files are not implemented. They are still using the old list item component.**
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/byline-list/byline-list.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| bylines\* | { authorName?: string; bylineImage?: string; authorPageUrl?: string; role?: string; border?: boolean; followable?: boolean; followed?: boolean; listItemClassNames?: string; attributes?: { \[key: string\]: string; }; linkAttributes?: { ...; }; buttonAttributes?: { ...; }; buttonClassNames?: string; }\[\] | \- |
+| attributes | { \[key: string\]: string; } | \- |
+| forcePx | boolean | \- |
+| classNames | string | \- |
+
+```jsx
+<BylineList
+  bylines={[
+    {
+      authorName: 'Byline link',
+      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
+      bylineImage: '<div class="picture   lazy-image" style="aspect-ratio: 1 / 1"><img class="picture__img picture__img--fullheight" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80" srcset="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=88:88&amp;output-quality=60 88w" sizes="44px" alt="" aria-hidden="true"></div>',
+      role: 'Grafik'
+    }
+  ]}
+ />
+```

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

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

package/components/byline-list/byline-list.scss

@@ -0,0 +1,160 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
+@use "../button-toggle/button-toggle.scss" as *;
+
+$ds-byline-list__icon-size: 24px;
+$ds-byline-list__portrait-size: 44px;
+
+.ds-byline-list {
+  list-style: none;
+  margin: 0;
+  padding: ds-spacing(0 $ds-s-100);
+
+  .ds-byline-list__item {
+    background-color: transparent;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    list-style: none;
+    line-height: 0;
+    position: relative;
+
+    &.ds-byline-list__item--border::after {
+      content: "";
+      width: 100%;
+      height: ds-border-width(xxs);
+      background: $ds-color-border-primary;
+      position: absolute;
+      bottom: 0;
+    }
+
+    .ds-byline-list__item__content {
+      box-sizing: border-box;
+      border-radius: 0;
+      margin: 0;
+      display: flex;
+      gap: ds-spacing($ds-s-100);
+      align-items: center;
+      justify-content: space-between;
+      padding: ds-spacing($ds-s-100 0);
+      width: 100%;
+      border: none;
+      background: none;
+    }
+
+    a.ds-byline-list__item__content {
+      cursor: pointer;
+      color: $ds-color-text-primary;
+      text-decoration: none;
+      /* full-element links are covered by the opacity hover effect - adding underlines makes it too busy */
+
+      @include ds-hover(true) {
+        opacity: 0.6;
+      }
+
+      &:active {
+        opacity: 0.6;
+      }
+      &:focus-visible {
+        outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
+        outline-offset: -2px;
+      }
+    }
+
+    .ds-byline-list__item__icon-right {
+      color: $ds-color-text-primary;
+      display: inline-flex;
+
+      .ds-icon {
+        position: relative;
+        display: flex;
+        height: ds-px-to-rem($ds-byline-list__icon-size);
+        width: ds-px-to-rem($ds-byline-list__icon-size);
+        margin: 0;
+
+        @at-root .ds-force-px#{&} {
+          height: $ds-byline-list__icon-size;
+          width: $ds-byline-list__icon-size;
+        }
+
+        svg {
+          fill: currentColor;
+        }
+      }
+    }
+
+    .ds-byline-list__item__titles {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      align-items: flex-start;
+      overflow-wrap: anywhere;
+
+      .ds-byline-list__item__title {
+        text-align: left;
+
+        @include ds-typography(
+          $ds-typography-functional-body-md,
+          $lineHeight: $ds-lineheight-md,
+          $fontWeight: $ds-fontweight-semibold
+        );
+
+        @at-root .ds-force-px#{&} {
+          @include ds-typography(
+            $ds-typography-functional-body-md,
+            $lineHeight: $ds-lineheight-md,
+            $forcePx: true,
+            $fontWeight: $ds-fontweight-semibold
+          );
+        }
+      }
+
+      a.ds-byline-list__item__title {
+        @include ds-link($ds-link-list);
+
+        &:focus-visible {
+          outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
+          outline-offset: 2px;
+        }
+      }
+    }
+
+    .ds-byline-list__item__role {
+      text-align: left;
+      text-transform: capitalize;
+      @include ds-typography($ds-typography-functional-body-md) {
+        color: $ds-color-text-primary-subtle;
+      }
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body-md, true) {
+          color: $ds-color-text-primary-subtle;
+        }
+      }
+    }
+
+    .ds-byline-list__item__portrait {
+      border-radius: 50%;
+      overflow: hidden;
+      background-color: $ds-color-surface-primary-raised-soft;
+      flex-shrink: 0;
+
+      .picture,
+      img {
+        width: $ds-byline-list__portrait-size;
+      }
+    }
+
+    &:active .ds-byline-list__item::before {
+      background-color: $ds-color-surface-primary-raised-soft;
+    }
+
+    @at-root a#{&} {
+      box-sizing: border-box;
+      text-align: center;
+      text-decoration: none;
+    }
+  }
+}

package/components/list-item/README-UXD.md

@@ -2,8 +2,6 @@
 
 ## Anatomy
 
-<img src="/images/uxd/list-item.png">
-
 - **Title:** The primary content of the list item, providing a brief description or label. Titles can have various font weights including regular, semibold, or bold.
 - **Subtitle:** Additional information accompanying the title (optional).
 - **Expanded Content:** Additional content that can be toggled or expanded upon user interaction, such as text paragraphs.

package/components/list-item/list-item-types.ts

@@ -18,7 +18,7 @@ export interface ListItemSharedProps {
 }
 
 export interface ListItemBaseProps extends ListItemSharedProps {
-  listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'byline' | 'standard' | 'toggle'
+  listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle'
   radioButtons?: ButtonProps[]
   href?: string
   leadingIcon?: DsIcon
@@ -31,8 +31,6 @@ export interface ListItemBaseProps extends ListItemSharedProps {
   checked?: boolean
   selected?: boolean
   stripLabel?: boolean
-  toggleText?: string
-  toggleSelectedText?: string
   disabled?: boolean
 }
 
@@ -75,8 +73,6 @@ export interface ToggleListItemProps
   toggleSelectedText: string
 }
 
-export interface BylineListItemProps extends ToggleListItemProps, Pick<ListItemBaseProps, 'mediaHtml'> {}
-
 export type ListItemProps =
   | ({ listItemType: 'accordion' } & AccordionListItemProps)
   | ({ listItemType: 'checkbox' } & CheckboxListItemProps)
@@ -85,7 +81,6 @@ export type ListItemProps =
   | ({ listItemType: 'standard' } & StandardListItemProps)
   | ({ listItemType: 'switch' } & SwitchListItemProps)
   | ({ listItemType: 'toggle' } & ToggleListItemProps)
-  | ({ listItemType: 'byline' } & BylineListItemProps)
 
 export interface InnerListItemProps
   extends ListItemSharedProps,
@@ -100,12 +95,12 @@ export interface InnerListItemProps
       | 'selected'
       | 'value'
       | 'forcePx'
-      | 'toggleText'
-      | 'toggleSelectedText'
       | 'disabled'
     >,
     Pick<ButtonToggleStandardProps, 'variant'> {
   componentClassName: string
+  toggleText?: string
+  toggleSelectedText?: string
 }
 
 export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'attributes'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.4.8",
+  "version": "32.5.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

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

@@ -0,0 +1,11 @@
+export interface ArticleImageProps {
+    imageHtml: string;
+    caption?: string;
+    author?: string;
+    imageType?: string;
+    fullWidth?: boolean;
+    forcePx?: boolean;
+    classNames?: string;
+    attributes?: object;
+}
+export declare const ArticleImage: ({ imageHtml, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { ArticleImageProps } from '../../assets/article-image/article-image';
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
+ * - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`
+ */
+export declare const ArticleBodyImage: ({ imageHtml, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;

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

@@ -0,0 +1,78 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../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 authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;
+  const authorClasses = [
+    "ds-article-image__credits",
+    authorText && authorText.length >= 27 && authorText.length < 60 ? "ds-article-image__credits--nowrap-bigscreen" : authorText && authorText.length < 27 ? "ds-article-image__credits--nowrap" : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("figcaption", { className: classes, "aria-hidden": "true", ...attributes, children: [
+    caption && /* @__PURE__ */ jsx("span", { children: caption }),
+    " ",
+    authorText && /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText })
+  ] });
+};
+
+// ../src/assets/article-image/article-image.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var ArticleImage = ({
+  imageHtml,
+  caption = "",
+  author = "",
+  imageType = "",
+  fullWidth,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-article-image";
+  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  const showCaption = !!caption || !!author;
+  return /* @__PURE__ */ jsxs2("figure", { className: classes, ...attributes, children: [
+    fullWidth ? /* @__PURE__ */ jsx2("div", { className: "ds-full-width-element", dangerouslySetInnerHTML: { __html: imageHtml } }) : /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: imageHtml } }),
+    showCaption && /* @__PURE__ */ jsx2(ImageCaption, { caption, author, imageType, forcePx })
+  ] });
+};
+
+// ../src/components/article-body-image/article-body-image.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var ArticleBodyImage = ({
+  imageHtml,
+  caption = "",
+  author = "",
+  imageType = "",
+  fullWidth,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-article-image--body";
+  const classes = formatClassString([componentClassName, classNames]);
+  return /* @__PURE__ */ jsx3(
+    ArticleImage,
+    {
+      imageHtml,
+      caption,
+      author,
+      imageType,
+      fullWidth,
+      forcePx,
+      classNames: classes,
+      attributes
+    }
+  );
+};
+export {
+  ArticleBodyImage
+};
+//# sourceMappingURL=article-body-image.js.map

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

@@ -0,0 +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 { ImageCaption } from '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\n\nexport interface ArticleImageProps {\n  imageHtml: string\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  imageHtml,\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' dangerouslySetInnerHTML={{ __html: imageHtml }}></div>\n      ) : (\n        <span dangerouslySetInnerHTML={{ __html: imageHtml }}></span> // TODO: check this, don't want a wrapping span\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  imageHtml,\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      imageHtml={imageHtml}\n      caption={caption}\n      author={author}\n      imageType={imageType}\n      fullWidth={fullWidth}\n      forcePx={forcePx}\n      classNames={classes}\n      attributes={attributes}\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;;;ACjBI,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,yBAAwB,yBAAyB,EAAE,QAAQ,UAAU,GAAG,IAEvF,gBAAAA,KAAC,UAAK,yBAAyB,EAAE,QAAQ,UAAU,GAAG;AAAA,IAEvD,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/byline-list/byline-list.d.ts

@@ -0,0 +1,39 @@
+export interface BylineListProps {
+    bylines: Array<{
+        authorName?: string;
+        bylineImage?: string;
+        authorPageUrl?: string;
+        role?: string;
+        border?: boolean;
+        followable?: boolean;
+        followed?: boolean;
+        listItemClassNames?: string;
+        attributes?: {
+            [key: string]: string;
+        };
+        linkAttributes?: {
+            [key: string]: string;
+        };
+        buttonAttributes?: {
+            [key: string]: string;
+        };
+        buttonClassNames?: string;
+    }>;
+    attributes?: {
+        [key: string]: string;
+    };
+    forcePx?: boolean;
+    classNames?: string;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/byline-list](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list)
+ * - Storybook: [Byline-list](https://designsystem.dn.se/?path=/docs/article-byline-list--docs)
+ *
+ * BylineList is a component that renders a list of bylines with optional media and titles. It is used for the sheet that displays if we click a byline with more than one author.
+ *
+ * **This is only implemented in tsx. Nkj files are not implemented. They are still using the old list item component.**
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/byline-list/byline-list.scss'`
+ */
+export declare const BylineList: ({ bylines, attributes, forcePx, classNames, }: BylineListProps) => import("preact").JSX.Element;