@bonniernews/dn-design-system-web 21.2.1-beta.0 → 22.0.1-beta.0

package/preact/components/thematic-break/thematic-break.js

@@ -0,0 +1,20 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/thematic-break/thematic-break.tsx
+import { jsx } from "preact/jsx-runtime";
+var ThematicBreak = ({ classNames, attributes }) => {
+  const classes = formatClassString([
+    "ds-thematic-break",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
+};
+var thematic_break_default = ThematicBreak;
+export {
+  ThematicBreak,
+  thematic_break_default as default
+};
+//# sourceMappingURL=thematic-break.js.map

package/preact/components/thematic-break/thematic-break.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/thematic-break/thematic-break.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 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"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACoB6C;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/preact/helpers/formatClassString.d.ts

@@ -0,0 +1 @@
+export declare const formatClassString: (classesArray: (string | undefined | false)[]) => string;

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@bonniernews/tsconfig",
-  "include": ["index.tsx", "components/**/*.tsx"] ,
+  "include": ["components/**/*.tsx", "types-lib/**/*.ts", "index.d.ts"],
   "compilerOptions": {
     "moduleResolution": "Bundler",
     "allowJs": true,
@@ -9,7 +9,8 @@
     "rootDir": "./",
     "allowUmdGlobalAccess": true,
     "typeRoots": [
-      "node_modules/@types"
+      "node_modules/@types",
+      "types-lib/*.ts"
     ],
     "jsx": "react-jsx",
     "jsxFactory": "",

package/types-lib/ds-color.d.ts

@@ -0,0 +1,105 @@
+export enum DsColorEnum {
+  "text-primary" = "text-primary",
+  "text-primary-02" = "text-primary-02",
+  "text-secondary" = "text-secondary",
+  "text-critical" = "text-critical",
+  "text-disabled" = "text-disabled",
+  "text-on-brand" = "text-on-brand",
+  "text-on-business" = "text-on-business",
+  "text-on-critical" = "text-on-critical",
+  "text-on-success" = "text-on-success",
+  "text-brand" = "text-brand",
+  "text-body-link" = "text-body-link",
+  "text-body-link-visited" = "text-body-link-visited",
+  "text-positive" = "text-positive",
+  "text-culture" = "text-culture",
+  "icon-primary" = "icon-primary",
+  "icon-primary-02" = "icon-primary-02",
+  "icon-secondary" = "icon-secondary",
+  "icon-critical" = "icon-critical",
+  "icon-disabled" = "icon-disabled",
+  "icon-on-brand" = "icon-on-brand",
+  "icon-on-business" = "icon-on-business",
+  "icon-brand" = "icon-brand",
+  "icon-on-critical" = "icon-on-critical",
+  "icon-on-success" = "icon-on-success",
+  "icon-culture" = "icon-culture",
+  "component-brand" = "component-brand",
+  "component-business" = "component-business",
+  "component-primary" = "component-primary",
+  "component-primary-overlay" = "component-primary-overlay",
+  "component-primary-overlay-02" = "component-primary-overlay-02",
+  "component-secondary" = "component-secondary",
+  "component-secondary-overlay" = "component-secondary-overlay",
+  "component-secondary-overlay-02" = "component-secondary-overlay-02",
+  "component-critical" = "component-critical",
+  "component-critical-overlay" = "component-critical-overlay",
+  "component-static-white" = "component-static-white",
+  "component-positive" = "component-positive",
+  "component-primary-02" = "component-primary-02",
+  "surface-below" = "surface-below",
+  "surface-native-article" = "surface-native-article",
+  "surface-background" = "surface-background",
+  "surface-raised" = "surface-raised",
+  "surface-elevated" = "surface-elevated",
+  "surface-overlay" = "surface-overlay",
+  "surface-quiz" = "surface-quiz",
+  "surface-korsord" = "surface-korsord",
+  "surface-sudoko" = "surface-sudoko",
+  "surface-brand" = "surface-brand",
+  "surface-inverted" = "surface-inverted",
+  "surface-breaking" = "surface-breaking",
+  "border-primary" = "border-primary",
+  "border-primary-02" = "border-primary-02",
+  "border-primary-03" = "border-primary-03",
+  "border-secondary" = "border-secondary",
+  "border-business" = "border-business",
+  "border-critical" = "border-critical",
+  "border-focus" = "border-focus",
+  "border-focus-02" = "border-focus-02",
+  "border-focus-03" = "border-focus-03",
+  "border-focus-04" = "border-focus-04",
+  "border-brand" = "border-brand",
+  "border-culture" = "border-culture",
+  "background-primary" = "background-primary",
+  "static-red-100" = "static-red-100",
+  "static-black" = "static-black",
+  "static-transparent-black" = "static-transparent-black",
+  "static-white" = "static-white",
+  "static-transparent-white" = "static-transparent-white",
+  "static-green-100" = "static-green-100",
+  "static-red-300" = "static-red-300",
+  "static-transparent-white-10" = "static-transparent-white-10",
+  "static-kultur" = "static-kultur",
+  "static-economy" = "static-economy",
+  "static-sport" = "static-sport",
+  "static-neutral-200" = "static-neutral-200",
+  "static-sthlm" = "static-sthlm",
+  "static-ad-yellow" = "static-ad-yellow",
+  "static-neutral-100" = "static-neutral-100",
+  "static-neutral-500" = "static-neutral-500",
+  "static-red-500" = "static-red-500",
+  "static-yellow" = "static-yellow",
+  "static-red-200" = "static-red-200",
+  "static-red-0" = "static-red-0",
+  "gradient-content-fade-left" = "gradient-content-fade-left",
+  "gradient-content-fade-right" = "gradient-content-fade-right",
+  "gradient-content-fade-up" = "gradient-content-fade-up",
+  "gradient-content-fade-down" = "gradient-content-fade-down"
+}
+export type DsColor = keyof typeof DsColorEnum;
+
+export enum DsColorIconEnum {
+  "icon-primary" = "icon-primary",
+  "icon-primary-02" = "icon-primary-02",
+  "icon-secondary" = "icon-secondary",
+  "icon-critical" = "icon-critical",
+  "icon-disabled" = "icon-disabled",
+  "icon-on-brand" = "icon-on-brand",
+  "icon-on-business" = "icon-on-business",
+  "icon-brand" = "icon-brand",
+  "icon-on-critical" = "icon-on-critical",
+  "icon-on-success" = "icon-on-success",
+  "icon-culture" = "icon-culture"
+}
+export type DsColorIcon = keyof typeof DsColorIconEnum;

package/types-lib/ds-icon.d.ts

@@ -0,0 +1,96 @@
+export enum DsIconEnum {
+  "add" = "add",
+  "arrow_back" = "arrow_back",
+  "arrow_forward" = "arrow_forward",
+  "arrow_outward" = "arrow_outward",
+  "arrow_upward" = "arrow_upward",
+  "bookmark-filled" = "bookmark-filled",
+  "bookmarked" = "bookmarked",
+  "campaign" = "campaign",
+  "cancel" = "cancel",
+  "celebration" = "celebration",
+  "check_box_outline_blank" = "check_box_outline_blank",
+  "check_box-filled" = "check_box-filled",
+  "check_circle" = "check_circle",
+  "check" = "check",
+  "chevron_down" = "chevron_down",
+  "chevron_left" = "chevron_left",
+  "chevron_right" = "chevron_right",
+  "close" = "close",
+  "comment" = "comment",
+  "delete" = "delete",
+  "download" = "download",
+  "edit" = "edit",
+  "expand_less" = "expand_less",
+  "expand_more" = "expand_more",
+  "facebook" = "facebook",
+  "favorite-filled" = "favorite-filled",
+  "favorite" = "favorite",
+  "feed" = "feed",
+  "feedback" = "feedback",
+  "filter_list" = "filter_list",
+  "filter_none" = "filter_none",
+  "format_size" = "format_size",
+  "forward_10" = "forward_10",
+  "forward_30" = "forward_30",
+  "grid_view" = "grid_view",
+  "headphones-filled" = "headphones-filled",
+  "headphones" = "headphones",
+  "history" = "history",
+  "home-filled" = "home-filled",
+  "home" = "home",
+  "info-filled" = "info-filled",
+  "info" = "info",
+  "instagram" = "instagram",
+  "integrity" = "integrity",
+  "ios_share" = "ios_share",
+  "link" = "link",
+  "lock" = "lock",
+  "login" = "login",
+  "logout" = "logout",
+  "mail" = "mail",
+  "manage_accounts-filled" = "manage_accounts-filled",
+  "manage_accounts" = "manage_accounts",
+  "mark_email_unread" = "mark_email_unread",
+  "memory" = "memory",
+  "menu-filled" = "menu-filled",
+  "menu" = "menu",
+  "mode_comment" = "mode_comment",
+  "more_horiz" = "more_horiz",
+  "mystery" = "mystery",
+  "newsmode" = "newsmode",
+  "notifications" = "notifications",
+  "pause" = "pause",
+  "person" = "person",
+  "play_arrow-filled" = "play_arrow-filled",
+  "play_arrow" = "play_arrow",
+  "print" = "print",
+  "priority_high" = "priority_high",
+  "push_pin" = "push_pin",
+  "queue_music" = "queue_music",
+  "quiz" = "quiz",
+  "radio_button_checked" = "radio_button_checked",
+  "radio_button_unchecked" = "radio_button_unchecked",
+  "redeem" = "redeem",
+  "refresh" = "refresh",
+  "replay_10" = "replay_10",
+  "replay_30" = "replay_30",
+  "schedule_filled" = "schedule_filled",
+  "schedule" = "schedule",
+  "search_off" = "search_off",
+  "search" = "search",
+  "share" = "share",
+  "support_agent" = "support_agent",
+  "system_update" = "system_update",
+  "twitter" = "twitter",
+  "user_policy" = "user_policy",
+  "view_list" = "view_list",
+  "vip" = "vip",
+  "visibility_off" = "visibility_off",
+  "visibility" = "visibility",
+  "volume_off" = "volume_off",
+  "volume_up" = "volume_up",
+  "wifi_off" = "wifi_off",
+  "x" = "x"
+}
+export type DsIcon = keyof typeof DsIconEnum;

package/variables/colors-css-variables.json

@@ -7,15 +7,17 @@
   "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-culture": "var(--ds-color-surface-culture)",
   "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)",
+  "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "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)",
@@ -23,6 +25,7 @@
   "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-culture": "var(--ds-color-text-culture)",
   "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)",
@@ -51,38 +54,26 @@
   "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)",
+  "neutral-100": "var(--ds-color-neutral-100)",
+  "neutral-200": "var(--ds-color-neutral-200)",
+  "neutral-300": "var(--ds-color-neutral-300)",
+  "neutral-400": "var(--ds-color-neutral-400)",
+  "neutral-500": "var(--ds-color-neutral-500)",
+  "neutral-600": "var(--ds-color-neutral-600)",
+  "neutral-700": "var(--ds-color-neutral-700)",
+  "neutral-800": "var(--ds-color-neutral-800)",
+  "neutral-900": "var(--ds-color-neutral-900)",
+  "neutral-1000": "var(--ds-color-neutral-1000)",
+  "neutral-1100": "var(--ds-color-neutral-1100)",
+  "neutral-white": "var(--ds-color-neutral-white)",
+  "neutral-050": "var(--ds-color-neutral-050)",
+  "neutral-black": "var(--ds-color-neutral-black)",
   "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)",

package/.release-it-beta.cjs

@@ -1,25 +0,0 @@
-const version = '${version}';
-const packageName = process.env.npm_package_name;
-
-module.exports = {
-  plugins: {
-    '@release-it/conventional-changelog': {
-      path: '.',
-      infile: false, // Disable changelog writes on beta releases
-    },
-  },
-  git: {
-    push: true,
-    tagName: `@bonniernews/dn-design-system-web@${version}`,
-    commitsPath: '.',
-    commitMessage: `chore(web): released version v${version}`,
-    requireCommits: false
-  },
-  github: {
-    "tokenRef": "GITHUB_TOKEN"
-  },
-  npm: {
-    publish: false,
-    versionArgs: ['--workspaces false'],
-  }
-};

package/.release-it.cjs

@@ -1,39 +0,0 @@
-const version = '${version}';
-const packageName = process.env.npm_package_name;
-
-module.exports = {
-  plugins: {
-    '@release-it/conventional-changelog': {
-      path: '.',
-      infile: 'CHANGELOG.md',
-      header: `# Changelog\n\nAll changes to @bonniernews/dn-design-system-web will be documented in this file.\n\n`,
-      preset: {
-        name: 'conventionalcommits',
-        types: [
-          { type: "feat", "section": "Features" },
-          { type: "fix", "section": "Bug Fixes" },
-          { type: "chore", "section": "Maintenance", "hidden": false },
-          { type: "docs", "section": "Maintenance", "hidden": false },
-          { type: "style", "section": "Maintenance", "hidden": false },
-          { type: "refactor", "section": "Maintenance", "hidden": false },
-          { type: "perf", "section": "Maintenance", "hidden": false },
-          { type: "test", "section": "Maintenance", "hidden": false }
-        ]
-      },
-    },
-  },
-  git: {
-    push: true,
-    tagName: `@bonniernews/dn-design-system-web@${version}`,
-    commitsPath: '.',
-    commitMessage: `chore(web): released version v${version}`,
-    requireCommits: false
-  },
-  github: {
-    "tokenRef": "GITHUB_TOKEN"
-  },
-  npm: {
-    publish: false,
-    versionArgs: ['--workspaces false'],
-  }
-};

package/components/divider/divider.tsx

@@ -1,28 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-export interface DividerProps {
-  variant?: 'soft' | 'medium' | 'hard';
-  classNames?: string;
-  attributes?: object;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
- * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
- */
-export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
-  const classes = formatClassString([
-    'ds-divider',
-    `ds-divider--${variant}`,
-    classNames
-  ])
-
-  return (
-    <div className={classes} {...attributes}><hr /></div>
-  );
-};
-
-export default Divider;

package/components/quote/quote.tsx

@@ -1,34 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-export interface QuoteProps {
-  bodyHtml: string;
-  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
-  classNames?: string;
-   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
-  attributes?: object;
-  forcePx?: boolean;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
- * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
- */
-export const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {
-  const componentClassName = 'ds-quote';
-
-  const classes = formatClassString([
-    componentClassName,
-    `ds-theme--${theme}`,
-    forcePx && 'ds-force-px',
-    classNames,
-  ])
-
-  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`
-
-  return (
-    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />
-  );
-};

package/components/teaser-card/teaser-card.tsx

@@ -1,44 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-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;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
- * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
- */
-export const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {
-  const componentClassName = 'ds-teaser';
-
-  const classNames = formatClassString([
-    componentClassName,
-    areaType && `${componentClassName}--${areaType}`,
-    areaType == 'bauta' && 'ds-dark',
-    `ds-theme--${theme}`,
-    classes,
-  ])
-
-  if (targetLink) {
-    return (
-      <a className={classNames} href={targetLink } {...attributes}>
-        { children }
-      </a>
-    );
-  }
-
-  return (
-    <div className={classNames}{...attributes}>
-      { children }
-    </div>
-  );
-};

package/components/teaser-onsite/teaser-onsite.tsx

@@ -1,43 +0,0 @@
-import { TeaserCard } from "@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx";
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-import { Body, Content, Media, Title } from "@bonniernews/dn-design-system-web/helpers/teaser.tsx";
-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;
-}
-
-/**
- * Also known as "På Plats-puffen".
- *
- * 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"
- *
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
- * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
- */
-export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {
-
-  const classes = formatClassString([
-    "ds-teaser--onsite",
-    classNames,
-  ])
-
-  return (
-    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>
-      <Media { ...{ mediaHtml, rounded: true }}  />
-      <Content>
-        <Title title={`PÅ PLATS | ${title}`} />
-        <Body { ...{ text }} />
-      </Content>
-    </TeaserCard>
-  );
-};

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

@@ -1,27 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-export interface ThematicBreakProps {
-  classNames?: string;
-  attributes?: object;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
- * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
- */
-
-export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
-  const classes = formatClassString([
-    'ds-thematic-break',
-    classNames
-  ])
-
-  return (
-    <div className={classes} {...attributes}><hr /></div>
-  );
-};
-
-export default ThematicBreak;

package/helpers/teaser.tsx

@@ -1,32 +0,0 @@
-interface MediaProps {
-  mediaHtml?: string;
-  rounded?: boolean;
-}
-
-export const Media = ({ mediaHtml, rounded }: MediaProps) => {
-  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');
-  return mediaHtml && (<div className={classNames} 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/index.tsx

@@ -1,8 +0,0 @@
-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 };