@bonniernews/dn-design-system-web 2.1.0-alpha.1 → 2.1.0-alpha.10

package/CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.9...@bonniernews/dn-design-system-web@2.1.0-alpha.10) (2023-02-21)
+
+
+### Bug Fixes
+
+* **web:** redo review grades to match new design ([#685](https://github.com/BonnierNews/dn-design-system/issues/685)) ([f617440](https://github.com/BonnierNews/dn-design-system/commit/f617440501709d4a6114f41c4a08d3761f5951e6))
+
+
+
+## [2.1.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.8...@bonniernews/dn-design-system-web@2.1.0-alpha.9) (2023-02-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [2.1.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.7...@bonniernews/dn-design-system-web@2.1.0-alpha.8) (2023-02-20)
+
+
+### Bug Fixes
+
+* **web:** remove borders from review icons ([#683](https://github.com/BonnierNews/dn-design-system/issues/683)) ([f47ef42](https://github.com/BonnierNews/dn-design-system/commit/f47ef424be3d537af47c841c225d35f3a3d56535))
+
+
+
+## [2.1.0-alpha.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.6...@bonniernews/dn-design-system-web@2.1.0-alpha.7) (2023-02-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [2.1.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.5...@bonniernews/dn-design-system-web@2.1.0-alpha.6) (2023-02-20)
+
+
+### Features
+
+* **web:** quote component for web ([#675](https://github.com/BonnierNews/dn-design-system/issues/675)) ([599c7d9](https://github.com/BonnierNews/dn-design-system/commit/599c7d9012b7a9677c31b42196189c6b8bba04e3))
+
+
+
+## [2.1.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.4...@bonniernews/dn-design-system-web@2.1.0-alpha.5) (2023-02-20)
+
+
+### Features
+
+* **web:** thematic break ([#673](https://github.com/BonnierNews/dn-design-system/issues/673)) ([6a48aac](https://github.com/BonnierNews/dn-design-system/commit/6a48aac61f29243afcc5980f6e4ba70e3ee7b1c1))
+
+
+
+## [2.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.3...@bonniernews/dn-design-system-web@2.1.0-alpha.4) (2023-02-20)
+
+
+### Bug Fixes
+
+* **web:** add element attributes to list items ([#676](https://github.com/BonnierNews/dn-design-system/issues/676)) ([5858f74](https://github.com/BonnierNews/dn-design-system/commit/5858f74d99d24bec38b4d404b4b4dcbfacfab9d1))
+
+
+
+## [2.1.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.2...@bonniernews/dn-design-system-web@2.1.0-alpha.3) (2023-02-17)
+
+
+### Features
+
+* **web:** factbox component ([#672](https://github.com/BonnierNews/dn-design-system/issues/672)) ([310447e](https://github.com/BonnierNews/dn-design-system/commit/310447e35638aa7a289db613ee9e754098ed9718))
+
+
+
+## 2.1.0-alpha.2 (2023-02-17)
+
+
+### Bug Fixes
+
+* **web:** support auto in spacing helper ([#677](https://github.com/BonnierNews/dn-design-system/issues/677)) ([c6b3a2d](https://github.com/BonnierNews/dn-design-system/commit/c6b3a2dfca50033ff80917e44eadbb772357696b))
+
+
+
 ## [2.1.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.0...@bonniernews/dn-design-system-web@2.1.0-alpha.1) (2023-02-15)
 
 

package/components/button/README.md

@@ -15,6 +15,7 @@
 |size| String | no | default, small | default | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |iconPosition | String | no | none, left, right | none | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
 |loading | bool | no | true, false | false | |

package/components/button/button.njk

@@ -30,6 +30,10 @@
     {% set variant = (variant.push("ds-force-px"), variant) %}
   {% endif %}
 
+  {% if params.condensed %}
+    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {% endif %}
+
   {% if params.size and params.size != "default" %}
     {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
   {% endif %}

package/components/button/button.scss

@@ -1,11 +1,5 @@
 @use "sass:math";
-@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/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -17,14 +11,17 @@ $ds-btn__icon-size: 24px;
   cursor: pointer;
   background-color: transparent;
   border: none;
-  min-width: $ds-btn__min-clickable-area;
-  min-height: $ds-btn__min-clickable-area;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   position: relative;
 
+  &:not(.ds-btn--condensed) {
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+  }
+
   &:focus-visible {
     outline: none;
     .ds-btn__inner {
@@ -62,8 +59,10 @@ $ds-btn__icon-size: 24px;
     }
   }
 
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -172,8 +171,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-border-focus-02;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-secondary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: $ds-color-component-secondary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: $ds-color-component-secondary-overlay-02;
@@ -225,8 +226,10 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-border-focus-02;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: #0808081a; // static version of lightmode component-secondary-overlay
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: #0808081a; // static version of lightmode component-secondary-overlay
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: #08080833; // static version of lightmode component-secondary-overlay-2
@@ -245,9 +248,11 @@ $ds-btn__icon-size: 24px;
   &:focus-visible .ds-btn__inner {
     outline-color: $ds-color-static-white;
   }
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: rgba(255, 255, 255, 0.101960784);
-    // static version of darkmode component-secondary-overlay
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
+      background-color: rgba(255, 255, 255, 0.101960784);
+      // static version of darkmode component-secondary-overlay
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
     background-color: rgba(255, 255, 255, 0.2);
@@ -275,7 +280,7 @@ $ds-btn__icon-size: 24px;
 .ds-btn--primary,
 .ds-btn--staticWhiteFilled {
   &:not(.ds-loading):disabled {
-    opacity: 0.6; // @todo replace with opacity token if/when available
+    opacity: $ds-opacity-component-disabled;
     .ds-btn__inner {
       cursor: not-allowed;
     }

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

@@ -1,15 +1,12 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% 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 ButtonToggle(params) %}
   {% set componentClassName = "ds-btn-toggle" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.selected %}
     {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}

package/components/button-toggle/button-toggle.scss

@@ -1,11 +1,5 @@
 @use "sass:math";
-@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/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -71,8 +65,10 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
     }
   }
 
-  &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay;
+  @include ds-hover() {
+    &:hover:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
+      background-color: $ds-color-component-primary-overlay;
+    }
   }
   &:active:not(:disabled):not(.ds-loading) .ds-btn-toggle__inner::before {
     background-color: $ds-color-component-primary-overlay-02;
@@ -127,7 +123,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   }
   &:not(.ds-btn-toggle--selected) {
     &:not(.ds-loading):disabled {
-      opacity: 0.6; // @todo replace with opacity token if/when available
+      opacity: $ds-opacity-component-disabled;
       .ds-btn-toggle__inner {
         cursor: not-allowed;
       }

package/components/factbox/README.md

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/factbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/factbox)
+- Storybook: [Factbox > Web](https://designsystem.dn.se/?path=/story/components-web-factbox-web--factbox)
+
+----
+
+# Factbox
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|vignetteHtml | HTML String | no | | | |
+|titleHtml | HTML String | yes | | | |
+|bodyHtml | HTML String | yes | | | |
+|variant | String | yes | standard, culture, sport, economy | standard | Design variant |
+|grade | String | no | | | zero, one, two, three, four, five, none |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forceExpanded | bool | no | true, false | false | Full factbox is shown regardless of height and no control buttons are shown|
+|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/factbox/factbox.njk' import Factbox %}
+
+{{ Factbox({
+  vignetteHtml: "",
+  titleHtml: "Drama",
+  bodyHtml: "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>",
+  variant: "culture",
+  grade: "two",
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/factbox/factbox" as *;
+```
+
+### Javascript
+
+```javascript
+import dsFactbox from '@bonniernews/dn-design-system-web/components/factbox/factbox.js'
+const factboxElements = Array.from(document.getElementsByClassName("ds-factbox"));
+dsFactbox(factboxElements);
+```

package/components/factbox/factbox.js

@@ -0,0 +1,42 @@
+export {
+  dsFactbox,
+  dsFactboxAll
+};
+
+const selector = "ds-factbox";
+const expandedClass = `${selector}--expanded`;
+const maxHeight = 468; // this has to match max-height in factbox.scss
+
+function dsFactbox(factboxElements) {
+  if (!factboxElements.length) return;
+  factboxElements.forEach((factboxEl) => {
+    if (factboxEl.classList.contains(expandedClass)) return;
+
+    const contentEl = factboxEl.getElementsByClassName(`${selector}__content`)[0];
+    if (contentEl.getBoundingClientRect().height <= maxHeight) {
+      factboxEl.classList.add(expandedClass);
+      return;
+    }
+
+    const showMoreEl = factboxEl.getElementsByClassName(`${selector}__show-more`)[0];
+    showMoreEl.classList.add(`${selector}__show-more--collapsable`);
+
+    const expandMoreBtn = factboxEl.getElementsByClassName(`${selector}__expand-more`)[0];
+    const expandLessBtn = factboxEl.getElementsByClassName(`${selector}__expand-less`)[0];
+
+    expandMoreBtn.addEventListener("click", () => {
+      factboxEl.classList.add(expandedClass);
+      showMoreEl.setAttribute("data-factbox-expanded", "");
+    });
+
+    expandLessBtn.addEventListener("click", () => {
+      factboxEl.classList.remove(expandedClass);
+      showMoreEl.removeAttribute("data-factbox-expanded");
+    });
+  });
+}
+
+function dsFactboxAll() {
+  const factboxElements = Array.from(document.getElementsByClassName(`${selector}`));
+  dsFactbox(factboxElements);
+}

package/components/factbox/factbox.njk

@@ -0,0 +1,75 @@
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GradeIcon %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro Factbox(params) %}
+  {% set componentClassName = "ds-factbox" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set grades = ["zero", "one", "two", "three", "four", "five"] %}
+  {% set activeGrade = params.grade | default("") | string %}
+
+  {% set attributes %}
+    {% for attribute, value in params.attributes %}
+      {{attribute}}="{{value}}"
+    {% endfor %}
+  {% endset %}
+
+  {% if params.variant %}
+    {% set variant = (variant.push(classNamePrefix + params.variant), variant) %}
+  {% else %}
+    {% set variant = (variant.push(classNamePrefix + "standard"), variant) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.forceExpand %}
+    {% set variant = (variant.push(classNamePrefix + "expanded"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="{{ componentClassName + '__content'}}">
+        <h2 class="{{ componentClassName + '__title'}}">
+          {%- if params.vignetteHtml %}<span class="{{ componentClassName + '__vignette'}}">{{ params.vignetteHtml | safe }}</span>{%- endif %}
+          {{- params.titleHtml | safe -}}
+        </h2>
+        {% if activeGrade and activeGrade in grades  %}
+          <div class="{{ componentClassName + '__grade'}}">{{- GradeIcon({ icon: activeGrade }) | safe }}</div>
+        {% endif%}
+        <div class="{{ componentClassName + '__body'}}">{{ params.bodyHtml | safe }}</div>
+      </div>
+      <div class="{{ componentClassName + '__show-more'}}">
+        {{ Button({
+          text: 'Visa mer',
+          variant: 'secondaryFilled',
+          size: 'small',
+          iconPosition: 'right',
+          iconName: 'expand_more',
+          classNames: 'ds-factbox__expand-more',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true
+        })}}
+        {{ Button({
+          text: 'Visa mindre',
+          variant: 'secondaryFilled',
+          size: 'small',
+          iconPosition: 'right',
+          iconName: 'expand_less',
+          classNames: 'ds-factbox__expand-less',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true
+        })}}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

package/components/factbox/factbox.scss

@@ -0,0 +1,148 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+$ds-factbox__grade-size: 40px + (ds-metrics-border-width(x2) * 2);
+$ds-factbox__show-more-fade-height: 48px;
+$ds-factbox__padding: ds-spacing-component(x4);
+$ds-factbox__max-height: 500px - ($ds-factbox__padding * 2);
+
+.ds-factbox {
+  background-color: $ds-color-surface-background;
+  padding: $ds-factbox__padding;
+  padding-left: $ds-factbox__padding - ds-metrics-border-width(x2);
+  padding-top: $ds-factbox__padding - ds-metrics-border-width(x1);
+  border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+  border-left: ds-metrics-border-width(x2) solid $ds-color-component-brand;
+  margin: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+
+  .ds-factbox__inner {
+    max-height: ds-px-to-rem($ds-factbox__max-height);
+    overflow: hidden;
+    position: relative;
+
+    @at-root .ds-force-px#{&} {
+      max-height: $ds-factbox__max-height;
+    }
+  }
+
+  &--expanded .ds-factbox__inner,
+  &--expanded.ds-force-px .ds-factbox__inner {
+    max-height: none;
+  }
+
+  .ds-factbox__body {
+    overflow: hidden;
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: $ds-color-text-primary;
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+    p {
+      margin: 0 0 ds-spacing-component(x4);
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+    a {
+      @include ds-link($ds-link-article-body);
+    }
+    strong {
+      @include ds-typography($ds-typography-functional-body02medium);
+      @at-root .ds-force-px#{&} {
+        @include ds-typography($ds-typography-functional-body02medium, true);
+      }
+    }
+    img {
+      max-width: 100%;
+    }
+  }
+  .ds-factbox__title {
+    @include ds-typography($ds-typography-functional-heading01bold);
+    color: $ds-color-text-primary;
+    margin: 0 0 ds-spacing-component(x4);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-heading01bold, true);
+    }
+  }
+  .ds-factbox__vignette {
+    color: $ds-color-component-brand;
+    margin-right: ds-spacing-component(x1);
+  }
+  .ds-factbox__grade {
+    color: $ds-color-icon-primary;
+    margin: 0 0 ds-spacing-component(x4);
+
+    .ds-icon {
+      display: block;
+      height: ds-px-to-rem($ds-factbox__grade-size);
+      svg {
+        height: 100%;
+        width: auto;
+        circle {
+          stroke: currentColor;
+        }
+      }
+      @at-root .ds-force-px#{&} {
+        height: $ds-factbox__grade-size;
+      }
+    }
+  }
+  .ds-factbox__show-more--collapsable::before {
+    content: "";
+    background: $ds-color-gradient-content-fade-up;
+    height: ds-px-to-rem($ds-factbox__show-more-fade-height);
+    width: 100%;
+    position: absolute;
+    top: -#{ds-px-to-rem($ds-factbox__show-more-fade-height)};
+
+    @at-root .ds-force-px#{&} {
+      height: $ds-factbox__show-more-fade-height;
+      top: -#{$ds-factbox__show-more-fade-height};
+    }
+  }
+  .ds-factbox__show-more {
+    display: none;
+  }
+  .ds-factbox__show-more--collapsable {
+    background-color: $ds-color-surface-background;
+    width: 100%;
+    button {
+      margin: ds-spacing-component(x4 0 0);
+    }
+    &,
+    &:not([data-factbox-expanded]) .ds-factbox__expand-more,
+    &[data-factbox-expanded] .ds-factbox__expand-less {
+      display: block;
+    }
+    &:not([data-factbox-expanded]) .ds-factbox__expand-less,
+    &[data-factbox-expanded] .ds-factbox__expand-more,
+    &[data-factbox-expanded]::before {
+      display: none;
+    }
+    &:not([data-factbox-expanded]) {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  &--culture {
+    border-left-color: $ds-color-static-kultur;
+    .ds-factbox__vignette {
+      color: $ds-color-static-kultur;
+    }
+  }
+  &--sport {
+    border-left-color: $ds-color-static-sport;
+    .ds-factbox__vignette {
+      color: $ds-color-static-sport;
+    }
+  }
+  &--economy {
+    border-left-color: $ds-color-static-economy;
+    .ds-factbox__vignette {
+      color: $ds-color-static-economy;
+    }
+  }
+}

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

@@ -210,8 +210,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;
   }

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,33 @@
+@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;
+  }
+}

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,10 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-thematic-break {
+  width: 128px;
+  height: 4px;
+  margin: ds-spacing-layout(gap-vertical-static-medium) auto
+    ds-spacing-layout(gap-vertical-static-large);
+  background-color: $ds-color-border-primary;
+  border: none;
+}

package/foundations/helpers/spacing.scss

@@ -25,7 +25,9 @@
 
   @each $unit in $units {
     $value: map.get($map, $unit);
-    @if ($unit == 0) {
+    @if ($unit == "auto") {
+      $value: auto;
+    } @else if ($unit == 0) {
       $value: 0 * 1;
     } @else if ($value and type-of($value) == "number") {
       @if ($sizeUnit == "rem") {
@@ -36,7 +38,7 @@
         $value: $value * 1px;
       }
     }
-    @if (type-of($value) == "number") {
+    @if (type-of($value) == "number" or $value == "auto") {
       $values: list.append($values, $value);
     }
   }

package/foundations/icons/grade-icon.njk

@@ -0,0 +1,18 @@
+{% macro GradeIcon(params) %}
+  {% set iconName = params.icon | lower %}
+  <i class="ds-icon ds-icon--grade-{{ iconName }}">
+    {% if iconName == "zero" %}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 194 44"><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" fill="none" viewBox="0 0 197 44"><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" fill="none" viewBox="0 0 193 44"><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" fill="none" viewBox="0 0 195 44"><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" fill="none" viewBox="0 0 193 44"><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" fill="none" viewBox="0 0 197 44"><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/colorsDnDarkTokens.scss

@@ -54,7 +54,7 @@ $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #14141400 0%, #14
 $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;

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;

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.1",
+  "version": "2.1.0-alpha.10",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",