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

package/components/checkbox/checkbox.scss

@@ -1,10 +1,6 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 
 $ds-checkbox__icon-size: 24px;
 
@@ -85,9 +81,12 @@ $ds-checkbox__icon-size: 24px;
     }
   }
 
-  &:hover,
-  &:active {
-    .ds-checkbox__inner::before {
+  &:active .ds-checkbox__inner::before {
+    background-color: $ds-color-component-primary-overlay;
+  }
+
+  @include ds-hover() {
+    &:hover .ds-checkbox__inner::before {
       background-color: $ds-color-component-primary-overlay;
     }
   }

package/components/disclaimer/disclaimer.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 %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Disclaimer(params) %}
@@ -16,7 +16,7 @@
   {% endif %}
 
   {% if params.iconName %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
     {% set additionalClasses = (additionalClasses.push(classNamePrefix + "with-icon"), additionalClasses) %}
   {% endif %}
 

package/components/disclaimer/disclaimer.scss

@@ -1,28 +1,29 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 
 $ds-disclaimer__icon-size: 20px;
 $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
 
 .ds-disclaimer {
-  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
-  margin-bottom: ds-spacing-component($ds-sc-x4);
-  background-color: $ds-color-surface-raised;
+  @include ds-spacing-layout($ds-sl-gap-vertical-static-medium, padding-bottom);
   box-sizing: border-box;
 
-  &--with-icon {
-    display: flex;
-    flex-direction: row;
+  .ds-disclaimer__body-html,
+  .ds-disclaimer__icon-wrapper {
+    background-color: $ds-color-surface-raised;
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
   }
 
   .ds-disclaimer__icon-wrapper {
-    margin-right: ds-spacing-component($ds-sc-x2);
+    // instead of margin to keep background color
+    padding-right: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-disclaimer__body-html {
     @include ds-typography($ds-typography-functional-body01regular);
     margin: 0;
     color: $ds-color-text-primary-02;
+    flex-grow: 1;
 
     @at-root .ds-force-px#{&} {
       @include ds-typography($ds-typography-functional-body01regular, true);
@@ -57,8 +58,20 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     }
   }
 
-  &--native {
-    background-color: $ds-color-static-ad-yellow;
+  &.ds-disclaimer--with-icon {
+    display: flex;
+    flex-direction: row;
+
+    .ds-disclaimer__body-html {
+      padding-left: 0;
+    }
+  }
+
+  &.ds-disclaimer--native {
+    .ds-disclaimer__body-html,
+    .ds-disclaimer__icon-wrapper {
+      background-color: $ds-color-static-ad-yellow;
+    }
 
     .ds-icon,
     .ds-disclaimer__body-html,

package/components/factbox/README.md

@@ -13,7 +13,7 @@
 |vignetteHtml | HTML String | no | | | |
 |titleHtml | HTML String | yes | | | |
 |bodyHtml | HTML String | yes | | | |
-|variant | String | yes | standard, culture, sport, economy | standard | Design variant |
+|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
 |grade | String | no | | | zero, one, two, three, four, five, none |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
@@ -33,7 +33,7 @@ These are copy paste friendly examples to quickliy get started using a component
   vignetteHtml: "",
   titleHtml: "Drama",
   bodyHtml: "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>",
-  variant: "culture",
+  theme: "kultur",
   grade: "two",
   forcePx: true
 })}}

package/components/factbox/factbox.njk

@@ -1,35 +1,31 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GradeIcon %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Factbox(params) %}
   {% set componentClassName = "ds-factbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set grades = ["zero", "one", "two", "three", "four", "five"] %}
-  {% set gradesNumeric = ["0", "1", "2", "3", "4", "5"] %}
-  {% set activeGrade = params.grade | default("") | string %}
+  {% set additionalClasses = [] %}
+  {% set grade = params.grade | default("") | string %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
   {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
   {% if params.forceExpand %}
-    {% set variant = (variant.push(classNamePrefix + "expanded"), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "expanded"), additionalClasses) %}
   {% endif %}
 
   {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">
@@ -38,15 +34,7 @@
           {%- if params.vignetteHtml %}<span class="{{ componentClassName + '__vignette'}}">{{ params.vignetteHtml | safe }}</span>{%- endif %}
           {{- params.titleHtml | safe -}}
         </h2>
-        {% if activeGrade and activeGrade in grades %}
-          {% for grade in grades %}
-            {% if grade == activeGrade %}
-              {% set gradeTitle = "Betyg: " + gradesNumeric[loop.index0] + "." %}
-              {% set gradeDesc = "Betygsskala: " + gradesNumeric | first + " till " + gradesNumeric | last + "." %}
-              <div class="{{ componentClassName + '__grade'}}">{{- GradeIcon({ icon: activeGrade, title: gradeTitle, desc: gradeDesc }) | safe }}</div>
-            {% endif %}
-          {% endfor %}
-        {% endif%}
+        {{ GetGrade({ grade: grade, type: "scale" }) if grade }}
         <div class="{{ componentClassName + '__body'}}">{{ params.bodyHtml | safe }}</div>
       </div>
       <div class="{{ componentClassName + '__show-more'}}">
@@ -57,7 +45,7 @@
           iconPosition: 'right',
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
-          fullWidth: true,
+          mobile: { fullWidth: true },
           forcePx: params.forcePx,
           condensed: true
         })}}
