@bonniernews/dn-design-system-web 32.7.28 → 32.7.30

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 (13) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/components/teaser-slideshow/README-NJK.md +42 -0
  3. package/components/teaser-slideshow/README.md +26 -42
  4. package/package.json +1 -1
  5. package/preact/components/teaser-list-vertical/teaser-list-vertical.d.ts +2 -2
  6. package/preact/components/teaser-list-vertical/teaser-list-vertical.js.map +1 -1
  7. package/preact/components/teaser-slideshow/teaser-slideshow.d.ts +15 -0
  8. package/preact/components/teaser-slideshow/teaser-slideshow.js +106 -0
  9. package/preact/components/teaser-slideshow/teaser-slideshow.js.map +7 -0
  10. package/preact/components/teaser-tipsa/teaser-tipsa.js +60 -4
  11. package/preact/components/teaser-tipsa/teaser-tipsa.js.map +4 -4
  12. package/preact/helpers/teaser.d.ts +21 -0
  13. package/components/teaser-slideshow/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.30](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.29...@bonniernews/dn-design-system-web@32.7.30) (2025-07-10)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** teaser list vertical - absolute imports ([#1830](https://github.com/BonnierNews/dn-design-system/issues/1830)) ([25001f1](https://github.com/BonnierNews/dn-design-system/commit/25001f1af36de961980cfef24820c6d4f21f09a9))
13
+
14
+ ## [32.7.29](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.28...@bonniernews/dn-design-system-web@32.7.29) (2025-07-10)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** teaser-slideshow as TSX component ([#1823](https://github.com/BonnierNews/dn-design-system/issues/1823)) ([5a8e3d8](https://github.com/BonnierNews/dn-design-system/commit/5a8e3d80c6a37a0588d4f6084b4d35a24876c583))
20
+
7
21
  ## [32.7.28](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.27...@bonniernews/dn-design-system-web@32.7.28) (2025-07-10)
8
22
 
9
23
 
package/components/teaser-slideshow/README-NJK.md ADDED
@@ -0,0 +1,42 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-slideshow](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-slideshow)
2
+ - Storybook: [TeaserSlideshow](https://designsystem.dn.se/?path=/docs/section-teaserslideshow--docs)
3
+ - Storybook (Latest): [TeaserSlideshow](https://designsystem-latest.dn.se/?path=/docs/section-teaserslideshow--docs)
4
+
5
+ ----
6
+
7
+ # teaser-slideshow
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |title | String | yes | | | Heading of the teaser |
14
+ |text | String | no | | | Teaser subtext |
15
+ |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
16
+ |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
17
+ |mediaHtml | HTML String | no | | | Gallery html |
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
+ NB: this component does not render a link. If a link element is desired, it needs to be inserted through the `mediaHtml` property.
23
+
24
+ ## Minimum requirement example
25
+
26
+ ### Nunjucks
27
+
28
+ These are copy paste friendly examples to quickliy get started using a component.
29
+
30
+ ```html
31
+ {% from '@bonniernews/dn-design-system-web/components/teaser-slideshow/teaser-slideshow.njk' import TeaserSlideshow %}
32
+
33
+ {{ TeaserSlideshow({
34
+ title: 'Nyårsafton 2023',
35
+ text: 'Kolla på alla fina bilder från festen!'
36
+ })}}
37
+ ```
38
+
39
+ ### SCSS
40
+ ```scss
41
+ @use "@bonniernews/dn-design-system-web/components/teaser-slideshow/teaser-slideshow" as *;
42
+ ```
package/components/teaser-slideshow/README.md CHANGED
@@ -1,42 +1,26 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-slideshow](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-slideshow)
2
- - Storybook: [TeaserSlideshow](https://designsystem.dn.se/?path=/docs/section-teaserslideshow--docs)
3
- - Storybook (Latest): [TeaserSlideshow](https://designsystem-latest.dn.se/?path=/docs/section-teaserslideshow--docs)
4
-
5
- ----
6
-
7
- # teaser-slideshow
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |title | String | yes | | | Heading of the teaser |
14
- |text | String | no | | | Teaser subtext |
15
- |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
16
- |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
17
- |mediaHtml | HTML String | no | | | Gallery html |
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
- NB: this component does not render a link. If a link element is desired, it needs to be inserted through the `mediaHtml` property.
23
-
24
- ## Minimum requirement example
25
-
26
- ### Nunjucks
27
-
28
- These are copy paste friendly examples to quickliy get started using a component.
29
-
30
- ```html
31
- {% from '@bonniernews/dn-design-system-web/components/teaser-slideshow/teaser-slideshow.njk' import TeaserSlideshow %}
32
-
33
- {{ TeaserSlideshow({
34
- title: 'Nyårsafton 2023',
35
- text: 'Kolla på alla fina bilder från festen!'
36
- })}}
37
- ```
38
-
39
- ### SCSS
40
- ```scss
41
- @use "@bonniernews/dn-design-system-web/components/teaser-slideshow/teaser-slideshow" as *;
42
- ```
1
+ TeaserSlideshow
2
+ ===============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-slideshow](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-slideshow)
5
+ * Storybook: [TeaserSlideshow](https://designsystem.dn.se/?path=/docs/section-teaserslideshow--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-slideshow/teaser-slideshow.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
+ | areaType | "right", "bauta", "bautaxl" | \- |
14
+ | targetLink | string | \- |
15
+ | theme | "kultur", "nyheter" | \- |
16
+ | title\* | Heading of the teaser<br />string | \- |
17
+ | text | Teaser subtext<br />string | \- |
18
+ | media | Main image or other media<br />ComponentChild | \- |
19
+
20
+ ```jsx
21
+ <TeaserSlideshow
22
+ 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>}
23
+ text="Kolla på alla fina bilder från festen!"
24
+ title="Nyårsafton 2023"
25
+ />
26
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.28",
3
+ "version": "32.7.30",
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-list-vertical/teaser-list-vertical.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { SharedProps } from '../../assets/types/shared-props';
2
- import { TeaserProps } from '../../assets/types/teaser-props';
1
+ import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
2
+ import { TeaserProps } from '@bonniernews/dn-design-system-web/assets/types/teaser-props.ts';
3
3
  interface TeaserListVerticalProps extends SharedProps {
4
4
  /** List title */
5
5
  listTitle: string;