@bonniernews/dn-design-system-web 3.0.0-alpha.7 → 3.0.0-alpha.71

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

@@ -5,31 +5,29 @@
 {% macro Factbox(params) %}
   {% set componentClassName = "ds-factbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
+  {% set additionalClasses = [] %}
   {% set grades = ["zero", "one", "two", "three", "four", "five"] %}
   {% set gradesNumeric = ["0", "1", "2", "3", "4", "5"] %}
   {% set activeGrade = 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'}}">
@@ -57,7 +55,7 @@
           iconPosition: 'right',
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
-          fullWidth: true,
+          mobile: { fullWidth: true },
           forcePx: params.forcePx,
           condensed: true
         })}}
@@ -68,7 +66,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;
@@ -52,6 +53,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     a {
       @include ds-link($ds-link-article-body);
     }
+    b,
     strong {
       @include ds-typography($ds-typography-functional-body02semibold);
       @at-root .ds-force-px#{&} {
@@ -71,7 +73,7 @@ $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 {
@@ -138,37 +140,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 {

package/components/image-caption/README.md

@@ -0,0 +1,38 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+- Storybook: [ImageCaption > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-imagecaption-web--image-caption)
+
+----
+
+# ImageCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|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/image-caption/image-caption.njk' import ImageCaption %}
+
+{{ ImageCaption({
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/image-caption/image-caption";
+```

package/components/image-caption/image-caption.njk

@@ -0,0 +1,25 @@
+{% macro ImageCaption(params) %}
+  {% set macroClassName = "ds-image-caption" %}
+  {% set additionalClasses = [] %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figcaption class="{{ classes }}" {{- params.attributes | safe }}>
+    {% 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>
+{% endmacro %}

package/components/image-caption/image-caption.scss

@@ -0,0 +1,15 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-image-caption {
+  @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 {
+    color: $ds-color-text-primary-02;
+  }
+}

package/components/list-item/list-item.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/components/switch/switch.njk' import Switch %}
 {% from '@bonniernews/dn-design-system-web/components/checkbox/checkbox.njk' import Checkbox %}
 {% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}
@@ -63,11 +63,11 @@
   {% endif %}
 
   {% if params.leadingIcon %}
-    {% set iconLeftSvg =  Icon({ icon: params.leadingIcon }) %}
+    {% set iconLeftSvg =  IconUse({ icon: params.leadingIcon }) %}
   {% endif %}
 
   {% if params.trailingIcon %}
-    {% set iconRightSvg =  Icon({ icon: params.trailingIcon }) %}
+    {% set iconRightSvg =  IconUse({ icon: params.trailingIcon }) %}
   {% endif %}
 
   {% if params.listItemType == "standard" or not params.listItemType %}
@@ -137,8 +137,8 @@
     </div>
   {% elif element == 'accordion' %}
     {% set iconRightSvg %}
-      {{ Icon({ icon: "expand_less" }) }}
-      {{ Icon({ icon: "expand_more" }) }}
+      {{ IconUse({ icon: "expand_less" }) }}
+      {{ IconUse({ icon: "expand_more" }) }}
     {% endset %}
     <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{ caller() if caller }}

package/components/list-item/list-item.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 "../checkbox/checkbox.scss" as *;
 @use "../switch/switch.scss" as *;
 @use "../radio-button/radio-button.scss" as *;
@@ -27,7 +27,6 @@ $ds-list-item__icon-size: 24px;
   .ds-list-item__inner {
     box-sizing: border-box;
     border-radius: 0;
-    transition: background-color 50ms ease-out;
     margin: 0;
     display: flex;
     align-items: center;
@@ -45,7 +44,6 @@ $ds-list-item__icon-size: 24px;
       left: 0;
       bottom: 0;
       right: 0;
-      transition: background-color 500ms ease;
     }
 
     .ds-icon {