@bonniernews/dn-design-system-web 14.3.9 → 14.4.0-beta.0

package/components/button-toggle/README.md

@@ -14,8 +14,8 @@
 |text | String | yes | | | |
 |selectedText | String | yes | | | |
 |disabled | bool | no | true, false | false | |
-|variant | String | no | brand, SecondaryFilled | brand | Design variant |
-|size| String | no | default, small, xsmall | default | |
+|variant | String | no | primary, secondary, brand | primary | Design variant |
+|size| String | no | small, medium, large | medium | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
 |loading | bool | no | true, false | false | |
@@ -50,7 +50,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
 dsButtonToggle(toggleElements);
 ```

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

@@ -1,39 +1,20 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% 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/button/button.njk' import Button %}
 
 {% macro ButtonToggle(params) %}
-  {%- set componentClassName = "ds-btn-toggle" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
-  {%- set buttonVariant = params.variant | default("brand") %}
-
-  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
-  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-  {%- set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
-  {% endset %}
-
-  {%- set classes = [
-    componentClassName,
-    classNamePrefix + buttonVariant,
-    classNamePrefix + "selected" if params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
-    classNamePrefix + "full-width" if params.fullWidth,
-    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    "ds-loading" if params.loading,
-    "ds-force-px" if params.forcePx,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  <button type="button" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-    <span class="{{ componentClassName + '__off' }}" aria-hidden="true"><span>{{ params.text }}</span></span>
-    <span class="{{ componentClassName + '__on' }}" aria-hidden="true">
-      {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-    </span>
-    {{ loadingHtml | safe }}
-  </button>
+  {{ Button({
+    isToggle: true,
+    rounded: true,
+    selected: params.selected,
+    text: params.text,
+    selectedText: params.selectedText,
+    variant: params.variant,
+    disabled: params.disabled,
+    size: params.size,
+    fullWidth: params.fullWidth,
+    mobile: params.mobile,
+    loading: params.loading,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes
+  }) }}
 {% endmacro %}

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

@@ -1,215 +1 @@
-@use "sass:math";
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
-
-$ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
-$ds-btn-toggle__icon-size: 24px;
-$ds-btn-toggle__icon-size-xsmall: 20px;
-
-.ds-btn-toggle {
-  --ds-btn-toggle__background-color: transparent;
-  --ds-btn-toggle__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-btn-toggle__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-btn-toggle__border-color: #{$ds-color-border-primary-03};
-  --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
-  --ds-btn-toggle__color: #{$ds-color-text-primary};
-
-  &--brand:not(.ds-btn-toggle--selected) {
-    --ds-btn-toggle__background-color: #{$ds-color-component-brand};
-    --ds-btn-toggle__border-color: transparent;
-    --ds-btn-toggle__outline-color: #{$ds-color-border-focus};
-    --ds-btn-toggle__color: #{$ds-color-text-on-brand};
-    &:not(.ds-loading):disabled {
-      opacity: $ds-opacity-component-disabled;
-    }
-  }
-
-  &--secondaryFilled:not(.ds-btn-toggle--selected) {
-    --ds-btn-toggle__border-color: transparent;
-    --ds-btn-toggle__outline-color: #{$ds-color-border-focus-02};
-    --ds-btn-toggle__background-color: #{$ds-color-component-primary-overlay};
-  }
-
-  &--secondaryFilled,
-  &--selected {
-    &:not(.ds-loading):disabled {
-      --ds-btn-toggle__border-color: transparent;
-      --ds-btn-toggle__color: #{$ds-color-text-disabled};
-      &::before {
-        --ds-btn-toggle__background-color: unset;
-      }
-    }
-  }
-
-  &:not(.ds-loading):disabled {
-    cursor: not-allowed;
-  }
-
-  @include ds-typography($ds-typography-detailstandard-button);
-  cursor: pointer;
-  color: var(--ds-btn-toggle__color);
-  background-color: var(--ds-btn-toggle__background-color);
-  min-width: 0;
-  min-height: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: $ds-btn-toggle-outlined__border-width solid var(--ds-btn-toggle__border-color);
-  border-radius: 100px;
-  position: relative;
-  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-toggle-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-      $ds-btn-toggle-outlined__border-width
-    );
-
-  &::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;
-  }
-  span,
-  i {
-    position: relative;
-  }
-  .ds-btn-toggle__on {
-    display: none;
-  }
-
-  span {
-    pointer-events: none;
-  }
-
-  @include min-click-surface();
-
-  &:focus-visible {
-    outline: ds-metrics-border-width(x2) solid var(--ds-btn-toggle__outline-color);
-    outline-offset: 2px;
-  }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading)::before {
-      background-color: var(--ds-btn-toggle__background-color-hover);
-    }
-  }
-  &:active:not(:disabled):not(.ds-loading)::before {
-    background-color: var(--ds-btn-toggle__background-color-active);
-  }
-
-  @include ds-loading();
-}
-
-.ds-btn-toggle--full-width {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.ds-btn-toggle--small {
-  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
-}
-
-.ds-btn-toggle--xsmall {
-  @include ds-typography($ds-typography-detailstandard-button-small);
-  padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-toggle-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width);
-}
-
-@include ds-mq-only-breakpoint(mobile) {
-  .ds-btn-toggle--mobile-full-width {
-    width: 100%;
-  }
-}
-
-.ds-btn-toggle--selected {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-toggle-outlined__border-width);
-
-  .ds-btn-toggle__on {
-    display: flex;
-  }
-  .ds-btn-toggle__off {
-    display: none;
-  }
-
-  .ds-icon {
-    display: flex;
-    height: ds-px-to-rem($ds-btn-toggle__icon-size);
-    width: ds-px-to-rem($ds-btn-toggle__icon-size);
-    margin: ds-spacing(0 $ds-s-050 0 0, rem);
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  &.ds-btn-toggle--small {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-toggle-outlined__border-width);
-  }
-
-  &.ds-btn-toggle--xsmall {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-toggle-outlined__border-width);
-    .ds-icon {
-      height: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
-      width: ds-px-to-rem($ds-btn-toggle__icon-size-xsmall);
-      margin: ds-spacing(0 $ds-s-025 0 0, rem);
-    }
-  }
-
-  // we have to override spinner styling since spinner variant is based on "off" button variant
-  &.ds-loading {
-    .ds-spinner__inner {
-      border-top-color: $ds-color-icon-primary;
-      &::before {
-        border-color: $ds-color-icon-primary;
-      }
-    }
-  }
-}
-
-.ds-btn-toggle.ds-force-px {
-  /* stylelint-disable-next-line */
-  padding: ds-spacing($ds-s-075) - $ds-btn-toggle-outlined__border-width ds-spacing($ds-s-150) -
-    $ds-btn-toggle-outlined__border-width;
-  @include ds-typography($ds-typography-detailstandard-button, true);
-
-  &.ds-btn-toggle--selected {
-    padding-left: ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-050 0 0);
-      height: $ds-btn-toggle__icon-size;
-      width: $ds-btn-toggle__icon-size;
-    }
-  }
-  &.ds-btn-toggle--small {
-    padding: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-toggle-outlined__border-width;
-
-    &.ds-btn-toggle--selected {
-      padding-left: ds-spacing($ds-s-100)-$ds-btn-toggle-outlined__border-width;
-    }
-  }
-  &.ds-btn-toggle--xsmall {
-    @include ds-typography($ds-typography-detailstandard-button-small, true);
-    padding: ds-spacing($ds-s-025)-$ds-btn-toggle-outlined__border-width ds-spacing($ds-s-075)-$ds-btn-toggle-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-025 0 0);
-      height: $ds-btn-toggle__icon-size-xsmall;
-      width: $ds-btn-toggle__icon-size-xsmall;
-    }
-    &.ds-btn-toggle--selected {
-      padding-left: ds-spacing($ds-s-050)-$ds-btn-toggle-outlined__border-width;
-    }
-  }
-}
+@use "../button/button.scss" as *;

package/components/byline/README.md

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

package/components/byline/byline.njk

@@ -28,8 +28,8 @@
             text: "Följ",
             selectedText: "Följer",
             selected: params.followed,
-            variant: "secondaryFilled",
-            size: "xsmall",
+            variant: "secondary",
+            size: "small",
             attributes: params.elementAttributes,
             classNames: elementClassNames | join(" "),
             forcePx: params.forcePx

package/components/factbox/README-UXD.md

@@ -1,40 +0,0 @@
-# Standard button
-
-Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
-
-
-### Anatomy
-
-1. **Label:** The text displayed on the button, indicating its function.
-2. **Icon** Iconography that enhances the function.
-3. **Background:** The background color or style that defines the button's appearance.
-4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
-5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
-
-
-## Variants
-
-| Variant   | How to use                                                                              |
-| --------- | ---------------------------------------------------------------------------------------------------- |
-| Brand   | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
-| Primary   | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz.    |
-| Secondary | Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news.   |
-| Outline   | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
-
-
-## Usage
-
-Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
-
-
-### Dos
-
-- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
-- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
-- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
-
-### Don'ts
-
-- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels like ”Fortsätt” that might confuse users about the button's function.
-- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
-

package/components/factbox/factbox.njk

@@ -29,8 +29,8 @@
       <div class="{{ componentClassName + '__show-more'}}">
         {{ Button({
           text: 'Visa mer',
-          variant: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
@@ -39,8 +39,8 @@
         })}}
         {{ Button({
           text: 'Visa mindre',
-          variant: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_less',
           classNames: 'ds-factbox__expand-less',

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

@@ -47,7 +47,7 @@
     {% if params.variant == 'toggle' %}
       {{ ButtonToggle({
         variant: 'brand',
-        size: 'xsmall',
+        size: 'small',
         text: params.toggleText,
         selectedText: params.toggleSelectedText,
         selected: params.toggleSelected,
@@ -58,14 +58,16 @@
     {% elif (params.variant == 'arrows') %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
         {{ IconButton({
-          variant: "elevated",
+          variant: "primary",
+          emphasis: "outline",
           size: "small",
           iconName: "arrow_back",
           classNames: "ds-group-header__arrow ds-group-header__arrow--left",
           attributes: {"aria-label": "Föregående"}
         }) }}
         {{ IconButton({
-          variant: "elevated",
+          variant: "primary",
+          emphasis: "outline",
           size: "small",
           iconName: "arrow_forward",
           classNames: "ds-group-header__arrow ds-group-header__arrow--right",

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

@@ -49,7 +49,7 @@ $ds-group-header__icon-size: 24px;
 
   .ds-group-header__right-link,
   .ds-group-header__icon,
-  .ds-btn-toggle {
+  .ds-btn--toggle {
     flex-shrink: 0;
   }
 
@@ -58,15 +58,15 @@ $ds-group-header__icon-size: 24px;
     flex-shrink: 0;
     align-items: center;
 
-    .ds-icon-btn {
+    .ds-btn {
       margin: ds-spacing(0 $ds-s-050);
-      + .ds-icon-btn {
+      + .ds-btn {
         margin: ds-spacing(0 0 0 $ds-s-075);
       }
     }
   }
 
-  .ds-btn-toggle {
+  .ds-btn--toggle {
     align-self: center;
   }
 

package/components/icon-button/README.md

@@ -12,8 +12,9 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | outlined, transparent, elevated | outlined | Design variant |
-|size| String | no | default, small, large | default | |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|size| String | no | small, medium, large, xlarge | medium | |
 |loading | bool | no | true, false | false | |
 |a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
 |href | String | no | | | If href is set the button will be rendered as an a-tag |
@@ -31,7 +32,8 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {{ IconButton({
-  variant: 'outlined',
+  variant: 'primary',
+  emphasis: 'outline',
   size: 'default',
   iconName: 'arrow_forward',
   attributes: { 'aria-label': 'Nästa' }

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

@@ -1,53 +1,20 @@
-{% 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/button/button.njk' import Button %}
 
-{% macro IconButton(params, isToggle) %}
-  {%- set componentClassName = "ds-icon-btn" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set additionalClasses = [] %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  {%- set variantClass = classNamePrefix + (params.variant if params.variant else "outlined") %}
-  {%- set classes = [
-    componentClassName,
-    "ds-force-px" if params.forcePx,
-    "ds-loading" if params.loading,
-    variantClass,
-    classNamePrefix + "toggle" if isToggle,
-    classNamePrefix + "selected" if isToggle and params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
-  {% endset %}
-
-  {%- if params.a11y and params.a11y.visuallyHidden %}
-    {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
-  {% endif %}
-
-  {%- if isToggle %}
-    <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 + '__off' }}" aria-hidden="true">{{ IconUse({ icon: params.iconName }) }}</span>
-      <span class="{{ componentClassName + '__on' }}"  aria-hidden="true">{{ IconUse({ icon: params.selectedIconName }) }}</span>
-      {{ loadingHtml | safe }}
-    </button>
-  {% else %}
-    {% if params.href %}
-      <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
-        {{- visuallyHidden | safe if visuallyHidden -}}
-        {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
-        {{ loadingHtml | safe }}
-      </a>
-    {% else %}
-      <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-        {{- visuallyHidden | safe if visuallyHidden -}}
-        {{ IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) }}
-        {{ loadingHtml | safe }}
-      </button>
-    {% endif %}
-  {% endif %}
+{% macro IconButton(params) %}
+  {{ Button({
+    isIconBtn: true,
+    isToggle: params.isToggle,
+    variant: params.variant,
+    emphasis: params.emphasis,
+    disabled: params.disabled,
+    size: params.size,
+    iconName: params.iconName,
+    selectedIconName: params.selectedIconName,
+    loading: params.loading,
+    selected: params.selected,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes,
+    a11y: params.a11y
+  }) }}
 {% endmacro %}