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

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 %}

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

@@ -1,30 +1,24 @@
 {% 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 IconWithWrapper(params) %}
   {% set componentClassName = "ds-icon-wrapper" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set size = params.size if params.size else 24 %}
   {% set color = params.color if params.color else 'primary' %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
     {% set iconSize = size + "px"  %}
   {% else %}
     {% set iconSize = size/16 + "rem" %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
   {% set styleColor = "color: var(--ds-color-icon-" + color + ");" %}
   {% set styleIcon = "width: " + iconSize + "; height: " + iconSize + ";" %}
 

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

@@ -1,20 +1,14 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro ImageCaption(params) %}
-  {% set macroClassName = "ds-image-caption" %}
-  {% set additionalClasses = [] %}
+  {% set componentClassName = "ds-image-caption" %}
   {% set attributes = getAttributes(params.attributes) %}
 
-
-  {% 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(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <figcaption class="{{ classes }}" {{- attributes | safe }}>
     {% if params.caption %}

package/components/list-item/list-item.njk

@@ -43,42 +43,32 @@
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro ListItemInner(params, componentClassName) %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.border %}
-    {% set variant = (variant.push(classNamePrefix + "border"), variant) %}
-  {% endif %}
-
-  {% if params.disabled %}
-    {% set variant = (variant.push(classNamePrefix + "disabled"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {% if params.listItemType == "standard" or not params.listItemType %}
+    {% set element = "link" if params.href and not params.disabled else "button"  %}
+    {% set variantClass = classNamePrefix + "standard" %}
+  {% else %}
+    {% set element = params.listItemType %}
+    {% set variantClass = classNamePrefix + params.listItemType %}
   {% endif %}
 
   {% if params.leadingIcon %}
-    {% set iconLeftSvg =  IconUse({ icon: params.leadingIcon }) %}
+    {% set iconLeftSvg = IconUse({ icon: params.leadingIcon }) %}
   {% endif %}
 
   {% if params.trailingIcon %}
-    {% set iconRightSvg =  IconUse({ icon: params.trailingIcon }) %}
-  {% endif %}
-
-  {% if params.listItemType == "standard" or not params.listItemType %}
-    {% set element = "link" if params.href and not params.disabled else "button"  %}
-    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
-  {% else %}
-    {% set element = params.listItemType %}
-    {% set variant = (variant.push(classNamePrefix + params.listItemType), variant) %}
+    {% set iconRightSvg = IconUse({ icon: params.trailingIcon }) %}
   {% endif %}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "border" if params.border,
+    classNamePrefix + "disabled" if params.disabled,
+    variantClass,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% if element == 'link' %}
     <a class="{{ classes }}" {{- attributes | safe }} href="{{ params.href }}">

package/components/pictogram/pictogram.njk

@@ -4,26 +4,16 @@
 {% 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 %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + params.variant if params.variant and params.variant !== "brand",
+    classNamePrefix + params.size if params.size and params.size !== "small",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {%- 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 }}>
     {{ IconUse({ icon: params.iconName, attributs: { "aria-hidden": "true" } }) }}
   </div>

package/components/quote/quote.njk

@@ -3,22 +3,14 @@
 {% macro Quote(params) %}
   {% set componentClassName = "ds-quote" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-ps" if params.forcePx,
+    "ds-theme--" + params.theme if params.theme,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <blockquote class="{{ classes }}" {{- attributes | safe }}>
     <span class="{{ componentClassName + '__border'}}"></span>

package/components/radio-button/radio-button.njk

@@ -12,24 +12,14 @@
 {% macro RadioButton(params) %}
   {% set componentClassName = "ds-radio-btn" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set wrapperClasses = [] %}
 
-
-  {% set wrapperClasses = (wrapperClasses.push(componentClassName), wrapperClasses) %}
-
-  {% 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 } %}
+  {%- set wrapperParams = { error: params.error, errorMessage: params.errorMessage } %}
+  {%- set wrapperClasses = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "condensed" if params.condensed,
+    params.classNames if params.classNames
+  ] %}
 
   {% call FormField(wrapperParams, wrapperClasses) %}
     {% for button in params.buttons %}

package/components/spinner/spinner.njk

@@ -3,26 +3,17 @@
 {% 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 additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + size,
+    classNamePrefix + (params.variant or "primary"),
+    params.classNames if params.classNames
+  ] %}
 
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {%- if params.variant %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
-  {% else %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "primary"), additionalClasses) %}
-  {% endif %}
-
-  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   <span class="{{ classes }}" {{- attributes | safe }}>
     <span class="{{ componentClassName + '__inner'}}"></span>
   </span>

package/components/switch/switch.njk

@@ -1,3 +1,5 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
 {# Internal helper macro - not intended for use outside of this file #}
 {% macro SwitchInner(params, componentClassName) %}
   {% if params.meta %}
@@ -12,27 +14,15 @@
 {% macro Switch(params) %}
   {% set componentClassName = "ds-switch" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set name = params.name | default("ds-switch") %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
-
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% if params.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
-  {% endif %}
+  {% set attributes = getAttributes(params.attributes) %}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "condensed" if params.condensed,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <div class="{{ classes }}">
     <input type="checkbox" id="{{ name }}" name="{{ name }}" {{- "checked" if params.checked }} {{ "disabled" if params.disabled }} {{- attributes | safe }} />

package/components/teaser-card/teaser-card.njk

@@ -3,22 +3,14 @@
 {% macro TeaserCard(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% if params.areaType %}
-    {% set variant = (variant.push(classNamePrefix + params.areaType), variant) %}
-  {% endif %}
-
-  {% if params.theme %}
-    {% set variant = (variant.push("ds-theme--" + params.theme), variant) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + params.areaType if params.areaType,
+    "ds-theme--" + params.theme if params.theme,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% if params.targetLink %}
     <a class="{{ classes }}" href="{{ params.targetLink }}" {{- attributes | safe }}>

package/components/teaser-dot/teaser-dot.njk

@@ -3,22 +3,13 @@
 {% macro TeaserDot(params) %}
   {% set componentClassName = "ds-teaser-dot" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
-
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
-  {% endif %}
-
-  {% if params.flashing %}
-    {% set variant = (variant.push(classNamePrefix + "flashing"), variant) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    classNamePrefix + "flashing" if params.flashing,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   <span class="{{ classes }}" {{ attributes | safe }}></span>
 {% endmacro %}

package/components/teaser-image/teaser-image.njk

@@ -1,21 +1,18 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro TeaserImage(params) %}
-  {% set macroClassName = "ds-teaser-image" %}
-  {% set additionalClasses = [] %}
+  {% set componentClassName = "ds-teaser-image" %}
   {% set attributes = getAttributes(params.attributes) %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
-
-  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   <figure class="{{ classes }}" {{- attributes | safe }}>
     {{ params.imageHtml | safe }}
 
     {% if params.byline %}
-      <figcaption class={{ macroClassName + "__byline" }}>{{ params.byline }}</figcaption>
+      <figcaption class={{ componentClassName + "__byline" }}>{{ params.byline }}</figcaption>
     {% endif %}
   </figure>
 {% endmacro %}

package/components/teaser-large/teaser-large.njk

@@ -6,36 +6,27 @@
 {% macro TeaserLarge(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--large"] %}
 
-  {% if params.variant %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% set isQuoteBadge = params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
+  {% if params.isItalicHeadline %}
+    {% set italicsClass = "ds-teaser--large-big-italic" if params.isLargeHeadline and params.areaType !== "right" else "ds-teaser--large-italic" %}
   {% endif %}
 
-  {% if params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
-  {% endif %}
-
-  {% if params.mediaHtml %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'top-img'), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% if params.isItalicHeadline and params.isLargeHeadline and params.areaType !== "right" %}
-    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-big-italic"), additionalClasses) %}
-  {% elif params.isItalicHeadline %}
-    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
-  {% endif %}
+  {% set extraClasses = [
+    "ds-teaser--large",
+    classNamePrefix + params.variant if params.variant,
+    classNamePrefix + "quote-badge" if isQuoteBadge,
+    classNamePrefix + 'top-img' if params.mediaHtml,
+    italicsClass if italicsClass,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
       <div class="{{ componentClassName + '__media'}}">

package/components/teaser-large/teaser-large.scss

@@ -85,7 +85,7 @@
       min-width: 96px;
       margin: 0;
 
-      > .picture__img {
+      .picture__img {
         margin: 0;
         top: unset;
         max-height: unset;

package/components/teaser-list-swipe/teaser-list-swipe.njk

@@ -5,23 +5,14 @@
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--list-swipe"] %}
   {% set attributes = getAttributes(params.attributes) %}
-
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {% if params.areaType %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
-
+  {%- set classes = [
+    componentClassName,
+    "ds-teaser--list-swipe",
+    "ds-theme--" + params.theme if params.theme,
+    classNamePrefix + params.areaType if params.areaType,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   <div class="{{ classes }}" {{- attributes | safe }}>
     {{ GroupHeader({
       title: params.title,

package/components/teaser-list-timeline/teaser-list-timeline.njk

@@ -4,28 +4,15 @@
 {% macro TeaserListTimeline(params) %}
   {% set componentClassName = "ds-teaser-list-timeline" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = [] %}
   {% set attributes = getAttributes(params.attributes) %}
   {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}
-
-  {% if params.theme %}
-    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
-  {% endif %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% if params.flexible %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'flexible'), additionalClasses) %}
-  {% endif%}
-
-  {% if showButton %}
-    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'linked'), additionalClasses) %}
-  {% endif%}
-
-  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
-
+  {%- set classes = [
+    componentClassName,
+    "ds-theme--" + params.theme,
+    classNamePrefix + "flexible" if params.flexible,
+    classNamePrefix + "linked" if showButton,
+    params.classNames if params.classNames
+  ] | join(" ") %}
   <div class="{{ classes }}" {{- attributes | safe }}>
     <h2 class="ds-teaser-list-timeline__vignette">{{ params.listTitle }}</h2>
     <div class="{{ componentClassName + '__content'}}">
@@ -51,12 +38,10 @@
 
 {% macro TeaserListTimelineItem(teaser) %}
   {% set attributes = getAttributes(teaser.attributes) %}
-  {% set additionalClasses = [] %}
-  {% if teaser.classNames %}
-    {% set additionalClasses = (additionalClasses.push(teaser.classNames), additionalClasses) %}
-  {% endif%}
-  {% set classes = "ds-teaser-list-timeline__item" + " " + additionalClasses | join(" ") %}
-
+  {%- set classes = [
+    "ds-teaser-list-timeline__item",
+    teaser.classNames if teaser.classNames
+  ] | join(" ") %}
   <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
     <span class="ds-teaser-list-timeline__item-dot"></span>
     <h3 class="ds-teaser-list-timeline__item-title">{{ teaser.highlight }} {{ teaser.title }}</h3>

package/components/teaser-longlife/teaser-longlife.njk

@@ -2,17 +2,16 @@
 {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
 
 {% macro TeaserLonglife(params) %}
-  {%- set additionalClasses = ["ds-teaser--longlife"] %}
-
-  {%- if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif %}
+  {%- set extraClasses = [
+    "ds-teaser--longlife",
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
   {% call TeaserCard({
     targetLink: params.targetLink,
     areaType: 'right',
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
 
     {% if params.mediaHtml %}
@@ -35,4 +34,3 @@
     </div>
   {% endcall %}
 {% endmacro %}
-

package/components/teaser-native/teaser-native.njk

@@ -4,20 +4,18 @@
 
 {% macro TeaserNative(params) %}
   {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--native"] %}
-  {% set nativeVariant = params.nativeVariant if params.nativeVariant else "standard" %}
-  {% set additionalClasses = (additionalClasses.push('ds-teaser--native-' + nativeVariant), additionalClasses) %}
+  {%- set nativeVariant = params.nativeVariant if params.nativeVariant else "standard" %}
+  {%- set extraClasses = [
+    "ds-teaser--native",
+    "ds-teaser--native-" + nativeVariant,
+    params.classNames if params.classNames
+  ] | join(" ") %}
 
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
-  {% call TeaserCard({
+  {%- call TeaserCard({
     targetLink: params.targetLink,
     areaType: params.areaType,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__ad-bar'}}"><span>ANNONS</span></div>
     {% if params.mediaHtml and nativeVariant !== "standard" %}

package/components/teaser-onsite/teaser-onsite.njk

@@ -1,20 +1,17 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
 
 {% macro TeaserOnSite(params) %}
-  {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set additionalClasses = ["ds-teaser--onsite"] %}
-
-  {% if params.classNames %}
-    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
-  {% endif%}
-
+  {%- set componentClassName = "ds-teaser" %}
+  {%- set classes = [
+    "ds-teaser--onsite",
+    params.classNames if params.classNames
+  ] | join(" ") %}
   {% call TeaserCard({
     targetLink: params.targetLink,
     areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
-    classNames: additionalClasses | join(" ")
+    classNames: classes
   }) %}
     {% if params.mediaHtml %}
       <div class="{{ componentClassName + '__media'}}">