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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.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);

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,83 @@
+{% 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 + '__grades'}}">
+            {% for grade in grades %}
+              {% if grade == activeGrade %}
+                <span class="{{ componentClassName + '__grade'}}" data-active-grade>{{- GradeIcon({ icon: grade }) | safe }}</span>
+              {% else %}
+                <span class="{{ componentClassName + '__grade'}}">{{- GradeIcon({ icon: grade }) | safe }}</span>
+              {% endif %}
+            {% endfor %}
+          </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,150 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+$ds-factbox__grade-size: 32px;
+$ds-factbox__show-more-fade-height: 48px;
+$ds-factbox__padding: ds-spacing-component(x4);
+$ds-factbox__max-height: 500px - ($ds-factbox__padding * 2); // @todo verify max-height (this is current max-height in bang)
+
+.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__grades {
+    margin: 0 0 ds-spacing-component(x4);
+    display: flex;
+  }
+  .ds-factbox__grade {
+    display: inline-flex;
+    margin: ds-spacing-component(0 0 0 x1);
+    color: $ds-color-icon-primary;
+    width: ds-px-to-rem($ds-factbox__grade-size);
+    height: ds-px-to-rem($ds-factbox__grade-size);
+    &:not([data-active-grade]) {
+      opacity: $ds-opacity-component-disabled;
+    }
+    &:first-child {
+      margin: 0;
+    }
+    @at-root .ds-force-px#{&} {
+      width: $ds-factbox__grade-size;
+      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/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 viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM14.5 20.9719C14.5 15.4966 17.0479 12 21.3034 12C25.559 12 28.134 15.4966 28.134 20.9719C28.134 26.4471 25.559 29.9708 21.3034 29.9708C17.0479 29.9708 14.5 26.4471 14.5 20.9719ZM20.0295 27.8024C20.0295 28.8595 20.4632 29.4016 21.3034 29.4016C22.1708 29.4016 22.6045 28.8595 22.6045 27.8024V14.1684C22.6045 13.1113 22.1708 12.5963 21.3034 12.5963C20.4632 12.5963 20.0295 13.1113 20.0295 14.1684V27.8024ZM33.5 27.5043C33.5 29.1035 32.5513 29.9708 31.3587 29.9708C30.166 29.9708 29.2174 29.1035 29.2174 27.5043C29.2174 25.9321 30.166 25.0377 31.3587 25.0377C32.5513 25.0377 33.5 25.9321 33.5 27.5043Z"/></svg>
+    {% elif iconName == "one" %}
+      <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM15 14.464C15 14.464 18.276 15.08 19.928 12H23.008V27.764C23.008 29.416 23.4 29.612 23.876 29.612H25.108V29.976H15.42V29.612H16.652C17.1 29.612 17.52 29.416 17.52 27.764V14.688C16.652 15.08 15 14.94 15 14.94V14.464ZM30.6448 28.016C30.6448 29.668 29.6648 30.564 28.4328 30.564C27.2008 30.564 26.2208 29.668 26.2208 28.016C26.2208 26.392 27.2008 25.468 28.4328 25.468C29.6648 25.468 30.6448 26.392 30.6448 28.016Z"/></svg>
+    {% elif iconName == "two" %}
+      <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM24.452 25.356C24.956 25.356 26.16 24.852 26.16 22.892H26.496V30.312H13V29.668C13 29.668 17.9 25.244 19.776 22.584L19.8072 22.5376C20.0626 22.1588 20.756 21.1303 20.756 19.28V14.296C20.756 13.204 19.944 12.644 19.076 12.644C16.416 12.644 16.36 14.38 16.36 14.38C18.796 14.38 19.216 16.228 19.216 16.816C19.216 16.956 19.16 19.448 16.444 19.448C15.016 19.448 13.588 18.496 13.588 16.424C13.588 14.296 15.716 12 19.076 12C24.312 12 26.468 14.632 26.468 17.46C26.468 21.212 20.98 24.124 18.404 25.356H24.452ZM32.0529 28.016C32.0529 29.668 31.0729 30.564 29.8409 30.564C28.6089 30.564 27.6289 29.668 27.6289 28.016C27.6289 26.392 28.6089 25.468 29.8409 25.468C31.0729 25.468 32.0529 26.392 32.0529 28.016Z"/></svg>
+    {% elif iconName == "three" %}
+      <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM26.236 16.368C26.236 18.636 24.388 19.532 22.876 19.896C26.012 20.708 27.188 22.724 27.188 24.908C27.188 27.736 25.032 30.564 19.796 30.564C15.736 30.564 14 28.268 14 26.14C14 24.068 15.456 23.116 16.884 23.116C19.6 23.116 19.628 25.608 19.628 25.72C19.628 26.336 19.236 28.184 16.8 28.184C16.8 28.184 16.436 29.92 19.796 29.92C20.664 29.92 21.476 29.36 21.476 28.268V22.052C21.476 20.932 20.776 20.344 19.908 20.344H18.172V19.756H19.936C21.4361 19.756 21.4273 17.8762 21.4208 16.4878C21.4204 16.399 21.42 16.3122 21.42 16.228V14.072C21.42 13.092 20.692 12.588 19.908 12.588C16.884 12.588 17.024 14.156 17.024 14.156C19.236 14.156 19.6 15.808 19.6 16.34C19.6 16.48 19.544 18.692 17.108 18.692C15.82 18.692 14.532 17.852 14.532 16.004C14.532 14.1 16.212 12.056 19.824 12C22.344 12 26.236 12.7 26.236 16.368ZM31.9592 28.016C31.9592 29.668 30.9792 30.564 29.7472 30.564C28.5152 30.564 27.5352 29.668 27.5352 28.016C27.5352 26.392 28.5152 25.468 29.7472 25.468C30.9792 25.468 31.9592 26.392 31.9592 28.016Z"/></svg>
+    {% elif iconName == "four" %}
+      <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM24.844 28.128C24.844 29.78 25.264 29.948 25.712 29.948H26.944V30.312H17.256V29.948H18.488C18.964 29.948 19.356 29.78 19.356 28.128V26.336H13V25.412L20.56 12H24.844V25.188H27.112V26.336H24.844V28.128ZM19.356 15.276L13.84 25.188H19.356V15.276ZM32.6545 28.016C32.6545 29.668 31.6745 30.564 30.4425 30.564C29.2105 30.564 28.2305 29.668 28.2305 28.016C28.2305 26.392 29.2105 25.468 30.4425 25.468C31.6745 25.468 32.6545 26.392 32.6545 28.016Z"/></svg>
+    {% elif iconName == "five" %}
+      <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22ZM44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22ZM16.744 20.24C16.744 20.24 18.284 19.372 20.216 19.372C25.536 19.372 27.384 22.34 27.384 25.084C27.384 27.912 25.228 30.656 19.992 30.656C15.904 30.656 14 28.388 14 26.232C14 24.16 15.456 23.236 16.884 23.236C19.6 23.236 19.628 25.7 19.628 25.84C19.628 26.456 19.236 28.304 16.8 28.304C16.8 28.304 16.632 30.012 19.992 30.012C20.86 30.012 21.644 29.48 21.644 28.388V21.668C21.644 20.548 20.972 19.96 20.104 19.96L20.0703 19.9599C19.6886 19.9579 18.0658 19.9497 16.548 21.332L16.1 21.136L16.128 12.092H24.36C25.9 12.092 26.292 11 26.292 11L26.656 11.056L25.032 16.852H16.744V20.24ZM32.424 28.108C32.424 29.76 31.444 30.656 30.212 30.656C28.98 30.656 28 29.76 28 28.108C28 26.484 28.98 25.56 30.212 25.56C31.444 25.56 32.424 26.484 32.424 28.108Z"/></svg>
+    {% endif %}
+  </i>
+{% 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.3",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",