@bonniernews/dn-design-system-web 4.7.6 → 4.7.7

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.7.7 (2023-09-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 4.7.6 (2023-09-20)
 
 

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

@@ -4,14 +4,12 @@
 
 {% macro ArticleBodyImage(params) %}
   {% set componentClassName = "ds-article-image--body" %}
-  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 

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

@@ -4,14 +4,12 @@
 
 {% macro ArticleTopImage(params) %}
   {% set componentClassName = "ds-article-image--top" %}
-  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 

package/components/badge/badge.njk

@@ -1,27 +1,23 @@
 {% macro Badge(params) %}
   {% set componentClassName = "ds-badge" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set figure = params.figure %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
   {% if figure and figure | string | length == 1 %}
-    {% set variant = (variant.push(classNamePrefix + "single"), variant) %}
+    {% set variant = "single" %}
   {% elif figure %}
     {% set figure = "9+" %}
-    {% set variant = (variant.push(classNamePrefix + "double"), variant) %}
+    {% set variant = "double" %}
   {% else %}
-    {% set variant = (variant.push(classNamePrefix + "empty"), variant) %}
+    {% set variant = "empty" %}
   {% endif%}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + variant,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }}">
     <span class="{{ componentClassName + '__inner'}}">{{- figure | safe if figure -}}</span>

package/components/blocked-content/blocked-content.njk

