npm - @bonniernews/dn-design-system-web - Versions diffs - 25.0.6-beta.0 → 25.0.6-beta.2 - Mend

@bonniernews/dn-design-system-web 25.0.6-beta.0 → 25.0.6-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/components/factbox/README.md CHANGED Viewed

@@ -13,7 +13,7 @@
 |vignetteHtml | HTML String | no | | | |
 |titleHtml | HTML String | yes | | | |
 |bodyHtml | HTML String | yes | | | |
-|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
+|theme | String | no | default, kultur, nyheter | | Design theme |
 |grade | String | no | | | zero, one, two, three, four, five, none |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |

package/components/icon-with-wrapper/icon-with-wrapper.njk CHANGED Viewed

@@ -19,7 +19,7 @@
     {% set iconSize = size/16 + "rem" %}
   {% endif %}
-  {% set styleColor = "color: var(--ds-color-icon-" + color + ");" %}
+  {% set styleColor = "color: var(--ds-color-text-" + color + ");" %}
   {% set styleIcon = "width: " + iconSize + "; height: " + iconSize + ";" %}
   <div class="{{ classes }}" style="{{ styleIcon }} {{ styleColor }}" {{- attributes | safe}}>

package/components/quote/README-NJK.md CHANGED Viewed

@@ -11,7 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |bodyHtml | HTML String | yes | | | |
-|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
+|theme | String | no | default, kultur, nyheter | | Design theme |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |

package/components/quote/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | bodyHtml\* | string | \- |
-| theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
+| theme | "kultur", "nyheter" | "nyheter" |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | forcePx | boolean | \- |

package/components/tag-header/README.md CHANGED Viewed

@@ -16,7 +16,7 @@
 |mediaHtml | String | no | | | Main image |
 |descriptionHtml | String | no | | | Intended use is text, links |
 |articleCount | int | no | | | Total articles on this list-page |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the vignette |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the vignette |
 |toggle | Bool | no | true, false | false | Show/hide toggle button |
 |toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
 |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |

package/components/teaser-card/README-NJK.md CHANGED Viewed

@@ -14,7 +14,7 @@ This component is the basis for all Teasers. While it does not render much itsel
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |targetLink | String | no | | | If given, the card will render as a link |
 |areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |classNames | String | no | | | Ex. "ds-teaser--large" |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-card/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
-| theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
+| theme | "kultur", "nyheter" | "nyheter" |
 | classes | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |

package/components/teaser-centered/README.md CHANGED Viewed

@@ -15,7 +15,7 @@ This teaser never has a lock-symbol/vip-badge
 |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 |
+|theme | String | no | nyheter, kultur | (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 |

package/components/teaser-large/README.md CHANGED Viewed

@@ -14,7 +14,7 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |variant | String | no | "default" or "podcast" | "default" | |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (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 |

package/components/teaser-large/teaser-large.scss CHANGED Viewed

@@ -105,12 +105,12 @@
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {
-        @include ds-typography($ds-typography-expressive-heading-sm, $lineHeight: 1.2);
+        @include ds-typography($ds-typography-detail-teaser-large-rightcol, $lineHeight: 1.2);
       }
       &.ds-teaser--large-italic .ds-teaser__title {
         @include ds-typography(
-          $ds-typography-expressive-heading-sm,
+          $ds-typography-detail-teaser-large-rightcol,
           $fontWeight: $ds-fontweight-regular,
           $fontStyle: italic,
           $lineHeight: 1.2

package/components/teaser-list-swipe/README.md CHANGED Viewed

@@ -14,7 +14,7 @@
 |titleHref | String | no | | | Target URL for the header |
 |areaType | String | no | "main", "right", "bauta", "bautaxl" | | The area where the column is rendered |
 |arrowPosition | String | no | "floating", "header" | "header" | Determines where the scroll arrows are rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |teasers | Object | yes | | | A list of arguments to TeaserSwipeCard |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |groupHeaderType | String | no | "icon", "link", "toggle", "arrow" | | Type of group header |

package/components/teaser-list-vertical/README.md CHANGED Viewed

@@ -15,7 +15,7 @@
 |flexible | bool | no | true, false | false | |
 |teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ] |
 |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to _all_ teasers in the list. |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |
@@ -33,7 +33,6 @@ These are copy paste friendly examples to quickliy get started using a component
   listTitle: "Senaste artiklarna",
   listLink: { text: "Alla nyheter", url: "#"},
   flexible: true,
-  theme: "ekonomi",
   teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
 })}}

