@bonniernews/dn-design-system-web 21.1.0-beta.5 → 21.1.0

package/foundations/variables/colorsDnLightTokens.scss

@@ -1,86 +1,82 @@
 $ds-hex-text-primary: #050505;
 $ds-hex-text-primary-02: #666666;
 $ds-hex-text-secondary: #ffffff;
-$ds-hex-text-critical: #da000d;
+$ds-hex-text-critical: #DA000D;
 $ds-hex-text-disabled: #666666;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-on-business: #ffffff;
 $ds-hex-text-on-critical: #ffffff;
 $ds-hex-text-on-success: #ffffff;
-$ds-hex-text-brand: #da000d;
-$ds-hex-text-body-link: #4373ce;
-$ds-hex-text-body-link-visited: #4373ce;
-$ds-hex-text-positive: #3a8352;
-$ds-hex-text-culture: #227ac3;
+$ds-hex-text-brand: #DA000D;
+$ds-hex-text-body-link: #4373CE;
+$ds-hex-text-body-link-visited: #4373CE;
+$ds-hex-text-positive: #3A8352;
 $ds-hex-icon-primary: #050505;
 $ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
-$ds-hex-icon-critical: #da000d;
+$ds-hex-icon-critical: #DA000D;
 $ds-hex-icon-disabled: #666666;
 $ds-hex-icon-on-brand: #ffffff;
 $ds-hex-icon-on-business: #ffffff;
-$ds-hex-icon-brand: #da000d;
+$ds-hex-icon-brand: #DA000D;
 $ds-hex-icon-on-critical: #ffffff;
 $ds-hex-icon-on-success: #ffffff;
-$ds-hex-icon-culture: #227ac3;
-$ds-hex-component-brand: #da000d;
-$ds-hex-component-business: #3a8352;
+$ds-hex-component-brand: #DA000D;
+$ds-hex-component-business: #3A8352;
 $ds-hex-component-primary: #141414;
-$ds-hex-component-primary-overlay: rgba(8, 8, 8, 0.13);
-$ds-hex-component-primary-overlay-02: rgba(8, 8, 8, 0.2);
+$ds-hex-component-primary-overlay: #08080821;
+$ds-hex-component-primary-overlay-02: #08080833;
 $ds-hex-component-secondary: #ffffff;
-$ds-hex-component-secondary-overlay: rgba(255, 255, 255, 0.13);
-$ds-hex-component-secondary-overlay-02: rgba(255, 255, 255, 0.2);
-$ds-hex-component-critical: #ea3e3f;
-$ds-hex-component-critical-overlay: #a51d24;
+$ds-hex-component-secondary-overlay: #ffffff21;
+$ds-hex-component-secondary-overlay-02: #ffffff33;
+$ds-hex-component-critical: #EA3E3F;
+$ds-hex-component-critical-overlay: #A51D24;
 $ds-hex-component-static-white: #ffffff;
-$ds-hex-component-positive: #3a8352;
-$ds-hex-component-primary-02: #cfcfcf;
-$ds-hex-surface-below: #f2f2f2;
-$ds-hex-surface-native-article: #ededed;
+$ds-hex-component-positive: #3A8352;
+$ds-hex-component-primary-02: #CFCFCF;
+$ds-hex-surface-below: #EDEDED;
+$ds-hex-surface-native-article: #EDEDED;
 $ds-hex-surface-background: #ffffff;
-$ds-hex-surface-raised: #ededed;
+$ds-hex-surface-raised: #EDEDED;
 $ds-hex-surface-elevated: #ffffff;
-$ds-hex-surface-overlay: rgba(5, 5, 5, 0.5);
-$ds-hex-surface-quiz: #ea3e3f;
-$ds-hex-surface-korsord: #8bb6e8;
-$ds-hex-surface-sudoko: #90d0bd;
-$ds-hex-surface-brand: #da000d;
+$ds-hex-surface-overlay: #05050580;
+$ds-hex-surface-quiz: #EA3E3F;
+$ds-hex-surface-korsord: #8BB6E8;
+$ds-hex-surface-sudoko: #90D0BD;
+$ds-hex-surface-brand: #DA000D;
 $ds-hex-surface-inverted: #141414;
-$ds-hex-surface-breaking: #300407;
-$ds-hex-border-primary: rgba(5, 5, 5, 0.13);
-$ds-hex-border-primary-02: rgba(8, 8, 8, 0.4);
+$ds-hex-border-primary: #08080821;
+$ds-hex-border-primary-02: #08080866;
 $ds-hex-border-primary-03: #050505;
 $ds-hex-border-secondary: #ffffff;
-$ds-hex-border-business: #3a8352;
-$ds-hex-border-critical: #da000d;
-$ds-hex-border-focus: #da000d;
+$ds-hex-border-business: #3A8352;
+$ds-hex-border-critical: #DA000D;
+$ds-hex-border-focus: #DA000D;
 $ds-hex-border-focus-02: #141414;
