@bonniernews/dn-design-system-web 32.2.1 → 32.3.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.0...@bonniernews/dn-design-system-web@32.3.1) (2025-05-16)
+
+
+### Bug Fixes
+
+* **web:** change teaser counter to flex ([#1743](https://github.com/BonnierNews/dn-design-system/issues/1743)) ([94c8591](https://github.com/BonnierNews/dn-design-system/commit/94c8591a970a142105376b095dfb2662a0252dd1))
+
+## [32.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.2.1...@bonniernews/dn-design-system-web@32.3.0) (2025-05-16)
+
+
+### Features
+
+* **web:** add teaser counter ([#1736](https://github.com/BonnierNews/dn-design-system/issues/1736)) ([a93f320](https://github.com/BonnierNews/dn-design-system/commit/a93f320f735e40c066cca39b6ba8c3d41454d5e9))
+
+
+### Bug Fixes
+
+* app delete letter spacing if 0 ([#1739](https://github.com/BonnierNews/dn-design-system/issues/1739)) ([55dd0e4](https://github.com/BonnierNews/dn-design-system/commit/55dd0e4693ae4d4d7cb7112042b9626b6ff3f03e))
+* **web:** bump package version after merge ([#1741](https://github.com/BonnierNews/dn-design-system/issues/1741)) ([7c85270](https://github.com/BonnierNews/dn-design-system/commit/7c8527025485b57ef917c0cb951c6588fd8c6774))
+
+
+### Maintenance
+
+* prerelease packages ([25f639c](https://github.com/BonnierNews/dn-design-system/commit/25f639ce15dc02c8fa9516272e316cde81136e34))
+
 ## [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)
 
 

package/README.md

@@ -12,4 +12,4 @@ Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](http
 
 Changelog: [https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md](https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md)
 
-For specific instructions see each component or helper readme.
+For specific instructions see each component or helper readmes.

package/components/teaser-counter/README.md

@@ -0,0 +1,30 @@
+TeaserCounter
+=============
+
+*   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 | \- |
+| counterNumber\* | number | \- |
+| subtitle | string | \- |
+| areaType | "right", "bauta" | \- |
+| targetLink | string | \- |
+| mediaHtml | string | \- |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+
+```jsx
+<TeaserCounter
+  classNames="test-class"
+  counterNumber={124}
+  counterText="DAGAR I <br> FÄNGELSE"
+  mediaHtml="<div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&amp;crop=3:4,smart&amp;height=184' alt='' aria-hidden='true'></div>"
+  subtitle="fängslad i Turkiet för sin journalistik"
+  title="Joakim Medin"
+/>
+```

package/components/teaser-counter/teaser-counter.njk

@@ -0,0 +1,69 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+
+{% macro TeaserCounter(params) %}
+  {% set componentClassName = "ds-teaser--counter" %}
+
+  {% set extraClasses = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: params.areaType,
+    attributes: params.attributes,
+    classNames: extraClasses
+  }) %}
+    <div class="ds-teaser__content">
+      {% if params.title %}
+        <h2 class="{{ componentClassName + '__title' }}">
+          <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
+          {% if params.subtitle %}
+            – {{ params.subtitle }}
+          {% endif %}
+        </h2>
+      {% endif %}
+
+      {% if params.counterNumber is not null or params.counterText %}
+        <div class="{{ componentClassName + '__counter-wrapper' }}">
+          {% if params.counterNumber is not null %}
+            <ul class="{{ componentClassName + '__list' }}">
+              {% for digit in params.counterNumber | string %}
+                <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+
+          {% if params.counterText %}
+            <p class="{{ componentClassName + '__counter-text' }}">
+              {{ params.counterText | safe }}
+            </p>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
+
+    {% if params.countdown %}
+      <div class="{{ componentClassName + '__countdown' }}">
+        {{ IconUse({ icon: "clock" }) }}
+        <span class="{{ componentClassName + '__countdown-text' }}">
+          {{ params.countdown }}
+        </span>
+      </div>
+    {% endif %}
+
+    {% if params.sectionName %}
+      <div class="{{ componentClassName + '__section-name' }}">
+        {{ params.sectionName }}
+      </div>
+    {% endif %}
+
+    {% if params.mediaHtml %}
+      <div class="ds-teaser__media">
+        {{ params.mediaHtml | safe }}
+      </div>
+    {% endif %}
+
+  {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,92 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+a.ds-teaser--counter.ds-teaser {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-teaser--counter.ds-teaser {
+  display: flex;
+  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,
+  .ds-teaser--counter__counter-text {
+    color: $ds-color-text-primary;
+  }
+
+  .ds-teaser--counter__title {
+    margin: 0;
+    @include ds-typography(
+      $ds-typography-functional-heading-xs,
+      $fontWeight: $ds-fontweight-regular,
+      $lineHeight: $ds-lineheight-md
+    );
+  }
+
+  .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 {
+    display: flex;
+    font-variant-numeric: tabular-nums;
+    gap: ds-spacing($ds-s-012);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-regular);
+
+    .ds-teaser--counter__item {
+      align-items: center;
+      background-color: $ds-color-brand-600;
+      border-radius: ds-border-radius($ds-s-025);
+      color: $ds-color-text-on-brand;
+      display: flex;
+      height: ds-spacing($ds-s-200);
+      justify-content: center;
+      width: ds-spacing($ds-s-150);
+    }
+  }
+
+  .ds-teaser--counter__counter-text {
+    margin: 0;
+    @include ds-typography($ds-typography-functional-meta-md);
+  }
+
+  .ds-teaser__media {
+    display: flex;
+    justify-content: flex-end;
+    width: auto;
+  }
+
+  // Mobile width is hardcoded based on 2 rows of text content and desktop for 1 row
+  .picture--placeholder {
+    max-height: 82px;
+    min-width: 62px;
+
+    @include ds-mq-only-breakpoint(mobile) {
+      max-height: 92px;
+      min-width: 69px;
+    }
+  }
+
+  .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.2.1",
+  "version": "32.3.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/teaser-counter/teaser-counter.d.ts

@@ -0,0 +1,20 @@
+export interface TeaserCounterProps {
+    title: string;
+    counterText: string;
+    counterNumber: number;
+    subtitle?: string;
+    areaType?: 'right' | 'bauta';
+    targetLink?: string;
+    mediaHtml?: string;
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+}
+/**
+ * - 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, counterNumber, title, subtitle, }: TeaserCounterProps) => import("preact").JSX.Element;

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

@@ -0,0 +1,72 @@
+// ../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,
+  counterNumber,
+  title,
+  subtitle
+}) => {
+  const componentClassName = "ds-teaser--counter";
+  const classes = formatClassString([componentClassName, classNames]);
+  const counterNumberIsValid = counterNumber !== void 0 && counterNumber !== null;
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, classes, attributes }, 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}`
+      ] }),
+      (counterNumberIsValid || counterText) && /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__counter-wrapper`, children: [
+        counterNumberIsValid && /* @__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  counterNumber: number\n  subtitle?: string\n  areaType?: 'right' | 'bauta'\n  targetLink?: string\n  mediaHtml?: string\n  classNames?: string\n  /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object\n}\n\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  counterNumber,\n  title,\n  subtitle,\n}: TeaserCounterProps) => {\n  const componentClassName = 'ds-teaser--counter'\n  const classes = formatClassString([componentClassName, classNames])\n\n  const counterNumberIsValid = counterNumber !== undefined && counterNumber !== null\n\n  return (\n    <TeaserCard {...{ areaType, targetLink, classes, attributes }}>\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        {(counterNumberIsValid || counterText) && (\n          <div className={`${componentClassName}__counter-wrapper`}>\n            {counterNumberIsValid && (\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;;;ACwBU,SACE,OAAAC,MADF;AApBH,IAAM,gBAAgB,CAAC;AAAA,EAC5B;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,uBAAuB,kBAAkB,UAAa,kBAAkB;AAE9E,SACE,qBAAC,cAAY,GAAG,EAAE,UAAU,YAAY,SAAS,WAAW,GAC1D;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,wBAAwB,gBACxB,qBAAC,SAAI,WAAW,GAAG,kBAAkB,qBAClC;AAAA,gCACC,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"]
+}