@bonniernews/dn-design-system-web 32.1.1 → 32.1.2-beta.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.2.0...@bonniernews/dn-design-system-web@32.2.1) (2025-05-13)
+
+
+### Bug Fixes
+
+* **web:** direkt circle as TSX ([#1732](https://github.com/BonnierNews/dn-design-system/issues/1732)) ([2bfaf60](https://github.com/BonnierNews/dn-design-system/commit/2bfaf608dd2b20618ccc5790eb3b783009273a91))
+
+## [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/direkt-circle/README-NJK.md

@@ -0,0 +1,32 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
+- Storybook: [Subcomponents > DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
+- Storybook (Latest): [Subcomponents > DirektCircle](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
+
+----
+
+# DirektCircle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|circleColor | String | no | | | Hex code or supported color name |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+
+## 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/direkt-circle/direkt-circle.njk' import DirektCircle %}
+
+{{ DirektCircle() }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle";

package/components/direkt-circle/README.md

@@ -1,32 +1,15 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
-- Storybook: [Subcomponents > DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
-- Storybook (Latest): [Subcomponents > DirektCircle](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
+DirektCircle
+============
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
+*   Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
 
-# DirektCircle
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| circleColor | Hex code or supported color name<br />string | "white" |
+| classNames | string | \- |
+| attributes | object | { } |
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|circleColor | String | no | | | Hex code or supported color name |
-|classNames | String | no | | | Ex. "my-special-class" |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-
-
-## 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/direkt-circle/direkt-circle.njk' import DirektCircle %}
-
-{{ DirektCircle() }}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle";
+```jsx
+<DirektCircle />
+```

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/components/teaser-counter/README.md

@@ -0,0 +1,36 @@
+TeaserCounter
+=============
+
+Also known as "På Plats-puffen".
+
+In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
+*   Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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/teaser-counter/teaser-counter.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | string | \- |
+| counterText\* | string | \- |
+| subtitle | string | \- |
+| areaType | "right", "bauta" | \- |
+| targetLink | string | \- |
+| mediaHtml | string | \- |
+| counterDate | string | \- |
+| countdown | boolean | \- |
+| counterNumber | number | \- |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+
+```jsx
+<TeaserCounter
+  counterDate="2023-10-01T12:00:00Z"
+  counterNumber={124}
+  counterText="DAGAR I <br> FÄNGELSE"
+  mediaHtml="<figure class='ds-teaser-image'><div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&fit=around%7C65:87&crop=65:h;center,top&output-quality=80' alt='' aria-hidden='true'></div></figure>"
+  subtitle="fängslad i Turkiet för sin journalistik"
+  title="Joakim Medin"
+/>
+```

package/components/teaser-counter/teaser-counter.scss

@@ -0,0 +1,79 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+a.ds-teaser--counter.ds-teaser {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-teaser--counter.ds-teaser {
+  display: grid;
+  grid-template-columns: auto auto;
+  background-color: $ds-color-surface-primary;
+  gap: ds-spacing($ds-s-075);
+  padding: ds-spacing($ds-s-075);
+
+  .ds-teaser__content {
+    display: flex;
+    flex-direction: column;
+    gap: ds-spacing($ds-s-100);
+    justify-content: space-between;
+  }
+
+  .ds-teaser--counter__title {
+    @include ds-typography(
+      $ds-typography-functional-heading-xs,
+      $fontWeight: $ds-fontweight-regular,
+      $lineHeight: $ds-lineheight-md
+    );
+    margin: 0;
+  }
+
+  .ds-teaser--counter__title--highlighted {
+    font-weight: $ds-fontweight-bold;
+  }
+
+  .ds-teaser--counter__counter-wrapper {
+    align-items: center;
+    display: flex;
+    gap: ds-spacing($ds-s-050);
+  }
+
+  .ds-teaser--counter__list {
+    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-regular);
+    display: flex;
+    font-variant-numeric: tabular-nums;
+    gap: ds-spacing($ds-s-012);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .ds-teaser--counter__item {
+      background-color: $ds-color-brand-600;
+      border-radius: ds-border-radius($ds-s-025);
+      color: $ds-color-text-on-brand;
+      padding: ds-spacing($ds-s-012) ds-spacing($ds-s-025);
+    }
+  }
+
+  .ds-teaser--counter__counter-text {
+    @include ds-typography($ds-typography-functional-meta-md);
+    margin: 0;
+  }
+  .ds-teaser-image {
+    display: flex;
+    justify-content: flex-end;
+    max-height: 130px;
+    min-height: 86px;
+    height: 100%;
+    margin: 0;
+  }
+
+  .picture--placeholder {
+    height: 100%;
+  }
+
+  .picture--placeholder,
+  .picture__img {
+    border-radius: ds-border-radius($ds-s-025);
+  }
+}

package/package.json

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

package/preact/components/direkt-circle/direkt-circle.d.ts

@@ -0,0 +1,12 @@
+interface DirektCircleProps {
+    /** Hex code or supported color name */
+    circleColor?: string;
+    classNames?: string;
+    attributes?: object;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
+ * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
+ */
+export declare const DirektCircle: ({ circleColor, classNames, attributes }: DirektCircleProps) => import("preact").JSX.Element;
+export {};

package/preact/components/direkt-circle/direkt-circle.js

@@ -0,0 +1,60 @@
+// ../src/components/direkt-circle/direkt-circle.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var DirektCircle = ({ circleColor = "white", classNames, attributes = {} }) => {
+  const componentClassName = "ds-direkt-circle";
+  const circleOpacity = [
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.25,
+    0.24,
+    0.235,
+    0.222,
+    0.218,
+    0.212,
+    0.202,
+    0.19,
+    0.178,
+    0.165,
+    0.155,
+    0.145,
+    0.135,
+    0.12,
+    0.107,
+    0.095,
+    0.083,
+    0.07,
+    0.06,
+    0.047,
+    0.035,
+    0.023,
+    0.02
+  ];
+  const classes = [componentClassName, classNames].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: classes,
+      width: "500",
+      height: "500",
+      viewBox: "-250 -250 500 500",
+      fill: "none",
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsx("circle", { r: "5", fill: circleColor }),
+        circleOpacity.map((opacity, index) => {
+          const radius = (index + 1) * 8 + 5;
+          return /* @__PURE__ */ jsx("circle", { opacity, r: radius, stroke: circleColor, strokeWidth: "1.5" }, index);
+        })
+      ]
+    }
+  );
+};
+export {
+  DirektCircle
+};
+//# sourceMappingURL=direkt-circle.js.map

package/preact/components/direkt-circle/direkt-circle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../components/direkt-circle/direkt-circle.tsx"],
+  "sourcesContent": ["interface DirektCircleProps {\n  /** Hex code or supported color name */\n  circleColor?: string\n  classNames?: string\n  attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n */\nexport const DirektCircle = ({ circleColor = 'white', classNames, attributes = {} }: DirektCircleProps) => {\n  const componentClassName = 'ds-direkt-circle'\n  const circleOpacity = [\n    0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n    0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n  ];\n\n  const classes = [componentClassName, classNames].filter(Boolean).join(' ')\n\n  return (\n    <svg\n      className={classes}\n      width='500'\n      height='500'\n      viewBox='-250 -250 500 500'\n      fill='none'\n      {...attributes}\n    >\n      <circle r='5' fill={circleColor} />\n      {circleOpacity.map((opacity, index) => {\n        const radius = (index + 1) * 8 + 5\n        return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n      })}\n    </svg>\n  )\n}\n"],
+  "mappings": ";AAqBI,SAQE,KARF;AAVG,IAAM,eAAe,CAAC,EAAE,cAAc,SAAS,YAAY,aAAa,CAAC,EAAE,MAAyB;AACzG,QAAM,qBAAqB;AAC3B,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,QAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,gBAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,iBAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,QACjG,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "names": []
+}

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": []
+}

package/preact/components/teaser-counter/teaser-counter.d.ts

@@ -0,0 +1,26 @@
+export interface TeaserCounterProps {
+    title: string;
+    counterText: string;
+    subtitle?: string;
+    areaType?: 'right' | 'bauta';
+    targetLink?: string;
+    mediaHtml?: string;
+    counterDate?: string;
+    countdown?: boolean;
+    counterNumber?: number;
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+}
+/**
+ * Also known as "På Plats-puffen".
+ *
+ * In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+ *
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
+ * - Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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/teaser-counter/teaser-counter.scss'`
+ */
+export declare const TeaserCounter: ({ areaType, targetLink, classNames, attributes, mediaHtml, counterText, countdown, counterDate, counterNumber, title, subtitle, }: TeaserCounterProps) => import("preact").JSX.Element;

package/preact/components/teaser-counter/teaser-counter.js

@@ -0,0 +1,78 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/teaser-card/teaser-card.tsx
+import { jsx } from "preact/jsx-runtime";
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+import { jsx as jsx2 } from "preact/jsx-runtime";
+var Media = ({ mediaHtml, rounded }) => {
+  const classNames = "ds-teaser__media" + (rounded ? " ds-teaser__media--rounded" : "");
+  return mediaHtml ? /* @__PURE__ */ jsx2("div", { className: classNames, dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ jsx2("div", { className: "ds-teaser__content", children });
+};
+
+// ../src/components/teaser-counter/teaser-counter.tsx
+import { jsx as jsx3, jsxs } from "preact/jsx-runtime";
+var TeaserCounter = ({
+  areaType,
+  targetLink,
+  classNames,
+  attributes,
+  mediaHtml,
+  counterText,
+  countdown,
+  counterDate,
+  counterNumber,
+  title,
+  subtitle
+}) => {
+  const componentClassName = "ds-teaser--counter";
+  const classes = formatClassString([componentClassName, classNames]);
+  const mergedAttributes = {
+    ...attributes,
+    "data-counter-date": counterDate,
+    ...countdown ? { "data-countdown": countdown } : {}
+  };
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, classes, attributes: mergedAttributes }, children: [
+    /* @__PURE__ */ jsxs(Content, { children: [
+      title && /* @__PURE__ */ jsxs("h2", { className: `${componentClassName}__title`, children: [
+        /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__title--highlighted`, children: title }),
+        subtitle && ` \u2013 ${subtitle}`
+      ] }),
+      (counterNumber || counterText) && /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__counter-wrapper`, children: [
+        counterNumber && /* @__PURE__ */ jsx3("ul", { className: `${componentClassName}__list`, children: counterNumber.toString().split("").map((digit, index) => /* @__PURE__ */ jsx3("li", { className: `${componentClassName}__item`, children: digit }, index)) }),
+        counterText && /* @__PURE__ */ jsx3(
+          "p",
+          {
+            className: `${componentClassName}__counter-text`,
+            dangerouslySetInnerHTML: { __html: counterText }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(Media, { ...{ mediaHtml } })
+  ] });
+};
+export {
+  TeaserCounter
+};
+//# sourceMappingURL=teaser-counter.js.map

package/preact/components/teaser-counter/teaser-counter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../helpers/teaser.tsx", "../../../components/teaser-counter/teaser-counter.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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--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/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n", "import { ComponentChildren } from \"preact\";\n\ninterface MediaProps {\n  mediaHtml?: string;\n  rounded?: boolean;\n}\n\nexport const Media = ({ mediaHtml, rounded }: MediaProps) => {\n  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');\n  return mediaHtml ? (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />) : (null)\n}\n\ninterface ContentProps {\n  children: ComponentChildren;\n}\nexport const Content = ({ children }: ContentProps) => {\n  return (<div className=\"ds-teaser__content\">\n    {children}\n  </div>)\n}\n\ninterface TitleProps {\n  title?: string;\n}\nexport const Title = ({ title }: TitleProps) => {\n  return title ? (<h2 className=\"ds-teaser__title\">{title}</h2>) : (null)\n}\n\ninterface BodyProps {\n  text?: string;\n}\nexport const Body = ({ text }: BodyProps) => {\n  return text ? (<p className=\"ds-teaser__text\">{text}</p>) : (null)\n}\n", "import { TeaserCard } from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { Content, Media } from '@bonniernews/dn-design-system-web/helpers/teaser.tsx'\nexport interface TeaserCounterProps {\n  title: string\n  counterText: string\n  subtitle?: string\n  areaType?: 'right' | 'bauta'\n  targetLink?: string\n  mediaHtml?: string\n  counterDate?: string\n  countdown?: boolean\n  counterNumber?: number\n  classNames?: string\n  /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object\n}\n\n/**\n * Also known as \"P\u00E5 Plats-puffen\".\n *\n * In the CMS title will be set to a location like \"Kiev, Ukraina\" or \"USA\" and text is usually set to some author names like \"Jan Banan och Kalle Kula\"\n *\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)\n * - Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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/teaser-counter/teaser-counter.scss'`\n */\nexport const TeaserCounter = ({\n  areaType,\n  targetLink,\n  classNames,\n  attributes,\n  mediaHtml,\n  counterText,\n  countdown,\n  counterDate,\n  counterNumber,\n  title,\n  subtitle,\n}: TeaserCounterProps) => {\n  const componentClassName = 'ds-teaser--counter'\n  const classes = formatClassString([componentClassName, classNames])\n\n  const mergedAttributes = {\n    ...attributes,\n    'data-counter-date': counterDate,\n    ...(countdown ? { 'data-countdown': countdown } : {}),\n  }\n\n  return (\n    <TeaserCard {...{ areaType, targetLink, classes, attributes: mergedAttributes }}>\n      <Content>\n        {title && (\n          <h2 className={`${componentClassName}__title`}>\n            <span className={`${componentClassName}__title--highlighted`}>{title}</span>\n            {subtitle && ` \u2013 ${subtitle}`}\n          </h2>\n        )}\n\n        {(counterNumber || counterText) && (\n          <div className={`${componentClassName}__counter-wrapper`}>\n            {counterNumber && (\n              <ul className={`${componentClassName}__list`}>\n                {counterNumber\n                  .toString()\n                  .split('')\n                  .map((digit, index) => (\n                    <li key={index} className={`${componentClassName}__item`}>\n                      {digit}\n                    </li>\n                  ))}\n              </ul>\n            )}\n\n            {counterText && (\n              <p\n                className={`${componentClassName}__counter-text`}\n                dangerouslySetInnerHTML={{ __html: counterText }}\n              ></p>\n            )}\n          </div>\n        )}\n      </Content>\n      <Media {...{ mediaHtml }} />\n    </TeaserCard>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC+BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,SAAS,YAAY,SAAS,MAAwB;AAC1H,QAAM,qBAAqB;AAE3B,QAAM,aAAa,kBAAkB;AAAA,IACnC;AAAA,IACA,YAAY,GAAG,kBAAkB,KAAK,QAAQ;AAAA,IAC9C,YAAY,WAAW;AAAA,IACvB,aAAa,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAED,MAAI,YAAY;AACd,WACE,oBAAC,OAAE,WAAW,YAAY,MAAM,YAAc,GAAG,YAC7C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,YAAY,GAAG,YAC3B,UACJ;AAEJ;;;ACnCsB,gBAAAA,YAAA;AAFf,IAAM,QAAQ,CAAC,EAAE,WAAW,QAAQ,MAAkB;AAC3D,QAAM,aAAa,sBAAsB,UAAU,+BAA+B;AAClF,SAAO,YAAa,gBAAAA,KAAC,SAAI,WAAW,YAAY,yBAAyB,EAAE,QAAQ,UAAU,GAAG,IAAO;AACzG;AAKO,IAAM,UAAU,CAAC,EAAE,SAAS,MAAoB;AACrD,SAAQ,gBAAAA,KAAC,SAAI,WAAU,sBACpB,UACH;AACF;;;ACoCU,SACE,OAAAC,MADF;AA1BH,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,qBAAqB;AAAA,IACrB,GAAI,YAAY,EAAE,kBAAkB,UAAU,IAAI,CAAC;AAAA,EACrD;AAEA,SACE,qBAAC,cAAY,GAAG,EAAE,UAAU,YAAY,SAAS,YAAY,iBAAiB,GAC5E;AAAA,yBAAC,WACE;AAAA,eACC,qBAAC,QAAG,WAAW,GAAG,kBAAkB,WAClC;AAAA,wBAAAA,KAAC,UAAK,WAAW,GAAG,kBAAkB,wBAAyB,iBAAM;AAAA,QACpE,YAAY,WAAM,QAAQ;AAAA,SAC7B;AAAA,OAGA,iBAAiB,gBACjB,qBAAC,SAAI,WAAW,GAAG,kBAAkB,qBAClC;AAAA,yBACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,UACjC,wBACE,SAAS,EACT,MAAM,EAAE,EACR,IAAI,CAAC,OAAO,UACX,gBAAAA,KAAC,QAAe,WAAW,GAAG,kBAAkB,UAC7C,mBADM,KAET,CACD,GACL;AAAA,QAGD,eACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,kBAAkB;AAAA,YAChC,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,QAChD;AAAA,SAEL;AAAA,OAEJ;AAAA,IACA,gBAAAA,KAAC,SAAO,GAAG,EAAE,UAAU,GAAG;AAAA,KAC5B;AAEJ;",
+  "names": ["jsx", "jsx"]
+}