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

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.5.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.5.0...@bonniernews/dn-design-system-web@32.5.1) (2025-06-02)
+
+
+### Maintenance
+
+* **foundations:** sort typography variables ([#1762](https://github.com/BonnierNews/dn-design-system/issues/1762)) ([36caa8b](https://github.com/BonnierNews/dn-design-system/commit/36caa8b83ac73bd9f148b2fe62b9f70cbaa98ea7))
+* prerelease packages ([f9cfd76](https://github.com/BonnierNews/dn-design-system/commit/f9cfd764d36094c7001c029ee1b8563442dab866))
+
+## [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/foundations/variables/typographyList.scss

@@ -1,56 +1,56 @@
-$ds-typography-expressive-ingress-md: 'expressive-ingress-md';
-$ds-typography-expressive-body-sm: 'expressive-body-sm';
-$ds-typography-expressive-body-lg: 'expressive-body-lg';
-$ds-typography-expressive-heading-xl: 'expressive-heading-xl';
-$ds-typography-expressive-heading-xs: 'expressive-heading-xs';
-$ds-typography-expressive-heading-lg: 'expressive-heading-lg';
-$ds-typography-expressive-heading-md: 'expressive-heading-md';
-$ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
-$ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
-$ds-typography-expressive-heading-sm: 'expressive-heading-sm';
-$ds-typography-expressive-body-md: 'expressive-body-md';
-$ds-typography-functional-heading-xxs: 'functional-heading-xxs';
-$ds-typography-functional-heading-lg: 'functional-heading-lg';
-$ds-typography-functional-heading-xs: 'functional-heading-xs';
-$ds-typography-functional-meta-sm: 'functional-meta-sm';
-$ds-typography-functional-label-sm: 'functional-label-sm';
-$ds-typography-functional-meta-md: 'functional-meta-md';
-$ds-typography-functional-heading-sm: 'functional-heading-sm';
-$ds-typography-functional-body-sm: 'functional-body-sm';
-$ds-typography-functional-ingress-md: 'functional-ingress-md';
-$ds-typography-functional-body-md: 'functional-body-md';
-$ds-typography-functional-heading-md: 'functional-heading-md';
-$ds-typography-functional-label-md: 'functional-label-md';
-$ds-typography-functional-heading-xl: 'functional-heading-xl';
-$ds-typography-functional-body-lg: 'functional-body-lg';
-$ds-typography-functional-ingress-sm: 'functional-ingress-sm';
-$ds-typography-detail-teaser-large: 'detail-teaser-large';
-$ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
+$ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
+$ds-typography-detail-article-direkt: 'detail-article-direkt';
+$ds-typography-detail-article-longread: 'detail-article-longread';
+$ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
+$ds-typography-detail-article-opinion: 'detail-article-opinion';
+$ds-typography-detail-article-quote: 'detail-article-quote';
+$ds-typography-detail-article-standard: 'detail-article-standard';
+$ds-typography-detail-direkt-body: 'detail-direkt-body';
+$ds-typography-detail-direkt-header: 'detail-direkt-header';
+$ds-typography-detail-direkt-header-v2: 'detail-direkt-header-v2';
+$ds-typography-detail-dropcap: 'detail-dropcap';
+$ds-typography-detail-gameheader: 'detail-gameheader';
+$ds-typography-detail-medryckare: 'detail-medryckare';
+$ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
+$ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
 $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
-$ds-typography-detail-teaser-standard: 'detail-teaser-standard';
+$ds-typography-detail-teaser-large: 'detail-teaser-large';
 $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
-$ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
+$ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
 $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
+$ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
+$ds-typography-detail-teaser-standard: 'detail-teaser-standard';
+$ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
 $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
-$ds-typography-detail-teaser-twin: 'detail-teaser-twin';
 $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
-$ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
 $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
-$ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
 $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
-$ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
 $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
-$ds-typography-detail-article-quote: 'detail-article-quote';
-$ds-typography-detail-article-standard: 'detail-article-standard';
-$ds-typography-detail-article-direkt: 'detail-article-direkt';
-$ds-typography-detail-article-longread: 'detail-article-longread';
-$ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
-$ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
-$ds-typography-detail-article-opinion: 'detail-article-opinion';
-$ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
-$ds-typography-detail-gameheader: 'detail-gameheader';
-$ds-typography-detail-dropcap: 'detail-dropcap';
-$ds-typography-detail-direkt-header: 'detail-direkt-header';
-$ds-typography-detail-medryckare: 'detail-medryckare';
-$ds-typography-detail-direkt-body: 'detail-direkt-body';
-$ds-typography-detail-direkt-header-v2: 'detail-direkt-header-v2';
+$ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
+$ds-typography-detail-teaser-twin: 'detail-teaser-twin';
+$ds-typography-expressive-body-lg: 'expressive-body-lg';
+$ds-typography-expressive-body-md: 'expressive-body-md';
+$ds-typography-expressive-body-sm: 'expressive-body-sm';
+$ds-typography-expressive-heading-lg: 'expressive-heading-lg';
+$ds-typography-expressive-heading-md: 'expressive-heading-md';
+$ds-typography-expressive-heading-sm: 'expressive-heading-sm';
+$ds-typography-expressive-heading-xl: 'expressive-heading-xl';
+$ds-typography-expressive-heading-xs: 'expressive-heading-xs';
+$ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
+$ds-typography-expressive-ingress-md: 'expressive-ingress-md';
+$ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
+$ds-typography-functional-body-lg: 'functional-body-lg';
+$ds-typography-functional-body-md: 'functional-body-md';
+$ds-typography-functional-body-sm: 'functional-body-sm';
+$ds-typography-functional-heading-lg: 'functional-heading-lg';
+$ds-typography-functional-heading-md: 'functional-heading-md';
+$ds-typography-functional-heading-sm: 'functional-heading-sm';
+$ds-typography-functional-heading-xl: 'functional-heading-xl';
+$ds-typography-functional-heading-xs: 'functional-heading-xs';
+$ds-typography-functional-heading-xxs: 'functional-heading-xxs';
+$ds-typography-functional-ingress-md: 'functional-ingress-md';
+$ds-typography-functional-ingress-sm: 'functional-ingress-sm';
+$ds-typography-functional-label-md: 'functional-label-md';
+$ds-typography-functional-label-sm: 'functional-label-sm';
+$ds-typography-functional-meta-md: 'functional-meta-md';
+$ds-typography-functional-meta-sm: 'functional-meta-sm';