@bonniernews/dn-design-system-web 32.7.4 → 32.7.6
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.
- package/CHANGELOG.md +31 -0
- package/components/article-body-image/README.md +2 -2
- package/components/byline/README.md +1 -1
- package/components/byline-list/README.md +2 -2
- package/components/disclaimer/README-njk.md +37 -0
- package/components/disclaimer/README.md +15 -33
- package/package.json +2 -1
- package/preact/assets/article-image/article-image.d.ts +3 -2
- package/preact/components/article-body-image/article-body-image.d.ts +1 -1
- package/preact/components/article-body-image/article-body-image.js +4 -4
- package/preact/components/article-body-image/article-body-image.js.map +2 -2
- package/preact/components/byline/byline.d.ts +2 -1
- package/preact/components/byline/byline.js +3 -9
- package/preact/components/byline/byline.js.map +2 -2
- package/preact/components/byline-list/byline-list.js +1 -7
- package/preact/components/byline-list/byline-list.js.map +2 -2
- package/preact/components/disclaimer/disclaimer.d.ts +17 -0
- package/preact/components/disclaimer/disclaimer.js +44 -0
- package/preact/components/disclaimer/disclaimer.js.map +7 -0
- package/preact/components/footer/footer.js +31 -11
- package/preact/components/footer/footer.js.map +4 -4
- package/preact/helpers/stringToHtml.d.ts +6 -0
- package/components/disclaimer/README-UXD.md +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,37 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [32.7.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.5...@bonniernews/dn-design-system-web@32.7.6) (2025-07-02)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **web:** stringtohtml to avoid double p tags in footer ([#1793](https://github.com/BonnierNews/dn-design-system/issues/1793)) ([0a1d8e3](https://github.com/BonnierNews/dn-design-system/commit/0a1d8e379f396ef21a94f9739caf7db72acefed3))
|
|
13
|
+
* **web:** tsx disclaimer component ([#1800](https://github.com/BonnierNews/dn-design-system/issues/1800)) ([b0cca23](https://github.com/BonnierNews/dn-design-system/commit/b0cca2380c98fb2a1fad6244c137bd4228f3caf9))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Maintenance
|
|
17
|
+
|
|
18
|
+
* **deps:** bump dotenv from 16.4.7 to 16.6.1 ([#1795](https://github.com/BonnierNews/dn-design-system/issues/1795)) ([41e3e2b](https://github.com/BonnierNews/dn-design-system/commit/41e3e2bd7f270ad430f024ee957d70f0546865e5))
|
|
19
|
+
* **deps:** bump pbkdf2 from 3.1.2 to 3.1.3 ([#1792](https://github.com/BonnierNews/dn-design-system/issues/1792)) ([1da4771](https://github.com/BonnierNews/dn-design-system/commit/1da4771ffafd5fe0bb7f672f4fad7377932a8bd0))
|
|
20
|
+
|
|
21
|
+
## [32.7.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.4...@bonniernews/dn-design-system-web@32.7.5) (2025-06-30)
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
* **web:** pass image as component instead of string ([#1796](https://github.com/BonnierNews/dn-design-system/issues/1796)) ([840790f](https://github.com/BonnierNews/dn-design-system/commit/840790f9b72db4939c7a39fb85cff0c5c08be2ad))
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Maintenance
|
|
30
|
+
|
|
31
|
+
* **deps-dev:** bump @react-native/metro-config from 0.79.1 to 0.80.0 ([#1781](https://github.com/BonnierNews/dn-design-system/issues/1781)) ([5327f4a](https://github.com/BonnierNews/dn-design-system/commit/5327f4a2678696924ba3c6814747c483a6d3190e))
|
|
32
|
+
* **deps-dev:** rever bump @react-native/metro-config from 0.79.1 to 0.80.0 ([#1787](https://github.com/BonnierNews/dn-design-system/issues/1787)) ([1a7c38d](https://github.com/BonnierNews/dn-design-system/commit/1a7c38db152535cd7bde4335b44f82c77426f4bf))
|
|
33
|
+
* **deps:** bump brace-expansion from 1.1.11 to 1.1.12 in /web ([#1775](https://github.com/BonnierNews/dn-design-system/issues/1775)) ([24c44bc](https://github.com/BonnierNews/dn-design-system/commit/24c44bc4f9c9770e085efdbb43a87caaa7143939))
|
|
34
|
+
* **deps:** bump sass from 1.89.1 to 1.89.2 ([#1774](https://github.com/BonnierNews/dn-design-system/issues/1774)) ([b33d1f4](https://github.com/BonnierNews/dn-design-system/commit/b33d1f440b60174a1c873eb51d9173d9925a1e69))
|
|
35
|
+
* prerelease packages ([5355c1a](https://github.com/BonnierNews/dn-design-system/commit/5355c1a330f54db1f0b0ed482edbea1908f3c2d1))
|
|
36
|
+
* prerelease packages ([0e9033d](https://github.com/BonnierNews/dn-design-system/commit/0e9033dbf785b209599bad47db21f168e812d86a))
|
|
37
|
+
|
|
7
38
|
## [32.7.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.3...@bonniernews/dn-design-system-web@32.7.4) (2025-06-19)
|
|
8
39
|
|
|
9
40
|
|
|
@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
|
|
|
8
8
|
|
|
9
9
|
| Name | Description | Default |
|
|
10
10
|
|:--- | :--- | :--- |
|
|
11
|
-
|
|
|
11
|
+
| image\* | ComponentChild | \- |
|
|
12
12
|
| caption | string | ", " |
|
|
13
13
|
| author | string | ", " |
|
|
14
14
|
| imageType | string | ", " |
|
|
@@ -21,7 +21,7 @@ The component will not include styling by itself. Make sure to include the right
|
|
|
21
21
|
<ArticleBodyImage
|
|
22
22
|
author="Paul Hansen"
|
|
23
23
|
caption="Detta är en bildtext"
|
|
24
|
-
|
|
24
|
+
image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
|
|
25
25
|
imageType="Foto"
|
|
26
26
|
/>
|
|
27
27
|
```
|
|
@@ -28,7 +28,7 @@ initModalByline(articleElement);
|
|
|
28
28
|
|
|
29
29
|
```jsx
|
|
30
30
|
<RunComponentJs
|
|
31
|
-
component={<><div className="ds-byline ds-byline--show-images"><div className="ds-byline__inner"><div className="ds-byline__portrait"
|
|
31
|
+
component={<><div className="ds-byline ds-byline--show-images"><div className="ds-byline__inner"><div className="ds-byline__portrait"><ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/></div><div className="ds-byline__info "><span className="ds-byline__role">Text</span><a className="ds-byline__name" data-id="https://www.dn.se/av/peter-wolodarski" data-index="1" data-label="Peter Wolodarski" data-link-category="article author" href="https://www.dn.se/av/peter-wolodarski">Peter Wolodarski</a></div></div></div></>}
|
|
32
32
|
jsFunction={() => {}}
|
|
33
33
|
/>
|
|
34
34
|
```
|
|
@@ -24,7 +24,7 @@ The component will not include styling by itself. Make sure to include the right
|
|
|
24
24
|
{
|
|
25
25
|
authorId: '1',
|
|
26
26
|
authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
|
|
27
|
-
bylineImage:
|
|
27
|
+
bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
|
|
28
28
|
followable: false,
|
|
29
29
|
name: 'Byline link',
|
|
30
30
|
role: 'Grafik'
|
|
@@ -32,7 +32,7 @@ The component will not include styling by itself. Make sure to include the right
|
|
|
32
32
|
{
|
|
33
33
|
authorId: '123',
|
|
34
34
|
authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
|
|
35
|
-
bylineImage:
|
|
35
|
+
bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
|
|
36
36
|
followable: true,
|
|
37
37
|
name: 'Test Testsson',
|
|
38
38
|
role: 'Text'
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/disclaimer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/disclaimer)
|
|
2
|
+
- Storybook: [Disclaimer](https://designsystem.dn.se/?path=/docs/article-disclaimer--docs)
|
|
3
|
+
- Storybook (Latest): [Disclaimer](https://designsystem-latest.dn.se/?path=/docs/article-disclaimer--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# Disclaimer
|
|
8
|
+
|
|
9
|
+
## Parameters
|
|
10
|
+
|
|
11
|
+
|parameter | type | required | options | default | description |
|
|
12
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
+
|bodyHtml | String | yes | | | Intended use is text, links and inlined icons |
|
|
14
|
+
|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|
|
15
|
+
|variant | String | no | default, native | default | |
|
|
16
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
17
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
18
|
+
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
|
|
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/disclaimer/disclaimer.njk' import Disclaimer %}
|
|
28
|
+
|
|
29
|
+
{{ Disclaimer({
|
|
30
|
+
bodyHtml: "<strong>Detta är</strong> en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal."
|
|
31
|
+
})}}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### SCSS
|
|
35
|
+
```scss
|
|
36
|
+
@use "@bonniernews/dn-design-system-web/components/disclaimer/disclaimer";
|
|
37
|
+
```
|
|
@@ -1,37 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [Disclaimer](https://designsystem-latest.dn.se/?path=/docs/article-disclaimer--docs)
|
|
1
|
+
Disclaimer
|
|
2
|
+
==========
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/disclaimer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/disclaimer)
|
|
5
|
+
* Storybook: [Disclaimer](https://designsystem.dn.se/?path=/docs/basic-disclaimer--docs)
|
|
6
6
|
|
|
7
|
-
|
|
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/disclaimer/disclaimer.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
| Name | Description | Default |
|
|
10
|
+
|:--- | :--- | :--- |
|
|
11
|
+
| bodyHtml\* | string | \- |
|
|
12
|
+
| iconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |
|
|
13
|
+
| variant | "default", "native" | "default" |
|
|
14
|
+
| classNames | string | \- |
|
|
15
|
+
| attributes | object | \- |
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|
|
15
|
-
|variant | String | no | default, native | default | |
|
|
16
|
-
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
17
|
-
|classNames | String | no | | | Ex. "my-special-class" |
|
|
18
|
-
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
|
|
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/disclaimer/disclaimer.njk' import Disclaimer %}
|
|
28
|
-
|
|
29
|
-
{{ Disclaimer({
|
|
30
|
-
bodyHtml: "<strong>Detta är</strong> en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal."
|
|
31
|
-
})}}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### SCSS
|
|
35
|
-
```scss
|
|
36
|
-
@use "@bonniernews/dn-design-system-web/components/disclaimer/disclaimer";
|
|
37
|
-
```
|
|
17
|
+
```jsx
|
|
18
|
+
<Disclaimer bodyHtml="Detta är en text publicerad på Dagens Nyheters ledarsidor. Ledarredaktionens politiska hållning är oberoende liberal. <a href='www.dn.se'>länk</a>" />
|
|
19
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonniernews/dn-design-system-web",
|
|
3
|
-
"version": "32.7.
|
|
3
|
+
"version": "32.7.6",
|
|
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",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"@commitlint/config-conventional": "^18.4.3",
|
|
43
43
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
44
44
|
"conventional-changelog-conventionalcommits": "^6.1.0",
|
|
45
|
+
"node-html-parser": "^7.0.1",
|
|
45
46
|
"postcss": "8.4.31",
|
|
46
47
|
"preact": "^10.24.0",
|
|
47
48
|
"release-it": "^17.0.0",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { ComponentChild } from 'preact';
|
|
1
2
|
export interface ArticleImageProps {
|
|
2
|
-
|
|
3
|
+
image: ComponentChild;
|
|
3
4
|
caption?: string;
|
|
4
5
|
author?: string;
|
|
5
6
|
imageType?: string;
|
|
@@ -8,4 +9,4 @@ export interface ArticleImageProps {
|
|
|
8
9
|
classNames?: string;
|
|
9
10
|
attributes?: object;
|
|
10
11
|
}
|
|
11
|
-
export declare const ArticleImage: ({
|
|
12
|
+
export declare const ArticleImage: ({ image, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;
|
|
@@ -6,4 +6,4 @@ import { ArticleImageProps } from '../../assets/article-image/article-image';
|
|
|
6
6
|
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
7
7
|
* `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`
|
|
8
8
|
*/
|
|
9
|
-
export declare const ArticleBodyImage: ({
|
|
9
|
+
export declare const ArticleBodyImage: ({ image, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;
|
|
@@ -26,7 +26,7 @@ var ImageCaption = ({ caption, author, imageType, classNames, attributes, forceP
|
|
|
26
26
|
// ../src/assets/article-image/article-image.tsx
|
|
27
27
|
import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
|
|
28
28
|
var ArticleImage = ({
|
|
29
|
-
|
|
29
|
+
image,
|
|
30
30
|
caption = "",
|
|
31
31
|
author = "",
|
|
32
32
|
imageType = "",
|
|
@@ -39,7 +39,7 @@ var ArticleImage = ({
|
|
|
39
39
|
const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
|
|
40
40
|
const showCaption = !!caption || !!author;
|
|
41
41
|
return /* @__PURE__ */ jsxs2("figure", { className: classes, ...attributes, children: [
|
|
42
|
-
fullWidth ? /* @__PURE__ */ jsx2("div", { className: "ds-full-width-element",
|
|
42
|
+
fullWidth ? /* @__PURE__ */ jsx2("div", { className: "ds-full-width-element", children: image }) : image,
|
|
43
43
|
showCaption && /* @__PURE__ */ jsx2(ImageCaption, { caption, author, imageType, forcePx })
|
|
44
44
|
] });
|
|
45
45
|
};
|
|
@@ -47,7 +47,7 @@ var ArticleImage = ({
|
|
|
47
47
|
// ../src/components/article-body-image/article-body-image.tsx
|
|
48
48
|
import { jsx as jsx3 } from "preact/jsx-runtime";
|
|
49
49
|
var ArticleBodyImage = ({
|
|
50
|
-
|
|
50
|
+
image,
|
|
51
51
|
caption = "",
|
|
52
52
|
author = "",
|
|
53
53
|
imageType = "",
|
|
@@ -61,7 +61,7 @@ var ArticleBodyImage = ({
|
|
|
61
61
|
return /* @__PURE__ */ jsx3(
|
|
62
62
|
ArticleImage,
|
|
63
63
|
{
|
|
64
|
-
|
|
64
|
+
image,
|
|
65
65
|
caption,
|
|
66
66
|
author,
|
|
67
67
|
imageType,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.tsx", "../../../assets/article-image/article-image.tsx", "../../../components/article-body-image/article-body-image.tsx"],
|
|
4
|
-
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps {\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 /** Ex. \"my-special-class another-class\" */\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\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 { ImageCaption } from '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\n\nexport interface ArticleImageProps {\n
|
|
5
|
-
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACuCI,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;;;
|
|
4
|
+
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts';\n\nexport interface ImageCaptionProps {\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 /** Ex. \"my-special-class another-class\" */\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\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 { ImageCaption } from '../../components/image-caption/image-caption'\nimport { formatClassString } from '../../helpers/formatClassString'\n\nexport interface ArticleImageProps {\n image: ComponentChild\n caption?: string\n author?: string\n imageType?: string\n fullWidth?: boolean\n forcePx?: boolean\n classNames?: string\n attributes?: object\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 { ArticleImage, ArticleImageProps } from '../../assets/article-image/article-image'\nimport { formatClassString } from '../../helpers/formatClassString'\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)\n * - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--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-body-image/article-body-image.scss'`\n */\nexport const ArticleBodyImage = ({\n image,\n caption = '',\n author = '',\n imageType = '',\n fullWidth,\n forcePx,\n classNames,\n attributes,\n}: ArticleImageProps) => {\n const componentClassName = 'ds-article-image--body'\n const classes = formatClassString([componentClassName, classNames])\n\n return (\n <ArticleImage\n image={image}\n caption={caption}\n author={author}\n imageType={imageType}\n fullWidth={fullWidth}\n forcePx={forcePx}\n classNames={classes}\n attributes={attributes}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACuCI,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;;;AChBI,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;;;ACfI,gBAAAE,YAAA;AAdG,IAAM,mBAAmB,CAAC;AAAA,EAC/B;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,UAAU,CAAC;AAElE,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["jsx", "jsxs", "jsx"]
|
|
7
7
|
}
|
|
@@ -322,13 +322,7 @@ var BylineList = ({ bylines, attributes, showBorderOnLastItem = false, forcePx,
|
|
|
322
322
|
};
|
|
323
323
|
const shouldShowBorder = showBorderOnLastItem || index !== bylines.length - 1;
|
|
324
324
|
return /* @__PURE__ */ jsxs4(BylineListInner, { ...{ ...byline, forcePx }, linkAttributes, border: shouldShowBorder, followable, authorPageUrl, children: [
|
|
325
|
-
bylineImage && /* @__PURE__ */ jsx8(
|
|
326
|
-
"div",
|
|
327
|
-
{
|
|
328
|
-
className: `${componentClassName}__portrait`,
|
|
329
|
-
dangerouslySetInnerHTML: { __html: bylineImage }
|
|
330
|
-
}
|
|
331
|
-
),
|
|
325
|
+
bylineImage && /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__portrait`, children: bylineImage }),
|
|
332
326
|
/* @__PURE__ */ jsx8(
|
|
333
327
|
Title,
|
|
334
328
|
{
|
|
@@ -424,7 +418,7 @@ var Byline = ({
|
|
|
424
418
|
"div",
|
|
425
419
|
{
|
|
426
420
|
className: largeByline ? `${componentClassName}__portrait--large` : `${componentClassName}__portrait`,
|
|
427
|
-
|
|
421
|
+
children: bylines[0].bylineImage
|
|
428
422
|
}
|
|
429
423
|
),
|
|
430
424
|
/* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info ${!bylineTitle ? `${componentClassName}__info--no-title` : ""}`, children: [
|
|
@@ -447,7 +441,7 @@ var Byline = ({
|
|
|
447
441
|
"div",
|
|
448
442
|
{
|
|
449
443
|
className: `${componentClassName}__portrait`,
|
|
450
|
-
|
|
444
|
+
children: byline.bylineImage
|
|
451
445
|
},
|
|
452
446
|
`byline-portrait-${index}`
|
|
453
447
|
)),
|