@bonniernews/dn-design-system-web 16.2.1 → 18.0.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [18.0.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.0...@bonniernews/dn-design-system-web@18.0.0-beta.0) (2024-08-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* list item design updates
+
+### Features
+
+* list item design updates ([b281389](https://github.com/BonnierNews/dn-design-system/commit/b2813893022fc7d95ac070a85ee53db81a60b6a9))
+
+## [17.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.2.1...@bonniernews/dn-design-system-web@17.0.0) (2024-07-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** remove support for deprecated typography (#1342)
+
+### Maintenance
+
+* **web:** remove support for deprecated typography ([#1342](https://github.com/BonnierNews/dn-design-system/issues/1342)) ([9ed4e56](https://github.com/BonnierNews/dn-design-system/commit/9ed4e566a5eae3225f7003645827a6768077fbab))
+
 ## [16.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.2.0...@bonniernews/dn-design-system-web@16.2.1) (2024-07-18)
 
 

package/components/buddy-menu/buddy-menu.scss

@@ -85,7 +85,7 @@
     border-bottom-right-radius: ds-border-radius(x2);
     overflow: hidden;
     margin: 0;
-    padding: 0;
+    padding: ds-spacing(0 $ds-s-100);
   }
 
   &.ds-force-px {

package/components/byline/byline.njk

@@ -1,47 +1,11 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
 
 {% macro Byline(params) %}
-  {% set componentClassName = "ds-byline" %}
-  <li class="{{ componentClassName + '__outer'}}">
-    {% call BylineInner(params, componentClassName) %}
-      <div class="{{ componentClassName + '__inner'}}">
-        {% set componentClassName = componentClassName %}
-        {% call BylineContent(params, componentClassName, useOuterAnchorElement) %}
-          {% if params.bylineImage %}
-            <span class="{{ componentClassName + '__image'}}">{{- params.bylineImage | safe -}}</span>
-          {% endif %}
-          <div class="{{ componentClassName + '__titles'}}">
-            {% if params.authorName %}
-              <span class="{{ componentClassName + '__title'}}">{{ params.authorName }}</span>
-            {% endif %}
-            {%- if subtitle %}
-              <span class="{{ componentClassName + '__subtitle'}}">{{ subtitle }}</span>
-            {% endif %}
-          </div>
-        {% endcall %}
-        {% if useArrowIcon %}
-          <span class="{{ componentClassName + '__icon-right'}}">{{- IconUse({ icon: 'arrow_forward' }) | safe -}}</span>
-        {% elif useFollowButton %}
-          {{ ButtonToggle({
-            text: "Följ",
-            selectedText: "Följer",
-            selected: params.followed,
-            variant: "secondary",
-            size: "small",
-            attributes: params.elementAttributes,
-            classNames: elementClassNames | join(" "),
-            forcePx: params.forcePx
-          })}}
-        {% endif %}
-      </div>
-    {% endcall %}
-  </li>
-{% endmacro %}
+  {% set useOuterAnchorElement = params.authorPageUrl and not params.followable %}
+  {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
+  {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
 
-{# Internal helper macro - not intended for use outside of this file #}
-{% macro BylineContent(params, componentClassName, useOuterAnchorElement) %}
   {% if params.variant == 'link' %}
     {% set subtitle = params.role %}
   {% elif params.variant == 'follow' %}
@@ -50,54 +14,24 @@
     {% set subtitle = false %}
   {% endif %}
 
-  {# This inner link can exist in combination with a button. It's been decided that it should only be used for authorPageUrls, not for email #}
-  {% if not useOuterAnchorElement and params.authorPageUrl %}
-    {% set linkAttributes = getAttributes(params.linkAttributes) %}
-    {%- set ariaLabel = 'aria-label="Läs mer från ' + params.authorName + '"' %}
-    <a href="{{params.authorPageUrl}}" {{- linkAttributes | safe }} {{ ariaLabel | safe if not params.email }} class="{{ componentClassName + '__content-wrapper'}}">
-      {{ caller() if caller }}
-    </a>
-  {% else %}
-    <div class="{{ componentClassName + '__content-wrapper'}}">
-      {{ caller() if caller }}
-    </div>
-  {% endif %}
-{% endmacro %}
-
-{# Internal helper macro - not intended for use outside of this file #}
-{% macro BylineInner(params, componentClassName) %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set attributes = getAttributes(params.attributes) %}
-
-  {% set useOuterAnchorElement = true if (params.authorPageUrl and not params.followable) %}
-  {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
-  {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
-
-  {%- set classes = [
-    componentClassName,
-    "ds-force-px" if params.forcePx,
-    classNamePrefix + "noninteractive" if not params.authorPageUrl,
-    classNamePrefix + params.variant,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% if params.bylineImage %}
-    {% set bylineImage =  params.bylineImage %}
-  {% endif %}
-
-  {% set elementClassNames = [ componentClassName + "__btn-toggle" ]%}
-  {% if params.elementClassNames %}
-    {% set elementClassNames = (elementClassNames.push(params.elementClassNames), elementClassNames) %}
-  {% endif %}
-
-  {% if useOuterAnchorElement %}
-    {% set linkAttributes = getAttributes(params.linkAttributes) %}
-    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
-      {{ caller() if caller }}
-    </a>
-  {% else %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      {{ caller() if caller }}
-    </div>
-  {% endif %}
+  {% set classNames = (params.classNames or '') + ' ds-byline--' + params.variant %}
+
+  {{ ListItem({
+    listItemType: 'byline',
+    title: params.authorName,
+    subtitle: subtitle,
+    mediaHtml: params.bylineImage,
+    trailingIcon: 'arrow_forward' if useArrowIcon,
+    toggleText: 'Följ' if useFollowButton,
+    toggleSelectedText: 'Följer' if useFollowButton,
+    selected: params.followed if useFollowButton,
+    href: params.authorPageUrl if useOuterAnchorElement,
+    titleHref: params.authorPageUrl if not useOuterAnchorElement,
+    linkAttributes: params.linkAttributes,
+    elementAttributes: params.elementAttributes,
+    elementClassNames: params.elementClassNames,
+    forcePx: params.forcePx,
+    classNames: classNames,
+    attributes: params.attributes
+  }) }}
 {% endmacro %}

package/components/byline/byline.scss

@@ -1,187 +1 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../components/icon-sprite/icon-sprite.scss";
-@use "../../components/button-toggle/button-toggle.scss" as *;
-
-$ds-byline__icon-size: 24px;
-$ds-byline__image-size: 44px;
-$ds-byline__image-size--direkt: 36px;
-
-.ds-byline__outer {
-  list-style: none;
-  line-height: 0;
-}
-
-.ds-byline {
-  background-color: transparent;
-  border: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  width: 100%;
-  position: relative;
-
-  &::after {
-    content: "";
-    height: ds-border-width(x1);
-    width: calc(100% - ds-spacing($ds-s-200));
-    background-color: $ds-color-border-primary;
-    position: absolute;
-    left: ds-spacing($ds-s-100);
-    bottom: 0;
-  }
-
-  .ds-byline__inner {
-    box-sizing: border-box;
-    border-radius: 0;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: ds-spacing($ds-s-100 $ds-s-100);
-    width: 100%;
-
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-  }
-
-  .ds-byline__content-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-grow: 1;
-    text-decoration: none;
-
-    &:focus-visible {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
-  }
-
-  .ds-byline__image {
-    height: $ds-byline__image-size;
-    width: $ds-byline__image-size;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: ds-spacing($ds-s-100);
-    background-color: $ds-color-component-primary-overlay;
-    flex-shrink: 0;
-  }
-
-  .ds-byline__titles {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    word-break: break-all;
-
-    .ds-byline__title {
-      @include ds-typography(
-        $ds-typography-functionalheading01,
-        $lineHeight: $ds-lineheight-m,
-        $fontWeight: $ds-fontweight-semibold
-      );
-      @at-root .ds-force-px#{&} {
-        @include ds-typography(
-          $ds-typography-functionalheading01,
-          $forcePx: true,
-          $lineHeight: $ds-lineheight-m,
-          $fontWeight: $ds-fontweight-semibold
-        );
-      }
-      color: $ds-color-text-primary;
-      text-align: left;
-    }
-
-    .ds-byline__subtitle {
-      @include ds-typography($ds-typography-functionalbody02);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
-      }
-      color: $ds-color-text-primary-02;
-      text-align: left;
-    }
-  }
-
-  .ds-byline__icon-right {
-    color: $ds-color-icon-primary;
-    display: inline-flex;
-    margin-left: ds-spacing($ds-s-100);
-
-    .ds-icon {
-      position: relative;
-      display: flex;
-      height: ds-px-to-rem($ds-byline__icon-size);
-      width: ds-px-to-rem($ds-byline__icon-size);
-      margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-byline__icon-size;
-        width: $ds-byline__icon-size;
-      }
-      svg {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .ds-byline__btn-toggle {
-    margin-left: ds-spacing($ds-s-100);
-  }
-
-  @include ds-hover() {
-    &:hover:not(.ds-byline--noninteractive) {
-      cursor: pointer;
-
-      .ds-byline__inner::before {
-        background-color: $ds-color-component-primary-overlay;
-      }
-    }
-  }
-
-  &.ds-byline--direkt {
-    .ds-byline__titles {
-      .ds-byline__subtitle {
-        line-height: ds-spacing($ds-s-100);
-      }
-    }
-    .ds-byline__image {
-      height: $ds-byline__image-size--direkt;
-      width: $ds-byline__image-size--direkt;
-    }
-
-    .ds-byline__btn-toggle {
-      min-height: $ds-byline__image-size--direkt;
-    }
-
-    .ds-byline__inner {
-      padding-top: ds-spacing($ds-s-075);
-      padding-bottom: ds-spacing($ds-s-075);
-    }
-  }
-
-  &:active:not(.ds-byline--noninteractive) .ds-byline__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
-  }
-  &:focus-visible {
-    outline: none;
-    .ds-byline__inner {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: -2px;
-    }
-  }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-}
+@use "../../components/list-item/list-item.scss";

package/components/list-item/list-item.js

@@ -28,6 +28,6 @@ function dsListItemToggle(toggleEl) {
 }
 
 function dsListItemAll() {
-  const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
+  const listElements = Array.from(document.getElementsByClassName("ds-list-item__content"));
   dsListItem(listElements);
 }

package/components/list-item/list-item.njk

@@ -7,39 +7,40 @@
 
 {% macro ListItem(params) %}
   {% set componentClassName = "ds-list-item" %}
-  <li class="{{ componentClassName + '__outer'}}">
+  <li class="{{ componentClassName }}{% if params.border %} {{componentClassName}}--border{% endif %}">
     {% call ListItemInner(params, componentClassName) %}
-      <div class="{{ componentClassName + '__inner'}}">
-        {% set componentClassName = componentClassName %}
-        {% if iconLeftSvg %}
-          <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
-        {% endif %}
-        {% if params.listItemType == 'image' %}
-          <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
-        {% endif %}
-        {% if params.title %}
-          <div class="{{ componentClassName + '__titles'}}">
-            {% if params.titleHref and not params.disabled %}
-              {% set linkAttributes = getAttributes(params.linkAttributes) %}
-              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
-            {% else %}
-              <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
-            {% endif %}
-            {%- if params.subtitle %}
-              <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>
-            {% endif %}
-          </div>
-        {% endif %}
-        {% if params.meta %}
-          <span class="{{ componentClassName + '__meta'}}">{{ params.meta }}</span>
-        {% endif %}
-        {% if iconRightSvg %}
-          <span class="{{ componentClassName + '__icon-right'}}">{{- iconRightSvg | safe -}}</span>
-        {% endif %}
-        {% if elementRight %}
-          {{- elementRight | safe -}}
-        {% endif %}
-      </div>
+      {% set componentClassName = componentClassName %}
+      {% if iconLeftSvg %}
+        <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
+      {% endif %}
+      {% if params.listItemType == 'image' %}
+        <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
+      {% endif %}
+      {% if params.listItemType == 'byline' and params.mediaHtml %}
+        <div class="{{ componentClassName + '__portrait'}}">{{ params.mediaHtml }}</div>
+      {% endif %}
+      {% if params.title %}
+        <div class="{{ componentClassName + '__titles'}}">
+          {% if params.titleHref and not params.disabled %}
+            {% set linkAttributes = getAttributes(params.linkAttributes) %}
+            <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
+          {% else %}
+            <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
+          {% endif %}
+          {%- if params.subtitle %}
+            <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>
+          {% endif %}
+        </div>
+      {% endif %}
+      {% if params.meta %}
+        <span class="{{ componentClassName + '__meta'}}">{{ params.meta }}</span>
+      {% endif %}
+      {% if iconRightSvg %}
+        <span class="{{ componentClassName + '__icon-right'}}">{{- iconRightSvg | safe -}}</span>
+      {% endif %}
+      {% if elementRight %}
+        {{- elementRight | safe -}}
+      {% endif %}
     {% endcall %}
   </li>
 {% endmacro %}
@@ -66,9 +67,8 @@
   {% endif %}
 
   {%- set classes = [
-    componentClassName,
+    componentClassName + "__content",
     "ds-force-px" if params.forcePx,
-    classNamePrefix + "border" if params.border,
     classNamePrefix + "disabled" if params.disabled,
     variantClass,
     params.classNames if params.classNames
@@ -83,8 +83,7 @@
       {{ caller() if caller }}
     </button>
   {% elif element == 'checkbox' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
+    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }}>
       {% set iconLeftSvg %}
         {{ Checkbox({
           name: params.name,
@@ -93,28 +92,27 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           stripLabel: true,
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'radio' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.id }}"></label>
+    <label class="{{ classes }}" for="{{ params.id }}" {{- attributes | safe }}>
       {% set iconLeftSvg %}
         {{ RadioButton({
           name: params.name,
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes }]
+          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes, classNames: params.elementClassNames }]
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'switch' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
+    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }} >
       {% set iconRightSvg %}
         {{ Switch({
           name: params.name,
@@ -124,11 +122,12 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           stripLabel: true,
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'accordion' %}
     {% set iconRightSvg %}
       {{ IconUse({ icon: "expand_less" }) }}
@@ -151,11 +150,38 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           size: "small",
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
     </div>
+  {% elif element == 'byline' %}
+    {% set elementRight %}
+      {% if params.toggleText %}
+        {{ ButtonToggle({
+          text: params.toggleText,
+          selected: params.selected,
+          selectedText: params.toggleSelectedText,
+          variant: params.variant | default("secondary"),
+          disabled: params.disabled,
+          forcePx: params.forcePx,
+          size: "small",
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
+        })}}
+      {% endif %}
+    {% endset %}
+    {% if params.href %}
+      {% set linkAttributes = getAttributes(params.linkAttributes) %}
+      <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
+        {{ caller() if caller }}
+      </a>
+    {% else %}
+      <div class="{{ classes }}" {{- attributes | safe }}>
+        {{ caller() if caller }}
+      </div>
+    {% endif %}
   {% else %}
     <div class="{{ classes }}" {{- attributes | safe }}>
       {{ caller() if caller }}