-$ds-hex-border-focus-03: #da000d;
-$ds-hex-border-focus-04: #3a8352;
-$ds-hex-border-brand: #da000d;
-$ds-hex-border-culture: #227ac3;
+$ds-hex-border-focus-03: #DA000D;
+$ds-hex-border-focus-04: #3A8352;
+$ds-hex-border-brand: #DA000D;
 $ds-hex-background-primary: #ffffff;
-$ds-hex-static-red-100: #fad4d4;
+$ds-hex-static-red-100: #FAD4D4;
 $ds-hex-static-black: #141414;
-$ds-hex-static-transparent-black: rgba(20, 20, 20, 0.6);
+$ds-hex-static-transparent-black: #14141499;
 $ds-hex-static-white: #ffffff;
-$ds-hex-static-transparent-white: rgba(255, 255, 255, 0.5);
-$ds-hex-static-green-100: #cee4d6;
-$ds-hex-static-red-300: #ef7171;
-$ds-hex-static-transparent-white-10: rgba(255, 255, 255, 0.13);
-$ds-hex-static-kultur: #568cbb;
-$ds-hex-static-economy: #60bca1;
-$ds-hex-static-sport: #f58d2d;
-$ds-hex-static-neutral-200: #e0e0e0;
-$ds-hex-static-sthlm: #ff589b;
-$ds-hex-static-ad-yellow: #ffeac2;
-$ds-hex-static-neutral-100: #ededed;
-$ds-hex-static-neutral-500: #9e9e9e;
-$ds-hex-static-red-500: #da000d;
-$ds-hex-static-yellow: #ffe600;
-$ds-hex-static-red-200: #f6acad;
-$ds-hex-static-red-0: #fce8e8;
+$ds-hex-static-transparent-white: #ffffff80;
+$ds-hex-static-green-100: #CEE4D6;
+$ds-hex-static-red-300: #EF7171;
+$ds-hex-static-transparent-white-10: #ffffff21;
+$ds-hex-static-kultur: #568CBB;
+$ds-hex-static-economy: #60BCA1;
+$ds-hex-static-sport: #F58D2D;
+$ds-hex-static-neutral-200: #E0E0E0;
+$ds-hex-static-sthlm: #FF589B;
+$ds-hex-static-ad-yellow: #FFEAC2;
+$ds-hex-static-neutral-100: #EDEDED;
+$ds-hex-static-neutral-500: #9E9E9E;
+$ds-hex-static-red-500: #DA000D;
+$ds-hex-static-yellow: #FFE600;
+$ds-hex-static-red-200: #F6ACAD;
+$ds-hex-static-red-0: #FCE8E8;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/metrics.scss

