npm - @bonniernews/dn-design-system-web - Versions diffs - 32.7.6 → 32.7.8 - Mend

@bonniernews/dn-design-system-web 32.7.6 → 32.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/preact/components/spinner/spinner.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
-export interface SpinnerProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface SpinnerProps extends SharedProps {
     variant: 'brand' | 'secondary' | 'primary' | 'onBrand' | 'onBusiness' | 'staticBlack' | 'staticWhite';
     size?: 'large' | 'small' | 'xsmall';
     forcePx?: boolean;
-    classNames?: string;
-    attributes?: object;
 }
 /**
  * - GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)

package/preact/components/spinner/spinner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/spinner/spinner.tsx"],
-  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from '../../helpers/formatClassString'\n\nexport interface SpinnerProps {\n  variant: 'brand' | 'secondary' | 'primary' | 'onBrand' | 'onBusiness' | 'staticBlack' | 'staticWhite'\n  size?: 'large' | 'small' | 'xsmall'\n  forcePx?: boolean\n  classNames?: string\n  attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)\n * - Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--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/spinner/spinner.scss'`\n */\nexport const Spinner = ({ variant = 'primary', size = 'large', forcePx, classNames, attributes }: SpinnerProps) => {\n  const componentClassName = 'ds-spinner';\n\n  const classes = formatClassString([\n    `${componentClassName}`,\n    `${componentClassName}--${variant}`,\n    `${componentClassName}--${size}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  return (\n    <span className={classes} {...attributes}>\n      <span className={`${componentClassName}__inner`}></span>\n    </span>\n  )\n}\n\nexport default Spinner\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC4BM;AAbC,IAAM,UAAU,CAAC,EAAE,UAAU,WAAW,OAAO,SAAS,SAAS,YAAY,WAAW,MAAoB;AACjH,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC,GAAG,kBAAkB;AAAA,IACrB,GAAG,kBAAkB,KAAK,OAAO;AAAA,IACjC,GAAG,kBAAkB,KAAK,IAAI;AAAA,IAC9B,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACE,oBAAC,UAAK,WAAW,SAAU,GAAG,YAC5B,8BAAC,UAAK,WAAW,GAAG,kBAAkB,WAAW,GACnD;AAEJ;AAEA,IAAO,kBAAQ;",
+  "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 '../../helpers/formatClassString'\n\nexport interface SpinnerProps extends SharedProps {\n  variant: 'brand' | 'secondary' | 'primary' | 'onBrand' | 'onBusiness' | 'staticBlack' | 'staticWhite'\n  size?: 'large' | 'small' | 'xsmall'\n  forcePx?: boolean\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/spinner](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/spinner)\n * - Storybook: [Spinner](https://designsystem.dn.se/?path=/docs/basic-spinner--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/spinner/spinner.scss'`\n */\nexport const Spinner = ({ variant = 'primary', size = 'large', forcePx, classNames, attributes }: SpinnerProps) => {\n  const componentClassName = 'ds-spinner';\n\n  const classes = formatClassString([\n    `${componentClassName}`,\n    `${componentClassName}--${variant}`,\n    `${componentClassName}--${size}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  return (\n    <span className={classes} {...attributes}>\n      <span className={`${componentClassName}__inner`}></span>\n    </span>\n  )\n}\n\nexport default Spinner\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC2BM;AAbC,IAAM,UAAU,CAAC,EAAE,UAAU,WAAW,OAAO,SAAS,SAAS,YAAY,WAAW,MAAoB;AACjH,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC,GAAG,kBAAkB;AAAA,IACrB,GAAG,kBAAkB,KAAK,OAAO;AAAA,IACjC,GAAG,kBAAkB,KAAK,IAAI;AAAA,IAC9B,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACE,oBAAC,UAAK,WAAW,SAAU,GAAG,YAC5B,8BAAC,UAAK,WAAW,GAAG,kBAAkB,WAAW,GACnD;AAEJ;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/preact/components/switch/switch.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-interface SwitchProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+interface SwitchProps extends SharedProps {
     name: string;
     showMeta?: boolean;
     metaOn?: string;
@@ -8,9 +9,7 @@ interface SwitchProps {
     required?: boolean;
     disabled?: boolean;
     validation?: string;
-    classNames?: string;
     forcePx?: boolean;
-    attributes?: {};
 }
 export type SwitchInnerProps = Pick<SwitchProps, 'showMeta' | 'metaOn' | 'metaOff'> & {
     componentClassName?: string;

package/preact/components/switch/switch.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/switch/switch.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\ninterface SwitchProps {\n  name: string\n  showMeta?: boolean\n  metaOn?: string\n  metaOff?: string\n  stripLabel?: boolean\n  checked?: boolean\n  required?: boolean\n  disabled?: boolean\n  validation?: string\n  classNames?: string\n  forcePx?: boolean\n  attributes?: {}\n}\n\nexport type SwitchInnerProps = Pick<SwitchProps, 'showMeta' | 'metaOn' | 'metaOff'> & {\n  componentClassName?: string\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)\n * - Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-switch--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/switch/switch.scss`\n */\nexport const Switch = ({\n  name = 'ds-switch',\n  checked,\n  showMeta = false,\n  metaOn = 'P\u00E5',\n  metaOff = 'Av',\n  disabled,\n  stripLabel,\n  forcePx,\n  classNames,\n  attributes,\n}: SwitchProps) => {\n  const componentClassName = 'ds-switch'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n\n  return (\n    <div className={classes}>\n      <input\n        type='checkbox'\n        id={name}\n        name={name}\n        defaultChecked={checked}\n        disabled={disabled}\n        aria-label={name}\n        {...attributes}\n      />\n      {stripLabel ? (\n        <div className={`${componentClassName}__inner`}>\n          <SwitchInner\n            {...{\n              showMeta,\n              metaOn,\n              metaOff,\n              componentClassName,\n            }}\n          />\n        </div>\n      ) : (\n        <label className={`${componentClassName}__inner`} tabIndex={0} htmlFor={name}>\n          <SwitchInner\n            {...{\n              showMeta,\n              metaOn,\n              metaOff,\n              componentClassName,\n            }}\n          />\n        </label>\n      )}\n    </div>\n  )\n}\n\nconst SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }: SwitchInnerProps) => {\n  return (\n    <>\n      {showMeta && (\n        <div className={`${componentClassName}__meta`}>\n          <span className={`${componentClassName}__meta-on`}>{metaOn}</span>\n          <span className={`${componentClassName}__meta-off`}>{metaOff}</span>\n        </div>\n      )}\n      <span className={`${componentClassName}__box`}>\n        <span className={`${componentClassName}__knob`}></span>\n      </span>\n    </>\n  )\n}\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC0CI,SAuCA,UAtCE,KADF;AAhBG,IAAM,SAAS,CAAC;AAAA,EACrB,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAmB;AACjB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAE5F,SACE,qBAAC,SAAI,WAAW,SACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA,cAAY;AAAA,QACX,GAAG;AAAA;AAAA,IACN;AAAA,IACC,aACC,oBAAC,SAAI,WAAW,GAAG,kBAAkB,WACnC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF,GACF,IAEA,oBAAC,WAAM,WAAW,GAAG,kBAAkB,WAAW,UAAU,GAAG,SAAS,MACtE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;AAEA,IAAM,cAAc,CAAC,EAAE,UAAU,QAAQ,SAAS,mBAAmB,MAAwB;AAC3F,SACE,iCACG;AAAA,gBACC,qBAAC,SAAI,WAAW,GAAG,kBAAkB,UACnC;AAAA,0BAAC,UAAK,WAAW,GAAG,kBAAkB,aAAc,kBAAO;AAAA,MAC3D,oBAAC,UAAK,WAAW,GAAG,kBAAkB,cAAe,mBAAQ;AAAA,OAC/D;AAAA,IAEF,oBAAC,UAAK,WAAW,GAAG,kBAAkB,SACpC,8BAAC,UAAK,WAAW,GAAG,kBAAkB,UAAU,GAClD;AAAA,KACF;AAEJ;",
+  "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\ninterface SwitchProps extends SharedProps {\n  name: string\n  showMeta?: boolean\n  metaOn?: string\n  metaOff?: string\n  stripLabel?: boolean\n  checked?: boolean\n  required?: boolean\n  disabled?: boolean\n  validation?: string\n  forcePx?: boolean\n}\n\nexport type SwitchInnerProps = Pick<SwitchProps, 'showMeta' | 'metaOn' | 'metaOff'> & {\n  componentClassName?: string\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)\n * - Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-switch--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/switch/switch.scss`\n */\nexport const Switch = ({\n  name = 'ds-switch',\n  checked,\n  showMeta = false,\n  metaOn = 'P\u00E5',\n  metaOff = 'Av',\n  disabled,\n  stripLabel,\n  forcePx,\n  classNames,\n  attributes,\n}: SwitchProps) => {\n  const componentClassName = 'ds-switch'\n  const classes = formatClassString([componentClassName, forcePx && 'ds-force-px', classNames])\n\n  return (\n    <div className={classes}>\n      <input\n        type='checkbox'\n        id={name}\n        name={name}\n        defaultChecked={checked}\n        disabled={disabled}\n        aria-label={name}\n        {...attributes}\n      />\n      {stripLabel ? (\n        <div className={`${componentClassName}__inner`}>\n          <SwitchInner\n            {...{\n              showMeta,\n              metaOn,\n              metaOff,\n              componentClassName,\n            }}\n          />\n        </div>\n      ) : (\n        <label className={`${componentClassName}__inner`} tabIndex={0} htmlFor={name}>\n          <SwitchInner\n            {...{\n              showMeta,\n              metaOn,\n              metaOff,\n              componentClassName,\n            }}\n          />\n        </label>\n      )}\n    </div>\n  )\n}\n\nconst SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }: SwitchInnerProps) => {\n  return (\n    <>\n      {showMeta && (\n        <div className={`${componentClassName}__meta`}>\n          <span className={`${componentClassName}__meta-on`}>{metaOn}</span>\n          <span className={`${componentClassName}__meta-off`}>{metaOff}</span>\n        </div>\n      )}\n      <span className={`${componentClassName}__box`}>\n        <span className={`${componentClassName}__knob`}></span>\n      </span>\n    </>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACyCI,SAuCA,UAtCE,KADF;AAhBG,IAAM,SAAS,CAAC;AAAA,EACrB,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAmB;AACjB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,WAAW,eAAe,UAAU,CAAC;AAE5F,SACE,qBAAC,SAAI,WAAW,SACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA,cAAY;AAAA,QACX,GAAG;AAAA;AAAA,IACN;AAAA,IACC,aACC,oBAAC,SAAI,WAAW,GAAG,kBAAkB,WACnC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF,GACF,IAEA,oBAAC,WAAM,WAAW,GAAG,kBAAkB,WAAW,UAAU,GAAG,SAAS,MACtE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;AAEA,IAAM,cAAc,CAAC,EAAE,UAAU,QAAQ,SAAS,mBAAmB,MAAwB;AAC3F,SACE,iCACG;AAAA,gBACC,qBAAC,SAAI,WAAW,GAAG,kBAAkB,UACnC;AAAA,0BAAC,UAAK,WAAW,GAAG,kBAAkB,aAAc,kBAAO;AAAA,MAC3D,oBAAC,UAAK,WAAW,GAAG,kBAAkB,cAAe,mBAAQ;AAAA,OAC/D;AAAA,IAEF,oBAAC,UAAK,WAAW,GAAG,kBAAkB,SACpC,8BAAC,UAAK,WAAW,GAAG,kBAAkB,UAAU,GAClD;AAAA,KACF;AAEJ;",
   "names": []
 }

package/preact/components/teaser-card/teaser-card.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
 import { ComponentChildren } from "preact";
-export interface TeaserCardsProps {
+export interface TeaserCardsProps extends SharedProps {
     areaType?: 'right' | 'bauta' | 'bautaxl';
     targetLink?: string;
     theme?: 'kultur' | 'nyheter';
-    classes?: string;
-    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
-    attributes?: object;
     children: ComponentChildren;
 }
 /**
@@ -15,4 +13,4 @@ export interface TeaserCardsProps {
  * 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/assets/teaser/teaser.scss'`
  */
-export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("preact").JSX.Element;
+export declare const TeaserCard: ({ areaType, targetLink, theme, classNames, attributes, children }: TeaserCardsProps) => import("preact").JSX.Element;

package/preact/components/teaser-card/teaser-card.js CHANGED Viewed

@@ -5,19 +5,19 @@ var formatClassString = (classesArray) => {
 // ../src/components/teaser-card/teaser-card.tsx
 import { jsx } from "preact/jsx-runtime";
-var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
   const componentClassName = "ds-teaser";
-  const classNames = formatClassString([
+  const classes = formatClassString([
     componentClassName,
     areaType && `${componentClassName}--${areaType}`,
     areaType == "bauta" && "ds-dark",
     `ds-theme--${theme}`,
-    classes
+    classNames
   ]);
   if (targetLink) {
-    return /* @__PURE__ */ jsx("a", { className: classNames, href: targetLink, ...attributes, children });
+    return /* @__PURE__ */ jsx("a", { className: classes, href: targetLink, ...attributes, children });
   }
-  return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
 };
 export {
   TeaserCard

package/preact/components/teaser-card/teaser-card.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.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"],
-  "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;",
+  "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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps extends SharedProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\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', classNames, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classes = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classNames,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classes} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classes}{...attributes}>\n      { children }\n    </div>\n  );\n};\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;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,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
-export interface TeaserCounterProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface TeaserCounterProps extends SharedProps {
     title: string;
     counterText: string;
     counterNumber: number;
@@ -6,9 +7,6 @@ export interface TeaserCounterProps {
     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)

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

@@ -5,19 +5,19 @@ var formatClassString = (classesArray) => {
 // ../src/components/teaser-card/teaser-card.tsx
 import { jsx } from "preact/jsx-runtime";
-var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
   const componentClassName = "ds-teaser";
-  const classNames = formatClassString([
+  const classes = formatClassString([
     componentClassName,
     areaType && `${componentClassName}--${areaType}`,
     areaType == "bauta" && "ds-dark",
     `ds-theme--${theme}`,
-    classes
+    classNames
   ]);
   if (targetLink) {
-    return /* @__PURE__ */ jsx("a", { className: classNames, href: targetLink, ...attributes, children });
+    return /* @__PURE__ */ jsx("a", { className: classes, href: targetLink, ...attributes, children });
   }
-  return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
 };
 // ../src/helpers/teaser.tsx
@@ -46,7 +46,7 @@ var TeaserCounter = ({
   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: [
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, classNames: classes, attributes }, children: [
     /* @__PURE__ */ jsxs(Content, { children: [
       title && /* @__PURE__ */ jsxs("h2", { className: `${componentClassName}__title`, children: [
         /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__title--highlighted`, children: title }),

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

@@ -1,7 +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;",
+  "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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps extends SharedProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\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', classNames, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classes = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classNames,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classes} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classes}{...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 type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { 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 extends SharedProps {\n  title: string\n  counterText: string\n  counterNumber: number\n  subtitle?: string\n  areaType?: 'right' | 'bauta'\n  targetLink?: string\n  mediaHtml?: string\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, classNames: 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;;;AC6BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;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,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;;;ACjCsB,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;;;ACsBU,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,YAAY,SAAS,WAAW,GACtE;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"]
 }

package/preact/components/teaser-onsite/teaser-onsite.d.ts CHANGED Viewed

@@ -1,10 +1,8 @@
-export interface TeaserOnSiteProps {
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+export interface TeaserOnSiteProps extends SharedProps {
     areaType?: 'right' | 'bauta' | 'bautaxl';
     targetLink?: string;
     theme?: 'kultur' | 'nyheter';
-    classNames?: string;
-    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
-    attributes?: object;
     mediaHtml?: string;
     title?: string;
     text?: string;

package/preact/components/teaser-onsite/teaser-onsite.js CHANGED Viewed

@@ -5,19 +5,19 @@ var formatClassString = (classesArray) => {
 // ../src/components/teaser-card/teaser-card.tsx
 import { jsx } from "preact/jsx-runtime";
-var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
   const componentClassName = "ds-teaser";
-  const classNames = formatClassString([
+  const classes = formatClassString([
     componentClassName,
     areaType && `${componentClassName}--${areaType}`,
     areaType == "bauta" && "ds-dark",
     `ds-theme--${theme}`,
-    classes
+    classNames
   ]);
   if (targetLink) {
-    return /* @__PURE__ */ jsx("a", { className: classNames, href: targetLink, ...attributes, children });
+    return /* @__PURE__ */ jsx("a", { className: classes, href: targetLink, ...attributes, children });
   }
-  return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
 };
 // ../src/helpers/teaser.tsx
@@ -43,7 +43,7 @@ var TeaserOnSite = ({ areaType, targetLink, theme = "nyheter", classNames, attri
     "ds-teaser--onsite",
     classNames
   ]);
-  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, theme, classes, attributes }, children: [
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, theme, classNames: classes, attributes }, children: [
     /* @__PURE__ */ jsx3(Media, { ...{ mediaHtml, rounded: true } }),
     /* @__PURE__ */ jsxs(Content, { children: [
       /* @__PURE__ */ jsx3(Title, { title: `P\xC5 PLATS | ${title}` }),

package/preact/components/teaser-onsite/teaser-onsite.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../helpers/teaser.tsx", "../../../components/teaser-onsite/teaser-onsite.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 { Body, Content, Media, Title } from \"@bonniernews/dn-design-system-web/helpers/teaser.tsx\";\nexport interface TeaserOnSiteProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  mediaHtml?: string;\n  title?: string;\n  text?: string;\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-onsite)\n * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--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-onsite/teaser-onsite.scss'`\n */\nexport const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {\n\n  const classes = formatClassString([\n    \"ds-teaser--onsite\",\n    classNames,\n  ])\n\n  return (\n    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>\n      <Media { ...{ mediaHtml, rounded: true }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\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;AAKO,IAAM,QAAQ,CAAC,EAAE,MAAM,MAAkB;AAC9C,SAAO,QAAS,gBAAAA,KAAC,QAAG,WAAU,oBAAoB,iBAAM,IAAU;AACpE;AAKO,IAAM,OAAO,CAAC,EAAE,KAAK,MAAiB;AAC3C,SAAO,OAAQ,gBAAAA,KAAC,OAAE,WAAU,mBAAmB,gBAAK,IAAS;AAC/D;;;ACEM,gBAAAC,MACA,YADA;AATC,IAAM,eAAe,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,WAAW,OAAO,KAAK,MAAyB;AAE9I,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,qBAAC,cAAa,GAAG,EAAE,UAAU,YAAY,OAAO,SAAS,WAAW,GAClE;AAAA,oBAAAA,KAAC,SAAQ,GAAG,EAAE,WAAW,SAAS,KAAK,GAAI;AAAA,IAC3C,qBAAC,WACC;AAAA,sBAAAA,KAAC,SAAM,OAAO,iBAAc,KAAK,IAAI;AAAA,MACrC,gBAAAA,KAAC,QAAO,GAAG,EAAE,KAAK,GAAG;AAAA,OACvB;AAAA,KACF;AAEJ;",
+  "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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps extends SharedProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\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', classNames, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classes = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classNames,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classes} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classes}{...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 type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { 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 { Body, Content, Media, Title } from \"@bonniernews/dn-design-system-web/helpers/teaser.tsx\";\n\nexport interface TeaserOnSiteProps extends SharedProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  mediaHtml?: string;\n  title?: string;\n  text?: string;\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-onsite)\n * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--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-onsite/teaser-onsite.scss'`\n */\nexport const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {\n\n  const classes = formatClassString([\n    \"ds-teaser--onsite\",\n    classNames,\n  ])\n\n  return (\n    <TeaserCard { ...{ areaType, targetLink, theme, classNames: classes, attributes }}>\n      <Media { ...{ mediaHtml, rounded: true }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;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,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;;;ACjCsB,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;AAKO,IAAM,QAAQ,CAAC,EAAE,MAAM,MAAkB;AAC9C,SAAO,QAAS,gBAAAA,KAAC,QAAG,WAAU,oBAAoB,iBAAM,IAAU;AACpE;AAKO,IAAM,OAAO,CAAC,EAAE,KAAK,MAAiB;AAC3C,SAAO,OAAQ,gBAAAA,KAAC,OAAE,WAAU,mBAAmB,gBAAK,IAAS;AAC/D;;;ACCM,gBAAAC,MACA,YADA;AATC,IAAM,eAAe,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,WAAW,OAAO,KAAK,MAAyB;AAE9I,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,qBAAC,cAAa,GAAG,EAAE,UAAU,YAAY,OAAO,YAAY,SAAS,WAAW,GAC9E;AAAA,oBAAAA,KAAC,SAAQ,GAAG,EAAE,WAAW,SAAS,KAAK,GAAI;AAAA,IAC3C,qBAAC,WACC;AAAA,sBAAAA,KAAC,SAAM,OAAO,iBAAc,KAAK,IAAI;AAAA,MACrC,gBAAAA,KAAC,QAAO,GAAG,EAAE,KAAK,GAAG;AAAA,OACvB;AAAA,KACF;AAEJ;",
   "names": ["jsx", "jsx"]
 }