@bonniernews/dn-design-system-web 32.7.41 → 32.7.43-beta.0

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
  1. package/CHANGELOG.md +7 -0
  2. package/components/teaser-centered/README.md +3 -3
  3. package/components/teaser-longlife/README.md +2 -2
  4. package/components/teaser-onsite/README.md +1 -1
  5. package/components/teaser-package/README-njk.md +43 -0
  6. package/components/teaser-package/README.md +26 -43
  7. package/components/teaser-text-on-image/README-NJK.md +40 -0
  8. package/components/teaser-text-on-image/README.md +29 -40
  9. package/components/teaser-text-on-image/teaser-text-on-image.njk +2 -2
  10. package/package.json +1 -1
  11. package/preact/components/teaser-card/teaser-card.d.ts +1 -1
  12. package/preact/components/teaser-card/teaser-card.js.map +1 -1
  13. package/preact/components/teaser-centered/teaser-centered.js.map +1 -1
  14. package/preact/components/teaser-counter/teaser-counter.js.map +1 -1
  15. package/preact/components/teaser-large/teaser-large.js.map +1 -1
  16. package/preact/components/teaser-list-swipe/teaser-list-swipe.js.map +1 -1
  17. package/preact/components/teaser-longlife/teaser-longlife.js.map +1 -1
  18. package/preact/components/teaser-native/teaser-native.js.map +1 -1
  19. package/preact/components/teaser-onsite/teaser-onsite.js.map +1 -1
  20. package/preact/components/teaser-package/teaser-package.d.ts +20 -0
  21. package/preact/components/teaser-package/teaser-package.js +336 -0
  22. package/preact/components/teaser-package/teaser-package.js.map +7 -0
  23. package/preact/components/teaser-right-now/teaser-right-now.js.map +1 -1
  24. package/preact/components/teaser-slideshow/teaser-slideshow.js.map +1 -1
  25. package/preact/components/teaser-split/teaser-split.js.map +1 -1
  26. package/preact/components/teaser-standard/teaser-standard.js.map +1 -1
  27. package/preact/components/teaser-swipe-card/teaser-swipe-card.js.map +1 -1
  28. package/preact/components/teaser-text-on-image/teaser-text-on-image.d.ts +13 -0
  29. package/preact/components/teaser-text-on-image/teaser-text-on-image.js +116 -0
  30. package/preact/components/teaser-text-on-image/teaser-text-on-image.js.map +7 -0
  31. package/preact/components/teaser-tipsa/teaser-tipsa.js.map +1 -1
  32. package/components/teaser-package/README-UXD.md +0 -0
  33. package/components/teaser-text-on-image/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.42](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.41...@bonniernews/dn-design-system-web@32.7.42) (2025-07-30)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** teaser text on image tsx ([#1850](https://github.com/BonnierNews/dn-design-system/issues/1850)) ([0598b34](https://github.com/BonnierNews/dn-design-system/commit/0598b34983528dd6638a646a894f08d9c8c002ab))
13
+
7
14
  ## [32.7.41](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.40...@bonniernews/dn-design-system-web@32.7.41) (2025-07-30)
8
15
 
9
16
 
package/components/teaser-centered/README.md CHANGED
@@ -14,10 +14,10 @@ The component will not include styling by itself. Make sure to include the right
14
14
  | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
15
15
  | title\* | Heading of the teaser<br />string | \- |
16
16
  | text | Teaser subtext<br />string | \- |
17
- | theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
18
- | highlight | Text before the heading<br />string | \- |
19
- | media | Main image or other media<br />ComponentChild | \- |
20
17
  | vignette | Top text in the teaser<br />string | \- |
18
+ | media | Main image or other media<br />ComponentChild | \- |
19
+ | highlight | Text before the heading<br />string | \- |
20
+ | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
21
21
 
22
22
  ```jsx
23
23
  <TeaserCentered
package/components/teaser-longlife/README.md CHANGED
@@ -12,9 +12,9 @@ The component will not include styling by itself. Make sure to include the right
12
12
  | title\* | Heading of the teaser<br />string | \- |
13
13
  | classNames | Ex. "my-special-class"<br />string | \- |
14
14
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
15
- | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
16
- | media | Main image or other media<br />ComponentChild | \- |
17
15
  | vignette | Top text in the teaser<br />string | \- |
16
+ | media | Main image or other media<br />ComponentChild | \- |
17
+ | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
18
18
 
19
19
  ```jsx
20
20
  <TeaserLonglife
package/components/teaser-onsite/README.md CHANGED
@@ -18,8 +18,8 @@ The component will not include styling by itself. Make sure to include the right
18
18
  | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
19
19
  | title\* | Heading of the teaser<br />string | \- |
20
20
  | text | Teaser subtext<br />string | \- |
21
- | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
22
21
  | media | Main image or other media<br />ComponentChild | \- |
22
+ | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
23
23
 
24
24
  ```jsx
25
25
  <TeaserOnSite
package/components/teaser-package/README-njk.md ADDED
@@ -0,0 +1,43 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
2
+ - Storybook: [TeaserPackage](https://designsystem.dn.se/?path=/docs/section-teaserpackage--docs)
3
+ - Storybook (Latest): [TeaserPackage](https://designsystem-latest.dn.se/?path=/docs/section-teaserpackage--docs)
4
+
5
+ ----
6
+
7
+ # teaser-package
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |teasersHtml | HTML String | yes | | | HTML teaser output |
14
+ |vignetteText | String | yes | | | Heading of the teaser |
15
+ |vignetteTargetUrl | String | no | | | Target URL for the teaser |
16
+ |vignetteIconHtml | string | no | | | The icon markup for the vignette |
17
+ |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
18
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
19
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
+ |classNames | String | no | | | Ex. "my-special-class" |
21
+ |~forcePx~ | | | | | Not supported |
22
+
23
+ ## Minimum requirement example
24
+
25
+ ### Nunjucks
26
+
27
+ These are copy paste friendly examples to quickliy get started using a component.
28
+
29
+ ```html
30
+ {% from '@bonniernews/dn-design-system-web/components/teaser-package/teaser-package.njk' import TeaserPackage %}
31
+
32
+ {{ TeaserPackage({
33
+ teasersHtml: "",
34
+ areaType: "bauta",
35
+ vignetteText: "Svensk politik",
36
+ vignetteTargetUrl: "/om/svensk-politik/"
37
+ })}}
38
+ ```
39
+
40
+ ### SCSS
41
+ ```scss
42
+ @use "@bonniernews/dn-design-system-web/components/teaser-package/teaser-package" as *;
43
+ ```
package/components/teaser-package/README.md CHANGED
@@ -1,43 +1,26 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
2
- - Storybook: [TeaserPackage](https://designsystem.dn.se/?path=/docs/section-teaserpackage--docs)
3
- - Storybook (Latest): [TeaserPackage](https://designsystem-latest.dn.se/?path=/docs/section-teaserpackage--docs)
4
-
5
- ----
6
-
7
- # teaser-package
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |teasersHtml | HTML String | yes | | | HTML teaser output |
14
- |vignetteText | String | yes | | | Heading of the teaser |
15
- |vignetteTargetUrl | String | no | | | Target URL for the teaser |
16
- |vignetteIconHtml | string | no | | | The icon markup for the vignette |
17
- |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
18
- |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
19
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
- |classNames | String | no | | | Ex. "my-special-class" |
21
- |~forcePx~ | | | | | Not supported |
22
-
23
- ## Minimum requirement example
24
-
25
- ### Nunjucks
26
-
27
- These are copy paste friendly examples to quickliy get started using a component.
28
-
29
- ```html
30
- {% from '@bonniernews/dn-design-system-web/components/teaser-package/teaser-package.njk' import TeaserPackage %}
31
-
32
- {{ TeaserPackage({
33
- teasersHtml: "",
34
- areaType: "bauta",
35
- vignetteText: "Svensk politik",
36
- vignetteTargetUrl: "/om/svensk-politik/"
37
- })}}
38
- ```
39
-
40
- ### SCSS
41
- ```scss
42
- @use "@bonniernews/dn-design-system-web/components/teaser-package/teaser-package" as *;
43
- ```
1
+ TeaserPackage
2
+ =============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
5
+ * Storybook: [TeaserPackage](https://designsystem.dn.se/?path=/docs/section-teaserpackage--docs)
6
+
7
+ The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-package/teaser-package.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | areaType | "bauta", "bauataxl" | \- |
12
+ | vignetteText | string | \- |
13
+ | vignetteTargetUrl | string | \- |
14
+ | vignetteIcon | ComponentChild | \- |
15
+ | teasers | ComponentChild | \- |
16
+ | classNames | Ex. "my-special-class"<br />string | \- |
17
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
18
+ | theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
19
+
20
+ ```jsx
21
+ <TeaserPackage
22
+ teasers={<><TeaserCentered attributes={{'aria-label': 'Tobias Billström avgår'}} highlight="Just nu:" media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C770:434&crop=770:h;center,top&output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1540:867&crop=1540:h;center,top&output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C2020:1137&crop=2020:h;center,top&output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}/>} targetLink="https://www.dn.se/sverige/tobias-billstrom-lamnar-politiken-helt-och-hallet/" text="Utrikesministern lämnar politiken helt" title="Tobias Billström avgår" vignette="SVERIGE"/><TeaserCounter classNames="test-class" counterNumber={124} counterText="DAGAR I <br> FÄNGELSE" media={<ExamplePicture className="picture picture--placeholder" src="https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&crop=3:4,smart&height=184" style={{aspectRatio: '3 / 4'}}/>} subtitle="fängslad i Turkiet för sin journalistik" targetLink="" title="Joakim Medin"/><TeaserLarge media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/afbaaabe-174c-4eac-94b5-e899ac8dbe67.jpeg" style={{aspectRatio: 1.7777777777777777}}/>}/>} sticker="TV" targetLink="https://www.dn.se/krigets-svallvagor/" text="Klockexperterna: Det här är bästa liknelsen för folk som aldrig lyckas minnas regeln • Så har sommartiden förändrat världen • Bättre sömn • Bra kallprat i fikarummet • Kul pill för de som bär armbandsur" title="Såhär minns du regeln för sommartid: ”Du ställer FRAM utemöblerna” - gör samma med klockan" vignette="DN EXPLAINER SPECIAL"/><TeaserStandard attributes={{'aria-label': '13 misstänkta spioner vid ryska ambassaden'}} highlight="Live." isFlashingDot media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C770:434&crop=770:h;center,top&output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C1540:867&crop=1540:h;center,top&output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&fit=around%7C2020:1137&crop=2020:h;center,top&output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}/>} sticker="Live-TV" targetLink="https://www.dn.se/sverige/svt-13-misstankta-spioner-vid-ryska-ambassaden/" text="Avslöjas i SVT:s Uppdrag Granskning." title="13 misstänkta spioner vid ryska ambassaden"/><TeaserLarge highlight="Highlight:" media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/0af78b24-be9e-46c9-83f5-3d9c85637f47.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>} targetLink="https://www.dn.se/varlden/torbjorn-petersson-land-efter-land-overger-taiwan-for-att-liera-sig-med-kina/" text="Det är bara ett av många tester vi gör." title="Detta är en large utan vinjett"/><TeaserLarge bylinePicture={<ExampleByline src="https://cached-images.bonnier.news/gcs/bilder/dn-author/ttaf3io465mdzss743ztu6op3myymd3q3m6q33yyfrvbvfbi7jla-1000x3060.png" style={{aspectRatio: '100 / 306'}}/>} highlight="Highlight:" isItalicHeadline targetLink="https://www.dn.se/varlden/torbjorn-petersson-land-efter-land-overger-taiwan-for-att-liera-sig-med-kina/" text="Det är bara ett av många tester vi gör. Denna är italic" title="Detta är en large utan vinjett"/><TeaserStandard bylinePicture={<ExampleByline src="https://cached-images.bonnier.news/gcs/bilder/dn-author/ttaf3io465mdzss743ztu6op3myymd3q3m6q33yyfrvbvfbi7jla-1000x3060.png" style={{aspectRatio: '100 / 306'}}/>} isItalicHeadline targetLink="https://www.dn.se/varlden/torbjorn-petersson-land-efter-land-overger-taiwan-for-att-liera-sig-med-kina/" text="Standard, kursiv, byline" title="Standard med byline"/><TeaserStandard bylinePicture={<ExampleByline src="https://cached-images.bonnier.news/gcs/bilder/dn-author/ttaf3io465mdzss743ztu6op3myymd3q3m6q33yyfrvbvfbi7jla-1000x3060.png" style={{aspectRatio: '100 / 306'}}/>} isCompact isItalicHeadline targetLink="https://www.dn.se/varlden/torbjorn-petersson-land-efter-land-overger-taiwan-for-att-liera-sig-med-kina/" text="Standard, kursiv, byline" title="Compact standard med byline"/><TeaserSplitContainer><TeaserSplit isFlashingDot media={<TeaserImage byline="Foto: Pavel Bednyakov/Sputnik/AFP" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/fd0abe35-9282-46ed-addc-8af0e471db74.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>} parameters={{docs: {source: {originalSource: '{n title: 'Sju miljoner i humanitärt stöd till Turkiet och Syrien',n targetLink: '#',n text: 'Humanitärarbetarstabssamordningskommitéspecialister skickar hjälp till de drabbade områdena.',n vignette: undefined,n highlight: undefined,n media: teaserImage1,n sticker: 'Långt ord',n isFlashingDot: true,n theme: undefined,n variant: undefinedn}'}}}} sticker="Långt ord" targetLink="#" text="Humanitärarbetarstabssamordningskommitéspecialister skickar hjälp till de drabbade områdena." title="Sju miljoner i humanitärt stöd till Turkiet och Syrien"/><TeaserSplit media={<TeaserImage byline="Foto: Focke Strangmann/AFP" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/4a687f19-5d6a-4794-867c-2efc1c65622d.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>} parameters={{docs: {source: {originalSource: '{n title: 'Tusentals döda i skalvet – dödssiffran stiger',n targetLink: '#',n text: 'Turkiet och Syrien svårt drabbade efter morgonens jordbävning • Flera efterskalv.',n vignette: 'TV | TEXT',n highlight: undefined,n sticker: undefined,n media: teaserImage2,n isFlashingDot: false,n classNames: undefinedn}'}}}} targetLink="#" text="Turkiet och Syrien svårt drabbade efter morgonens jordbävning • Flera efterskalv." title="Tusentals döda i skalvet – dödssiffran stiger" vignette="TV | TEXT"/></TeaserSplitContainer><TeaserTipsa targetLink="https://www.dn.se/kultur/jessie-ware-later-den-fullodiga-fullangdaren-vanta-pa-sig/" title="• Jessie Ware låter den fullödiga fullängdaren vänta på sig"/><TeaserOnSite media={<TeaserImage image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&fit=around%7C56:56&crop=56:h;center,top&output-quality=80" style={{aspectRatio: '1 / 1'}}/>} />} targetLink="https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/" text="Henrik Brandão Jönsson och Eduardo Leal" title="Azorerna"/><TeaserSlideshow media={<div className="gallery"><Button attributes={{'aria-label': 'Föregående'}} classNames="gallery__arrow gallery__arrow--left hidden-mobile hidden-tablet" iconName="arrow_back" isIconButton size="sm" variant="staticWhite"/><Button attributes={{'aria-label': 'Nästa'}} classNames="gallery__arrow gallery__arrow--right hidden-mobile hidden-tablet" iconName="arrow_forward" isIconButton size="sm" variant="staticWhite"/><div className="gallery__items"><a aria-label="Bild 1 av 3, länk till artikeln" className="gallery__item gallery__item--first" href="#"><ExamplePicture className="picture picture--placeholder" sizes="256px" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80 256w, https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=60 512w" style={{aspectRatio: '16 / 9'}}/></a><a aria-label="Bild 2 av 3, länk till artikeln" className="gallery__item " href="#"><ExamplePicture className="picture picture--placeholder" sizes="256px" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80 256w, https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=60 512w" style={{aspectRatio: '16 / 9'}}/></a><a aria-label="Bild 3 av 3, länk till artikeln" className="gallery__item " href="#"><ExamplePicture className="picture picture--placeholder" sizes="256px" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=80 256w, https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/6dbb8ec0-551c-4577-8a65-b15c14d04919.jpeg?interpolation=lanczos-none&fit=around%7C256:144&crop=256:h;center,top&output-quality=60 512w" style={{aspectRatio: '16 / 9'}}/></a></div></div>} text="Kolla på alla fina bilder från festen!" title="Nyårsafton 2023"/></>}
23
+ vignetteTargetUrl="/om/svensk-politik/"
24
+ vignetteText="Svensk politik"
25
+ />
26
+ ```
package/components/teaser-text-on-image/README-NJK.md ADDED
@@ -0,0 +1,40 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
2
+ - Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
3
+ - Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)
4
+
5
+ ----
6
+
7
+ # teaser-text-on-image
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |title | String | yes | | | Heading of the teaser |
14
+ |targetLink | String | yes | | | Target URL for the teaser |
15
+ |text | String | no | | | Teaser subtext |
16
+ |vignette | String | no | | | Top text in the teaser |
17
+ |mediaHtml | HTML String | yes | | | Main image |
18
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
+ |classNames | String | no | | | Ex. "my-special-class" |
20
+ |~forcePx~ | | | | | Not supported |
21
+
22
+ ## Minimum requirement example
23
+ These are copy paste friendly examples to quickliy get started using a component.
24
+
25
+ ### Nunjucks
26
+ ```html
27
+ {% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}
28
+
29
+ {{ TeaserTextOnImage({
30
+ title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
31
+ targetLink: "https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/",
32
+ text: "Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent.",
33
+ mediaHtml: "text-on-image",
34
+ })}}
35
+ ```
36
+
37
+ ### SCSS
38
+ ```scss
39
+ @use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
40
+ ```
package/components/teaser-text-on-image/README.md CHANGED
@@ -1,40 +1,29 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
2
- - Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
3
- - Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)
4
-
5
- ----
6
-
7
- # teaser-text-on-image
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |title | String | yes | | | Heading of the teaser |
14
- |targetLink | String | yes | | | Target URL for the teaser |
15
- |text | String | no | | | Teaser subtext |
16
- |vignette | String | no | | | Top text in the teaser |
17
- |mediaHtml | HTML String | yes | | | Main image |
18
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
19
- |classNames | String | no | | | Ex. "my-special-class" |
20
- |~forcePx~ | | | | | Not supported |
21
-
22
- ## Minimum requirement example
23
- These are copy paste friendly examples to quickliy get started using a component.
24
-
25
- ### Nunjucks
26
- ```html
27
- {% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}
28
-
29
- {{ TeaserTextOnImage({
30
- title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
31
- targetLink: "https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/",
32
- text: "Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent.",
33
- mediaHtml: "text-on-image",
34
- })}}
35
- ```
36
-
37
- ### SCSS
38
- ```scss
39
- @use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
40
- ```
1
+ TeaserTextOnImage
2
+ =================
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
5
+ * Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
6
+
7
+ The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-text-on-image)/teaser-text-on-image.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | classNames | Ex. "my-special-class"<br />string | \- |
12
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
13
+ | targetLink\* | Target URL for the teaser<br />string | \- |
14
+ | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
15
+ | title\* | Heading of the teaser<br />string | \- |
16
+ | text | Teaser subtext<br />string | \- |
17
+ | vignette | Top text in the teaser<br />string | \- |
18
+ | media | Main image or other media<br />ComponentChild | \- |
19
+ | isItalicHeadline | If the headline should be italic<br />boolean | \- |
20
+
21
+ ```jsx
22
+ <TeaserTextOnImage
23
+ media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="" className="picture picture--placeholder" sizes="1010px" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg?io=1&amp;width=1010 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg?io=1&amp;width=2020&amp;quality=60 2020w" style={{aspectRatio: '2 / 3'}}/>}/>}
24
+ targetLink="https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/"
25
+ text="Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent."
26
+ title="Ludmila Engquist: 'Det skulle kännas fel att dö utan att ha förklarat sig'"
27
+ vignette="DN Intervju"
28
+ />
29
+ ```
package/components/teaser-text-on-image/teaser-text-on-image.njk CHANGED
@@ -16,7 +16,7 @@
16
16
  }) %}
17
17
  <div class="{{ componentClassName + '__content'}}">
18
18
  <div class="{{ componentClassName + '__media' }}">
19
- {{ params.mediaHtml }}
19
+ {{ params.mediaHtml | safe }}
20
20
  </div>
21
21
 
22
22
  <div class="{{ componentClassName + '__text-content'}}">
@@ -25,7 +25,7 @@
25
25
  {{ params.vignette }}
26
26
  </p>
27
27
  {% endif %}
28
-
28
+
29
29
  <h2 class="{{ componentClassName + '__title'}} {{ componentClassName + '__title--italic' if params.isItalicHeadline}}">
30
30
  {{ params.title }}
31
31
  </h2>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.41",
3
+ "version": "32.7.43-beta.0",
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/teaser-card/teaser-card.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface TeaserCardsProps extends SharedProps {
4
4
  areaType?: 'main' | 'right' | 'bauta' | 'bautaxl';
5
5
  targetLink?: string;
6
6
  theme?: 'kultur' | 'nyheter';
7
- children: ComponentChildren;
7
+ children?: ComponentChildren;
8
8
  }
9
9
  /**
10
10
  * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
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 { ComponentChildren } from \"preact\";\n\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface TeaserCardsProps extends SharedProps {\n areaType?: 'main' | 'right' | 'bauta' | 'bautaxl';\n targetLink?: string;\n theme?: 'kultur' | 'nyheter';\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', classNames, attributes, children }: TeaserCardsProps) => {\n const componentClassName = 'ds-teaser';\n\n const classes = formatClassString([\n componentClassName,\n areaType && `${componentClassName}--${areaType}`,\n areaType == 'bauta' && 'ds-dark',\n `ds-theme--${theme}`,\n classNames,\n ])\n\n if (targetLink) {\n return (\n <a className={classes} href={targetLink } {...attributes}>\n { children }\n </a>\n );\n }\n\n return (\n <div className={classes}{...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 { ComponentChildren } from \"preact\";\n\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface TeaserCardsProps extends SharedProps {\n areaType?: 'main' | 'right' | 'bauta' | 'bautaxl';\n targetLink?: string;\n theme?: 'kultur' | 'nyheter';\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', classNames, attributes, children }: TeaserCardsProps) => {\n const componentClassName = 'ds-teaser';\n\n const classes = formatClassString([\n componentClassName,\n areaType && `${componentClassName}--${areaType}`,\n areaType == 'bauta' && 'ds-dark',\n `ds-theme--${theme}`,\n classNames,\n ])\n\n if (targetLink) {\n return (\n <a className={classes} href={targetLink } {...attributes}>\n { children }\n </a>\n );\n }\n\n return (\n <div className={classes}{...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;;;AC8BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;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,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;",
6
6
  "names": []
7
7
  }