@@ -4,18 +4,13 @@
 {% macro BlockedContent(params) %}
   {% set componentClassName = "ds-blocked-content" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">

package/components/buddy-menu/buddy-menu.njk

@@ -1,3 +1,4 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
@@ -5,22 +6,13 @@
 {% macro BuddyMenu(params) %}
   {% set componentClassName = "ds-buddy-menu" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {%- set attributes = getAttributes(params.attributes) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }} {{ 'ds-buddy-menu--skola' if params.isDnSkola }}" {{- attributes | safe}}>
     <div class="{{ componentClassName + '__inner'}}">

package/components/button/button.njk

@@ -6,52 +6,33 @@
   {%- 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 loadingHtml %}
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
   {% endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.condensed %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
-  {% endif %}
-
-  {%- 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 additionalClasses = (additionalClasses.push(classNamePrefix + "icon" + "-" + params.iconPosition ), additionalClasses) %}
     {% set iconSvg =  IconUse({ icon: params.iconName }) %}
   {% endif %}
 
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + buttonVariant,
+    classNamePrefix + "selected" if params.selected,
+    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + "full-width" if params.fullWidth,
+    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
+    classNamePrefix + "condensed" if params.condensed,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    "ds-loading" if params.loading,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {%- 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">

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

@@ -5,16 +5,9 @@
 {% macro ButtonToggle(params) %}
   {%- 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 additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
-  {% endif %}
-
   {%- 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") %}
@@ -24,35 +17,19 @@
     {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx }) }}
   {% endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.condensed %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.mobile and params.mobile.fullWidth %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + buttonVariant,
+    classNamePrefix + "selected" if params.selected,
+    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + "full-width" if params.fullWidth,
+    classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
+    classNamePrefix + "condensed" if params.condensed,
+    "ds-loading" if params.loading,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {%- 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>

package/components/byline/byline.njk

@@ -65,30 +65,23 @@
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro BylineInner(params, componentClassName) %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
   {% set useOuterAnchorElement = true if (params.authorPageUrl and not params.followable) %}
   {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
   {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif %}
-
-  {% if not params.authorPageUrl %}
-    {% set variant = (variant.push(componentClassName + '--noninteractive'), variant) %}
-  {% endif %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "noninteractive" if not params.authorPageUrl,
+    classNamePrefix + params.variant,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% if params.bylineImage %}
     {% set bylineImage =  params.bylineImage %}
   {% endif %}
-  {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% set classes = componentClassName + " " + variant | join(" ") %}
 
   {% set elementClassNames = [ componentClassName + "__btn-toggle" ]%}
   {% if params.elementClassNames %}

package/components/checkbox/checkbox.njk

@@ -13,28 +13,20 @@
 {% macro Checkbox(params) %}
   {% set componentClassName = "ds-checkbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set wrapperClasses = [] %}
   {% set name = params.name | default("ds-checkbox") %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
+  {%- set wrapperParams = { error: params.error, errorMessage: params.errorMessage if params.label else false } %}
 
-  {% if params.forcePx %}
-    {% set wrapperClasses = (wrapperClasses.push("ds-force-px"), wrapperClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set wrapperClasses = (wrapperClasses.push(params.classNames), wrapperClasses) %}
-  {% endif%}
-
-  {% if params.condensed %}
-    {% set wrapperClasses = (wrapperClasses.push(classNamePrefix + "condensed"), wrapperClasses) %}
-  {% endif %}
-
-  {% set wrapperParams = { error: params.error, errorMessage: params.errorMessage if params.label else false } %}
+  {%- set wrapperClasses = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "condensed" if params.condensed,
+    params.classNames if params.classNames
+  ] %}
 
   {% call FormField(wrapperParams, wrapperClasses) %}
-    <input type="checkbox" id="{{ name }}" name="{{ name }}" class="{{ componentClassName + '__input' }} js-field-error" 
+    <input type="checkbox" id="{{ name }}" name="{{ name }}" class="{{ componentClassName + '__input' }} js-field-error"
       data-validation="{{ params.validation }}" {{- attributes | safe }}
       {{- " checked" if params.checked }} {{-" disabled" if params.disabled }} {{-" required" if params.required }}  />
     {% if params.stripLabel %}

package/components/disclaimer/disclaimer.njk

@@ -4,27 +4,19 @@
 {% macro Disclaimer(params) %}
   {% set componentClassName = "ds-disclaimer" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.variant and params.variant !== "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% endif %}
-
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.iconName %}
+  {%- if params.iconName %}
     {% set iconSvg =  IconUse({ icon: params.iconName }) %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "with-icon"), additionalClasses) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + params.variant if params.variant and params.variant !== "default",
+    classNamePrefix + "with-icon" if iconSvg,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <section class="{{ classes }}" {{- attributes | safe }}>
     {% if iconSvg %}

package/components/divider/divider.njk

@@ -3,20 +3,13 @@
 {% macro Divider(params) %}
   {% set componentClassName = "ds-divider" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.variant %}
-    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
-  {% else %}
-    {% set variant = (variant.push(classNamePrefix + "soft"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + (params.variant or "soft"),
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}><hr></div>
 {% endmacro %}

package/components/factbox/factbox.njk

@@ -5,27 +5,16 @@
 {% macro Factbox(params) %}
   {% set componentClassName = "ds-factbox" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = [] %}
   {% set grade = params.grade | default("") | string %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.forceExpand %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "expanded"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    "ds-theme--" + params.theme if params.theme,
+    classNamePrefix + "expanded" if params.forceExpand,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">

package/components/floating-button/floating-button.njk

@@ -6,7 +6,6 @@
   {%- set componentClassName = "ds-floating-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 "" %}
 
@@ -14,28 +13,20 @@
     {{ Spinner({ size: 'small', forcePx: params.forcePx }) }}
   {% endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
-
   {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon", classNamePrefix + "icon" + "-" + params.iconPosition), additionalClasses) %}
-    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
+    {% set iconSvg = IconUse({ icon: params.iconName }) %}
   {% endif %}
 
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    "ds-loading" if params.loading,
+    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + "icon" if iconSvg,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {%- 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">

package/components/footer/footer.njk

@@ -2,18 +2,11 @@
 
 {% macro Footer(params) %}
   {% set componentClassName = "ds-footer" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <footer class="{{ classes }}">
     <div class="{{ componentClassName + '__inner'}}">

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

@@ -6,16 +6,15 @@
 {% macro GroupHeader(params) %}
   {% set componentClassName = "ds-group-header" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = [classNamePrefix + (params.variant or 'icon')] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + (params.variant or "icon"),
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
-
-  {% set groupHeaderInner %}
+  {%- set groupHeaderInner %}
     <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
 
     {% if params.variant == 'link' and params.linkText and params.href %}

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

@@ -8,43 +8,27 @@
   {%- 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 %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% else %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "outlined"), additionalClasses) %}
-  {% endif %}
-
-  {%- if params.size and params.size != "default" %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
-  {% endif %}
+  {%- set variantClass = classNamePrefix + (params.variant if params.variant else "outlined") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    "ds-loading" if params.loading,
+    variantClass,
+    classNamePrefix + "toggle" if isToggle,
+    classNamePrefix + "selected" if isToggle and params.selected,
+    classNamePrefix + params.size if params.size and params.size !== "default",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {%- set loadingHtml %}
     {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
   {% endset %}
 
-  {%- if params.loading %}
-    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
-  {% endif %}
-
   {%- if params.a11y and params.a11y.visuallyHidden %}
     {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
   {% endif %}
 
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
   {%- if isToggle %}
-    {%- if params.selected %}
-      {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
-    {% endif %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "toggle"), additionalClasses) %}
-    {%- 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 -}}
       <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
@@ -54,7 +38,6 @@
       </span>
     </button>
   {% else %}
-    {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
     {% if params.href %}
       <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
         {{- visuallyHidden | safe if visuallyHidden -}}

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

@@ -1,8 +1,16 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro IconUse(params) %}
+  {%- set componentClassName = "ds-icon" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + "sprite",
+    classNamePrefix + params.icon,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
-  <i class="ds-icon ds-icon--sprite ds-icon--{{ params.icon }} {{ params.classNames }}" {{- attributes | safe }}>
+  <i class="{{ classes }}" {{- attributes | safe }}>
     <svg><use xlink:href="#ds-{{ params.icon }}"></use></svg>
   </i>
 {% endmacro %}