@bonniernews/dn-design-system-web 32.6.1 → 32.6.2

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.6.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.6.1...@bonniernews/dn-design-system-web@32.6.2) (2025-06-10)
+
+
+### Bug Fixes
+
+* **web:** byline as tsx ([#1771](https://github.com/BonnierNews/dn-design-system/issues/1771)) ([f52f4e3](https://github.com/BonnierNews/dn-design-system/commit/f52f4e38506a2211b9a4d8dfb7333b5a52bf96cb))
+
 ## [32.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.6.0...@bonniernews/dn-design-system-web@32.6.1) (2025-06-10)
 
 

package/components/byline/README-NJK.md

@@ -0,0 +1,55 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
+- Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)
+
+----
+
+# Byline
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|largeByline | Boolean | no | true, false | false | Specify if web should render a large byline, used for profile articles |
+|bylineTitle | String | yes | | | The titles of the bylines, supplied by the api |
+|bylines | Array | yes | | | Array of bylines from api |
+|authorImages | Array[HTML] | no | | | Array with html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
+|hideBylineImages | Boolean | no | true, false | true | Specify if byline images should be renderd or not |
+|renderBylineModal | Boolean | false | true, false | false | Specify if byline sheet should be renderd. Should be true for bottomByline |
+|showNameAsLink | Boolean | false | true, false | false | If true, author names will be renders as link and sheet will not load. Used for desktop |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/byline/byline.njk' import Byline %}
+
+{{ Byline({
+  largeByline: largeByline,
+  bylineTitle: bylineTitle,
+  bylines: bylines,
+  authorImages: [imageHtml(), imageHtml(), imageHtml()],
+  hideBylineImages: hideBylineImages,
+  renderBylineModal: renderBylineModal,
+  attributes: attributes,
+  classNames: classNames
+  variant: variant,
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/byline/byline";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
+```

package/components/byline/README.md

@@ -1,55 +1,33 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
-- Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)
+Byline
+======
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
+*   Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)
 
-# Byline
+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/byline/byline.scss'`
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|largeByline | Boolean | no | true, false | false | Specify if web should render a large byline, used for profile articles |
-|bylineTitle | String | yes | | | The titles of the bylines, supplied by the api |
-|bylines | Array | yes | | | Array of bylines from api |
-|authorImages | Array[HTML] | no | | | Array with html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
-|hideBylineImages | Boolean | no | true, false | true | Specify if byline images should be renderd or not |
-|renderBylineModal | Boolean | false | true, false | false | Specify if byline sheet should be renderd. Should be true for bottomByline |
-|showNameAsLink | Boolean | false | true, false | false | If true, author names will be renders as link and sheet will not load. Used for desktop |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/byline/byline.njk' import Byline %}
-
-{{ Byline({
-  largeByline: largeByline,
-  bylineTitle: bylineTitle,
-  bylines: bylines,
-  authorImages: [imageHtml(), imageHtml(), imageHtml()],
-  hideBylineImages: hideBylineImages,
-  renderBylineModal: renderBylineModal,
-  attributes: attributes,
-  classNames: classNames
-  variant: variant,
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/byline/byline";
-```
-
-### Javascript
+### [](#javascript)Javascript
 
 ```javascript
-import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
-dsButtonToggle(toggleElements);
+import { initModalByline } from '@bonniernews/dn-design-system-web/components/byline/byline-interaction.js'
+const articleElement = document.querySelector('.some-article-class');
+initModalByline(articleElement);
 ```
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| largeByline | boolean | false |
+| bylineTitle\* | string | \- |
+| bylines\* | BylineData\[\] | \- |
+| hideBylineImages | boolean | false |
+| renderBylineModal | boolean | false |
+| showNameAsLink | boolean | false |
+| classNames | string | \- |
+| attributes | object | \- |
+
+```jsx
+<RunComponentJs
+  component={<><div className="ds-byline ds-byline--show-images"><div className="ds-byline__inner"><div className="ds-byline__portrait" dangerouslySetInnerHTML={{__html: '<div class="picture lazy-image" style="aspect-ratio: 1 / 1"><img class="picture__img picture__img--fullheight" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80" srcset="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=88:88&amp;output-quality=60 88w" sizes="44px" alt="" aria-hidden="true"></div>'}}/><div className="ds-byline__info"><span className="ds-byline__role">Text</span><a className="ds-byline__name" data-id="https://www.dn.se/av/peter-wolodarski" data-index="1" data-label="Peter Wolodarski" data-link-category="article author" href="https://www.dn.se/av/peter-wolodarski">Peter Wolodarski</a></div></div></div></>}
+  jsFunction={() => {}}
+/>
+```

package/components/byline/byline.scss

@@ -1,4 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/byline-list/byline-list.scss";
 @use "../../components/byline-list-item/byline-list-item.scss";
 @use "../../components/modal/modal.scss";
 
@@ -46,7 +47,7 @@ $ds-list-item__portrait-size--large: 104px;
   }
 
   &--show-images .ds-byline__info {
-    margin-left: ds-spacing($ds-s-100);
+    margin-left: ds-spacing($ds-s-075);
   }
 
   .ds-byline__info {
@@ -59,7 +60,7 @@ $ds-list-item__portrait-size--large: 104px;
 
     .ds-byline__role {
       display: block;
-      @include ds-typography($ds-typography-functional-body-md);
+      @include ds-typography($ds-typography-functional-heading-xxs, $fontWeight: $ds-fontweight-regular);
     }
 
     .ds-byline__name,
@@ -87,7 +88,7 @@ $ds-list-item__portrait-size--large: 104px;
   &.ds-byline--show-images {
     .ds-byline__inner--multiple {
       .ds-byline__info {
-        margin-top: ds-spacing($ds-s-100);
+        margin-top: ds-spacing($ds-s-075);
       }
     }
   }

package/components/byline-list/README.md

@@ -12,8 +12,9 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| bylines\* | { authorName?: string; bylineImage?: string; authorPageUrl?: string; role?: string; border?: boolean; followable?: boolean; followed?: boolean; listItemClassNames?: string; attributes?: { \[key: string\]: string; }; linkAttributes?: { ...; }; buttonAttributes?: { ...; }; buttonClassNames?: string; }\[\] | \- |
+| bylines\* | BylineData\[\] | \- |
 | attributes | { \[key: string\]: string; } | \- |
+| showBorderOnLastItem | boolean | false |
 | forcePx | boolean | \- |
 | classNames | string | \- |
 
@@ -21,10 +22,20 @@ The component will not include styling by itself. Make sure to include the right
 <BylineList
   bylines={[
     {
-      authorName: 'Byline link',
+      authorId: '1',
       authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
       bylineImage: '<div class="picture   lazy-image" style="aspect-ratio: 1 / 1"><img class="picture__img picture__img--fullheight" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80" srcset="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=88:88&amp;output-quality=60 88w" sizes="44px" alt="" aria-hidden="true"></div>',
+      followable: false,
+      name: 'Byline link',
       role: 'Grafik'
+    },
+    {
+      authorId: '123',
+      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
+      bylineImage: '<div class="picture   lazy-image" style="aspect-ratio: 1 / 1"><img class="picture__img picture__img--fullheight" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80" srcset="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=44:44&amp;output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&amp;crop=261:261;81,2&amp;resize=88:88&amp;output-quality=60 88w" sizes="44px" alt="" aria-hidden="true"></div>',
+      followable: true,
+      name: 'Test Testsson',
+      role: 'Text'
     }
   ]}
  />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.6.1",
+  "version": "32.6.2",
   "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

@@ -0,0 +1,37 @@
+export interface BylineData {
+    name: string;
+    authorId: string;
+    bylineImage?: string;
+    authorPageUrl?: string;
+    followable: boolean;
+    followed?: boolean;
+    border?: boolean;
+    role: string;
+}
+interface BylineProps {
+    largeByline?: boolean;
+    bylineTitle: string;
+    bylines: BylineData[];
+    hideBylineImages?: boolean;
+    renderBylineModal?: boolean;
+    showNameAsLink?: boolean;
+    classNames?: string;
+    attributes?: object;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
+ * - Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)
+ *
+ * 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/byline/byline.scss'`
+ *
+ * ### Javascript
+ *
+ * ```javascript
+ * import { initModalByline } from '@bonniernews/dn-design-system-web/components/byline/byline-interaction.js'
+ * const articleElement = document.querySelector('.some-article-class');
+ * initModalByline(articleElement);
+ * ```
+ */
+export declare const Byline: ({ bylines, bylineTitle, largeByline, hideBylineImages, renderBylineModal, showNameAsLink, classNames, attributes, }: BylineProps) => import("preact").JSX.Element;
+export {};