@bonniernews/dn-design-system-web 32.7.3 → 32.7.5
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 +24 -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/byline-list/byline-list.scss +14 -10
- package/components/modal/modal.js +1 -0
- package/components/modal/modal.scss +4 -0
- package/package.json +1 -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/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [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)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **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))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Maintenance
|
|
16
|
+
|
|
17
|
+
* **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))
|
|
18
|
+
* **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))
|
|
19
|
+
* **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))
|
|
20
|
+
* **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))
|
|
21
|
+
* prerelease packages ([5355c1a](https://github.com/BonnierNews/dn-design-system/commit/5355c1a330f54db1f0b0ed482edbea1908f3c2d1))
|
|
22
|
+
* prerelease packages ([0e9033d](https://github.com/BonnierNews/dn-design-system/commit/0e9033dbf785b209599bad47db21f168e812d86a))
|
|
23
|
+
|
|
24
|
+
## [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)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### Bug Fixes
|
|
28
|
+
|
|
29
|
+
* **web:** update modal to not have focus and byline padding ([#1786](https://github.com/BonnierNews/dn-design-system/issues/1786)) ([cca6f9d](https://github.com/BonnierNews/dn-design-system/commit/cca6f9ded0b7457b23ef3e636b7f233837152f0e))
|
|
30
|
+
|
|
7
31
|
## [32.7.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.2...@bonniernews/dn-design-system-web@32.7.3) (2025-06-19)
|
|
8
32
|
|
|
9
33
|
|
|
@@ -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'
|
|
@@ -8,7 +8,7 @@ $ds-byline-list__portrait-size: 44px;
|
|
|
8
8
|
.ds-byline-list {
|
|
9
9
|
list-style: none;
|
|
10
10
|
margin: 0;
|
|
11
|
-
padding:
|
|
11
|
+
padding: 0;
|
|
12
12
|
|
|
13
13
|
.ds-byline-list__item {
|
|
14
14
|
background-color: transparent;
|
|
@@ -58,10 +58,13 @@ $ds-byline-list__portrait-size: 44px;
|
|
|
58
58
|
&:active {
|
|
59
59
|
opacity: 0.6;
|
|
60
60
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
|
|
62
|
+
@include ds-focus(
|
|
63
|
+
$offset: -2px,
|
|
64
|
+
$includeSelector: true,
|
|
65
|
+
$width: ds-border-width(xs),
|
|
66
|
+
$color: $ds-color-border-primary-strongest
|
|
67
|
+
);
|
|
65
68
|
}
|
|
66
69
|
|
|
67
70
|
.ds-byline-list__item__icon-right {
|
|
@@ -115,11 +118,12 @@ $ds-byline-list__portrait-size: 44px;
|
|
|
115
118
|
|
|
116
119
|
a.ds-byline-list__item__title {
|
|
117
120
|
@include ds-link($ds-link-list);
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
121
|
+
@include ds-focus(
|
|
122
|
+
$offset: 2px,
|
|
123
|
+
$includeSelector: true,
|
|
124
|
+
$width: ds-border-width(xs),
|
|
125
|
+
$color: $ds-color-border-primary-strongest
|
|
126
|
+
);
|
|
123
127
|
}
|
|
124
128
|
}
|
|
125
129
|
|
|
@@ -38,6 +38,7 @@ function openModal(modalEl) {
|
|
|
38
38
|
if (typeof HTMLDialogElement === "function") {
|
|
39
39
|
const modalElInner = modalEl.querySelector(".ds-modal__inner");
|
|
40
40
|
modalElInner.showModal();
|
|
41
|
+
modalElInner.focus(); // Ensure the modal is focused when opened and not a button/link within it
|
|
41
42
|
} else {
|
|
42
43
|
modalEl.classList.remove("ds-modal--hidden");
|
|
43
44
|
document.body.classList.add("no-scroll");
|
package/package.json
CHANGED
|
@@ -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
|
)),
|