@bonniernews/dn-design-system-web 32.6.0 → 32.6.1

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.6.0...@bonniernews/dn-design-system-web@32.6.1) (2025-06-10)
+
+
+### Bug Fixes
+
+* **web:** add prop to direkt header ([#1773](https://github.com/BonnierNews/dn-design-system/issues/1773)) ([294671f](https://github.com/BonnierNews/dn-design-system/commit/294671f7e407a4323f663d3ace3fae0e02e1eda3))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/runtime from 7.27.4 to 7.27.6 ([#1772](https://github.com/BonnierNews/dn-design-system/issues/1772)) ([94c018f](https://github.com/BonnierNews/dn-design-system/commit/94c018fea1cf4dc14263239d401eb8f2fd4e03b8))
+
 ## [32.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.5.1...@bonniernews/dn-design-system-web@32.6.0) (2025-06-09)
 
 

package/components/direkt-header/README.md

@@ -10,8 +10,9 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | title\* | string | \- |
 | subtitle | string | \- |
-| preTitle | string | "Direkt" |
+| pretitle | string | "Direkt" |
 | isAnimated | boolean | true |
+| renderAsH2 | boolean | false |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
 

package/components/direkt-header/direkt-header.scss

@@ -4,6 +4,7 @@
   background-color: $ds-color-brand-600;
   border-radius: ds-border-radius(050);
   color: $ds-color-text-primaryinvert;
+  overflow: hidden;
   padding: ds-spacing($ds-s-100);
 
   .ds-direkt-header__pre-title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.6.0",
+  "version": "32.6.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-header/direkt-header.d.ts

@@ -1,8 +1,9 @@
 export interface DirektHeaderProps {
     title: string;
     subtitle?: string;
-    preTitle?: string;
+    pretitle?: string;
     isAnimated?: boolean;
+    renderAsH2?: boolean;
     classNames?: string;
     /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;
@@ -14,4 +15,4 @@ export interface DirektHeaderProps {
  * 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/direkt-header/direkt-header.scss'`
  */
-export declare const DirektHeader: ({ classNames, attributes, title, subtitle, preTitle, isAnimated, }: DirektHeaderProps) => import("preact").JSX.Element;
+export declare const DirektHeader: ({ classNames, attributes, title, subtitle, pretitle, isAnimated, renderAsH2, }: DirektHeaderProps) => import("preact").JSX.Element;

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

@@ -62,18 +62,19 @@ var DirektHeader = ({
   attributes = {},
   title,
   subtitle,
-  preTitle = "Direkt",
-  isAnimated = true
+  pretitle = "Direkt",
+  isAnimated = true,
+  renderAsH2 = false
 }) => {
   const componentClassName = "ds-direkt-header";
   const classes = formatClassString([componentClassName, classNames]);
   return /* @__PURE__ */ jsxs2("header", { className: classes, ...attributes, children: [
     /* @__PURE__ */ jsxs2("p", { className: `${componentClassName}__pre-title`, children: [
       /* @__PURE__ */ jsx2("span", { className: `${componentClassName}__circle-wrapper`, children: /* @__PURE__ */ jsx2(DirektCircle, { classNames: `${componentClassName}__circle`, isAnimated }) }),
-      preTitle
+      pretitle
     ] }),
-    /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__title`, children: title }),
-    subtitle && /* @__PURE__ */ jsx2("h3", { className: `${componentClassName}__sub-title`, children: subtitle })
+    renderAsH2 ? /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__title`, children: title }) : /* @__PURE__ */ jsx2("h1", { className: `${componentClassName}__title`, children: title }),
+    subtitle && (renderAsH2 ? /* @__PURE__ */ jsx2("h3", { className: `${componentClassName}__sub-title`, children: subtitle }) : /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__sub-title`, children: subtitle }))
   ] });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/direkt-circle/direkt-circle.tsx", "../../../components/direkt-header/direkt-header.tsx"],
-  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "interface DirektCircleProps {\n  /** Hex code or supported color name */\n  circleColor?: string\n  classNames?: string\n  isAnimated?: boolean\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 *  * 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/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n  circleColor = 'white',\n  classNames,\n  attributes = {},\n  isAnimated = false,\n}: DirektCircleProps) => {\n  const componentClassName = 'ds-direkt-circle'\n  const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\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, animatedClassName].filter(Boolean).join(' ')\n\n  return (\n    <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\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", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { DirektCircle } from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.tsx'\nexport interface DirektHeaderProps {\n  title: string\n  subtitle?: string\n  preTitle?: string\n  isAnimated?: boolean\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/direkt-header)\n * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--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/direkt-header/direkt-header.scss'`\n */\nexport const DirektHeader = ({\n  classNames,\n  attributes = {},\n  title,\n  subtitle,\n  preTitle = 'Direkt',\n  isAnimated = true,\n}: DirektHeaderProps) => {\n  const componentClassName = 'ds-direkt-header'\n  const classes = formatClassString([componentClassName, classNames])\n\n  return (\n    <header className={classes} {...attributes}>\n      <p className={`${componentClassName}__pre-title`}>\n        <span className={`${componentClassName}__circle-wrapper`}>\n          <DirektCircle classNames={`${componentClassName}__circle`} isAnimated={isAnimated} />\n        </span>\n        {preTitle}\n      </p>\n      <h2 className={`${componentClassName}__title`}>{title}</h2>\n      {subtitle && <h3 className={`${componentClassName}__sub-title`}>{subtitle}</h3>}\n    </header>\n  )\n}\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC4BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,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,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;;;ACNM,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAbC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC9B;AAAA,oBAAAA,MAAC,OAAE,WAAW,GAAG,kBAAkB,eACjC;AAAA,sBAAAD,KAAC,UAAK,WAAW,GAAG,kBAAkB,oBACpC,0BAAAA,KAAC,gBAAa,YAAY,GAAG,kBAAkB,YAAY,YAAwB,GACrF;AAAA,MACC;AAAA,OACH;AAAA,IACA,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM;AAAA,IACrD,YAAY,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS;AAAA,KAC5E;AAEJ;",
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "interface DirektCircleProps {\n  /** Hex code or supported color name */\n  circleColor?: string\n  classNames?: string\n  isAnimated?: boolean\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 *  * 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/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n  circleColor = 'white',\n  classNames,\n  attributes = {},\n  isAnimated = false,\n}: DirektCircleProps) => {\n  const componentClassName = 'ds-direkt-circle'\n  const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\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, animatedClassName].filter(Boolean).join(' ')\n\n  return (\n    <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\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", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { DirektCircle } from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.tsx'\nexport interface DirektHeaderProps {\n  title: string\n  subtitle?: string\n  pretitle?: string\n  isAnimated?: boolean\n  renderAsH2?: boolean\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/direkt-header)\n * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--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/direkt-header/direkt-header.scss'`\n */\nexport const DirektHeader = ({\n  classNames,\n  attributes = {},\n  title,\n  subtitle,\n  pretitle = 'Direkt',\n  isAnimated = true,\n  renderAsH2 = false,\n}: DirektHeaderProps) => {\n  const componentClassName = 'ds-direkt-header'\n  const classes = formatClassString([componentClassName, classNames])\n\n  return (\n    <header className={classes} {...attributes}>\n      <p className={`${componentClassName}__pre-title`}>\n        <span className={`${componentClassName}__circle-wrapper`}>\n          <DirektCircle classNames={`${componentClassName}__circle`} isAnimated={isAnimated} />\n        </span>\n        {pretitle}\n      </p>\n      {renderAsH2 ? (\n        <h2 className={`${componentClassName}__title`}>{title}</h2>\n      ) : (\n        <h1 className={`${componentClassName}__title`}>{title}</h1>\n      )}\n      {subtitle &&\n        (renderAsH2 ? (\n          <h3 className={`${componentClassName}__sub-title`}>{subtitle}</h3>\n        ) : (\n          <h2 className={`${componentClassName}__sub-title`}>{subtitle}</h2>\n        ))}\n    </header>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC4BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,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,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;;;ACJM,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAdC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC9B;AAAA,oBAAAA,MAAC,OAAE,WAAW,GAAG,kBAAkB,eACjC;AAAA,sBAAAD,KAAC,UAAK,WAAW,GAAG,kBAAkB,oBACpC,0BAAAA,KAAC,gBAAa,YAAY,GAAG,kBAAkB,YAAY,YAAwB,GACrF;AAAA,MACC;AAAA,OACH;AAAA,IACC,aACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM,IAEtD,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM;AAAA,IAEvD,aACE,aACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS,IAE7D,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS;AAAA,KAEnE;AAEJ;",
   "names": ["jsx", "jsxs"]
 }