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

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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)
 
 

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.9",
+  "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/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;

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

@@ -0,0 +1,281 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/foundations/icons/sprite.svg
+import { h } from "preact";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+// ../src/components/icon-sprite/icon-sprite.tsx
+import { jsx as jsx2 } from "preact/jsx-runtime";
+var IconUse = ({ iconName, classNames, attributes }) => {
+  const componentClassName = "ds-icon";
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--sprite`,
+    `${componentClassName}--${iconName}`,
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
+};
+
+// ../src/components/spinner/spinner.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
+  const componentClassName = "ds-spinner";
+  const classes = formatClassString([
+    `${componentClassName}`,
+    `${componentClassName}--${variant}`,
+    `${componentClassName}--${size}`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
+};
+
+// ../src/components/button/button-base.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
+  let optionalHtml;
+  if (!isIconButton && attributes["aria-label"]) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    optionalHtml,
+    icon,
+    loadingHtml
+  ] });
+};
+var ToggleWrapper = ({
+  selected = false,
+  disabled = false,
+  attributes,
+  classes,
+  onChild,
+  offChild,
+  loadingHtml
+}) => {
+  return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    loadingHtml
+  ] });
+};
+var ButtonBase = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  classNames,
+  attributes = {},
+  forcePx = false,
+  isIconButton = false,
+  selected = false,
+  isToggle = false,
+  selectedIconName,
+  selectedText
+}) => {
+  if (isIconButton && text && !attributes["aria-label"]) {
+    attributes["aria-label"] = text;
+  } else if (isToggle && text && selectedText && !attributes["aria-label"]) {
+    attributes["aria-label"] = selected ? selectedText : text;
+  }
+  let spinnerVariant = "secondary";
+  if (variant === "staticWhite" || variant === "transparent") {
+    spinnerVariant = "staticBlack";
+  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+    spinnerVariant = "primary";
+  }
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  let icon;
+  if (iconName && (iconPosition != "none" || isIconButton == true)) {
+    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+  }
+  const classNamePrefix = "ds-btn--";
+  const classes = formatClassString([
+    "ds-btn",
+    `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${size}`,
+    isToggle && selected && `${classNamePrefix}selected`,
+    fullWidth && `${classNamePrefix}full-width`,
+    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
+    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
+    isIconButton && `${classNamePrefix}icon-only`,
+    isToggle && `${classNamePrefix}toggle`,
+    loading && "ds-loading",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  let buttonToRender;
+  if (isToggle) {
+    let onChild, offChild;
+    if (isIconButton && iconName && selectedIconName) {
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
+    } else {
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
+      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
+      ] });
+    }
+    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+  } else {
+    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
+    if (href) {
+      const params = { ...buttonParams, loadingHtml: null };
+      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
+    } else {
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
+    }
+  }
+  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
+};
+
+// ../src/components/button-toggle/button-toggle.tsx
+import { jsx as jsx5 } from "preact/jsx-runtime";
+var ButtonToggle = ({
+  selected = false,
+  text,
+  selectedText,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  isIconButton = false,
+  iconName,
+  selectedIconName,
+  loading = false,
+  attributes = {},
+  classNames,
+  forcePx = false
+}) => {
+  return /* @__PURE__ */ jsx5(
+    ButtonBase,
+    {
+      ...{
+        selected,
+        text,
+        disabled,
+        variant,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        isIconButton,
+        iconName,
+        selectedIconName,
+        loading,
+        classNames,
+        attributes,
+        forcePx,
+        isToggle: true,
+        selectedText,
+        type: "button"
+      }
+    }
+  );
+};
+var button_toggle_default = ButtonToggle;
+
+// ../src/components/byline-list/byline-list.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
+var BylineList = ({
+  bylines,
+  attributes,
+  forcePx,
+  classNames
+}) => {
+  const componentClassName = "ds-byline-list__item";
+  const classes = formatClassString([
+    "ds-byline-list",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx6("ul", { className: classes, ...attributes, children: bylines && bylines.map((byline) => /* @__PURE__ */ jsxs3(BylineListInner, { ...{ ...byline, forcePx }, children: [
+    byline.bylineImage && /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: `${componentClassName}__portrait`,
+        dangerouslySetInnerHTML: { __html: byline.bylineImage }
+      }
+    ),
+    byline.authorName && /* @__PURE__ */ jsx6(
+      Title,
+      {
+        title: byline.authorName,
+        role: byline.role,
+        authorPageUrl: byline.followable ? byline.authorPageUrl : "",
+        attributes: byline.linkAttributes
+      }
+    )
+  ] })) });
+};
+var BylineListInner = ({
+  disabled,
+  attributes,
+  linkAttributes,
+  authorPageUrl,
+  listItemClassNames,
+  buttonAttributes,
+  buttonClassNames,
+  followable,
+  followed,
+  border = true,
+  forcePx,
+  children
+}) => {
+  const componentClassName = "ds-byline-list__item";
+  const classes = formatClassString([
+    componentClassName,
+    listItemClassNames,
+    border && `${componentClassName}--border`
+  ]);
+  const isLink = authorPageUrl && !followable;
+  return /* @__PURE__ */ jsx6("li", { className: classes, ...attributes, children: isLink ? /* @__PURE__ */ jsxs3("a", { href: authorPageUrl, className: `${componentClassName}__content`, ...linkAttributes, children: [
+    children,
+    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__icon-right`, children: IconUse({ iconName: "arrow_forward" }) })
+  ] }) : /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__content`, children: [
+    children,
+    followable && /* @__PURE__ */ jsx6(
+      button_toggle_default,
+      {
+        ...{
+          text: "F\xF6lj",
+          selectedText: "F\xF6ljer",
+          variant: "secondaryFilled",
+          size: "sm",
+          selected: followed,
+          disabled,
+          forcePx,
+          attributes: buttonAttributes,
+          classNames: buttonClassNames
+        }
+      }
+    )
+  ] }) });
+};
+var Title = ({ title, role, authorPageUrl, attributes }) => {
+  const componentClassName = "ds-byline-list__item";
+  const titleClasses = formatClassString([
+    `${componentClassName}__title`
+  ]);
+  return /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__titles`, children: [
+    authorPageUrl ? /* @__PURE__ */ jsx6("a", { href: authorPageUrl, className: titleClasses, ...attributes, children: title }) : /* @__PURE__ */ jsx6("span", { className: titleClasses, ...attributes, children: title }),
+    role && /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__role`, children: role })
+  ] });
+};
+export {
+  BylineList
+};
+//# sourceMappingURL=byline-list.js.map