@bonniernews/dn-design-system-web 11.1.0 → 11.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/teaser/teaser.scss +23 -3
  3. package/components/button-toggle/button-toggle.scss +1 -0
  4. package/components/byline/README.md +1 -0
  5. package/components/byline/byline.njk +1 -0
  6. package/components/byline/byline.scss +15 -17
  7. package/components/factbox/factbox.njk +2 -2
  8. package/components/factbox/factbox.scss +0 -5
  9. package/components/teaser-large/teaser-large.njk +4 -7
  10. package/components/teaser-split/teaser-split.njk +4 -7
  11. package/components/teaser-standard/teaser-standard.njk +5 -7
  12. package/foundations/icons/grade-icon.njk +60 -0
  13. package/package.json +1 -1
  14. package/components/grade/README.md +0 -28
  15. package/components/grade/grade.njk +0 -111
  16. package/components/grade/grade.scss +0 -20
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [11.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.1.1...@bonniernews/dn-design-system-web@11.1.2) (2024-02-05)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **web:** revert new grade design temporarily ([#1186](https://github.com/BonnierNews/dn-design-system/issues/1186)) ([b7cd238](https://github.com/BonnierNews/dn-design-system/commit/b7cd2382e447c980cc8c87103db348516e266c62))
13
+
14
+ ## [11.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.1.0...@bonniernews/dn-design-system-web@11.1.1) (2024-02-02)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** correct height on byline toggle ([#1184](https://github.com/BonnierNews/dn-design-system/issues/1184)) ([2464ece](https://github.com/BonnierNews/dn-design-system/commit/2464ece0c6c0bacbf6f3a0b90787372bfd61c079))
20
+
7
21
  ## [11.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.4...@bonniernews/dn-design-system-web@11.1.0) (2024-02-01)
8
22
 
9
23
 
package/assets/teaser/teaser.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use "../../foundations/helpers/forward.helpers.scss" as *;
2
2
  @use "../../components/icon-sprite/icon-sprite.scss";
3
3
  @use "../../components/vip-badge/vip-badge.scss";
4
- @use "../../components/grade/grade.scss";
5
4
  @use "../../components/teaser-image/teaser-image.scss";
6
5
  @use "../../components/teaser-dot/teaser-dot.scss";
7
6
 
@@ -10,6 +9,8 @@ $ds-teaser-standard-image-width-mobile: 104px;
10
9
  $ds-teaser-standard-image-width-tablet: 156px;
11
10
  $ds-teaser-standard-image-width-desktop: 196px;
12
11
 
12
+ $grade-size: ds-px-to-rem(34px);
13
+
13
14
  @mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
14
15
  @include ds-focus($offset, $includeSelector);
15
16
  }
@@ -61,6 +62,10 @@ $ds-teaser-standard-image-width-desktop: 196px;
61
62
  @include ds-mq-smallest-breakpoint(tablet) {
62
63
  margin-top: ds-spacing($ds-s-075);
63
64
  }
65
+
66
+ &.ds-teaser__text--with-grade {
67
+ min-height: calc($grade-size + ds-spacing($ds-s-025, "rem"));
68
+ }
64
69
  }
65
70
 
66
71
  .ds-teaser__publication-time {
@@ -74,8 +79,23 @@ $ds-teaser-standard-image-width-desktop: 196px;
74
79
  margin-top: ds-spacing($ds-s-075);
75
80
  }
76
81
 
