@bonniernews/dn-design-system-web 22.2.3 → 23.0.0

package/preact/components/switch/switch.js

@@ -0,0 +1,68 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/switch/switch.tsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var Switch = ({
+  name = "ds-switch",
+  checked,
+  showMeta = false,
+  metaOn = "P\xE5",
+  metaOff = "Av",
+  disabled,
+  stripLabel,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-switch";
+  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        id: name,
+        name,
+        defaultChecked: checked,
+        disabled,
+        ...attributes
+      }
+    ),
+    stripLabel ? /* @__PURE__ */ jsx("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx(
+      SwitchInner,
+      {
+        ...{
+          checked,
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx(
+      SwitchInner,
+      {
+        ...{
+          checked,
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) })
+  ] });
+};
+var SwitchInner = ({ showMeta, checked, metaOn, metaOff, componentClassName }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showMeta && /* @__PURE__ */ jsx("div", { className: `${componentClassName}__meta`, children: /* @__PURE__ */ jsx("span", { children: checked ? metaOn : metaOff }) }),
+    /* @__PURE__ */ jsx("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx("span", { className: `${componentClassName}__knob` }) })
+  ] });
+};
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +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, 'checked' | '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        {...attributes}\n      />\n      {stripLabel ? (\n        <div className={`${componentClassName}__inner`}>\n          <SwitchInner\n            {...{\n              checked,\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              checked,\n              showMeta,\n              metaOn,\n              metaOff,\n              componentClassName,\n            }}\n          />\n        </label>\n      )}\n    </div>\n  )\n}\n\nconst SwitchInner = ({ showMeta, checked, metaOn, metaOff, componentClassName }: SwitchInnerProps) => {\n  return (\n    <>\n      {showMeta && (\n        <div className={`${componentClassName}__meta`}>\n          <span>{checked ? metaOn : 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,SAwCA,UAvCE,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,QACC,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,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,UACA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;AAEA,IAAM,cAAc,CAAC,EAAE,UAAU,SAAS,QAAQ,SAAS,mBAAmB,MAAwB;AACpG,SACE,iCACG;AAAA,gBACC,oBAAC,SAAI,WAAW,GAAG,kBAAkB,UACnC,8BAAC,UAAM,oBAAU,SAAS,SAAQ,GACpC;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

@@ -1,3 +1,4 @@
+import { ComponentChildren } from "preact";
 export interface TeaserCardsProps {
     areaType?: 'right' | 'bauta' | 'bautaxl';
     targetLink?: string;
@@ -5,7 +6,7 @@ export interface TeaserCardsProps {
     classes?: string;
     /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;
-    children: any;
+    children: ComponentChildren;
 }
 /**
  * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)

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

@@ -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\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: any;\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;;;AC8BM;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 { 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' | 'sport' | 'ekonomi' | 'sthlm';\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;",
   "names": []
 }

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

@@ -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\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: any;\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", "interface 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: any;\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' | 'sport' | 'ekonomi' | 'sthlm';\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;;;AC8BM;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;;;ACpCsB,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;;;ACIM,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 { 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' | 'sport' | 'ekonomi' | 'sthlm';\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' | 'sport' | 'ekonomi' | 'sthlm';\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;",
   "names": ["jsx", "jsx"]
 }

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@bonniernews/tsconfig",
-  "include": ["components/**/*.tsx", "types-lib/**/*.ts", "index.d.ts"],
+  "include": ["components/**/*.tsx", "assets/**/*.tsx", "types-lib/**/*.ts", "index.d.ts"],
   "compilerOptions": {
     "moduleResolution": "Bundler",
     "allowJs": true,
@@ -16,6 +16,7 @@
       "types-lib/*.ts"
     ],
     "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "jsxFactory": "",
     "jsxFragmentFactory": "",
   },

package/variables/colors-css-variables.json

@@ -10,6 +10,7 @@
   "surface-culture": "var(--ds-color-surface-culture)",
   "surface-breaking": "var(--ds-color-surface-breaking)",
   "surface-overlay": "var(--ds-color-surface-overlay)",
+  "surface-native": "var(--ds-color-surface-native)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-strong": "var(--ds-color-border-primary-strong)",
   "border-primary-strongest": "var(--ds-color-border-primary-strongest)",