package/components/teaser-onsite/README-NJK.md CHANGED Viewed

@@ -17,7 +17,7 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |mediaHtml | HTML String | no | | | Main image or other media |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/teaser-onsite/README.md CHANGED Viewed

@@ -14,7 +14,7 @@ The component will not include styling by itself. Make sure to include the right
 |:--- | :--- | :--- |
 | areaType | "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
-| theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
+| theme | "kultur", "nyheter" | "nyheter" |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
 | mediaHtml | string | \- |

package/components/teaser-package/README.md CHANGED Viewed

@@ -15,7 +15,7 @@
 |vignetteTargetUrl | String | no | | | Target URL for the teaser |
 |vignetteIconHtml | string | no | | | The icon markup for the vignette |
 |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-right-now/README.md CHANGED Viewed

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-slideshow/README.md CHANGED Viewed

@@ -13,7 +13,7 @@
 |title | String | yes | | | Heading of the teaser |
 |text | String | no | | | Teaser subtext |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |mediaHtml | HTML String | no | | | Gallery html |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |

package/components/teaser-split/README-container.md CHANGED Viewed

@@ -11,7 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |teasersHtml | HTML String | yes | | | HTML teaser output |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme is applied to all teasers in the container |
+|theme | String | no | nyheter, kultur | (empty) | The theme is applied to all teasers in the container |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |

package/components/teaser-split/README.md CHANGED Viewed

