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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/components/list-item/README.md +8 -7
  3. package/components/list-item/list-item-types.ts +35 -18
  4. package/foundations/variables/colorsCssVariables.scss +1 -0
  5. package/foundations/variables/colorsDnDark.scss +2 -1
  6. package/foundations/variables/colorsDnLight.scss +2 -1
  7. package/package.json +1 -1
  8. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +1 -0
  9. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +2 -2
  10. package/preact/components/list-item/list-item-types.d.ts +18 -15
  11. package/preact/components/list-item/list-item.js +68 -121
  12. package/preact/components/list-item/list-item.js.map +4 -4
  13. package/types-lib/ds-color.d.ts +1 -0
  14. package/variables/colors-css-variables.json +1 -0
  15. package/variables/colors-dark-mode.json +2 -1
  16. package/variables/colors-light-mode.json +2 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,31 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [37.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.0.0...@bonniernews/dn-design-system-web@37.0.1) (2026-01-12)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **foundations:** update variables from Figma ([#1978](https://github.com/BonnierNews/dn-design-system/issues/1978)) ([b3b984f](https://github.com/BonnierNews/dn-design-system/commit/b3b984f4284dda125cdeac014a28f537969ceb5e))
13
+ * prerelease packages ([b6ab359](https://github.com/BonnierNews/dn-design-system/commit/b6ab3599ceca90e3e01a91d4fe24ff276e855b14))
14
+
15
+ ## [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)
16
+
17
+
18
+ ### ⚠ BREAKING CHANGES
19
+
20
+ * **web:** list-item attribute fixes, delete radiobuttonlistitem (#1979)
21
+
22
+ ### Features
23
+
24
+ * **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))
25
+
26
+
27
+ ### Maintenance
28
+
29
+ * **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))
30
+ * **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))
31
+
7
32
  ## [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)
8
33
 
9
34
 
package/components/list-item/README.md CHANGED
@@ -21,32 +21,32 @@ dsListItem(listElements);
21
21
 
22
22
  | Name | Description | Default |
23
23
  |:--- | :--- | :--- |
24
- | listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "radio", "switch" | \- |
24
+ | listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "switch" | \- |
25
25
  | title | string | \- |
26
26
  | subtitle | string | \- |
27
27
  | meta | string | \- |
28
28
  | border | boolean | \- |
29
29
  | fontWeight | "bold", "regular", "semibold" | \- |
30
30
  | attributes | { \[key: string\]: string; } | \- |
31
+ | linkAttributes | Applies to the left element: anchor<br />{ \[key: string\]: string; } | \- |
32
+ | disabled | boolean | \- |
31
33
  | forcePx | boolean | \- |
32
34
  | classNames | string | \- |
33
35
  | leadingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
34
36
  | accordionContent | any | \- |
35
37
  | name | string | "ds-list-item" |
36
- | href | string | \- |
37
- | disabled | boolean | \- |
38
+ | href | Links entire list item<br />string | \- |
38
39
  | checked | boolean | \- |
39
40
  | stripLabel | boolean | \- |
41
+ | interactiveElementAttributes | Applied to the right element: checkbox or button ('toggle')<br />{ \[key: string\]: string; } | \- |
42
+ | interactiveElementClassNames | string | \- |
40
43
  | mediaHtml\* | string | \- |
41
44
  | trailingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
42
- | selected | boolean | \- |
43
- | id | string | "ds-list-item" |
44
- | value | string | \- |
45
45
  | showMeta | boolean | \- |
46
46
  | metaOn | string | \- |
47
47
  | metaOff | string | \- |
48
48
  | componentClassName | string | \- |
49
- | titleHref | string | \- |
49
+ | titleHref | Only links title<br />string | \- |
50
50
  | toggleText\* | string | \- |
51
51
  | toggleSelectedText\* | string | \- |
52
52
  | selectedText\* | string | \- |
@@ -57,6 +57,7 @@ dsListItem(listElements);
57
57
  | size | "sm", "lg", "md", "xl" | \- |
58
58
  | loading | boolean | \- |
59
59
  | isIconButton | boolean | \- |
60
+ | selected | boolean | \- |
60
61
  | selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
61
62
  | mobileFullWidth | Button will only full width on mobile<br />boolean | \- |
62
63
 
package/components/list-item/list-item-types.ts CHANGED
@@ -3,7 +3,6 @@ import { ComponentChildren } from 'preact'
3
3
  import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
4
4
 
5
5
  import { ButtonToggleStandardProps } from '../button/button-types'
