@bonniernews/dn-design-system-web 4.2.1 → 4.2.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.2.3 (2023-09-07)
+
+
+### Bug Fixes
+
+* **web:** refactor icon buttons ([#984](https://github.com/BonnierNews/dn-design-system/issues/984)) ([a17b3bf](https://github.com/BonnierNews/dn-design-system/commit/a17b3bf340605e75171b5da973ff5da1df254c97))
+
+
+
+## 4.2.2 (2023-09-07)
+
+
+### Bug Fixes
+
+* **web:** add focus states for swipe and groupheader and fix link param in groupheader ([#987](https://github.com/BonnierNews/dn-design-system/issues/987)) ([95104c8](https://github.com/BonnierNews/dn-design-system/commit/95104c8066ca58a606f12ff2d179465a4803809e))
+
+
+
 ## 4.2.1 (2023-09-07)
 
 

package/components/group-header/group-header.njk

@@ -31,7 +31,7 @@
 
   <div class="{{ classes }}" {{ attributes | safe }}>
     {% if params.href %}
-      <a class="{{ componentClassName + '__href'}}" href="{{ params.titleHref }}">
+      <a class="{{ componentClassName + '__href'}}" href="{{ params.href }}">
         {{ groupHeaderInner | safe }}
       </a>
     {% else %}

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

@@ -37,6 +37,8 @@
     justify-content: space-between;
     flex: 1;
 
+    @include ds-teaser-focus(-2px);
+
     @include ds-link($ds-link-list);
 
     @include ds-hover(true) {

package/components/icon-button/icon-button.njk

@@ -1,64 +1,72 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
-{% macro IconButton(params) %}
-  {% set componentClassName = "ds-icon-btn" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+{% macro IconButton(params, isToggle) %}
+  {%- set componentClassName = "ds-icon-btn" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {%- if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
   {% else %}
-    {% set variant = (variant.push(classNamePrefix + "outlined"), variant) %}
-  {% endif %}
-
-  {% if params.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "outlined"), additionalClasses) %}
   {% endif %}
 
-  {% if params.iconName %}
-    {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% set loadingHtml %}
-    {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+  {%- set loadingHtml %}
+    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
   {% endset %}
 
-  {% if params.loading %}
-    {% set variant = (variant.push("ds-loading"), variant) %}
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
   {% endif %}
 
-  {% if params.a11y and params.a11y.visuallyHidden %}
+  {%- if params.a11y and params.a11y.visuallyHidden %}
     {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
+  {%- if isToggle %}
+    {%- if params.selected %}
+      {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
+    {% endif %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "toggle"), additionalClasses) %}
+    {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+    <button type="button" role="switch" aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__inner' }}">{{- iconSvg | safe if iconSvg -}}</span>
-      {{ loadingHtml | safe }}
-    </a>
-  {% else %}
-    <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-      {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__inner' }}">{{- iconSvg | safe if iconSvg -}}</span>
-      {{ loadingHtml | safe }}
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+        <span class="{{ componentClassName + '__off' }}">{{ IconUse({ icon: params.iconName }) }}</span>
+        <span class="{{ componentClassName + '__on' }}">{{ IconUse({ icon: params.selectedIconName }) }}</span>
+        {{ loadingHtml | safe }}
+      </span>
     </button>
+  {% else %}
+    {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+    {% if params.href %}
+      <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
+        {{- visuallyHidden | safe if visuallyHidden -}}
+        <span class="{{ componentClassName + '__inner' }}">{{IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}</span>
+        {{ loadingHtml | safe }}
+      </a>
+    {% else %}
+      <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+        {{- visuallyHidden | safe if visuallyHidden -}}
+        <span class="{{ componentClassName + '__inner' }}">{{IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}</span>
+        {{ loadingHtml | safe }}
+      </button>
+    {% endif %}
   {% endif %}
 {% endmacro %}

package/components/icon-button/icon-button.scss

@@ -3,10 +3,26 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-icon-btn__border-radius: 50%;
-$ds-icon-btn__icon-size: 24px;
 $ds-icon-btn__min-clickable-area: 48px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
+.ds-icon-btn {
+  --ds-icon-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width};
+  --ds-icon-btn__icon-size: #{ds-px-to-rem(24px)};
+
+  &.ds-force-px {
+    --ds-icon-btn__icon-size: 24px;
+  }
+
+  &.ds-icon-btn--small {
+    --ds-icon-btn__inner-padding: #{2px - $ds-btn-outlined__border-width};
+  }
+
+  &.ds-icon-btn--large {
+    --ds-icon-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)-$ds-btn-outlined__border-width};
+  }
+}
+
 .ds-icon-btn {
   cursor: pointer;
   background-color: transparent;
@@ -32,7 +48,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     align-items: center;
     justify-content: center;
     position: relative;
-    padding: ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width;
+    padding: var(--ds-icon-btn__inner-padding);
 
     &::before {
       content: "";
@@ -48,13 +64,9 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     .ds-icon {
       position: relative;
       display: flex;
-      height: ds-px-to-rem($ds-icon-btn__icon-size);
-      width: ds-px-to-rem($ds-icon-btn__icon-size);
+      height: var(--ds-icon-btn__icon-size);
+      width: var(--ds-icon-btn__icon-size);
       margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-icon-btn__icon-size;
-        width: $ds-icon-btn__icon-size;
-      }
       svg {
         fill: currentColor;
       }
@@ -69,14 +81,6 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     background-color: $ds-color-component-primary-overlay-02;
   }
 
-  &.ds-icon-btn--small .ds-icon-btn__inner {
-    padding: ds-spacing-component($ds-sc-x1)-$ds-btn-outlined__border-width;
-  }
-
-  &.ds-icon-btn--large .ds-icon-btn__inner {
-    padding: ds-spacing-component($ds-sc-x3)-$ds-btn-outlined__border-width;
-  }
-
   &:focus-visible {
     outline: none;
     .ds-icon-btn__inner {

package/components/icon-button-toggle/README.md

@@ -48,6 +48,6 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ```javascript
 import dsIconButtonToggle from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn-toggle"));
+const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn--toggle"));
 dsIconButtonToggle(toggleElements);
 ```

package/components/icon-button-toggle/icon-button-toggle.js

@@ -7,8 +7,8 @@ function dsIconButtonToggle(toggleElements = []) {
   if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
     toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-icon-btn-toggle--disabled")) return;
-      toggleEl.classList.toggle("ds-icon-btn-toggle--selected");
+      if (toggleEl.classList.contains("ds-icon-btn--disabled")) return;
+      toggleEl.classList.toggle("ds-icon-btn--selected");
       const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
       toggleEl.setAttribute("aria-checked", ariaChecked);
     });
@@ -16,6 +16,6 @@ function dsIconButtonToggle(toggleElements = []) {
 }
 
 function dsIconButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn-toggle"));
+  const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn--toggle"));
   dsIconButtonToggle(toggleElements);
 }

package/components/icon-button-toggle/icon-button-toggle.njk

@@ -1,55 +1,5 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
-{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
-{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro IconButtonToggle(params) %}
-  {%- set componentClassName = "ds-icon-btn-toggle" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
-  {%- set attributes = getAttributes(params.attributes) %}
-
-  {%- if params.selected %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
-  {% endif %}
-  
-  {%- if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.variant %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% else %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "outlined"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
-  {% endset %}
-
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.a11y and params.a11y.visuallyHidden %}
-    {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
-  <button type="button" role="switch" aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-    {{- visuallyHidden | safe if visuallyHidden -}}
-    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-      <span class="{{ componentClassName + '__off' }}">{{ IconUse({ icon: params.iconName }) }}</span>
-      <span class="{{ componentClassName + '__on' }}">{{ IconUse({ icon: params.selectedIconName }) }}</span>
-      {{ loadingHtml | safe }}
-    </span>
-  </button>
+  {{ IconButton(params, true) }}
 {% endmacro %}

package/components/icon-button-toggle/icon-button-toggle.scss

@@ -1,164 +1,19 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
+@use "../icon-button/icon-button.scss";
 
-$ds-icon-btn-toggle__border-radius: 50%;
-$ds-icon-btn-toggle__icon-size: 24px;
-$ds-icon-btn-toggle__min-clickable-area: 48px;
-$ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
-
-.ds-icon-btn-toggle {
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  min-width: $ds-icon-btn-toggle__min-clickable-area;
-  min-height: $ds-icon-btn-toggle__min-clickable-area;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  position: relative;
-
-  span {
-    pointer-events: none;
-  }
-
-  .ds-icon-btn-toggle__inner {
-    box-sizing: border-box;
-    border-radius: $ds-icon-btn-toggle__border-radius;
-    border: $ds-btn-toggle-outlined__border-width solid;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    padding: ds-spacing-component($ds-sc-x2)-$ds-btn-toggle-outlined__border-width;
-
-    .ds-icon-btn-toggle__on {
+.ds-icon-btn--toggle {
+  .ds-icon-btn__inner {
+    .ds-icon-btn__on {
       display: none;
     }
-
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: -$ds-btn-toggle-outlined__border-width;
-      left: -$ds-btn-toggle-outlined__border-width;
-      bottom: -$ds-btn-toggle-outlined__border-width;
-      right: -$ds-btn-toggle-outlined__border-width;
-    }
-
-    .ds-icon {
-      position: relative;
-      display: flex;
-      height: ds-px-to-rem($ds-icon-btn-toggle__icon-size);
-      width: ds-px-to-rem($ds-icon-btn-toggle__icon-size);
-      margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-icon-btn-toggle__icon-size;
-        width: $ds-icon-btn-toggle__icon-size;
-      }
-      svg {
-        fill: currentColor;
-      }
-    }
-  }
-  @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-icon-btn-toggle__inner::before {
-      background-color: $ds-color-component-primary-overlay;
-    }
-  }
-  &:active:not(.ds-loading) .ds-icon-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
-  }
-
-  &.ds-icon-btn-toggle--small .ds-icon-btn-toggle__inner {
-    padding: ds-spacing-component($ds-sc-x1)-$ds-btn-toggle-outlined__border-width;
-  }
-
-  &.ds-icon-btn-toggle--large .ds-icon-btn-toggle__inner {
-    padding: ds-spacing-component($ds-sc-x3)-$ds-btn-toggle-outlined__border-width;
-  }
-
-  &:focus-visible {
-    outline: none;
-    .ds-icon-btn-toggle__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
-  }
-  &:disabled:not(.ds-loading) {
-    cursor: not-allowed;
-    .ds-icon-btn-toggle__inner {
-      color: $ds-color-icon-disabled;
-      outline: none;
-      &::before {
-        background-color: transparent;
-      }
-    }
   }
 
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  @include ds-loading();
-}
-
-.ds-icon-btn-toggle--selected .ds-icon-btn-toggle__inner {
-  .ds-icon-btn-toggle__on {
-    display: flex;
-  }
-  .ds-icon-btn-toggle__off {
-    display: none;
-  }
-}
-
-.ds-icon-btn-toggle--transparent {
-  .ds-icon-btn-toggle__inner {
-    border-color: transparent;
-    color: $ds-color-icon-primary;
-  }
-}
-
-.ds-icon-btn-toggle--outlined {
-  .ds-icon-btn-toggle__inner {
-    background-color: $ds-color-component-secondary;
-    border-color: $ds-color-border-primary-02;
-    color: $ds-color-icon-primary;
-  }
-  &:disabled .ds-icon-btn-toggle__inner {
-    border-color: $ds-color-border-primary;
-  }
-}
-
-.ds-icon-btn-toggle--on-media {
-  .ds-icon-btn-toggle__inner {
-    background-color: $ds-color-static-transparent-black;
-    border-color: transparent;
-    color: $ds-color-static-white;
-  }
-  &:disabled .ds-icon-btn-toggle__inner {
-    border-color: $ds-color-border-primary;
-  }
-  @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-icon-btn-toggle__inner::before {
-      background-color: $ds-color-static-transparent-white-10;
+  &.ds-icon-btn--selected .ds-icon-btn__inner {
+    .ds-icon-btn__on {
+      display: flex;
     }
-  }
-  &:active:not(.ds-loading) .ds-icon-btn-toggle__inner::before {
-    background-color: $ds-color-static-transparent-white-10;
-  }
-  &:disabled:not(.ds-loading) .ds-icon-btn-toggle__inner {
-    color: $ds-color-static-white;
-    &::before {
-      background-color: transparent;
+    .ds-icon-btn__off {
+      display: none;
     }
   }
-  &:focus-visible .ds-icon-btn-toggle__inner {
-    outline-color: $ds-color-static-white;
-  }
 }

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

@@ -8,6 +8,8 @@
   max-width: 100%;
   color: $ds-color-text-primary;
 
+  @include ds-teaser-focus(2px);
+
   .ds-teaser__carousel {
     padding: ds-spacing-component(0 $ds-sc-x4);
     padding-bottom: ds-spacing-component($ds-sc-x3);
@@ -16,6 +18,8 @@
     grid-auto-columns: max-content;
     grid-auto-flow: column;
     gap: ds-spacing-component($ds-sc-x2);
+
+    @include ds-teaser-focus(2px);
   }
 
   @include ds-mq-only-breakpoint(desktop) {

package/components/teaser-swipe-card/teaser-swipe-card.scss

@@ -14,6 +14,9 @@
   border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
   border-radius: ds-metrics-border-radius(x2);
   overflow: hidden; // ensure media doesn't overflow the border-radius
+  margin-bottom: 0;
+
+  @include ds-teaser-focus(-2px);
 
   .ds-teaser__text {
     display: flex;

package/components/text-input/text-input.scss

@@ -2,7 +2,8 @@
 @use "../../assets/form-field/form-field.scss";
 @use "../icon-button/icon-button.scss";
 
-$ds-text-input-toggle-btn__width: 32px;
+$ds-text-input-toggle-btn__width: 28px;
+$ds-text-input-toggle-btn__top: 22px;
 $ds-text-input-toggle-btn__area: (
   $ds-text-input-toggle-btn__width + ds-spacing-component($ds-sc-x2)
 );
@@ -102,7 +103,7 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-icon-btn.ds-text-input__password-toggle {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component($ds-sc-x5));
+  top: ds-px-to-rem($ds-text-input-toggle-btn__top);
   right: ds-spacing-component($ds-sc-x1);
   z-index: 1;
   min-width: 0;
@@ -112,6 +113,7 @@ $ds-text-input-toggle-btn__area: (
 .ds-force-px {
   &.ds-text-input {
     padding-top: ds-spacing-component($ds-sc-x2);
+    font-size: 16px;
   }
 
   .ds-text-input__input {
@@ -148,6 +150,6 @@ $ds-text-input-toggle-btn__area: (
   }
 
   .ds-text-input__password-toggle {
-    top: ds-spacing-component($ds-sc-x5);
+    top: $ds-text-input-toggle-btn__top;
   }
 }

package/package.json

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