@bonniernews/dn-design-system-web 25.0.6-beta.1 → 25.0.6-beta.3

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 (27) hide show
  1. package/components/factbox/README.md +1 -1
  2. package/components/quote/README-NJK.md +1 -1
  3. package/components/quote/README.md +1 -1
  4. package/components/tag-header/README.md +1 -1
  5. package/components/teaser-card/README-NJK.md +1 -1
  6. package/components/teaser-card/README.md +1 -1
  7. package/components/teaser-centered/README.md +1 -1
  8. package/components/teaser-large/README.md +1 -1
  9. package/components/teaser-list-swipe/README.md +1 -1
  10. package/components/teaser-list-vertical/README.md +1 -2
  11. package/components/teaser-onsite/README-NJK.md +1 -1
  12. package/components/teaser-onsite/README.md +1 -1
  13. package/components/teaser-package/README.md +1 -1
  14. package/components/teaser-right-now/README.md +1 -1
  15. package/components/teaser-slideshow/README.md +1 -1
  16. package/components/teaser-split/README-container.md +1 -1
  17. package/components/teaser-split/README.md +1 -1
  18. package/components/teaser-standard/README.md +1 -1
  19. package/components/teaser-tipsa/README.md +1 -1
  20. package/foundations/variables/typographyScreenLarge.scss +1 -1
  21. package/package.json +1 -1
  22. package/preact/components/quote/quote.d.ts +1 -1
  23. package/preact/components/quote/quote.js.map +1 -1
  24. package/preact/components/teaser-card/teaser-card.d.ts +1 -1
  25. package/preact/components/teaser-card/teaser-card.js.map +1 -1
  26. package/preact/components/teaser-onsite/teaser-onsite.d.ts +1 -1
  27. package/preact/components/teaser-onsite/teaser-onsite.js.map +1 -1
package/components/factbox/README.md CHANGED
@@ -13,7 +13,7 @@
13
13
  |vignetteHtml | HTML String | no | | | |
14
14
  |titleHtml | HTML String | yes | | | |
15
15
  |bodyHtml | HTML String | yes | | | |
16
- |theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
16
+ |theme | String | no | default, kultur, nyheter | | Design theme |
17
17
  |grade | String | no | | | zero, one, two, three, four, five, none |
18
18
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
19
  |classNames | String | no | | | Ex. "my-special-class" |
package/components/quote/README-NJK.md CHANGED
@@ -11,7 +11,7 @@
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |bodyHtml | HTML String | yes | | | |
14
- |theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
14
+ |theme | String | no | default, kultur, nyheter | | Design theme |
15
15
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
16
  |classNames | String | no | | | Ex. "my-special-class" |
17
17
  |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
@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
9
9
  | Name | Description | Default |
10
10
  |:--- | :--- | :--- |
11
11
  | bodyHtml\* | string | \- |
12
- | theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
12
+ | theme | "kultur", "nyheter" | "nyheter" |
13
13
  | classNames | string | \- |
14
14
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
15
15
  | forcePx | boolean | \- |
package/components/tag-header/README.md CHANGED
@@ -16,7 +16,7 @@
16
16
  |mediaHtml | String | no | | | Main image |
17
17
  |descriptionHtml | String | no | | | Intended use is text, links |
18
18
  |articleCount | int | no | | | Total articles on this list-page |
19
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the vignette |
19
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the vignette |
20
20
  |toggle | Bool | no | true, false | false | Show/hide toggle button |
21
21
  |toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
22
22
  |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
package/components/teaser-card/README-NJK.md CHANGED
@@ -14,7 +14,7 @@ This component is the basis for all Teasers. While it does not render much itsel
14
14
  |:--- | :--- | :--- | :--- | :--- | :--- |
15
15
  |targetLink | String | no | | | If given, the card will render as a link |
16
16
  |areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
17
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
18
  |classNames | String | no | | | Ex. "ds-teaser--large" |
19
19
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
20
  |~forcePx~ | | | | | Not supported |
package/components/teaser-card/README.md CHANGED
@@ -10,7 +10,7 @@ The component will not include styling by itself. Make sure to include the right
10
10
  |:--- | :--- | :--- |
