@bonniernews/dn-design-system-web 37.2.2 → 37.2.4

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [37.2.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.2.3...@bonniernews/dn-design-system-web@37.2.4) (2026-01-29)
+
+
+### Bug Fixes
+
+* **web:** bylinelist followbutton needs classname watch--follow ([#2012](https://github.com/BonnierNews/dn-design-system/issues/2012)) ([c05ced6](https://github.com/BonnierNews/dn-design-system/commit/c05ced65f102fa08cb30d1d9f7f5a5da0a9af595))
+
+
+### Maintenance
+
+* **app:** reanimated 4.2.1  ([#2011](https://github.com/BonnierNews/dn-design-system/issues/2011)) ([dd38656](https://github.com/BonnierNews/dn-design-system/commit/dd3865651f83176bbe0f00d1d68c944524469782))
+* prerelease packages ([d113335](https://github.com/BonnierNews/dn-design-system/commit/d113335f4fe21d8df23ea94bddfedc5e8b6625a2))
+
+## [37.2.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.2.2...@bonniernews/dn-design-system-web@37.2.3) (2026-01-27)
+
+
+### Bug Fixes
+
+* **web:** always full height fact boxes ([#2001](https://github.com/BonnierNews/dn-design-system/issues/2001)) ([b46770a](https://github.com/BonnierNews/dn-design-system/commit/b46770aceb34b2d4c93133c6f9fc8265d82a23f3))
+
 ## [37.2.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.2.1...@bonniernews/dn-design-system-web@37.2.2) (2026-01-26)
 
 

package/components/factbox/README-njk.md

@@ -17,7 +17,6 @@
 |theme | String | no | default, kultur, nyheter | | Design theme |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
-|forceExpanded | bool | no | true, false | false | Full factbox is shown regardless of height and no control buttons are shown|
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
 
 ## Minimum requirement example
@@ -51,11 +50,3 @@ These are copy paste friendly examples to quickliy get started using a component
 ```scss
 @use "@bonniernews/dn-design-system-web/components/factbox/factbox" as *;
 ```
-
-### Javascript
-
-```javascript
-import dsFactbox from '@bonniernews/dn-design-system-web/components/factbox/factbox.js'
-const factboxElements = Array.from(document.getElementsByClassName("ds-factbox"));
-dsFactbox(factboxElements);
-```

package/components/factbox/README.md

@@ -13,7 +13,6 @@ The component will not include styling by itself. Make sure to include the right
 | titleImage | ComponentChild | \- |
 | bodyParts\* | BodyPart\[\] | \- |
 | theme | "kultur", "nyheter", "default" | \- |
-| forceExpand | boolean | false |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 

package/components/factbox/factbox.njk

@@ -50,24 +50,6 @@
           </div>
         {% endif %}
       </div>
-      <div class="{{ componentClassName + '__show-more'}}">
-        {{ Button({
-          text: 'Visa mer',
-          variant: 'secondaryOutline',
-          size: 'sm',
-          fullWidth: true,
-          classNames: 'ds-factbox__expand-more',
-          forcePx: params.forcePx
-        })}}
-        {{ Button({
-          text: 'Visa mindre',
-          variant: 'secondaryOutline',
-          size: 'sm',
-          fullWidth: true,
-          classNames: 'ds-factbox__expand-less',
-          forcePx: params.forcePx
-        })}}
-      </div>
     </div>
   </div>
 {% endmacro %}

package/components/factbox/factbox.scss

@@ -2,12 +2,10 @@
 @use "../button/button.scss" as *;
 
 $ds-factbox__grade-size: 40px;
-$ds-factbox__show-more-fade-height: 48px;
 $ds-factbox__padding: ds-spacing($ds-s-100);
-$ds-factbox__max-height: 500px; // includes top/bottom spacing
 
 .ds-factbox {
-  background-color: $ds-color-surface-primary;
+  background-color: none;
   box-sizing: border-box;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
@@ -15,19 +13,10 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   .ds-factbox__inner {
     border: ds-border-width(xxs) solid $ds-color-border-primary;
     border-radius: ds-border-radius(050);
-    max-height: ds-px-to-rem($ds-factbox__max-height);
+    max-height: none;
     overflow: hidden;
     position: relative;
     padding: $ds-factbox__padding;
-
-    @at-root .ds-force-px#{&} {
-      max-height: $ds-factbox__max-height;
-    }
-  }
-
-  &--expanded .ds-factbox__inner,
-  &--expanded.ds-force-px .ds-factbox__inner {
-    max-height: none;
   }
 
   .ds-factbox__title-image {
@@ -100,49 +89,4 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       height: $ds-factbox__grade-size;
     }
   }
-  .ds-factbox__show-more--collapsable::before {
-    content: "";
-    background: $ds-gradient-content-fade-up;
-    height: ds-px-to-rem($ds-factbox__show-more-fade-height);
-    width: 100%;
-    position: absolute;
-    top: -#{ds-px-to-rem($ds-factbox__show-more-fade-height)};
-
-    @at-root .ds-force-px#{&} {
-      height: $ds-factbox__show-more-fade-height;
-      top: -#{$ds-factbox__show-more-fade-height};
-    }
-  }
-  .ds-factbox__show-more {
-    display: none;
-  }
-  .ds-factbox__show-more--collapsable {
-    background-color: $ds-color-surface-primary;
-    display: block;
-    button {
-      margin: ds-spacing($ds-s-100 0 0);
-    }
-    &:not([data-factbox-expanded]) .ds-factbox__expand-more,
-    &[data-factbox-expanded] .ds-factbox__expand-less {
-      display: flex;
-    }
-    &:not([data-factbox-expanded]) .ds-factbox__expand-less,
-    &[data-factbox-expanded] .ds-factbox__expand-more,
-    &[data-factbox-expanded]::before {
-      display: none;
-    }
-    &:not([data-factbox-expanded]) {
-      position: absolute;
-      bottom: $ds-factbox__padding;
-      width: calc(100% - ($ds-factbox__padding * 2));
-
-      &::after {
-        content: "";
-        height: $ds-factbox__padding;
-        width: 100%;
-        background-color: $ds-color-surface-primary;
-        position: absolute;
-      }
-    }
-  }
 }

package/components/list-item/README.md

@@ -36,10 +36,10 @@ dsListItem(listElements);
 | accordionContent | any | \- |
 | name | string | "ds-list-item" |
 | href | Links entire list item<br />string | \- |
-| checked | boolean | \- |
-| stripLabel | boolean | \- |
 | interactiveElementAttributes | Applied to the right element: checkbox or button ('toggle')<br />{ \[key: string\]: string; } | \- |
 | interactiveElementClassNames | string | \- |
+| checked | boolean | \- |
+| stripLabel | boolean | \- |
 | mediaHtml\* | string | \- |
 | trailingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
 | showMeta | boolean | \- |

package/package.json

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

package/preact/components/byline/byline.d.ts

@@ -7,6 +7,7 @@ export interface BylineData {
     authorPageUrl?: string;
     followable: boolean;
     followed?: boolean;
+    followButtonAttributes?: Record<string, string>;
     border?: boolean;
     role: string;
 }

package/preact/components/byline/byline.js

@@ -203,7 +203,7 @@ var BylineList = ({
   const componentClassName = "ds-byline-list__item";
   const classes = formatClassString(["ds-byline-list", forcePx && "ds-force-px", classNames]);
   return /* @__PURE__ */ jsx6("ul", { className: classes, ...attributes, children: bylines && bylines.map((byline, index) => {
-    const { name, authorId, authorPageUrl, bylineImage, role, followable } = byline;
+    const { name, authorId, authorPageUrl, bylineImage, role, followable, followButtonAttributes } = byline;
     const linkAttributes = {
       "data-link-category": "article author",
       "data-index": `${index}`,
@@ -219,6 +219,7 @@ var BylineList = ({
         border: shouldShowBorder,
         followable,
         authorPageUrl,
+        followButtonAttributes,
         children: [
           bylineImage && /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__portrait`, children: bylineImage }),
           /* @__PURE__ */ jsx6(
@@ -242,7 +243,7 @@ var BylineListInner = ({
   linkAttributes,
   authorPageUrl,
   listItemClassNames,
-  buttonAttributes,
+  followButtonAttributes,
   buttonClassNames,
   followable,
   followed,
@@ -269,8 +270,8 @@ var BylineListInner = ({
           selected: followed,
           disabled,
           forcePx,
-          attributes: buttonAttributes,
-          classNames: buttonClassNames
+          attributes: followButtonAttributes,
+          classNames: `${buttonClassNames || ""} watch--follow`
         }
       }
     )