@bonniernews/dn-design-system-web 35.0.0 → 37.0.0

package/CHANGELOG.md

@@ -4,6 +4,42 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [37.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@36.0.0...@bonniernews/dn-design-system-web@37.0.0) (2026-01-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** list-item attribute fixes, delete radiobuttonlistitem  (#1979)
+
+### Features
+
+* **web:** list-item attribute fixes, delete radiobuttonlistitem  ([#1979](https://github.com/BonnierNews/dn-design-system/issues/1979)) ([fb000aa](https://github.com/BonnierNews/dn-design-system/commit/fb000aac84482931403515fb8166d3c77a982a4f))
+
+
+### Maintenance
+
+* **web:** update playwright version to 1.55.1 ([#1980](https://github.com/BonnierNews/dn-design-system/issues/1980)) ([37fe4bb](https://github.com/BonnierNews/dn-design-system/commit/37fe4bb5f96e0d302982d2c0d0409b9c7f7b833b))
+* **web:** upgrade storybook to 8.6.15 ([#1981](https://github.com/BonnierNews/dn-design-system/issues/1981)) ([8a90524](https://github.com/BonnierNews/dn-design-system/commit/8a9052448e9927bfea338428b6186380060e825e))
+
+## [36.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@35.0.0...@bonniernews/dn-design-system-web@36.0.0) (2026-01-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** We renamed the radio button component to make it clear that it takes a list of radio buttons. It is now Radio Button Group
+
+### Bug Fixes
+
+* **web:** radio button renamed to radio button group ([#1977](https://github.com/BonnierNews/dn-design-system/issues/1977)) ([89e83c6](https://github.com/BonnierNews/dn-design-system/commit/89e83c636225652660c486045015c216b203deac))
+
+
+### Maintenance
+
+* **app:** script for dynamicColorsIOS ([#1969](https://github.com/BonnierNews/dn-design-system/issues/1969)) ([78b4ab7](https://github.com/BonnierNews/dn-design-system/commit/78b4ab740578ce030e87adc2e43bfdb1d6c2ea22))
+* **foundations:** fix token check security ([#1976](https://github.com/BonnierNews/dn-design-system/issues/1976)) ([600dc63](https://github.com/BonnierNews/dn-design-system/commit/600dc63f0bb818628a160f5b9ee9036d080e4a76))
+* prerelease packages ([ada232c](https://github.com/BonnierNews/dn-design-system/commit/ada232cbd6791991d499944d21ec5a5e3c15c66e))
+* **web:** fix build script security ([#1975](https://github.com/BonnierNews/dn-design-system/issues/1975)) ([9a3bf7d](https://github.com/BonnierNews/dn-design-system/commit/9a3bf7d2735ebfb73e39efc614327f50a6163ded))
+
 ## [35.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.2...@bonniernews/dn-design-system-web@35.0.0) (2025-12-10)
 
 

package/components/list-item/README.md

@@ -21,32 +21,32 @@ dsListItem(listElements);
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "radio", "switch" | \- |
+| listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "switch" | \- |
 | title | string | \- |
 | subtitle | string | \- |
 | meta | string | \- |
 | border | boolean | \- |
 | fontWeight | "bold", "regular", "semibold" | \- |
 | attributes | { \[key: string\]: string; } | \- |
+| linkAttributes | Applies to the left element: anchor<br />{ \[key: string\]: string; } | \- |
+| disabled | boolean | \- |
 | forcePx | boolean | \- |
 | classNames | string | \- |
 | leadingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | accordionContent | any | \- |
 | name | string | "ds-list-item" |
-| href | string | \- |
-| disabled | boolean | \- |
+| href | Links entire list item<br />string | \- |
 | checked | boolean | \- |
 | stripLabel | boolean | \- |
+| interactiveElementAttributes | Applied to the right element: checkbox or button ('toggle')<br />{ \[key: string\]: string; } | \- |
+| interactiveElementClassNames | string | \- |
 | mediaHtml\* | string | \- |
 | trailingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
-| selected | boolean | \- |
-| id | string | "ds-list-item" |
-| value | string | \- |
 | showMeta | boolean | \- |
 | metaOn | string | \- |
 | metaOff | string | \- |
 | componentClassName | string | \- |
-| titleHref | string | \- |
+| titleHref | Only links title<br />string | \- |
 | toggleText\* | string | \- |
 | toggleSelectedText\* | string | \- |
 | selectedText\* | string | \- |
@@ -57,6 +57,7 @@ dsListItem(listElements);
 | size | "sm", "lg", "md", "xl" | \- |
 | loading | boolean | \- |
 | isIconButton | boolean | \- |
+| selected | boolean | \- |
 | selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | \- |
 

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

@@ -3,7 +3,6 @@ import { ComponentChildren } from 'preact'
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 
 import { ButtonToggleStandardProps } from '../button/button-types'
-import { ButtonProps } from '../radio-button/radio-button'
 import { SwitchInnerProps } from '../switch/switch'
 
 export interface ListItemSharedProps {
@@ -14,25 +13,28 @@ export interface ListItemSharedProps {
   fontWeight?: 'regular' | 'semibold' | 'bold'
   attributes?: { [key: string]: string }
   children?: ComponentChildren
+  /** Applies to the left element: anchor */
+  linkAttributes?: { [key: string]: string }
+  disabled?: boolean
   forcePx?: boolean
   classNames?: string
 }
 
 export interface ListItemBaseProps extends ListItemSharedProps {
-  listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle'
-  radioButtons?: ButtonProps[]
+  listItemType: 'accordion' | 'checkbox' | 'switch' | 'image' | 'standard' | 'toggle'
+  /** Links entire list item */
   href?: string
   leadingIcon?: DsIcon
   trailingIcon?: DsIcon
   mediaHtml?: string
   name?: string
-  id?: string
-  value?: string
   accordionContent?: any
   checked?: boolean
   selected?: boolean
   stripLabel?: boolean
-  disabled?: boolean
+  /** Applied to the right element: checkbox or button ('toggle') */
+  interactiveElementAttributes?: { [key: string]: string }
+  interactiveElementClassNames?: string
 }
 
 export interface AccordionListItemProps
@@ -41,18 +43,21 @@ export interface AccordionListItemProps
 
 export interface CheckboxListItemProps
   extends ListItemSharedProps,
-    Pick<ListItemBaseProps, 'href' | 'name' | 'checked' | 'stripLabel' | 'disabled'> {}
+    Pick<
+      ListItemBaseProps,
+      | 'href'
+      | 'name'
+      | 'checked'
+      | 'stripLabel'
+      | 'disabled'
+      | 'interactiveElementAttributes'
+      | 'interactiveElementClassNames'
+    > {}
 
 export interface ImageListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'trailingIcon'> {
   mediaHtml: string
 }
 
-export interface RadioListItemProps
-  extends ListItemSharedProps,
-    Pick<ListItemBaseProps, 'href' | 'name' | 'id' | 'selected' | 'stripLabel' | 'value' | 'disabled'> {
-  selected: boolean
-}
-
 export interface StandardListItemProps
   extends ListItemSharedProps,
     Pick<ListItemBaseProps, 'href' | 'leadingIcon' | 'trailingIcon'> {}
@@ -60,7 +65,15 @@ export interface StandardListItemProps
 export interface SwitchListItemProps
   extends ListItemSharedProps,
     SwitchInnerProps,
-    Pick<ListItemBaseProps, 'leadingIcon' | 'disabled' | 'checked' | 'stripLabel' | 'value'> {
+    Pick<
+      ListItemBaseProps,
+      | 'leadingIcon'
+      | 'disabled'
+      | 'checked'
+      | 'stripLabel'
+      | 'interactiveElementAttributes'
+      | 'interactiveElementClassNames'
+    > {
   name: string
 }
 
@@ -69,6 +82,7 @@ export interface ToggleListItemProps
     ButtonToggleStandardProps,
     Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
   name: string
+  /** Only links title */
   titleHref?: string
   toggleText: string
   toggleSelectedText: string
@@ -78,7 +92,6 @@ export type ListItemProps =
   | ({ listItemType: 'accordion' } & AccordionListItemProps)
   | ({ listItemType: 'checkbox' } & CheckboxListItemProps)
   | ({ listItemType: 'image' } & ImageListItemProps)
-  | ({ listItemType: 'radio' } & RadioListItemProps)
   | ({ listItemType: 'standard' } & StandardListItemProps)
   | ({ listItemType: 'switch' } & SwitchListItemProps)
   | ({ listItemType: 'toggle' } & ToggleListItemProps)
@@ -91,12 +104,12 @@ export interface InnerListItemProps
       | 'href'
       | 'accordionContent'
       | 'name'
-      | 'id'
       | 'checked'
       | 'selected'
-      | 'value'
       | 'forcePx'
       | 'disabled'
+      | 'interactiveElementAttributes'
+      | 'interactiveElementClassNames'
     >,
     Pick<ButtonToggleStandardProps, 'variant'> {
   componentClassName: string
@@ -104,6 +117,10 @@ export interface InnerListItemProps
   toggleSelectedText?: string
 }
 
-export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'attributes'> & {
+export type TitleProps = Pick<
+  ListItemBaseProps,
+  'title' | 'subtitle' | 'fontWeight' | 'disabled' | 'attributes' | 'linkAttributes'
+> & {
   componentClassName: string
+  titleHref?: string
 }

package/components/list-item/list-item.njk

@@ -1,7 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/switch/switch.njk' import Switch %}
 {% from '@bonniernews/dn-design-system-web/components/checkbox/checkbox.njk' import Checkbox %}
-{% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
@@ -99,19 +98,6 @@
       {% endset %}
       {{ caller() if caller }}
     </label>
-  {% elif element == 'radio' %}
-    <label class="{{ classes }}" for="{{ params.id }}" {{- attributes | safe }}>
-      {% set iconLeftSvg %}
-        {{ RadioButton({
-          name: params.name,
-          condensed: true,
-          disabled: params.disabled,
-          forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes, classNames: params.elementClassNames }]
-        })}}
-      {% endset %}
-      {{ caller() if caller }}
-    </label>
   {% elif element == 'switch' %}
     <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }} >
       {% set iconRightSvg %}

package/components/list-item/list-item.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../checkbox/checkbox.scss" as *;
 @use "../switch/switch.scss" as *;
-@use "../radio-button/radio-button.scss" as *;
+@use "../radio-button-group/radio-button-group.scss" as *;
 @use "../button-toggle/button-toggle.scss" as *;
 
 $ds-list-item__icon-size: 24px;

package/components/{radio-button → radio-button-group}/README.md

@@ -1,15 +1,16 @@
-RadioButton
-===========
+RadioButtonGroup
+================
 
-*   GitHub: [BonnierNews/dn-design-system/web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
-*   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--docs)
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/radio-button-group](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button-group)
+*   Storybook: [RadioButtonGroup](https://designsystem.dn.se/?path=/docs/basic-form-radiobuttongroup--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/radio-button/radio-button.scss`
+This component is used to render a group of radio buttons.
+
+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/radio-button-group/radio-button-group.scss`
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| buttons\* | ButtonProps\[\] | \- |
-| id\* | string | \- |
+| buttons\* | RadioButtonProps\[\] | \- |
 | name | string | \- |
 | error | boolean | \- |
 | errorMessage | string | \- |
@@ -22,12 +23,18 @@ The component will not include styling by itself. Make sure to include the right
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
-<RadioButton
+<RadioButtonGroup
   buttons={[
     {
-      id: 'my_radio_name',
-      selected: false,
-      value: 'my_radio_value'
+      id: 'my_radio_name1',
+      label: 'My radio 1',
+      selected: true,
+      value: 'my_radio_value1'
+    },
+    {
+      id: 'my_radio_name2',
+      label: 'My radio 2',
+      value: 'my_radio_value2'
     }
   ]}
   name="my_radio_name"

package/components/{radio-button/radio-button.scss → radio-button-group/radio-button-group.scss}

@@ -4,7 +4,7 @@
 
 $ds-radio-btn__icon-size: 24px;
 
-.ds-radio-btn {
+.ds-radio-btn-group {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
@@ -112,7 +112,7 @@ $ds-radio-btn__icon-size: 24px;
   }
 }
 
-.ds-radio-btn input:disabled + .ds-radio-btn__inner {
+.ds-radio-btn-group input:disabled + .ds-radio-btn__inner {
   cursor: not-allowed;
   .ds-radio-btn__icon {
     color: $ds-color-text-primary-disabled;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "35.0.0",
+  "version": "37.0.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/list-item/list-item-types.d.ts

@@ -1,7 +1,6 @@
 import { ComponentChildren } from 'preact';
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts';
 import { ButtonToggleStandardProps } from '../button/button-types';
-import { ButtonProps } from '../radio-button/radio-button';
 import { SwitchInnerProps } from '../switch/switch';
 export interface ListItemSharedProps {
     title?: string;
@@ -13,42 +12,47 @@ export interface ListItemSharedProps {
         [key: string]: string;
     };
     children?: ComponentChildren;
+    /** Applies to the left element: anchor */
+    linkAttributes?: {
+        [key: string]: string;
+    };
+    disabled?: boolean;
     forcePx?: boolean;
     classNames?: string;
 }
 export interface ListItemBaseProps extends ListItemSharedProps {
-    listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle';
-    radioButtons?: ButtonProps[];
+    listItemType: 'accordion' | 'checkbox' | 'switch' | 'image' | 'standard' | 'toggle';
+    /** Links entire list item */
     href?: string;
     leadingIcon?: DsIcon;
     trailingIcon?: DsIcon;
     mediaHtml?: string;
     name?: string;
-    id?: string;
-    value?: string;
     accordionContent?: any;
     checked?: boolean;
     selected?: boolean;
     stripLabel?: boolean;
-    disabled?: boolean;
+    /** Applied to the right element: checkbox or button ('toggle') */
+    interactiveElementAttributes?: {
+        [key: string]: string;
+    };
+    interactiveElementClassNames?: string;
 }
 export interface AccordionListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'accordionContent' | 'leadingIcon'> {
 }
-export interface CheckboxListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'name' | 'checked' | 'stripLabel' | 'disabled'> {
+export interface CheckboxListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'name' | 'checked' | 'stripLabel' | 'disabled' | 'interactiveElementAttributes' | 'interactiveElementClassNames'> {
 }
 export interface ImageListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'trailingIcon'> {
     mediaHtml: string;
 }
-export interface RadioListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'name' | 'id' | 'selected' | 'stripLabel' | 'value' | 'disabled'> {
-    selected: boolean;
-}
 export interface StandardListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'leadingIcon' | 'trailingIcon'> {
 }
-export interface SwitchListItemProps extends ListItemSharedProps, SwitchInnerProps, Pick<ListItemBaseProps, 'leadingIcon' | 'disabled' | 'checked' | 'stripLabel' | 'value'> {
+export interface SwitchListItemProps extends ListItemSharedProps, SwitchInnerProps, Pick<ListItemBaseProps, 'leadingIcon' | 'disabled' | 'checked' | 'stripLabel' | 'interactiveElementAttributes' | 'interactiveElementClassNames'> {
     name: string;
 }
 export interface ToggleListItemProps extends ListItemSharedProps, ButtonToggleStandardProps, Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
     name: string;
+    /** Only links title */
     titleHref?: string;
     toggleText: string;
     toggleSelectedText: string;
@@ -60,19 +64,18 @@ export type ListItemProps = ({
 } & CheckboxListItemProps) | ({
     listItemType: 'image';
 } & ImageListItemProps) | ({
-    listItemType: 'radio';
-} & RadioListItemProps) | ({
     listItemType: 'standard';
 } & StandardListItemProps) | ({
     listItemType: 'switch';
 } & SwitchListItemProps) | ({
     listItemType: 'toggle';
 } & ToggleListItemProps);
-export interface InnerListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'listItemType' | 'href' | 'accordionContent' | 'name' | 'id' | 'checked' | 'selected' | 'value' | 'forcePx' | 'disabled'>, Pick<ButtonToggleStandardProps, 'variant'> {
+export interface InnerListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'listItemType' | 'href' | 'accordionContent' | 'name' | 'checked' | 'selected' | 'forcePx' | 'disabled' | 'interactiveElementAttributes' | 'interactiveElementClassNames'>, Pick<ButtonToggleStandardProps, 'variant'> {
     componentClassName: string;
     toggleText?: string;
     toggleSelectedText?: string;
 }
-export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'attributes'> & {
+export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'disabled' | 'attributes' | 'linkAttributes'> & {
     componentClassName: string;
+    titleHref?: string;
 };