@bonniernews/dn-design-system-web 2.1.0-alpha.2 → 2.1.0-alpha.21

package/components/footer/footer.njk

@@ -1,10 +1,6 @@
-{% macro Footer(params) %}
-  {% macro _getAttributes(attributes) %}
-    {% for attribute, value in attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endmacro %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
+{% macro Footer(params) %}
   {% set componentClassName = "ds-footer" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
@@ -23,11 +19,11 @@
     <div class="{{ componentClassName + '__inner'}}">
       <div class="{{ componentClassName + '__link-grid'}}">
         {% for group in params.linkGroups %}
-          <div class="{{ componentClassName + '__link-group'}}" {{- _getAttributes(group.attributes) | safe }}>
+          <div class="{{ componentClassName + '__link-group'}}" {{- getAttributes(group.attributes) | safe }}>
             <h2>{{ group.title }}</h2>
             <ul>
               {% for link in group.links %}
-                <li><a href="{{ link.href }}" class="ds-footer__link {{ link.classNames }}" {{- _getAttributes(link.attributes) | safe }}>{{ link.text }}</a></li>
+                <li><a href="{{ link.href }}" class="ds-footer__link {{ link.classNames }}" {{- getAttributes(link.attributes) | safe }}>{{ link.text }}</a></li>
               {% endfor %}
             </ul>
           </div>
@@ -51,11 +47,10 @@
       {% if params.channels %}
         <div class="{{ componentClassName + '__channels'}}">
           {% for link in params.channels %}
-            <a href="{{ link.href }}" class="ds-footer__channel-link {{ link.classNames }}" {{- _getAttributes(link.attributes) | safe }}>{{ link.text }}</a>
+            <a href="{{ link.href }}" class="ds-footer__channel-link {{ link.classNames }}" {{- getAttributes(link.attributes) | safe }}>{{ link.text }}</a>
           {% endfor %}
         </div>
       {% endif %}
     </div>
   </footer>
 {% endmacro %}
-

package/components/list-item/README-checkbox.md

@@ -18,6 +18,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual checkbox element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-radio.md

@@ -19,6 +19,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual radio element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-switch.md

@@ -18,6 +18,7 @@
 |border | bool | no | true, false | false | |
 |leadingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual switch element and not list item. Same structure as attributes above |
 |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
 

package/components/list-item/README-toggle.md

@@ -19,6 +19,7 @@
 |disabled | bool | no | true, false | false | |
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not list item. Same structure as attributes above |
 |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
 
@@ -34,7 +35,7 @@ These are copy paste friendly examples to quickliy get started using a component
 {{ ListItem({
   listItemType: 'toggle',
   title: 'My toggle list item',
-  titleHref: '#',
+  titleHref: 'dn.se',
   toggleText: 'Följ',
   toggleSelectedText: 'Följer'
 })}}

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

@@ -3,6 +3,7 @@
 {% 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 %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro ListItem(params) %}
   {% set componentClassName = "ds-list-item" %}
@@ -16,7 +17,7 @@
         {% if params.title %}
           <div class="{{ componentClassName + '__titles'}}">
             {% if params.titleHref and not params.disabled %}
-              <a class="{{ componentClassName + '__title'}}" href="{{ params.href }}">{{ params.title }}</a>
+              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}">{{ params.title }}</a>
             {% else %}
               <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
             {% endif %}
@@ -43,11 +44,7 @@
 {% macro ListItemInner(params, componentClassName) %}
   {% 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) %}
@@ -101,7 +98,8 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          stripLabel: true
+          stripLabel: true,
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -115,7 +113,7 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected }]
+          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes }]
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -131,7 +129,8 @@
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          stripLabel: true
+          stripLabel: true,
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}
@@ -158,7 +157,8 @@
           condensed: false,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "xsmall"
+          size: "xsmall",
+          attributes: params.elementAttributes
         })}}
       {% endset %}
       {{ caller() if caller }}

package/components/list-item/list-item.scss

@@ -6,7 +6,6 @@
 @use "../button-toggle/button-toggle.scss" as *;
 
 $ds-list-item__icon-size: 24px;
