@bonniernews/dn-design-system-web 3.0.0-alpha.9 → 3.0.0-alpha.91

package/assets/article-image/article-image.njk

@@ -1,3 +1,5 @@
+{% from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.njk' import ImageCaption %}
+
 {% macro ArticleImage(params) %}
   {% set macroClassName = "ds-article-image" %}
   {% set additionalClasses = [] %}
@@ -18,16 +20,15 @@
     {% endif %}
 
     {% if params.caption or params.author %}
-      <figcaption>
-        {% if params.caption %}
-          <span aria-hidden="true">{{ params.caption | safe }}</span>
-        {% endif %}
-        {% if params.author %}
-          <span class="ds-article-image__credits">
-            {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
-          </span>
-        {% endif %}
-      </figcaption>
+      {% set caption = params.caption if params.caption else "" %}
+      {% set author = params.author if params.author else "" %}
+      {% set imageType = params.imageType if params.imageType else "" %}
+      {{ ImageCaption({
+        caption: caption,
+        author: author,
+        imageType: imageType,
+        forcePx: params.forcePx
+      })}}
     {% endif %}
   </figure>
 {% endmacro %}

package/assets/article-image/article-image.scss

@@ -1,20 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/image-caption/image-caption.scss"  as *;
 
 .ds-article-image {
   margin: 0;
-
-  > figcaption {
-    @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component($ds-sc-x2);
-    color: $ds-color-text-primary;
-
-    @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
-    }
-
-    > .ds-article-image__credits {
-      display: block;
-      color: $ds-color-text-primary-02;
-    }
-  }
 }

package/assets/form-field/form-field.njk

@@ -1,4 +1,4 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% set classes = [] %}
 
 {% macro FormField(params, wrapperClasses) %}
@@ -10,7 +10,7 @@
     {{ caller() if caller }}
     {% if params.errorMessage %}
       <div class="ds-form-field__error-message js-field-error">
-        {{ Icon({ icon: "info-filled" }) }}
+        {{ IconUse({ icon: "info-filled" }) }}
         <span>{{ params.errorMessage | safe }}</span>
       </div>
     {% endif %}

package/assets/form-field/form-field.scss

@@ -1,9 +1,5 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
 
 $ds-form-field__error-icon-size: 20px;
 

package/assets/teaser/dot-or-grade.njk

@@ -0,0 +1,7 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
+
+{% macro getDotOrGrade(params) %}
+  {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
+  {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.flashing }) }}
+{% endmacro %}

package/assets/teaser/teaser.scss

@@ -0,0 +1,96 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
+@use "../../components/vip-badge/vip-badge.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+@use "../../components/teaser-dot/teaser-dot.scss";
+
+.ds-teaser {
+  display: block;
+  background-color: $ds-color-background-primary;
+  text-decoration: none;
+  position: relative;
+
+  @include ds-teaser-focus(-8px);
+
+  .ds-teaser__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .ds-teaser__vignette {
+    display: block;
+    @include ds-typography($ds-typography-detailarticle-label);
+    color: $ds-theme-color;
+    margin-bottom: ds-spacing-component($ds-sc-x1);
+  }
+
+  .ds-teaser__title {
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+
+    .ds-teaser__highlight {
+      color: $ds-theme-color;
+    }
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline();
+    }
+  }
+
+  .ds-teaser__text {
+    @include ds-typography($ds-typography-detailmedryckare);
+    color: $ds-color-text-primary;
+    // Should be replaced with dynamic spacing layout token when available
+    margin: ds-spacing-component($ds-sc-x2 0 0);
+    @include ds-mq-smallest-breakpoint(tablet) {
+      margin-top: ds-spacing-component($ds-sc-x3);
+    }
+  }
+
+  .ds-icon.ds-icon--grade {
+    $grade-size: ds-px-to-rem(34px);
+    color: $ds-color-icon-primary;
+    border-radius: 50%;
+    float: left;
+    font-size: 0;
+    line-height: 0;
+    margin: ds-spacing-component($ds-sc-x1 $ds-sc-x1 0 0, "rem");
+    height: $grade-size;
+    width: $grade-size;
+    svg {
+      width: 100%;
+      height: 100%;
+      circle {
+        stroke: currentColor;
+      }
+    }
+  }
+
+  .ds-teaser__sticker {
+    display: inline;
+    color: $ds-theme-color;
+    @include ds-typography($ds-typography-detailarticle-label);
+  }
+
+  .ds-teaser__media {
+    width: 100%;
+    position: relative;
+  }
+
+  .ds-vip-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 5;
+  }
+
+  &.ds-teaser--quote-badge {
+    .ds-teaser__title {
+      padding-right: ds-spacing-component($ds-sc-x3);
+    }
+  }
+}

package/components/article-body-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+- Storybook: [ArticleBodyImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
 
 ----
 
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
   fullWidth: true,
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Paul Hansen",
+  author: "Paul Hansen"
 })}}
 ```
 

package/components/article-body-image/article-body-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-top-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
+- Storybook: [ArticleTopImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
 
 ----
 
@@ -30,7 +30,7 @@ These are copy paste friendly examples to quickliy get started using a component
   imageHtml: exampleArticleTopImageHtml(),
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Beatrice Lundborg",
+  author: "Beatrice Lundborg"
 })}}
 ```
 

package/components/article-top-image/article-top-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-top-image/article-top-image.scss

@@ -2,5 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--top {
-  @include ds-spacing-layout($ds-sl-gap-vertical-static-large, padding-bottom);
+  @include ds-spacing-layout($ds-sl-gap-vertical-medium, padding-bottom);
 }

package/components/badge/badge.scss

