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

package/components/teaser-slideshow/teaser-slideshow.scss

@@ -0,0 +1,35 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--slideshow {
+  background-color: $ds-color-background-primary;
+  overflow: hidden;
+  max-height: 230px;
+  box-sizing: border-box;
+
+  &.ds-teaser--right {
+    max-width: 300px;
+  }
+
+  .ds-teaser__content {
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+    display: block;
+    color: $ds-color-text-primary;
+
+    .ds-teaser__title {
+      display: inline;
+      @include ds-typography($ds-typography-functional-heading01bold);
+    }
+
+    .ds-teaser__text {
+      display: inline;
+      @include ds-typography($ds-typography-functional-heading01regular);
+    }
+  }
+
+  @include ds-hover {
+    &:hover .ds-teaser__title {
+      text-decoration: none;
+    }
+  }
+}

package/components/teaser-split/README-container.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-split](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-split)
+- Storybook (PROD): [TeaserSplitContainer > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teasersplitcontainer-web)
+- Storybook (LATEST): [TeaserSplitContainer > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teasersplitcontainer-web)
+
+----
+
+# TeaserSplitContainer
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|teasersHtml | HTML String | yes | | | HTML teaser output |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme is applied to all teasers in the container |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|~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/teaser-split/teaser-split.njk" import TeaserSplitContainer %}
+
+{{ TeaserSplitContainer({
+  areaType: "bauta",
+  teasersHtml: "",
+  attributes: {},
+  classNames: ""
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-split/teaser-split";
+```

package/components/teaser-split/README.md

@@ -0,0 +1,48 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-split](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-split)
+- Storybook (PROD): [TeaserSplit > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teasersplit-web)
+- Storybook (LATEST): [TeaserSplit > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teasersplit-web)
+
+----
+
+# TeaserSplit
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|~variant~ | String | no | "default" or "podd" | "default" | Not implemented |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~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/teaser-split/teaser-split.njk" import TeaserSplit %}
+
+{{ TeaserSplit({
+  title: "Sju miljoner i humanitärt stöd till Turkiet och Syrien",
+  targetLink: "#",
+  text: "Tält och temporära nödboenden samt ledningsresurser för att koordinera räddningsarbetet."
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-split/teaser-split";
+```

package/components/teaser-split/teaser-split.njk

@@ -0,0 +1,93 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+
+{% macro TeaserSplit(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--split"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {% if params.areaType == "bauta" or params.areaType == "bautaxl" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), 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(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: false,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+
+      <h2 class="{{ componentClassName + '__title' }}">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+          {% if params.sticker %}
+            <span class="ds-teaser__sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}
+
+{% macro TeaserSplitContainer(params) %}
+  {{ params.teasers | dump }}
+  {%- set componentClassName = "ds-split-container" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {% if params.areaType == "bauta" or params.areaType == "bautaxl" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), 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(" ") %}
+  <div class="{{ classes }}" {{- attributes | safe }}>{{ params.teasersHtml | safe }}</div>
+{% endmacro %}

package/components/teaser-split/teaser-split.scss

@@ -0,0 +1,77 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-split-container {
+  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+
+  & + .ds-split-container {
+    &:before {
+      content: "";
+      height: ds-metrics-border-width(x1);
+      background-color: $ds-color-border-primary;
+      left: 0;
+      right: 0;
+      top: 0;
+      position: absolute;
+      @include ds-spacing-layout(0 $ds-sl-teaser-horizontal, margin);
+    }
+  }
+
+  .ds-teaser--split {
+    box-sizing: content-box;
+    display: block;
+    position: relative;
+    flex: 1;
+    padding-right: ds-spacing-component($ds-sc-x4);
+    &:last-child {
+      padding-right: 0;
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: calc(50% - ds-spacing-component($ds-sc-x4) / 2);
+      flex: auto;
+      // if a teaser is both third and last child it has the row by itself and should be full width
+      &:nth-child(3):last-child {
+        flex: 1;
+      }
+      &:nth-child(2) {
+        padding-right: 0;
+      }
+    }
+
+    &:nth-child(3),
+    &:nth-child(4) {
+      @include ds-spacing-layout($ds-sl-teaser-vertical, margin-top);
+      @include ds-spacing-layout($ds-sl-teaser-vertical, padding-top);
+      border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+
+      @include ds-mq-smallest-breakpoint(tablet) {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+      }
+    }
+
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading02bold);
+    }
+
+    .ds-teaser__media {
+      @include ds-mq-largest-breakpoint(mobile) {
+        margin-bottom: ds-spacing-component($ds-sc-x2);
+
+        .ds-teaser-image__byline {
+          display: none;
+        }
+      }
+
+      @include ds-mq-smallest-breakpoint(tablet) {
+        margin-bottom: ds-spacing-component($ds-sc-x3);
+      }
+    }
+  }
+}

package/components/teaser-standard/README.md

@@ -0,0 +1,49 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
+- Storybook (PROD): [TeaserStandard > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserstandard-web)
+- Storybook (LATEST): [TeaserStandard > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserstandard-web)
+
+----
+
+# teaser-standard
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|variant | String | no | "default" or "podd" | "default" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~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/teaser-standard/teaser-standard.njk' import TeaserStandard %}
+
+{{ TeaserStandard({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard" as *;
+```

package/components/teaser-standard/teaser-standard.njk

@@ -0,0 +1,81 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+
+{% macro TeaserStandard(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--standard"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {% 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.isLocked and not params.mediaHtml and params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
+      {{ VipBadge({
+        showText: false,
+        forcePx: true
+      }) }}
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+
+      <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text and params.areaType !== "right" %}
+        <p class="{{ componentClassName + '__text' }}">
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+          {% if params.sticker %}
+            <span class="ds-teaser__sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text }}
+        </p>
+      {% endif %}
+    </div>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: false,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% endif %}
+  </a>
+{% endmacro %}

package/components/teaser-standard/teaser-standard.scss

@@ -0,0 +1,38 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--standard {
+  display: flex;
+
+  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-expressive-heading03bold);
+
+    &--italic {
+      @include ds-typography($ds-typography-expressive-heading03italicregular);
+    }
+  }
+
+  .ds-teaser__media {
+    margin-left: ds-spacing-component($ds-sc-x4);
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      min-width: 104px;
+      max-width: 104px;
+
+      .ds-teaser-image__byline {
+        display: none;
+      }
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      min-width: 196px;
+      max-width: 196px;
+    }
+
+    .teaser__video {
+      max-width: 100%;
+    }
+  }
+}

package/components/teaser-tipsa/README.md

@@ -0,0 +1,41 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
+- Storybook (PROD): [TeaserTipsa > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teasertipsa-web)
+- Storybook (LATEST): [TeaserTipsa > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teasertipsa-web)
+
+----
+
+# teaser-tipsa
+
+It's quite common to include a dot in the title string, like "• This is a title"
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|text | String | no | | | Teaser subtext |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~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/teaser-tipsa/teaser-tipsa.njk' import TeaserTipsa %}
+
+{{ TeaserTipsa({
+  title: "• Jessie Ware låter den fullödiga fullängdaren vänta på sig",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa" as *;
+```

package/components/teaser-tipsa/teaser-tipsa.njk

@@ -0,0 +1,31 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserTipsa(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--tipsa"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    <div class="{{ componentClassName + '__content'}}">
+      <h2 class="ds-teaser__title">
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

package/components/teaser-tipsa/teaser-tipsa.scss

@@ -0,0 +1,23 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--tipsa {
+  .ds-teaser__content {
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  }
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-expressive-heading02bold);
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(2px, 1px);
+    }
+  }
+
+  .ds-teaser__text {
+    margin-top: 0;
+    @include ds-typography($ds-typography-functional-body02regular);
+  }
+}

package/components/text-button/text-button.njk

@@ -1,65 +1,62 @@
-{% 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/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro TextButton(params) %}
-  {% set componentClassName = "ds-text-btn" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set text = params.text %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
-
-  {% if params.forcePx %}
-    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {%- set componentClassName = "ds-text-btn" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set text = params.text %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+
+  {%- if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
   {% endif %}
 
-  {% if params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {%- if params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.condensed and not params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed and not params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% if params.mobile and params.mobile.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {%- if params.mobile and params.mobile.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set variant = (variant.push(classNamePrefix + "icon" + "-" + params.iconPosition ), variant) %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+  {%- 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 %}
 
-  {% set loadingHtml %}
+  {%- set loadingHtml %}
     {{ Spinner({ size: "small", variant: "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.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
-      <div class="{{ componentClassName + '__inner'}}">
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- if params.href %}
+    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
+      <span class="{{ componentClassName + '__inner'}}" aria-hidden="true">
         <span class="ds-text-btn__text">{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </a>
-  {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-      <div class="{{ componentClassName + '__inner'}}">
+  {%- else %}
+    <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
         <span class="ds-text-btn__text">{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </button>
   {% endif %}
 {% endmacro %}