-$ds-list-item__padding: ds-spacing-component(x4);
 
 .ds-list-item__outer {
   list-style: none;
@@ -34,7 +33,7 @@ $ds-list-item__padding: ds-spacing-component(x4);
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: $ds-list-item__padding;
+    padding: ds-spacing-component(x4 outer);
     width: 100%;
 
     &::before {
@@ -210,8 +209,7 @@ $ds-list-item__padding: ds-spacing-component(x4);
 
 .ds-list-item--accordion .ds-checkbox__accordion,
 .ds-list-item--radio .ds-radio-btn__inner,
-.ds-list-item--checkbox .ds-checkbox__inner,
-.ds-list-item--switch .ds-switch__inner {
+.ds-list-item--checkbox .ds-checkbox__inner {
   &::before {
     display: none;
   }
@@ -242,13 +240,13 @@ $ds-list-item__padding: ds-spacing-component(x4);
   cursor: default;
   .ds-list-item__inner {
     display: flex;
-    padding: 0 0 0 $ds-list-item__padding;
+    padding: 0 0 0 ds-spacing-component(outer);
   }
   .ds-list-item__titles {
-    padding: $ds-list-item__padding 0;
+    padding: ds-spacing-component(x4) 0;
   }
   .ds-btn-toggle {
-    margin: 0 $ds-list-item__padding;
+    margin: 0 ds-spacing-component(outer) 0 ds-spacing-component(x4);
   }
   a {
     @include ds-link($ds-link-list);

package/components/quote/README.md

@@ -0,0 +1,36 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
+- Storybook: [Quote > Web](https://designsystem.dn.se/?path=/story/components-app-web-quote-web)
+
+----
+
+# Quote
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|bodyHtml | HTML String | yes | | | |
+|variant | String | no | standard, culture, sport, economy | standard | Design variant |
+|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/quote/quote.njk' import Quote %}
+
+{{ Quote({
+  variant: "culture",
+  bodyHtml: ""
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/quote/quote";
+```

package/components/quote/quote.njk

@@ -0,0 +1,29 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro Quote(params) %}
+  {% set componentClassName = "ds-quote" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.variant %}
+    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% else %}
+    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <blockquote class="{{ classes }}" {{- attributes | safe }}>
+    <span class="{{ componentClassName + '__border'}}"></span>
+    {{ params.bodyHtml | safe }}
+  </blockquote>
+{% endmacro %}

package/components/quote/quote.scss

@@ -0,0 +1,36 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-quote {
+  @include ds-typography($ds-typography-expressive-heading03bold);
+  color: $ds-color-text-primary;
+  margin: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+  position: relative;
+
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($ds-typography-expressive-heading03bold, true);
+  }
+
+  .ds-quote__border {
+    display: block;
+    width: 40px;
+    height: 8px;
+    color: $ds-color-component-brand;
+    background: currentColor;
+    margin: ds-spacing-component(0 0 x2);
+  }
+
+  &--culture .ds-quote__border {
+    color: $ds-color-static-kultur;
+  }
+  &--sport .ds-quote__border {
+    color: $ds-color-static-sport;
+  }
+  &--economy .ds-quote__border {
+    color: $ds-color-static-economy;
+  }
+  &--sthlm .ds-quote__border {
+    color: $ds-color-static-sthlm;
+  }
+}

package/components/switch/switch.scss

@@ -1,9 +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/forward.helpers.scss" as *;
 
 $ds-switch__knob-size: 16px;
 $ds-switch__knob-padding: 4px;
@@ -108,18 +103,30 @@ $ds-switch__container-width: 44px;
       outline-color: $ds-color-border-focus;
     }
   }
+}
 
-  &:hover {
-    input:not(:disabled) + .ds-switch__box::before {
-      background-color: $ds-color-component-primary-overlay;
-    }
-  }
-  &:active {
-    input:not(:disabled) + .ds-switch__box::before {
-      background-color: $ds-color-component-primary-overlay-02;
-    }
+@include ds-hover() {
+  .ds-switch
+    input:not(:disabled)
+    + .ds-switch__inner:hover
+    .ds-switch__box::before,
+  .ds-list-item--switch:hover
+    input:not(:disabled)
+    + .ds-switch__inner
+    .ds-switch__box::before {
+    background-color: $ds-color-component-primary-overlay;
   }
 }
+.ds-switch
+  input:not(:disabled)
+  + .ds-switch__inner:active
+  .ds-switch__box::before,
+.ds-list-item--switch:active
+  input:not(:disabled)
+  + .ds-switch__inner
+  .ds-switch__box::before {
+  background-color: $ds-color-component-primary-overlay-02;
+}
 
 .ds-switch--condensed .ds-switch__inner {
   padding: 0;

package/components/thematic-break/README.md

@@ -0,0 +1,30 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
+- Storybook: [ThematicBreak > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-thematicbreak-web--thematic-break)
+
+----
+
+# ThematicBreak
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+
+## 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/thematic-break/thematic-break.njk' import ThematicBreak %}
+
+{{ ThematicBreak() }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
+```

package/components/thematic-break/thematic-break.njk

@@ -0,0 +1,14 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro ThematicBreak(params) %}
+  {% set componentClassName = "ds-thematic-break" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <hr class="{{ classes }}" {{- attributes | safe }}>
+{% endmacro %}

package/components/thematic-break/thematic-break.scss

@@ -0,0 +1,22 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-thematic-break {
+  height: 4px;
+  margin: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+  border: none;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    content: "";
+    background-color: $ds-color-border-primary;
+    height: 100%;
+    width: 128px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

package/foundations/a11y/informative-svg.njk

@@ -0,0 +1,23 @@
+{#
+  example:
+  <svg {{ getSvgAttributes({ title: true, desc: true }) }}>{{ getInformativeElements({ title: 'A title', 'desc': 'A descriptive text' }) }}</svg>
+#}
+
+{% macro getSvgAttributes(params) %}
+  {% if params.title and params.desc %}
+    role="img" lang="sv" xml:lang="sv" aria-labelledby="title description"
+  {% elif params.title %}
+    role="img" lang="sv" xml:lang="sv" aria-labelledby="title"
+  {% elif params.desc %}
+    role="img" lang="sv" xml:lang="sv" aria-labelledby="description"
+  {% endif %}
+{% endmacro %}
+
+{% macro getInformativeElements(params) %}
+  {% if params.title %}
+    <title id="title">{{ params.title }}</title>
+  {% endif %}
+  {% if params.desc %}
+    <desc id="description">{{ params.desc }}</desc>
+  {% endif %}
+{% endmacro %}

package/foundations/helpers/typography.scss

@@ -74,7 +74,7 @@ $dsSerifWeights: (
   $tmpMapScreenLarge: map.get($typographyTokensScreenLarge, $component);
 
   @if $tmpMap {
-    @include ds-mq-largest-breakpoint(tablet) {
+    @include ds-mq-largest-breakpoint(mobile) {
       @include _ds-normalize-letter-spacing($tmpMap);
       @each $key in map-keys($tmpMap) {
         @include _ds-typography-get-property($tmpMap, $key, $forcePx);
@@ -83,7 +83,7 @@ $dsSerifWeights: (
   }
 
   @if $tmpMapScreenLarge {
-    @include ds-mq-smallest-breakpoint(desktop) {
+    @include ds-mq-smallest-breakpoint(tablet) {
       @include _ds-normalize-letter-spacing($tmpMapScreenLarge);
       @each $key in map-keys($tmpMapScreenLarge) {
         @include _ds-typography-get-property(
@@ -99,9 +99,9 @@ $dsSerifWeights: (
 @mixin ds-typography-without-mq($component, $screen: false, $forcePx: false) {
   $tmpMap: false;
 
-  @if $screen == mobile or $screen == tablet {
+  @if $screen == mobile {
     $tmpMap: map.get($typographyTokensScreenSmall, $component);
-  } @else if $screen == desktop {
+  } @else if $screen == tablet or $screen == desktop {
     $tmpMap: map.get($typographyTokensScreenLarge, $component);
   }
 

package/foundations/icons/grade-icon.njk

@@ -0,0 +1,22 @@
+{% from '@bonniernews/dn-design-system-web/foundations/a11y/informative-svg.njk' import getSvgAttributes, getInformativeElements %}
+
+{% macro GradeIcon(params) %}
+  {% set iconName = params.icon | lower %}
+  {% set svgAccessibilityAttributes = getSvgAttributes({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
+  {% set svgAccessibilityElements = getInformativeElements({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
+  <i class="ds-icon ds-icon--grade-{{ iconName }}">
+    {% if iconName == "zero" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 194 44">{{- svgAccessibilityElements -}}<path d="M20.52 12C15.816 12 13 15.891 13 21.985 13 28.078 15.816 32 20.52 32c4.703 0 7.55-3.922 7.55-10.015 0-6.094-2.847-9.985-7.55-9.985Zm0 19.366c-.93 0-1.409-.603-1.409-1.78V14.414c0-1.176.48-1.75 1.409-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM31.633 32C32.952 32 34 31.035 34 29.255c0-1.75-1.048-2.745-2.367-2.745-1.318 0-2.366.995-2.366 2.745 0 1.78 1.048 2.745 2.366 2.745Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M59.04 12C57.35 15.318 54 14.655 54 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.908v-.392h-1.26c-.487 0-.888-.21-.888-1.99V12h-3.15ZM67.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M95.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C87.143 26.269 82 31.035 82 31.035v.694h14.167v-7.994h-.353ZM99.678 32c1.293 0 2.322-.965 2.322-2.745 0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M122.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM129.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M156.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L144 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM161.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M182.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM191.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
+    {% elif iconName == "one" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 197 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><circle cx="53" cy="22" r="21" fill="none" stroke-width="2"/><path d="M52.04 12C50.35 15.318 47 14.655 47 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM60.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/><g opacity=".5"><path d="M98.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C90.143 26.269 85 31.035 85 31.035v.694h14.167v-7.994h-.353ZM102.678 32c1.293 0 2.322-.965 2.322-2.745 0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M125.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM132.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M159.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L147 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM164.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M185.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM194.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
+    {% elif iconName == "two" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 193 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><circle cx="81" cy="22" r="21" fill="none" stroke-width="2"/><path d="M85.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C77.143 26.269 72 31.035 72 31.035v.694h14.167v-7.994h-.353ZM89.678 32C90.971 32 92 31.035 92 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/><g opacity=".5"><path d="M121.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM128.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M155.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L143 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM160.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M181.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM190.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
+    {% elif iconName == "three" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 195 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><path d="M113.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM120.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/><circle cx="113" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M157.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L145 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM162.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M183.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM192.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
+    {% elif iconName == "four" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 193 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M101.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801H97.18v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258C93 29.526 94.74 32 98.81 32c5.247 0 7.408-3.047 7.408-6.093 0-2.354-1.179-4.525-4.322-5.4ZM108.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><path d="M146.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L134 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM151.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/><circle cx="143" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M181.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM190.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
+    {% elif iconName == "five" %}
+      <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 197 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M101.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801H97.18v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258C93 29.526 94.74 32 98.81 32c5.247 0 7.408-3.047 7.408-6.093 0-2.354-1.179-4.525-4.322-5.4ZM108.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M135.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L123 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM140.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><path d="M173.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM182.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/><circle cx="175" cy="22" r="21" fill="none" stroke-width="2"/></svg>
+    {% endif %}
+  </i>
+{% endmacro %}

package/foundations/variables/colorsCssVariables.scss

@@ -59,6 +59,8 @@ $ds-color-static-kultur: var(--ds-color-static-kultur);
 $ds-color-static-economy: var(--ds-color-static-economy);
 $ds-color-static-sport: var(--ds-color-static-sport);
 $ds-color-static-neutral-200: var(--ds-color-static-neutral-200);
+$ds-color-static-sthlm: var(--ds-color-static-sthlm);
+$ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
 $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
 $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
 $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -47,14 +47,14 @@ $ds-hex-dark-border-focus-02: #ffffff;
 $ds-hex-dark-border-focus-03: #EF7171;
 $ds-hex-dark-border-focus-04: #3A8352;
 $ds-hex-dark-background-primary: #141414;
-$ds-hex-dark-gradient-content-fade: linear-gradient(90deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #14141400 0%, #141414 100%);
+$ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-static-red-200: #FAD4D4;
 $ds-hex-dark-static-black: #141414;
-$ds-hex-dark-static-transparent-black: #08080880;
+$ds-hex-dark-static-transparent-black: #14141480;
 $ds-hex-dark-static-white: #ffffff;
 $ds-hex-dark-static-transparent-white: #ffffff80;
 $ds-hex-dark-static-green-100: #CEE4D6;
@@ -64,3 +64,5 @@ $ds-hex-dark-static-kultur: #568CBB;
 $ds-hex-dark-static-economy: #60BCA1;
 $ds-hex-dark-static-sport: #F58D2D;
 $ds-hex-dark-static-neutral-200: #E0E0E0;
+$ds-hex-dark-static-sthlm: #FF589B;
+$ds-hex-dark-static-ad-yellow: #FFEAC2;

package/foundations/variables/colorsDnLightTokens.scss

@@ -49,7 +49,7 @@ $ds-hex-border-focus-04: #3A8352;
 $ds-hex-background-primary: #ffffff;
 $ds-hex-static-red-200: #FAD4D4;
 $ds-hex-static-black: #141414;
-$ds-hex-static-transparent-black: #08080880;
+$ds-hex-static-transparent-black: #14141480;
 $ds-hex-static-white: #ffffff;
 $ds-hex-static-transparent-white: #ffffff80;
 $ds-hex-static-green-100: #CEE4D6;
@@ -59,6 +59,8 @@ $ds-hex-static-kultur: #568CBB;
 $ds-hex-static-economy: #60BCA1;
 $ds-hex-static-sport: #F58D2D;
 $ds-hex-static-neutral-200: #E0E0E0;
+$ds-hex-static-sthlm: #FF589B;
+$ds-hex-static-ad-yellow: #FFEAC2;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/njk-helpers/attributes.njk

@@ -0,0 +1,5 @@
+{% macro getAttributes(attributes) %}
+  {% for attribute, value in attributes %}
+    {{attribute}}="{{value}}"
+  {% endfor %}
+{% endmacro %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "2.1.0-alpha.2",
+  "version": "2.1.0-alpha.21",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/tokens/colors-css-variables.json

@@ -60,6 +60,8 @@
   "static-economy": "var(--ds-color-static-economy)",
   "static-sport": "var(--ds-color-static-sport)",
   "static-neutral-200": "var(--ds-color-static-neutral-200)",
+  "static-sthlm": "var(--ds-color-static-sthlm)",
+  "static-ad-yellow": "var(--ds-color-static-ad-yellow)",
   "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
   "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
   "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",