@@ -68,7 +56,7 @@
           iconPosition: 'right',
           iconName: 'expand_less',
           classNames: 'ds-factbox__expand-less',
-          fullWidth: true,
+          mobile: { fullWidth: true },
           forcePx: params.forcePx,
           condensed: true
         })}}

package/components/factbox/factbox.scss

@@ -1,11 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
 
-$ds-factbox__grade-size: 40px + (ds-metrics-border-width(x2) * 2);
+$ds-factbox__grade-size: 40px;
 $ds-factbox__show-more-fade-height: 48px;
 $ds-factbox__padding: ds-spacing-component($ds-sc-x4);
 /* stylelint-disable-next-line */
-$ds-factbox__padding-left: $ds-factbox__padding - ds-metrics-border-width(x2);
+$ds-factbox-border-width: 4px;
+$ds-factbox__padding-left: $ds-factbox__padding - $ds-factbox-border-width;
 $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
 .ds-factbox {
@@ -18,7 +19,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
   .ds-factbox__inner {
     border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    border-left: ds-metrics-border-width(x2) solid $ds-color-component-brand;
+    border-left: $ds-factbox-border-width solid $ds-theme-color;
     max-height: ds-px-to-rem($ds-factbox__max-height);
     overflow: hidden;
     position: relative;
@@ -72,27 +73,24 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
   }
   .ds-factbox__vignette {
-    color: $ds-color-component-brand;
+    color: $ds-theme-color;
     margin-right: ds-spacing-component($ds-sc-x1);
   }
-  .ds-factbox__grade {
+  .ds-icon--grade {
     color: $ds-color-icon-primary;
     margin: 0 0 ds-spacing-component($ds-sc-x4);
-
-    .ds-icon {
-      display: block;
-      height: ds-px-to-rem($ds-factbox__grade-size);
-      svg {
-        height: 100%;
-        width: auto;
-        circle {
-          stroke: currentColor;
-        }
-      }
-      @at-root .ds-force-px#{&} {
-        height: $ds-factbox__grade-size;
+    display: block;
+    height: ds-px-to-rem($ds-factbox__grade-size);
+    svg {
+      height: 100%;
+      width: auto;
+      circle {
+        stroke: currentColor;
       }
     }
+    @at-root .ds-force-px#{&} {
+      height: $ds-factbox__grade-size;
+    }
   }
   .ds-factbox__show-more--collapsable::before {
     content: "";
@@ -139,37 +137,4 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       }
     }
   }
-
-  &--culture {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-kultur;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-kultur;
-    }
-  }
-  &--sport {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-sport;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-sport;
-    }
-  }
-  &--economy {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-economy;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-economy;
-    }
-  }
-  &--sthlm {
-    .ds-factbox__inner {
-      border-left-color: $ds-color-static-sthlm;
-    }
-    .ds-factbox__vignette {
-      color: $ds-color-static-sthlm;
-    }
-  }
 }

package/components/footer/footer.scss

@@ -1,10 +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/forward.helpers.scss" as *;
 
 $ds-footer-row-gap-spacing-token: $ds-sc-x8;
 $ds-footer-row-padding-spacing-token: $ds-sc-x4;
@@ -133,7 +127,7 @@ $ds-footer-column-gap: ds-spacing-component($ds-sc-x8) * 2; // @todo change to t
     margin-top: ds-spacing-component($ds-footer-row-gap-spacing-token);
 
     a {
-      @include ds-link();
+      @include ds-link($ds-link-list);
       margin: ds-spacing-component($ds-sc-x4 $ds-sc-x4 0 0);
       display: inline-block;
 

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

@@ -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 %}
 {% 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 %}
 
