@bonniernews/dn-design-system-web 10.0.3 → 11.0.0
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 +19 -0
- package/components/checkbox/README.md +0 -1
- package/components/checkbox/checkbox.njk +0 -1
- package/components/checkbox/checkbox.scss +14 -22
- package/components/radio-button/README.md +0 -1
- package/components/radio-button/radio-button.njk +0 -1
- package/components/radio-button/radio-button.scss +18 -24
- package/components/switch/README.md +0 -1
- package/components/switch/switch.njk +0 -1
- package/components/switch/switch.scss +5 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [11.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@10.0.3...@bonniernews/dn-design-system-web@11.0.0) (2024-01-18)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
|
|
12
|
+
* **web:** refactor checkbox, radio button and switch components (#1166)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* **app:** accessibility fix ListItem ([#1173](https://github.com/BonnierNews/dn-design-system/issues/1173)) ([4adc447](https://github.com/BonnierNews/dn-design-system/commit/4adc44795825fcf5fedd69cf49291e48231f8948))
|
|
17
|
+
* **web:** refactor checkbox, radio button and switch components ([#1166](https://github.com/BonnierNews/dn-design-system/issues/1166)) ([f64cb81](https://github.com/BonnierNews/dn-design-system/commit/f64cb811ecd877cfad5e638e5ca83c7e760f0ea1))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Maintenance
|
|
21
|
+
|
|
22
|
+
* prerelease packages ([b58adf2](https://github.com/BonnierNews/dn-design-system/commit/b58adf2126c11fd12a8e68106b5d0bb6f1cce47c))
|
|
23
|
+
* prerelease packages ([05297df](https://github.com/BonnierNews/dn-design-system/commit/05297dfdef1188cb5bc719686419391144e9a0eb))
|
|
24
|
+
* upgrade to rn 0.72.9 ([#1167](https://github.com/BonnierNews/dn-design-system/issues/1167)) ([712010a](https://github.com/BonnierNews/dn-design-system/commit/712010ac088dda2c8fee43726f1fd41fb1625757))
|
|
25
|
+
|
|
7
26
|
## [10.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@10.0.2...@bonniernews/dn-design-system-web@10.0.3) (2024-01-16)
|
|
8
27
|
|
|
9
28
|
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
|name | String | yes | | | Also used as id |
|
|
14
14
|
|label | String | no | | | |
|
|
15
15
|
|checked | bool | no | true, false | false | |
|
|
16
|
-
|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
|
|
17
16
|
|disabled | bool | no | true, false | false | |
|
|
18
17
|
|error | bool | no | true, false | false | |
|
|
19
18
|
|errorMessage | String | no | | | |
|
|
@@ -16,7 +16,8 @@ $ds-checkbox__icon-size: 24px;
|
|
|
16
16
|
justify-content: center;
|
|
17
17
|
color: $ds-color-text-primary;
|
|
18
18
|
position: relative;
|
|
19
|
-
padding: ds-spacing($ds-s-
|
|
19
|
+
padding: ds-spacing($ds-s-025);
|
|
20
|
+
|
|
20
21
|
&::before {
|
|
21
22
|
content: "";
|
|
22
23
|
position: absolute;
|
|
@@ -26,14 +27,25 @@ $ds-checkbox__icon-size: 24px;
|
|
|
26
27
|
right: 0;
|
|
27
28
|
bottom: 0;
|
|
28
29
|
}
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
.ds-checkbox__text {
|
|
33
|
+
text-decoration: underline;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@include min-click-surface();
|
|
38
|
+
|
|
29
39
|
.ds-checkbox__text {
|
|
30
40
|
margin: ds-spacing(0 0 0 $ds-s-050, rem);
|
|
31
41
|
@include ds-typography($ds-typography-functional-body02regular);
|
|
42
|
+
|
|
32
43
|
@at-root .ds-force-px#{&} {
|
|
33
44
|
@include ds-typography($ds-typography-functional-body02regular, true);
|
|
34
45
|
margin: ds-spacing(0 0 0 $ds-s-050);
|
|
35
46
|
}
|
|
36
47
|
}
|
|
48
|
+
|
|
37
49
|
.ds-checkbox__icon {
|
|
38
50
|
line-height: 0;
|
|
39
51
|
display: block;
|
|
@@ -81,16 +93,6 @@ $ds-checkbox__icon-size: 24px;
|
|
|
81
93
|
}
|
|
82
94
|
}
|
|
83
95
|
|
|
84
|
-
&:active .ds-checkbox__inner::before {
|
|
85
|
-
background-color: $ds-color-component-primary-overlay;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@include ds-hover() {
|
|
89
|
-
&:hover .ds-checkbox__inner::before {
|
|
90
|
-
background-color: $ds-color-component-primary-overlay;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
96
|
&.ds-form-field__error,
|
|
95
97
|
.invalid {
|
|
96
98
|
.ds-checkbox__inner .ds-checkbox__icon {
|
|
@@ -99,7 +101,7 @@ $ds-checkbox__icon-size: 24px;
|
|
|
99
101
|
|
|
100
102
|
.ds-form-field__error-message {
|
|
101
103
|
margin-top: ds-spacing($ds-s-025);
|
|
102
|
-
padding: ds-spacing(0 $ds-s-
|
|
104
|
+
padding: ds-spacing(0 $ds-s-025 $ds-s-025);
|
|
103
105
|
|
|
104
106
|
.ds-icon {
|
|
105
107
|
margin: ds-spacing(0 $ds-s-050 0 $ds-s-200, rem);
|
|
@@ -111,16 +113,6 @@ $ds-checkbox__icon-size: 24px;
|
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
|
|
114
|
-
.ds-checkbox--condensed {
|
|
115
|
-
.ds-checkbox__inner {
|
|
116
|
-
padding: ds-spacing($ds-s-025);
|
|
117
|
-
}
|
|
118
|
-
&.ds-form-field__error .ds-form-field__error-message,
|
|
119
|
-
.invalid .ds-form-field__error-message {
|
|
120
|
-
padding: ds-spacing(0 $ds-s-025 $ds-s-025);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
116
|
.ds-checkbox input:disabled + .ds-checkbox__inner {
|
|
125
117
|
cursor: not-allowed;
|
|
126
118
|
.ds-checkbox__icon {
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
|buttons[0].value | String | yes | | | Ex. { buttons: [{ value: 'my-value' }] } |
|
|
17
17
|
|buttons[0].label | String | no | | | Ex. { buttons: [{ label: 'my-label' }] } |
|
|
18
18
|
|buttons[0].selected | bool | no | true, false | false | Ex. { buttons: [{ selected: true }] } |
|
|
19
|
-
|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
|
|
20
19
|
|disabled | bool | no | true, false | false | |
|
|
21
20
|
|error | bool | no | true, false | false | |
|
|
22
21
|
|errorMessage | String | no | | | |
|
|
@@ -16,7 +16,8 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
16
16
|
justify-content: center;
|
|
17
17
|
color: $ds-color-text-primary;
|
|
18
18
|
position: relative;
|
|
19
|
-
padding: ds-spacing($ds-s-
|
|
19
|
+
padding: ds-spacing($ds-s-025);
|
|
20
|
+
|
|
20
21
|
&::before {
|
|
21
22
|
content: "";
|
|
22
23
|
position: absolute;
|
|
@@ -26,6 +27,15 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
26
27
|
right: 0;
|
|
27
28
|
bottom: 0;
|
|
28
29
|
}
|
|
30
|
+
|
|
31
|
+
@include min-click-surface();
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
.ds-radio-btn__text {
|
|
35
|
+
text-decoration: underline;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
29
39
|
.ds-radio-btn__text {
|
|
30
40
|
margin: ds-spacing(0 0 0 $ds-s-050, rem);
|
|
31
41
|
@include ds-typography($ds-typography-functional-body02regular);
|
|
@@ -34,6 +44,7 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
34
44
|
margin: ds-spacing(0 0 0 $ds-s-050);
|
|
35
45
|
}
|
|
36
46
|
}
|
|
47
|
+
|
|
37
48
|
.ds-radio-btn__icon {
|
|
38
49
|
line-height: 0;
|
|
39
50
|
display: block;
|
|
@@ -59,16 +70,6 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
59
70
|
display: none;
|
|
60
71
|
}
|
|
61
72
|
}
|
|
62
|
-
|
|
63
|
-
&:active::before {
|
|
64
|
-
background-color: $ds-color-component-primary-overlay;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@include ds-hover() {
|
|
68
|
-
&:hover::before {
|
|
69
|
-
background-color: $ds-color-component-primary-overlay;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
input {
|
|
@@ -99,7 +100,7 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
99
100
|
|
|
100
101
|
.ds-form-field__error-message {
|
|
101
102
|
margin-top: ds-spacing($ds-s-025);
|
|
102
|
-
padding: ds-spacing(0 $ds-s-
|
|
103
|
+
padding: ds-spacing(0 $ds-s-025 $ds-s-025);
|
|
103
104
|
|
|
104
105
|
.ds-icon {
|
|
105
106
|
margin: ds-spacing(0 $ds-s-050 0 $ds-s-200, rem);
|
|
@@ -111,16 +112,6 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
111
112
|
}
|
|
112
113
|
}
|
|
113
114
|
|
|
114
|
-
.ds-radio-btn--condensed {
|
|
115
|
-
.ds-radio-btn__inner {
|
|
116
|
-
padding: ds-spacing($ds-s-025);
|
|
117
|
-
}
|
|
118
|
-
&.ds-form-field__error .ds-form-field__error-message,
|
|
119
|
-
.invalid .ds-form-field__error-message {
|
|
120
|
-
padding: ds-spacing(0 $ds-s-025 $ds-s-025);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
115
|
.ds-radio-btn input:disabled + .ds-radio-btn__inner {
|
|
125
116
|
cursor: not-allowed;
|
|
126
117
|
.ds-radio-btn__icon {
|
|
@@ -129,7 +120,10 @@ $ds-radio-btn__icon-size: 24px;
|
|
|
129
120
|
.ds-radio-btn__text {
|
|
130
121
|
color: $ds-color-text-disabled;
|
|
131
122
|
}
|
|
132
|
-
|
|
133
|
-
|
|
123
|
+
|
|
124
|
+
&:hover {
|
|
125
|
+
.ds-radio-btn__text {
|
|
126
|
+
text-decoration: none;
|
|
127
|
+
}
|
|
134
128
|
}
|
|
135
129
|
}
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
|metaOn | String | no | | på | |
|
|
15
15
|
|metaOff | String | no | | av | |
|
|
16
16
|
|checked | bool | no | true, false | false | |
|
|
17
|
-
|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
|
|
18
17
|
|disabled | bool | no | true, false | false | |
|
|
19
18
|
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
20
19
|
|classNames | String | no | | | Ex. "my-special-class" |
|
|
@@ -12,11 +12,11 @@ $ds-switch__container-width: 44px;
|
|
|
12
12
|
align-items: flex-start;
|
|
13
13
|
|
|
14
14
|
.ds-switch__inner {
|
|
15
|
-
padding: ds-spacing($ds-s-075 0);
|
|
16
15
|
cursor: pointer;
|
|
17
16
|
display: inline-flex;
|
|
18
17
|
align-items: center;
|
|
19
18
|
justify-content: center;
|
|
19
|
+
|
|
20
20
|
.ds-switch__meta {
|
|
21
21
|
margin: ds-spacing(0 $ds-s-050 0 0);
|
|
22
22
|
color: $ds-color-text-primary-02;
|
|
@@ -24,10 +24,12 @@ $ds-switch__container-width: 44px;
|
|
|
24
24
|
@at-root .ds-force-px#{&} {
|
|
25
25
|
@include ds-typography($ds-typography-functional-body01regular, true);
|
|
26
26
|
}
|
|
27
|
+
|
|
27
28
|
.ds-switch__meta-on {
|
|
28
29
|
display: none;
|
|
29
30
|
}
|
|
30
31
|
}
|
|
32
|
+
|
|
31
33
|
.ds-switch__box {
|
|
32
34
|
line-height: 0;
|
|
33
35
|
display: block;
|
|
@@ -52,6 +54,8 @@ $ds-switch__container-width: 44px;
|
|
|
52
54
|
left: 0;
|
|
53
55
|
border-radius: inherit;
|
|
54
56
|
}
|
|
57
|
+
|
|
58
|
+
@include min-click-surface();
|
|
55
59
|
}
|
|
56
60
|
.ds-switch__knob {
|
|
57
61
|
background-color: $ds-color-component-static-white;
|
|
@@ -118,10 +122,6 @@ $ds-switch__container-width: 44px;
|
|
|
118
122
|
background-color: $ds-color-component-primary-overlay-02;
|
|
119
123
|
}
|
|
120
124
|
|
|
121
|
-
.ds-switch--condensed .ds-switch__inner {
|
|
122
|
-
padding: 0;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
125
|
.ds-switch input:disabled + .ds-switch__inner {
|
|
126
126
|
cursor: not-allowed;
|
|
127
127
|
.ds-switch__meta {
|
package/package.json
CHANGED