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

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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/list-item-types.ts

@@ -3,7 +3,7 @@ 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 type { RadioButtonProps } from '../radio-button-group/radio-button-group'
 import { SwitchInnerProps } from '../switch/switch'
 
 export interface ListItemSharedProps {
@@ -20,7 +20,7 @@ export interface ListItemSharedProps {
 
 export interface ListItemBaseProps extends ListItemSharedProps {
   listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle'
-  radioButtons?: ButtonProps[]
+  radioButtons?: RadioButtonProps[]
   href?: string
   leadingIcon?: DsIcon
   trailingIcon?: DsIcon

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": "36.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,7 @@
 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 type { RadioButtonProps } from '../radio-button-group/radio-button-group';
 import { SwitchInnerProps } from '../switch/switch';
 export interface ListItemSharedProps {
     title?: string;
@@ -18,7 +18,7 @@ export interface ListItemSharedProps {
 }
 export interface ListItemBaseProps extends ListItemSharedProps {
     listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle';
-    radioButtons?: ButtonProps[];
+    radioButtons?: RadioButtonProps[];
     href?: string;
     leadingIcon?: DsIcon;
     trailingIcon?: DsIcon;

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

@@ -264,54 +264,8 @@ var CheckboxIcons = ({ componentClassName }) => {
 };
 var checkbox_default = Checkbox;
 
-// ../src/components/radio-button/radio-button.tsx
-import { Fragment as Fragment2 } from "preact";
-import { jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
-var RadioButton = ({
-  buttons,
-  error,
-  name,
-  errorMessage,
-  required,
-  stripLabel,
-  disabled,
-  forcePx,
-  classNames
-}) => {
-  const componentClassName = "ds-radio-btn";
-  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx8(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
-    const { id, selected, value, label, attributes } = button;
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "radio",
-          id,
-          name,
-          defaultChecked: selected,
-          disabled,
-          required,
-          value,
-          ...attributes
-        }
-      ),
-      stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs5("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
-        /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }),
-        label && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__text`, children: label })
-      ] })
-    ] }, id);
-  }) });
-};
-var RadioButtonIcons = ({ componentClassName }) => {
-  return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__icon`, children: [
-    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_unchecked" }),
-    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_checked" })
-  ] });
-};
-
 // ../src/components/switch/switch.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
 var Switch = ({
   name = "ds-switch",
   checked,
@@ -326,8 +280,8 @@ var Switch = ({
 }) => {
   const componentClassName = "ds-switch";
   const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsxs6("div", { className: classes, children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs5("div", { className: classes, children: [
+    /* @__PURE__ */ jsx8(
       "input",
       {
         type: "checkbox",
@@ -339,7 +293,7 @@ var Switch = ({
         ...attributes
       }
     ),
-    stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx9(
+    stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(
       SwitchInner,
       {
         ...{
@@ -349,7 +303,7 @@ var Switch = ({
           componentClassName
         }
       }
-    ) }) : /* @__PURE__ */ jsx9("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx9(
+    ) }) : /* @__PURE__ */ jsx8("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx8(
       SwitchInner,
       {
         ...{
@@ -363,12 +317,58 @@ var Switch = ({
   ] });
 };
 var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    showMeta && /* @__PURE__ */ jsxs6("div", { className: `${componentClassName}__meta`, children: [
-      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
-      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-off`, children: metaOff })
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    showMeta && /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__meta`, children: [
+      /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
+      /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__meta-off`, children: metaOff })
     ] }),
-    /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__knob` }) })
+    /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__knob` }) })
+  ] });
+};
+
+// ../src/components/radio-button-group/radio-button-group.tsx
+import { Fragment as Fragment3 } from "preact";
+import { jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
+var RadioButtonGroup = ({
+  buttons,
+  error,
+  name,
+  errorMessage,
+  required,
+  stripLabel,
+  disabled,
+  forcePx,
+  classNames
+}) => {
+  const radioButtonClassName = "ds-radio-btn";
+  const wrapperClasses = formatClassString(["ds-radio-btn-group", forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsx9(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
+    const { id, selected, value, label, attributes } = button;
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          type: "radio",
+          id,
+          name,
+          defaultChecked: selected,
+          disabled,
+          required,
+          value,
+          ...attributes
+        }
+      ),
+      stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${radioButtonClassName}__inner`, children: /* @__PURE__ */ jsx9(RadioButtonIcons, { radioButtonClassName }) }) : /* @__PURE__ */ jsxs6("label", { className: `${radioButtonClassName}__inner`, htmlFor: id, children: [
+        /* @__PURE__ */ jsx9(RadioButtonIcons, { radioButtonClassName }),
+        label && /* @__PURE__ */ jsx9("span", { className: `${radioButtonClassName}__text`, children: label })
+      ] })
+    ] }, id);
+  }) });
+};
+var RadioButtonIcons = ({ radioButtonClassName }) => {
+  return /* @__PURE__ */ jsxs6("span", { className: `${radioButtonClassName}__icon`, children: [
+    /* @__PURE__ */ jsx9(IconUse, { iconName: "radio_button_unchecked" }),
+    /* @__PURE__ */ jsx9(IconUse, { iconName: "radio_button_checked" })
   ] });
 };
 
@@ -473,7 +473,7 @@ var ListItemInner = ({
     case "radio":
       return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: id, ...attributes, children: [
         /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
-          RadioButton,
+          RadioButtonGroup,
           {
             ...{
               id,