77
- .ds-grade-scale {
78
- margin-top: ds-spacing($ds-s-075);
82
+ .ds-icon.ds-icon--grade {
83
+ color: $ds-color-icon-primary;
84
+ border-radius: 50%;
85
+ float: left;
86
+ font-size: 0;
87
+ line-height: 0;
88
+ margin: ds-spacing($ds-s-025 $ds-s-050 0 0, "rem");
89
+ height: $grade-size;
90
+ width: $grade-size;
91
+
92
+ svg {
93
+ width: 100%;
94
+ height: 100%;
95
+ circle {
96
+ stroke: currentColor;
97
+ }
98
+ }
79
99
  }
80
100
 
81
101
  .ds-teaser__sticker {
package/components/button-toggle/button-toggle.scss CHANGED
@@ -55,6 +55,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
55
55
  display: inline-flex;
56
56
  align-items: center;
57
57
  justify-content: center;
58
+ flex-shrink: 0;
58
59
  border: $ds-btn-toggle-outlined__border-width solid var(--ds-btn-toggle__border-color);
59
60
  border-radius: 100px;
60
61
  position: relative;
package/components/byline/README.md CHANGED
@@ -21,6 +21,7 @@ The byline is a list item and should be wrapped in a list.
21
21
  |email | String | no | | | email will be displayed instead of role for variant:follow |
22
22
  |authorPageUrl | String | no | | | For variant:button an inner link can be used in combination with a button, for other variants an outer link is used |
23
23
  |followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant:follow. |
24
+ |followed | Boolean | no | true, false | false | If true the toggle button will be in "selected" state. Depends on followable parameter. |
24
25
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
25
26
  |elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |
26
27
  |classNames | String | no | | | Ex. "my-special-class" |
package/components/byline/byline.njk CHANGED
@@ -27,6 +27,7 @@
27
27
  {{ ButtonToggle({
28
28
  text: "Följ",
29
29
  selectedText: "Följer",
30
+ selected: params.followed,
30
31
  variant: "secondaryFilled",
31
32
  size: "xsmall",
32
33
  attributes: params.elementAttributes,
package/components/byline/byline.scss CHANGED
@@ -52,21 +52,6 @@ $ds-byline__image-size--direkt: 36px;
52
52
  bottom: 0;
53
53
  right: 0;
54
54
  }
55
-
56
- .ds-icon {
57
- position: relative;
58
- display: flex;
59
- height: ds-px-to-rem($ds-byline__icon-size);
60
- width: ds-px-to-rem($ds-byline__icon-size);
61
- margin: 0;
62
- @at-root .ds-force-px#{&} {
63
- height: $ds-byline__icon-size;
64
- width: $ds-byline__icon-size;
65
- }
66
- svg {
67
- fill: currentColor;
68
- }
69
- }
70
55
  }
71
56
 
72
57
  .ds-byline__content-wrapper {
@@ -122,11 +107,24 @@ $ds-byline__image-size--direkt: 36px;
122
107
  color: $ds-color-icon-primary;
123
108
  display: inline-flex;
124
109
  margin-left: ds-spacing($ds-s-100);
110
+
111
+ .ds-icon {
112
+ position: relative;
113
+ display: flex;
114
+ height: ds-px-to-rem($ds-byline__icon-size);
115
+ width: ds-px-to-rem($ds-byline__icon-size);
116
+ margin: 0;
117
+ @at-root .ds-force-px#{&} {
118
+ height: $ds-byline__icon-size;
119
+ width: $ds-byline__icon-size;
120
+ }
121
+ svg {
122
+ fill: currentColor;
123
+ }
124
+ }
125
125
  }
126
126
 
127
127
  .ds-byline__btn-toggle {
128
- min-height: $ds-byline__icon-size;
129
- min-width: 48px;
130
128
  margin-left: ds-spacing($ds-s-100);
131
129
  }
132
130
 
package/components/factbox/factbox.njk CHANGED
@@ -1,6 +1,6 @@
1
+ {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
1
2
  {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
2
3
  {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
3
- {% from '@bonniernews/dn-design-system-web/components/grade/grade.njk' import Grade %}
4
4
 
5
5
  {% macro Factbox(params) %}
6
6
  {% set componentClassName = "ds-factbox" %}
@@ -23,7 +23,7 @@
23
23
  {%- if params.vignetteHtml %}<span class="{{ componentClassName + '__vignette'}}">{{ params.vignetteHtml | safe }}</span>{%- endif %}
24
24
  {{- params.titleHtml | safe -}}
25
25
  </h2>
26
- {{ Grade({ grade: grade }) if grade }}
26
+ {{ GetGrade({ grade: grade, type: "scale" }) if grade }}
27
27
  <div class="{{ componentClassName + '__body'}}">{{ params.bodyHtml | safe }}</div>
28
28
  </div>
29
29
  <div class="{{ componentClassName + '__show-more'}}">
package/components/factbox/factbox.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use "../../foundations/helpers/forward.helpers.scss" as *;
2
2
  @use "../button/button.scss" as *;
3
- @use "../../components/grade/grade.scss";
4
3
 
5
4
  $ds-factbox__grade-size: 40px;
6
5
  $ds-factbox__show-more-fade-height: 48px;
@@ -28,10 +27,6 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
28
27
  @at-root .ds-force-px#{&} {
29
28
  max-height: $ds-factbox__max-height;
30
29
  }
31
-
32
- .ds-grade-scale {
33
- margin-bottom: ds-spacing($ds-s-075);
34
- }
35
30
  }
36
31
 
37
32
  &--expanded .ds-factbox__inner,
package/components/teaser-large/teaser-large.njk CHANGED
@@ -1,7 +1,7 @@
1
1
  {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
- {% from '@bonniernews/dn-design-system-web/components/grade/grade.njk' import Grade %}
4
+ {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
5
5
 
6
6
  {% macro TeaserLarge(params) %}
7
7
  {% set componentClassName = "ds-teaser" %}
@@ -57,8 +57,9 @@
57
57
  </h2>
58
58
 
59
59
  {% if params.text and params.areaType !== "right" %}
60
- <p class="{{ componentClassName + '__text' }}">
61
- {{ TeaserDot({ flashing: params.isFlashingDot }) }}
60
+ {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
61
+ <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
62
+ {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
62
63
  {% if params.sticker %}
63
64
  <span class="ds-teaser__sticker">
64
65
  {{ params.sticker }}
@@ -66,10 +67,6 @@
66
67
  {% endif %}
67
68
  {{ params.text }}
68
69
  </p>
69
-
70
- {{ Grade({
71
- grade: params.grade
72
- }) }}
73
70
  {% endif %}
74
71
  {% if params.publicationTime %}
75
72
  <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
package/components/teaser-split/teaser-split.njk CHANGED
@@ -2,7 +2,7 @@
2
2
  {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
3
3
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
4
4
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
5
- {% from '@bonniernews/dn-design-system-web/components/grade/grade.njk' import Grade %}
5
+ {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
6
6
 
7
7
  {% macro TeaserSplit(params) %}
8
8
  {% set componentClassName = "ds-teaser" %}
@@ -45,8 +45,9 @@
45
45
  </h2>
46
46
 
47
47
  {% if params.text %}
48
- <p class="{{ componentClassName + '__text' }}">
49
- {{ TeaserDot({ flashing: params.isFlashingDot }) }}
48
+ {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
49
+ <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
50
+ {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
50
51
  {% if params.sticker %}
51
52
  <span class="ds-teaser__sticker">
52
53
  {{ params.sticker }}
@@ -54,10 +55,6 @@
54
55
  {% endif %}
55
56
  {{ params.text }}
56
57
  </p>
57
-
58
- {{
59
- Grade({ grade: params.grade })
60
- }}
61
58
  {% endif %}
62
59
  </div>
63
60
  {% endcall %}
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -1,7 +1,7 @@
1
1
  {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
- {% from '@bonniernews/dn-design-system-web/components/grade/grade.njk' import Grade %}
4
+ {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
5
5
 
6
6
  {% macro TeaserStandard(params) %}
7
7
  {% set componentClassName = "ds-teaser" %}
@@ -54,8 +54,10 @@
54
54
  </h2>
55
55
 
56
56
  {% if params.text and params.areaType !== "right" %}
57
- <p class="{{ componentClassName + '__text' }}">
58
- {{ TeaserDot({ flashing: params.isFlashingDot }) }}
57
+ {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
58
+ <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
59
+ {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
60
+
59
61
  {% if params.sticker %}
60
62
  <span class="ds-teaser__sticker">
61
63
  {{ params.sticker }}
@@ -63,10 +65,6 @@
63
65
  {% endif %}
64
66
  {{ params.text }}
65
67
  </p>
66
-
67
- {{
68
- Grade({ grade: params.grade })
69
- }}
70
68
  {% endif %}
71
69
  {% if params.publicationTime %}
72
70
  <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
package/foundations/icons/grade-icon.njk ADDED
@@ -0,0 +1,60 @@
1
+ {% from '@bonniernews/dn-design-system-web/foundations/a11y/informative-svg.njk' import getSvgAttributes, getInformativeElements %}
2
+
3
+ {% macro GradeIconScale(params) %}
4
+ {%- set iconName = params.icon | lower %}
5
+ {%- set svgAccessibilityAttributes = getSvgAttributes({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
6
+ {%- set svgAccessibilityElements = getInformativeElements({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
7
+ <i class="ds-icon ds-icon--grade ds-icon--grade-{{ iconName }}">
8
+ {%- if iconName == "zero" %}
9
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 194 44">{{- svgAccessibilityElements -}}<path d="M20.52 12C15.816 12 13 15.891 13 21.985 13 28.078 15.816 32 20.52 32c4.703 0 7.55-3.922 7.55-10.015 0-6.094-2.847-9.985-7.55-9.985Zm0 19.366c-.93 0-1.409-.603-1.409-1.78V14.414c0-1.176.48-1.75 1.409-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM31.633 32C32.952 32 34 31.035 34 29.255c0-1.75-1.048-2.745-2.367-2.745-1.318 0-2.366.995-2.366 2.745 0 1.78 1.048 2.745 2.366 2.745Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M59.04 12C57.35 15.318 54 14.655 54 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.908v-.392h-1.26c-.487 0-.888-.21-.888-1.99V12h-3.15ZM67.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M95.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C87.143 26.269 82 31.035 82 31.035v.694h14.167v-7.994h-.353ZM99.678 32c1.293 0 2.322-.965 2.322-2.745 0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M122.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM129.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M156.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L144 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM161.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M182.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM191.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
10
+ {%- elif iconName == "one" %}
11
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 197 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><circle cx="53" cy="22" r="21" fill="none" stroke-width="2"/><path d="M52.04 12C50.35 15.318 47 14.655 47 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM60.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/><g opacity=".5"><path d="M98.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C90.143 26.269 85 31.035 85 31.035v.694h14.167v-7.994h-.353ZM102.678 32c1.293 0 2.322-.965 2.322-2.745 0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M125.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM132.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M159.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L147 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM164.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M185.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM194.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
12
+ {%- elif iconName == "two" %}
13
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 193 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><circle cx="81" cy="22" r="21" fill="none" stroke-width="2"/><path d="M85.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C77.143 26.269 72 31.035 72 31.035v.694h14.167v-7.994h-.353ZM89.678 32C90.971 32 92 31.035 92 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/><g opacity=".5"><path d="M121.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM128.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M155.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L143 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM160.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M181.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM190.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
14
+ {%- elif iconName == "three" %}
15
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 195 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><path d="M113.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801h-1.769v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258 0 2.292 1.74 4.766 5.809 4.766 5.248 0 7.409-3.047 7.409-6.093 0-2.354-1.179-4.525-4.322-5.4ZM120.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/><circle cx="113" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M157.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L145 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM162.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><g opacity=".5"><path d="M183.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM192.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
16
+ {%- elif iconName == "four" %}
17
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 193 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M101.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801H97.18v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258C93 29.526 94.74 32 98.81 32c5.247 0 7.408-3.047 7.408-6.093 0-2.354-1.179-4.525-4.322-5.4ZM108.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><path d="M146.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L134 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM151.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/><circle cx="143" cy="22" r="21" fill="none" stroke-width="2"/><g opacity=".5"><path d="M181.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM190.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/></g></svg>
18
+ {%- elif iconName == "five" %}
19
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 197 44">{{- svgAccessibilityElements -}}<g opacity=".5"><path d="M7.52 12C2.816 12 0 15.891 0 21.985 0 28.078 2.816 32 7.52 32c4.703 0 7.55-3.922 7.55-10.015C15.07 15.89 12.222 12 7.52 12Zm0 19.366c-.93 0-1.408-.603-1.408-1.78V14.414c0-1.176.479-1.75 1.408-1.75.958 0 1.438.574 1.438 1.75v15.174c0 1.176-.48 1.78-1.438 1.78ZM18.633 32C19.952 32 21 31.035 21 29.255c0-1.75-1.049-2.745-2.367-2.745s-2.366.995-2.366 2.745c0 1.78 1.048 2.745 2.366 2.745Z"/></g><g opacity=".5"><path d="M38.04 12C36.35 15.318 33 14.655 33 14.655v.512s1.69.151 2.577-.271v14.087c0 1.78-.43 1.991-.887 1.991h-1.26v.392h9.907v-.392h-1.26c-.486 0-.887-.21-.887-1.99V12h-3.15ZM46.738 32c1.26 0 2.262-.965 2.262-2.745 0-1.75-1.002-2.745-2.262-2.745s-2.262.995-2.262 2.745c0 1.78 1.002 2.745 2.262 2.745Z"/></g><g opacity=".5"><path d="M74.814 23.735c0 2.111-1.264 2.654-1.793 2.654h-6.348c2.704-1.327 8.465-4.464 8.465-8.507 0-3.046-2.264-5.882-7.76-5.882-3.527 0-5.76 2.474-5.76 4.766 0 2.233 1.498 3.258 2.997 3.258 2.851 0 2.91-2.685 2.91-2.835 0-.634-.44-2.625-2.998-2.625 0 0 .059-1.87 2.851-1.87.911 0 1.763.603 1.763 1.78v5.37c0 2.08-.793 3.197-1.028 3.559C66.143 26.269 61 31.035 61 31.035v.694h14.167v-7.994h-.353ZM78.678 32C79.971 32 81 31.035 81 29.255c0-1.75-1.029-2.745-2.322-2.745-1.293 0-2.322.995-2.322 2.745 0 1.78 1.029 2.745 2.322 2.745Z"/></g><g opacity=".5"><path d="M101.896 20.507c1.516-.392 3.368-1.358 3.368-3.801 0-3.952-3.901-4.706-6.427-4.706-3.62.06-5.304 2.262-5.304 4.314 0 1.99 1.291 2.896 2.582 2.896 2.442 0 2.498-2.384 2.498-2.534 0-.573-.365-2.353-2.582-2.353 0 0-.14-1.69 2.89-1.69.786 0 1.516.544 1.516 1.6v2.322c0 1.508.112 3.801-1.487 3.801H97.18v.633h1.74c.87 0 1.572.634 1.572 1.84v6.697c0 1.177-.814 1.78-1.684 1.78-3.367 0-3.003-1.87-3.003-1.87 2.442 0 2.835-1.991 2.835-2.655 0-.12-.028-2.805-2.75-2.805-1.432 0-2.891 1.026-2.891 3.258C93 29.526 94.74 32 98.81 32c5.247 0 7.408-3.047 7.408-6.093 0-2.354-1.179-4.525-4.322-5.4ZM108.783 32c1.235 0 2.217-.965 2.217-2.745 0-1.75-.982-2.745-2.217-2.745s-2.217.995-2.217 2.745c0 1.78.982 2.745 2.217 2.745Z"/></g><g opacity=".5"><path d="M135.935 31.336c-.455 0-.883-.18-.883-1.96v-1.931h2.308v-1.237h-2.308V12h-4.359L123 26.45v.995h6.468v1.93c0 1.78-.399 1.961-.884 1.961h-1.253v.393h9.858v-.393h-1.254Zm-12.08-5.128 5.613-10.679v10.68h-5.613ZM140.749 32c1.254 0 2.251-.965 2.251-2.745 0-1.75-.997-2.745-2.251-2.745s-2.251.995-2.251 2.745c0 1.78.997 2.745 2.251 2.745Z"/></g><path d="M173.073 20.518c-1.888 0-3.392.884-3.392.884v-3.448h8.097l1.587-5.897-.356-.057s-.383 1.111-1.887 1.111h-8.043l-.027 9.202.437.2c1.532-1.453 3.174-1.396 3.475-1.396.848 0 1.504.598 1.504 1.738v6.837c0 1.111-.766 1.653-1.614 1.653-3.283 0-3.118-1.738-3.118-1.738 2.38 0 2.762-1.88 2.762-2.507 0-.143-.027-2.65-2.68-2.65-1.396 0-2.818.94-2.818 3.049 0 2.193 1.86 4.501 5.854 4.501 5.116 0 7.222-2.792 7.222-5.67 0-2.791-1.805-5.811-7.003-5.811ZM182.839 32c1.204 0 2.161-.912 2.161-2.593 0-1.652-.957-2.592-2.161-2.592-1.204 0-2.161.94-2.161 2.592 0 1.681.957 2.593 2.161 2.593Z"/><circle cx="175" cy="22" r="21" fill="none" stroke-width="2"/></svg>
20
+ {% endif %}
21
+ </i>
22
+ {% endmacro %}
23
+
24
+ {% macro GradeIconSingle(params) %}
25
+ {%- set iconName = params.icon | lower %}
26
+ {%- set svgAccessibilityAttributes = getSvgAttributes({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
27
+ {%- set svgAccessibilityElements = getInformativeElements({ title: params.title, desc: params.desc }) if params.title or params.desc else "" %}
28
+ <i class="ds-icon ds-icon--grade ds-icon--grade-{{ iconName }}">
29
+ {%- if iconName == "zero" %}
30
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<path d="M20.5196 12C15.8161 12 13 15.8914 13 21.9849C13 28.0784 15.8161 32 20.5196 32C25.2231 32 28.0691 28.0784 28.0691 21.9849C28.0691 15.8914 25.2231 12 20.5196 12ZM20.5196 31.3665C19.5909 31.3665 19.1115 30.7632 19.1115 29.5867V14.4133C19.1115 13.2368 19.5909 12.6637 20.5196 12.6637C21.4783 12.6637 21.9576 13.2368 21.9576 14.4133V29.5867C21.9576 30.7632 21.4783 31.3665 20.5196 31.3665Z" fill="#050505"/><path d="M31.6333 32C32.9515 32 34 31.0347 34 29.2549C34 27.5053 32.9515 26.5098 31.6333 26.5098C30.3151 26.5098 29.2666 27.5053 29.2666 29.2549C29.2666 31.0347 30.3151 32 31.6333 32Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/></svg>
31
+ {%- elif iconName == "one" %}
32
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<circle cx="22" cy="22" r="21" stroke-width="2" fill="none"/><path d="M21.0399 12C19.3504 15.3183 16 14.6546 16 14.6546V15.1674C16 15.1674 17.6895 15.3183 18.5772 14.8959V28.9834C18.5772 30.7632 18.1477 30.9744 17.6895 30.9744H16.4295V31.3665H26.3375V30.9744H25.0775C24.5907 30.9744 24.1898 30.7632 24.1898 28.9834V12H21.0399Z"/><path d="M29.7378 32C30.9977 32 32 31.0347 32 29.2549C32 27.5053 30.9977 26.5098 29.7378 26.5098C28.4778 26.5098 27.4756 27.5053 27.4756 29.2549C27.4756 31.0347 28.4778 32 29.7378 32Z"/></svg>
33
+ {%- elif iconName == "two" %}
34
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<circle cx="22" cy="22" r="21" stroke-width="2" fill="none"/><path d="M26.8142 23.7345C26.8142 25.8462 25.5503 26.3891 25.0213 26.3891H18.6726C21.3767 25.0618 27.1375 21.9246 27.1375 17.8824C27.1375 14.8356 24.8743 12 19.378 12C15.851 12 13.6172 14.4736 13.6172 16.7662C13.6172 18.9985 15.1162 20.0241 16.6152 20.0241C19.4662 20.0241 19.525 17.3394 19.525 17.1885C19.525 16.5551 19.0841 14.5641 16.527 14.5641C16.527 14.5641 16.5858 12.6938 19.378 12.6938C20.2892 12.6938 21.1415 13.2971 21.1415 14.4736V19.8431C21.1415 21.9246 20.348 23.0407 20.1128 23.4027C18.1436 26.2685 13 31.0347 13 31.0347V31.7285H27.1669V23.7345H26.8142Z"/><path d="M30.678 32C31.9713 32 33 31.0347 33 29.2549C33 27.5053 31.9713 26.5098 30.678 26.5098C29.3848 26.5098 28.3561 27.5053 28.3561 29.2549C28.3561 31.0347 29.3848 32 30.678 32Z"/></svg>
35
+ {%- elif iconName == "three" %}
36
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<path d="M22.8962 20.5068C24.4116 20.1146 26.2638 19.1493 26.2638 16.7059C26.2638 12.7541 22.363 12 19.8372 12C16.217 12.0603 14.5332 14.2624 14.5332 16.3137C14.5332 18.3047 15.8241 19.2097 17.1151 19.2097C19.5566 19.2097 19.6127 16.8265 19.6127 16.6757C19.6127 16.1026 19.2479 14.3228 17.0309 14.3228C17.0309 14.3228 16.8906 12.6335 19.9214 12.6335C20.7072 12.6335 21.4369 13.1765 21.4369 14.2323V16.5551C21.4369 18.0633 21.5491 20.356 19.9495 20.356H18.1815V20.9894H19.9214C20.7914 20.9894 21.493 21.6229 21.493 22.8296V29.5264C21.493 30.7029 20.6792 31.3062 19.8092 31.3062C16.4415 31.3062 16.8064 29.4359 16.8064 29.4359C19.2479 29.4359 19.6408 27.4449 19.6408 26.7813C19.6408 26.6606 19.6127 23.9759 16.8906 23.9759C15.4593 23.9759 14 25.0015 14 27.2338C14 29.5264 15.7399 32 19.8092 32C25.0571 32 27.218 28.9532 27.218 25.9065C27.218 23.5535 26.0393 21.3816 22.8962 20.5068Z"/><path d="M29.783 32C31.0178 32 32 31.0347 32 29.2549C32 27.5053 31.0178 26.5098 29.783 26.5098C28.5482 26.5098 27.5659 27.5053 27.5659 29.2549C27.5659 31.0347 28.5482 32 29.783 32Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/></svg>
37
+ {%- elif iconName == "four" %}
38
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<path d="M25.9355 31.3364C25.4796 31.3364 25.0522 31.1554 25.0522 29.3756V27.4449H27.3601V26.2081H25.0522V12H20.6929L13 26.4495V27.4449H19.4677V29.3756C19.4677 31.1554 19.0688 31.3364 18.5845 31.3364H17.3308V31.7285H27.1891V31.3364H25.9355ZM13.8548 26.2081L19.4677 15.5294V26.2081H13.8548Z"/><path d="M30.7491 32C32.0028 32 33 31.0347 33 29.2549C33 27.5053 32.0028 26.5098 30.7491 26.5098C29.4955 26.5098 28.4982 27.5053 28.4982 29.2549C28.4982 31.0347 29.4955 32 30.7491 32Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/></svg>
39
+ {%- elif iconName == "five" %}
40
+ <svg xmlns="http://www.w3.org/2000/svg" {{- svgAccessibilityAttributes -}} fill="none" viewBox="0 0 44 44">{{- svgAccessibilityElements -}}<path d="M20.0729 20.5185C18.1854 20.5185 16.6809 21.4017 16.6809 21.4017V17.9544H24.7781L26.3647 12.057L26.0091 12C26.0091 12 25.6261 13.1111 24.1216 13.1111H16.079L16.0517 22.3134L16.4894 22.5128C18.0213 21.0598 19.6626 21.1168 19.9635 21.1168C20.8116 21.1168 21.4681 21.7151 21.4681 22.8547V29.6923C21.4681 30.8034 20.7021 31.3447 19.8541 31.3447C16.5714 31.3447 16.7356 29.6068 16.7356 29.6068C19.1155 29.6068 19.4985 27.7265 19.4985 27.0997C19.4985 26.9573 19.4711 24.4501 16.8176 24.4501C15.4225 24.4501 14 25.3903 14 27.4986C14 29.6923 15.8602 32 19.8541 32C24.9696 32 27.076 29.208 27.076 26.3305C27.076 23.5385 25.2705 20.5185 20.0729 20.5185Z"/><path d="M29.8389 32C31.0426 32 32 31.0883 32 29.4074C32 27.755 31.0426 26.8148 29.8389 26.8148C28.6353 26.8148 27.6778 27.755 27.6778 29.4074C27.6778 31.0883 28.6353 32 29.8389 32Z"/><circle cx="22" cy="22" r="21" fill="none" stroke-width="2"/></svg>
41
+ {% endif %}
42
+ </i>
43
+ {% endmacro %}
44
+ {% macro GetGrade(params) %}
45
+ {%- set grades = ["zero", "one", "two", "three", "four", "five"] %}
46
+ {%- set gradesNumeric = ["0", "1", "2", "3", "4", "5"] %}
47
+ {%- if params.grade and params.grade in grades %}
48
+ {%- for grade in grades %}
49
+ {%- if grade == params.grade %}
50
+ {%- set gradeTitle = "Betyg: " + gradesNumeric[loop.index0] + "." %}
51
+ {%- set gradeDesc = "Betygsskala: " + gradesNumeric | first + " till " + gradesNumeric | last + "." %}
52
+ {%- if params.type == "single" %}
53
+ {{- GradeIconSingle({ icon: params.grade, title: gradeTitle, desc: gradeDesc }) | safe }}
54
+ {%- elif params.type == "scale" %}
55
+ {{- GradeIconScale({ icon: params.grade, title: gradeTitle, desc: gradeDesc }) | safe }}
56
+ {% endif %}
57
+ {% endif %}
58
+ {% endfor %}
59
+ {% endif%}
60
+ {% endmacro %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "11.1.0",
3
+ "version": "11.1.2",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/components/grade/README.md DELETED
@@ -1,28 +0,0 @@
1
- - Storybook: [Grade](https://designsystem.dn.se/?path=/docs/basic-grade--docs)
2
- - Storybook (Latest): [Grade](https://designsystem-latest.dn.se/?path=/docs/basic-grade--docs)
3
-
4
- ----
5
-
6
- # Grade
7
-
8
- ## Parameters
9
-
10
- |parameter | type | required | options | default | description |
11
- |:--- | :--- | :--- | :--- | :--- | :--- |
12
- |grade | string | yes | zero, one, two, three, four, five | | The actual grade, any number not between zero and five will not render the grade |
13
- |classNames | String | no | | | Ex. "my-special-class" |
14
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
15
-
16
- ## Minimum requirement example
17
-
18
- ### Nunjucks
19
-
20
- These are copy paste friendly examples to quickliy get started using a component.
21
-
22
- ```html
23
- {% from '@bonniernews/dn-design-system-web/components/grade/grade.njk' import Grade %}
24
-
25
- {{
26
- Grade({ grade: grade })
27
- }}
28
- ```
package/components/grade/grade.njk DELETED
@@ -1,111 +0,0 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
- {% from '@bonniernews/dn-design-system-web/foundations/a11y/informative-svg.njk' import getSvgAttributes, getInformativeElements %}
3
-
4
- {% macro Grade(params) %}
5
- {% set componentClassName = "ds-grade-scale" %}
6
- {%- set classes = [
7
- componentClassName,
8
- params.classNames if params.classNames
9
- ] | join(" ") %}
10
-
11
- {% set attributes = getAttributes(params.attributes) %}
12
-
13
- {% if params.grade %}
14
- <div class="{{ classes }}" {{- attributes | safe }}>
15
- {{ GradeScale({ grade: params.grade }) | trim }}
16
- </div>
17
- {% endif%}
18
- {% endmacro %}
19
-
20
- {% macro GradeScale(params) %}
21
- {% set gradeDict = {
22
- "zero": "0",
23
- "one": "1",
24
- "two": "2",
25
- "three": "3",
26
- "four": "4",
27
- "five": "5"
28
- } %}
29
-
30
- {% set gradeAsNumber = gradeDict[params.grade] %}
31
-
32
- {%- set title = "Betyg: " + gradeAsNumber + "." %}
33
- {%- set desc = "Betygsskala: 0 till 5." %}
34
-
35
- {%- set svgAccessibilityAttributes = getSvgAttributes({ title: title, desc: desc }) if title or desc else "" %}
36
- {%- set svgAccessibilityElements = getInformativeElements({ title: title, desc: desc }) if title or desc else "" %}
37
-
38
- {% if params.grade == "zero" %}
39
- <svg {{- svgAccessibilityAttributes -}} width="115" height="32" viewBox="0 0 115 32" xmlns="http://www.w3.org/2000/svg">
40
- {{- svgAccessibilityElements -}}
41
- <circle cx="16" cy="16" r="15" stroke-width="2" />
42
- <path d="M21.2998 21.4331C21.2998 20.1158 22.0949 19.3657 23.0948 19.3657C24.0947 19.3657 24.8898 20.1158 24.8898 21.4331C24.8898 22.7503 24.0947 23.5004 23.0948 23.5004C22.0949 23.5004 21.2998 22.7735 21.2998 21.4331Z"/>
43
- <path d="M20.9999 15.9888C20.9999 20.5928 18.8347 23.5557 15.2563 23.5557C11.6778 23.5557 9.53516 20.5928 9.53516 15.9888C9.53516 11.3847 11.6778 8.44434 15.2563 8.44434C18.8347 8.44434 20.9999 11.3847 20.9999 15.9888ZM16.3501 21.7324V10.2677C16.3501 9.37854 15.9857 8.94588 15.2563 8.94588C14.5268 8.94588 14.1849 9.37918 14.1849 10.2677V21.7324C14.1849 22.6215 14.5493 23.0773 15.2563 23.0773C15.9632 23.0773 16.3501 22.6215 16.3501 21.7324Z"/>
44
- <path d="M44.5188 8.55493V21.6447C44.5188 22.9896 44.8382 23.1487 45.2251 23.1487H46.2282V23.4448H38.3419V23.1487H39.345C39.7094 23.1487 40.0513 22.989 40.0513 21.6447V10.7433C39.345 11.0627 38 10.9487 38 10.9487V10.5611C38 10.5611 40.6668 11.062 42.0117 8.55493H44.5188Z" />
45
- <path d="M63.2138 17.4133V23.4531H52.228V22.929C52.228 22.929 56.2166 19.3281 57.7438 17.1629C57.926 16.8893 58.5415 16.0458 58.5415 14.4736V10.4162C58.5415 9.52703 57.8803 9.0712 57.174 9.0712C55.0087 9.0712 54.963 10.4844 54.963 10.4844C56.946 10.4844 57.2879 11.9884 57.2879 12.4674C57.2879 12.5814 57.2422 14.6101 55.0313 14.6101C53.8692 14.6101 52.7064 13.8349 52.7064 12.1487C52.7064 10.4625 54.439 8.54712 57.174 8.54712C61.4361 8.54712 63.1912 10.6898 63.1912 12.9915C63.1912 16.0458 58.7237 18.4164 56.6267 19.4189H61.5501C61.9602 19.4189 62.9401 19.0087 62.9401 17.4133H63.2138Z" />
46
- <path d="M79.9492 18.9517C79.9492 21.254 78.1941 23.5557 73.9319 23.5557C70.6271 23.5557 69.2139 21.6867 69.2139 19.9548C69.2139 18.2229 70.3992 17.4934 71.5613 17.4934C73.7722 17.4934 73.7948 19.5221 73.7948 19.6129C73.7948 20.1144 73.4754 21.6184 71.4924 21.6184C71.4924 21.6184 71.1962 23.0316 73.9312 23.0316C74.6375 23.0316 75.2987 22.5758 75.2987 21.6867V16.6268C75.2987 15.7151 74.729 15.2368 74.0227 15.2368H72.6095V14.7584H74.0452C75.3445 14.7584 75.253 13.0265 75.253 11.8863V10.1312C75.253 9.33347 74.6607 8.92335 74.022 8.92335C71.5606 8.92335 71.6746 10.1994 71.6746 10.1994C73.4754 10.1994 73.7716 11.5444 73.7716 11.977C73.7716 12.091 73.7259 13.8918 71.7428 13.8918C70.694 13.8918 69.6459 13.208 69.6459 11.7034C69.6459 10.1988 71.0147 8.49005 73.9544 8.44434C76.0057 8.44434 79.174 9.01413 79.174 12.0002C79.174 13.8461 77.67 14.5755 76.439 14.8724C78.9918 15.5336 79.9492 17.1747 79.9492 18.9523V18.9517Z" />
47
- <path d="M97.3 23.157V23.4531H89.4137V23.157H90.4168C90.8044 23.157 91.1231 23.0205 91.1231 21.6755V20.2166H85.9492V19.4646L92.103 8.54712H95.59V19.2824H97.4365V20.2172H95.59V21.6761C95.59 23.0211 95.9319 23.1576 96.2963 23.1576H97.2994L97.3 23.157ZM91.1231 19.2824V11.2139L86.633 19.2824H91.1231Z" />
48
- <path d="M114.331 19.4641C114.331 21.7664 112.576 23.9999 108.314 23.9999C104.986 23.9992 103.437 22.1534 103.437 20.3983C103.437 18.6432 104.622 17.9594 105.784 17.9594C107.995 17.9594 108.017 19.965 108.017 20.0789C108.017 20.5805 107.698 22.0845 105.716 22.0845C105.716 22.0845 105.579 23.4751 108.314 23.4751C109.021 23.4751 109.659 23.0418 109.659 22.1534V16.6834C109.659 15.7717 109.112 15.2933 108.406 15.2933C108.155 15.2933 106.787 15.2476 105.511 16.4104L105.147 16.2507L105.169 8.88913H111.87C113.124 8.88913 113.443 8 113.443 8L113.739 8.04571L112.417 12.7637H105.67V15.5212C105.67 15.5212 106.924 14.815 108.496 14.815C112.827 14.815 114.331 17.2313 114.331 19.4647V19.4641Z" />
49
- </svg>
50
- {% elif params.grade == "one" %}
51
- <svg {{- svgAccessibilityAttributes -}} width="118" height="32" viewBox="0 0 118 32" xmlns="http://www.w3.org/2000/svg">
52
- {{- svgAccessibilityElements -}}
53
- <path d="M11.4648 15.9888C11.4648 20.5928 9.29955 23.5557 5.72111 23.5557C2.14268 23.5557 0 20.5928 0 15.9888C0 11.3847 2.14268 8.44434 5.72111 8.44434C9.29955 8.44434 11.4648 11.3847 11.4648 15.9888ZM6.81499 21.7324V10.2677C6.81499 9.37854 6.45058 8.94588 5.72111 8.94588C4.99165 8.94588 4.64977 9.37918 4.64977 10.2677V21.7324C4.64977 22.6215 5.01418 23.0773 5.72111 23.0773C6.42804 23.0773 6.81499 22.6215 6.81499 21.7324Z" />
54
- <circle cx="33.4648" cy="16" r="15" stroke-width="2" />
55
- <path d="M37.1221 21.4331C37.1221 20.1158 37.9172 19.3657 38.9171 19.3657C39.917 19.3657 40.7121 20.1158 40.7121 21.4331C40.7121 22.7503 39.917 23.5004 38.9171 23.5004C37.9172 23.5004 37.1221 22.7735 37.1221 21.4331Z"/>
56
- <path d="M34.7556 8.55493V21.6447C34.7556 22.9896 35.075 23.1487 35.4619 23.1487H36.465V23.4448H28.5787V23.1487H29.5818C29.9462 23.1487 30.2881 22.989 30.2881 21.6447V10.7433C29.5818 11.0627 28.2368 10.9487 28.2368 10.9487V10.5611C28.2368 10.5611 30.9036 11.062 32.2486 8.55493H34.7556Z"/>
57
- <path d="M66.4506 17.4133V23.4531H55.4648V22.929C55.4648 22.929 59.4534 19.3281 60.9806 17.1629C61.1628 16.8893 61.7783 16.0458 61.7783 14.4736V10.4162C61.7783 9.52703 61.1171 9.0712 60.4108 9.0712C58.2456 9.0712 58.1999 10.4844 58.1999 10.4844C60.1829 10.4844 60.5247 11.9884 60.5247 12.4674C60.5247 12.5814 60.479 14.6101 58.2681 14.6101C57.106 14.6101 55.9432 13.8349 55.9432 12.1487C55.9432 10.4625 57.6758 8.54712 60.4108 8.54712C64.673 8.54712 66.4281 10.6898 66.4281 12.9915C66.4281 16.0458 61.9605 18.4164 59.8635 19.4189H64.7869C65.197 19.4189 66.177 19.0087 66.177 17.4133H66.4506Z" />
58
- <path d="M83.186 18.9517C83.186 21.254 81.4309 23.5557 77.1687 23.5557C73.8639 23.5557 72.4507 21.6867 72.4507 19.9548C72.4507 18.2229 73.636 17.4934 74.7981 17.4934C77.009 17.4934 77.0316 19.5221 77.0316 19.6129C77.0316 20.1144 76.7122 21.6184 74.7292 21.6184C74.7292 21.6184 74.433 23.0316 77.1681 23.0316C77.8743 23.0316 78.5356 22.5758 78.5356 21.6867V16.6268C78.5356 15.7151 77.9658 15.2368 77.2595 15.2368H75.8463V14.7584H77.282C78.5813 14.7584 78.4899 13.0265 78.4899 11.8863V10.1312C78.4899 9.33347 77.8975 8.92335 77.2588 8.92335C74.7975 8.92335 74.9114 10.1994 74.9114 10.1994C76.7122 10.1994 77.0084 11.5444 77.0084 11.977C77.0084 12.091 76.9627 13.8918 74.9797 13.8918C73.9309 13.8918 72.8827 13.208 72.8827 11.7034C72.8827 10.1988 74.2515 8.49005 77.1912 8.44434C79.2425 8.44434 82.4108 9.01413 82.4108 12.0002C82.4108 13.8461 80.9068 14.5755 79.6758 14.8724C82.2286 15.5336 83.186 17.1747 83.186 18.9523V18.9517Z" />
59
- <path d="M100.537 23.157V23.4531H92.6505V23.157H93.6536C94.0412 23.157 94.3599 23.0205 94.3599 21.6755V20.2166H89.186V19.4646L95.3398 8.54712H98.8268V19.2824H100.673V20.2172H98.8268V21.6761C98.8268 23.0211 99.1687 23.1576 99.5331 23.1576H100.536L100.537 23.157ZM94.3599 19.2824V11.2139L89.8698 19.2824H94.3599Z" />
60
- <path d="M117.568 19.4641C117.568 21.7664 115.813 23.9999 111.551 23.9999C108.223 23.9992 106.673 22.1534 106.673 20.3983C106.673 18.6432 107.859 17.9594 109.021 17.9594C111.232 17.9594 111.254 19.965 111.254 20.0789C111.254 20.5805 110.935 22.0845 108.953 22.0845C108.953 22.0845 108.816 23.4751 111.551 23.4751C112.257 23.4751 112.896 23.0418 112.896 22.1534V16.6834C112.896 15.7717 112.349 15.2933 111.642 15.2933C111.392 15.2933 110.024 15.2476 108.748 16.4104L108.383 16.2507L108.406 8.88913H115.107C116.36 8.88913 116.68 8 116.68 8L116.976 8.04571L115.654 12.7637H108.907V15.5212C108.907 15.5212 110.16 14.815 111.733 14.815C116.064 14.815 117.568 17.2313 117.568 19.4647V19.4641Z" />
61
- </svg>
62
- {% elif params.grade == "two" %}
63
- <svg {{- svgAccessibilityAttributes -}} width="115" height="32" viewBox="0 0 115 32" xmlns="http://www.w3.org/2000/svg">
64
- {{- svgAccessibilityElements -}}
65
- <path d="M11.4648 15.9888C11.4648 20.5928 9.29955 23.5557 5.72111 23.5557C2.14268 23.5557 0 20.5928 0 15.9888C0 11.3847 2.14268 8.44434 5.72111 8.44434C9.29955 8.44434 11.4648 11.3847 11.4648 15.9888ZM6.81499 21.7324V10.2677C6.81499 9.37854 6.45058 8.94588 5.72111 8.94588C4.99165 8.94588 4.64977 9.37918 4.64977 10.2677V21.7324C4.64977 22.6215 5.01418 23.0773 5.72111 23.0773C6.42804 23.0773 6.81499 22.6215 6.81499 21.7324Z" />
66
- <path d="M23.9837 8.55493V21.6447C23.9837 22.9896 24.303 23.1487 24.69 23.1487H25.6931V23.4448H17.8067V23.1487H18.8098C19.1742 23.1487 19.5161 22.989 19.5161 21.6447V10.7433C18.8098 11.0627 17.4648 10.9487 17.4648 10.9487V10.5611C17.4648 10.5611 20.1316 11.062 21.4766 8.55493H23.9837Z" />
67
- <circle cx="47.6929" cy="16" r="15" stroke-width="2" />
68
- <path d="M52.7998 21.4964C52.7998 20.1388 53.6193 19.3657 54.6498 19.3657C55.6803 19.3657 56.4998 20.1388 56.4998 21.4964C56.4998 22.854 55.6803 23.6271 54.6498 23.6271C53.6193 23.6271 52.7998 22.8779 52.7998 21.4964Z"/>
69
- <path d="M51.6928 17.4133V23.4531H40.707V22.929C40.707 22.929 44.6956 19.3281 46.2228 17.1629C46.405 16.8893 47.0205 16.0458 47.0205 14.4736V10.4162C47.0205 9.52703 46.3593 9.0712 45.653 9.0712C43.4878 9.0712 43.442 10.4844 43.442 10.4844C45.4251 10.4844 45.7669 11.9884 45.7669 12.4674C45.7669 12.5814 45.7212 14.6101 43.5103 14.6101C42.3482 14.6101 41.1854 13.8349 41.1854 12.1487C41.1854 10.4625 42.918 8.54712 45.653 8.54712C49.9152 8.54712 51.6702 10.6898 51.6702 12.9915C51.6702 16.0458 47.2027 18.4164 45.1057 19.4189H50.0291C50.4392 19.4189 51.4192 19.0087 51.4192 17.4133H51.6928Z"/>
70
- <path d="M80.4282 18.9517C80.4282 21.254 78.6731 23.5557 74.4109 23.5557C71.1061 23.5557 69.6929 21.6867 69.6929 19.9548C69.6929 18.2229 70.8782 17.4934 72.0403 17.4934C74.2512 17.4934 74.2738 19.5221 74.2738 19.6129C74.2738 20.1144 73.9544 21.6184 71.9714 21.6184C71.9714 21.6184 71.6752 23.0316 74.4102 23.0316C75.1165 23.0316 75.7778 22.5758 75.7778 21.6867V16.6268C75.7778 15.7151 75.208 15.2368 74.5017 15.2368H73.0885V14.7584H74.5242C75.8235 14.7584 75.732 13.0265 75.732 11.8863V10.1312C75.732 9.33347 75.1397 8.92335 74.501 8.92335C72.0396 8.92335 72.1536 10.1994 72.1536 10.1994C73.9544 10.1994 74.2506 11.5444 74.2506 11.977C74.2506 12.091 74.2049 13.8918 72.2219 13.8918C71.173 13.8918 70.1249 13.208 70.1249 11.7034C70.1249 10.1988 71.4937 8.49005 74.4334 8.44434C76.4847 8.44434 79.653 9.01413 79.653 12.0002C79.653 13.8461 78.149 14.5755 76.918 14.8724C79.4708 15.5336 80.4282 17.1747 80.4282 18.9523V18.9517Z" />
71
- <path d="M97.779 23.157V23.4531H89.8927V23.157H90.8958C91.2834 23.157 91.6021 23.0205 91.6021 21.6755V20.2166H86.4282V19.4646L92.582 8.54712H96.069V19.2824H97.9155V20.2172H96.069V21.6761C96.069 23.0211 96.4109 23.1576 96.7753 23.1576H97.7784L97.779 23.157ZM91.6021 19.2824V11.2139L87.112 19.2824H91.6021Z" />
72
- <path d="M114.81 19.4641C114.81 21.7664 113.055 23.9999 108.793 23.9999C105.465 23.9992 103.916 22.1534 103.916 20.3983C103.916 18.6432 105.101 17.9594 106.263 17.9594C108.474 17.9594 108.496 19.965 108.496 20.0789C108.496 20.5805 108.177 22.0845 106.195 22.0845C106.195 22.0845 106.058 23.4751 108.793 23.4751C109.5 23.4751 110.138 23.0418 110.138 22.1534V16.6834C110.138 15.7717 109.591 15.2933 108.885 15.2933C108.634 15.2933 107.266 15.2476 105.99 16.4104L105.626 16.2507L105.648 8.88913H112.349C113.603 8.88913 113.922 8 113.922 8L114.218 8.04571L112.896 12.7637H106.149V15.5212C106.149 15.5212 107.403 14.815 108.975 14.815C113.306 14.815 114.81 17.2313 114.81 19.4647V19.4641Z" />
73
- </svg>
74
- {% elif params.grade == "three" %}
75
- <svg {{- svgAccessibilityAttributes -}} width="116" height="32" viewBox="0 0 116 32" xmlns="http://www.w3.org/2000/svg">
76
- {{- svgAccessibilityElements -}}
77
- <path d="M11.4648 15.9888C11.4648 20.5928 9.29955 23.5557 5.72111 23.5557C2.14268 23.5557 0 20.5928 0 15.9888C0 11.3847 2.14268 8.44434 5.72111 8.44434C9.29955 8.44434 11.4648 11.3847 11.4648 15.9888ZM6.81499 21.7324V10.2677C6.81499 9.37854 6.45058 8.94588 5.72111 8.94588C4.99165 8.94588 4.64977 9.37918 4.64977 10.2677V21.7324C4.64977 22.6215 5.01418 23.0773 5.72111 23.0773C6.42804 23.0773 6.81499 22.6215 6.81499 21.7324Z" />
78
- <path d="M23.9837 8.55493V21.6447C23.9837 22.9896 24.303 23.1487 24.69 23.1487H25.6931V23.4448H17.8067V23.1487H18.8098C19.1742 23.1487 19.5161 22.989 19.5161 21.6447V10.7433C18.8098 11.0627 17.4648 10.9487 17.4648 10.9487V10.5611C17.4648 10.5611 20.1316 11.062 21.4766 8.55493H23.9837Z" />
79
- <path d="M42.6786 17.4133V23.4531H31.6929V22.929C31.6929 22.929 35.6814 19.3281 37.2086 17.1629C37.3908 16.8893 38.0063 16.0458 38.0063 14.4736V10.4162C38.0063 9.52703 37.3451 9.0712 36.6388 9.0712C34.4736 9.0712 34.4279 10.4844 34.4279 10.4844C36.4109 10.4844 36.7528 11.9884 36.7528 12.4674C36.7528 12.5814 36.7071 14.6101 34.4961 14.6101C33.334 14.6101 32.1712 13.8349 32.1712 12.1487C32.1712 10.4625 33.9038 8.54712 36.6388 8.54712C40.901 8.54712 42.6561 10.6898 42.6561 12.9915C42.6561 16.0458 38.1885 18.4164 36.0915 19.4189H41.015C41.4251 19.4189 42.405 19.0087 42.405 17.4133H42.6786Z" />
80
- <circle cx="64.6787" cy="16" r="15" stroke-width="2" />
81
- <path d="M69.5361 21.4331C69.5361 20.1158 70.3313 19.3657 71.3311 19.3657C72.331 19.3657 73.1262 20.1158 73.1262 21.4331C73.1262 22.7503 72.331 23.5004 71.3311 23.5004C70.3313 23.5004 69.5361 22.7735 69.5361 21.4331Z"/>
82
- <path d="M68.5366 18.8963C68.5366 21.1986 66.7815 23.5003 62.5193 23.5003C59.2145 23.5003 57.8013 21.6313 57.8013 19.8993C57.8013 18.1674 58.9866 17.438 60.1487 17.438C62.3596 17.438 62.3822 19.4667 62.3822 19.5575C62.3822 20.059 62.0628 21.563 60.0798 21.563C60.0798 21.563 59.7836 22.9762 62.5186 22.9762C63.2249 22.9762 63.8861 22.5204 63.8861 21.6313V16.5714C63.8861 15.6597 63.3164 15.1813 62.6101 15.1813H61.1969V14.703H62.6326C63.9319 14.703 63.8404 12.9711 63.8404 11.8308V10.0758C63.8404 9.27805 63.2481 8.86793 62.6094 8.86793C60.148 8.86793 60.262 10.144 60.262 10.144C62.0628 10.144 62.359 11.489 62.359 11.9216C62.359 12.0356 62.3133 13.8364 60.3303 13.8364C59.2814 13.8364 58.2333 13.1526 58.2333 11.648C58.2333 10.1434 59.6021 8.43463 62.5418 8.38892C64.5931 8.38892 67.7614 8.95871 67.7614 11.9448C67.7614 13.7907 66.2574 14.5201 65.0264 14.8169C67.5792 15.4782 68.5366 17.1193 68.5366 18.8969V18.8963Z"/>
83
- <path d="M98.0295 23.157V23.4531H90.1432V23.157H91.1463C91.5339 23.157 91.8526 23.0205 91.8526 21.6755V20.2166H86.6787V19.4646L92.8325 8.54712H96.3195V19.2824H98.166V20.2172H96.3195V21.6761C96.3195 23.0211 96.6614 23.1576 97.0258 23.1576H98.0289L98.0295 23.157ZM91.8526 19.2824V11.2139L87.3625 19.2824H91.8526Z" />
84
- <path d="M115.061 19.4641C115.061 21.7664 113.306 23.9999 109.044 23.9999C105.716 23.9992 104.166 22.1534 104.166 20.3983C104.166 18.6432 105.351 17.9594 106.513 17.9594C108.724 17.9594 108.747 19.965 108.747 20.0789C108.747 20.5805 108.428 22.0845 106.445 22.0845C106.445 22.0845 106.309 23.4751 109.044 23.4751C109.75 23.4751 110.389 23.0418 110.389 22.1534V16.6834C110.389 15.7717 109.841 15.2933 109.135 15.2933C108.885 15.2933 107.517 15.2476 106.24 16.4104L105.876 16.2507L105.899 8.88913H112.6C113.853 8.88913 114.172 8 114.172 8L114.469 8.04571L113.147 12.7637H106.399V15.5212C106.399 15.5212 107.653 14.815 109.226 14.815C113.556 14.815 115.061 17.2313 115.061 19.4647V19.4641Z" />
85
- </svg>
86
- {% elif params.grade == "four" %}
87
- <svg {{- svgAccessibilityAttributes -}} width="115" height="32" viewBox="0 0 115 32" xmlns="http://www.w3.org/2000/svg">
88
- {{- svgAccessibilityElements -}}
89
- <path d="M11.4648 15.9888C11.4648 20.5928 9.29955 23.5557 5.72111 23.5557C2.14268 23.5557 0 20.5928 0 15.9888C0 11.3847 2.14268 8.44434 5.72111 8.44434C9.29955 8.44434 11.4648 11.3847 11.4648 15.9888ZM6.81499 21.7324V10.2677C6.81499 9.37854 6.45058 8.94588 5.72111 8.94588C4.99165 8.94588 4.64977 9.37918 4.64977 10.2677V21.7324C4.64977 22.6215 5.01418 23.0773 5.72111 23.0773C6.42804 23.0773 6.81499 22.6215 6.81499 21.7324Z" />
90
- <path d="M23.9837 8.55493V21.6447C23.9837 22.9896 24.303 23.1487 24.69 23.1487H25.6931V23.4448H17.8067V23.1487H18.8098C19.1742 23.1487 19.5161 22.989 19.5161 21.6447V10.7433C18.8098 11.0627 17.4648 10.9487 17.4648 10.9487V10.5611C17.4648 10.5611 20.1316 11.062 21.4766 8.55493H23.9837Z" />
91
- <path d="M42.6786 17.4133V23.4531H31.6929V22.929C31.6929 22.929 35.6814 19.3281 37.2086 17.1629C37.3908 16.8893 38.0063 16.0458 38.0063 14.4736V10.4162C38.0063 9.52703 37.3451 9.0712 36.6388 9.0712C34.4736 9.0712 34.4279 10.4844 34.4279 10.4844C36.4109 10.4844 36.7528 11.9884 36.7528 12.4674C36.7528 12.5814 36.7071 14.6101 34.4961 14.6101C33.334 14.6101 32.1712 13.8349 32.1712 12.1487C32.1712 10.4625 33.9038 8.54712 36.6388 8.54712C40.901 8.54712 42.6561 10.6898 42.6561 12.9915C42.6561 16.0458 38.1885 18.4164 36.0915 19.4189H41.015C41.4251 19.4189 42.405 19.0087 42.405 17.4133H42.6786Z" />
92
- <path d="M59.414 18.9517C59.414 21.254 57.6589 23.5557 53.3967 23.5557C50.0919 23.5557 48.6787 21.6867 48.6787 19.9548C48.6787 18.2229 49.864 17.4934 51.0261 17.4934C53.2371 17.4934 53.2596 19.5221 53.2596 19.6129C53.2596 20.1144 52.9403 21.6184 50.9572 21.6184C50.9572 21.6184 50.6611 23.0316 53.3961 23.0316C54.1024 23.0316 54.7636 22.5758 54.7636 21.6867V16.6268C54.7636 15.7151 54.1938 15.2368 53.4875 15.2368H52.0743V14.7584H53.51C54.8093 14.7584 54.7179 13.0265 54.7179 11.8863V10.1312C54.7179 9.33347 54.1256 8.92335 53.4869 8.92335C51.0255 8.92335 51.1394 10.1994 51.1394 10.1994C52.9403 10.1994 53.2364 11.5444 53.2364 11.977C53.2364 12.091 53.1907 13.8918 51.2077 13.8918C50.1589 13.8918 49.1107 13.208 49.1107 11.7034C49.1107 10.1988 50.4795 8.49005 53.4193 8.44434C55.4705 8.44434 58.6388 9.01413 58.6388 12.0002C58.6388 13.8461 57.1348 14.5755 55.9038 14.8724C58.4566 15.5336 59.414 17.1747 59.414 18.9523V18.9517Z" />
93
- <circle cx="81.4141" cy="16" r="15" stroke-width="2" />
94
- <path d="M86.271 21.4331C86.271 20.1158 87.0661 19.3657 88.066 19.3657C89.0659 19.3657 89.861 20.1158 89.861 21.4331C89.861 22.7503 89.0659 23.5004 88.066 23.5004C87.0661 23.5004 86.271 22.7735 86.271 21.4331Z"/>
95
- <path d="M85.2507 23.157V23.4531H77.3644V23.157H78.3675C78.7551 23.157 79.0738 23.0205 79.0738 21.6755V20.2166H73.8999V19.4646L80.0537 8.54712H83.5407V19.2824H85.3872V20.2172H83.5407V21.6761C83.5407 23.0211 83.8826 23.1576 84.247 23.1576H85.2501L85.2507 23.157ZM79.0738 19.2824V11.2139L74.5837 19.2824H79.0738Z"/>
96
- <path d="M114.309 19.4641C114.309 21.7664 112.554 23.9999 108.292 23.9999C104.964 23.9992 103.414 22.1534 103.414 20.3983C103.414 18.6432 104.599 17.9594 105.761 17.9594C107.972 17.9594 107.995 19.965 107.995 20.0789C107.995 20.5805 107.676 22.0845 105.693 22.0845C105.693 22.0845 105.557 23.4751 108.292 23.4751C108.998 23.4751 109.637 23.0418 109.637 22.1534V16.6834C109.637 15.7717 109.089 15.2933 108.383 15.2933C108.133 15.2933 106.765 15.2476 105.488 16.4104L105.124 16.2507L105.147 8.88913H111.848C113.101 8.88913 113.421 8 113.421 8L113.717 8.04571L112.395 12.7637H105.648V15.5212C105.648 15.5212 106.901 14.815 108.474 14.815C112.804 14.815 114.309 17.2313 114.309 19.4647V19.4641Z" />
97
- </svg>
98
- {% elif params.grade == "five" %}
99
- <svg {{- svgAccessibilityAttributes -}} width="115" height="32" viewBox="0 0 115 32" xmlns="http://www.w3.org/2000/svg">
100
- {{- svgAccessibilityElements -}}
101
- <path d="M11.4648 15.9888C11.4648 20.5928 9.29955 23.5557 5.72111 23.5557C2.14268 23.5557 0 20.5928 0 15.9888C0 11.3847 2.14268 8.44434 5.72111 8.44434C9.29955 8.44434 11.4648 11.3847 11.4648 15.9888ZM6.81499 21.7324V10.2677C6.81499 9.37854 6.45058 8.94588 5.72111 8.94588C4.99165 8.94588 4.64977 9.37918 4.64977 10.2677V21.7324C4.64977 22.6215 5.01418 23.0773 5.72111 23.0773C6.42804 23.0773 6.81499 22.6215 6.81499 21.7324Z" />
102
- <path d="M23.9837 8.55493V21.6447C23.9837 22.9896 24.303 23.1487 24.69 23.1487H25.6931V23.4448H17.8067V23.1487H18.8098C19.1742 23.1487 19.5161 22.989 19.5161 21.6447V10.7433C18.8098 11.0627 17.4648 10.9487 17.4648 10.9487V10.5611C17.4648 10.5611 20.1316 11.062 21.4766 8.55493H23.9837Z" />
103
- <path d="M42.6786 17.4133V23.4531H31.6929V22.929C31.6929 22.929 35.6814 19.3281 37.2086 17.1629C37.3908 16.8893 38.0063 16.0458 38.0063 14.4736V10.4162C38.0063 9.52703 37.3451 9.0712 36.6388 9.0712C34.4736 9.0712 34.4279 10.4844 34.4279 10.4844C36.4109 10.4844 36.7528 11.9884 36.7528 12.4674C36.7528 12.5814 36.7071 14.6101 34.4961 14.6101C33.334 14.6101 32.1712 13.8349 32.1712 12.1487C32.1712 10.4625 33.9038 8.54712 36.6388 8.54712C40.901 8.54712 42.6561 10.6898 42.6561 12.9915C42.6561 16.0458 38.1885 18.4164 36.0915 19.4189H41.015C41.4251 19.4189 42.405 19.0087 42.405 17.4133H42.6786Z" />
104
- <path d="M59.414 18.9517C59.414 21.254 57.6589 23.5557 53.3967 23.5557C50.0919 23.5557 48.6787 21.6867 48.6787 19.9548C48.6787 18.2229 49.864 17.4934 51.0261 17.4934C53.2371 17.4934 53.2596 19.5221 53.2596 19.6129C53.2596 20.1144 52.9403 21.6184 50.9572 21.6184C50.9572 21.6184 50.6611 23.0316 53.3961 23.0316C54.1024 23.0316 54.7636 22.5758 54.7636 21.6867V16.6268C54.7636 15.7151 54.1938 15.2368 53.4875 15.2368H52.0743V14.7584H53.51C54.8093 14.7584 54.7179 13.0265 54.7179 11.8863V10.1312C54.7179 9.33347 54.1256 8.92335 53.4869 8.92335C51.0255 8.92335 51.1394 10.1994 51.1394 10.1994C52.9403 10.1994 53.2364 11.5444 53.2364 11.977C53.2364 12.091 53.1907 13.8918 51.2077 13.8918C50.1589 13.8918 49.1107 13.208 49.1107 11.7034C49.1107 10.1988 50.4795 8.49005 53.4193 8.44434C55.4705 8.44434 58.6388 9.01413 58.6388 12.0002C58.6388 13.8461 57.1348 14.5755 55.9038 14.8724C58.4566 15.5336 59.414 17.1747 59.414 18.9523V18.9517Z" />
105
- <path d="M76.7649 23.157V23.4531H68.8785V23.157H69.8816C70.2692 23.157 70.5879 23.0205 70.5879 21.6755V20.2166H65.4141V19.4646L71.5678 8.54712H75.0548V19.2824H76.9014V20.2172H75.0548V21.6761C75.0548 23.0211 75.3967 23.1576 75.7611 23.1576H76.7642L76.7649 23.157ZM70.5879 19.2824V11.2139L66.0978 19.2824H70.5879Z" />
106
- <circle cx="98.9014" cy="16" r="15" stroke-width="2" />
107
- <path d="M103.7 21.4331C103.7 20.1158 104.495 19.3657 105.495 19.3657C106.495 19.3657 107.29 20.1158 107.29 21.4331C107.29 22.7503 106.495 23.5004 105.495 23.5004C104.495 23.5004 103.7 22.7735 103.7 21.4331Z"/>
108
- <path d="M102.796 19.4641C102.796 21.7664 101.041 23.9999 96.7791 23.9999C93.4511 23.9992 91.9014 22.1534 91.9014 20.3983C91.9014 18.6432 93.0867 17.9594 94.2488 17.9594C96.4597 17.9594 96.4823 19.965 96.4823 20.0789C96.4823 20.5805 96.1629 22.0845 94.1805 22.0845C94.1805 22.0845 94.044 23.4751 96.7791 23.4751C97.4853 23.4751 98.124 23.0418 98.124 22.1534V16.6834C98.124 15.7717 97.5768 15.2933 96.8705 15.2933C96.62 15.2933 95.2519 15.2476 93.9758 16.4104L93.6114 16.2507L93.6339 8.88913H100.335C101.589 8.88913 101.908 8 101.908 8L102.204 8.04571L100.882 12.7637H94.1348V15.5212C94.1348 15.5212 95.3884 14.815 96.9613 14.815C101.292 14.815 102.796 17.2313 102.796 19.4647V19.4641Z"/>
109
- </svg>
110
- {% endif %}
111
- {% endmacro %}
package/components/grade/grade.scss DELETED
@@ -1,20 +0,0 @@
1
- @use "../../foundations/helpers/forward.helpers.scss" as *;
2
-
3
- .ds-grade-scale {
4
- svg {
5
- path {
6
- fill: $ds-color-text-primary-02;
7
- }
8
-
9
- circle {
10
- fill: none;
11
- stroke: $ds-color-text-primary;
12
-
13
- // The number and period are siblings to the circle and should have the same color.
14
- + path,
15
- + path + path {
16
- fill: $ds-color-text-primary;
17
- }
18
- }
19
- }
20
- }