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

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+* **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))
+
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+
 ## [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)
 
 

package/components/footer/README.md

@@ -30,28 +30,28 @@ The component will not include styling by itself. Make sure to include the right
       attributes: {
         rel: 'nofollow'
       },
-      classNames: 'hidden-mobile',
+      classNames: 'story-hidden-mobile',
       text: 'Mobil'
     },
     {
       attributes: {
         rel: 'nofollow'
       },
-      classNames: 'hidden-tablet',
+      classNames: 'story-hidden-tablet',
       text: 'Tablet'
     },
     {
       attributes: {
         rel: 'nofollow'
       },
-      classNames: 'hidden-desktop',
+      classNames: 'story-hidden-desktop',
       text: 'Webb'
     },
     {
       attributes: {
         id: 'site-footer__cookie-settings'
       },
-      classNames: 'hidden-tablet',
+      classNames: 'story-hidden-tablet',
       text: 'Cookie-inställningar'
     }
   ]}

package/components/group-header/README.md

@@ -21,6 +21,7 @@ The component will not include styling by itself. Make sure to include the right
 | toggleLoading | `loading` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
 | toggleClassNames | `classNames` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
 | toggleAttributes | `attributes` parameter to ToggleButton (only for type `toggle`)<br />{ \[key: string\]: string; } | { } |
+| channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 

package/components/teaser-list-swipe/README.md

@@ -19,6 +19,7 @@ The component will not include styling by itself. Make sure to include the right
 | groupHeaderToggleSelected | Is toggle button selected or not<br />boolean | false |
 | groupHeaderToggleClassNames | Class names for toggle button<br />string | \- |
 | groupHeaderToggleAttributes | Attributes for toggle button. Ex. { "data-entity-id": "dn.epi.434" }<br />Record<string, string> | { } |
+| channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 

package/components/teaser-longlife/teaser-longlife.scss

@@ -40,6 +40,12 @@
     left: 0;
     z-index: 2;
     padding: ds-spacing($ds-s-100);
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline();
+      }
+    }
   }
 
   &:not(:has(.ds-teaser-image)) {

package/components/teaser-native/teaser-native.scss

@@ -20,6 +20,12 @@
   .ds-teaser__content {
     display: block;
     padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline();
+      }
+    }
   }
 
   .ds-teaser__title {

package/components/teaser-slideshow/README.md

@@ -19,7 +19,7 @@ The component will not include styling by itself. Make sure to include the right
 
 ```jsx
 <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>}
+  media={<>--Gallery ComponentChild--</>}
   text="Kolla på alla fina bilder från festen!"
   title="Nyårsafton 2023"
 />

package/components/teaser-split/teaser-split.scss

@@ -41,6 +41,12 @@
 
     @include ds-teaser-focus(4px);
 
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline();
+      }
+    }
+
     @include ds-mq-largest-breakpoint(mobile) {
       width: calc(50% - ds-spacing($ds-s-100) / 2);
       flex: auto;

package/components/teaser-text-on-image/teaser-text-on-image.scss

@@ -22,6 +22,12 @@
       background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
       z-index: 2;
     }
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline();
+      }
+    }
   }
 
   .ds-teaser__title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "33.0.4",
+  "version": "33.0.6",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/group-header/group-header.d.ts

@@ -30,6 +30,8 @@ export interface GroupHeaderProps extends SharedProps {
     toggleAttributes?: {
         [key: string]: string;
     };
+    /** Used to include or exclude elements based on channel */
+    channel?: 'mobile' | 'tablet' | 'desktop';
 }
 /**
  * - 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 {
  * 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/group-header/group-header.scss'`
  */
-export declare function GroupHeader({ title, type, variant, media, href, linkText, showBottomBorder, toggleText, toggleSelectedText, toggleSelected, toggleLoading, toggleClassNames, toggleAttributes, classNames, attributes, }: GroupHeaderProps): import("preact").JSX.Element;
+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

@@ -249,7 +249,8 @@ function GroupHeader({
   toggleClassNames,
   toggleAttributes = {},
   classNames,
-  attributes = {}
+  attributes = {},
+  channel
 }) {
   const componentClassName = "ds-group-header";
   variant = variant !== "bauta" ? void 0 : variant;
@@ -266,8 +267,8 @@ function GroupHeader({
     /* @__PURE__ */ jsx7("h2", { className: `${componentClassName}__title`, children: title }),
     type === "link" && linkText && href && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link`, children: linkText }),
     type === "icon" && href && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon` }),
-    type === "arrows" && href && linkText && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link hidden-desktop`, children: linkText }),
-    type === "arrows" && href && !linkText && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon hidden-desktop` })
+    type === "arrows" && href && linkText && channel !== "desktop" && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__right-link`, children: linkText }),
+    type === "arrows" && href && !linkText && channel !== "desktop" && /* @__PURE__ */ jsx7(IconUse, { iconName: "arrow_forward", classNames: `${componentClassName}__icon` })
   ] });
   const buttonVariant = variant ? "staticWhite" : "secondaryOutline";
   return /* @__PURE__ */ jsxs3("div", { className: classes, ...attributes, children: [
@@ -287,7 +288,7 @@ function GroupHeader({
         attributes: toggleAttributes
       }
     ),
-    type === "arrows" && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__arrows hidden-mobile hidden-tablet`, children: [
+    type === "arrows" && channel === "desktop" && /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__arrows`, children: [
       /* @__PURE__ */ jsx7(
         button_default,
         {