@@ -1,8 +1,4 @@
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 
 $ds-badge__min-size: 8px;
 

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

@@ -1,11 +1,4 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/links.scss" as *;
-@use "../../foundations/helpers/shadows.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
 @use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;

package/components/button/button.njk

@@ -1,75 +1,70 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% 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 %}
 
 {% macro Button(params) %}
-  {% set componentClassName = "ds-btn" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set text = params.text %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
-
-  {% set buttonVariant = params.variant | default("primary") %}
-  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+  {%- set componentClassName = "ds-btn" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set text = params.text %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+  {%- set buttonVariant = params.variant | default("primary") %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + buttonVariant), additionalClasses) %}
+  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
+  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
 
-  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
-  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-
-  {% set loadingHtml %}
+  {%- set loadingHtml %}
     {{ Spinner({ size: 'small', variant: spinnerVariant, 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.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% if params.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% if params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {%- if params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.mobile and params.mobile.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {%- if params.mobile and params.mobile.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set variant = (variant.push(classNamePrefix + "icon" + "-" + params.iconPosition ), variant) %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon" + "-" + params.iconPosition ), additionalClasses) %}
+    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
   {% 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}}>
-      <div class="{{ componentClassName + '__inner'}}">
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- if params.href %}
+    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
         <span>{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </a>
   {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <div class="{{ componentClassName + '__inner'}}">
+    <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
         <span>{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </button>
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
@@ -17,6 +17,10 @@ $ds-btn__icon-size: 24px;
   padding: 0;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   &:not(.ds-btn--condensed) {
     min-width: $ds-btn__min-clickable-area;
     min-height: $ds-btn__min-clickable-area;
@@ -75,6 +79,7 @@ $ds-btn__icon-size: 24px;
   &,
   & .ds-btn__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 

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

@@ -9,6 +9,8 @@ function dsButtonToggle(toggleElements = []) {
     toggleEl.addEventListener("click", () => {
       if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
       toggleEl.classList.toggle("ds-btn-toggle--selected");
+      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
+      toggleEl.setAttribute("aria-checked", ariaChecked);
     });
   });
 }

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

@@ -1,65 +1,65 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% 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 %}
 
 {% macro ButtonToggle(params) %}
-  {% set componentClassName = "ds-btn-toggle" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes = getAttributes(params.attributes) %}
+  {%- set componentClassName = "ds-btn-toggle" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
 
-  {% if params.selected %}
-    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {%- if params.selected %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
   {% endif %}
 
-  {% set buttonVariant = params.variant | default("brand") %}
-  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+  {%- set buttonVariant = params.variant | default("brand") %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + buttonVariant), additionalClasses) %}
 
-  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
-  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-  {% set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
+  {%- 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 %}
+  {%- set loadingHtml %}
     {{ Spinner({ size: spinnerSize, variant: spinnerVariant, 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.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% if params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {%- if params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% if params.mobile and params.mobile.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {%- if params.mobile and params.mobile.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
   {% 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(" ") %}
-
-  <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-    <div class="{{ componentClassName + '__inner'}}">
-      <div class="{{ componentClassName + '__off'}}"><span>{{ params.text }}</span></div>
-      <div class="{{ componentClassName + '__on'}}">
-        {{ Icon({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-      </div>
+  {%- set classes = componentClassName + " " + additionalClasses | 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 + '__inner' }}" aria-hidden="true">
+      <span class="{{ componentClassName + '__off' }}"><span>{{ params.text }}</span></span>
+      <span class="{{ componentClassName + '__on' }}">
+        {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
+      </span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

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

@@ -1,6 +1,6 @@
 @use "sass:math";
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
@@ -20,6 +20,10 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   padding: 0;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   &:not(.ds-btn-toggle--condensed) {
     min-width: $ds-btn-toggle__min-clickable-area;
     min-height: $ds-btn-toggle__min-clickable-area;
@@ -81,6 +85,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   &,
   & .ds-btn-toggle__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 

package/components/byline/byline.njk

@@ -1,5 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% 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 %}
 
 {% macro Byline(params) %}
@@ -22,7 +22,7 @@
           </div>
         {% endcall %}
         {% if visualVariant == 'icon' %}
-          <span class="{{ componentClassName + '__icon-right'}}">{{- Icon({ icon: 'arrow_forward' }) | safe -}}</span>
+          <span class="{{ componentClassName + '__icon-right'}}">{{- IconUse({ icon: 'arrow_forward' }) | safe -}}</span>
         {% endif %}
         {% if visualVariant == 'button' and params.followable %}
           {{ ButtonToggle({

package/components/byline/byline.scss

@@ -1,5 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
 @use "../../components/button-toggle/button-toggle.scss" as *;
 
 $ds-byline__icon-size: 24px;
@@ -33,7 +33,6 @@ $ds-byline__image-size: 44px;
   .ds-byline__inner {
     box-sizing: border-box;
     border-radius: 0;
-    transition: background-color 50ms ease-out;
     margin: 0;
     display: flex;
     align-items: center;
@@ -51,7 +50,6 @@ $ds-byline__image-size: 44px;
       left: 0;
       bottom: 0;
       right: 0;
-      transition: background-color 500ms ease;
     }
 
     .ds-icon {

package/components/checkbox/checkbox.njk

@@ -1,12 +1,12 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro CheckboxIcons(componentClassName) %}
   <span class="{{ componentClassName + '__icon'}}">
-    {{ Icon({ icon: "check_box_outline_blank" }) }}
-    {{ Icon({ icon: "check_box-filled" }) }}
+    {{ IconUse({ icon: "check_box_outline_blank" }) }}
+    {{ IconUse({ icon: "check_box-filled" }) }}
   </span>
 {% endmacro %}