@@ -27,7 +27,7 @@
   {% endif %}
 
   {% if params.iconName %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+    {% set iconSvg =  IconUse({ 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/icon-button.scss

@@ -1,5 +1,5 @@
 @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-icon-btn__border-radius: 50%;
@@ -19,11 +19,14 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   padding: 0;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   .ds-icon-btn__inner {
     box-sizing: border-box;
     border-radius: $ds-icon-btn__border-radius;
     border: $ds-btn-outlined__border-width solid;
-    transition: background-color 50ms ease-out;
     margin: 0;
     display: inline-flex;
     align-items: center;

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/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 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' }}">{{ IconUse({ icon: params.iconName }) }}</span>
+      <span class="{{ componentClassName + '__on' }}">{{ IconUse({ icon: params.selectedIconName }) }}</span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

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

@@ -1,5 +1,5 @@
 @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-icon-btn-toggle__border-radius: 50%;
@@ -19,11 +19,14 @@ $ds-btn-toggle-outlined__border-width: ds-metrics-border-width(x1);
   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;
-    transition: background-color 50ms ease-out;
     margin: 0;
     display: inline-flex;
     align-items: center;

package/components/icon-sprite/README.md

@@ -0,0 +1,51 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-sprite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
+- Storybook: [Icon > Web](https://designsystem.dn.se/?path=/story/foundations-icon-web--all)
+
+----
+# Icons
+
+There are three ways to use icons from DS:
+* Use Icon from sprite: `IconUse({})`, this is the **recomended** way since this reduces the html output.
+* Use Icon with wrapper: `IconWithWrapper({})`, the component itself uses the icons from the sprite but wraps it with a div and takes properties like size and color
+* Use Icon from foundations: `Icon({})`, only use this if you need an inline icon, this will output the entire svg wherever it is used.
+
+
+# Icon Sprite
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|icon | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
+|~forcePx~ | | | | | Not supported |
+
+## 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/icon-sprite/icon-sprite.njk' import IconUse %}
+
+{{ IconUse({
+  icon: 'arrow_back',
+  classNames: 'my-special-class',
+  attributes: { width: '16px' }
+}) | safe }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite";
+```
+
+ℹ️ The sprite has to be included **somewhere** on the rendered page
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconSprite %}
+
+{{ IconSprite() | safe }}
+```

package/components/icon-sprite/icon-sprite.njk

@@ -0,0 +1,12 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro IconUse(params) %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  <i class="ds-icon ds-icon--sprite ds-icon--{{ params.icon }} {{ params.classNames }}" {{- attributes | safe }}>
+    <svg><use xlink:href="#ds-{{ params.icon }}"></use></svg>
+  </i>
+{% endmacro %}
+
+{% macro IconSprite() %}
+  {% include "@bonniernews/dn-design-system-web/foundations/icons/sprite.njk" %}
+{% endmacro %}

package/components/icon-sprite/icon-sprite.scss

@@ -0,0 +1,12 @@
+@use "../../foundations/icons/icon.scss" as *;
+
+.ds-icon--sprite {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/components/icon-with-wrapper/README.md

@@ -44,7 +44,14 @@ These are copy paste friendly examples to quickliy get started using a component
 
 These are copy paste friendly examples to quickliy get started using a component.
 
-ℹ️ Note that the only available parameter for icon without wrapper is `icon`
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|icon | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
+|~forcePx~ | | | | | Not supported |
 
 ```html
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
@@ -55,4 +62,4 @@ These are copy paste friendly examples to quickliy get started using a component
 ### SCSS
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/icons/icon";
-```
+```

package/components/icon-with-wrapper/icon-with-wrapper.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 %}
 
 {% macro IconWithWrapper(params) %}
   {% set componentClassName = "ds-icon-wrapper" %}
@@ -29,6 +29,6 @@
   {% set styleIcon = "width: " + iconSize + "; height: " + iconSize + ";" %}
 
   <div class="{{ classes }}" style="{{ styleIcon }} {{ styleColor }}" {{- attributes | safe}}>
-    {{ Icon({ icon: params.icon }) | safe }}
+    {{ IconUse({ icon: params.icon }) | safe }}
   </div>
 {% endmacro %}

package/components/icon-with-wrapper/icon-with-wrapper.scss

@@ -1,4 +1,5 @@
-@use "../../foundations/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 
 .ds-icon-wrapper {
   .ds-icon {