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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.6.2...@bonniernews/dn-design-system-web@32.7.0) (2025-06-13)
+
+
+### Features
+
+* **web:** implement pill component ([#1776](https://github.com/BonnierNews/dn-design-system/issues/1776)) ([9ef9506](https://github.com/BonnierNews/dn-design-system/commit/9ef9506cf6b85b7e8e278f7706df20b5b151d743))
+
+## [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/button/README.md

@@ -18,10 +18,10 @@ Button
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "sm", "lg", "md", "xl" | "md" |
 | loading | boolean | false |
-| mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | href | If href is set the button will be rendered as an a-tag<br />string | \- |
+| mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | type | "button", "submit" | "button" |
 | iconPosition | "right", "none", "left" | "none" |
 

package/components/button-toggle/README.md

@@ -26,7 +26,7 @@ The component will not include styling by itself. Make sure to include the right
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "sm", "lg", "md", "xl" | "md" |
 | loading | boolean | false |
 | selected | boolean | false |
 | selectedIconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay", "bookmark-filled", "bookmarked" | \- |

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/components/pill/README.md

@@ -0,0 +1,25 @@
+Pill
+====
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/pill](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pill)
+*   Storybook: [Pill](https://designsystem.dn.se/?path=/docs/basic-pill--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/pill/pill.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| text\* | string | \- |
+| variant | "link" | link |
+| size | "sm", "lg" | "lg" |
+| href\* | string | \- |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
+
+```jsx
+<Pill
+  href="https://www.bonniernews.se"
+  size="lg"
+  text="Ukraina"
+  variant="link"
+/>
+```

package/components/pill/pill.scss

@@ -0,0 +1,67 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
+@use "../spinner/spinner.scss" as *;
+
+$ds-pill-outlined__border-width: ds-border-width(xxs);
+@function _pill-brdr($value, $rem: false) {
+  $value: (ds-strip-unit($value) - ds-strip-unit($ds-pill-outlined__border-width)) * 1px;
+  @if $rem {
+    @return ds-px-to-rem($value);
+  }
+  @return $value;
+}
+
+.ds-pill {
+  cursor: pointer;
+  border: $ds-pill-outlined__border-width solid $ds-color-border-primary;
+  border-radius: 100px;
+  position: relative;
+  background-color: $ds-color-surface-primary;
+  color: $ds-color-text-primary;
+  text-decoration: none;
+  @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-medium);
+
+  &.ds-pill--sm {
+    padding: _pill-brdr(ds-spacing($ds-s-025), true) _pill-brdr(ds-spacing($ds-s-050), true)
+      _pill-brdr(ds-spacing($ds-s-025), true) _pill-brdr(ds-spacing($ds-s-075), true);
+    height: 32px;
+  }
+
+  &.ds-pill--lg {
+    padding: _pill-brdr(ds-spacing($ds-s-050), true) _pill-brdr(ds-spacing($ds-s-075), true)
+      _pill-brdr(ds-spacing($ds-s-050), true) _pill-brdr(ds-spacing($ds-s-100), true);
+    height: 40px;
+  }
+
+  &:focus-visible {
+    outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
+    outline-offset: 2px;
+  }
+
+  @include min-click-surface();
+
+  @include ds-hover() {
+    &:hover {
+      opacity: $ds-opacity-component-hover-pressed;
+    }
+  }
+}
+
+.ds-pill--link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  .ds-icon {
+    display: flex;
+    height: ds-px-to-rem(20px);
+    width: ds-px-to-rem(20px);
+    margin: ds-spacing(0 0 0 $ds-s-050, rem);
+    svg {
+      fill: $ds-color-surface-brand;
+    }
+  }
+
+  &.ds-pill--sm .ds-icon {
+    margin: ds-spacing(0 0 0 $ds-s-025, rem);
+  }
+}

package/package.json

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