@@ -1,8 +1,7 @@
 $metrics: (
   border-radius: (
     x1: 2,
-    x2: 4,
-    lg: 8
+    x2: 4
   ),
   border-width: (
     x1: 1,

package/foundations/variables/typographyFontWeight.scss

@@ -2,4 +2,3 @@ $ds-fontweight-regular: Regular;
 $ds-fontweight-medium: Medium;
 $ds-fontweight-semibold: SemiBold;
 $ds-fontweight-bold: Bold;
-$ds-fontweight-extrabold: ExtraBold;

package/foundations/variables/typographyTokensList.scss

@@ -15,7 +15,6 @@ $ds-typography-detaildirekt-header: 'detaildirekt-header';
 $ds-typography-detailteaser-standard-compact: 'detailteaser-standard-compact';
 $ds-typography-detailteaser-standard-compact-opinion: 'detailteaser-standard-compact-opinion';
 $ds-typography-detailteaser-large: 'detailteaser-large';
-$ds-typography-detailteaser-breaking: 'detailteaser-breaking';
 $ds-typography-detailteaser-large-opinion: 'detailteaser-large-opinion';
 $ds-typography-detailteaser-large-storRubrik: 'detailteaser-large-storRubrik';
 $ds-typography-detailteaser-standard: 'detailteaser-standard';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -54,22 +54,15 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 48,
-    letterSpacing: 0
-  ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 64,
+    fontSize: 56,
     letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 28
+    fontWeight: Bold
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
@@ -81,7 +74,7 @@ $typographyTokensScreenExtraLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 36,
+    fontSize: 40,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -93,13 +93,6 @@ $typographyTokensScreenLarge: (
     fontSize: 40,
     letterSpacing: 0
   ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 64,
-    letterSpacing: 0
-  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
@@ -117,10 +110,10 @@ $typographyTokensScreenLarge: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 26,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 28
+    fontWeight: Bold
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -140,7 +133,7 @@ $typographyTokensScreenLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 32,
+    fontSize: 40,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -122,13 +122,6 @@ $typographyTokensScreenSmall: (
     fontSize: 26,
     letterSpacing: 0
   ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 36,
-    letterSpacing: 0
-  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
@@ -146,10 +139,10 @@ $typographyTokensScreenSmall: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 20,
     lineHeight: 1.2,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 20
+    fontWeight: Bold
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -163,14 +156,14 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 1.2,
-    fontSize: 18,
+    fontSize: 17,
     letterSpacing: 0
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    fontSize: 20,
-    lineHeight: 1.2,
+    fontSize: 26,
+    lineHeight: 1.1,
     letterSpacing: 0
   ),
   detailteaser-large-compact-opinion: (
@@ -212,7 +205,7 @@ $typographyTokensScreenSmall: (
   detailteaser-tipsa: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    fontSize: 18,
+    fontSize: 17,
     lineHeight: 1.2,
     letterSpacing: 0
   ),

package/helpers/formatClassString.ts

@@ -0,0 +1,3 @@
+export const formatClassString = (classesArray: (string|undefined|false)[]): string => {
+  return classesArray.filter(x => !!x).join(' ');
+}

package/helpers/teaser.tsx

@@ -0,0 +1,30 @@
+interface MediaProps {
+  mediaHtml?: string;
+}
+
+export const Media = ({ mediaHtml }: MediaProps) => {
+  return mediaHtml && (<div className="ds-teaser__media" dangerouslySetInnerHTML={{ __html: mediaHtml }} />)
+}
+
+interface ContentProps {
+  children: any;
+}
+export const Content = ({ children }: ContentProps) => {
+  return (<div className="ds-teaser__content">
+    {children}
+  </div>)
+}
+
+interface TitleProps {
+  title?: string;
+}
+export const Title = ({ title }: TitleProps) => {
+  return title && (<h2 className="ds-teaser__title">{title}</h2>)
+}
+
+interface BodyProps {
+  text?: string;
+}
+export const Body = ({ text }: BodyProps) => {
+  return text && (<p className="ds-teaser__text">{text}</p>)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.0-beta.5",
+  "version": "21.1.0",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",
@@ -30,6 +30,7 @@
     "./assets/*.scss": "./assets/*.scss",
     "./components/*": "./components/*",
     "./njk-helpers/*": "./njk-helpers/*",
+    "./helpers/*": "./helpers/*",
     "./introduction/*.md": "./introduction/*.md",
     "./foundations/*": "./foundations/*",
     "./tokens/*.json": "./tokens/*.json",

package/preact/components/quote/quote.d.ts

@@ -2,6 +2,7 @@ export interface QuoteProps {
     bodyHtml: string;
     theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
     classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;
     forcePx?: boolean;
 }

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

@@ -0,0 +1,10 @@
+export interface TeaserCardsProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classes?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    children: any;
+}
+export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("preact").JSX.Element;

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

@@ -0,0 +1,12 @@
+export interface TeaserOnSiteProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    mediaHtml?: string;
+    title?: string;
+    text?: string;
+}
+export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("preact").JSX.Element;

package/preact/components.cjs

@@ -26,27 +26,29 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 var import_jsx_runtime = require("preact/jsx-runtime");
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 var import_jsx_runtime2 = require("preact/jsx-runtime");
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
 };
 
@@ -54,12 +56,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 var import_jsx_runtime3 = require("preact/jsx-runtime");
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/preact/components.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../index.tsx", "../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 interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\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;;;ACgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACL6C,IAAAA,sBAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACKI,IAAAC,sBAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "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\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\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\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;;;ACc6C;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;;;ACJ6C,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;;;ACQI,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"]
 }

package/preact/components.esm.js

@@ -1,24 +1,26 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 import { jsx } from "preact/jsx-runtime";
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 import { jsx as jsx2 } from "preact/jsx-runtime";
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
 };
 
@@ -26,12 +28,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 import { jsx as jsx3 } from "preact/jsx-runtime";
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/preact/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\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": ";AAgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACL6C,gBAAAA,YAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACKI,gBAAAC,YAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "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\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\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\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;;;ACc6C;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;;;ACJ6C,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;;;ACQI,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"]
 }

package/react/components/quote/quote.d.ts

@@ -2,6 +2,7 @@ export interface QuoteProps {
     bodyHtml: string;
     theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
     classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;
     forcePx?: boolean;
 }

package/react/components/teaser-card/teaser-card.d.ts

@@ -0,0 +1,10 @@
+export interface TeaserCardsProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classes?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    children: any;
+}
+export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("react/jsx-runtime").JSX.Element;

package/react/components/teaser-onsite/teaser-onsite.d.ts

@@ -0,0 +1,12 @@
+export interface TeaserOnSiteProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    mediaHtml?: string;
+    title?: string;
+    text?: string;
+}
+export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("react/jsx-runtime").JSX.Element;

package/react/components.cjs

@@ -26,27 +26,29 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
 };
 
@@ -54,12 +56,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };