@bonniernews/dn-design-system-web 33.0.4 → 33.0.6

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 (22) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/components/footer/README.md +4 -4
  3. package/components/group-header/README.md +1 -0
  4. package/components/teaser-list-swipe/README.md +1 -0
  5. package/components/teaser-longlife/teaser-longlife.scss +6 -0
  6. package/components/teaser-native/teaser-native.scss +6 -0
  7. package/components/teaser-slideshow/README.md +1 -1
  8. package/components/teaser-split/teaser-split.scss +6 -0
  9. package/components/teaser-text-on-image/teaser-text-on-image.scss +6 -0
  10. package/package.json +1 -1
  11. package/preact/components/group-header/group-header.d.ts +3 -1
  12. package/preact/components/group-header/group-header.js +5 -4
  13. package/preact/components/group-header/group-header.js.map +2 -2
  14. package/preact/components/link-box/link-box.js +5 -4
  15. package/preact/components/link-box/link-box.js.map +2 -2
  16. package/preact/components/teaser-list-swipe/teaser-list-swipe.d.ts +3 -1
  17. package/preact/components/teaser-list-swipe/teaser-list-swipe.js +12 -9
  18. package/preact/components/teaser-list-swipe/teaser-list-swipe.js.map +2 -2
  19. package/preact/components/teaser-list-vertical/teaser-list-vertical.js +5 -4
  20. package/preact/components/teaser-list-vertical/teaser-list-vertical.js.map +2 -2
  21. package/preact/components/teaser-package/teaser-package.js +5 -4
  22. package/preact/components/teaser-package/teaser-package.js.map +2 -2
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [33.0.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@33.0.5...@bonniernews/dn-design-system-web@33.0.6) (2025-09-15)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** fix issue with test in dev ([#1893](https://github.com/BonnierNews/dn-design-system/issues/1893)) ([1ce6d65](https://github.com/BonnierNews/dn-design-system/commit/1ce6d65afddea575ff70db96d84d1c8be67061c7))
13
+ * **web:** fix teaser native hover effect bug ([#1892](https://github.com/BonnierNews/dn-design-system/issues/1892)) ([03efc3c](https://github.com/BonnierNews/dn-design-system/commit/03efc3ccae30bf6d3f4ee1d77b7368757305ae77))
14
+
15
+ ## [33.0.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@33.0.4...@bonniernews/dn-design-system-web@33.0.5) (2025-09-10)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** add channel as prop ([#1889](https://github.com/BonnierNews/dn-design-system/issues/1889)) ([b37ad33](https://github.com/BonnierNews/dn-design-system/commit/b37ad33d6c711517ac56de9f8b68a63d9125d0ca))
21
+
7
22
  ## [33.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@33.0.3...@bonniernews/dn-design-system-web@33.0.4) (2025-09-09)
8
23
 
9
24
 
package/components/footer/README.md CHANGED
@@ -30,28 +30,28 @@ The component will not include styling by itself. Make sure to include the right
30
30
  attributes: {
31
31
  rel: 'nofollow'
32
32
  },
33
- classNames: 'hidden-mobile',
33
+ classNames: 'story-hidden-mobile',
34
34
  text: 'Mobil'
35
35
  },
36
36
  {
37
37
  attributes: {
38
38
  rel: 'nofollow'
39
39
  },
40
- classNames: 'hidden-tablet',
40
+ classNames: 'story-hidden-tablet',
41
41
  text: 'Tablet'
42
42
  },
43
43
  {
44
44
  attributes: {
45
45
  rel: 'nofollow'
46
46
  },
47
- classNames: 'hidden-desktop',
47
+ classNames: 'story-hidden-desktop',
48
48
  text: 'Webb'
49
49
  },
50
50
  {
51
51
  attributes: {
52
52
  id: 'site-footer__cookie-settings'
53
53
  },
54
- classNames: 'hidden-tablet',
54
+ classNames: 'story-hidden-tablet',
55
55
  text: 'Cookie-inställningar'
56
56
  }
57
57
  ]}
package/components/group-header/README.md CHANGED
@@ -21,6 +21,7 @@ The component will not include styling by itself. Make sure to include the right
21
21
  | toggleLoading | `loading` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
22
22
  | toggleClassNames | `classNames` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
23
23
  | toggleAttributes | `attributes` parameter to ToggleButton (only for type `toggle`)<br />{ \[key: string\]: string; } | { } |
24
+ | channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
24
25
  | classNames | Ex. "my-special-class"<br />string | \- |
25
26
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
26
27
 
package/components/teaser-list-swipe/README.md CHANGED
@@ -19,6 +19,7 @@ The component will not include styling by itself. Make sure to include the right
19
19
  | groupHeaderToggleSelected | Is toggle button selected or not<br />boolean | false |
20
20
  | groupHeaderToggleClassNames | Class names for toggle button<br />string | \- |
21
21
  | groupHeaderToggleAttributes | Attributes for toggle button. Ex. { "data-entity-id": "dn.epi.434" }<br />Record<string, string> | { } |
22
+ | channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
22
23
  | classNames | Ex. "my-special-class"<br />string | \- |
23
24
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
24
25
 
package/components/teaser-longlife/teaser-longlife.scss CHANGED
@@ -40,6 +40,12 @@
40
40
  left: 0;
41
41
  z-index: 2;
42
42
  padding: ds-spacing($ds-s-100);
43
+
44
+ @include ds-hover(true) {
45
+ .ds-teaser__title {
46
+ @include ds-underline();
47
+ }
48
+ }
43
49
  }
44
50
 
45
51
  &:not(:has(.ds-teaser-image)) {
package/components/teaser-native/teaser-native.scss CHANGED
@@ -20,6 +20,12 @@
20
20
  .ds-teaser__content {
21
21
  display: block;
22
22
  padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
23
+
24
+ @include ds-hover(true) {
25
+ .ds-teaser__title {
26
+ @include ds-underline();
27
+ }
28
+ }
23
29
  }
24
30
 
25
31
  .ds-teaser__title {
package/components/teaser-slideshow/README.md CHANGED
@@ -19,7 +19,7 @@ The component will not include styling by itself. Make sure to include the right
19
19
 
20
20
  ```jsx
21
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>}
22
+ media={<>--Gallery ComponentChild--</>}
23
23
  text="Kolla på alla fina bilder från festen!"
24
24
  title="Nyårsafton 2023"
25
25
  />
package/components/teaser-split/teaser-split.scss CHANGED
@@ -41,6 +41,12 @@
41
41
 
42
42
  @include ds-teaser-focus(4px);
43
43
 
44
+ @include ds-hover(true) {
45
+ .ds-teaser__title {
46
+ @include ds-underline();
47
+ }
48
+ }
49
+
44
50
  @include ds-mq-largest-breakpoint(mobile) {
45
51
  width: calc(50% - ds-spacing($ds-s-100) / 2);
46
52
  flex: auto;
package/components/teaser-text-on-image/teaser-text-on-image.scss CHANGED
@@ -22,6 +22,12 @@
22
22
  background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
23
23
  z-index: 2;
24
24
  }
25
+
26
+ @include ds-hover(true) {
27
+ .ds-teaser__title {
28
+ @include ds-underline();
29
+ }
30
+ }
25
31
  }
26
32
 
27
33
  .ds-teaser__title,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "33.0.4",
3
+ "version": "33.0.6",
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/group-header/group-header.d.ts CHANGED
@@ -30,6 +30,8 @@ export interface GroupHeaderProps extends SharedProps {
30
30
  toggleAttributes?: {
31
31
  [key: string]: string;
32
32
  };
33
+ /** Used to include or exclude elements based on channel */
34
+ channel?: 'mobile' | 'tablet' | 'desktop';
33
35
  }
34
36
  /**
35
37
  * - GitHub: [BonnierNews/dn-design-system/web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
@@ -38,4 +40,4 @@ export interface GroupHeaderProps extends SharedProps {
38
40
  * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
39
41
  * `@use '@bonniernews/dn-design-system-web/components/group-header/group-header.scss'`
40
42
  */
41
- export declare function GroupHeader({ title, type, variant, media, href, linkText, showBottomBorder, toggleText, toggleSelectedText, toggleSelected, toggleLoading, toggleClassNames, toggleAttributes, classNames, attributes, }: GroupHeaderProps): import("preact").JSX.Element;
43
+ export declare function GroupHeader({ title, type, variant, media, href, linkText, showBottomBorder, toggleText, toggleSelectedText, toggleSelected, toggleLoading, toggleClassNames, toggleAttributes, classNames, attributes, channel, }: GroupHeaderProps): import("preact").JSX.Element;
package/preact/components/group-header/group-header.js CHANGED
@@ -249,7 +249,8 @@ function GroupHeader({
249
249
  toggleClassNames,
250
250
  toggleAttributes = {},
251
251
  classNames,
252
- attributes = {}
252
+ attributes = {},
253
+ channel
253
254
  }) {
254
255
  const componentClassName = "ds-group-header";
255
256
  variant = variant !== "bauta" ? void 0 : variant;
@@ -266,8 +267,8 @@ function GroupHeader({
266
267
  /* @__PURE__ */ jsx7("h2", { className: `${componentClassName}__title`, children: title }),
267
268
  type === "link" && linkText && href && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link`, children: linkText }),
268
269
  type === "icon" && href && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon` }),
269
- type === "arrows" && href && linkText && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link hidden-desktop`, children: linkText }),
270
- type === "arrows" && href && !linkText && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon hidden-desktop` })
270
+ type === "arrows" && href && linkText && channel !== "desktop" && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link`, children: linkText }),
271
+ type === "arrows" && href && !linkText && channel !== "desktop" && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon` })
271
272
  ] });
272
273
  const buttonVariant = variant ? "staticWhite" : "secondaryOutline";
273
274
  return /* @__PURE__ */ jsxs3("div", { className: classes, ...attributes, children: [
@@ -287,7 +288,7 @@ function GroupHeader({
287
288
  attributes: toggleAttributes
288
289
  }
289
290
  ),
290
- type === "arrows" && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__arrows hidden-mobile hidden-tablet`, children: [
291
+ type === "arrows" && channel === "desktop" && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__arrows`, children: [
291
292
  /* @__PURE__ */ jsx7(
292
293
  button_default,
293
294
  {