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

package/tokens/colors-light-mode.json

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

package/tokens/typography-list.json

@@ -16,7 +16,6 @@
   "detailteaser-standard-compact": "'detailteaser-standard-compact'",
   "detailteaser-standard-compact-opinion": "'detailteaser-standard-compact-opinion'",
   "detailteaser-large": "'detailteaser-large'",
-  "detailteaser-breaking": "'detailteaser-breaking'",
   "detailteaser-large-opinion": "'detailteaser-large-opinion'",
   "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",
   "detailteaser-standard": "'detailteaser-standard'",

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,100 @@
+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",
+  "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",
+  "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",
+  "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",
+  "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"
+}
+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-breaking/README.md

@@ -1,46 +0,0 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-breaking](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-breaking)
-- Storybook: [TeaserBreaking](https://designsystem.dn.se/?path=/docs/section-teaserbreaking--docs)
-- Storybook (Latest): [TeaserBreaking](https://designsystem-latest.dn.se/?path=/docs/section-teaserbreaking--docs)
-
-----
-
-# teaser-breaking
-
-This teaser never has a lock-symbol/vip-badge
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
-|text | String | no | | | Teaser subtext |
-|vignette | String | no | | | Top text in the teaser |
-|highlight | String | no | | | Text before the heading |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking.njk' import TeaserBreaking %}
-
-{{ TeaserBreaking({
-  title: "Upp på börsen",
-  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
-  highlight: "Ekonominytt:"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking" as *;
-```