@bonniernews/dn-design-system-web 32.7.24 → 32.7.25

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 (26) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/assets/types/teaser-props.ts +44 -0
  3. package/components/group-header/README.md +1 -1
  4. package/components/teaser-counter/README.md +5 -5
  5. package/components/teaser-counter/teaser-counter.njk +26 -24
  6. package/components/teaser-counter/teaser-counter.scss +2 -1
  7. package/components/teaser-footer/README.md +2 -2
  8. package/components/teaser-large/README-NJK.md +52 -0
  9. package/components/teaser-large/README.md +44 -52
  10. package/components/teaser-large/teaser-large.njk +1 -1
  11. package/components/teaser-onsite/README.md +7 -7
  12. package/package.json +1 -1
  13. package/preact/assets/types/teaser-props.d.ts +42 -0
  14. package/preact/components/teaser-counter/teaser-counter.d.ts +4 -6
  15. package/preact/components/teaser-counter/teaser-counter.js +28 -15
  16. package/preact/components/teaser-counter/teaser-counter.js.map +4 -4
  17. package/preact/components/teaser-footer/teaser-footer.d.ts +2 -4
  18. package/preact/components/teaser-footer/teaser-footer.js +9 -6
  19. package/preact/components/teaser-footer/teaser-footer.js.map +2 -2
  20. package/preact/components/teaser-large/teaser-large.d.ts +9 -0
  21. package/preact/components/teaser-large/teaser-large.js +177 -0
  22. package/preact/components/teaser-large/teaser-large.js.map +7 -0
  23. package/preact/components/teaser-onsite/teaser-onsite.d.ts +4 -8
  24. package/preact/components/teaser-onsite/teaser-onsite.js +60 -16
  25. package/preact/components/teaser-onsite/teaser-onsite.js.map +4 -4
  26. package/components/teaser-large/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.25](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.24...@bonniernews/dn-design-system-web@32.7.25) (2025-07-10)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** teaser large as tsx ([#1821](https://github.com/BonnierNews/dn-design-system/issues/1821)) ([d106246](https://github.com/BonnierNews/dn-design-system/commit/d106246f2e9a2e3b3a65d5d7171b19270c396c13))
13
+
7
14
  ## [32.7.24](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.23...@bonniernews/dn-design-system-web@32.7.24) (2025-07-09)
8
15
 
9
16
 
package/assets/types/teaser-props.ts ADDED
@@ -0,0 +1,44 @@
1
+ import { ComponentChild } from 'preact'
2
+ import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'
3
+
4
+ export interface TeaserProps extends SharedProps {
5
+ /** Heading of the teaser */
6
+ title: string;
7
+ /** Target URL for the teaser */
8
+ targetLink: string;
9
+ /** Variant of the teaser */
10
+ variant?: "default" | "podcast";
11
+ /** The area where the column is rendered */
12
+ areaType?: "right" | "bauta" | "bautaxl";
13
+ /** The theme-class to apply to the teaser */
14
+ theme?: "nyheter" | "kultur";
15
+ /** Teaser subtext */
16
+ text?: string;
17
+ /** Top text in the teaser */
18
+ vignette?: string;
19
+ /** Text before the heading */
20
+ highlight?: string;
21
+ /** Red text before the text */
22
+ sticker?: string;
23
+ /** Main image or other media */
24
+ media?: ComponentChild;
25
+ /** Image of the author */
26
+ bylinePicture?: ComponentChild;
27
+ /** If the headline should be italic */
28
+ isItalicHeadline?: boolean;
29
+ /** If the headline should be large (only if `isItalicHeadline` is true) */
30
+ isLargeHeadline?: boolean;
31
+ /** If there should be a flashing ball before the text */
32
+ isFlashingDot?: boolean;
33
+ /** Publication time text */
34
+ publicationTime?: string;
35
+ /** Duration of podcast */
36
+ duration?: string;
37
+ /** Byline aspect ratio */
38
+ bylineAspectRatio?: string;
39
+ /** Byline HTML */
40
+ bylineHtml?: string;
41
+ /** Shows in teaser footer */
42
+ sectionName?: string;
43
+ }
44
+
package/components/group-header/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
  | title\* | The title text<br />string | \- |
12
- | type | The type of interactive element added to the header<br />"toggle", "link", "icon", "arrows" | "icon" |
12
+ | type | The type of interactive element added to the header<br />"link", "toggle", "icon", "arrows" | "icon" |
13
13
  | variant | The design variant, if not bauta or bautaxl the group header will get the 'standard' design<br />"bauta", "bauataxl" | \- |
14
14
  | media | The image element for the header<br />ComponentChild | \- |
15
15
  | href | If given, the title is rendered as a link<br />string | \- |
package/components/teaser-counter/README.md CHANGED
@@ -8,22 +8,22 @@ The component will not include styling by itself. Make sure to include the right
8
8
 
9
9
  | Name | Description | Default |
10
10
  |:--- | :--- | :--- |
11
- | title\* | string | \- |
12
11
  | counterText\* | string | \- |
13
12
  | counterNumber\* | number | \- |
14
13
  | subtitle | string | \- |
15
- | areaType | "right", "bauta" | \- |
16
- | targetLink | string | \- |
17
- | mediaHtml | string | \- |
18
14
  | classNames | Ex. "my-special-class"<br />string | \- |
19
15
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
16
+ | targetLink\* | Target URL for the teaser<br />string | \- |
17
+ | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
18
+ | title\* | Heading of the teaser<br />string | \- |
19
+ | media | Main image or other media<br />ComponentChild | \- |
20
20
 
21
21
  ```jsx
22
22
  <TeaserCounter
23
23
  classNames="test-class"
24
24
  counterNumber={124}
25
25
  counterText="DAGAR I <br> FÄNGELSE"
26
- mediaHtml="<div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&amp;crop=3:4,smart&amp;height=184' alt='' aria-hidden='true'></div>"
26
+ 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'}}/>}
27
27
  subtitle="fängslad i Turkiet för sin journalistik"
28
28
  title="Joakim Medin"
29
29
  />
package/components/teaser-counter/teaser-counter.njk CHANGED
@@ -16,32 +16,34 @@
16
16
  classNames: extraClasses
17
17
  }) %}
18
18
  <div class="ds-teaser__content">
19
- {% if params.title %}
20
- <h2 class="{{ componentClassName + '__title' }}">
21
- <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
22
- {% if params.subtitle %}
23
- – {{ params.subtitle }}
24
- {% endif %}
25
- </h2>
26
- {% endif %}
19
+ <div class="ds-teaser__content-inner">
20
+ {% if params.title %}
21
+ <h2 class="{{ componentClassName + '__title' }}">
22
+ <span class="{{ componentClassName + '__title--highlighted' }}">{{ params.title }}</span>
23
+ {% if params.subtitle %}
24
+ – {{ params.subtitle }}
25
+ {% endif %}
26
+ </h2>
27
+ {% endif %}
27
28
 
28
- {% if params.counterNumber is not null or params.counterText %}
29
- <div class="{{ componentClassName + '__counter-wrapper' }}">
30
- {% if params.counterNumber is not null %}
31
- <ul class="{{ componentClassName + '__list' }}">
32
- {% for digit in params.counterNumber | string %}
33
- <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
34
- {% endfor %}
35
- </ul>
36
- {% endif %}
29
+ {% if params.counterNumber is not null or params.counterText %}
30
+ <div class="{{ componentClassName + '__counter-wrapper' }}">
31
+ {% if params.counterNumber is not null %}
32
+ <ul class="{{ componentClassName + '__list' }}">
33
+ {% for digit in params.counterNumber | string %}
34
+ <li class="{{ componentClassName + '__item' }}">{{ digit }}</li>
35
+ {% endfor %}
36
+ </ul>
37
+ {% endif %}
37
38
 
38
- {% if params.counterText %}
39
- <p class="{{ componentClassName + '__counter-text' }}">
40
- {{ params.counterText | safe }}
41
- </p>
42
- {% endif %}
43
- </div>
44
- {% endif %}
39
+ {% if params.counterText %}
40
+ <p class="{{ componentClassName + '__counter-text' }}">
41
+ {{ params.counterText | safe }}
42
+ </p>
43
+ {% endif %}
44
+ </div>
45
+ {% endif %}
46
+ </div>
45
47
  </div>
46
48
 
47
49
  {% if params.countdown %}
package/components/teaser-counter/teaser-counter.scss CHANGED
@@ -11,10 +11,11 @@ a.ds-teaser--counter.ds-teaser {
11
11
  gap: ds-spacing($ds-s-075);
12
12
  padding: ds-spacing($ds-s-075);
13
13
 
14
- .ds-teaser__content {
14
+ .ds-teaser__content-inner {
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  gap: ds-spacing($ds-s-100);
18
+ height: 100%;
18
19
  justify-content: space-between;
19
20
  }
20
21
 
package/components/teaser-footer/README.md CHANGED
@@ -6,8 +6,8 @@ TeaserFooter
6
6
 
7
7
  | Name | Description | Default |
8
8
  |:--- | :--- | :--- |
9
- | variant\* | The variant to render<br />"informationText", "podcast" | \- |
10
- | publicationTime | The time of publication<br />string | \- |
9
+ | variant\* | "default", "podcast", "informationText" | \- |
10
+ | publicationTime | string | \- |
11
11
  | sectionName | Name of section the teaser is connected to<br />string | \- |
12
12
  | duration | The length of the podcast<br />string | \- |
13
13
  | classNames | Ex. "my-special-class"<br />string | \- |
package/components/teaser-large/README-NJK.md ADDED
@@ -0,0 +1,52 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
2
+ - Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--docs)
3
+ - Storybook (Latest): [TeaserLarge](https://designsystem-latest.dn.se/?path=/docs/section-teaserlarge--docs)
4
+
5
+ ----
6
+
7
+ # teaser-large
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
+ |variant | String | no | "default" or "podcast" | "default" | |
16
+ |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
+ |text | String | no | | | Teaser subtext |
19
+ |vignette | String | no | | | Top text in the teaser |
20
+ |highlight | String | no | | | Text before the heading |
21
+ |sticker | String | no | | | Red text before the text |
22
+ |mediaHtml | HTML String | no | | | Main image or other media |
23
+ |bylineHtml | HTML String | no | | | Side image of the author |
24
+ |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
25
+ |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if `isItalicHeadline` is true. |
26
+ |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
27
+ |publicationTime | string | no | | null | Publication time text. |
28
+ |duration | string | no | | null | Duration of podcast. |
29
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
30
+ |classNames | String | no | | | Ex. "my-special-class" |
31
+ |~forcePx~ | | | | | Not supported |
32
+
33
+ ## Minimum requirement example
34
+
35
+ ### Nunjucks
36
+
37
+ These are copy paste friendly examples to quickliy get started using a component.
38
+
39
+ ```html
40
+ {% from '@bonniernews/dn-design-system-web/components/teaser-large/teaser-large.njk' import TeaserLarge %}
41
+
42
+ {{ TeaserLarge({
43
+ title: "Upp på börsen",
44
+ text: "Det ser ganska normalt ut på Stockholmsbörsen.",
45
+ highlight: "Ekonominytt:"
46
+ })}}
47
+ ```
48
+
49
+ ### SCSS
50
+ ```scss
51
+ @use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
52
+ ```
package/components/teaser-large/README.md CHANGED
@@ -1,52 +1,44 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
2
- - Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--docs)
3
- - Storybook (Latest): [TeaserLarge](https://designsystem-latest.dn.se/?path=/docs/section-teaserlarge--docs)
4
-
5
- ----
6
-
7
- # teaser-large
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
- |variant | String | no | "default" or "podcast" | "default" | |
16
- |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
17
- |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
18
- |text | String | no | | | Teaser subtext |
19
- |vignette | String | no | | | Top text in the teaser |
20
- |highlight | String | no | | | Text before the heading |
21
- |sticker | String | no | | | Red text before the text |
22
- |mediaHtml | HTML String | no | | | Main image or other media |
23
- |bylineHtml | HTML String | no | | | Side image of the author |
24
- |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
25
- |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if `isItalicHeadline` is true. |
26
- |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
27
- |publicationTime | string | no | | null | Publication time text. |
28
- |duration | string | no | | null | Duration of podcast. |
29
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
30
- |classNames | String | no | | | Ex. "my-special-class" |
31
- |~forcePx~ | | | | | Not supported |
32
-
33
- ## Minimum requirement example
34
-
35
- ### Nunjucks
36
-
37
- These are copy paste friendly examples to quickliy get started using a component.
38
-
39
- ```html
40
- {% from '@bonniernews/dn-design-system-web/components/teaser-large/teaser-large.njk' import TeaserLarge %}
41
-
42
- {{ TeaserLarge({
43
- title: "Upp på börsen",
44
- text: "Det ser ganska normalt ut på Stockholmsbörsen.",
45
- highlight: "Ekonominytt:"
46
- })}}
47
- ```
48
-
49
- ### SCSS
50
- ```scss
51
- @use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
52
- ```
1
+ TeaserLarge
2
+ ===========
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
5
+ * Storybook: [TeaserLarge](https://designsystem.dn.se/?path=/docs/section-teaserlarge--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-large/teaser-large.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | bylinePicture | Image of the author<br />ComponentChild | \- |
12
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
13
+ | classNames | Ex. "my-special-class"<br />string | \- |
14
+ | sectionName | Shows in teaser footer<br />string | \- |
15
+ | bylineHtml | Byline HTML<br />string | \- |
16
+ | bylineAspectRatio | Byline aspect ratio<br />string | \- |
17
+ | duration | Duration of podcast<br />string | \- |
18
+ | publicationTime | Publication time text<br />string | \- |
19
+ | isFlashingDot | If there should be a flashing ball before the text<br />boolean | false |
20
+ | isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | false |
21
+ | isItalicHeadline | If the headline should be italic<br />boolean | false |
22
+ | title\* | Heading of the teaser<br />string | \- |
23
+ | media | Main image or other media<br />ComponentChild | \- |
24
+ | sticker | Red text before the text<br />string | \- |
25
+ | highlight | Text before the heading<br />string | \- |
26
+ | vignette | Top text in the teaser<br />string | \- |
27
+ | text | Teaser subtext<br />string | \- |
28
+ | theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
29
+ | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
30
+ | variant | Variant of the teaser<br />"default", "podcast" | "default" |
31
+ | targetLink\* | Target URL for the teaser<br />string | \- |
32
+
33
+ ```jsx
34
+ <TeaserLarge
35
+ highlight="Large:"
36
+ isLargeHeadline
37
+ media={<TeaserImage byline="Foto: Alexander Mahmoud" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C227:128&crop=227:h;center,top&output-quality=80 227w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80 300w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C454:256&crop=454:h;center,top&output-quality=60 454w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C600:338&crop=600:h;center,top&output-quality=60 600w" style={{aspectRatio: '16 / 9'}}/>}/>}
38
+ sticker="TV"
39
+ targetLink="https://www.dn.se/krigets-svallvagor/"
40
+ text="Rysslandsexperten: Därför anföll han Ukraina • Så har invasionen förändrat världen."
41
+ title="”I kriget kunde Putin ge efter för sina instinkter”"
42
+ vignette="EN PUFF MED ALLT"
43
+ />
44
+ ```
package/components/teaser-large/teaser-large.njk CHANGED
@@ -31,7 +31,7 @@
31
31
  componentClassName + '__media'
32
32
  ] | join(" ") %}
33
33
  <div class="{{ mediaClass }}">
34
- {{ params.mediaHtml }}
34
+ {{ params.mediaHtml | safe }}
35
35
  </div>
36
36
  {% endif %}
37
37
 
package/components/teaser-onsite/README.md CHANGED
@@ -12,18 +12,18 @@ The component will not include styling by itself. Make sure to include the right
12
12
 
13
13
  | Name | Description | Default |
14
14
  |:--- | :--- | :--- |
15
- | areaType | "right", "bauta", "bautaxl" | \- |
16
- | targetLink | string | \- |
17
- | theme | "kultur", "nyheter" | "nyheter" |
18
- | mediaHtml | string | \- |
19
- | title | string | \- |
20
- | text | string | \- |
21
15
  | classNames | Ex. "my-special-class"<br />string | \- |
22
16
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
17
+ | targetLink\* | Target URL for the teaser<br />string | \- |
18
+ | areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
19
+ | title\* | Heading of the teaser<br />string | \- |
20
+ | text | Teaser subtext<br />string | \- |
21
+ | theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
22
+ | media | Main image or other media<br />ComponentChild | \- |
23
23
 
24
24
  ```jsx
25
25
  <TeaserOnSite
26
- mediaHtml="<figure class='ds-teaser-image'><div class='picture picture--placeholder' style='aspect-ratio: 1 / 1;'><img class='picture__img' src='https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&amp;fit=around%7C56:56&amp;crop=56:h;center,top&amp;output-quality=80' alt='' aria-hidden='true'></div></figure>"
26
+ 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'}}/>} />}
27
27
  targetLink="https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/"
28
28
  text="Henrik Brandão Jönsson och Eduardo Leal"
29
29
  title="Azorerna"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.24",
3
+ "version": "32.7.25",
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/assets/types/teaser-props.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import { ComponentChild } from 'preact';
2
+ import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
3
+ export interface TeaserProps extends SharedProps {
4
+ /** Heading of the teaser */
5
+ title: string;
6
+ /** Target URL for the teaser */
7
+ targetLink: string;
8
+ /** Variant of the teaser */
9
+ variant?: "default" | "podcast";
10
+ /** The area where the column is rendered */
11
+ areaType?: "right" | "bauta" | "bautaxl";
12
+ /** The theme-class to apply to the teaser */
13
+ theme?: "nyheter" | "kultur";
14
+ /** Teaser subtext */
15
+ text?: string;
16
+ /** Top text in the teaser */
17
+ vignette?: string;
18
+ /** Text before the heading */
19
+ highlight?: string;
20
+ /** Red text before the text */
21
+ sticker?: string;
22
+ /** Main image or other media */
23
+ media?: ComponentChild;
24
+ /** Image of the author */
25
+ bylinePicture?: ComponentChild;
26
+ /** If the headline should be italic */
27
+ isItalicHeadline?: boolean;
28
+ /** If the headline should be large (only if `isItalicHeadline` is true) */
29
+ isLargeHeadline?: boolean;
30
+ /** If there should be a flashing ball before the text */
31
+ isFlashingDot?: boolean;
32
+ /** Publication time text */
33
+ publicationTime?: string;
34
+ /** Duration of podcast */
35
+ duration?: string;
36
+ /** Byline aspect ratio */
37
+ bylineAspectRatio?: string;
38
+ /** Byline HTML */
39
+ bylineHtml?: string;
40
+ /** Shows in teaser footer */
41
+ sectionName?: string;
42
+ }
package/preact/components/teaser-counter/teaser-counter.d.ts CHANGED
@@ -1,12 +1,9 @@
1
1
  import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
2
- export interface TeaserCounterProps extends SharedProps {
3
- title: string;
2
+ import { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
3
+ interface TeaserCounterProps extends SharedProps, Pick<TeaserProps, 'media' | 'title' | 'targetLink' | 'areaType'> {
4
4
  counterText: string;
5
5
  counterNumber: number;
6
6
  subtitle?: string;
7
- areaType?: 'right' | 'bauta';
8
- targetLink?: string;
9
- mediaHtml?: string;
10
7
  }
11
8
  /**
12
9
  * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
@@ -15,4 +12,5 @@ export interface TeaserCounterProps extends SharedProps {
15
12
  * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
16
13
  * `@use '@bonniernews/dn-design-system-web/components/teaser-counter/teaser-counter.scss'`
17
14
  */
18
- export declare const TeaserCounter: ({ areaType, targetLink, classNames, attributes, mediaHtml, counterText, counterNumber, title, subtitle, }: TeaserCounterProps) => import("preact").JSX.Element;
15
+ export declare const TeaserCounter: ({ areaType, targetLink, classNames, attributes, media, counterText, counterNumber, title, subtitle, }: TeaserCounterProps) => import("preact").JSX.Element;
16
+ export {};
package/preact/components/teaser-counter/teaser-counter.js CHANGED
@@ -20,24 +20,37 @@ var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attribu
20
20
  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
21
21
  };
22
22
 
23
+ // ../src/foundations/icons/sprite.svg
24
+ import { h } from "preact";
25
+ import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
26
+
27
+ // ../src/components/icon-sprite/icon-sprite.tsx
28
+ import { jsx as jsx3 } from "preact/jsx-runtime";
29
+
30
+ // ../src/components/teaser-dot/teaser-dot.tsx
31
+ import { jsx as jsx4 } from "preact/jsx-runtime";
32
+
23
33
  // ../src/helpers/teaser.tsx
24
- import { jsx as jsx2 } from "preact/jsx-runtime";
25
- var Media = ({ mediaHtml, rounded }) => {
34
+ import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "preact/jsx-runtime";
35
+ var Media = ({ media, rounded }) => {
26
36
  const classNames = "ds-teaser__media" + (rounded ? " ds-teaser__media--rounded" : "");
27
- return mediaHtml ? /* @__PURE__ */ jsx2("div", { className: classNames, dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
37
+ return media ? /* @__PURE__ */ jsx5("div", { className: classNames, children: media }) : null;
28
38
  };
29
- var Content = ({ children }) => {
30
- return /* @__PURE__ */ jsx2("div", { className: "ds-teaser__content", children });
39
+ var Content = ({ children, bylinePicture }) => {
40
+ return /* @__PURE__ */ jsxs2("div", { className: "ds-teaser__content", children: [
41
+ /* @__PURE__ */ jsx5("div", { className: "ds-teaser__content-inner", children }),
42
+ bylinePicture && /* @__PURE__ */ jsx5("div", { className: "ds-teaser__byline", children: bylinePicture })
43
+ ] });
31
44
  };
32
45
 
33
46
  // ../src/components/teaser-counter/teaser-counter.tsx
34
- import { jsx as jsx3, jsxs } from "preact/jsx-runtime";
47
+ import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
35
48
  var TeaserCounter = ({
36
49
  areaType,
37
50
  targetLink,
38
51
  classNames,
39
52
  attributes,
40
- mediaHtml,
53
+ media,
41
54
  counterText,
42
55
  counterNumber,
43
56
  title,
@@ -46,15 +59,15 @@ var TeaserCounter = ({
46
59
  const componentClassName = "ds-teaser--counter";
47
60
  const classes = formatClassString([componentClassName, classNames]);
48
61
  const counterNumberIsValid = counterNumber !== void 0 && counterNumber !== null;
49
- return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, classNames: classes, attributes }, children: [
50
- /* @__PURE__ */ jsxs(Content, { children: [
51
- title && /* @__PURE__ */ jsxs("h2", { className: `${componentClassName}__title`, children: [
52
- /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__title--highlighted`, children: title }),
62
+ return /* @__PURE__ */ jsxs3(TeaserCard, { ...{ areaType, targetLink, classNames: classes, attributes }, children: [
63
+ /* @__PURE__ */ jsxs3(Content, { children: [
64
+ title && /* @__PURE__ */ jsxs3("h2", { className: `${componentClassName}__title`, children: [
65
+ /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__title--highlighted`, children: title }),
53
66
  subtitle && ` \u2013 ${subtitle}`
54
67
  ] }),
55
- (counterNumberIsValid || counterText) && /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__counter-wrapper`, children: [
56
- counterNumberIsValid && /* @__PURE__ */ jsx3("ul", { className: `${componentClassName}__list`, children: counterNumber.toString().split("").map((digit, index) => /* @__PURE__ */ jsx3("li", { className: `${componentClassName}__item`, children: digit }, index)) }),
57
- counterText && /* @__PURE__ */ jsx3(
68
+ (counterNumberIsValid || counterText) && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__counter-wrapper`, children: [
69
+ counterNumberIsValid && /* @__PURE__ */ jsx6("ul", { className: `${componentClassName}__list`, children: counterNumber.toString().split("").map((digit, index) => /* @__PURE__ */ jsx6("li", { className: `${componentClassName}__item`, children: digit }, index)) }),
70
+ counterText && /* @__PURE__ */ jsx6(
58
71
  "p",
59
72
  {
60
73
  className: `${componentClassName}__counter-text`,
@@ -63,7 +76,7 @@ var TeaserCounter = ({
63
76
  )
64
77
  ] })
65
78
  ] }),
66
- /* @__PURE__ */ jsx3(Media, { ...{ mediaHtml } })
79
+ /* @__PURE__ */ jsx6(Media, { ...{ media } })
67
80
  ] });
68
81
  };
69
82
  export {