@bonniernews/dn-design-system-web 20.5.4 → 20.6.1

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [20.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.6.1) (2024-10-16)
+
+
+### Maintenance
+
+* move to figma variables ([#1419](https://github.com/BonnierNews/dn-design-system/issues/1419)) ([96eaa70](https://github.com/BonnierNews/dn-design-system/commit/96eaa701b712e66a0597b2524ae31db34eea6294))
+* prerelease packages ([c2ddd94](https://github.com/BonnierNews/dn-design-system/commit/c2ddd9434e69a243959a1a510394cdacd791ef21))
+* **web:** running multiple screenshots via test_ids ([#1426](https://github.com/BonnierNews/dn-design-system/issues/1426)) ([996e498](https://github.com/BonnierNews/dn-design-system/commit/996e49813c9a1124cad803760437fba4420cbce7))
+
+## [20.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.4...@bonniernews/dn-design-system-web@20.6.0) (2024-10-09)
+
+
+### Features
+
+* **web:** tsx components ([#1409](https://github.com/BonnierNews/dn-design-system/issues/1409)) ([27b6098](https://github.com/BonnierNews/dn-design-system/commit/27b6098b6cc2ae3ee8302f7b7f2bb598e687bcc6))
+
+## [20.5.1-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.1-beta.1...@bonniernews/dn-design-system-web@20.5.1-beta.2) (2024-10-02)
+
+## [20.5.1-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.1-beta.0...@bonniernews/dn-design-system-web@20.5.1-beta.1) (2024-10-02)
+
+## [20.5.1-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.0...@bonniernews/dn-design-system-web@20.5.1-beta.0) (2024-10-02)
+
 ## [20.5.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.3...@bonniernews/dn-design-system-web@20.5.4) (2024-10-09)
 
 

package/components/divider/divider.tsx

@@ -0,0 +1,21 @@
+export interface DividerProps {
+  variant?: 'soft' | 'medium' | 'hard';
+  classNames?: string;
+  attributes?: object;
+}
+
+export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
+  const componentClassName = 'ds-divider';
+  const classNamePrefix = `${componentClassName}--`;
+  const classes = [
+    componentClassName,
+    `${classNamePrefix}${variant}`,
+    classNames
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} {...attributes}><hr /></div>
+  );
+};
+
+export default Divider;

package/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button';
+import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button.js';
 
 export {
   dsListItem,

package/components/quote/quote.tsx

@@ -0,0 +1,23 @@
+export interface QuoteProps {
+  bodyHtml: string;
+  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+  classNames?: string;
+  attributes?: object;
+  forcePx?: boolean;
+}
+
+export const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {
+  const componentClassName = 'ds-quote';
+  const classes = [
+    componentClassName,
+    `ds-theme--${theme}`,
+    forcePx && 'ds-force-px',
+    classNames
+  ].filter(Boolean).join(' ');
+
+  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`
+
+  return (
+    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />
+  );
+};

package/components/teaser-image/teaser-image.scss

@@ -7,15 +7,13 @@
   margin: 0;
 
   .ds-teaser-image__byline {
+    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     position: absolute;
     bottom: 0;
     right: 0;
     padding: ds-spacing(0 $ds-s-025);
     margin-left: ds-spacing($ds-s-050);
-
-    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     color: $ds-color-static-white;
-
     background-color: $ds-color-static-transparent-black;
     z-index: 5;
   }

package/components/thematic-break/thematic-break.tsx

@@ -0,0 +1,18 @@
+export interface ThematicBreakProps {
+  classNames?: string;
+  attributes?: object;
+}
+
+export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
+  const componentClassName = 'ds-thematic-break';
+  const classes = [
+    componentClassName,
+    classNames
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} {...attributes}><hr /></div>
+  );
+};
+
+export default ThematicBreak;

package/index.tsx

@@ -0,0 +1,8 @@
+import { Divider } from "./components/divider/divider";
+export { Divider };
+
+import { ThematicBreak } from "./components/thematic-break/thematic-break";
+export { ThematicBreak };
+
+import { Quote } from "./components/quote/quote";
+export { Quote };

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "20.5.4",
+  "version": "20.6.1",
   "description": "DN design system for web.",
-  "main": "index.js",
+  "main": "index.tsx",
+  "type": "module",
+  "source": "index.tsx",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
   "repository": {
     "type": "git",
@@ -14,18 +16,62 @@
   "bugs": {
     "url": "https://github.com/BonnierNews/dn-design-system/issues"
   },
+  "exports": {
+    "./preact": {
+      "import": "./preact/components.esm.js",
+      "require": "./preact/components.cjs"
+    },
+    "./react": {
+      "import": "./react/components.esm.js",
+      "require": "./react/components.cjs"
+    },
+    "./assets/*.tsx": "./assets/*.tsx",
+    "./assets/*.njk": "./assets/*.njk",
+    "./assets/*.scss": "./assets/*.scss",
+    "./components/*.tsx": "./components/*.tsx",
+    "./components/*.njk": "./components/*.njk",
+    "./components/*.md": "./components/*.md",
+    "./components/*.js": "./components/*.js",
+    "./components/*.scss": "./components/*.scss",
+    "./components/*.css": "./components/*.css",
+    "./introduction/*.md": "./introduction/*.md",
+    "./foundations/*": "./foundations/*",
+    "./tokens/*.json": "./tokens/*.json",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "preact": "^10.24.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@bonniernews/tsconfig": "^0.0.2",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@release-it/conventional-changelog": "^8.0.1",
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "postcss": "8.4.31",
+    "preact": "^10.24.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-prettier": "^4.0.2",
     "stylelint-sass-render-errors": "^3.0.1",
-    "stylelint-selector-bem-pattern": "^2.1.1"
+    "stylelint-selector-bem-pattern": "^2.1.1",
+    "typescript": "^5.6.2"
   },
   "scripts": {
     "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\"",

package/preact/components/divider/divider.d.ts

@@ -0,0 +1,7 @@
+export interface DividerProps {
+    variant?: 'soft' | 'medium' | 'hard';
+    classNames?: string;
+    attributes?: object;
+}
+export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("preact").JSX.Element;
+export default Divider;

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

@@ -0,0 +1,8 @@
+export interface QuoteProps {
+    bodyHtml: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classNames?: string;
+    attributes?: object;
+    forcePx?: boolean;
+}
+export declare const Quote: ({ bodyHtml, theme, classNames, attributes, forcePx }: QuoteProps) => import("preact").JSX.Element;

package/preact/components/thematic-break/thematic-break.d.ts

@@ -0,0 +1,6 @@
+export interface ThematicBreakProps {
+    classNames?: string;
+    attributes?: object;
+}
+export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("preact").JSX.Element;
+export default ThematicBreak;

package/preact/components.cjs

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Divider: () => Divider,
+  Quote: () => Quote,
+  ThematicBreak: () => ThematicBreak
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
+};
+
+// ../src/components/quote/quote.tsx
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
+  const componentClassName = "ds-quote";
+  const classes = [
+    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 });
+};
+//# sourceMappingURL=components.cjs.map

package/preact/components.cjs.map

@@ -0,0 +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;",
+  "names": ["import_jsx_runtime", "import_jsx_runtime"]
+}

package/preact/components.esm.js

@@ -0,0 +1,43 @@
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
+};
+
+// ../src/components/quote/quote.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
+  const componentClassName = "ds-quote";
+  const classes = [
+    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 });
+};
+export {
+  Divider,
+  Quote,
+  ThematicBreak
+};
+//# sourceMappingURL=components.esm.js.map

package/preact/components.esm.js.map

@@ -0,0 +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;",
+  "names": ["jsx", "jsx"]
+}

package/preact/index.d.ts

@@ -0,0 +1,6 @@
+import { Divider } from "./components/divider/divider";
+export { Divider };
+import { ThematicBreak } from "./components/thematic-break/thematic-break";
+export { ThematicBreak };
+import { Quote } from "./components/quote/quote";
+export { Quote };

package/react/components/divider/divider.d.ts

@@ -0,0 +1,7 @@
+export interface DividerProps {
+    variant?: 'soft' | 'medium' | 'hard';
+    classNames?: string;
+    attributes?: object;
+}
+export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

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

@@ -0,0 +1,8 @@
+export interface QuoteProps {
+    bodyHtml: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classNames?: string;
+    attributes?: object;
+    forcePx?: boolean;
+}
+export declare const Quote: ({ bodyHtml, theme, classNames, attributes, forcePx }: QuoteProps) => import("react/jsx-runtime").JSX.Element;

package/react/components/thematic-break/thematic-break.d.ts

@@ -0,0 +1,6 @@
+export interface ThematicBreakProps {
+    classNames?: string;
+    attributes?: object;
+}
+export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("react/jsx-runtime").JSX.Element;
+export default ThematicBreak;

package/react/components.cjs

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Divider: () => Divider,
+  Quote: () => Quote,
+  ThematicBreak: () => ThematicBreak
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
+};
+
+// ../src/components/quote/quote.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
+  const componentClassName = "ds-quote";
+  const classes = [
+    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 });
+};
+//# sourceMappingURL=components.cjs.map

package/react/components.cjs.map

@@ -0,0 +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;",
+  "names": ["import_jsx_runtime", "import_jsx_runtime"]
+}

package/react/components.esm.js

@@ -0,0 +1,43 @@
+// ../src/components/divider/divider.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = ({ variant = "soft", classNames, attributes }) => {
+  const componentClassName = "ds-divider";
+  const classNamePrefix = `${componentClassName}--`;
+  const classes = [
+    componentClassName,
+    `${classNamePrefix}${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 "react/jsx-runtime";
+var ThematicBreak = ({ classNames, attributes }) => {
+  const componentClassName = "ds-thematic-break";
+  const classes = [
+    componentClassName,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
+};
+
+// ../src/components/quote/quote.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
+  const componentClassName = "ds-quote";
+  const classes = [
+    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 });
+};
+export {
+  Divider,
+  Quote,
+  ThematicBreak
+};
+//# sourceMappingURL=components.esm.js.map

package/react/components.esm.js.map

@@ -0,0 +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;",
+  "names": ["jsx", "jsx"]
+}

package/react/index.d.ts

@@ -0,0 +1,6 @@
+import { Divider } from "./components/divider/divider";
+export { Divider };
+import { ThematicBreak } from "./components/thematic-break/thematic-break";
+export { ThematicBreak };
+import { Quote } from "./components/quote/quote";
+export { Quote };

package/tsconfig-preact.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+    "jsxImportSource": "preact",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./preact",
+  },
+}

package/tsconfig-react.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./react",
+  },
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@bonniernews/tsconfig",
+  "include": ["index.tsx", "components/**/*.tsx"] ,
+  "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "sourceMap": true,
+    "skipLibCheck": false,
+    "rootDir": "./",
+    "allowUmdGlobalAccess": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+  },
+  "lib": [
+    "ES2022"
+  ]
+}

package/variables/colors-css-variables.json

@@ -0,0 +1,92 @@
+{
+  "surface-foreground": "var(--ds-color-surface-foreground)",
+  "surface-primary": "var(--ds-color-surface-primary)",
+  "surface-primary-raised": "var(--ds-color-surface-primary-raised)",
+  "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
+  "surface-primaryinvert": "var(--ds-color-surface-primaryinvert)",
+  "surface-primaryinvert-raised": "var(--ds-color-surface-primaryinvert-raised)",
+  "surface-primaryinvert-elevated": "var(--ds-color-surface-primaryinvert-elevated)",
+  "surface-brand": "var(--ds-color-surface-brand)",
+  "surface-breaking": "var(--ds-color-surface-breaking)",
+  "surface-overlay": "var(--ds-color-surface-overlay)",
+  "border-brand": "var(--ds-color-border-brand)",
+  "border-primary": "var(--ds-color-border-primary)",
+  "border-primary-strong": "var(--ds-color-border-primary-strong)",
+  "border-primary-strongest": "var(--ds-color-border-primary-strongest)",
+  "border-primaryinvert": "var(--ds-color-border-primaryinvert)",
+  "border-primaryinvert-strong": "var(--ds-color-border-primaryinvert-strong)",
+  "border-primaryinvert-strongest": "var(--ds-color-border-primaryinvert-strongest)",
+  "text-primary": "var(--ds-color-text-primary)",
+  "text-primary-subtle": "var(--ds-color-text-primary-subtle)",
+  "text-primary-disabled": "var(--ds-color-text-primary-disabled)",
+  "text-primaryinvert": "var(--ds-color-text-primaryinvert)",
+  "text-primaryinvert-subtle": "var(--ds-color-text-primaryinvert-subtle)",
+  "text-primaryinvert-disabled": "var(--ds-color-text-primaryinvert-disabled)",
+  "text-brand": "var(--ds-color-text-brand)",
+  "text-critical": "var(--ds-color-text-critical)",
+  "text-on-brand": "var(--ds-color-text-on-brand)",
+  "text-body-link": "var(--ds-color-text-body-link)",
+  "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
+  "brand-0": "var(--ds-color-brand-0)",
+  "brand-100": "var(--ds-color-brand-100)",
+  "brand-200": "var(--ds-color-brand-200)",
+  "brand-300": "var(--ds-color-brand-300)",
+  "brand-400": "var(--ds-color-brand-400)",
+  "brand-500": "var(--ds-color-brand-500)",
+  "brand-600": "var(--ds-color-brand-600)",
+  "brand-700": "var(--ds-color-brand-700)",
+  "brand-800": "var(--ds-color-brand-800)",
+  "brand-900": "var(--ds-color-brand-900)",
+  "brand-1000": "var(--ds-color-brand-1000)",
+  "brand-1100": "var(--ds-color-brand-1100)",
+  "culture-0": "var(--ds-color-culture-0)",
+  "culture-100": "var(--ds-color-culture-100)",
+  "culture-200": "var(--ds-color-culture-200)",
+  "culture-300": "var(--ds-color-culture-300)",
+  "culture-400": "var(--ds-color-culture-400)",
+  "culture-500": "var(--ds-color-culture-500)",
+  "culture-600": "var(--ds-color-culture-600)",
+  "culture-700": "var(--ds-color-culture-700)",
+  "culture-800": "var(--ds-color-culture-800)",
+  "culture-900": "var(--ds-color-culture-900)",
+  "culture-1000": "var(--ds-color-culture-1000)",
+  "culture-1100": "var(--ds-color-culture-1100)",
+  "sport-0": "var(--ds-color-sport-0)",
+  "sport-100": "var(--ds-color-sport-100)",
+  "sport-200": "var(--ds-color-sport-200)",
+  "sport-300": "var(--ds-color-sport-300)",
+  "sport-400": "var(--ds-color-sport-400)",
+  "sport-500": "var(--ds-color-sport-500)",
+  "sport-600": "var(--ds-color-sport-600)",
+  "sport-700": "var(--ds-color-sport-700)",
+  "sport-800": "var(--ds-color-sport-800)",
+  "sport-900": "var(--ds-color-sport-900)",
+  "sport-1000": "var(--ds-color-sport-1000)",
+  "sport-1100": "var(--ds-color-sport-1100)",
+  "bright-neutral-0": "var(--ds-color-bright-neutral-0)",
+  "bright-neutral-100": "var(--ds-color-bright-neutral-100)",
+  "bright-neutral-200": "var(--ds-color-bright-neutral-200)",
+  "bright-neutral-300": "var(--ds-color-bright-neutral-300)",
+  "bright-neutral-400": "var(--ds-color-bright-neutral-400)",
+  "bright-neutral-500": "var(--ds-color-bright-neutral-500)",
+  "bright-neutral-050": "var(--ds-color-bright-neutral-050)",
+  "bright-neutral-alpha-100": "var(--ds-color-bright-neutral-alpha-100)",
+  "bright-neutral-alpha-200": "var(--ds-color-bright-neutral-alpha-200)",
+  "bright-neutral-alpha-300": "var(--ds-color-bright-neutral-alpha-300)",
+  "bright-neutral-alpha-400": "var(--ds-color-bright-neutral-alpha-400)",
+  "bright-neutral-alpha-500": "var(--ds-color-bright-neutral-alpha-500)",
+  "bright-neutral-alpha-050": "var(--ds-color-bright-neutral-alpha-050)",
+  "dark-neutral-0": "var(--ds-color-dark-neutral-0)",
+  "dark-neutral-100": "var(--ds-color-dark-neutral-100)",
+  "dark-neutral-200": "var(--ds-color-dark-neutral-200)",
+  "dark-neutral-300": "var(--ds-color-dark-neutral-300)",
+  "dark-neutral-400": "var(--ds-color-dark-neutral-400)",
+  "dark-neutral-500": "var(--ds-color-dark-neutral-500)",
+  "dark-neutral-050": "var(--ds-color-dark-neutral-050)",
+  "dark-neutral-alpha-100": "var(--ds-color-dark-neutral-alpha-100)",
+  "dark-neutral-alpha-200": "var(--ds-color-dark-neutral-alpha-200)",
+  "dark-neutral-alpha-300": "var(--ds-color-dark-neutral-alpha-300)",
+  "dark-neutral-alpha-400": "var(--ds-color-dark-neutral-alpha-400)",
+  "dark-neutral-alpha-500": "var(--ds-color-dark-neutral-alpha-500)",
+  "dark-neutral-alpha-050": "var(--ds-color-dark-neutral-alpha-050)"
+}

package/variables/shadows-css-variables.json

@@ -0,0 +1,6 @@
+{
+  "elevation-xs": "--ds-shadow-elevation-xs",
+  "elevation-sm": "--ds-shadow-elevation-sm",
+  "elevation-md": "--ds-shadow-elevation-md",
+  "elevation-lg": "--ds-shadow-elevation-lg"
+}

package/variables/spacing-base-list.json

@@ -0,0 +1,15 @@
+{
+  "100": "100",
+  "125": "125",
+  "150": "150",
+  "200": "200",
+  "250": "250",
+  "300": "300",
+  "350": "350",
+  "400": "400",
+  "500": "500",
+  "012": "012",
+  "025": "025",
+  "050": "050",
+  "075": "075"
+}

package/variables/spacing-detail-list.json

@@ -0,0 +1,5 @@
+{
+  "sm": "sm",
+  "md": "md",
+  "lg": "lg"
+}