@bonniernews/dn-design-system-web 32.7.20 → 32.7.22

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 (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/components/article-top-image/README.md +27 -41
  3. package/components/empty-state/README.md +2 -2
  4. package/components/pagination/README-NJK.md +55 -0
  5. package/components/pagination/README.md +35 -55
  6. package/components/pictogram/README.md +24 -0
  7. package/package.json +1 -1
  8. package/preact/components/article-top-image/article-top-image.d.ts +12 -0
  9. package/preact/components/article-top-image/article-top-image.js +66 -0
  10. package/preact/components/article-top-image/article-top-image.js.map +7 -0
  11. package/preact/components/empty-state/empty-state.d.ts +3 -6
  12. package/preact/components/empty-state/empty-state.js.map +2 -2
  13. package/preact/components/pagination/pagination.d.ts +38 -0
  14. package/preact/components/pagination/pagination.js +177 -0
  15. package/preact/components/pagination/pagination.js.map +7 -0
  16. package/components/empty-state/README-UXD.md +0 -0
  17. 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.22](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.21...@bonniernews/dn-design-system-web@32.7.22) (2025-07-09)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** article top image as tsx ([#1819](https://github.com/BonnierNews/dn-design-system/issues/1819)) ([172220a](https://github.com/BonnierNews/dn-design-system/commit/172220a250aa42e6b2f8fc016627acc21e5d380d))
13
+
14
+ ## [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)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** pagination as tsx ([#1818](https://github.com/BonnierNews/dn-design-system/issues/1818)) ([dbf2d27](https://github.com/BonnierNews/dn-design-system/commit/dbf2d27b34d65b2bef580179d51e0fb2dcc40a7a))
20
+
7
21
  ## [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)
8
22
 
9
23
 
package/components/article-top-image/README.md CHANGED
@@ -1,41 +1,27 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
2
- - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)
3
- - Storybook (Latest): [ArticleTopImage](https://designsystem-latest.dn.se/?path=/docs/article-articletopimage--docs)
4
-
5
- ----
6
-
7
- # ArticleTopImage
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |imageHtml | String | yes | | | Use to populate figure tag with image information |
14
- |caption | String | no | | | Ex "Detta är en bildtext" |
15
- |imageType | String | no | | | Type of image. Ex "Foto" |
16
- |author | String | no | | | Ex "Paul Hansen" |
17
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
18
- |classNames | String | no | | | Ex. "my-special-class" |
19
- |forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
20
-
21
- ## Minimum requirement example
22
-
23
- ### Nunjucks
24
-
25
- These are copy paste friendly examples to quickliy get started using a component.
26
-
27
- ```html
28
- {% from '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.njk' import ArticleTopImage %}
29
-
30
- {{ ArticleTopImage({
31
- imageHtml: exampleArticleTopImageHtml(),
32
- caption: "En bildtext",
33
- imageType: "Foto",
34
- author: "Beatrice Lundborg"
35
- })}}
36
- ```
37
-
38
- ### SCSS
39
- ```scss
40
- @use "@bonniernews/dn-design-system-web/components/article-top-image/article-top-image";
41
- ```
1
+ ArticleTopImage
2
+ ===============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
5
+ * Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--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/article-top-image/article-top-image.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | classNames | Ex. "my-special-class"<br />string | \- |
12
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
13
+ | image\* | ComponentChild | \- |
14
+ | caption | string | \- |
15
+ | author | string | \- |
16
+ | imageType | string | \- |
17
+ | fullWidth | boolean | \- |
18
+ | forcePx | boolean | \- |
19
+
20
+ ```jsx
21
+ <ArticleTopImage
22
+ author="Beatrice Lundborg"
23
+ caption="Detta är en bildtext"
24
+ image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C770:434&crop=770:h;center,top&output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1540:867&crop=1540:h;center,top&output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C2020:1137&crop=2020:h;center,top&output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}
25
+ imageType="Foto"
26
+ />
27
+ ```
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/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.20",
3
+ "version": "32.7.22",
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/article-top-image/article-top-image.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
2
+ import { ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx';
3
+ export interface ArticleTopImageProps extends SharedProps, ArticleImageProps {
4
+ }
5
+ /**
6
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
7
+ * - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)
8
+ *
9
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
10
+ * `@use '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.scss'`
11
+ */
12
+ export declare const ArticleTopImage: ({ caption, imageType, author, image, forcePx, classNames, attributes }: ArticleTopImageProps) => import("preact").JSX.Element;
package/preact/components/article-top-image/article-top-image.js ADDED
@@ -0,0 +1,66 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/image-caption/image-caption.tsx
7
+ import { jsx, jsxs } from "preact/jsx-runtime";
8
+ var ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }) => {
9
+ const classes = formatClassString([
10
+ "ds-image-caption",
11
+ forcePx && "ds-force-px",
12
+ classNames
13
+ ]);
14
+ const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;
15
+ const authorClasses = [
16
+ "ds-article-image__credits",
17
+ authorText && authorText.length >= 27 && authorText.length < 60 ? "ds-article-image__credits--nowrap-bigscreen" : authorText && authorText.length < 27 ? "ds-article-image__credits--nowrap" : null
18
+ ].filter(Boolean).join(" ");
19
+ return /* @__PURE__ */ jsxs("figcaption", { className: classes, "aria-hidden": "true", ...attributes, children: [
20
+ caption && /* @__PURE__ */ jsx("span", { children: caption }),
21
+ " ",
22
+ authorText && /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText })
23
+ ] });
24
+ };
25
+
26
+ // ../src/assets/article-image/article-image.tsx
27
+ import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
28
+ var ArticleImage = ({
29
+ image,
30
+ caption = "",
31
+ author = "",
32
+ imageType = "",
33
+ fullWidth,
34
+ forcePx,
35
+ classNames,
36
+ attributes
37
+ }) => {
38
+ const componentClassName = "ds-article-image";
39
+ const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
40
+ const showCaption = !!caption || !!author;
41
+ return /* @__PURE__ */ jsxs2("figure", { className: classes, ...attributes, children: [
42
+ fullWidth ? /* @__PURE__ */ jsx2("div", { className: "ds-full-width-element", children: image }) : image,
43
+ showCaption && /* @__PURE__ */ jsx2(ImageCaption, { caption, author, imageType, forcePx })
44
+ ] });
45
+ };
46
+
47
+ // ../src/components/article-top-image/article-top-image.tsx
48
+ import { jsx as jsx3 } from "preact/jsx-runtime";
49
+ var ArticleTopImage = ({ caption, imageType, author, image, forcePx, classNames, attributes }) => {
50
+ const classes = formatClassString(["ds-article-image--top", classNames]);
51
+ const imageParams = {
52
+ fullWidth: true,
53
+ caption,
54
+ imageType,
55
+ author,
56
+ image,
57
+ forcePx,
58
+ classNames: classes,
59
+ attributes
60
+ };
61
+ return /* @__PURE__ */ jsx3(ArticleImage, { ...imageParams });
62
+ };
63
+ export {
64
+ ArticleTopImage
65
+ };
66
+ //# sourceMappingURL=article-top-image.js.map
package/preact/components/article-top-image/article-top-image.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.tsx", "../../../assets/article-image/article-image.tsx", "../../../components/article-top-image/article-top-image.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps extends SharedProps {\n /** Ex \"Detta \u00E4r en bildtext\" */\n caption?: string;\n /** Ex \"Paul Hansen\" */\n author?: string;\n /** Type of image. Ex \"Foto\" or \"Illustration\" */\n imageType?: string;\n /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)\n * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/image-caption/image-caption.scss'`\n */\nexport const ImageCaption = ({caption, author, imageType, classNames, attributes, forcePx}: ImageCaptionProps) => {\n const classes = formatClassString([\n 'ds-image-caption',\n forcePx && 'ds-force-px',\n classNames,\n ]);\n\n const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;\n\n const authorClasses = [\n 'ds-article-image__credits',\n authorText && authorText.length >= 27 && authorText.length < 60 // Low estimate of how much will fit on tablet/desktop\n ? 'ds-article-image__credits--nowrap-bigscreen' : authorText && authorText.length < 27 // Low estimate of how much will fit on 320px mobile\n ? 'ds-article-image__credits--nowrap' : null,\n ].filter(Boolean).join(' ');\n\n return (\n <figcaption className={classes} aria-hidden='true' {...attributes} >\n {/* This needs to be on the same line to maintain a space between the caption-span and author-span */}\n {caption && <span>{caption}</span>} {authorText && <span className={authorClasses}>{authorText}</span>}\n </figcaption>\n );\n};\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { ImageCaption } from '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\n\nexport interface ArticleImageProps extends SharedProps {\n image: ComponentChild\n caption?: string\n author?: string\n imageType?: string\n fullWidth?: boolean\n forcePx?: boolean\n}\n\nexport const ArticleImage = ({\n image,\n caption = '',\n author = '',\n imageType = '',\n fullWidth,\n forcePx,\n classNames,\n attributes,\n}: ArticleImageProps) => {\n const componentClassName = 'ds-article-image'\n const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n const showCaption = !!caption || !!author\n\n return (\n <figure className={classes} {...attributes}>\n {fullWidth ? (\n <div className='ds-full-width-element'>{image}</div>\n ) : (\n image\n )}\n {showCaption && <ImageCaption caption={caption} author={author} imageType={imageType} forcePx={forcePx} />}\n </figure>\n )\n}\n", "import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { ArticleImage, ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx'\n\nexport interface ArticleTopImageProps extends SharedProps, ArticleImageProps { }\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)\n * - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.scss'`\n */\nexport const ArticleTopImage = ({ caption, imageType, author, image, forcePx, classNames, attributes }: ArticleTopImageProps) => {\n const classes = formatClassString(['ds-article-image--top', classNames])\n\n const imageParams = {\n fullWidth: true,\n caption,\n imageType,\n author,\n image,\n forcePx,\n classNames: classes,\n attributes,\n }\n\n return (\n <ArticleImage {...imageParams} />\n )\n}\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACoCI,SAEc,KAFd;AAjBG,IAAM,eAAe,CAAC,EAAC,SAAS,QAAQ,WAAW,YAAY,YAAY,QAAO,MAAyB;AAChH,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,aAAa,aAAa,SAAS,GAAG,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK;AAElH,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc,WAAW,UAAU,MAAM,WAAW,SAAS,KACzD,gDAAgD,cAAc,WAAW,SAAS,KAClF,sCAAsC;AAAA,EAC5C,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,qBAAC,gBAAW,WAAW,SAAS,eAAY,QAAQ,GAAG,YAEpD;AAAA,eAAW,oBAAC,UAAM,mBAAQ;AAAA,IAAQ;AAAA,IAAE,cAAc,oBAAC,UAAK,WAAW,eAAgB,sBAAW;AAAA,KACjG;AAEJ;;;ACdI,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAfG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAC5F,QAAM,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;AAEnC,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC7B;AAAA,gBACC,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,iBAAM,IAE9C;AAAA,IAED,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACVI,gBAAAE,YAAA;AAfG,IAAM,kBAAkB,CAAC,EAAE,SAAS,WAAW,QAAQ,OAAO,SAAS,YAAY,WAAW,MAA4B;AAC/H,QAAM,UAAU,kBAAkB,CAAC,yBAAyB,UAAU,CAAC;AAEvE,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF;AAEA,SACE,gBAAAA,KAAC,gBAAc,GAAG,aAAa;AAEnC;",
6
+ "names": ["jsx", "jsxs", "jsx"]
7
+ }
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
  }