@bonniernews/dn-design-system-web 32.4.8 → 32.4.9

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 (10) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/article-body-image/README-NJK.md +43 -0
  3. package/components/article-body-image/README.md +27 -43
  4. package/package.json +1 -1
  5. package/preact/assets/article-image/article-image.d.ts +11 -0
  6. package/preact/components/article-body-image/article-body-image.d.ts +9 -0
  7. package/preact/components/article-body-image/article-body-image.js +78 -0
  8. package/preact/components/article-body-image/article-body-image.js.map +7 -0
  9. package/preact/components/image-caption/image-caption.js +4 -4
  10. package/preact/components/image-caption/image-caption.js.map +2 -2
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.4.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.8...@bonniernews/dn-design-system-web@32.4.9) (2025-05-30)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** article body image as tsx ([#1755](https://github.com/BonnierNews/dn-design-system/issues/1755)) ([8db5387](https://github.com/BonnierNews/dn-design-system/commit/8db538783e39272f866ea13ba7411484ed0a25ca))
13
+
7
14
  ## [32.4.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.7...@bonniernews/dn-design-system-web@32.4.8) (2025-05-28)
8
15
 
9
16
 
package/components/article-body-image/README-NJK.md ADDED
@@ -0,0 +1,43 @@
1
+ - 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)
2
+ - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
3
+ - Storybook (Latest): [ArticleBodyImage](https://designsystem-latest.dn.se/?path=/docs/article-articlebodyimage--docs)
4
+
5
+ ----
6
+
7
+ # ArticleBodyImage
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
+ |fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
15
+ |caption | String | no | | | Ex "Detta är en bildtext" |
16
+ |imageType | String | no | | | Type of image. Ex "Foto" |
17
+ |author | String | no | | | Ex "Paul Hansen" |
18
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
+ |classNames | String | no | | | Ex. "my-special-class" |
20
+ |forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
21
+
22
+ ## Minimum requirement example
23
+
24
+ ### Nunjucks
25
+
26
+ These are copy paste friendly examples to quickliy get started using a component.
27
+
28
+ ```html
29
+ {% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
30
+
31
+ {{ ArticleBodyImage({
32
+ imageHtml: exampleArticleBodyImageHtml(),
33
+ fullWidth: true,
34
+ caption: "En bildtext",
35
+ imageType: "Foto",
36
+ author: "Paul Hansen"
37
+ })}}
38
+ ```
39
+
40
+ ### SCSS
41
+ ```scss
42
+ @use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
43
+ ```
package/components/article-body-image/README.md CHANGED
@@ -1,43 +1,27 @@
1
- - 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)
2
- - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
3
- - Storybook (Latest): [ArticleBodyImage](https://designsystem-latest.dn.se/?path=/docs/article-articlebodyimage--docs)
4
-
5
- ----
6
-
7
- # ArticleBodyImage
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
- |fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
15
- |caption | String | no | | | Ex "Detta är en bildtext" |
16
- |imageType | String | no | | | Type of image. Ex "Foto" |
17
- |author | String | no | | | Ex "Paul Hansen" |
18
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
- |classNames | String | no | | | Ex. "my-special-class" |
20
- |forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
21
-
22
- ## Minimum requirement example
23
-
24
- ### Nunjucks
25
-
26
- These are copy paste friendly examples to quickliy get started using a component.
27
-
28
- ```html
29
- {% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
30
-
31
- {{ ArticleBodyImage({
32
- imageHtml: exampleArticleBodyImageHtml(),
33
- fullWidth: true,
34
- caption: "En bildtext",
35
- imageType: "Foto",
36
- author: "Paul Hansen"
37
- })}}
38
- ```
39
-
40
- ### SCSS
41
- ```scss
42
- @use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
43
- ```
1
+ ArticleBodyImage
2
+ ================
3
+
4
+ * 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)
5
+ * Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--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-body-image/article-body-image.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | imageHtml\* | string | \- |
12
+ | caption | string | ", " |
13
+ | author | string | ", " |
14
+ | imageType | string | ", " |
15
+ | fullWidth | boolean | \- |
16
+ | forcePx | boolean | \- |
17
+ | classNames | string | \- |
18
+ | attributes | object | \- |
19
+
20
+ ```jsx
21
+ <ArticleBodyImage
22
+ author="Paul Hansen"
23
+ caption="Detta är en bildtext"
24
+ imageHtml="<div class='picture picture--placeholder' style='aspect-ratio: 1920 / 1081'><img class='picture__img' src='https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=480:*&amp;output-quality=80' srcset='https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=750:*&amp;output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&amp;downsize=960:*&amp;output-quality=60 960w' sizes='100vw' alt='Stridsvagnssoldaterna håller sitt förbandsläger prydligt. Man tar hand om sina persedlar, även i smällkalla vintern. Skräp läggs på speciella platser, röker gör man utomhus och det luktar nykokt te i skyddsvärnen.'></div>"
25
+ imageType="Foto"
26
+ />
27
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.4.8",
3
+ "version": "32.4.9",
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/assets/article-image/article-image.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ export interface ArticleImageProps {
2
+ imageHtml: string;
3
+ caption?: string;
4
+ author?: string;
5
+ imageType?: string;
6
+ fullWidth?: boolean;
7
+ forcePx?: boolean;
8
+ classNames?: string;
9
+ attributes?: object;
10
+ }
11
+ export declare const ArticleImage: ({ imageHtml, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;
package/preact/components/article-body-image/article-body-image.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { ArticleImageProps } from '../../assets/article-image/article-image';
2
+ /**
3
+ * - 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)
4
+ * - Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
5
+ *
6
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
7
+ * `@use '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.scss'`
8
+ */
9
+ export declare const ArticleBodyImage: ({ imageHtml, caption, author, imageType, fullWidth, forcePx, classNames, attributes, }: ArticleImageProps) => import("preact").JSX.Element;
package/preact/components/article-body-image/article-body-image.js ADDED
@@ -0,0 +1,78 @@
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
+ imageHtml,
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", dangerouslySetInnerHTML: { __html: imageHtml } }) : /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: imageHtml } }),
43
+ showCaption && /* @__PURE__ */ jsx2(ImageCaption, { caption, author, imageType, forcePx })
44
+ ] });
45
+ };
46
+
47
+ // ../src/components/article-body-image/article-body-image.tsx
48
+ import { jsx as jsx3 } from "preact/jsx-runtime";
49
+ var ArticleBodyImage = ({
50
+ imageHtml,
51
+ caption = "",
52
+ author = "",
53
+ imageType = "",
54
+ fullWidth,
55
+ forcePx,
56
+ classNames,
57
+ attributes
58
+ }) => {
59
+ const componentClassName = "ds-article-image--body";
60
+ const classes = formatClassString([componentClassName, classNames]);
61
+ return /* @__PURE__ */ jsx3(
62
+ ArticleImage,
63
+ {
64
+ imageHtml,
65
+ caption,
66
+ author,
67
+ imageType,
68
+ fullWidth,
69
+ forcePx,
70
+ classNames: classes,
71
+ attributes
72
+ }
73
+ );
74
+ };
75
+ export {
76
+ ArticleBodyImage
77
+ };
78
+ //# sourceMappingURL=article-body-image.js.map
package/preact/components/article-body-image/article-body-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-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 imageHtml: string\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 imageHtml,\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' dangerouslySetInnerHTML={{ __html: imageHtml }}></div>\n ) : (\n <span dangerouslySetInnerHTML={{ __html: imageHtml }}></span> // TODO: check this, don't want a wrapping span\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 imageHtml,\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 imageHtml={imageHtml}\n caption={caption}\n author={author}\n imageType={imageType}\n fullWidth={fullWidth}\n forcePx={forcePx}\n classNames={classes}\n attributes={attributes}\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;;;ACjBI,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,yBAAwB,yBAAyB,EAAE,QAAQ,UAAU,GAAG,IAEvF,gBAAAA,KAAC,UAAK,yBAAyB,EAAE,QAAQ,UAAU,GAAG;AAAA,IAEvD,eAAe,gBAAAA,KAAC,gBAAa,SAAkB,QAAgB,WAAsB,SAAkB;AAAA,KAC1G;AAEJ;;;ACdI,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
+ "names": ["jsx", "jsxs", "jsx"]
7
+ }
package/preact/components/image-caption/image-caption.js CHANGED
@@ -4,7 +4,7 @@ var formatClassString = (classesArray) => {
4
4
  };
5
5
 
6
6
  // ../src/components/image-caption/image-caption.tsx
7
- import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
7
+ import { jsx, jsxs } from "preact/jsx-runtime";
8
8
  var ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }) => {
9
9
  const classes = formatClassString([
10
10
  "ds-image-caption",
@@ -17,9 +17,9 @@ var ImageCaption = ({ caption, author, imageType, classNames, attributes, forceP
17
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
18
  ].filter(Boolean).join(" ");
19
19
  return /* @__PURE__ */ jsxs("figcaption", { className: classes, "aria-hidden": "true", ...attributes, children: [
20
- caption && /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: caption } }),
21
- caption && authorText && "\xA0",
22
- authorText && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText }) })
20
+ caption && /* @__PURE__ */ jsx("span", { children: caption }),
21
+ " ",
22
+ authorText && /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText })
23
23
  ] });
24
24
  };
25
25
  export {
package/preact/components/image-caption/image-caption.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.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 {caption && <span dangerouslySetInnerHTML={{ __html: caption }} />}\n\n {/* non-breaking space between the caption-span and author-span */}\n {caption && authorText && '\\u00A0'}\n\n {authorText && (\n <>\n <span className={authorClasses}>\n {authorText}\n </span>\n </>\n )}\n </figcaption>\n );\n};\n"],
5
- "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACuCI,SAOE,UANY,KADd;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,YACpD;AAAA,eAAW,oBAAC,UAAK,yBAAyB,EAAE,QAAQ,QAAQ,GAAG;AAAA,IAG/D,WAAW,cAAc;AAAA,IAEzB,cACD,gCACE,8BAAC,UAAK,WAAW,eACd,sBACH,GACF;AAAA,KAEF;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"],
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;",
6
6
  "names": []
7
7
  }