@bonniernews/dn-design-system-web 21.1.5 → 21.1.6

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.5...@bonniernews/dn-design-system-web@21.1.6) (2024-11-19)
+
+
+### Maintenance
+
+* **web:** fix jsx error with tsx components ([#1506](https://github.com/BonnierNews/dn-design-system/issues/1506)) ([ad3bf54](https://github.com/BonnierNews/dn-design-system/commit/ad3bf54aabb0f7239c1406e55946adfcf6245aa5))
+
 ## [21.1.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.4...@bonniernews/dn-design-system-web@21.1.5) (2024-11-15)
 
 

package/helpers/teaser.tsx

@@ -3,7 +3,7 @@ interface MediaProps {
 }
 
 export const Media = ({ mediaHtml }: MediaProps) => {
-  return mediaHtml && (<div className="ds-teaser__media" dangerouslySetInnerHTML={{ __html: mediaHtml }} />)
+  return mediaHtml ? (<div className="ds-teaser__media" dangerouslySetInnerHTML={{ __html: mediaHtml }} />) : (null)
 }
 
 interface ContentProps {
@@ -19,12 +19,12 @@ interface TitleProps {
   title?: string;
 }
 export const Title = ({ title }: TitleProps) => {
-  return title && (<h2 className="ds-teaser__title">{title}</h2>)
+  return title ? (<h2 className="ds-teaser__title">{title}</h2>) : (null)
 }
 
 interface BodyProps {
   text?: string;
 }
 export const Body = ({ text }: BodyProps) => {
-  return text && (<p className="ds-teaser__text">{text}</p>)
+  return text ? (<p className="ds-teaser__text">{text}</p>) : (null)
 }

package/index.tsx

@@ -6,3 +6,9 @@ export { ThematicBreak };
 
 import { Quote } from "./components/quote/quote";
 export { Quote };
+
+import { TeaserCard } from "./components/teaser-card/teaser-card";
+export { TeaserCard };
+
+import { TeaserOnSite } from "./components/teaser-onsite/teaser-onsite";
+export { TeaserOnSite };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.5",
+  "version": "21.1.6",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",

package/preact/components.cjs

@@ -22,6 +22,8 @@ var src_exports = {};
 __export(src_exports, {
   Divider: () => Divider,
   Quote: () => Quote,
+  TeaserCard: () => TeaserCard,
+  TeaserOnSite: () => TeaserOnSite,
   ThematicBreak: () => ThematicBreak
 });
 module.exports = __toCommonJS(src_exports);
@@ -65,4 +67,52 @@ var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) =
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };
+
+// ../src/components/teaser-card/teaser-card.tsx
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+var import_jsx_runtime5 = require("preact/jsx-runtime");
+var Media = ({ mediaHtml }) => {
+  return mediaHtml ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ds-teaser__media", dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ds-teaser__content", children });
+};
+var Title = ({ title }) => {
+  return title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "ds-teaser__title", children: title }) : null;
+};
+var Body = ({ text }) => {
+  return text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "ds-teaser__text", children: text }) : null;
+};
+
+// ../src/components/teaser-onsite/teaser-onsite.tsx
+var import_jsx_runtime6 = require("preact/jsx-runtime");
+var TeaserOnSite = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, mediaHtml, title, text }) => {
+  const classes = formatClassString([
+    "ds-teaser--onsite",
+    classNames
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(TeaserCard, { ...{ areaType, targetLink, theme, classes, attributes }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Media, { ...{ mediaHtml } }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { title: `P\xC5 PLATS | ${title}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Body, { ...{ text } })
+    ] })
+  ] });
+};
 //# sourceMappingURL=components.cjs.map

package/preact/components.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACH6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACOI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
-  "names": ["import_jsx_runtime", "import_jsx_runtime"]
+  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx", "../components/teaser-card/teaser-card.tsx", "../helpers/teaser.tsx", "../components/teaser-onsite/teaser-onsite.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n\nimport { TeaserCard } from \"./components/teaser-card/teaser-card\";\nexport { TeaserCard };\n\nimport { TeaserOnSite } from \"./components/teaser-onsite/teaser-onsite\";\nexport { TeaserOnSite };\n", "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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\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}\n\nexport const Media = ({ mediaHtml }: MediaProps) => {\n  return mediaHtml ? (<div className=\"ds-teaser__media\" 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 }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime"]
 }

package/preact/components.esm.js

@@ -37,9 +37,59 @@ var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) =
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };
+
+// ../src/components/teaser-card/teaser-card.tsx
+import { jsx as jsx4 } from "preact/jsx-runtime";
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx4("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+import { jsx as jsx5 } from "preact/jsx-runtime";
+var Media = ({ mediaHtml }) => {
+  return mediaHtml ? /* @__PURE__ */ jsx5("div", { className: "ds-teaser__media", dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ jsx5("div", { className: "ds-teaser__content", children });
+};
+var Title = ({ title }) => {
+  return title ? /* @__PURE__ */ jsx5("h2", { className: "ds-teaser__title", children: title }) : null;
+};
+var Body = ({ text }) => {
+  return text ? /* @__PURE__ */ jsx5("p", { className: "ds-teaser__text", children: text }) : null;
+};
+
+// ../src/components/teaser-onsite/teaser-onsite.tsx
+import { jsx as jsx6, jsxs } from "preact/jsx-runtime";
+var TeaserOnSite = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, mediaHtml, title, text }) => {
+  const classes = formatClassString([
+    "ds-teaser--onsite",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, theme, classes, attributes }, children: [
+    /* @__PURE__ */ jsx6(Media, { ...{ mediaHtml } }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx6(Title, { title: `P\xC5 PLATS | ${title}` }),
+      /* @__PURE__ */ jsx6(Body, { ...{ text } })
+    ] })
+  ] });
+};
 export {
   Divider,
   Quote,
+  TeaserCard,
+  TeaserOnSite,
   ThematicBreak
 };
 //# sourceMappingURL=components.esm.js.map

package/preact/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACH6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACOI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
-  "names": ["jsx", "jsx"]
+  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx", "../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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\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}\n\nexport const Media = ({ mediaHtml }: MediaProps) => {\n  return mediaHtml ? (<div className=\"ds-teaser__media\" 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 }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsx", "jsx", "jsx", "jsx"]
 }

package/preact/index.d.ts

@@ -4,3 +4,7 @@ import { ThematicBreak } from "./components/thematic-break/thematic-break";
 export { ThematicBreak };
 import { Quote } from "./components/quote/quote";
 export { Quote };
+import { TeaserCard } from "./components/teaser-card/teaser-card";
+export { TeaserCard };
+import { TeaserOnSite } from "./components/teaser-onsite/teaser-onsite";
+export { TeaserOnSite };

package/react/components.cjs

@@ -22,6 +22,8 @@ var src_exports = {};
 __export(src_exports, {
   Divider: () => Divider,
   Quote: () => Quote,
+  TeaserCard: () => TeaserCard,
+  TeaserOnSite: () => TeaserOnSite,
   ThematicBreak: () => ThematicBreak
 });
 module.exports = __toCommonJS(src_exports);
@@ -65,4 +67,52 @@ var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) =
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };
+
+// ../src/components/teaser-card/teaser-card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Media = ({ mediaHtml }) => {
+  return mediaHtml ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ds-teaser__media", dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ds-teaser__content", children });
+};
+var Title = ({ title }) => {
+  return title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "ds-teaser__title", children: title }) : null;
+};
+var Body = ({ text }) => {
+  return text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "ds-teaser__text", children: text }) : null;
+};
+
+// ../src/components/teaser-onsite/teaser-onsite.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TeaserOnSite = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, mediaHtml, title, text }) => {
+  const classes = formatClassString([
+    "ds-teaser--onsite",
+    classNames
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(TeaserCard, { ...{ areaType, targetLink, theme, classes, attributes }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Media, { ...{ mediaHtml } }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { title: `P\xC5 PLATS | ${title}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Body, { ...{ text } })
+    ] })
+  ] });
+};
 //# sourceMappingURL=components.cjs.map