11
11
  | areaType | "right", "bauta", "bautaxl" | \- |
12
12
  | targetLink | string | \- |
13
- | theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
13
+ | theme | "kultur", "nyheter" | "nyheter" |
14
14
  | classes | string | \- |
15
15
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
16
16
 
package/components/teaser-centered/README.md CHANGED
@@ -15,7 +15,7 @@ This teaser never has a lock-symbol/vip-badge
15
15
  |title | String | yes | | | Heading of the teaser |
16
16
  |targetLink | String | yes | | | Target URL for the teaser |
17
17
  |areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
18
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
18
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
19
19
  |text | String | no | | | Teaser subtext |
20
20
  |vignette | String | no | | | Top text in the teaser |
21
21
  |highlight | String | no | | | Text before the heading |
package/components/teaser-large/README.md CHANGED
@@ -14,7 +14,7 @@
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
15
  |variant | String | no | "default" or "podcast" | "default" | |
16
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
18
  |text | String | no | | | Teaser subtext |
19
19
  |vignette | String | no | | | Top text in the teaser |
20
20
  |highlight | String | no | | | Text before the heading |
package/components/teaser-list-swipe/README.md CHANGED
@@ -14,7 +14,7 @@
14
14
  |titleHref | String | no | | | Target URL for the header |
15
15
  |areaType | String | no | "main", "right", "bauta", "bautaxl" | | The area where the column is rendered |
16
16
  |arrowPosition | String | no | "floating", "header" | "header" | Determines where the scroll arrows are rendered |
17
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
18
  |teasers | Object | yes | | | A list of arguments to TeaserSwipeCard |
19
19
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
20
  |groupHeaderType | String | no | "icon", "link", "toggle", "arrow" | | Type of group header |
package/components/teaser-list-vertical/README.md CHANGED
@@ -15,7 +15,7 @@
15
15
  |flexible | bool | no | true, false | false | |
16
16
  |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" } } ] |
17
17
  |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
18
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to _all_ teasers in the list. |
18
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
19
19
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
20
  |classNames | String | no | | | Ex. "my-special-class" |
21
21
  |~forcePx~ | | | | | Not supported |
@@ -33,7 +33,6 @@ These are copy paste friendly examples to quickliy get started using a component
33
33
  listTitle: "Senaste artiklarna",
34
34
  listLink: { text: "Alla nyheter", url: "#"},
35
35
  flexible: true,
36
- theme: "ekonomi",
37
36
  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" } } ]
38
37
  })}}
39
38
 
package/components/teaser-onsite/README-NJK.md CHANGED
@@ -17,7 +17,7 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
17
17
  |title | String | yes | | | Heading of the teaser |
18
18
  |targetLink | String | yes | | | Target URL for the teaser |
19
19
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
20
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
20
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
21
21
  |text | String | no | | | Teaser subtext |
22
22
  |mediaHtml | HTML String | no | | | Main image or other media |
23
23
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
package/components/teaser-onsite/README.md CHANGED
@@ -14,7 +14,7 @@ The component will not include styling by itself. Make sure to include the right
14
14
  |:--- | :--- | :--- |
15
15
  | areaType | "right", "bauta", "bautaxl" | \- |
16
16
  | targetLink | string | \- |
17
- | theme | "kultur", "nyheter", "sport", "ekonomi", "sthlm" | "nyheter" |
17
+ | theme | "kultur", "nyheter" | "nyheter" |
18
18
  | classNames | string | \- |
19
19
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
20
20
  | mediaHtml | string | \- |
package/components/teaser-package/README.md CHANGED
@@ -15,7 +15,7 @@
15
15
  |vignetteTargetUrl | String | no | | | Target URL for the teaser |
16
16
  |vignetteIconHtml | string | no | | | The icon markup for the vignette |
17
17
  |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
18
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
18
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
19
19
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
20
  |classNames | String | no | | | Ex. "my-special-class" |
21
21
  |~forcePx~ | | | | | Not supported |
package/components/teaser-right-now/README.md CHANGED
@@ -12,7 +12,7 @@
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
15
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
16
16
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
17
  |classNames | String | no | | | Ex. "my-special-class" |
18
18
  |~forcePx~ | | | | | Not supported |