@@ -14,7 +14,7 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |~variant~ | String | no | "default" or "podcast" | "default" | Not implemented |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (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 |

package/components/teaser-standard/README.md CHANGED Viewed

@@ -14,7 +14,7 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |variant | String | no | "default" or "podcast" | "default" | |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (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 |

package/components/teaser-tipsa/README.md CHANGED Viewed

@@ -16,7 +16,7 @@ It's quite common to include a dot in the title string, like "• This is a titl
 |targetLink | String | yes | | | Target URL for the teaser |
 |text | String | no | | | Teaser subtext |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/foundations/variables/typographyList.scss CHANGED Viewed

@@ -44,6 +44,7 @@ $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
 $ds-typography-detail-teaser-breaking: 'detail-teaser-breaking';
 $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
 $ds-typography-detail-teaser-story: 'detail-teaser-story';
+$ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
 $ds-typography-detail-article-standard: 'detail-article-standard';
 $ds-typography-detail-article-opinion: 'detail-article-opinion';
 $ds-typography-detail-article-longread: 'detail-article-longread';

package/foundations/variables/typographyScreenExtraLarge.scss CHANGED Viewed

@@ -171,14 +171,14 @@ $typographyScreenExtraLarge: (
   functional-ingress-sm: (
     fontFamily: "DN Sans",
     fontSize: 20,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
   functional-ingress-md: (
     fontFamily: "DN Sans",
     fontSize: 24,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
@@ -326,13 +326,19 @@ $typographyScreenExtraLarge: (
     letterSpacing: 0,
     lineHeight: 1.1
   ),
+  detail-teaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontSize: 22,
+    fontWeight: Bold,
+    letterSpacing: 0,
+    lineHeight: 1.2
+  ),
   detail-article-standard: (
     fontFamily: "DN Serif Display",
     fontSize: 48,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
-    lineHeight: 1.1,
-    fontStyle: italic
+    lineHeight: 1.1
   ),
   detail-article-opinion: (
     fontFamily: "DN Serif Display",

package/foundations/variables/typographyScreenLarge.scss CHANGED Viewed

@@ -171,14 +171,14 @@ $typographyScreenLarge: (
   functional-ingress-sm: (
     fontFamily: "DN Sans",
     fontSize: 20,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
   functional-ingress-md: (
     fontFamily: "DN Sans",
     fontSize: 24,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
@@ -326,13 +326,19 @@ $typographyScreenLarge: (
     letterSpacing: 0,
     lineHeight: 1.1
   ),
+  detail-teaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontSize: 22,
+    fontWeight: Bold,
+    letterSpacing: 0,
+    lineHeight: 1.2
+  ),
   detail-article-standard: (
     fontFamily: "DN Serif Display",
     fontSize: 40,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
-    lineHeight: 1.1,
-    fontStyle: italic
+    lineHeight: 1.1
   ),
   detail-article-opinion: (
     fontFamily: "DN Serif Display",

package/foundations/variables/typographyScreenSmall.scss CHANGED Viewed

@@ -171,14 +171,14 @@ $typographyScreenSmall: (
   functional-ingress-sm: (
     fontFamily: "DN Sans",
     fontSize: 18,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
   functional-ingress-md: (
     fontFamily: "DN Sans",
     fontSize: 20,
-    fontWeight: Regular,
+    fontWeight: Bold,
     letterSpacing: 0,
     lineHeight: 1.5
   ),
@@ -326,6 +326,13 @@ $typographyScreenSmall: (
     letterSpacing: 0,
     lineHeight: 1.1
   ),
+  detail-teaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontSize: 22,
+    fontWeight: Bold,
+    letterSpacing: 0,
+    lineHeight: 1.2
+  ),
   detail-article-standard: (
     fontFamily: "DN Serif Headline",
     fontSize: 26,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "25.0.6-beta.0",
+  "version": "25.0.6-beta.2",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

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

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

package/preact/components/quote/quote.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../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 QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "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 QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
   "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BI;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,oBAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import { ComponentChildren } from "preact";
 export interface TeaserCardsProps {
     areaType?: 'right' | 'bauta' | 'bautaxl';
     targetLink?: string;
-    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    theme?: 'kultur' | 'nyheter';
     classes?: string;
     /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;

package/preact/components/teaser-card/teaser-card.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n"],
+  "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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n"],
   "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC+BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,SAAS,YAAY,SAAS,MAAwB;AAC1H,QAAM,qBAAqB;AAE3B,QAAM,aAAa,kBAAkB;AAAA,IACnC;AAAA,IACA,YAAY,GAAG,kBAAkB,KAAK,QAAQ;AAAA,IAC9C,YAAY,WAAW;AAAA,IACvB,aAAa,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAED,MAAI,YAAY;AACd,WACE,oBAAC,OAAE,WAAW,YAAY,MAAM,YAAc,GAAG,YAC7C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,YAAY,GAAG,YAC3B,UACJ;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 export interface TeaserOnSiteProps {
     areaType?: 'right' | 'bauta' | 'bautaxl';
     targetLink?: string;
-    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    theme?: 'kultur' | 'nyheter';
     classNames?: string;
     /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;

package/preact/components/teaser-onsite/teaser-onsite.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../helpers/teaser.tsx", "../../../components/teaser-onsite/teaser-onsite.tsx"],
-  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n", "import { ComponentChildren } from \"preact\";\n\ninterface MediaProps {\n  mediaHtml?: string;\n  rounded?: boolean;\n}\n\nexport const Media = ({ mediaHtml, rounded }: MediaProps) => {\n  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');\n  return mediaHtml ? (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />) : (null)\n}\n\ninterface ContentProps {\n  children: ComponentChildren;\n}\nexport const Content = ({ children }: ContentProps) => {\n  return (<div className=\"ds-teaser__content\">\n    {children}\n  </div>)\n}\n\ninterface TitleProps {\n  title?: string;\n}\nexport const Title = ({ title }: TitleProps) => {\n  return title ? (<h2 className=\"ds-teaser__title\">{title}</h2>) : (null)\n}\n\ninterface BodyProps {\n  text?: string;\n}\nexport const Body = ({ text }: BodyProps) => {\n  return text ? (<p className=\"ds-teaser__text\">{text}</p>) : (null)\n}\n", "import { TeaserCard } from \"@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { Body, Content, Media, Title } from \"@bonniernews/dn-design-system-web/helpers/teaser.tsx\";\nexport interface TeaserOnSiteProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  mediaHtml?: string;\n  title?: string;\n  text?: string;\n}\n\n/**\n * Also known as \"P\u00E5 Plats-puffen\".\n *\n * In the CMS title will be set to a location like \"Kiev, Ukraina\" or \"USA\" and text is usually set to some author names like \"Jan Banan och Kalle Kula\"\n *\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)\n * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`\n */\nexport const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {\n\n  const classes = formatClassString([\n    \"ds-teaser--onsite\",\n    classNames,\n  ])\n\n  return (\n    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>\n      <Media { ...{ mediaHtml, rounded: true }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
+  "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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n", "import { ComponentChildren } from \"preact\";\n\ninterface MediaProps {\n  mediaHtml?: string;\n  rounded?: boolean;\n}\n\nexport const Media = ({ mediaHtml, rounded }: MediaProps) => {\n  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');\n  return mediaHtml ? (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />) : (null)\n}\n\ninterface ContentProps {\n  children: ComponentChildren;\n}\nexport const Content = ({ children }: ContentProps) => {\n  return (<div className=\"ds-teaser__content\">\n    {children}\n  </div>)\n}\n\ninterface TitleProps {\n  title?: string;\n}\nexport const Title = ({ title }: TitleProps) => {\n  return title ? (<h2 className=\"ds-teaser__title\">{title}</h2>) : (null)\n}\n\ninterface BodyProps {\n  text?: string;\n}\nexport const Body = ({ text }: BodyProps) => {\n  return text ? (<p className=\"ds-teaser__text\">{text}</p>) : (null)\n}\n", "import { TeaserCard } from \"@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { Body, Content, Media, Title } from \"@bonniernews/dn-design-system-web/helpers/teaser.tsx\";\nexport interface TeaserOnSiteProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  mediaHtml?: string;\n  title?: string;\n  text?: string;\n}\n\n/**\n * Also known as \"P\u00E5 Plats-puffen\".\n *\n * In the CMS title will be set to a location like \"Kiev, Ukraina\" or \"USA\" and text is usually set to some author names like \"Jan Banan och Kalle Kula\"\n *\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)\n * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`\n */\nexport const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {\n\n  const classes = formatClassString([\n    \"ds-teaser--onsite\",\n    classNames,\n  ])\n\n  return (\n    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>\n      <Media { ...{ mediaHtml, rounded: true }}  />\n      <Content>\n        <Title title={`P\u00C5 PLATS | ${title}`} />\n        <Body { ...{ text }} />\n      </Content>\n    </TeaserCard>\n  );\n};\n"],
   "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC+BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,SAAS,YAAY,SAAS,MAAwB;AAC1H,QAAM,qBAAqB;AAE3B,QAAM,aAAa,kBAAkB;AAAA,IACnC;AAAA,IACA,YAAY,GAAG,kBAAkB,KAAK,QAAQ;AAAA,IAC9C,YAAY,WAAW;AAAA,IACvB,aAAa,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAED,MAAI,YAAY;AACd,WACE,oBAAC,OAAE,WAAW,YAAY,MAAM,YAAc,GAAG,YAC7C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,YAAY,GAAG,YAC3B,UACJ;AAEJ;;;ACnCsB,gBAAAA,YAAA;AAFf,IAAM,QAAQ,CAAC,EAAE,WAAW,QAAQ,MAAkB;AAC3D,QAAM,aAAa,sBAAsB,UAAU,+BAA+B;AAClF,SAAO,YAAa,gBAAAA,KAAC,SAAI,WAAW,YAAY,yBAAyB,EAAE,QAAQ,UAAU,GAAG,IAAO;AACzG;AAKO,IAAM,UAAU,CAAC,EAAE,SAAS,MAAoB;AACrD,SAAQ,gBAAAA,KAAC,SAAI,WAAU,sBACpB,UACH;AACF;AAKO,IAAM,QAAQ,CAAC,EAAE,MAAM,MAAkB;AAC9C,SAAO,QAAS,gBAAAA,KAAC,QAAG,WAAU,oBAAoB,iBAAM,IAAU;AACpE;AAKO,IAAM,OAAO,CAAC,EAAE,KAAK,MAAiB;AAC3C,SAAO,OAAQ,gBAAAA,KAAC,OAAE,WAAU,mBAAmB,gBAAK,IAAS;AAC/D;;;ACEM,gBAAAC,MACA,YADA;AATC,IAAM,eAAe,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,WAAW,OAAO,KAAK,MAAyB;AAE9I,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,qBAAC,cAAa,GAAG,EAAE,UAAU,YAAY,OAAO,SAAS,WAAW,GAClE;AAAA,oBAAAA,KAAC,SAAQ,GAAG,EAAE,WAAW,SAAS,KAAK,GAAI;AAAA,IAC3C,qBAAC,WACC;AAAA,sBAAAA,KAAC,SAAM,OAAO,iBAAc,KAAK,IAAI;AAAA,MACrC,gBAAAA,KAAC,QAAO,GAAG,EAAE,KAAK,GAAG;AAAA,OACvB;AAAA,KACF;AAEJ;",
   "names": ["jsx", "jsx"]
 }

package/variables/typography-list.json CHANGED Viewed

@@ -45,6 +45,7 @@
   "detail-teaser-breaking": "'detail-teaser-breaking'",
   "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
   "detail-teaser-story": "'detail-teaser-story'",
+  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
   "detail-article-standard": "'detail-article-standard'",
   "detail-article-opinion": "'detail-article-opinion'",
   "detail-article-longread": "'detail-article-longread'",