@bonniernews/dn-design-system-web 32.1.1 → 32.2.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.1.1...@bonniernews/dn-design-system-web@32.2.0) (2025-05-12)
+
+
+### Features
+
+* **web:** imagecaption tsx ([#1731](https://github.com/BonnierNews/dn-design-system/issues/1731)) ([c624840](https://github.com/BonnierNews/dn-design-system/commit/c62484032ce948d3ca12468e04467aa286d9082f))
+
 ## [32.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.1.0...@bonniernews/dn-design-system-web@32.1.1) (2025-05-07)
 
 

package/components/image-caption/README-NJK.md

@@ -0,0 +1,39 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+- Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-imagecaption--docs)
+- Storybook (Latest): [ImageCaption](https://designsystem-latest.dn.se/?path=/docs/article-imagecaption--docs)
+
+----
+
+# ImageCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|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/image-caption/image-caption.njk' import ImageCaption %}
+
+{{ ImageCaption({
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/image-caption/image-caption";
+```

package/components/image-caption/README.md

@@ -1,39 +1,24 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
-- Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-imagecaption--docs)
-- Storybook (Latest): [ImageCaption](https://designsystem-latest.dn.se/?path=/docs/article-imagecaption--docs)
-
-----
-
-# ImageCaption
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|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/image-caption/image-caption.njk' import ImageCaption %}
-
-{{ ImageCaption({
-  caption: "En bildtext",
-  imageType: "Foto",
-  author: "Paul Hansen"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/image-caption/image-caption";
-```
+ImageCaption
+============
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+*   Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--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/image-caption/image-caption.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| caption | Ex "Detta är en bildtext"<br />string | \- |
+| author | Ex "Paul Hansen"<br />string | \- |
+| imageType | Type of image. Ex "Foto" or "Illustration"<br />string | \- |
+| classNames | Ex. "my-special-class another-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+
+```jsx
+<ImageCaption
+  author="Paul Hansen"
+  caption="Detta är en bildtext"
+  imageType="Foto"
+/>
+```

package/components/image-caption/image-caption.njk

@@ -21,7 +21,7 @@
       {# Low estimate of how much will fit on tablet/desktop #}
       {% if (authorText | length) >= 27 and (authorText | length) < 60 %}
         {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap-bigscreen"), authorClasses) %}
-      {# Low estimate of how much will fit on iphone4 #}
+      {# Low estimate of how much will fit on 320px mobile #}
       {% elif (authorText | length) < 27 %}
         {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap"), authorClasses) %}
       {% endif %}

package/package.json

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

package/preact/components/image-caption/image-caption.d.ts

@@ -0,0 +1,22 @@
+export interface ImageCaptionProps {
+    /**  Ex "Detta är en bildtext" */
+    caption?: string;
+    /** Ex "Paul Hansen" */
+    author?: string;
+    /** Type of image. Ex "Foto" or "Illustration" */
+    imageType?: string;
+    /** Ex. "my-special-class another-class" */
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+ * - Storybook: [ImageCaption](https://designsystem.dn.se/?path=/docs/article-image-caption--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/image-caption/image-caption.scss'`
+ */
+export declare const ImageCaption: ({ caption, author, imageType, classNames, attributes, forcePx }: ImageCaptionProps) => import("preact").JSX.Element;

package/preact/components/image-caption/image-caption.js

@@ -0,0 +1,28 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/image-caption/image-caption.tsx
+import { Fragment, 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", { dangerouslySetInnerHTML: { __html: caption } }),
+    caption && authorText && "\xA0",
+    authorText && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: authorClasses, children: authorText }) })
+  ] });
+};
+export {
+  ImageCaption
+};
+//# sourceMappingURL=image-caption.js.map

package/preact/components/image-caption/image-caption.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/image-caption/image-caption.tsx"],
+  "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"],
+  "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;",
+  "names": []
+}