package/components/teaser-slideshow/README.md CHANGED
@@ -13,7 +13,7 @@
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |text | String | no | | | Teaser subtext |
15
15
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
16
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
16
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
17
17
  |mediaHtml | HTML String | no | | | Gallery html |
18
18
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
19
  |classNames | String | no | | | Ex. "my-special-class" |
package/components/teaser-split/README-container.md CHANGED
@@ -11,7 +11,7 @@
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |teasersHtml | HTML String | yes | | | HTML teaser output |
14
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme is applied to all teasers in the container |
14
+ |theme | String | no | nyheter, kultur | (empty) | The theme is applied to all teasers in the container |
15
15
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
16
  |classNames | String | no | | | Ex. "my-special-class" |
17
17
  |areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
package/components/teaser-split/README.md CHANGED
@@ -14,7 +14,7 @@
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
15
  |~variant~ | String | no | "default" or "podcast" | "default" | Not implemented |
16
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
18
  |text | String | no | | | Teaser subtext |
19
19
  |vignette | String | no | | | Top text in the teaser |
20
20
  |highlight | String | no | | | Text before the heading |
package/components/teaser-standard/README.md CHANGED
@@ -14,7 +14,7 @@
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
15
  |variant | String | no | "default" or "podcast" | "default" | |
16
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
18
  |text | String | no | | | Teaser subtext |
19
19
  |vignette | String | no | | | Top text in the teaser |
20
20
  |highlight | String | no | | | Text before the heading |
package/components/teaser-tipsa/README.md CHANGED
@@ -16,7 +16,7 @@ It's quite common to include a dot in the title string, like "• This is a titl
16
16
  |targetLink | String | yes | | | Target URL for the teaser |
17
17
  |text | String | no | | | Teaser subtext |
18
18
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
19
- |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
19
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
20
20
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
21
21
  |classNames | String | no | | | Ex. "my-special-class" |
22
22
  |~forcePx~ | | | | | Not supported |
package/foundations/variables/typographyScreenLarge.scss CHANGED
@@ -306,7 +306,7 @@ $typographyScreenLarge: (
306
306
  ),
307
307
  detail-teaser-breaking: (
308
308
  fontFamily: "DN Serif Display",
309
- fontSize: 64,
309
+ fontSize: 56,
310
310
  fontWeight: ExtraBold,
311
311
  letterSpacing: 0,
312
312
  lineHeight: 1.1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "25.0.6-beta.1",
3
+ "version": "25.0.6-beta.3",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/preact/components/quote/quote.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export interface QuoteProps {
2
2
  bodyHtml: string;
3
- theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
3
+ theme?: 'kultur' | 'nyheter';
4
4
  classNames?: string;
5
5
  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
6
6
  attributes?: object;
package/preact/components/quote/quote.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../helpers/formatClassString.ts", "../../../components/quote/quote.tsx"],
4
- "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"],
4
+ "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"],
5
5
  "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;",
6
6
  "names": []
7
7
  }
package/preact/components/teaser-card/teaser-card.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentChildren } from "preact";
2
2
  export interface TeaserCardsProps {
3
3
  areaType?: 'right' | 'bauta' | 'bautaxl';
4
4
  targetLink?: string;
5
- theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
5
+ theme?: 'kultur' | 'nyheter';
6
6
  classes?: string;
7
7
  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
8
8
  attributes?: object;
package/preact/components/teaser-card/teaser-card.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx"],
4
- "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"],
4
+ "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"],
5
5
  "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;",
6
6
  "names": []
7
7
  }
package/preact/components/teaser-onsite/teaser-onsite.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export interface TeaserOnSiteProps {
2
2
  areaType?: 'right' | 'bauta' | 'bautaxl';
3
3
  targetLink?: string;
4
- theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
4
+ theme?: 'kultur' | 'nyheter';
5
5
  classNames?: string;
6
6
  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
7
7
  attributes?: object;
package/preact/components/teaser-onsite/teaser-onsite.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../helpers/teaser.tsx", "../../../components/teaser-onsite/teaser-onsite.tsx"],
4
- "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"],
4
+ "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"],
5
5
  "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;",
6
6
  "names": ["jsx", "jsx"]
7
7
  }