@cfpb/cfpb-design-system 5.1.0 → 5.2.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 +18 -1
- package/dist/index.css +1 -1
- package/dist/index.js +263 -263
- package/package.json +1 -1
- package/src/components/cfpb-forms/form-field.scss +3 -4
- package/src/components/cfpb-forms/multiselect.js +1 -2
- package/src/components/cfpb-forms/multiselect.scss +3 -2
- package/src/components/cfpb-forms/select.scss +3 -2
- package/src/components/cfpb-icons/icons-lib.js +680 -0
- package/src/components/cfpb-icons/icons-lib.scss +679 -0
- package/src/elements/cfpb-checkbox-icon/cfpb-checkbox-icon.component.scss +3 -4
- package/src/elements/cfpb-expandable/index.js +4 -2
- package/src/elements/cfpb-form-alert/index.js +5 -3
- package/src/elements/cfpb-form-search-input/index.js +4 -2
- package/src/elements/cfpb-list-item/cfpb-list-item.component.scss +2 -1
- package/src/elements/cfpb-pagination/index.js +1 -2
- package/src/elements/cfpb-select/index.js +4 -2
- package/src/elements/cfpb-tag-filter/index.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
|
|
3
3
|
@use '@cfpb/cfpb-design-system/src/utilities' as *;
|
|
4
|
+
@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
|
|
4
5
|
|
|
5
6
|
.m-form-field {
|
|
6
7
|
// Theme variables.
|
|
@@ -137,16 +138,14 @@
|
|
|
137
138
|
}
|
|
138
139
|
|
|
139
140
|
&:checked + .a-label::before {
|
|
140
|
-
|
|
141
|
+
background-image: $cfpb-background-icon-svg-approved;
|
|
141
142
|
|
|
142
143
|
background-size: auto $cf-icon-height;
|
|
143
144
|
background-repeat: no-repeat;
|
|
144
145
|
background-position: center 0;
|
|
145
146
|
}
|
|
146
147
|
&:disabled:checked + .a-label::before {
|
|
147
|
-
|
|
148
|
-
// For some reason SVG isn't accepting hex values for the fill.
|
|
149
|
-
--cfpb-background-icon-svg: 'approved rgb(90,93,97)';
|
|
148
|
+
background-image: $cfpb-background-icon-svg-approved-gray;
|
|
150
149
|
}
|
|
151
150
|
}
|
|
152
151
|
}
|
|
@@ -10,8 +10,7 @@ import { create } from './multiselect-utils.js';
|
|
|
10
10
|
|
|
11
11
|
import * as MultiselectStyles from './multiselect.scss';
|
|
12
12
|
|
|
13
|
-
import
|
|
14
|
-
const closeIcon = closeIconSrc.default;
|
|
13
|
+
import { errorIcon as closeIcon } from '../cfpb-icons/icons-lib.js';
|
|
15
14
|
|
|
16
15
|
const BASE_CLASS = 'o-multiselect';
|
|
17
16
|
const CHECKBOX_INPUT_CLASS = 'a-checkbox';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
|
|
3
|
+
@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
|
|
3
4
|
|
|
4
5
|
// Initial and no-js state.
|
|
5
6
|
select.o-multiselect {
|
|
@@ -38,7 +39,7 @@ select.o-multiselect {
|
|
|
38
39
|
bottom: 0;
|
|
39
40
|
background-color: var(--select-icon-bg-default);
|
|
40
41
|
|
|
41
|
-
|
|
42
|
+
background-image: $cfpb-background-icon-svg-down;
|
|
42
43
|
|
|
43
44
|
background-size: auto $cf-icon-height;
|
|
44
45
|
background-repeat: no-repeat;
|
|
@@ -91,7 +92,7 @@ select.o-multiselect {
|
|
|
91
92
|
|
|
92
93
|
// Reverse arrow when search drop-down is open.
|
|
93
94
|
.o-multiselect__header::after {
|
|
94
|
-
|
|
95
|
+
background-image: $cfpb-background-icon-svg-up;
|
|
95
96
|
}
|
|
96
97
|
}
|
|
97
98
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
|
|
3
|
+
@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
|
|
3
4
|
|
|
4
5
|
.a-select {
|
|
5
6
|
--select-border: var(--select-border-default);
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
bottom: 0;
|
|
75
76
|
background-color: var(--select-icon-bg-default);
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
background-image: $cfpb-background-icon-svg-down;
|
|
78
79
|
|
|
79
80
|
background-size: auto $cf-icon-height;
|
|
80
81
|
background-repeat: no-repeat;
|
|
@@ -87,7 +88,7 @@
|
|
|
87
88
|
// Unfortunately, we can't target this to apply when only
|
|
88
89
|
// the select[disabled] is present and need the additional class.
|
|
89
90
|
&--disabled::after {
|
|
90
|
-
|
|
91
|
+
background-image: $cfpb-background-icon-svg-down-gray;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
&--error {
|