@bonniernews/dn-design-system-web 0.0.1-alpha.0 → 0.1.0-alpha.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,44 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 0.1.0-alpha.2 (2022-07-01)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ # [0.1.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.0...@bonniernews/dn-design-system-web@0.1.0-alpha.1) (2022-07-01)
15
+
16
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
17
+
18
+
19
+
20
+
21
+
22
+ # [0.1.0-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.0.1-alpha.1...@bonniernews/dn-design-system-web@0.1.0-alpha.0) (2022-07-01)
23
+
24
+
25
+ ### Features
26
+
27
+ * **web:** button group for web ([#140](https://github.com/BonnierNews/dn-design-system/issues/140)) ([aa04724](https://github.com/BonnierNews/dn-design-system/commit/aa047247ac8870fae6b685097fd472643ba2d423))
28
+
29
+
30
+
31
+
32
+
33
+ ## [0.0.1-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.0.1-alpha.0...@bonniernews/dn-design-system-web@0.0.1-alpha.1) (2022-07-01)
34
+
35
+
36
+ ### Bug Fixes
37
+
38
+ * **foundations:** update font to DNSans10 ([#139](https://github.com/BonnierNews/dn-design-system/issues/139)) ([ed18770](https://github.com/BonnierNews/dn-design-system/commit/ed18770958bb9c31a55fd731e7325e84ab37ddbd))
39
+
40
+
41
+
42
+
43
+
6
44
  ## 0.0.1-alpha.0 (2022-07-01)
7
45
 
8
46
  **Note:** Version bump only for package @bonniernews/dn-design-system-web
@@ -0,0 +1,20 @@
1
+ **@bonniernews/dn-design-system-web/components/button-group/README.md**
2
+
3
+ ----
4
+
5
+ # Button group
6
+
7
+ Parameters available but not used in storybook:
8
+
9
+ ```javascript
10
+ buttons: [
11
+ {
12
+ attributes: { "data-test": "12345" },
13
+ classNames: "button-1",
14
+ href: "https://designsystem-latest.dn.se/"
15
+ },
16
+ { classNames: "button-2" }
17
+ ]
18
+ ```
19
+
20
+ ℹ️ If you add href parameter the button will be rendered as an `<a>`
@@ -0,0 +1,27 @@
1
+ {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
2
+ {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
3
+
4
+ {% macro ButtonGroup(params) %}
5
+ {% set componentClassName = "ds-btn-group" %}
6
+ {% set variant = [] %}
7
+
8
+ {% if params.classNames %}
9
+ {% set variant = (variant.push(params.classNames), variant) %}
10
+ {% endif%}
11
+
12
+ {% set classes = componentClassName + " " + variant | join(" ") %}
13
+
14
+ <div class="{{ classes }}">
15
+ {% for button in params.buttons %}
16
+ {{ Button({
17
+ text: button.text,
18
+ variant: button.variant,
19
+ state: button.state,
20
+ size: 'default',
21
+ fullWidth: false,
22
+ iconPosition: button.iconPosition,
23
+ iconName: button.iconName
24
+ })}}
25
+ {% endfor %}
26
+ </div>
27
+ {% endmacro %}
@@ -0,0 +1,25 @@
1
+ @use "../../foundations/helpers/spacing.scss" as *;
2
+ @use "../button/button.scss" as *;
3
+
4
+ @mixin ds-btn-group-screen-l {
5
+ flex-direction: column;
6
+
7
+ .ds-btn:first-of-type {
8
+ margin: ds-spacing(0 0 1 0);
9
+ }
10
+ }
11
+
12
+ .ds-btn-group {
13
+ display: flex;
14
+ .ds-btn:first-of-type {
15
+ margin: ds-spacing(0 1 0 0);
16
+ }
17
+ }
18
+
19
+ // @todo refactor when media queries are in place
20
+ // remeber to keep large screen toggle in storybook working along side media queries
21
+ .ds-screen-l {
22
+ .ds-btn-group {
23
+ @include ds-btn-group-screen-l;
24
+ }
25
+ }
@@ -1,7 +1,7 @@
1
1
  @font-face {
2
2
  font-family: DNSansVF;
3
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DNSans09VF.woff2") format('woff2-variations'),
4
- url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DNSans09VF.woff2") format('woff2');
3
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DnSans10-Variable.woff2") format('woff2-variations'),
4
+ url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DnSans10-Variable.woff2") format('woff2');
5
5
  font-weight: 300 900;
6
6
  }
7
7
 
@@ -9,34 +9,74 @@
9
9
  font-family: DNSans;
10
10
  font-weight: 300;
11
11
  font-display: swap;
12
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans09-Light.woff") format("woff");
12
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Light.woff") format("woff");
13
+ }
14
+
15
+ @font-face {
16
+ font-family: DNSans;
17
+ font-weight: 300;
18
+ font-display: swap;
19
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-LightItalic.woff") format("woff");
20
+ font-style: italic;
13
21
  }
14
22
 
15
23
  @font-face {
16
24
  font-family: DNSans;
17
25
  font-weight: 400;
18
26
  font-display: swap;
19
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans09-Regular.woff") format("woff");
27
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Regular.woff") format("woff");
28
+ }
29
+
30
+ @font-face {
31
+ font-family: DNSans;
32
+ font-weight: 400;
33
+ font-display: swap;
34
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-RegularItalic.woff") format("woff");
35
+ font-style: italic;
36
+ }
37
+
38
+ @font-face {
39
+ font-family: DNSans;
40
+ font-weight: 500;
41
+ font-display: swap;
42
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Medium.woff") format("woff");
20
43
  }
21
44
 
22
45
  @font-face {
23
46
  font-family: DNSans;
24
47
  font-weight: 500;
25
48
  font-display: swap;
26
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans09-Medium.woff") format("woff");
49
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-MediumItalic.woff") format("woff");
50
+ font-style: italic;
27
51
  }
28
52
 
29
53
  @font-face {
30
54
  font-family: DNSans;
31
55
  font-weight: 700;
32
56
  font-display: swap;
33
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans09-Bold.woff") format("woff");
57
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Bold.woff") format("woff");
58
+ }
59
+
60
+ @font-face {
61
+ font-family: DNSans;
62
+ font-weight: 700;
63
+ font-display: swap;
64
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-BoldItalic.woff") format("woff");
65
+ font-style: italic;
66
+ }
67
+
68
+ @font-face {
69
+ font-family: DNSans;
70
+ font-weight: 900;
71
+ font-display: swap;
72
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Black.woff") format("woff");
34
73
  }
35
74
 
36
75
  @font-face {
37
76
  font-family: DNSans;
38
77
  font-weight: 900;
39
78
  font-display: swap;
40
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans09-Black.woff") format("woff");
79
+ src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-BlackItalic.woff") format("woff");
80
+ font-style: italic;
41
81
  }
42
82
 
@@ -1,2 +1,2 @@
1
1
  <!-- This is an auto-generated file -->
2
- <svg style="display:block; height:0; width:0; visibility:hidden;"><defs/><symbol id="arrow_back" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z" fill="#1C1B1F"/></g></symbol><symbol id="check" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="m9.791 17.832-5.7-5.7 1.425-1.425 4.275 4.275 9.175-9.175 1.425 1.425-10.6 10.6Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_forward" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21.35-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 12.237 2 10.417 2 8.5c0-1.567.525-2.875 1.575-3.925C4.625 3.525 5.933 3 7.5 3a5.72 5.72 0 0 1 2.5.562c.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538A5.72 5.72 0 0 1 16.5 3c1.567 0 2.875.525 3.925 1.575C21.475 5.625 22 6.933 22 8.5c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21.35Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 11.887 2 10.067 2 8.15c0-1.567.525-2.875 1.575-3.925C4.625 3.175 5.933 2.65 7.5 2.65c.883 0 1.717.187 2.5.562.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538 5.721 5.721 0 0 1 2.5-.562c1.567 0 2.875.525 3.925 1.575C21.475 5.275 22 6.583 22 8.15c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21Zm0-2.7c2.383-2.167 4.313-4.033 5.788-5.6C19.263 11.133 20 9.617 20 8.15c0-1-.333-1.833-1-2.5s-1.5-1-2.5-1c-.783 0-1.508.22-2.175.662C13.658 5.754 13.2 6.317 12.95 7h-1.9c-.25-.683-.708-1.246-1.375-1.688A3.862 3.862 0 0 0 7.5 4.65c-1 0-1.833.333-2.5 1s-1 1.5-1 2.5c0 1.467.738 2.983 2.213 4.55 1.475 1.567 3.404 3.433 5.787 5.6Z" fill="#1C1B1F"/></g></symbol><symbol id="delete" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M7 21c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Zm-2-6H5v4h2v-4Zm10 0v4h2v-4h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="home-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Z" fill="#1C1B1F"/></g></symbol><symbol id="home" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10v9Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.567.142-1.088.425-1.563A2.795 2.795 0 0 1 3.6 14.55c1-.5 2.038-.883 3.113-1.15 1.075-.267 2.17-.4 3.287-.4h.338c.108 0 .212.017.312.05a7.613 7.613 0 0 0-.588 3.563A6.86 6.86 0 0 0 11.25 20H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.55.142-1.067.425-1.55.283-.483.675-.85 1.175-1.1.85-.433 1.808-.8 2.875-1.1C7.542 13.15 8.717 13 10 13h.35c.1 0 .2.017.3.05-.133.3-.246.613-.338.938A7.82 7.82 0 0 0 10.1 15H10c-1.183 0-2.246.15-3.188.45-.941.3-1.712.6-2.312.9a.97.97 0 0 0-.5.85v.8h6.3c.1.35.233.696.4 1.038.167.341.35.662.55.962H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Zm-7-8c.55 0 1.021-.196 1.413-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.587-1.412A1.927 1.927 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.923 1.923 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z" fill="#1C1B1F"/></g></symbol><symbol id="menu" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="notifications" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 19v-2h2v-7c0-1.383.417-2.613 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.062A1.444 1.444 0 0 1 12 2c.417 0 .77.146 1.062.438.292.291.438.645.438 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.387 18 8.617 18 10v7h2v2H4Zm8 3c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 20h4c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 12 22Zm-4-5h8v-7c0-1.1-.392-2.042-1.175-2.825C14.042 6.392 13.1 6 12 6s-2.042.392-2.825 1.175C8.392 7.958 8 8.9 8 10v7Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility_off" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.862-.3.292-.067.605-.1.938-.1 1.25 0 2.313.437 3.188 1.312S16.5 10.25 16.5 11.5c0 .333-.033.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.957 10.957 0 0 0 1.688-1.588A8.9 8.9 0 0 0 20.8 11.5c-.833-1.683-2.03-3.021-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85a11.106 11.106 0 0 1 2.1-.638A11.608 11.608 0 0 1 12 4c2.517 0 4.758.696 6.725 2.087C20.692 7.479 22.117 9.283 23 11.5a11.714 11.714 0 0 1-1.512 2.738A11.025 11.025 0 0 1 19.3 16.45Zm.5 6.15-4.2-4.15c-.583.183-1.17.321-1.762.413-.592.091-1.205.137-1.838.137-2.517 0-4.758-.696-6.725-2.087C3.308 15.521 1.883 13.717 1 11.5c.35-.883.792-1.704 1.325-2.463A11.522 11.522 0 0 1 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4-1.4 1.4ZM5.55 8.4c-.483.433-.925.908-1.325 1.425A9.016 9.016 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.504 10.083 17 12 17c.333 0 .658-.02.975-.062.317-.042.642-.088.975-.138l-.9-.95c-.183.05-.358.087-.525.112A3.497 3.497 0 0 1 12 16c-1.25 0-2.313-.437-3.188-1.312S7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525a4.66 4.66 0 0 1 .113-.525L5.55 8.4Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M12 16c1.25 0 2.313-.437 3.188-1.312S16.5 12.75 16.5 11.5c0-1.25-.437-2.313-1.312-3.188S13.25 7 12 7c-1.25 0-2.313.437-3.188 1.312S7.5 10.25 7.5 11.5c0 1.25.437 2.313 1.312 3.188S10.75 16 12 16Zm0-1.8c-.75 0-1.387-.263-1.912-.788A2.601 2.601 0 0 1 9.3 11.5c0-.75.263-1.388.788-1.913A2.603 2.603 0 0 1 12 8.8c.75 0 1.388.262 1.913.787.525.525.787 1.163.787 1.913s-.262 1.387-.787 1.912A2.605 2.605 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.679 9.567 4 12 4c2.433 0 4.65.679 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.321 14.433 19 12 19Zm0-2a9.545 9.545 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.777 9.777 0 0 0-3.612-4.013A9.55 9.55 0 0 0 12 6a9.55 9.55 0 0 0-5.188 1.487A9.777 9.777 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.612 4.012A9.545 9.545 0 0 0 12 17Z" fill="#1C1B1F"/></g></symbol></svg>
2
+ <svg style="display:block; height:0; width:0; visibility:hidden;"><defs/><symbol id="arrow_back" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_forward" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8Z" fill="#1C1B1F"/></g></symbol><symbol id="check" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="m9.791 17.832-5.7-5.7 1.425-1.425 4.275 4.275 9.175-9.175 1.425 1.425-10.6 10.6Z" fill="#1C1B1F"/></g></symbol><symbol id="delete" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M7 21c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21.35-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 12.237 2 10.417 2 8.5c0-1.567.525-2.875 1.575-3.925C4.625 3.525 5.933 3 7.5 3a5.72 5.72 0 0 1 2.5.562c.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538A5.72 5.72 0 0 1 16.5 3c1.567 0 2.875.525 3.925 1.575C21.475 5.625 22 6.933 22 8.5c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21.35Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 11.887 2 10.067 2 8.15c0-1.567.525-2.875 1.575-3.925C4.625 3.175 5.933 2.65 7.5 2.65c.883 0 1.717.187 2.5.562.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538 5.721 5.721 0 0 1 2.5-.562c1.567 0 2.875.525 3.925 1.575C21.475 5.275 22 6.583 22 8.15c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21Zm0-2.7c2.383-2.167 4.313-4.033 5.788-5.6C19.263 11.133 20 9.617 20 8.15c0-1-.333-1.833-1-2.5s-1.5-1-2.5-1c-.783 0-1.508.22-2.175.662C13.658 5.754 13.2 6.317 12.95 7h-1.9c-.25-.683-.708-1.246-1.375-1.688A3.862 3.862 0 0 0 7.5 4.65c-1 0-1.833.333-2.5 1s-1 1.5-1 2.5c0 1.467.738 2.983 2.213 4.55 1.475 1.567 3.404 3.433 5.787 5.6Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Zm-2-6H5v4h2v-4Zm10 0v4h2v-4h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="home-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Z" fill="#1C1B1F"/></g></symbol><symbol id="home" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10v9Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.567.142-1.088.425-1.563A2.795 2.795 0 0 1 3.6 14.55c1-.5 2.038-.883 3.113-1.15 1.075-.267 2.17-.4 3.287-.4h.338c.108 0 .212.017.312.05a7.613 7.613 0 0 0-.588 3.563A6.86 6.86 0 0 0 11.25 20H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.55.142-1.067.425-1.55.283-.483.675-.85 1.175-1.1.85-.433 1.808-.8 2.875-1.1C7.542 13.15 8.717 13 10 13h.35c.1 0 .2.017.3.05-.133.3-.246.613-.338.938A7.82 7.82 0 0 0 10.1 15H10c-1.183 0-2.246.15-3.188.45-.941.3-1.712.6-2.312.9a.97.97 0 0 0-.5.85v.8h6.3c.1.35.233.696.4 1.038.167.341.35.662.55.962H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Zm-7-8c.55 0 1.021-.196 1.413-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.587-1.412A1.927 1.927 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.923 1.923 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z" fill="#1C1B1F"/></g></symbol><symbol id="menu" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="notifications" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 19v-2h2v-7c0-1.383.417-2.613 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.062A1.444 1.444 0 0 1 12 2c.417 0 .77.146 1.062.438.292.291.438.645.438 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.387 18 8.617 18 10v7h2v2H4Zm8 3c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 20h4c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 12 22Zm-4-5h8v-7c0-1.1-.392-2.042-1.175-2.825C14.042 6.392 13.1 6 12 6s-2.042.392-2.825 1.175C8.392 7.958 8 8.9 8 10v7Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility_off" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.862-.3.292-.067.605-.1.938-.1 1.25 0 2.313.437 3.188 1.312S16.5 10.25 16.5 11.5c0 .333-.033.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.957 10.957 0 0 0 1.688-1.588A8.9 8.9 0 0 0 20.8 11.5c-.833-1.683-2.03-3.021-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85a11.106 11.106 0 0 1 2.1-.638A11.608 11.608 0 0 1 12 4c2.517 0 4.758.696 6.725 2.087C20.692 7.479 22.117 9.283 23 11.5a11.714 11.714 0 0 1-1.512 2.738A11.025 11.025 0 0 1 19.3 16.45Zm.5 6.15-4.2-4.15c-.583.183-1.17.321-1.762.413-.592.091-1.205.137-1.838.137-2.517 0-4.758-.696-6.725-2.087C3.308 15.521 1.883 13.717 1 11.5c.35-.883.792-1.704 1.325-2.463A11.522 11.522 0 0 1 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4-1.4 1.4ZM5.55 8.4c-.483.433-.925.908-1.325 1.425A9.016 9.016 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.504 10.083 17 12 17c.333 0 .658-.02.975-.062.317-.042.642-.088.975-.138l-.9-.95c-.183.05-.358.087-.525.112A3.497 3.497 0 0 1 12 16c-1.25 0-2.313-.437-3.188-1.312S7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525a4.66 4.66 0 0 1 .113-.525L5.55 8.4Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M12 16c1.25 0 2.313-.437 3.188-1.312S16.5 12.75 16.5 11.5c0-1.25-.437-2.313-1.312-3.188S13.25 7 12 7c-1.25 0-2.313.437-3.188 1.312S7.5 10.25 7.5 11.5c0 1.25.437 2.313 1.312 3.188S10.75 16 12 16Zm0-1.8c-.75 0-1.387-.263-1.912-.788A2.601 2.601 0 0 1 9.3 11.5c0-.75.263-1.388.788-1.913A2.603 2.603 0 0 1 12 8.8c.75 0 1.388.262 1.913.787.525.525.787 1.163.787 1.913s-.262 1.387-.787 1.912A2.605 2.605 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.679 9.567 4 12 4c2.433 0 4.65.679 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.321 14.433 19 12 19Zm0-2a9.545 9.545 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.777 9.777 0 0 0-3.612-4.013A9.55 9.55 0 0 0 12 6a9.55 9.55 0 0 0-5.188 1.487A9.777 9.777 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.612 4.012A9.545 9.545 0 0 0 12 17Z" fill="#1C1B1F"/></g></symbol></svg>
@@ -10,46 +10,46 @@
10
10
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1436" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1436)"><path d="M12 20L10.575 18.6L16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20Z"/></g></svg>
11
11
  </i>
12
12
  {% endif %}
13
- {% if params.icon == "delete" %}
14
- <i class="ds-icon ds-icon--delete">
15
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4492_1853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4492_1853)"><path d="M7 21C6.45 21 5.97933 20.8043 5.588 20.413C5.196 20.021 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8043 20.021 18.413 20.413C18.021 20.8043 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z"/></g></svg>
16
- </i>
17
- {% endif %}
18
13
  {% if params.icon == "check" %}
19
14
  <i class="ds-icon ds-icon--check">
20
15
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4492_1867" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><rect x="0.241394" y="-0.168091" width="24" height="24"/></mask><g mask="url(#mask0_4492_1867)"><path d="M9.79143 17.8319L4.09143 12.1319L5.51643 10.7069L9.79143 14.9819L18.9664 5.80688L20.3914 7.23188L9.79143 17.8319Z"/></g></svg>
21
16
  </i>
22
17
  {% endif %}
18
+ {% if params.icon == "delete" %}
19
+ <i class="ds-icon ds-icon--delete">
20
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4492_1853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4492_1853)"><path d="M7 21C6.45 21 5.97933 20.8043 5.588 20.413C5.196 20.021 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8043 20.021 18.413 20.413C18.021 20.8043 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z"/></g></svg>
21
+ </i>
22
+ {% endif %}
23
23
  {% if params.icon == "favorite-filled" %}
24
24
  <i class="ds-icon ds-icon--favorite-filled">
25
25
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1439" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1439)"><path d="M12 21.35L10.55 20.05C7.93333 17.7167 5.854 15.6873 4.312 13.962C2.77067 12.2373 2 10.4167 2 8.5C2 6.93333 2.525 5.625 3.575 4.575C4.625 3.525 5.93333 3 7.5 3C8.38333 3 9.21667 3.18733 10 3.562C10.7833 3.93733 11.45 4.45 12 5.1C12.55 4.45 13.2167 3.93733 14 3.562C14.7833 3.18733 15.6167 3 16.5 3C18.0667 3 19.375 3.525 20.425 4.575C21.475 5.625 22 6.93333 22 8.5C22 10.4167 21.2293 12.2373 19.688 13.962C18.146 15.6873 16.0667 17.7167 13.45 20.05L12 21.35Z"/></g></svg>
26
26
  </i>
27
27
  {% endif %}
28
- {% if params.icon == "headphones-filled" %}
29
- <i class="ds-icon ds-icon--headphones-filled">
30
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1446" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1446)"><path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21Z"/></g></svg>
31
- </i>
32
- {% endif %}
33
28
  {% if params.icon == "favorite" %}
34
29
  <i class="ds-icon ds-icon--favorite">
35
30
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1447" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1447)"><path d="M12 21L10.55 19.7C7.93333 17.3667 5.854 15.3374 4.312 13.612C2.77067 11.8874 2 10.0667 2 8.15002C2 6.58336 2.525 5.27502 3.575 4.22502C4.625 3.17502 5.93333 2.65002 7.5 2.65002C8.38333 2.65002 9.21667 2.83736 10 3.21202C10.7833 3.58736 11.45 4.10002 12 4.75002C12.55 4.10002 13.2167 3.58736 14 3.21202C14.7833 2.83736 15.6167 2.65002 16.5 2.65002C18.0667 2.65002 19.375 3.17502 20.425 4.22502C21.475 5.27502 22 6.58336 22 8.15002C22 10.0667 21.2293 11.8874 19.688 13.612C18.146 15.3374 16.0667 17.3667 13.45 19.7L12 21ZM12 18.3C14.3833 16.1334 16.3127 14.2667 17.788 12.7C19.2627 11.1334 20 9.61669 20 8.15002C20 7.15002 19.6667 6.31669 19 5.65002C18.3333 4.98336 17.5 4.65002 16.5 4.65002C15.7167 4.65002 14.9917 4.87069 14.325 5.31202C13.6583 5.75402 13.2 6.31669 12.95 7.00002H11.05C10.8 6.31669 10.3417 5.75402 9.675 5.31202C9.00833 4.87069 8.28333 4.65002 7.5 4.65002C6.5 4.65002 5.66667 4.98336 5 5.65002C4.33333 6.31669 4 7.15002 4 8.15002C4 9.61669 4.73767 11.1334 6.213 12.7C7.68767 14.2667 9.61667 16.1334 12 18.3Z"/></g></svg>
36
31
  </i>
37
32
  {% endif %}
33
+ {% if params.icon == "headphones-filled" %}
34
+ <i class="ds-icon ds-icon--headphones-filled">
35
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1446" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1446)"><path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21Z"/></g></svg>
36
+ </i>
37
+ {% endif %}
38
38
  {% if params.icon == "headphones" %}
39
39
  <i class="ds-icon ds-icon--headphones">
40
40
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1438" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1438)"><path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21ZM7 15H5V19H7V15ZM17 15V19H19V15H17Z"/></g></svg>
41
41
  </i>
42
42
  {% endif %}
43
- {% if params.icon == "home" %}
44
- <i class="ds-icon ds-icon--home">
45
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1448)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4ZM6 19H8V12H16V19H18V10L12 5.5L6 10V19Z"/></g></svg>
46
- </i>
47
- {% endif %}
48
43
  {% if params.icon == "home-filled" %}
49
44
  <i class="ds-icon ds-icon--home-filled">
50
45
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1435" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1435)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4Z"/></g></svg>
51
46
  </i>
52
47
  {% endif %}
48
+ {% if params.icon == "home" %}
49
+ <i class="ds-icon ds-icon--home">
50
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1448)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4ZM6 19H8V12H16V19H18V10L12 5.5L6 10V19Z"/></g></svg>
51
+ </i>
52
+ {% endif %}
53
53
  {% if params.icon == "manage_accounts-filled" %}
54
54
  <i class="ds-icon ds-icon--manage_accounts-filled">
55
55
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1441" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1441)"><path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.6333 2.14167 16.1123 2.425 15.637C2.70833 15.1623 3.1 14.8 3.6 14.55C4.6 14.05 5.63767 13.6667 6.713 13.4C7.78767 13.1333 8.88333 13 10 13C10.1167 13 10.2293 13 10.338 13C10.446 13 10.55 13.0167 10.65 13.05C10.1667 14.2 9.97067 15.3877 10.062 16.613C10.154 17.8377 10.55 18.9667 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18Z"/></g></svg>
@@ -1,123 +1,123 @@
1
1
  $typography: (
2
2
  DNSans20Bold: (
3
- fontFamily: "DN Sans 09",
3
+ fontFamily: "DN Sans 10",
4
4
  fontSize: 20,
5
5
  lineHeight: 28,
6
6
  fontWeight: 700
7
7
  ),
8
8
  DNSans18: (
9
- fontFamily: "DN Sans 09",
9
+ fontFamily: "DN Sans 10",
10
10
  fontSize: 18,
11
11
  lineHeight: 24,
12
12
  fontWeight: 400
13
13
  ),
14
14
  DNSans18Medium: (
15
- fontFamily: "DN Sans 09",
15
+ fontFamily: "DN Sans 10",
16
16
  fontSize: 18,
17
17
  lineHeight: 24,
18
18
  fontWeight: 500
19
19
  ),
20
20
  DNSans16: (
21
- fontFamily: "DN Sans 09",
21
+ fontFamily: "DN Sans 10",
22
22
  fontSize: 16,
23
23
  lineHeight: 24,
24
24
  fontWeight: 400
25
25
  ),
26
26
  DNSans16Medium: (
27
- fontFamily: "DN Sans 09",
27
+ fontFamily: "DN Sans 10",
28
28
  fontSize: 16,
29
29
  lineHeight: 24,
30
30
  fontWeight: 500
31
31
  ),
32
32
  DNSansLink16: (
33
- fontFamily: "DN Sans 09",
33
+ fontFamily: "DN Sans 10",
34
34
  fontSize: 16,
35
35
  lineHeight: 24,
36
36
  fontWeight: 400
37
37
  ),
38
38
  DNSans14: (
39
- fontFamily: "DN Sans 09",
39
+ fontFamily: "DN Sans 10",
40
40
  fontSize: 14,
41
41
  lineHeight: 20,
42
42
  fontWeight: 400
43
43
  ),
44
44
  DNSans14Medium: (
45
- fontFamily: "DN Sans 09",
45
+ fontFamily: "DN Sans 10",
46
46
  fontSize: 14,
47
47
  lineHeight: 20,
48
48
  fontWeight: 500
49
49
  ),
50
50
  DNSansLink14: (
51
- fontFamily: "DN Sans 09",
51
+ fontFamily: "DN Sans 10",
52
52
  fontSize: 14,
53
53
  lineHeight: 20,
54
54
  fontWeight: 400
55
55
  ),
56
56
  DNSans12: (
57
- fontFamily: "DN Sans 09",
57
+ fontFamily: "DN Sans 10",
58
58
  fontSize: 12,
59
59
  lineHeight: 16,
60
60
  fontWeight: 400
61
61
  ),
62
62
  UIHeadlineLarge: (
63
- fontFamily: "DN Sans 09",
63
+ fontFamily: "DN Sans 10",
64
64
  fontSize: 20,
65
65
  fontWeight: 700,
66
66
  lineHeight: 24
67
67
  ),
68
68
  UIHeadlineSmall: (
69
- fontFamily: "DN Sans 09",
69
+ fontFamily: "DN Sans 10",
70
70
  fontSize: 16,
71
71
  fontWeight: 700,
72
72
  lineHeight: 20
73
73
  ),
74
74
  UISubtitleLargeRegular: (
75
- fontFamily: "DN Sans 09",
75
+ fontFamily: "DN Sans 10",
76
76
  fontSize: 20,
77
77
  fontWeight: 400,
78
78
  letterSpacing: -0.2,
79
79
  lineHeight: 28
80
80
  ),
81
81
  UISubtitleLargeBold: (
82
- fontFamily: "DN Sans 09",
82
+ fontFamily: "DN Sans 10",
83
83
  fontSize: 20,
84
84
  fontWeight: 700,
85
85
  letterSpacing: -0.2,
86
86
  lineHeight: 28
87
87
  ),
88
88
  UISubtitleSmallRegular: (
89
- fontFamily: "DN Sans 09",
89
+ fontFamily: "DN Sans 10",
90
90
  fontSize: 16,
91
91
  fontWeight: 400,
92
92
  lineHeight: 24
93
93
  ),
94
94
  UISubtitleSmallBold: (
95
- fontFamily: "DN Sans 09",
95
+ fontFamily: "DN Sans 10",
96
96
  fontSize: 16,
97
97
  fontWeight: 700,
98
98
  letterSpacing: -0.2,
99
99
  lineHeight: 24
100
100
  ),
101
101
  UIBodyMedium: (
102
- fontFamily: "DN Sans 09",
102
+ fontFamily: "DN Sans 10",
103
103
  fontSize: 16,
104
104
  fontWeight: 500,
105
105
  lineHeight: 24
106
106
  ),
107
107
  UIBodyRegular: (
108
- fontFamily: "DN Sans 09",
108
+ fontFamily: "DN Sans 10",
109
109
  fontSize: 16,
110
110
  fontWeight: 400,
111
111
  lineHeight: 24
112
112
  ),
113
113
  UIInfo: (
114
- fontFamily: "DN Sans 09",
114
+ fontFamily: "DN Sans 10",
115
115
  fontSize: 14,
116
116
  fontWeight: 400,
117
117
  lineHeight: 20
118
118
  ),
119
119
  UILabel: (
120
- fontFamily: "DN Sans 09",
120
+ fontFamily: "DN Sans 10",
121
121
  fontSize: 12,
122
122
  fontWeight: 700,
123
123
  letterSpacing: 0.7,
@@ -125,14 +125,14 @@ $typography: (
125
125
  textTransform: uppercase
126
126
  ),
127
127
  UIMeta: (
128
- fontFamily: "DN Sans 09",
128
+ fontFamily: "DN Sans 10",
129
129
  fontSize: 12,
130
130
  fontWeight: 400,
131
131
  letterSpacing: 0.2,
132
132
  lineHeight: 16
133
133
  ),
134
134
  UILink: (
135
- fontFamily: "DN Sans 09",
135
+ fontFamily: "DN Sans 10",
136
136
  fontSize: 16,
137
137
  fontWeight: 400,
138
138
  letterSpacing: 0.2,
@@ -140,7 +140,7 @@ $typography: (
140
140
  textDecorationLine: underline
141
141
  ),
142
142
  UIButtonLarge: (
143
- fontFamily: "DN Sans 09",
143
+ fontFamily: "DN Sans 10",
144
144
  fontSize: 16,
145
145
  fontWeight: 500,
146
146
  letterSpacing: 0.4,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "0.0.1-alpha.0",
3
+ "version": "0.1.0-alpha.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",