@bonniernews/dn-design-system-web 3.0.0-alpha.32 → 3.0.0-alpha.34

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.33...@bonniernews/dn-design-system-web@3.0.0-alpha.34) (2023-04-26)
+
+
+### Bug Fixes
+
+* **web:** button accessbility ([#767](https://github.com/BonnierNews/dn-design-system/issues/767)) ([1b19f98](https://github.com/BonnierNews/dn-design-system/commit/1b19f983f208ab3467640b8f921e8f711f569ab5))
+* **web:** vip-badge square top-right corner ([#771](https://github.com/BonnierNews/dn-design-system/issues/771)) ([19e2753](https://github.com/BonnierNews/dn-design-system/commit/19e275397f5d9ac7a16703141c0c5372ee1f0e02))
+
+
+
+## 3.0.0-alpha.33 (2023-04-24)
+
+
+### Features
+
+* **web:** pictogram component for web ([#770](https://github.com/BonnierNews/dn-design-system/issues/770)) ([2ad5076](https://github.com/BonnierNews/dn-design-system/commit/2ad50768177689598d9b34605161763630fea1f9))
+
+
+
 ## [3.0.0-alpha.32](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.31...@bonniernews/dn-design-system-web@3.0.0-alpha.32) (2023-04-21)
 
 

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/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) %}
+  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon" + "-" + params.iconPosition ), additionalClasses) %}
     {% set iconSvg =  Icon({ 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-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

@@ -3,63 +3,63 @@
 {% 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'}}">
+  {%- 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' }}">
         {{ Icon({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-      </div>
+      </span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

package/components/icon-button/README.md

@@ -32,7 +32,8 @@ These are copy paste friendly examples to quickliy get started using a component
 {{ IconButton({
   variant: 'outlined',
   size: 'default',
-  iconName: 'home-filled'
+  iconName: 'arrow_forward',
+  attributes: { 'aria-label': 'Nästa' }
 })}}
 ```
 

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

@@ -27,7 +27,7 @@
   {% endif %}
 
   {% if params.iconName %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+    {% set iconSvg =  Icon({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {% set loadingHtml %}
@@ -51,13 +51,13 @@
   {% if params.href %}
     <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
+      <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>
+      <span class="{{ componentClassName + '__inner' }}">{{- iconSvg | safe if iconSvg -}}</span>
       {{ loadingHtml | safe }}
     </button>
   {% endif %}

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

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

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

@@ -1,63 +1,55 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% 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 IconButtonToggle(params) %}
-  {% set componentClassName = "ds-icon-btn-toggle" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {%- set componentClassName = "ds-icon-btn-toggle" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
 
-  {% if params.selected %}
-    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {%- if params.selected %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), 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.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) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "outlined"), 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 %}
 
-  {% 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(" ") %}
-
-  <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+  {%- 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 -}}
-    <div class="{{ componentClassName + '__inner'}}">
-      <div class="{{ componentClassName + '__off'}}">
-        {{ Icon({ icon: params.iconName }) }}
-      </div>
-      <div class="{{ componentClassName + '__on'}}">
-        {{ Icon({ icon: params.selectedIconName }) }}
-      </div>
+    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+      <span class="{{ componentClassName + '__off' }}">{{ Icon({ icon: params.iconName }) }}</span>
+      <span class="{{ componentClassName + '__on' }}">{{ Icon({ icon: params.selectedIconName }) }}</span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

package/components/pictogram/README.md

@@ -0,0 +1,39 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
+- Storybook: [Pictogram > Web](https://designsystem.dn.se/?path=/story/components-app-web-pictogram-web)
+
+----
+
+# Pictogram
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant| String | yes | brand, business | brand | Design variant |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|size| String | yes | small, large | small | |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
+
+## 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/pictogram/pictogram.njk' import Pictogram %}
+
+{{ Pictogram({
+  variant: "business",
+  size: "small",
+  iconName: "lock",
+  attributes: { "aria-label": "Låst innehåll"}
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/pictogram/pictogram";
+```

package/components/pictogram/pictogram.njk

@@ -0,0 +1,30 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+
+{% macro Pictogram(params) %}
+  {%- set componentClassName = "ds-pictogram" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.variant and params.variant != "brand" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.size and params.size != "small" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {{ Icon({ icon: params.iconName, attributs: { "aria-hidden": "true" } }) }}
+  </div>
+{% endmacro %}

package/components/pictogram/pictogram.scss

@@ -0,0 +1,53 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+$ds-pictogram__size: 40px;
+$ds-pictogram__size--large: 64px;
+$ds-pictogram__icon-size: 24px;
+$ds-pictogram__icon-size--large: 40px;
+
+.ds-pictogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: $ds-color-static-red-200;
+  height: ds-px-to-rem($ds-pictogram__size);
+  width: ds-px-to-rem($ds-pictogram__size);
+  @at-root .ds-force-px#{&} {
+    height: $ds-pictogram__size;
+    width: $ds-pictogram__size;
+  }
+
+  .ds-icon {
+    fill: $ds-color-static-black;
+    display: flex;
+    height: ds-px-to-rem($ds-pictogram__icon-size);
+    width: ds-px-to-rem($ds-pictogram__icon-size);
+    @at-root .ds-force-px#{&} {
+      height: $ds-pictogram__icon-size;
+      width: $ds-pictogram__icon-size;
+    }
+  }
+
+  &.ds-pictogram--business {
+    background-color: $ds-color-static-green-100;
+  }
+
+  &.ds-pictogram--large {
+    height: ds-px-to-rem($ds-pictogram__size--large);
+    width: ds-px-to-rem($ds-pictogram__size--large);
+    @at-root .ds-force-px#{&} {
+      height: $ds-pictogram__size--large;
+      width: $ds-pictogram__size--large;
+    }
+
+    .ds-icon {
+      height: ds-px-to-rem($ds-pictogram__icon-size--large);
+      width: ds-px-to-rem($ds-pictogram__icon-size--large);
+      @at-root .ds-force-px#{&} {
+        height: $ds-pictogram__icon-size--large;
+        width: $ds-pictogram__icon-size--large;
+      }
+    }
+  }
+}

package/components/spinner/spinner.njk

@@ -1,33 +1,29 @@
-{% macro Spinner(params) %}
-  {% set componentClassName = "ds-spinner" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set size = params.size | default("large") %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
-  {% set variant = (variant.push(classNamePrefix + size), variant) %}
+{% macro Spinner(params) %}
+  {%- set componentClassName = "ds-spinner" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set size = params.size | default("large") %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + size), additionalClasses) %}
 
-  {% 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.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), 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 + "primary"), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "primary"), additionalClasses) %}
   {% endif %}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  <div class="{{ classes }}" {{- attributes | safe }}>
-    <div class="{{ componentClassName + '__inner'}}"></div>
-  </div>
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <span class="{{ classes }}" {{- attributes | safe }}>
+    <span class="{{ componentClassName + '__inner'}}"></span>
+  </span>
 {% endmacro %}

package/components/spinner/spinner.scss

@@ -12,6 +12,7 @@ $ds-spinner__shadow-border-opacity: 0.2;
 
 .ds-spinner {
   .ds-spinner__inner {
+    display: block;
     border-radius: $ds-spinner__border-radius;
     animation: ds-spinner-animation 1s linear infinite;
     border-style: solid;