6
- import type { RadioButtonProps } from '../radio-button-group/radio-button-group'
7
6
  import { SwitchInnerProps } from '../switch/switch'
8
7
 
9
8
  export interface ListItemSharedProps {
@@ -14,25 +13,28 @@ export interface ListItemSharedProps {
14
13
  fontWeight?: 'regular' | 'semibold' | 'bold'
15
14
  attributes?: { [key: string]: string }
16
15
  children?: ComponentChildren
16
+ /** Applies to the left element: anchor */
17
+ linkAttributes?: { [key: string]: string }
18
+ disabled?: boolean
17
19
  forcePx?: boolean
18
20
  classNames?: string
19
21
  }
20
22
 
21
23
  export interface ListItemBaseProps extends ListItemSharedProps {
22
- listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'standard' | 'toggle'
23
- radioButtons?: RadioButtonProps[]
24
+ listItemType: 'accordion' | 'checkbox' | 'switch' | 'image' | 'standard' | 'toggle'
25
+ /** Links entire list item */
24
26
  href?: string
25
27
  leadingIcon?: DsIcon
26
28
  trailingIcon?: DsIcon
27
29
  mediaHtml?: string
28
30
  name?: string
29
- id?: string
30
- value?: string
31
31
  accordionContent?: any
32
32
  checked?: boolean
33
33
  selected?: boolean
34
34
  stripLabel?: boolean
35
- disabled?: boolean
35
+ /** Applied to the right element: checkbox or button ('toggle') */
36
+ interactiveElementAttributes?: { [key: string]: string }
37
+ interactiveElementClassNames?: string
36
38
  }
37
39
 
38
40
  export interface AccordionListItemProps
@@ -41,18 +43,21 @@ export interface AccordionListItemProps
41
43
 
42
44
  export interface CheckboxListItemProps
43
45
  extends ListItemSharedProps,
44
- Pick<ListItemBaseProps, 'href' | 'name' | 'checked' | 'stripLabel' | 'disabled'> {}
46
+ Pick<
47
+ ListItemBaseProps,
48
+ | 'href'
49
+ | 'name'
50
+ | 'checked'
51
+ | 'stripLabel'
52
+ | 'disabled'
53
+ | 'interactiveElementAttributes'
54
+ | 'interactiveElementClassNames'
55
+ > {}
45
56
 
46
57
  export interface ImageListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'trailingIcon'> {
47
58
  mediaHtml: string
48
59
  }
49
60
 
50
- export interface RadioListItemProps
51
- extends ListItemSharedProps,
52
- Pick<ListItemBaseProps, 'href' | 'name' | 'id' | 'selected' | 'stripLabel' | 'value' | 'disabled'> {
53
- selected: boolean
54
- }
55
-
56
61
  export interface StandardListItemProps
57
62
  extends ListItemSharedProps,
58
63
  Pick<ListItemBaseProps, 'href' | 'leadingIcon' | 'trailingIcon'> {}
@@ -60,7 +65,15 @@ export interface StandardListItemProps
60
65
  export interface SwitchListItemProps
61
66
  extends ListItemSharedProps,
62
67
  SwitchInnerProps,
63
- Pick<ListItemBaseProps, 'leadingIcon' | 'disabled' | 'checked' | 'stripLabel' | 'value'> {
68
+ Pick<
69
+ ListItemBaseProps,
70
+ | 'leadingIcon'
71
+ | 'disabled'
72
+ | 'checked'
73
+ | 'stripLabel'
74
+ | 'interactiveElementAttributes'
75
+ | 'interactiveElementClassNames'
76
+ > {
64
77
  name: string
65
78
  }
66
79
 
@@ -69,6 +82,7 @@ export interface ToggleListItemProps
69
82
  ButtonToggleStandardProps,
70
83
  Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
71
84
  name: string
85
+ /** Only links title */
72
86
  titleHref?: string
73
87
  toggleText: string
74
88
  toggleSelectedText: string
@@ -78,7 +92,6 @@ export type ListItemProps =
78
92
  | ({ listItemType: 'accordion' } & AccordionListItemProps)
79
93
  | ({ listItemType: 'checkbox' } & CheckboxListItemProps)
80
94
  | ({ listItemType: 'image' } & ImageListItemProps)
81
- | ({ listItemType: 'radio' } & RadioListItemProps)
82
95
  | ({ listItemType: 'standard' } & StandardListItemProps)
83
96
  | ({ listItemType: 'switch' } & SwitchListItemProps)
84
97
  | ({ listItemType: 'toggle' } & ToggleListItemProps)
@@ -91,12 +104,12 @@ export interface InnerListItemProps
91
104
  | 'href'
92
105
  | 'accordionContent'
93
106
  | 'name'
94
- | 'id'
95
107
  | 'checked'
96
108
  | 'selected'
97
- | 'value'
98
109
  | 'forcePx'
99
110
  | 'disabled'
111
+ | 'interactiveElementAttributes'
112
+ | 'interactiveElementClassNames'
100
113
  >,
101
114
  Pick<ButtonToggleStandardProps, 'variant'> {
102
115
  componentClassName: string
@@ -104,6 +117,10 @@ export interface InnerListItemProps
104
117
  toggleSelectedText?: string
105
118
  }
106
119
 
107
- export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'attributes'> & {
120
+ export type TitleProps = Pick<
121
+ ListItemBaseProps,
122
+ 'title' | 'subtitle' | 'fontWeight' | 'disabled' | 'attributes' | 'linkAttributes'
123
+ > & {
108
124
  componentClassName: string
125
+ titleHref?: string
109
126
  }
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $ds-color-surface-primary: var(--ds-color-surface-primary);
2
+ $ds-color-surface-highlight: var(--ds-color-surface-highlight);
2
3
  $ds-color-surface-primary-raised-soft: var(--ds-color-surface-primary-raised-soft);
3
4
  $ds-color-surface-primary-raised-strong: var(--ds-color-surface-primary-raised-strong);
4
5
  $ds-color-surface-primary-elevated: var(--ds-color-surface-primary-elevated);
package/foundations/variables/colorsDnDark.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $ds-hex-dark-surface-primary: #171717;
2
+ $ds-hex-dark-surface-highlight: #24221e;
2
3
  $ds-hex-dark-surface-primary-raised-soft: #242424;
3
4
  $ds-hex-dark-surface-primary-raised-strong: #333333;
4
5
  $ds-hex-dark-surface-primary-elevated: #333333;
@@ -61,7 +62,7 @@ $ds-hex-dark-button-game-on-bg-hover: #227ac3;
61
62
  $ds-hex-dark-button-game-on-bg-pressed: #227ac3;
62
63
  $ds-hex-dark-button-game-on-text-default: #ffffff;
63
64
  $ds-hex-dark-button-game-on-outline-default: #227ac3;
64
- $ds-hex-dark-button-game-off-bg-default: #372c25;
65
+ $ds-hex-dark-button-game-off-bg-default: #29221f;
65
66
  $ds-hex-dark-button-game-off-bg-hover: #372c25;
66
67
  $ds-hex-dark-button-game-off-bg-pressed: #372c25;
67
68
  $ds-hex-dark-button-game-off-text-default: #ffffff;
package/foundations/variables/colorsDnLight.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $ds-hex-surface-primary: #ffffff;
2
+ $ds-hex-surface-highlight: #f8f5ef;
2
3
  $ds-hex-surface-primary-raised-soft: #f2f2f2;
3
4
  $ds-hex-surface-primary-raised-strong: #e5e5e5;
4
5
  $ds-hex-surface-primary-elevated: #ffffff;
@@ -61,7 +62,7 @@ $ds-hex-button-game-on-bg-hover: #227ac3;
61
62
  $ds-hex-button-game-on-bg-pressed: #227ac3;
62
63
  $ds-hex-button-game-on-text-default: #ffffff;
63
64
  $ds-hex-button-game-on-outline-default: #227ac3;
64
- $ds-hex-button-game-off-bg-default: #f9f1eb;
65
+ $ds-hex-button-game-off-bg-default: #f7f5ed;
65
66
  $ds-hex-button-game-off-bg-hover: #f9f1eb;
66
67
  $ds-hex-button-game-off-bg-pressed: #f9f1eb;
67
68
  $ds-hex-button-game-off-text-default: #0d0d0d;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "36.0.0",
3
+ "version": "37.0.1",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/preact/components/icon-with-wrapper/icon-with-wrapper.js CHANGED
@@ -6,6 +6,7 @@ var formatClassString = (classesArray) => {
6
6
  // ../src/variables/colors-css-variables.json
7
7
  var colors_css_variables_default = {
8
8
  "surface-primary": "var(--ds-color-surface-primary)",
9
+ "surface-highlight": "var(--ds-color-surface-highlight)",
9
10
  "surface-primary-raised-soft": "var(--ds-color-surface-primary-raised-soft)",
10
11
  "surface-primary-raised-strong": "var(--ds-color-surface-primary-raised-strong)",
11
12
  "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",