@bonniernews/dn-design-system-web 16.0.7 → 16.1.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [16.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.0...@bonniernews/dn-design-system-web@16.1.1) (2024-07-16)
+
+
+### Maintenance
+
+* **web:** use correct metric helpers ([#1338](https://github.com/BonnierNews/dn-design-system/issues/1338)) ([ca0bec0](https://github.com/BonnierNews/dn-design-system/commit/ca0bec05a2c2b272b45600ec5a8a94e35c22ff05))
+
+## [16.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.7...@bonniernews/dn-design-system-web@16.1.0) (2024-07-15)
+
+
+### Features
+
+* **web:** profile header component ([#1327](https://github.com/BonnierNews/dn-design-system/issues/1327)) ([630c197](https://github.com/BonnierNews/dn-design-system/commit/630c197032cfd14a558b29788b419733fc5c5fc4))
+
 ## [16.0.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.6...@bonniernews/dn-design-system-web@16.0.7) (2024-07-15)
 
 

package/components/badge/badge.scss

@@ -10,7 +10,7 @@ $ds-badge__min-size: 8px;
     @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
-    border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
+    border: $ds-color-border-secondary ds-border-width(x2) solid;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;

package/components/byline/byline.scss

@@ -23,7 +23,7 @@ $ds-byline__image-size--direkt: 36px;
 
   &::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: calc(100% - ds-spacing($ds-s-200));
     background-color: $ds-color-border-primary;
     position: absolute;
@@ -62,7 +62,7 @@ $ds-byline__image-size--direkt: 36px;
     text-decoration: none;
 
     &:focus-visible {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -174,7 +174,7 @@ $ds-byline__image-size--direkt: 36px;
   &:focus-visible {
     outline: none;
     .ds-byline__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: -2px;
     }
   }

package/components/disclaimer/disclaimer.scss

@@ -2,7 +2,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 
 $ds-disclaimer__icon-size: 20px;
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(x1);
 
 .ds-disclaimer {
   padding-bottom: ds-spacing($ds-s-100);

package/components/divider/divider.scss

@@ -8,7 +8,7 @@
     margin: 0 auto;
     border: none;
     background-color: $ds-color-border-primary;
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: 100%;
   }
 }

package/components/factbox/factbox.scss

@@ -15,14 +15,14 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
 
   .ds-factbox__inner {
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     border-left: $ds-factbox-border-width solid $ds-theme-color;
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
     padding: $ds-factbox__padding;
     padding-left: $ds-factbox__padding-left;
-    padding-top: $ds-factbox__padding - ds-metrics-border-width(x1);
+    padding-top: $ds-factbox__padding - ds-border-width(x1);
 
     @at-root .ds-force-px#{&} {
       max-height: $ds-factbox__max-height;

package/components/footer/footer.scss

@@ -37,7 +37,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
   &__rudolf,
   &__editors,
   &__channels {
-    border-top-width: ds-metrics-border-width(x1);
+    border-top-width: ds-border-width(x1);
     border-top-style: solid;
     border-color: $ds-color-static-transparent-white-10;
   }
@@ -50,7 +50,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     &__link-grid {
       border-bottom-style: solid;
-      border-bottom-width: ds-metrics-border-width(x1);
+      border-bottom-width: ds-border-width(x1);
       border-color: $ds-color-static-transparent-white-10;
     }
   }

package/components/group-header/group-header.scss

@@ -16,7 +16,7 @@ $ds-group-header__icon-size: 24px;
   @include ds-typography($ds-typography-functionalbody02);
 
   &--bottom-border {
-    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
   }
 
   &--bauta {
@@ -110,7 +110,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--bottom-border .ds-group-header__title {
-    padding-bottom: ds-spacing($ds-s-075) - ds-metrics-border-width(x1);
+    padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
   }
 
   &--bautaxl .ds-group-header__title {

package/components/list-item/list-item.scss

@@ -153,7 +153,7 @@ $ds-list-item__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-list-item__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: -2px;
     }
   }
@@ -171,7 +171,7 @@ $ds-list-item__icon-size: 24px;
   &::after,
   &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     width: calc(100% - (ds-spacing($ds-s-100) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;

package/components/profile-header/README.md

@@ -0,0 +1,47 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/profile-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/profile-header)
+- Storybook: [ProfileHeader](https://designsystem.dn.se/?path=/docs/section-Profileheader--docs)
+- Storybook (Latest): [ProfileHeader](https://designsystem-latest.dn.se/?path=/docs/section-Profileheader--docs)
+
+----
+
+# Profile header
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | H1 Title |
+|mediaHtml | String | no | | | Main image |
+|descriptionHtml | String | no | | | Intended use is text, links |
+|toggle | Bool | no | true, false | false | Show/hide toggle button |
+|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|~forcePx~ | | | | | Not supported |
+
+## 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/profile-header/profile-header.njk' import ProfileHeader %}
+
+{{ ProfileHeader(
+  {
+    title: "Johan Croneman",
+    descriptionHtml: "<p>Johan Croneman är journalist på Dagens Nyheter.</p>"
+  }
+)}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/profile-header/profile-header" as *;
+```

package/components/profile-header/profile-header.njk

@@ -0,0 +1,44 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{% macro ProfileHeader(params) %}
+  {%- set componentClassName = "ds-profile-header" %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName }}__content">
+      <div class="{{ componentClassName }}__bar">
+        <div class="{{ componentClassName }}__heading">
+          <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
+          {% if params.toggle %}
+            {{ ButtonToggle({
+              variant: 'brand',
+              size: 'medium',
+              text: params.toggleText,
+              selectedText: params.toggleSelectedText,
+              selected: params.toggleSelected,
+              loading: params.toggleLoading,
+              classNames: params.toggleClassNames,
+              attributes: params.toggleAttributes
+            }) }}
+          {% endif %}
+        </div>
+        {% if params.mediaHtml %}
+          <div class="{{ componentClassName + '__media'}}">
+            {{ params.mediaHtml | safe }}
+          </div>
+        {% endif %}
+      </div>
+      {% if params.descriptionHtml %}
+        <div class="{{ componentClassName }}__description">
+          {{ params.descriptionHtml | safe }}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}

package/components/profile-header/profile-header.scss

@@ -0,0 +1,74 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button-toggle/button-toggle.scss";
+
+.ds-profile-header {
+  width: 100%;
+  background-color: $ds-color-surface-background;
+  padding: 0;
+  display: flex;
+
+  .ds-profile-header__content {
+    width: 100%;
+  }
+
+  .ds-profile-header__bar {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-direction: row;
+    margin: ds-spacing($ds-s-100 $ds-s-100 0);
+
+    .ds-btn--toggle {
+      flex-shrink: 0;
+      margin: ds-spacing($ds-s-100 0 0);
+    }
+  }
+
+  .ds-profile-header__heading {
+    margin: ds-spacing(0 $ds-s-100 $ds-s-100 0);
+  }
+
+  .ds-profile-header__title {
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+  }
+
+  .ds-profile-header__media {
+    width: 120px;
+    height: 102px;
+    overflow: hidden;
+    flex-shrink: 0;
+    margin: 0;
+  }
+
+  .ds-profile-header__description {
+    @include ds-typography($ds-typography-functionalbody02);
+    color: $ds-color-text-primary;
+    margin: ds-spacing(0 $ds-s-100 0);
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
+    padding: ds-spacing($ds-s-100 0);
+
+    a {
+      @include ds-link($ds-link-article-body);
+    }
+
+    b,
+    strong {
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+    }
+
+    p {
+      margin: ds-spacing($ds-s-100 0);
+    }
+
+    p:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/components/switch/switch.scss

@@ -101,7 +101,7 @@ $ds-switch__container-width: 44px;
     }
 
     &:focus-visible + .ds-switch__inner .ds-switch__box {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
 

package/components/tag-header/tag-header.njk

@@ -12,11 +12,6 @@
   ] | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
-    {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
-        {{ params.mediaHtml | safe }}
-      </div>
-    {% endif %}
     <div class="{{ componentClassName }}__content">
       <div class="{{ componentClassName }}__bar">
         <div class="{{ componentClassName }}__heading">
@@ -28,18 +23,23 @@
             {% endif %}
           {% endif %}
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
+          {% if params.toggle %}
+            {{ ButtonToggle({
+              variant: 'brand',
+              size: 'medium',
+              text: params.toggleText,
+              selectedText: params.toggleSelectedText,
+              selected: params.toggleSelected,
+              loading: params.toggleLoading,
+              classNames: params.toggleClassNames,
+              attributes: params.toggleAttributes
+            }) }}
+          {% endif %}
         </div>
-        {% if params.toggle %}
-          {{ ButtonToggle({
-            variant: 'brand',
-            size: 'medium',
-            text: params.toggleText,
-            selectedText: params.toggleSelectedText,
-            selected: params.toggleSelected,
-            loading: params.toggleLoading,
-            classNames: params.toggleClassNames,
-            attributes: params.toggleAttributes
-          }) }}
+        {% if params.mediaHtml %}
+          <div class="{{ componentClassName + '__media'}}">
+            {{ params.mediaHtml | safe }}
+          </div>
         {% endif %}
       </div>
       {% if params.descriptionHtml %}

package/components/tag-header/tag-header.scss

@@ -18,18 +18,24 @@
 
   .ds-tag-header__bar {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
-    margin: ds-spacing($ds-s-100 $ds-s-100 0);
+    flex-direction: column-reverse;
+    margin: ds-spacing(0 $ds-s-100 0);
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      flex-direction: row;
+    }
 
-    .ds-btn-toggle {
+    .ds-btn--toggle {
       flex-shrink: 0;
-      margin-left: ds-spacing($ds-s-100);
+      margin: ds-spacing($ds-s-100 0 0);
     }
   }
 
   .ds-tag-header__heading {
     margin: 0;
+    margin-top: ds-spacing($ds-s-100);
   }
 
   .ds-tag-header__vignette {
@@ -51,9 +57,14 @@
   }
 
   .ds-tag-header__media {
+    @include ds-mq-only-breakpoint(mobile) {
+      flex-shrink: 0;
+      width: calc(100% + #{ds-spacing($ds-s-100)} * 2);
+      margin: 0 -#{ds-spacing($ds-s-100)};
+    }
     @include ds-mq-smallest-breakpoint(tablet) {
       flex-shrink: 0;
-      width: 256px;
+      width: 196px;
       max-width: 40%;
       margin: ds-spacing($ds-s-100 0 0 $ds-s-100);
     }
@@ -63,7 +74,7 @@
     @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     margin: ds-spacing($ds-s-100 $ds-s-100 0);
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     padding-top: ds-spacing($ds-s-100);
 
     a {

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -35,7 +35,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       top: 0;
       left: 0;
       right: 0;
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       background-color: $ds-color-border-primary;
     }
   }
@@ -51,7 +51,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       content: "";
       position: absolute;
       bottom: 0;
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       width: calc(100% - ds-spacing($ds-s-200));
       background-color: $ds-color-border-primary;
     }

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

@@ -13,7 +13,7 @@
   > .ds-teaser::after,
   > .ds-split-container::after {
     content: "";
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;

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

@@ -12,7 +12,7 @@
   @at-root .ds-teaser-package > & + & {
     &:before {
       content: "";
-      height: ds-metrics-border-width(x1);
+      height: ds-border-width(x1);
       background-color: $ds-color-border-primary;
       left: 0;
       right: 0;
@@ -52,7 +52,7 @@
       content: "";
       margin-top: ds-spacing($ds-s-100);
       padding-top: ds-spacing($ds-s-075);
-      border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+      border-top: ds-border-width(x1) solid $ds-color-border-primary;
 
       @include ds-mq-smallest-breakpoint(tablet) {
         margin-top: 0;

package/foundations/helpers/hover.scss

@@ -24,7 +24,7 @@
 @mixin ds-focus(
   $offset: false,
   $includeSelector: true,
-  $width: ds-metrics-border-width(x2),
+  $width: ds-border-width(x2),
   $color: $ds-color-border-focus-02
 ) {
   @if not $includeSelector {

package/foundations/helpers/metrics.scss

@@ -41,13 +41,3 @@ $dsBorderWidth: map.get($metrics, "border-width");
 
   @return $values;
 }
-
-// deprecated
-@function ds-metrics-border-radius($units: null) {
-  @return ds-border-radius($units);
-}
-
-// deprecated
-@function ds-metrics-border-width($units: null) {
-  @return ds-border-width($units);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "16.0.7",
+  "version": "16.1.1",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",