@bonniernews/dn-design-system-web 3.0.0-alpha.99 → 4.0.0

package/components/teaser-native/teaser-native.scss

@@ -0,0 +1,109 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+@use "sass:math";
+
+.ds-teaser.ds-teaser--native {
+  overflow: hidden;
+  border-bottom: 4px solid $ds-color-static-ad-yellow;
+
+  .ds-teaser__inner {
+    @include ds-spacing-layout(
+      $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal 0
+    );
+  }
+
+  .ds-teaser__media,
+  .ds-teaser__content {
+    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
+  }
+
+  .ds-teaser__title {
+    font-family: $ds-font--arial;
+    font-weight: 700;
+    @include ds-mq-only-breakpoint(mobile) {
+      font-size: ds-px-to-rem(20px);
+      line-height: ds-px-to-rem(24px);
+    }
+    @include ds-mq-smallest-breakpoint(tablet) {
+      font-size: ds-px-to-rem(32px);
+      line-height: ds-px-to-rem(36px);
+    }
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  .ds-teaser__content {
+    display: block;
+  }
+
+  &.ds-teaser--native-right,
+  &.ds-teaser--native-large {
+    .ds-teaser__media {
+      @include ds-spacing-layout(0, margin);
+    }
+  }
+
+  &.ds-teaser--native-right {
+    @include ds-mq-smallest-breakpoint(tablet) {
+      .ds-teaser__title {
+        font-size: ds-px-to-rem(24px);
+        line-height: ds-px-to-rem(30px);
+      }
+    }
+  }
+
+  &.ds-teaser--native-standard {
+    .ds-teaser__media {
+      margin-left: ds-spacing-component($ds-sc-x4);
+      float: right;
+
+      @include ds-mq-only-breakpoint(mobile) {
+        min-width: $ds-teaser-standard-image-width-mobile;
+        max-width: $ds-teaser-standard-image-width-mobile;
+
+        .ds-teaser-image__byline {
+          display: none;
+        }
+      }
+
+      @include ds-mq-only-breakpoint(tablet) {
+        min-width: $ds-teaser-standard-image-width-tablet;
+        max-width: $ds-teaser-standard-image-width-tablet;
+      }
+
+      @include ds-mq-only-breakpoint(desktop) {
+        min-width: $ds-teaser-standard-image-width-desktop;
+        max-width: $ds-teaser-standard-image-width-desktop;
+      }
+    }
+  }
+
+  .ds-teaser__ad-bar {
+    background-color: $ds-color-static-ad-yellow;
+    display: flex;
+    height: ds-px-to-rem(40px);
+    @include ds-font-sans();
+    font-size: ds-px-to-rem(16px);
+    line-height: ds-px-to-rem(12px);
+
+    span {
+      display: flex;
+      align-items: center;
+      padding: ds-spacing-component(0 $ds-sc-x4);
+      background-color: $ds-color-static-black;
+      color: $ds-color-static-white;
+    }
+  }
+
+  .ds-teaser__vignette {
+    color: $ds-color-text-primary;
+  }
+
+  .ds-teaser-dot {
+    background-color: $ds-color-text-primary;
+  }
+}

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

@@ -86,7 +86,9 @@
     }
 
     .ds-teaser-package__vignette
