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

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+
 ## [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)
 
 

package/components/article-top-image/README.md

@@ -1,41 +1,27 @@
-- 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)
-- Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)
-- Storybook (Latest): [ArticleTopImage](https://designsystem-latest.dn.se/?path=/docs/article-articletopimage--docs)
-
-----
-
-# ArticleTopImage
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|imageHtml | String | yes | | | Use to populate figure tag with image information |
-|caption | String | no | | | Ex "Detta är en bildtext" |
-|imageType | String | no | | | Type of image. Ex "Foto" |
-|author | String | no | | | Ex "Paul Hansen" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.njk' import ArticleTopImage %}
-
-{{ ArticleTopImage({
-  imageHtml: exampleArticleTopImageHtml(),
-  caption: "En bildtext",
-  imageType: "Foto",
-  author: "Beatrice Lundborg"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/article-top-image/article-top-image";
-```
+ArticleTopImage
+===============
+
+*   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)
+*   Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)
+
+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'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+| image\* | ComponentChild | \- |
+| caption | string | \- |
+| author | string | \- |
+| imageType | string | \- |
+| fullWidth | boolean | \- |
+| forcePx | boolean | \- |
+
+```jsx
+<ArticleTopImage
+  author="Beatrice Lundborg"
+  caption="Detta är en bildtext"
+  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'}}/>}
+  imageType="Foto"
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.21",
+  "version": "32.7.22",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/article-top-image/article-top-image.d.ts

@@ -0,0 +1,12 @@
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
+import { ArticleImageProps } from '@bonniernews/dn-design-system-web/assets/article-image/article-image.tsx';
+export interface ArticleTopImageProps extends SharedProps, ArticleImageProps {
+}
+/**
+ * - 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)
+ * - Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--docs)
+ *
+ * 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'`
+ */
+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

@@ -0,0 +1,66 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/image-caption/image-caption.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var ImageCaption = ({ caption, author, imageType, classNames, attributes, forcePx }) => {
+  const classes = formatClassString([
+    "ds-image-caption",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  const authorText = imageType && author ? `${imageType.charAt(0).toUpperCase() + imageType.slice(1)}: ${author}` : author;
+  const authorClasses = [
+    "ds-article-image__credits",
+    authorText && authorText.length >= 27 && authorText.length < 60 ? "ds-article-image__credits--nowrap-bigscreen" : authorText && authorText.length < 27 ? "ds-article-image__credits--nowrap" : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("figcaption", { className: classes, "aria-hidden": "true", ...attributes, children: [
+    caption && /* @__PURE__ */ jsx("span", { children: caption }),
+    " ",
+    authorText && /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText })
+  ] });
+};
+
+// ../src/assets/article-image/article-image.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var ArticleImage = ({
+  image,
+  caption = "",
+  author = "",
+  imageType = "",
+  fullWidth,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-article-image";
+  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  const showCaption = !!caption || !!author;
+  return /* @__PURE__ */ jsxs2("figure", { className: classes, ...attributes, children: [
+    fullWidth ? /* @__PURE__ */ jsx2("div", { className: "ds-full-width-element", children: image }) : image,
+    showCaption && /* @__PURE__ */ jsx2(ImageCaption, { caption, author, imageType, forcePx })
+  ] });
+};
+
+// ../src/components/article-top-image/article-top-image.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var ArticleTopImage = ({ caption, imageType, author, image, forcePx, classNames, attributes }) => {
+  const classes = formatClassString(["ds-article-image--top", classNames]);
+  const imageParams = {
+    fullWidth: true,
+    caption,
+    imageType,
+    author,
+    image,
+    forcePx,
+    classNames: classes,
+    attributes
+  };
+  return /* @__PURE__ */ jsx3(ArticleImage, { ...imageParams });
+};
+export {
+  ArticleTopImage
+};
+//# sourceMappingURL=article-top-image.js.map

package/preact/components/article-top-image/article-top-image.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 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"],
+  "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"],
+  "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;",
+  "names": ["jsx", "jsxs", "jsx"]
+}