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

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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/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-metrics-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/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);
     }

package/package.json

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