@bonniernews/dn-design-system-web 32.7.19 → 32.7.21

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 (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/components/empty-state/README.md +2 -2
  3. package/components/link-box/README-njk.md +41 -0
  4. package/components/link-box/README.md +58 -41
  5. package/components/pagination/README-NJK.md +55 -0
  6. package/components/pagination/README.md +35 -55
  7. package/components/pictogram/README.md +24 -0
  8. package/package.json +1 -1
  9. package/preact/components/empty-state/empty-state.d.ts +3 -6
  10. package/preact/components/empty-state/empty-state.js.map +2 -2
  11. package/preact/components/link-box/link-box-item.d.ts +10 -0
  12. package/preact/components/link-box/link-box-item.js +26 -0
  13. package/preact/components/link-box/link-box-item.js.map +7 -0
  14. package/preact/components/link-box/link-box.d.ts +19 -0
  15. package/preact/components/link-box/link-box.js +352 -0
  16. package/preact/components/link-box/link-box.js.map +7 -0
  17. package/preact/components/pagination/pagination.d.ts +38 -0
  18. package/preact/components/pagination/pagination.js +177 -0
  19. package/preact/components/pagination/pagination.js.map +7 -0
  20. package/components/empty-state/README-UXD.md +0 -0
  21. package/components/link-box/README-UXD.md +0 -0
  22. package/components/pagination/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.20...@bonniernews/dn-design-system-web@32.7.21) (2025-07-08)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** pagination as tsx ([#1818](https://github.com/BonnierNews/dn-design-system/issues/1818)) ([dbf2d27](https://github.com/BonnierNews/dn-design-system/commit/dbf2d27b34d65b2bef580179d51e0fb2dcc40a7a))
13
+
14
+ ## [32.7.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.19...@bonniernews/dn-design-system-web@32.7.20) (2025-07-08)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** link box tsx ([#1824](https://github.com/BonnierNews/dn-design-system/issues/1824)) ([4d57c54](https://github.com/BonnierNews/dn-design-system/commit/4d57c54b14f09306bb121f92aaafbb034395241d))
20
+
7
21
  ## [32.7.19](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.18...@bonniernews/dn-design-system-web@32.7.19) (2025-07-08)
8
22
 
9
23
 
package/components/empty-state/README.md CHANGED
@@ -13,9 +13,9 @@ The component will not include styling by itself. Make sure to include the right
13
13
  | body | Body text<br />string | \- |
14
14
  | brandButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
15
15
  | primaryButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
16
- | classNames | Ex. "my-special-class"<br />string | \- |
17
- | attributes | Ex. { data-prop: value }<br />object | \- |
18
16
  | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
17
+ | classNames | Ex. "my-special-class"<br />string | \- |
18
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
19
19
 
20
20
  ```jsx
21
21
  <EmptyState
package/components/link-box/README-njk.md ADDED
@@ -0,0 +1,41 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
2
+ - Storybook: [LinkBox](https://designsystem.dn.se/?path=/docs/section-linkbox--docs)
3
+ - Storybook (Latest): [LinkBox](https://designsystem-latest.dn.se/?path=/docs/section-linkbox--docs)
4
+
5
+ ----
6
+
7
+ # link-box
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
14
+ |vignetteText | String | no | | | Heading of the link box |
15
+ |vignetteTargetUrl | String | no | | | Target URL for the header |
16
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
+ |classNames | String | no | | | Ex. "my-special-class" |
18
+ |~forcePx~ | | | | | Not supported |
19
+
20
+ ## Minimum requirement example
21
+
22
+ ### Nunjucks
23
+
24
+ These are copy paste friendly examples to quickliy get started using a component.
25
+
26
+ ```html
27
+ {% from '@bonniernews/dn-design-system-web/components/link-box/link-box.njk' import LinkBox %}
28
+
29
+ {{ LinkBox({
30
+ vignetteText: "Välj kategori – massor av quiz väntar",
31
+ linkBoxItems: [
32
+ { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } },
33
+ { label: 'Film & TV', link: '#', mediaHtml: "", layout: 'quiz' }
34
+ ],
35
+ })}}
36
+ ```
37
+
38
+ ### SCSS
39
+ ```scss
40
+ @use "@bonniernews/dn-design-system-web/components/link-box/link-box" as *;
41
+ ```
package/components/link-box/README.md CHANGED
@@ -1,41 +1,58 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
2
- - Storybook: [LinkBox](https://designsystem.dn.se/?path=/docs/section-linkbox--docs)
3
- - Storybook (Latest): [LinkBox](https://designsystem-latest.dn.se/?path=/docs/section-linkbox--docs)
4
-
5
- ----
6
-
7
- # link-box
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
14
- |vignetteText | String | no | | | Heading of the link box |
15
- |vignetteTargetUrl | String | no | | | Target URL for the header |
16
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
- |classNames | String | no | | | Ex. "my-special-class" |
18
- |~forcePx~ | | | | | Not supported |
19
-
20
- ## Minimum requirement example
21
-
22
- ### Nunjucks
23
-
24
- These are copy paste friendly examples to quickliy get started using a component.
25
-
26
- ```html
27
- {% from '@bonniernews/dn-design-system-web/components/link-box/link-box.njk' import LinkBox %}
28
-
29
- {{ LinkBox({
30
- vignetteText: "Välj kategori – massor av quiz väntar",
31
- linkBoxItems: [
32
- { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } },
33
- { label: 'Film & TV', link: '#', mediaHtml: "", layout: 'quiz' }
34
- ],
35
- })}}
36
- ```
37
-
38
- ### SCSS
39
- ```scss
40
- @use "@bonniernews/dn-design-system-web/components/link-box/link-box" as *;
41
- ```
1
+ LinkBox
2
+ =======
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/link-box](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/link-box)
5
+ * Storybook: [LinkBox](https://designsystem.dn.se/?path=/docs/section-linkbox--docs)
6
+
7
+ 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/link-box/link-box.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | linkBoxItems\* | Array with link objects. Ex. \[ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: ", ", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } \]<br />LinkBoxItemProps\[\] | \- |
12
+ | vignetteText | Heading of the link box<br />string | \- |
13
+ | vignetteTargetUrl | Target URL for the header<br />string | \- |
14
+ | classNames | Ex. "my-special-class"<br />string | \- |
15
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
16
+
17
+ ```jsx
18
+ <LinkBox
19
+ linkBoxItems={[
20
+ {
21
+ label: 'Sverige runt',
22
+ layout: 'quiz',
23
+ link: '#',
24
+ media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
25
+ text: '23 quiz'
26
+ },
27
+ {
28
+ label: 'Film & TV',
29
+ layout: 'quiz',
30
+ link: '#',
31
+ media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
32
+ text: '190 quiz'
33
+ },
34
+ {
35
+ label: 'Jorden runt',
36
+ layout: 'quiz',
37
+ link: '#',
38
+ media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
39
+ text: '8 quiz'
40
+ },
41
+ {
42
+ label: 'Djur & Natur',
43
+ layout: 'quiz',
44
+ link: '#',
45
+ media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
46
+ text: '65 quiz'
47
+ },
48
+ {
49
+ label: 'Kultur & Böcker & Scenkonst & Museum',
50
+ layout: 'quiz',
51
+ link: '#',
52
+ media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
53
+ text: '3 quiz'
54
+ }
55
+ ]}
56
+ vignetteText="Välj kategori – massor av quiz väntar"
57
+ />
58
+ ```
package/components/pagination/README-NJK.md ADDED
@@ -0,0 +1,55 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
2
+ - Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--docs)
3
+ - Storybook (Latest): [Pagination](https://designsystem-latest.dn.se/?path=/docs/basic-pagination--docs)
4
+
5
+ ----
6
+
7
+ # Pagination
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |pages | Array | no | | | Array with link objects. Ex. [ { label: '8' , url: 'https://www.dn.se/om/danmark/?page=8', current: true, attributes: {} } ] |
14
+ |previousLabel | String | no | 'Föregående' | | Previous button/link label |
15
+ |previousUrl | String | no | | | |
16
+ |previousAttributes | Object | no | | | |
17
+ |previousClassNames | String | no | | | |
18
+ |nextLabel | String | no | 'Nästa' | | Next button/link label |
19
+ |nextUrl | String | no | | | |
20
+ |nextAttributes | Object | no | | | |
21
+ |nextClassNames | String | no | | | |
22
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
23
+ |classNames | String | no | | | Ex. "my-special-class" |
24
+ |~forcePx~ | | | | | Not supported |
25
+
26
+ ## Minimum requirement example
27
+
28
+ ### Nunjucks
29
+
30
+ These are copy paste friendly examples to quickliy get started using a component.
31
+
32
+ ```html
33
+ {% from '@bonniernews/dn-design-system-web/components/pagination/pagination.njk' import Pagination %}
34
+
35
+ {{ Pagination({
36
+ nextUrl: 'https://www.dn.se/om/danmark/?page=8',
37
+ nextLabel: undefined,
38
+ previousUrl: 'https://www.dn.se/om/danmark/?page=7',
39
+ previousLabel: undefined,
40
+ pages: [
41
+ { label: '6', url: 'https://www.dn.se/om/danmark/?page=6', attributes: {} },
42
+ { label: '7', url: 'https://www.dn.se/om/danmark/?page=7' },
43
+ { label: '8', url: 'https://www.dn.se/om/danmark/?page=8', current: true },
44
+ { label: '9', url: 'https://www.dn.se/om/danmark/?page=9' },
45
+ { label: '10', url: 'https://www.dn.se/om/danmark/?page=10' },
46
+ ],
47
+ attributes: {},
48
+ classNames: undefined,
49
+ })}}
50
+ ```
51
+
52
+ ### SCSS
53
+ ```scss
54
+ @use "@bonniernews/dn-design-system-web/components/pagination/pagination" as *;
55
+ ```
package/components/pagination/README.md CHANGED
@@ -1,55 +1,35 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
2
- - Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--docs)
3
- - Storybook (Latest): [Pagination](https://designsystem-latest.dn.se/?path=/docs/basic-pagination--docs)
4
-
5
- ----
6
-
7
- # Pagination
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |pages | Array | no | | | Array with link objects. Ex. [ { label: '8' , url: 'https://www.dn.se/om/danmark/?page=8', current: true, attributes: {} } ] |
14
- |previousLabel | String | no | 'Föregående' | | Previous button/link label |
15
- |previousUrl | String | no | | | |
16
- |previousAttributes | Object | no | | | |
17
- |previousClassNames | String | no | | | |
18
- |nextLabel | String | no | 'Nästa' | | Next button/link label |
19
- |nextUrl | String | no | | | |
20
- |nextAttributes | Object | no | | | |
21
- |nextClassNames | String | no | | | |
22
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
23
- |classNames | String | no | | | Ex. "my-special-class" |
24
- |~forcePx~ | | | | | Not supported |
25
-
26
- ## Minimum requirement example
27
-
28
- ### Nunjucks
29
-
30
- These are copy paste friendly examples to quickliy get started using a component.
31
-
32
- ```html
33
- {% from '@bonniernews/dn-design-system-web/components/pagination/pagination.njk' import Pagination %}
34
-
35
- {{ Pagination({
36
- nextUrl: 'https://www.dn.se/om/danmark/?page=8',
37
- nextLabel: undefined,
38
- previousUrl: 'https://www.dn.se/om/danmark/?page=7',
39
- previousLabel: undefined,
40
- pages: [
41
- { label: '6', url: 'https://www.dn.se/om/danmark/?page=6', attributes: {} },
42
- { label: '7', url: 'https://www.dn.se/om/danmark/?page=7' },
43
- { label: '8', url: 'https://www.dn.se/om/danmark/?page=8', current: true },
44
- { label: '9', url: 'https://www.dn.se/om/danmark/?page=9' },
45
- { label: '10', url: 'https://www.dn.se/om/danmark/?page=10' },
46
- ],
47
- attributes: {},
48
- classNames: undefined,
49
- })}}
50
- ```
51
-
52
- ### SCSS
53
- ```scss
54
- @use "@bonniernews/dn-design-system-web/components/pagination/pagination" as *;
55
- ```
1
+ Pagination
2
+ ==========
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/commponents/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
5
+ * Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--docs)
6
+
7
+ 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/pagination/pagination.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | pages | Array with page objects<br />PageData\[\] | \- |
12
+ | previousLabel | Previous button/link label<br />string | \- |
13
+ | previousUrl | Previous link<br />string | \- |
14
+ | previousClassNames | string | \- |
15
+ | previousAttributes | { \[key: string\]: string; } | \- |
16
+ | nextLabel | Previous button/link label<br />string | \- |
17
+ | nextUrl | Previous link<br />string | \- |
18
+ | nextClassNames | string | \- |
19
+ | nextAttributes | { \[key: string\]: string; } | \- |
20
+ | classNames | Ex. "my-special-class"<br />string | \- |
21
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
22
+
23
+ ```jsx
24
+ <Pagination
25
+ attributes={{
26
+ 'aria-label': 'Paginering'
27
+ }}
28
+ nextAttributes={{}}
29
+ nextLabel="Fredag 18 Maj"
30
+ nextUrl="https://www.dn.se/om/danmark/?page=2"
31
+ previousAttributes={{}}
32
+ previousLabel="Söndag 20 Maj"
33
+ previousUrl="https://www.dn.se/om/danmark/?page=1"
34
+ />
35
+ ```
package/components/pictogram/README.md ADDED
@@ -0,0 +1,24 @@
1
+ Pictogram
2
+ =========
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
5
+ * Storybook: [Pictogram](https://designsystem.dn.se/?path=/docs/article-Pictogram--docs)
6
+
7
+ 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/pictogram/pictogram.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | variant | "brand", "business" | "brand" |
12
+ | iconName\* | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
13
+ | size | "small", "large" | "small" |
14
+ | classNames | string | \- |
15
+ | attributes | object | \- |
16
+ | forcePx | boolean | \- |
17
+
18
+ ```jsx
19
+ <Pictogram
20
+ iconName="celebration"
21
+ size="large"
22
+ variant="brand"
23
+ />
24
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.19",
3
+ "version": "32.7.21",
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/empty-state/empty-state.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { ButtonStandardProps } from '../button/button-types';
1
+ import { ButtonStandardProps } from '@bonniernews/dn-design-system-web/components/button/button-types.ts';
2
+ import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
2
3
  import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts';
3
- export interface EmptyStateProps {
4
+ export interface EmptyStateProps extends SharedProps {
4
5
  /** Icon name to use in the pictogram */
5
6
  iconName?: DsIcon;
6
7
  /** Title */
@@ -11,10 +12,6 @@ export interface EmptyStateProps {
11
12
  brandButton?: ButtonStandardProps;
12
13
  /** Object with text, href (optional), classNames (optional) and attributes (optional) */
13
14
  primaryButton?: ButtonStandardProps;
14
- /** Ex. "my-special-class" */
15
- classNames?: string;
16
- /** Ex. { data-prop: value } */
17
- attributes?: object;
18
15
  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
19
16
  forcePx?: boolean;
20
17
  }