@bonniernews/dn-design-system-web 4.7.2 → 4.7.3
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,15 @@
|
|
|
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
|
+
## 4.7.3 (2023-09-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **web:** add iconPosition to floating button ([#988](https://github.com/BonnierNews/dn-design-system/issues/988)) ([b4de9b8](https://github.com/BonnierNews/dn-design-system/commit/b4de9b82a5d5f0a9f7f388b05956b6889e726f82))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## 4.7.2 (2023-09-14)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
|
|
14
14
|
|size| String | no | default, small | default | |
|
|
15
15
|
|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
|
|
16
|
+
|iconPosition | String | no | none, left, right | none | |
|
|
16
17
|
|loading | bool | no | true, false | false | |
|
|
17
18
|
|href | String | no | | | If href is set the button will be rendered as an a-tag |
|
|
18
19
|
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
{% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
|
|
27
27
|
{% endif %}
|
|
28
28
|
|
|
29
|
-
{%- if params.iconName %}
|
|
30
|
-
{% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon"), additionalClasses) %}
|
|
29
|
+
{%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
|
|
30
|
+
{% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon", classNamePrefix + "icon" + "-" + params.iconPosition), additionalClasses) %}
|
|
31
31
|
{% set iconSvg = IconUse({ icon: params.iconName }) %}
|
|
32
32
|
{% endif %}
|
|
33
33
|
|
|
@@ -3,7 +3,57 @@
|
|
|
3
3
|
@use "../icon-sprite/icon-sprite.scss";
|
|
4
4
|
@use "../spinner/spinner.scss" as *;
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
.ds-floating-btn {
|
|
7
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5, rem)};
|
|
8
|
+
--ds-floating-btn__icon-size: #{ds-px-to-rem(24px)};
|
|
9
|
+
|
|
10
|
+
&.ds-force-px {
|
|
11
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5)};
|
|
12
|
+
--ds-floating-btn__icon-size: 24px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&.ds-floating-btn--icon-left {
|
|
16
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4, rem)};
|
|
17
|
+
--ds-floating-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
|
|
18
|
+
|
|
19
|
+
&.ds-force-px {
|
|
20
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x5 $ds-sc-x3 $ds-sc-x4)};
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.ds-floating-btn--icon-right {
|
|
25
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5, rem)};
|
|
26
|
+
--ds-floating-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
|
|
27
|
+
|
|
28
|
+
&.ds-force-px {
|
|
29
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x4 $ds-sc-x3 $ds-sc-x5)};
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&.ds-floating-btn--small {
|
|
34
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5, rem)};
|
|
35
|
+
|
|
36
|
+
&.ds-force-px {
|
|
37
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5)};
|
|
38
|
+
|
|
39
|
+
&.ds-floating-btn--icon-left {
|
|
40
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4)};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.ds-floating-btn--icon-right {
|
|
44
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5)};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.ds-floating-btn--icon-left {
|
|
49
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x5 $ds-sc-x2 $ds-sc-x4, rem)};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&.ds-floating-btn--icon-right {
|
|
53
|
+
--ds-floating-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x4 $ds-sc-x2 $ds-sc-x5, rem)};
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
7
57
|
|
|
8
58
|
.ds-floating-btn {
|
|
9
59
|
cursor: pointer;
|
|
@@ -39,7 +89,7 @@ $ds-floating-btn__icon-size: 24px;
|
|
|
39
89
|
color: $ds-color-text-secondary;
|
|
40
90
|
background-color: $ds-color-component-primary;
|
|
41
91
|
border-radius: 100px;
|
|
42
|
-
padding:
|
|
92
|
+
padding: var(--ds-floating-btn__inner-padding);
|
|
43
93
|
position: relative;
|
|
44
94
|
box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
|
|
45
95
|
|
|
@@ -84,23 +134,16 @@ $ds-floating-btn__icon-size: 24px;
|
|
|
84
134
|
@include ds-loading();
|
|
85
135
|
}
|
|
86
136
|
|
|
87
|
-
.ds-floating-btn--small .ds-floating-btn__inner {
|
|
88
|
-
padding: ds-px-to-rem(ds-spacing-component($ds-sc-x2)) ds-px-to-rem(ds-spacing-component($ds-sc-x5));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
137
|
.ds-floating-btn--icon .ds-floating-btn__inner {
|
|
92
138
|
display: inline-flex;
|
|
93
139
|
align-items: center;
|
|
94
140
|
justify-content: center;
|
|
95
|
-
padding-right: ds-px-to-rem(
|
|
96
|
-
ds-spacing-component($ds-sc-x5)
|
|
97
|
-
);
|
|
98
141
|
|
|
99
142
|
.ds-icon {
|
|
100
143
|
display: flex;
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
144
|
+
margin: var(--ds-floating-btn__icon-margin);
|
|
145
|
+
height: var(--ds-floating-btn__icon-size);
|
|
146
|
+
width: var(--ds-floating-btn__icon-size);
|
|
104
147
|
|
|
105
148
|
svg {
|
|
106
149
|
fill: currentColor;
|
|
@@ -108,26 +151,10 @@ $ds-floating-btn__icon-size: 24px;
|
|
|
108
151
|
}
|
|
109
152
|
}
|
|
110
153
|
|
|
111
|
-
.ds-floating-btn.ds-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
@include ds-typography($ds-typography-detailstandard-button, true);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&.ds-floating-btn--icon .ds-floating-btn__inner {
|
|
118
|
-
.ds-icon {
|
|
119
|
-
margin: ds-spacing-component(0 0 0 $ds-sc-x2);
|
|
120
|
-
height: $ds-floating-btn__icon-size;
|
|
121
|
-
width: $ds-floating-btn__icon-size;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
154
|
+
.ds-floating-btn--icon-left .ds-floating-btn__inner {
|
|
155
|
+
flex-direction: row-reverse;
|
|
156
|
+
}
|
|
124
157
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
padding: ds-spacing-component($ds-sc-x2 $ds-sc-x5);
|
|
128
|
-
}
|
|
129
|
-
&.ds-floating-btn--icon .ds-floating-btn__inner {
|
|
130
|
-
padding-right: ds-spacing-component($ds-sc-x4);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
158
|
+
.ds-floating-btn.ds-force-px .ds-floating-btn__inner {
|
|
159
|
+
@include ds-typography($ds-typography-detailstandard-button, true);
|
|
133
160
|
}
|
package/package.json
CHANGED