package/react/components.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACH6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACOI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
-  "names": ["import_jsx_runtime", "import_jsx_runtime"]
+  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx", "../components/teaser-card/teaser-card.tsx", "../helpers/teaser.tsx", "../components/teaser-onsite/teaser-onsite.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n\nimport { TeaserCard } from \"./components/teaser-card/teaser-card\";\nexport { TeaserCard };\n\nimport { TeaserOnSite } from \"./components/teaser-onsite/teaser-onsite\";\nexport { TeaserOnSite };\n", "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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\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}\n\nexport const Media = ({ mediaHtml }: MediaProps) => {\n  return mediaHtml ? (<div className=\"ds-teaser__media\" 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 }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime"]
 }

package/react/components.esm.js

@@ -37,9 +37,59 @@ var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) =
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };
+
+// ../src/components/teaser-card/teaser-card.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx4("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Media = ({ mediaHtml }) => {
+  return mediaHtml ? /* @__PURE__ */ jsx5("div", { className: "ds-teaser__media", dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ jsx5("div", { className: "ds-teaser__content", children });
+};
+var Title = ({ title }) => {
+  return title ? /* @__PURE__ */ jsx5("h2", { className: "ds-teaser__title", children: title }) : null;
+};
+var Body = ({ text }) => {
+  return text ? /* @__PURE__ */ jsx5("p", { className: "ds-teaser__text", children: text }) : null;
+};
+
+// ../src/components/teaser-onsite/teaser-onsite.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var TeaserOnSite = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, mediaHtml, title, text }) => {
+  const classes = formatClassString([
+    "ds-teaser--onsite",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, theme, classes, attributes }, children: [
+    /* @__PURE__ */ jsx6(Media, { ...{ mediaHtml } }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx6(Title, { title: `P\xC5 PLATS | ${title}` }),
+      /* @__PURE__ */ jsx6(Body, { ...{ text } })
+    ] })
+  ] });
+};
 export {
   Divider,
   Quote,
+  TeaserCard,
+  TeaserOnSite,
   ThematicBreak
 };
 //# sourceMappingURL=components.esm.js.map

package/react/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACH6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACOI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
-  "names": ["jsx", "jsx"]
+  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx", "../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 DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\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}\n\nexport const Media = ({ mediaHtml }: MediaProps) => {\n  return mediaHtml ? (<div className=\"ds-teaser__media\" 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 }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsx", "jsx", "jsx", "jsx"]
 }

package/react/index.d.ts

@@ -4,3 +4,7 @@ import { ThematicBreak } from "./components/thematic-break/thematic-break";
 export { ThematicBreak };
 import { Quote } from "./components/quote/quote";
 export { Quote };
+import { TeaserCard } from "./components/teaser-card/teaser-card";
+export { TeaserCard };
+import { TeaserOnSite } from "./components/teaser-onsite/teaser-onsite";
+export { TeaserOnSite };