-      + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
+      + .ds-teaser--large:not(.ds-teaser--large-italic):not(
+        .ds-teaser--large-big-italic
+      ) {
       .ds-teaser__title {
         @include ds-typography($ds-typography-expressive-heading05bold);
       }

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

@@ -1,6 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
-{% from '@bonniernews/dn-design-system-web/assets/teaser/dot-or-grade.njk' import getDotOrGrade %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserSplit(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -55,8 +56,9 @@
       </h2>
 
       {% if params.text %}
-        <p class="{{ componentClassName + '__text'}}">
-          {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
+        {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
+        <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+          {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
           {% if params.sticker %}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}

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

@@ -1,6 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
-{% from '@bonniernews/dn-design-system-web/assets/teaser/dot-or-grade.njk' import getDotOrGrade %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserStandard(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -41,19 +42,19 @@
       }) }}
     {% endif %}
 
-    {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
-        {{ params.mediaHtml }}
-        {% if params.isLocked %}
-          {{ VipBadge({
-            showText: false,
-            forcePx: true
-          }) }}
-        {% endif %}
-      </div>
-    {% endif %}
-
     <div class="{{ componentClassName + '__content'}}">
+      {% if params.mediaHtml %}
+        <div class="{{ componentClassName + '__media'}}">
+          {{ params.mediaHtml }}
+          {% if params.isLocked %}
+            {{ VipBadge({
+              showText: false,
+              forcePx: true
+            }) }}
+          {% endif %}
+        </div>
+      {% endif %}
+
       {% if params.vignette %}
         <div class="ds-teaser__vignette">{{ params.vignette }}</div>
       {% endif %}
@@ -66,8 +67,9 @@
       </h2>
 
       {% if params.text and params.areaType !== "right" %}
-        <p class="{{ componentClassName + '__text' }}">
-          {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
+        {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
+        <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
+          {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
           {% if params.sticker %}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}

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

@@ -1,15 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
-@use 'sass:math';
-
-$ds-teaser-standard-image-width-mobile: 104px;
-$ds-teaser-standard-image-width-tablet: 156px;
-$ds-teaser-standard-image-width-desktop: 196px;
+@use "sass:math";
 
 .ds-teaser.ds-teaser--standard {
   @include ds-spacing-layout(
     $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal 0
   );
+  overflow: hidden;
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading03bold);
@@ -24,9 +21,10 @@ $ds-teaser-standard-image-width-desktop: 196px;
     @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
   }
 
-  &,
-  .ds-teaser__text {
-    overflow: hidden;
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
   }
 
   .ds-teaser__content {

package/foundations/base.scss

@@ -1,6 +1,6 @@
-@use './colors.scss';
-@use './shadows.scss';
-@use './a11y/a11y.scss';
+@use "./colors.scss";
+@use "./shadows.scss";
+@use "./a11y/a11y.scss";
 
 html {
   box-sizing: border-box;

package/foundations/colors.scss

@@ -1,8 +1,8 @@
-@use 'sass:meta';
-@use 'sass:string';
-@use './variables/colorsDnLightTokens';
-@use './variables/colorsDnDarkTokens';
-@use './helpers/colors.scss' as *;
+@use "sass:meta";
+@use "sass:string";
+@use "./variables/colorsDnLightTokens";
+@use "./variables/colorsDnDarkTokens";
+@use "./helpers/colors.scss" as *;
 
 html,
 .ds-light {
@@ -29,9 +29,26 @@ html,
 
   // these are not static so needs to be defined here also
   --ds-theme-color: #{$ds-color-component-brand};
+
   .ds-theme--nyheter {
     --ds-theme-color: #{$ds-color-component-brand};
   }
+
+  .ds-theme--ekonomi {
+    --ds-theme-color: #{$ds-color-static-economy};
+  }
+
+  .ds-theme--kultur {
+    --ds-theme-color: #{$ds-color-static-kultur};
+  }
+
+  .ds-theme--sport {
+    --ds-theme-color: #{$ds-color-static-sport};
+  }
+
+  .ds-theme--sthlm {
+    --ds-theme-color: #{$ds-color-static-sthlm};
+  }
 }
 
 html {

package/foundations/helpers/colors.scss

@@ -1,3 +1,3 @@
-@forward '../variables/colorsCssVariables.scss';
+@forward "../variables/colorsCssVariables.scss";
 
 $ds-theme-color: var(--ds-theme-color);

package/foundations/helpers/forward.helpers.scss

@@ -1,6 +1,5 @@
 @forward "colors.scss";
 @forward "hover.scss";
-// excluding fontDefinitionsHelper since it is rarely used
 @forward "links.scss";
 @forward "loading.scss";
 @forward "mediaQueries.scss";

package/foundations/helpers/opacity.scss

@@ -1 +1 @@
-@forward '../variables/opacity.scss';
+@forward "../variables/opacity.scss";

package/foundations/helpers/shadows.scss

@@ -1,10 +1,10 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use 'sass:string';
+@use "sass:meta";
+@use "sass:map";
+@use "sass:string";
 @use "utilities.scss" as *;
-@use '../variables/shadowsDnLightTokens.scss' as *;
-@use '../variables/shadowsDnDarkTokens.scss' as *;
-@forward '../variables/shadowsTokensList.scss';
+@use "../variables/shadowsDnLightTokens.scss" as *;
+@use "../variables/shadowsDnDarkTokens.scss" as *;
+@forward "../variables/shadowsTokensList.scss";
 
 @mixin ds-shadow($component, $theme: light) {
   $tmpMap: map.get($shadowsDnLightTokens, $component);

package/foundations/helpers/spacing.scss

@@ -5,8 +5,8 @@
 @use "../variables/spacingComponent.scss" as *;
 @use "../variables/spacingLayout.scss" as *;
 @use "../variables/spacingLayoutLargeScreen.scss" as *;
-@forward '../variables/spacingComponentList.scss';
-@forward '../variables/spacingLayoutList.scss';
+@forward "../variables/spacingComponentList.scss";
+@forward "../variables/spacingLayoutList.scss";
 
 @function ds-spacing-component(
   $units: null,

package/foundations/helpers/typography.scss

@@ -1,15 +1,17 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:list';
+@use "sass:meta";
+@use "sass:map";
+@use "sass:string";
+@use "sass:math";
+@use "sass:list";
 @use "mediaQueries.scss" as *;
 @use "utilities.scss" as *;
-@use '../variables/typographyTokensScreenSmall.scss' as *;
-@use '../variables/typographyTokensScreenLarge.scss' as *;
-@use '../variables/typographyTokensScreenExtraLarge.scss' as *;
-@forward '../variables/typographyTokensList.scss';
-@forward '../variables/decorations.scss';
+@use "../variables/typographyTokensScreenSmall.scss" as *;
+@use "../variables/typographyTokensScreenLarge.scss" as *;
+@use "../variables/typographyTokensScreenExtraLarge.scss" as *;
+@forward "../variables/typographyTokensList.scss";
+@forward "../variables/decorations.scss";
+
+$ds-font--arial: Arial, Helvetica, sans-serif;
 
 @mixin ds-font-sans() {
   & {

package/foundations/helpers/utilities.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 @function ds-px-to-rem($value) {
   @return math.div(ds-strip-unit($value), 16) * 1rem;

package/foundations/icons/icon.njk

@@ -25,6 +25,11 @@
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.4001 17.65L5.3501 16.6L15.2001 6.75H6.2501V5.25H17.7501V16.75H16.2501V7.8L6.4001 17.65Z"/></svg>
     </i>
   {% endif %}
+  {%- if iconName == "arrow_upward" %}
+    <i class="ds-icon ds-icon--arrow_upward {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.2501 19.6153V7.25765L5.43859 13.0692L4.38477 12L12.0001 4.38465L19.6155 12L18.5616 13.0692L12.7501 7.25765V19.6153H11.2501Z"/></svg>
+    </i>
+  {% endif %}
   {%- if iconName == "bookmark-filled" %}
     <i class="ds-icon ds-icon--bookmark-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 20.25V3.5H18.5V20.25L12 17.45L5.5 20.25Z"/></svg>
@@ -150,6 +155,11 @@
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.45 19.55V6.55H9.44995V4.45H21.5499V6.55H16.55V19.55H14.45ZM5.44995 19.55V11.55H2.44995V9.45H10.55V11.55H7.54995V19.55H5.44995Z"/></svg>
     </i>
   {% endif %}
+  {%- if iconName == "forward_30" %}
+    <i class="ds-icon ds-icon--forward_30 {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5192 15.8461V14.6538H10.2115V13.4423H8.42305V12.5577H10.2115V11.3461H7.5192V10.1538H10.5577C10.8025 10.1538 11.0048 10.2336 11.1644 10.3933C11.324 10.5529 11.4038 10.7551 11.4038 11V15C11.4038 15.2449 11.324 15.4471 11.1644 15.6067C11.0048 15.7663 10.8025 15.8461 10.5577 15.8461H7.5192ZM13.5961 15.8461C13.3128 15.8461 13.0753 15.7503 12.8836 15.5586C12.692 15.367 12.5961 15.1295 12.5961 14.8461V11.1538C12.5961 10.8705 12.692 10.633 12.8836 10.4413C13.0753 10.2497 13.3128 10.1538 13.5961 10.1538H15.4808C15.7641 10.1538 16.0016 10.2497 16.1933 10.4413C16.3849 10.633 16.4808 10.8705 16.4808 11.1538V14.8461C16.4808 15.1295 16.3849 15.367 16.1933 15.5586C16.0016 15.7503 15.7641 15.8461 15.4808 15.8461H13.5961ZM13.9038 14.6538H15.1731C15.2115 14.6538 15.2404 14.6442 15.2596 14.625C15.2788 14.6058 15.2885 14.5769 15.2885 14.5385V11.4615C15.2885 11.4231 15.2788 11.3942 15.2596 11.375C15.2404 11.3558 15.2115 11.3461 15.1731 11.3461H13.9038C13.8654 11.3461 13.8365 11.3558 13.8173 11.375C13.798 11.3942 13.7884 11.4231 13.7884 11.4615V14.5385C13.7884 14.5769 13.798 14.6058 13.8173 14.625C13.8365 14.6442 13.8654 14.6538 13.9038 14.6538ZM12 21.5C10.8205 21.5 9.71537 21.2769 8.6846 20.8307C7.65383 20.3846 6.75512 19.7782 5.98845 19.0115C5.2218 18.2448 4.6154 17.3461 4.16925 16.3154C3.72308 15.2846 3.5 14.1795 3.5 13C3.5 11.8205 3.72308 10.7154 4.16925 9.68461C4.6154 8.65385 5.2218 7.75513 5.98845 6.98846C6.75512 6.22181 7.65383 5.61541 8.6846 5.16926C9.71537 4.7231 10.8205 4.50001 12 4.50001H12.2654L10.6577 2.89234L11.7115 1.80774L15.1538 5.24039L11.7307 8.67304L10.6769 7.58846L12.2654 5.99999H12C10.05 5.99999 8.39581 6.67916 7.03748 8.03749C5.67914 9.39582 4.99997 11.05 4.99997 13C4.99997 14.95 5.67914 16.6042 7.03748 17.9625C8.39581 19.3208 10.05 20 12 20C13.95 20 15.6041 19.3208 16.9625 17.9625C18.3208 16.6042 19 14.95 19 13H20.5C20.5 14.1795 20.2769 15.2846 19.8307 16.3154C19.3846 17.3461 18.7782 18.2448 18.0115 19.0115C17.2448 19.7782 16.3461 20.3846 15.3154 20.8307C14.2846 21.2769 13.1795 21.5 12 21.5Z"/></svg>
+    </i>
+  {% endif %}
   {%- if iconName == "grid_view" %}
     <i class="ds-icon ds-icon--grid_view {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 11V3.5H11V11H3.5ZM3.5 20.5V13H11V20.5H3.5ZM13 11V3.5H20.5V11H13ZM13 20.5V13H20.5V20.5H13ZM5 9.5H9.5V5H5V9.5ZM14.5 9.5H19V5H14.5V9.5ZM14.5 19H19V14.5H14.5V19ZM5 19H9.5V14.5H5V19Z"/></svg>
@@ -205,6 +215,11 @@
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 14.9V3.875L9.4 5.725L8.35 4.65L12 1L15.65 4.65L14.6 5.725L12.75 3.875V14.9H11.25ZM4.5 21.65V7.65H8.875V9.15H6V20.15H18V9.15H15.125V7.65H19.5V21.65H4.5Z"/></svg>
     </i>
   {% endif %}
+  {%- if iconName == "link" %}
+    <i class="ds-icon ds-icon--link {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9677 16.6448H7.16003C5.9044 16.6448 4.83408 16.2023 3.94908 15.3174C3.06408 14.4325 2.62158 13.3624 2.62158 12.1069C2.62158 10.8514 3.06408 9.78103 3.94908 8.89578C4.83408 8.01053 5.9044 7.5679 7.16003 7.5679H10.9677V9.06785H7.16003C6.32028 9.06785 5.60393 9.36433 5.01098 9.95728C4.41803 10.5502 4.12156 11.2666 4.12156 12.1063C4.12156 12.9461 4.41803 13.6624 5.01098 14.2554C5.60393 14.8483 6.32028 15.1448 7.16003 15.1448H10.9677V16.6448ZM8.41006 12.8563V11.3564H15.91V12.8563H8.41006ZM13.3524 16.6448V15.1448H17.16C17.9998 15.1448 18.7161 14.8483 19.3091 14.2554C19.902 13.6624 20.1985 12.9461 20.1985 12.1063C20.1985 11.2666 19.902 10.5502 19.3091 9.95728C18.7161 9.36433 17.9998 9.06785 17.16 9.06785H13.3524V7.5679H17.16C18.4157 7.5679 19.486 8.01034 20.371 8.89523C21.256 9.78011 21.6985 10.8503 21.6985 12.1058C21.6985 13.3613 21.256 14.4316 20.371 15.3169C19.486 16.2021 18.4157 16.6448 17.16 16.6448H13.3524Z"/></svg>
+    </i>
+  {% endif %}
   {%- if iconName == "lock" %}
     <i class="ds-icon ds-icon--lock {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.73999 21.33V8.33H7.73999V6.33C7.73999 5.08 8.17732 4.01733 9.05199 3.142C9.92732 2.26733 10.99 1.83 12.24 1.83C13.49 1.83 14.5527 2.26733 15.428 3.142C16.3027 4.01733 16.74 5.08 16.74 6.33V8.33H19.74V21.33H4.73999ZM9.23999 8.33H15.24V6.33C15.24 5.49667 14.9483 4.78833 14.365 4.205C13.7817 3.62167 13.0733 3.33 12.24 3.33C11.4067 3.33 10.6983 3.62167 10.115 4.205C9.53166 4.78833 9.23999 5.49667 9.23999 6.33V8.33ZM6.23999 19.83H18.24V9.83H6.23999V19.83ZM12.24 16.58C12.7233 16.58 13.136 16.4093 13.478 16.068C13.8193 15.726 13.99 15.3133 13.99 14.83C13.99 14.3467 13.8193 13.934 13.478 13.592C13.136 13.2507 12.7233 13.08 12.24 13.08C11.7567 13.08 11.344 13.2507 11.002 13.592C10.6607 13.934 10.49 14.3467 10.49 14.83C10.49 15.3133 10.6607 15.726 11.002 16.068C11.344 16.4093 11.7567 16.58 12.24 16.58Z"/></svg>
@@ -315,6 +330,16 @@
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.25903 17.0931V19.2931H20.259V17.0931H4.25903ZM2.75903 20.7931V6.81813H7.33403C7.2507 6.66813 7.18837 6.50979 7.14703 6.34313C7.10503 6.17646 7.08403 6.00146 7.08403 5.81813C7.08403 5.11813 7.3257 4.52646 7.80903 4.04313C8.29237 3.55979 8.88403 3.31813 9.58403 3.31813C10.0007 3.31813 10.3884 3.42646 10.747 3.64313C11.105 3.85979 11.4174 4.12646 11.684 4.44313L12.234 5.19313L12.809 4.44313C13.059 4.10979 13.3634 3.83879 13.722 3.63013C14.08 3.42213 14.4674 3.31813 14.884 3.31813C15.584 3.31813 16.1757 3.55979 16.659 4.04313C17.1424 4.52646 17.384 5.11813 17.384 5.81813C17.384 6.00146 17.3674 6.17646 17.334 6.34313C17.3007 6.50979 17.234 6.66813 17.134 6.81813H21.759V20.7931H2.75903ZM4.25903 14.4931H20.259V8.31813H14.484L16.534 11.0931L15.334 11.9681L12.234 7.76813L9.15903 11.9681L7.95903 11.0931L9.95903 8.31813H4.25903V14.4931ZM9.58403 6.81813C9.86737 6.81813 10.105 6.72213 10.297 6.53013C10.4884 6.33879 10.584 6.10146 10.584 5.81813C10.584 5.53479 10.4884 5.29713 10.297 5.10513C10.105 4.91379 9.86737 4.81813 9.58403 4.81813C9.3007 4.81813 9.06337 4.91379 8.87203 5.10513C8.68003 5.29713 8.58403 5.53479 8.58403 5.81813C8.58403 6.10146 8.68003 6.33879 8.87203 6.53013C9.06337 6.72213 9.3007 6.81813 9.58403 6.81813ZM14.884 6.81813C15.1674 6.81813 15.405 6.72213 15.597 6.53013C15.7884 6.33879 15.884 6.10146 15.884 5.81813C15.884 5.53479 15.7884 5.29713 15.597 5.10513C15.405 4.91379 15.1674 4.81813 14.884 4.81813C14.6007 4.81813 14.3634 4.91379 14.172 5.10513C13.98 5.29713 13.884 5.53479 13.884 5.81813C13.884 6.10146 13.98 6.33879 14.172 6.53013C14.3634 6.72213 14.6007 6.81813 14.884 6.81813Z"/></svg>
     </i>
   {% endif %}
+  {%- if iconName == "refresh" %}
+    <i class="ds-icon ds-icon--refresh {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0385 19.5C9.9448 19.5 8.17137 18.7736 6.71825 17.3207C5.26513 15.8679 4.53857 14.0948 4.53857 12.0015C4.53857 9.90821 5.26513 8.13463 6.71825 6.6808C8.17137 5.22695 9.9448 4.50002 12.0385 4.50002C13.2078 4.50002 14.3142 4.75996 15.3578 5.27985C16.4014 5.79971 17.2693 6.53337 17.9616 7.48082V4.50002H19.4616V10.6153H13.3462V9.1154H17.2962C16.7693 8.15002 16.0385 7.38943 15.1039 6.83365C14.1693 6.27788 13.1475 6 12.0385 6C10.3719 6 8.95522 6.58333 7.78855 7.75C6.62188 8.91667 6.03855 10.3333 6.03855 12C6.03855 13.6667 6.62188 15.0833 7.78855 16.25C8.95522 17.4167 10.3719 18 12.0385 18C13.3219 18 14.4802 17.6333 15.5135 16.9C16.5469 16.1667 17.2719 15.2 17.6885 14H19.2693C18.8154 15.632 17.9215 16.9567 16.5876 17.974C15.2536 18.9913 13.7372 19.5 12.0385 19.5Z"/></svg>
+    </i>
+  {% endif %}
+  {%- if iconName == "replay_30" %}
+    <i class="ds-icon ds-icon--replay_30 {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.75C10.8205 21.75 9.71537 21.5269 8.6846 21.0807C7.65383 20.6346 6.75512 20.0282 5.98845 19.2615C5.2218 18.4948 4.6154 17.5961 4.16925 16.5654C3.72308 15.5346 3.5 14.4295 3.5 13.25H4.99997C4.99997 15.2 5.67914 16.8542 7.03748 18.2125C8.39581 19.5708 10.05 20.25 12 20.25C13.95 20.25 15.6041 19.5708 16.9625 18.2125C18.3208 16.8542 19 15.2 19 13.25C19 11.3 18.3208 9.64582 16.9625 8.28749C15.6041 6.92916 13.95 6.24999 12 6.24999H11.7346L13.3231 7.83846L12.2692 8.92304L8.8462 5.49039L12.2885 2.05774L13.3423 3.14234L11.7346 4.75001H12C13.1795 4.75001 14.2846 4.9731 15.3154 5.41926C16.3461 5.86541 17.2448 6.47181 18.0115 7.23846C18.7782 8.00513 19.3846 8.90385 19.8307 9.93461C20.2769 10.9654 20.5 12.0705 20.5 13.25C20.5 14.4295 20.2769 15.5346 19.8307 16.5654C19.3846 17.5961 18.7782 18.4948 18.0115 19.2615C17.2448 20.0282 16.3461 20.6346 15.3154 21.0807C14.2846 21.5269 13.1795 21.75 12 21.75ZM7.5192 16.0961V14.9038H10.2115V13.6923H8.42305V12.8077H10.2115V11.5961H7.5192V10.4038H10.5577C10.8025 10.4038 11.0048 10.4836 11.1644 10.6433C11.324 10.8029 11.4038 11.0051 11.4038 11.25V15.25C11.4038 15.4949 11.324 15.6971 11.1644 15.8567C11.0048 16.0163 10.8025 16.0961 10.5577 16.0961H7.5192ZM13.5961 16.0961C13.3128 16.0961 13.0753 16.0003 12.8836 15.8086C12.692 15.617 12.5961 15.3795 12.5961 15.0961V11.4038C12.5961 11.1205 12.692 10.883 12.8836 10.6913C13.0753 10.4997 13.3128 10.4038 13.5961 10.4038H15.4808C15.7641 10.4038 16.0016 10.4997 16.1933 10.6913C16.3849 10.883 16.4808 11.1205 16.4808 11.4038V15.0961C16.4808 15.3795 16.3849 15.617 16.1933 15.8086C16.0016 16.0003 15.7641 16.0961 15.4808 16.0961H13.5961ZM13.9038 14.9038H15.1731C15.2115 14.9038 15.2404 14.8942 15.2596 14.875C15.2788 14.8558 15.2885 14.8269 15.2885 14.7885V11.7115C15.2885 11.6731 15.2788 11.6442 15.2596 11.625C15.2404 11.6058 15.2115 11.5961 15.1731 11.5961H13.9038C13.8654 11.5961 13.8365 11.6058 13.8173 11.625C13.798 11.6442 13.7884 11.6731 13.7884 11.7115V14.7885C13.7884 14.8269 13.798 14.8558 13.8173 14.875C13.8365 14.8942 13.8654 14.9038 13.9038 14.9038Z"/></svg>
+    </i>
+  {% endif %}
   {%- if iconName == "search_off" %}
     <i class="ds-icon ds-icon--search_off {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 21.3C5.75 21.3 4.68733 20.8627 3.812 19.988C2.93733 19.1127 2.5 18.05 2.5 16.8C2.5 15.55 2.93733 14.4873 3.812 13.612C4.68733 12.7373 5.75 12.3 7 12.3C8.25 12.3 9.31267 12.7373 10.188 13.612C11.0627 14.4873 11.5 15.55 11.5 16.8C11.5 18.05 11.0627 19.1127 10.188 19.988C9.31267 20.8627 8.25 21.3 7 21.3ZM20.525 20.575L14.175 14.225C14.0917 14.3083 13.9877 14.3833 13.863 14.45C13.7377 14.5167 13.6167 14.575 13.5 14.625C13.3667 14.4417 13.225 14.2583 13.075 14.075C12.925 13.8917 12.7667 13.725 12.6 13.575C13.35 13.2083 13.9583 12.6667 14.425 11.95C14.8917 11.2333 15.125 10.4167 15.125 9.5C15.125 8.21667 14.675 7.125 13.775 6.225C12.875 5.325 11.7833 4.875 10.5 4.875C9.21667 4.875 8.125 5.325 7.225 6.225C6.325 7.125 5.875 8.21667 5.875 9.5C5.875 9.65 5.88733 9.8 5.912 9.95C5.93733 10.1 5.96667 10.25 6 10.4C5.76667 10.4167 5.51667 10.4623 5.25 10.537C4.98333 10.6123 4.74167 10.7 4.525 10.8C4.49167 10.6 4.45833 10.3917 4.425 10.175C4.39167 9.95833 4.375 9.73333 4.375 9.5C4.375 7.8 4.97067 6.354 6.162 5.162C7.354 3.97067 8.8 3.375 10.5 3.375C12.2 3.375 13.646 3.97067 14.838 5.162C16.0293 6.354 16.625 7.8 16.625 9.5C16.625 10.2167 16.504 10.8957 16.262 11.537C16.0207 12.179 15.7 12.75 15.3 13.25L21.575 19.525L20.525 20.575ZM5.225 19.2L7 17.425L8.75 19.2L9.4 18.575L7.625 16.8L9.4 15.05L8.775 14.425L7 16.175L5.225 14.425L4.6 15.05L6.375 16.8L4.6 18.575L5.225 19.2Z"/></svg>