@kaizen/components 3.0.1 → 3.0.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/dist/cjs/src/ClearButton/ClearButton.cjs +1 -1
- package/dist/cjs/src/ClearButton/ClearButton.module.css.cjs +8 -0
- package/dist/cjs/src/Radio/Radio/Radio.cjs +1 -1
- package/dist/cjs/src/Radio/Radio/Radio.module.css.cjs +9 -0
- package/dist/cjs/src/Radio/RadioField/RadioField.cjs +1 -1
- package/dist/cjs/src/Radio/RadioField/RadioField.module.css.cjs +8 -0
- package/dist/cjs/src/Radio/RadioGroup/RadioGroup.cjs +1 -1
- package/dist/cjs/src/Radio/RadioGroup/RadioGroup.module.css.cjs +9 -0
- package/dist/esm/src/ClearButton/ClearButton.mjs +1 -1
- package/dist/esm/src/ClearButton/ClearButton.module.css.mjs +6 -0
- package/dist/esm/src/Radio/Radio/Radio.mjs +1 -1
- package/dist/esm/src/Radio/Radio/Radio.module.css.mjs +7 -0
- package/dist/esm/src/Radio/RadioField/RadioField.mjs +1 -1
- package/dist/esm/src/Radio/RadioField/RadioField.module.css.mjs +6 -0
- package/dist/esm/src/Radio/RadioGroup/RadioGroup.mjs +1 -1
- package/dist/esm/src/Radio/RadioGroup/RadioGroup.module.css.mjs +7 -0
- package/dist/styles.css +154 -120
- package/locales/kk-KZ.json +259 -0
- package/package.json +17 -17
- package/src/ClearButton/{ClearButton.module.scss → ClearButton.module.css} +12 -10
- package/src/ClearButton/ClearButton.tsx +1 -1
- package/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss +2 -0
- package/src/Radio/Radio/Radio.module.css +81 -0
- package/src/Radio/Radio/Radio.tsx +1 -1
- package/src/Radio/RadioField/RadioField.module.css +37 -0
- package/src/Radio/RadioField/RadioField.tsx +1 -1
- package/src/Radio/RadioGroup/{RadioGroup.module.scss → RadioGroup.module.css} +4 -7
- package/src/Radio/RadioGroup/RadioGroup.tsx +1 -1
- package/dist/cjs/src/ClearButton/ClearButton.module.scss.cjs +0 -8
- package/dist/cjs/src/Radio/Radio/Radio.module.scss.cjs +0 -9
- package/dist/cjs/src/Radio/RadioField/RadioField.module.scss.cjs +0 -8
- package/dist/cjs/src/Radio/RadioGroup/RadioGroup.module.scss.cjs +0 -9
- package/dist/esm/src/ClearButton/ClearButton.module.scss.mjs +0 -6
- package/dist/esm/src/Radio/Radio/Radio.module.scss.mjs +0 -7
- package/dist/esm/src/Radio/RadioField/RadioField.module.scss.mjs +0 -6
- package/dist/esm/src/Radio/RadioGroup/RadioGroup.module.scss.mjs +0 -7
- package/src/Radio/Radio/Radio.module.scss +0 -81
- package/src/Radio/RadioField/RadioField.module.scss +0 -50
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
{
|
|
2
|
+
"smartling" : {
|
|
3
|
+
"string_format" : "icu",
|
|
4
|
+
"translate_paths" : [
|
|
5
|
+
{
|
|
6
|
+
"instruction" : "*/description",
|
|
7
|
+
"key" : "{*}/message",
|
|
8
|
+
"path" : "*/message"
|
|
9
|
+
}],
|
|
10
|
+
"variants_enabled" : true
|
|
11
|
+
},
|
|
12
|
+
"date.validation.invalidDate" : {
|
|
13
|
+
"description" : "Error message when the user enters an invalid date and we do not know their input value",
|
|
14
|
+
"message" : "Date is invalid"
|
|
15
|
+
},
|
|
16
|
+
"date.validation.invalidDateWithValue" : {
|
|
17
|
+
"description" : "Error message when the user enters an invalid date and we know their input value",
|
|
18
|
+
"message" : "{inputValue} is an invalid date"
|
|
19
|
+
},
|
|
20
|
+
"date.validation.rangeEndBeforeRangeStart" : {
|
|
21
|
+
"description" : "Error message when the user tries to select an end date earlier than the start date",
|
|
22
|
+
"message" : "Cannot be earlier than the selection in \"{startDateFieldLabel}\""
|
|
23
|
+
},
|
|
24
|
+
"date.validation.unavailableDate" : {
|
|
25
|
+
"description" : "Error message when the user tries to select a date that is unavailable",
|
|
26
|
+
"message" : "{inputValue} is not available, try another date"
|
|
27
|
+
},
|
|
28
|
+
"dateInputDescription.inputFormat" : {
|
|
29
|
+
"description" : "Label for the 'Input format' field",
|
|
30
|
+
"message" : "Input format"
|
|
31
|
+
},
|
|
32
|
+
"datePicker.calendarLabelDescription" : {
|
|
33
|
+
"description" : "Label for the search input",
|
|
34
|
+
"message" : "Select date from calendar for:"
|
|
35
|
+
},
|
|
36
|
+
"filterBar.addFiltersMenu.buttonLabel" : {
|
|
37
|
+
"description" : "Menu button label to show additional available filter options",
|
|
38
|
+
"message" : "Add filters"
|
|
39
|
+
},
|
|
40
|
+
"filterBar.clearAllButton.ariaLabel" : {
|
|
41
|
+
"description" : "Button aria-label to clear all values within the filter bar",
|
|
42
|
+
"message" : "Clear all filters"
|
|
43
|
+
},
|
|
44
|
+
"filterBar.clearAllButton.label" : {
|
|
45
|
+
"description" : "Button label to clear all values within the filter bar",
|
|
46
|
+
"message" : "Clear all"
|
|
47
|
+
},
|
|
48
|
+
"filterButton.removable.removeButtonLabel" : {
|
|
49
|
+
"description" : "Button label to remove a single filter from the filter bar",
|
|
50
|
+
"message" : "Remove filter - {filterLabel}"
|
|
51
|
+
},
|
|
52
|
+
"filterDatePickerDateInputField.dateInputLabelFallback" : {
|
|
53
|
+
"description" : "Default label for date input field",
|
|
54
|
+
"message" : "Date"
|
|
55
|
+
},
|
|
56
|
+
"filterDateRangePicker.dateFrom" : {
|
|
57
|
+
"description" : "Label for the 'Date from' field",
|
|
58
|
+
"message" : "Date from"
|
|
59
|
+
},
|
|
60
|
+
"filterDateRangePicker.dateTo" : {
|
|
61
|
+
"description" : "Label for the 'date to' field",
|
|
62
|
+
"message" : "Date to"
|
|
63
|
+
},
|
|
64
|
+
"filterMultiSelectClearButton.label" : {
|
|
65
|
+
"description" : "Clear button label for filter multi-select",
|
|
66
|
+
"message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
|
|
67
|
+
},
|
|
68
|
+
"filterMultiSelectMultiSelectOption.available" : {
|
|
69
|
+
"description" : "Number of filter items available",
|
|
70
|
+
"message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
|
|
71
|
+
},
|
|
72
|
+
"filterMultiSelectSearchInput.label" : {
|
|
73
|
+
"description" : "Label for the search input",
|
|
74
|
+
"message" : "Filter options by search query"
|
|
75
|
+
},
|
|
76
|
+
"filterMultiSelectSearchInput.placeholder" : {
|
|
77
|
+
"description" : "Placeholder for the search input",
|
|
78
|
+
"message" : "Search…"
|
|
79
|
+
},
|
|
80
|
+
"filterMultiSelectSelectAllButton.label" : {
|
|
81
|
+
"description" : "Select all button in filter multi select",
|
|
82
|
+
"message" : "Select all"
|
|
83
|
+
},
|
|
84
|
+
"inputSearch.clear" : {
|
|
85
|
+
"description" : "Label for the clear search button",
|
|
86
|
+
"message" : "Clear search"
|
|
87
|
+
},
|
|
88
|
+
"kz.rte.bold" : {
|
|
89
|
+
"description" : "Label for the \"Bold\" button in a text editor",
|
|
90
|
+
"message" : "Bold"
|
|
91
|
+
},
|
|
92
|
+
"kz.rte.bullet_list" : {
|
|
93
|
+
"description" : "Label for the \"Bullet list\" button in a text editor",
|
|
94
|
+
"message" : "Bullet list"
|
|
95
|
+
},
|
|
96
|
+
"kz.rte.decrease_indent" : {
|
|
97
|
+
"description" : "Label for the \"Decrease indent\" button in a text editor",
|
|
98
|
+
"message" : "Decrease indent"
|
|
99
|
+
},
|
|
100
|
+
"kz.rte.increase_indent" : {
|
|
101
|
+
"description" : "Label for the \"Increase indent\" button in a text editor",
|
|
102
|
+
"message" : "Increase indent"
|
|
103
|
+
},
|
|
104
|
+
"kz.rte.italic" : {
|
|
105
|
+
"description" : "Label for the \"Italic\" button in a text editor",
|
|
106
|
+
"message" : "Italic"
|
|
107
|
+
},
|
|
108
|
+
"kz.rte.link" : {
|
|
109
|
+
"description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
|
|
110
|
+
"message" : "Link"
|
|
111
|
+
},
|
|
112
|
+
"kz.rte.numbered_list" : {
|
|
113
|
+
"description" : "Label for the \"Numbered list\" button in a text editor",
|
|
114
|
+
"message" : "Numbered list"
|
|
115
|
+
},
|
|
116
|
+
"kz.rte.toolbar.aria_label" : {
|
|
117
|
+
"description" : "Label for the text formatting toolbar in a Rich Text Editor",
|
|
118
|
+
"message" : "Text formatting"
|
|
119
|
+
},
|
|
120
|
+
"kz.rte.underline" : {
|
|
121
|
+
"description" : "Label for the \"Underline\" button in a text editor",
|
|
122
|
+
"message" : "Underline"
|
|
123
|
+
},
|
|
124
|
+
"kzErrorPage" : {
|
|
125
|
+
"description" : "Label for contact button",
|
|
126
|
+
"message" : "Contact support"
|
|
127
|
+
},
|
|
128
|
+
"kzErrorPage.400.message" : {
|
|
129
|
+
"description" : "Call to action instructions for the user",
|
|
130
|
+
"message" : "Problem loading page right now. Try again or head home."
|
|
131
|
+
},
|
|
132
|
+
"kzErrorPage.400.title" : {
|
|
133
|
+
"description" : "Heading for page",
|
|
134
|
+
"message" : "Problem loading page"
|
|
135
|
+
},
|
|
136
|
+
"kzErrorPage.401.message" : {
|
|
137
|
+
"description" : "Call to action instructions for the user",
|
|
138
|
+
"message" : "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home"
|
|
139
|
+
},
|
|
140
|
+
"kzErrorPage.401.title" : {
|
|
141
|
+
"description" : "Main title for page",
|
|
142
|
+
"message" : "You can't view this page"
|
|
143
|
+
},
|
|
144
|
+
"kzErrorPage.403.message" : {
|
|
145
|
+
"description" : "Call to action instructions for the user",
|
|
146
|
+
"message" : "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home"
|
|
147
|
+
},
|
|
148
|
+
"kzErrorPage.403.title" : {
|
|
149
|
+
"description" : "Main title for page",
|
|
150
|
+
"message" : "You can't view this page"
|
|
151
|
+
},
|
|
152
|
+
"kzErrorPage.404.message" : {
|
|
153
|
+
"description" : "Call to action instructions for the user",
|
|
154
|
+
"message" : "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home"
|
|
155
|
+
},
|
|
156
|
+
"kzErrorPage.404.title" : {
|
|
157
|
+
"description" : "Main title of page",
|
|
158
|
+
"message" : "Page not found"
|
|
159
|
+
},
|
|
160
|
+
"kzErrorPage.413" : {
|
|
161
|
+
"description" : "Call to action instructions for the user",
|
|
162
|
+
"message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
|
|
163
|
+
},
|
|
164
|
+
"kzErrorPage.413.title" : {
|
|
165
|
+
"description" : "Main title of page",
|
|
166
|
+
"message" : "Something's gone wrong on our side"
|
|
167
|
+
},
|
|
168
|
+
"kzErrorPage.422.message" : {
|
|
169
|
+
"description" : "Call to action instructions for the user",
|
|
170
|
+
"message" : "Sorry but your change couldn't be made. Go back and try again, or head to Home"
|
|
171
|
+
},
|
|
172
|
+
"kzErrorPage.422.title" : {
|
|
173
|
+
"description" : "Main title of page",
|
|
174
|
+
"message" : "Change couldn't be made"
|
|
175
|
+
},
|
|
176
|
+
"kzErrorPage.500" : {
|
|
177
|
+
"description" : "Call to action instructions for the user",
|
|
178
|
+
"message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
|
|
179
|
+
},
|
|
180
|
+
"kzErrorPage.500.title" : {
|
|
181
|
+
"description" : "Main title of page",
|
|
182
|
+
"message" : "Something's gone wrong on our side"
|
|
183
|
+
},
|
|
184
|
+
"kzErrorPage.502.message" : {
|
|
185
|
+
"description" : "Call to action instructions for the user",
|
|
186
|
+
"message" : "Sorry about this. The best thing to do is go back and try again."
|
|
187
|
+
},
|
|
188
|
+
"kzErrorPage.502.title" : {
|
|
189
|
+
"description" : "Main title of page",
|
|
190
|
+
"message" : "You can't view this page"
|
|
191
|
+
},
|
|
192
|
+
"kzErrorPage.503.message" : {
|
|
193
|
+
"description" : "Call to action instructions for the user",
|
|
194
|
+
"message" : "Sorry about this. The best thing to do is go back and try again."
|
|
195
|
+
},
|
|
196
|
+
"kzErrorPage.503.title" : {
|
|
197
|
+
"description" : "Main title of page",
|
|
198
|
+
"message" : "You can't view this page"
|
|
199
|
+
},
|
|
200
|
+
"kzErrorPage.504.message" : {
|
|
201
|
+
"description" : "Call to action instructions for the user",
|
|
202
|
+
"message" : "Sorry about this. The best thing to do is go back and try again."
|
|
203
|
+
},
|
|
204
|
+
"kzErrorPage.504.title" : {
|
|
205
|
+
"description" : "Main title of page",
|
|
206
|
+
"message" : "You can't view this page"
|
|
207
|
+
},
|
|
208
|
+
"kzErrorPage.errorCode" : {
|
|
209
|
+
"message" : "Error code {code}"
|
|
210
|
+
},
|
|
211
|
+
"kzErrorPage.goToHome" : {
|
|
212
|
+
"description" : "Home button label",
|
|
213
|
+
"message" : "Go to Home"
|
|
214
|
+
},
|
|
215
|
+
"kzGenericTile.infoButtonLabel" : {
|
|
216
|
+
"description" : "Prompts user to interact with button to reveal more information",
|
|
217
|
+
"message" : "View more information:"
|
|
218
|
+
},
|
|
219
|
+
"kzGenericTile.infoButtonReturnLabel" : {
|
|
220
|
+
"description" : "Prompts user to interact with button to hide information",
|
|
221
|
+
"message" : "Hide information:"
|
|
222
|
+
},
|
|
223
|
+
"kzTitleBlock.combinedOverflowMenuLabel" : {
|
|
224
|
+
"description" : "Label for the dropdown menu which displays additional action items and secondary actions",
|
|
225
|
+
"message" : "Open combined secondary and overflow menu"
|
|
226
|
+
},
|
|
227
|
+
"kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
|
|
228
|
+
"description" : "Label for the dropdown menu which displays the default action item",
|
|
229
|
+
"message" : "Open default action overflow menu"
|
|
230
|
+
},
|
|
231
|
+
"kzTitleBlock.hamburgerMenuLabel" : {
|
|
232
|
+
"description" : "Label for the dropdown menu which displays navigation items",
|
|
233
|
+
"message" : "Мәзірді ашу"
|
|
234
|
+
},
|
|
235
|
+
"kzTitleBlock.overflowMenuAriaLabel" : {
|
|
236
|
+
"description" : "Aria Label for the dropdown menu which displays additional action items",
|
|
237
|
+
"message" : "Opens overflow menu"
|
|
238
|
+
},
|
|
239
|
+
"kzTitleBlock.overflowMenuLabel" : {
|
|
240
|
+
"description" : "Label for the dropdown menu which displays additional action items",
|
|
241
|
+
"message" : "Menu"
|
|
242
|
+
},
|
|
243
|
+
"kzTitleBlock.secondaryAndOverflowMenuLabel" : {
|
|
244
|
+
"description" : "Label for the dropdown menu which displays additional actions",
|
|
245
|
+
"message" : "Open secondary and overflow menu"
|
|
246
|
+
},
|
|
247
|
+
"select.clearButtonAlt" : {
|
|
248
|
+
"description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
|
|
249
|
+
"message" : "Clear selection: {field}"
|
|
250
|
+
},
|
|
251
|
+
"singleSelect.chevronButton" : {
|
|
252
|
+
"description" : "Aria label text for the SingleSelect button to open and close suggestions list",
|
|
253
|
+
"message" : "Show suggestions for {field}"
|
|
254
|
+
},
|
|
255
|
+
"singleSelect.clearButtonAlt_v2" : {
|
|
256
|
+
"description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
|
|
257
|
+
"message" : "Clear selection: {field}"
|
|
258
|
+
}
|
|
259
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "Kaizen component library",
|
|
5
5
|
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
|
|
6
6
|
"homepage": "https://cultureamp.design",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"kaizen-codemod": "./bin/codemod.sh"
|
|
78
78
|
},
|
|
79
79
|
"dependencies": {
|
|
80
|
-
"@floating-ui/react-dom": "^2.1.
|
|
80
|
+
"@floating-ui/react-dom": "^2.1.8",
|
|
81
81
|
"@headlessui/react": "^2.2.9",
|
|
82
82
|
"@internationalized/date": "^3.8.2",
|
|
83
83
|
"@popperjs/core": "^2.11.8",
|
|
@@ -110,19 +110,19 @@
|
|
|
110
110
|
"prosemirror-schema-basic": "^1.2.4",
|
|
111
111
|
"prosemirror-schema-list": "^1.5.1",
|
|
112
112
|
"prosemirror-state": "^1.4.4",
|
|
113
|
-
"prosemirror-transform": "^1.
|
|
113
|
+
"prosemirror-transform": "^1.11.0",
|
|
114
114
|
"prosemirror-utils": "^1.2.2",
|
|
115
|
-
"prosemirror-view": "^1.41.
|
|
115
|
+
"prosemirror-view": "^1.41.6",
|
|
116
116
|
"react-animate-height": "^3.2.3",
|
|
117
117
|
"react-aria": "^3.41.1",
|
|
118
118
|
"react-aria-components": "^1.10.1",
|
|
119
119
|
"react-day-picker": "9.6.7",
|
|
120
|
-
"react-focus-lock": "^2.13.
|
|
121
|
-
"react-focus-on": "^3.10.
|
|
120
|
+
"react-focus-lock": "^2.13.7",
|
|
121
|
+
"react-focus-on": "^3.10.1",
|
|
122
122
|
"react-popper": "^2.3.0",
|
|
123
123
|
"react-select": "^5.10.2",
|
|
124
124
|
"react-textfit": "^1.1.1",
|
|
125
|
-
"use-debounce": "^10.0
|
|
125
|
+
"use-debounce": "^10.1.0",
|
|
126
126
|
"uuid": "^13.0.0"
|
|
127
127
|
},
|
|
128
128
|
"dependenciesComments": {
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
},
|
|
131
131
|
"devDependencies": {
|
|
132
132
|
"@cultureamp/frontend-apis": "13.3.0",
|
|
133
|
-
"@cultureamp/i18n-react-intl": "^
|
|
133
|
+
"@cultureamp/i18n-react-intl": "^4.0.0",
|
|
134
134
|
"@cultureamp/package-bundler": "^2.4.4",
|
|
135
135
|
"@testing-library/dom": "^10.4.1",
|
|
136
136
|
"@types/jest-axe": "^3.5.9",
|
|
@@ -138,30 +138,30 @@
|
|
|
138
138
|
"@types/react-highlight": "^0.12.8",
|
|
139
139
|
"@types/react-textfit": "^1.1.4",
|
|
140
140
|
"@types/uuid": "^11.0.0",
|
|
141
|
-
"autoprefixer": "^10.4.
|
|
141
|
+
"autoprefixer": "^10.4.27",
|
|
142
142
|
"concat-cli": "^4.0.0",
|
|
143
143
|
"identity-obj-proxy": "^3.0.0",
|
|
144
144
|
"jest-axe": "^10.0.0",
|
|
145
145
|
"lodash.isempty": "^4.4.0",
|
|
146
146
|
"normalize.css": "^8.0.1",
|
|
147
|
-
"postcss": "^8.5.
|
|
147
|
+
"postcss": "^8.5.8",
|
|
148
148
|
"postcss-cli": "^11.0.1",
|
|
149
149
|
"postcss-import": "^16.1.1",
|
|
150
|
-
"postcss-preset-env": "^
|
|
150
|
+
"postcss-preset-env": "^11.2.0",
|
|
151
151
|
"postcss-scss": "^4.0.9",
|
|
152
152
|
"query-string": "^9.3.1",
|
|
153
|
-
"react": "^19.2.
|
|
154
|
-
"react-dom": "^19.2.
|
|
153
|
+
"react": "^19.2.4",
|
|
154
|
+
"react-dom": "^19.2.4",
|
|
155
155
|
"react-highlight": "^0.15.0",
|
|
156
156
|
"react-intl": "^7.1.14",
|
|
157
|
-
"rollup": "^4.
|
|
157
|
+
"rollup": "^4.59.0",
|
|
158
158
|
"sass": "1.79.6",
|
|
159
159
|
"serialize-query-params": "^2.0.4",
|
|
160
|
-
"svgo": "^4.0.
|
|
160
|
+
"svgo": "^4.0.1",
|
|
161
161
|
"ts-patch": "^3.3.0",
|
|
162
162
|
"tslib": "^2.8.1",
|
|
163
|
-
"tsx": "^4.
|
|
164
|
-
"@kaizen/design-tokens": "11.0.
|
|
163
|
+
"tsx": "^4.21.0",
|
|
164
|
+
"@kaizen/design-tokens": "11.0.2"
|
|
165
165
|
},
|
|
166
166
|
"devDependenciesComments": {
|
|
167
167
|
"sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
@import '~@kaizen/design-tokens/sass/border';
|
|
2
|
-
@import '~@kaizen/design-tokens/sass/color';
|
|
3
|
-
@import '../../styles/utils/button-reset';
|
|
4
|
-
|
|
5
1
|
@layer kz-components {
|
|
6
2
|
.clearButton {
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
/* Button reset */
|
|
4
|
+
appearance: none;
|
|
5
|
+
background: transparent;
|
|
6
|
+
color: inherit;
|
|
7
|
+
font: inherit;
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
border: none;
|
|
9
11
|
position: relative;
|
|
10
12
|
display: inline-flex;
|
|
11
13
|
border-radius: 100%;
|
|
@@ -22,20 +24,20 @@
|
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
.default {
|
|
25
|
-
color:
|
|
27
|
+
color: var(--color-gray-500);
|
|
26
28
|
|
|
27
29
|
&:hover,
|
|
28
30
|
&:focus-visible {
|
|
29
|
-
color:
|
|
31
|
+
color: var(--color-purple-800);
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
.reversed {
|
|
34
|
-
color:
|
|
36
|
+
color: rgb(var(--color-white-rgb), 0.8);
|
|
35
37
|
|
|
36
38
|
&:hover,
|
|
37
39
|
&:focus-visible {
|
|
38
|
-
color:
|
|
40
|
+
color: var(--color-white);
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
&:focus-visible {
|
|
@@ -2,7 +2,7 @@ import React, { type ButtonHTMLAttributes } from 'react'
|
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { Icon } from '~components/Icon'
|
|
4
4
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
5
|
-
import styles from './ClearButton.module.
|
|
5
|
+
import styles from './ClearButton.module.css'
|
|
6
6
|
|
|
7
7
|
export type ClearButtonProps = {
|
|
8
8
|
isReversed?: boolean
|
|
@@ -44,6 +44,8 @@
|
|
|
44
44
|
// Selected = Checked or Indeterminate
|
|
45
45
|
.selected {
|
|
46
46
|
background: $color-gray-500;
|
|
47
|
+
// To do: fix this in the CSS uplift
|
|
48
|
+
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
|
|
47
49
|
background-color: $color-gray-500;
|
|
48
50
|
|
|
49
51
|
&:hover,
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
.radioInput {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
position: absolute;
|
|
5
|
+
|
|
6
|
+
:global(.ideal-sans) & {
|
|
7
|
+
/* This is to override bootstrap styles. Remove when appropriate */
|
|
8
|
+
position: absolute;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.icon {
|
|
13
|
+
--icon-size: 10px;
|
|
14
|
+
--icon-offset: 5px;
|
|
15
|
+
|
|
16
|
+
top: var(--icon-offset);
|
|
17
|
+
left: var(--icon-offset);
|
|
18
|
+
width: var(--icon-size);
|
|
19
|
+
height: var(--icon-size);
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
background: var(--color-gray-600);
|
|
22
|
+
position: absolute;
|
|
23
|
+
|
|
24
|
+
&.reversed {
|
|
25
|
+
background: var(--color-white);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media (forced-colors: active) {
|
|
29
|
+
/*
|
|
30
|
+
High contrast mode with remove the background color so we have to use border to create the selected icon state.
|
|
31
|
+
Transparent is used so the user defined colors for borders will be used here
|
|
32
|
+
*/
|
|
33
|
+
border: var(--icon-offset) solid transparent;
|
|
34
|
+
width: 0;
|
|
35
|
+
height: 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.box {
|
|
40
|
+
--radio-size: 24px;
|
|
41
|
+
--focus-ring-offset: 2px;
|
|
42
|
+
|
|
43
|
+
display: block;
|
|
44
|
+
position: relative;
|
|
45
|
+
background: var(--color-white);
|
|
46
|
+
height: var(--radio-size);
|
|
47
|
+
width: var(--radio-size);
|
|
48
|
+
top: 0;
|
|
49
|
+
border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
|
|
53
|
+
.radioInput:focus:not([disabled]) + & {
|
|
54
|
+
border-color: var(--color-gray-600);
|
|
55
|
+
outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
|
|
56
|
+
var(--color-blue-500);
|
|
57
|
+
outline-offset: 1px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.radioInput:not([disabled]) + &:hover {
|
|
61
|
+
border-color: var(--color-gray-600);
|
|
62
|
+
background-color: var(--color-gray-200);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&.reversed {
|
|
66
|
+
border: var(--border-solid-border-width) var(--border-solid-border-style)
|
|
67
|
+
rgb(var(--color-white-rgb), 0.65);
|
|
68
|
+
background: transparent;
|
|
69
|
+
|
|
70
|
+
.radioInput:focus:not([disabled]) + & {
|
|
71
|
+
border-color: var(--color-white);
|
|
72
|
+
outline-color: var(--color-blue-300);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.radioInput:not([disabled]) + &:hover {
|
|
76
|
+
border-color: var(--color-white);
|
|
77
|
+
background-color: transparent;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { type InputHTMLAttributes } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
4
|
-
import styles from './Radio.module.
|
|
4
|
+
import styles from './Radio.module.css'
|
|
5
5
|
|
|
6
6
|
export type RadioProps = OverrideClassName<
|
|
7
7
|
Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'value' | 'checked' | 'type'>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
.container {
|
|
3
|
+
position: relative;
|
|
4
|
+
overflow-wrap: anywhere;
|
|
5
|
+
word-break: normal;
|
|
6
|
+
margin-bottom: var(--spacing-sm);
|
|
7
|
+
|
|
8
|
+
label {
|
|
9
|
+
-webkit-tap-highlight-color: transparent;
|
|
10
|
+
|
|
11
|
+
:global(.ideal-sans) & {
|
|
12
|
+
/* This is to override bootstrap styles. Remove when appropriate */
|
|
13
|
+
font-size: var(--typography-paragraph-body-font-size);
|
|
14
|
+
padding-top: 0;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.selected label {
|
|
19
|
+
font-family: var(--typography-paragraph-body-font-family);
|
|
20
|
+
font-size: var(--typography-paragraph-body-font-size);
|
|
21
|
+
line-height: var(--typography-paragraph-body-line-height);
|
|
22
|
+
letter-spacing: var(--typography-paragraph-body-letter-spacing);
|
|
23
|
+
font-weight: var(--typography-paragraph-bold-font-weight);
|
|
24
|
+
position: static;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:not(.reversed) label:hover input:not([disabled]) + span {
|
|
28
|
+
border-color: var(--color-gray-600);
|
|
29
|
+
background-color: var(--color-gray-200);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&.reversed label:hover input:not([disabled]) + span {
|
|
33
|
+
border-color: var(--color-white);
|
|
34
|
+
background-color: transparent;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -2,7 +2,7 @@ import React, { useId } from 'react'
|
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { Label } from '~components/Label'
|
|
4
4
|
import { Radio, type RadioProps } from '../Radio/Radio'
|
|
5
|
-
import styles from './RadioField.module.
|
|
5
|
+
import styles from './RadioField.module.css'
|
|
6
6
|
|
|
7
7
|
export type RadioFieldProps = Omit<RadioProps, 'id'> & {
|
|
8
8
|
'id'?: string
|
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
@import '~@kaizen/design-tokens/sass/color';
|
|
2
|
-
@import '~@kaizen/design-tokens/sass/spacing';
|
|
3
|
-
|
|
4
1
|
@layer kz-components {
|
|
5
2
|
.radioGroupLabel {
|
|
6
|
-
margin-bottom:
|
|
3
|
+
margin-bottom: var(--spacing-sm);
|
|
7
4
|
|
|
8
5
|
label {
|
|
9
6
|
:global(.ideal-sans) & {
|
|
10
|
-
|
|
7
|
+
/* This is to override bootstrap styles. Remove when appropriate */
|
|
11
8
|
padding-top: 0;
|
|
12
9
|
}
|
|
13
10
|
}
|
|
14
11
|
|
|
15
12
|
&.reversed {
|
|
16
|
-
color:
|
|
13
|
+
color: var(--color-white);
|
|
17
14
|
}
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
.radioGroupContainer {
|
|
21
18
|
display: flex;
|
|
22
19
|
flex-direction: column;
|
|
23
|
-
margin-bottom:
|
|
20
|
+
margin-bottom: var(--spacing-sm);
|
|
24
21
|
|
|
25
22
|
&.noBottomMargin {
|
|
26
23
|
margin-bottom: 0;
|
|
@@ -2,7 +2,7 @@ import React, { useId, type HTMLAttributes } from 'react'
|
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { Label } from '~components/Label'
|
|
4
4
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
5
|
-
import styles from './RadioGroup.module.
|
|
5
|
+
import styles from './RadioGroup.module.css'
|
|
6
6
|
|
|
7
7
|
export type RadioGroupProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
|
|
8
8
|
'children'?: React.ReactNode
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"radioGroupLabel": "RadioGroup-module_radioGroupLabel__wIl4z",
|
|
5
|
-
"reversed": "RadioGroup-module_reversed__VeBun",
|
|
6
|
-
"radioGroupContainer": "RadioGroup-module_radioGroupContainer__NKWpt",
|
|
7
|
-
"noBottomMargin": "RadioGroup-module_noBottomMargin__VKF2T"
|
|
8
|
-
};
|
|
9
|
-
module.exports = styles;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
var styles = {
|
|
2
|
-
"radioGroupLabel": "RadioGroup-module_radioGroupLabel__wIl4z",
|
|
3
|
-
"reversed": "RadioGroup-module_reversed__VeBun",
|
|
4
|
-
"radioGroupContainer": "RadioGroup-module_radioGroupContainer__NKWpt",
|
|
5
|
-
"noBottomMargin": "RadioGroup-module_noBottomMargin__VKF2T"
|
|
6
|
-
};
|
|
7
|
-
export { styles as default };
|