orcs-design-system 3.5.8 → 3.5.10
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/README.md +3 -3
- package/es/__tests__/a11y-warnings.test.js +329 -0
- package/es/components/Badge/Badge.stories.js +0 -2
- package/es/components/DatePicker/index.js +2 -2
- package/es/components/Select/Select.stories.js +21 -0
- package/es/components/Select/index.js +15 -0
- package/package.json +99 -111
package/README.md
CHANGED
|
@@ -57,14 +57,14 @@ Now you can make any changes in orcs and it will build and then copy the es from
|
|
|
57
57
|
|
|
58
58
|
### Publishing changes
|
|
59
59
|
|
|
60
|
-
In order to publish a new version,
|
|
61
|
-
After your changes have been merged to master, from your master branch:
|
|
60
|
+
In order to publish a new version, bump the version in your PR branch before merging. The master branch is locked to direct pushes, so the version must be updated in your branch/PR.
|
|
62
61
|
|
|
63
62
|
```
|
|
64
63
|
npm version patch
|
|
64
|
+
git push
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
This will bump
|
|
67
|
+
This will bump the patch version and create a commit. Push to your branch so the version is included in your PR. When the PR is merged to master, GitHub Actions will publish the new version to npm using the version in `package.json`.
|
|
68
68
|
|
|
69
69
|
**Note:** When publishing to public npm, the version is automatically deprecated with a migration message directing users to GitHub Packages. This ensures all users see the deprecation warning when installing.
|
|
70
70
|
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A11y audit: run axe on ORCS components that have Storybook stories.
|
|
3
|
+
* Violations are logged as warnings only; accessibility violations alone do not fail these tests or block CI (other errors still can).
|
|
4
|
+
* Add new entries to COMPONENTS when new stories are added.
|
|
5
|
+
*/
|
|
6
|
+
import React, { useState } from "react";
|
|
7
|
+
import { render } from "@testing-library/react";
|
|
8
|
+
import { axe } from "jest-axe";
|
|
9
|
+
import { MemoryRouter, Route } from "react-router-dom";
|
|
10
|
+
import SystemThemeProvider from "../SystemThemeProvider";
|
|
11
|
+
import { ActionsMenu, ActionsMenuItem, Avatar, Badge, Box, Breadcrumbs, Button, ButtonLink, Card, Checkbox, CodeBlock, DatePicker, Divider, Expandable, Flex, FlexItem, Grid, GridItem, Icon, Loading, Modal, Notification, P, Popover, ProgressBar, RadioButton, Range, Select, Spacer, StatusDot, StyledLink, Table, Tabs, Tag, TextArea, TextInput, Toggle } from "../index";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
const renderWithTheme = ui => render(/*#__PURE__*/_jsx(SystemThemeProvider, {
|
|
14
|
+
children: ui
|
|
15
|
+
}));
|
|
16
|
+
const renderWithRouter = ui => render(/*#__PURE__*/_jsx(SystemThemeProvider, {
|
|
17
|
+
children: /*#__PURE__*/_jsx(MemoryRouter, {
|
|
18
|
+
initialEntries: ["/"],
|
|
19
|
+
children: ui
|
|
20
|
+
})
|
|
21
|
+
}));
|
|
22
|
+
function logViolations(componentName, violations) {
|
|
23
|
+
if (violations.length === 0) return;
|
|
24
|
+
console.warn("[a11y] ".concat(componentName, ": ").concat(violations.length, " violation(s) \u2013 fix these to improve accessibility:"));
|
|
25
|
+
violations.forEach((v, i) => {
|
|
26
|
+
console.warn(" ".concat(i + 1, ". ").concat(v.id, ": ").concat(v.help, " (impact: ").concat(v.impact, ")\n ").concat(v.nodes.length, " node(s). Help: ").concat(v.helpUrl));
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// DatePicker with local state (needs moment from react-dates)
|
|
31
|
+
const DatePickerSingle = () => {
|
|
32
|
+
const [date, setDate] = useState(null);
|
|
33
|
+
const [focused, setFocused] = useState(false);
|
|
34
|
+
return /*#__PURE__*/_jsx(DatePicker, {
|
|
35
|
+
single: true,
|
|
36
|
+
id: "a11y-datepicker",
|
|
37
|
+
startDateId: "a11y-start",
|
|
38
|
+
endDateId: "a11y-end",
|
|
39
|
+
date: date,
|
|
40
|
+
placeholder: "Date",
|
|
41
|
+
focused: focused,
|
|
42
|
+
onDateChange: setDate,
|
|
43
|
+
onFocusChange: _ref => {
|
|
44
|
+
let {
|
|
45
|
+
focused: f
|
|
46
|
+
} = _ref;
|
|
47
|
+
return setFocused(f);
|
|
48
|
+
},
|
|
49
|
+
numberOfMonths: 1,
|
|
50
|
+
displayFormat: "DD/MM/YYYY"
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// Minimal table data for Table component
|
|
55
|
+
const tableColumns = [{
|
|
56
|
+
accessorKey: "name",
|
|
57
|
+
header: "Name"
|
|
58
|
+
}, {
|
|
59
|
+
accessorKey: "age",
|
|
60
|
+
header: "Age"
|
|
61
|
+
}];
|
|
62
|
+
const tableData = [{
|
|
63
|
+
name: "John",
|
|
64
|
+
age: 30
|
|
65
|
+
}, {
|
|
66
|
+
name: "Sara",
|
|
67
|
+
age: 25
|
|
68
|
+
}];
|
|
69
|
+
const breadcrumbsConfig = [{
|
|
70
|
+
id: "1",
|
|
71
|
+
label: "Home",
|
|
72
|
+
to: "/"
|
|
73
|
+
}, {
|
|
74
|
+
id: "2",
|
|
75
|
+
label: "Current"
|
|
76
|
+
}];
|
|
77
|
+
const tabsConfig = [{
|
|
78
|
+
label: "Tab 1",
|
|
79
|
+
path: "/tab1"
|
|
80
|
+
}, {
|
|
81
|
+
label: "Tab 2",
|
|
82
|
+
path: "/tab2"
|
|
83
|
+
}];
|
|
84
|
+
|
|
85
|
+
/** One default render per Storybook-backed component included in this growing allowlist. This is partial coverage; the coverage-report script highlights gaps vs. all stories. */
|
|
86
|
+
const COMPONENTS = [{
|
|
87
|
+
name: "ActionsMenu",
|
|
88
|
+
jsx: /*#__PURE__*/_jsx(ActionsMenu, {
|
|
89
|
+
children: /*#__PURE__*/_jsx(ActionsMenuItem, {
|
|
90
|
+
onClick: () => {},
|
|
91
|
+
children: "Item"
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
}, {
|
|
95
|
+
name: "Avatar",
|
|
96
|
+
jsx: /*#__PURE__*/_jsx(Avatar, {
|
|
97
|
+
title: "Jane Doe",
|
|
98
|
+
initials: "JD"
|
|
99
|
+
})
|
|
100
|
+
}, {
|
|
101
|
+
name: "Badge",
|
|
102
|
+
jsx: /*#__PURE__*/_jsx(Badge, {
|
|
103
|
+
children: "New"
|
|
104
|
+
})
|
|
105
|
+
}, {
|
|
106
|
+
name: "Box",
|
|
107
|
+
jsx: /*#__PURE__*/_jsx(Box, {
|
|
108
|
+
p: "r",
|
|
109
|
+
children: "Content"
|
|
110
|
+
})
|
|
111
|
+
}, {
|
|
112
|
+
name: "Breadcrumbs",
|
|
113
|
+
jsx: /*#__PURE__*/_jsx(Breadcrumbs, {
|
|
114
|
+
config: breadcrumbsConfig
|
|
115
|
+
}),
|
|
116
|
+
useRouter: true
|
|
117
|
+
}, {
|
|
118
|
+
name: "Button",
|
|
119
|
+
jsx: /*#__PURE__*/_jsx(Button, {
|
|
120
|
+
children: "Submit"
|
|
121
|
+
})
|
|
122
|
+
}, {
|
|
123
|
+
name: "Button iconOnly",
|
|
124
|
+
jsx: /*#__PURE__*/_jsx(Button, {
|
|
125
|
+
iconOnly: true,
|
|
126
|
+
ariaLabel: "Close",
|
|
127
|
+
icon: "times"
|
|
128
|
+
})
|
|
129
|
+
}, {
|
|
130
|
+
name: "ButtonLink",
|
|
131
|
+
jsx: /*#__PURE__*/_jsx(ButtonLink, {
|
|
132
|
+
to: "/",
|
|
133
|
+
children: "Link"
|
|
134
|
+
}),
|
|
135
|
+
useRouter: true
|
|
136
|
+
}, {
|
|
137
|
+
name: "Card",
|
|
138
|
+
jsx: /*#__PURE__*/_jsx(Card, {
|
|
139
|
+
title: "Title",
|
|
140
|
+
subtitle: "Subtitle",
|
|
141
|
+
children: /*#__PURE__*/_jsx(P, {
|
|
142
|
+
children: "Body"
|
|
143
|
+
})
|
|
144
|
+
})
|
|
145
|
+
}, {
|
|
146
|
+
name: "Checkbox",
|
|
147
|
+
jsx: /*#__PURE__*/_jsx(Checkbox, {
|
|
148
|
+
id: "a11y-cb",
|
|
149
|
+
label: "I agree"
|
|
150
|
+
})
|
|
151
|
+
}, {
|
|
152
|
+
name: "CodeBlock",
|
|
153
|
+
jsx: /*#__PURE__*/_jsx(CodeBlock, {
|
|
154
|
+
children: "const x = 1;"
|
|
155
|
+
})
|
|
156
|
+
}, {
|
|
157
|
+
name: "DatePicker",
|
|
158
|
+
jsx: /*#__PURE__*/_jsx(DatePickerSingle, {})
|
|
159
|
+
}, {
|
|
160
|
+
name: "Divider",
|
|
161
|
+
jsx: /*#__PURE__*/_jsx(Divider, {})
|
|
162
|
+
}, {
|
|
163
|
+
name: "Expandable",
|
|
164
|
+
jsx: /*#__PURE__*/_jsx(Expandable, {
|
|
165
|
+
title: "Details",
|
|
166
|
+
children: /*#__PURE__*/_jsx(P, {
|
|
167
|
+
children: "Content"
|
|
168
|
+
})
|
|
169
|
+
})
|
|
170
|
+
}, {
|
|
171
|
+
name: "Flex",
|
|
172
|
+
jsx: /*#__PURE__*/_jsx(Flex, {
|
|
173
|
+
children: /*#__PURE__*/_jsx(FlexItem, {
|
|
174
|
+
children: "Item"
|
|
175
|
+
})
|
|
176
|
+
})
|
|
177
|
+
}, {
|
|
178
|
+
name: "Grid",
|
|
179
|
+
jsx: /*#__PURE__*/_jsxs(Grid, {
|
|
180
|
+
gridTemplateColumns: "1fr 1fr",
|
|
181
|
+
children: [/*#__PURE__*/_jsx(GridItem, {
|
|
182
|
+
children: "A"
|
|
183
|
+
}), /*#__PURE__*/_jsx(GridItem, {
|
|
184
|
+
children: "B"
|
|
185
|
+
})]
|
|
186
|
+
})
|
|
187
|
+
}, {
|
|
188
|
+
name: "Icon",
|
|
189
|
+
jsx: /*#__PURE__*/_jsx(Icon, {
|
|
190
|
+
icon: ["fas", "plus"],
|
|
191
|
+
title: "Plus"
|
|
192
|
+
})
|
|
193
|
+
}, {
|
|
194
|
+
name: "Loading",
|
|
195
|
+
jsx: /*#__PURE__*/_jsx(Loading, {})
|
|
196
|
+
}, {
|
|
197
|
+
name: "Modal",
|
|
198
|
+
jsx: /*#__PURE__*/_jsx(Modal, {
|
|
199
|
+
ariaLabel: "Test modal",
|
|
200
|
+
visible: true,
|
|
201
|
+
onClose: () => {},
|
|
202
|
+
handleOnConfirm: () => {},
|
|
203
|
+
children: /*#__PURE__*/_jsx(P, {
|
|
204
|
+
children: "Content"
|
|
205
|
+
})
|
|
206
|
+
})
|
|
207
|
+
}, {
|
|
208
|
+
name: "Notification",
|
|
209
|
+
jsx: /*#__PURE__*/_jsx(Notification, {
|
|
210
|
+
icon: ["fas", "info-circle"],
|
|
211
|
+
children: "Message"
|
|
212
|
+
})
|
|
213
|
+
}, {
|
|
214
|
+
name: "Popover",
|
|
215
|
+
jsx: /*#__PURE__*/_jsx(Popover, {
|
|
216
|
+
text: "Tooltip",
|
|
217
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
218
|
+
children: "Hover"
|
|
219
|
+
})
|
|
220
|
+
})
|
|
221
|
+
}, {
|
|
222
|
+
name: "ProgressBar",
|
|
223
|
+
jsx: /*#__PURE__*/_jsx(ProgressBar, {
|
|
224
|
+
ariaLabel: "Progress",
|
|
225
|
+
containerWidth: 100,
|
|
226
|
+
fillWidth: 50
|
|
227
|
+
})
|
|
228
|
+
}, {
|
|
229
|
+
name: "RadioButton",
|
|
230
|
+
jsx: /*#__PURE__*/_jsx(RadioButton, {
|
|
231
|
+
name: "a11y-r",
|
|
232
|
+
label: "Option"
|
|
233
|
+
})
|
|
234
|
+
}, {
|
|
235
|
+
name: "Range",
|
|
236
|
+
jsx: /*#__PURE__*/_jsx(Range, {
|
|
237
|
+
min: 0,
|
|
238
|
+
max: 100,
|
|
239
|
+
defaultValue: 50,
|
|
240
|
+
ariaLabel: "Slider"
|
|
241
|
+
})
|
|
242
|
+
}, {
|
|
243
|
+
name: "Select",
|
|
244
|
+
jsx: /*#__PURE__*/_jsx(Select, {
|
|
245
|
+
inputId: "a11y-sel",
|
|
246
|
+
label: "Choose",
|
|
247
|
+
options: [{
|
|
248
|
+
value: "a",
|
|
249
|
+
label: "A"
|
|
250
|
+
}]
|
|
251
|
+
})
|
|
252
|
+
}, {
|
|
253
|
+
name: "Spacer",
|
|
254
|
+
jsx: /*#__PURE__*/_jsx(Spacer, {
|
|
255
|
+
mb: "r",
|
|
256
|
+
children: /*#__PURE__*/_jsx(P, {
|
|
257
|
+
children: "Text"
|
|
258
|
+
})
|
|
259
|
+
})
|
|
260
|
+
}, {
|
|
261
|
+
name: "StatusDot",
|
|
262
|
+
jsx: /*#__PURE__*/_jsx(StatusDot, {})
|
|
263
|
+
}, {
|
|
264
|
+
name: "StyledLink",
|
|
265
|
+
jsx: /*#__PURE__*/_jsx(StyledLink, {
|
|
266
|
+
href: "/",
|
|
267
|
+
children: "Link"
|
|
268
|
+
}),
|
|
269
|
+
useRouter: true
|
|
270
|
+
}, {
|
|
271
|
+
name: "Table",
|
|
272
|
+
jsx: /*#__PURE__*/_jsx(Table, {
|
|
273
|
+
columns: tableColumns,
|
|
274
|
+
data: tableData
|
|
275
|
+
})
|
|
276
|
+
}, {
|
|
277
|
+
name: "Tabs",
|
|
278
|
+
jsx: /*#__PURE__*/_jsx(MemoryRouter, {
|
|
279
|
+
initialEntries: ["/tab1"],
|
|
280
|
+
children: /*#__PURE__*/_jsx(Route, {
|
|
281
|
+
path: "/",
|
|
282
|
+
children: /*#__PURE__*/_jsx(Tabs, {
|
|
283
|
+
tabsList: tabsConfig
|
|
284
|
+
})
|
|
285
|
+
})
|
|
286
|
+
})
|
|
287
|
+
}, {
|
|
288
|
+
name: "Tag",
|
|
289
|
+
jsx: /*#__PURE__*/_jsx(Tag, {
|
|
290
|
+
ariaLabel: "Tag label",
|
|
291
|
+
children: "Tag"
|
|
292
|
+
})
|
|
293
|
+
}, {
|
|
294
|
+
name: "TextArea",
|
|
295
|
+
jsx: /*#__PURE__*/_jsx(TextArea, {
|
|
296
|
+
id: "a11y-ta",
|
|
297
|
+
label: "Notes"
|
|
298
|
+
})
|
|
299
|
+
}, {
|
|
300
|
+
name: "TextInput",
|
|
301
|
+
jsx: /*#__PURE__*/_jsx(TextInput, {
|
|
302
|
+
id: "a11y-ti",
|
|
303
|
+
label: "Email",
|
|
304
|
+
placeholder: "you@sample.teamform.co"
|
|
305
|
+
})
|
|
306
|
+
}, {
|
|
307
|
+
name: "Toggle",
|
|
308
|
+
jsx: /*#__PURE__*/_jsx(Toggle, {
|
|
309
|
+
id: "a11y-tog",
|
|
310
|
+
label: "Enable"
|
|
311
|
+
})
|
|
312
|
+
}];
|
|
313
|
+
describe("A11y warnings (informational only – does not fail the build)", () => {
|
|
314
|
+
COMPONENTS.forEach(_ref2 => {
|
|
315
|
+
let {
|
|
316
|
+
name,
|
|
317
|
+
jsx,
|
|
318
|
+
useRouter
|
|
319
|
+
} = _ref2;
|
|
320
|
+
it("".concat(name, ": log a11y violations as warnings"), async () => {
|
|
321
|
+
const {
|
|
322
|
+
container
|
|
323
|
+
} = useRouter ? renderWithRouter(jsx) : renderWithTheme(jsx);
|
|
324
|
+
const results = await axe(container);
|
|
325
|
+
logViolations(name, results.violations);
|
|
326
|
+
expect(results).toBeDefined();
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
});
|
|
@@ -78,7 +78,7 @@ const DatePickerLabel = /*#__PURE__*/styled.label.withConfig({
|
|
|
78
78
|
const DatePickerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
79
79
|
displayName: "DatePickerContainer",
|
|
80
80
|
componentId: "sc-15292wq-1"
|
|
81
|
-
})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}
|
|
81
|
+
})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate.SingleDatePickerInput_clearDate__hide,.DateRangePickerInput_clearDates.DateRangePickerInput_clearDates__hide{display:none;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;background:transparent;border-radius:", ";svg path{fill:", ";}}}& .DayPickerKeyboardShortcuts_panel{color:", ";}& .CalendarDay__default{transition:", ";}& .CalendarDay__selected,& .CalendarDay__selected:active,& .CalendarDay__selected:hover{background:", ";border:1px solid ", ";}& .DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}& .DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}& .DayPickerKeyboardShortcuts_show__bottomRight::before,& .DayPickerKeyboardShortcuts_show__topRight::before{border-right:33px solid ", ";transition:", ";}& .DayPickerKeyboardShortcuts_show__bottomRight:hover::before,& .DayPickerKeyboardShortcuts_show__topRight:hover::before{border-right:33px solid ", ";}& .CalendarDay__selected_span,& .CalendarDay__hovered_span,& .CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}& .CalendarDay__hovered_span:hover,& .CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}& .CalendarDay__selected_span:active,& .CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
|
|
82
82
|
if (props.width) {
|
|
83
83
|
if (props.width.includes("px")) {
|
|
84
84
|
const widthValue = parseInt(props.width, 10);
|
|
@@ -87,7 +87,7 @@ const DatePickerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
87
87
|
return props.width;
|
|
88
88
|
}
|
|
89
89
|
return "calc(134px * 2)";
|
|
90
|
-
}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
|
|
90
|
+
}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
|
|
91
91
|
|
|
92
92
|
/**
|
|
93
93
|
*
|
|
@@ -215,6 +215,22 @@ export const withGroupedOptions = () => /*#__PURE__*/_jsx(Select, {
|
|
|
215
215
|
"aria-label": "Select label"
|
|
216
216
|
});
|
|
217
217
|
withGroupedOptions.storyName = "With Grouped Options";
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* Regression story: Option padding and spacing.
|
|
221
|
+
* Used by Chromatic for visual regression. If options become cramped
|
|
222
|
+
* (minimal vertical/horizontal padding), Chromatic will flag the change.
|
|
223
|
+
* Spec: vertical padding space.xs, horizontal padding space.s, 4px gap between options.
|
|
224
|
+
*/
|
|
225
|
+
export const regressionOptionPadding = () => /*#__PURE__*/_jsx(Select, {
|
|
226
|
+
options: options,
|
|
227
|
+
menuIsOpen: true,
|
|
228
|
+
ariaLabel: "Select label",
|
|
229
|
+
inputId: "regressionOptionPadding"
|
|
230
|
+
});
|
|
231
|
+
regressionOptionPadding.story = {
|
|
232
|
+
name: "Regression: Option Padding"
|
|
233
|
+
};
|
|
218
234
|
defaultSelect.__docgenInfo = {
|
|
219
235
|
"description": "",
|
|
220
236
|
"methods": [],
|
|
@@ -279,4 +295,9 @@ withGroupedOptions.__docgenInfo = {
|
|
|
279
295
|
"description": "",
|
|
280
296
|
"methods": [],
|
|
281
297
|
"displayName": "withGroupedOptions"
|
|
298
|
+
};
|
|
299
|
+
regressionOptionPadding.__docgenInfo = {
|
|
300
|
+
"description": "Regression story: Option padding and spacing.\nUsed by Chromatic for visual regression. If options become cramped\n(minimal vertical/horizontal padding), Chromatic will flag the change.\nSpec: vertical padding space.xs, horizontal padding space.s, 4px gap between options.",
|
|
301
|
+
"methods": [],
|
|
302
|
+
"displayName": "regressionOptionPadding"
|
|
282
303
|
};
|
|
@@ -320,6 +320,21 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
320
320
|
},
|
|
321
321
|
option: (provided, state) => _objectSpread(_objectSpread({}, provided), {}, {
|
|
322
322
|
opacity: state.isDisabled ? 0.7 : 1,
|
|
323
|
+
paddingTop: themeGet("space.s")({
|
|
324
|
+
theme
|
|
325
|
+
}),
|
|
326
|
+
paddingBottom: themeGet("space.s")({
|
|
327
|
+
theme
|
|
328
|
+
}),
|
|
329
|
+
paddingLeft: themeGet("space.s")({
|
|
330
|
+
theme
|
|
331
|
+
}),
|
|
332
|
+
paddingRight: themeGet("space.s")({
|
|
333
|
+
theme
|
|
334
|
+
}),
|
|
335
|
+
marginBottom: themeGet("space.xs")({
|
|
336
|
+
theme
|
|
337
|
+
}),
|
|
323
338
|
backgroundColor: !state.isFocused && !props.inverted ? themeGet("colors.white")({
|
|
324
339
|
theme
|
|
325
340
|
}) : state.isFocused && !props.inverted ? themeGet("colors.primaryLightest")({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "orcs-design-system",
|
|
3
|
-
"version": "3.5.
|
|
3
|
+
"version": "3.5.10",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=20.0.0"
|
|
6
6
|
},
|
|
@@ -28,10 +28,14 @@
|
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"private": false,
|
|
30
30
|
"scripts": {
|
|
31
|
-
"lint": "CI=true eslint --cache --cache-location .eslintcache lib/",
|
|
31
|
+
"lint": "CI=true eslint --cache --cache-location .eslintcache --concurrency=auto lib/",
|
|
32
|
+
"lint:ci": "CI=true eslint --cache --cache-location .eslintcache --concurrency=auto lib/ --max-warnings 0",
|
|
32
33
|
"audit-ci": "audit-ci --config ./audit-ci.json",
|
|
33
34
|
"audit-ci:strict": "audit-ci --config ./audit-ci-strict.json",
|
|
34
35
|
"test": "jest",
|
|
36
|
+
"test:unit": "jest -c jest.unit.config.js",
|
|
37
|
+
"test:a11y": "node scripts/a11y-coverage-report.js && jest lib/__tests__/a11y-warnings.test.js",
|
|
38
|
+
"report:a11y-coverage": "node scripts/a11y-coverage-report.js",
|
|
35
39
|
"test-coverage": "jest --collectCoverage",
|
|
36
40
|
"dist": "BABEL_ENV=es babel lib -d es",
|
|
37
41
|
"module": "BABEL_ENV=es babel lib -d es",
|
|
@@ -46,111 +50,134 @@
|
|
|
46
50
|
"test:github-packages-auth": "node scripts/test-github-packages-auth.js"
|
|
47
51
|
},
|
|
48
52
|
"dependencies": {
|
|
49
|
-
"@emotion/react": "^11.
|
|
50
|
-
"@emotion/styled": "^11.
|
|
51
|
-
"@floating-ui/react": "^0.
|
|
52
|
-
"@mui/icons-material": "^
|
|
53
|
-
"@mui/material": "^
|
|
54
|
-
"@mui/x-date-pickers": "^7.
|
|
53
|
+
"@emotion/react": "^11.14.0",
|
|
54
|
+
"@emotion/styled": "^11.14.1",
|
|
55
|
+
"@floating-ui/react": "^0.27.19",
|
|
56
|
+
"@mui/icons-material": "^7.3.8",
|
|
57
|
+
"@mui/material": "^7.3.8",
|
|
58
|
+
"@mui/x-date-pickers": "^7.29.4",
|
|
55
59
|
"@styled-system/css": "^5.1.5",
|
|
56
60
|
"@styled-system/prop-types": "^5.1.5",
|
|
57
61
|
"@styled-system/should-forward-prop": "^5.1.5",
|
|
58
62
|
"@styled-system/theme-get": "^5.1.2",
|
|
59
|
-
"focus-trap-react": "^10.
|
|
60
|
-
"material-react-table": "^2.13.
|
|
61
|
-
"polished": "^3.7.
|
|
63
|
+
"focus-trap-react": "^10.3.1",
|
|
64
|
+
"material-react-table": "^2.13.3",
|
|
65
|
+
"polished": "^3.7.2",
|
|
62
66
|
"prism-react-renderer": "^2.4.1",
|
|
63
|
-
"prop-types": "^15.
|
|
67
|
+
"prop-types": "^15.8.1",
|
|
64
68
|
"react-app-polyfill": "^2.0.0",
|
|
65
|
-
"react-arborist": "^3.4.
|
|
69
|
+
"react-arborist": "^3.4.3",
|
|
66
70
|
"react-best-gradient-color-picker": "^3.0.14",
|
|
67
|
-
"react-cool-onclickoutside": "^1.
|
|
71
|
+
"react-cool-onclickoutside": "^1.7.0",
|
|
68
72
|
"react-dates": "^21.8.0",
|
|
69
|
-
"react-intersection-observer": "^9.
|
|
73
|
+
"react-intersection-observer": "^9.16.0",
|
|
70
74
|
"react-moment-proptypes": "^1.8.1",
|
|
71
|
-
"react-number-format": "^5.
|
|
75
|
+
"react-number-format": "^5.4.4",
|
|
72
76
|
"react-router-dom": "^5.3.4",
|
|
73
|
-
"react-select": "^5.
|
|
74
|
-
"styled-components": "^5.
|
|
77
|
+
"react-select": "^5.10.2",
|
|
78
|
+
"styled-components": "^5.3.11",
|
|
75
79
|
"styled-system": "^5.1.5"
|
|
76
80
|
},
|
|
77
81
|
"devDependencies": {
|
|
78
|
-
"@babel/cli": "^7.
|
|
79
|
-
"@babel/core": "^7.
|
|
80
|
-
"@babel/eslint-parser": "^7.
|
|
82
|
+
"@babel/cli": "^7.28.6",
|
|
83
|
+
"@babel/core": "^7.29.0",
|
|
84
|
+
"@babel/eslint-parser": "^7.28.6",
|
|
81
85
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
82
|
-
"@babel/plugin-transform-class-properties": "^7.
|
|
83
|
-
"@babel/plugin-transform-runtime": "^7.
|
|
84
|
-
"@babel/preset-env": "^7.
|
|
85
|
-
"@babel/preset-react": "^7.
|
|
86
|
-
"@babel/runtime": "^7.
|
|
87
|
-
"@chromatic-com/storybook": "^3.
|
|
86
|
+
"@babel/plugin-transform-class-properties": "^7.28.6",
|
|
87
|
+
"@babel/plugin-transform-runtime": "^7.29.0",
|
|
88
|
+
"@babel/preset-env": "^7.29.0",
|
|
89
|
+
"@babel/preset-react": "^7.28.5",
|
|
90
|
+
"@babel/runtime": "^7.28.6",
|
|
91
|
+
"@chromatic-com/storybook": "^3.2.7",
|
|
92
|
+
"chromatic": "^15.2.0",
|
|
93
|
+
"@eslint/eslintrc": "^3.3.4",
|
|
94
|
+
"@eslint/js": "^9.39.3",
|
|
88
95
|
"@fortawesome/fontawesome-svg-core": "file:libs/fortawesome-fontawesome-svg-core-1.3.0.tgz",
|
|
89
|
-
"@fortawesome/free-regular-svg-icons": "^5.15.
|
|
90
|
-
"@fortawesome/free-solid-svg-icons": "^5.15.
|
|
96
|
+
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
|
97
|
+
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
|
91
98
|
"@fortawesome/react-fontawesome": "git://github.com/FortAwesome/react-fontawesome.git#0.1.13",
|
|
92
99
|
"@mdx-js/loader": "^2.3.0",
|
|
93
100
|
"@mdx-js/react": "^2.3.0",
|
|
94
|
-
"@
|
|
95
|
-
"@
|
|
96
|
-
"@
|
|
97
|
-
"@storybook/addon-
|
|
98
|
-
"@storybook/addon-
|
|
99
|
-
"@storybook/addon-
|
|
101
|
+
"@swc/core": "^1.15.18",
|
|
102
|
+
"@swc/jest": "^0.2.39",
|
|
103
|
+
"@swc/plugin-styled-components": "^1.5.122",
|
|
104
|
+
"@storybook/addon-a11y": "8.6.17",
|
|
105
|
+
"@storybook/addon-actions": "8.6.17",
|
|
106
|
+
"@storybook/addon-docs": "8.6.17",
|
|
107
|
+
"@storybook/addon-links": "8.6.17",
|
|
108
|
+
"@storybook/addon-toolbars": "8.6.17",
|
|
109
|
+
"@storybook/addon-viewport": "8.6.17",
|
|
100
110
|
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
|
|
101
|
-
"@storybook/blocks": "
|
|
102
|
-
"@storybook/components": "
|
|
103
|
-
"@storybook/core-events": "
|
|
104
|
-
"@storybook/manager-api": "
|
|
111
|
+
"@storybook/blocks": "8.6.17",
|
|
112
|
+
"@storybook/components": "8.6.17",
|
|
113
|
+
"@storybook/core-events": "8.6.17",
|
|
114
|
+
"@storybook/manager-api": "8.6.17",
|
|
105
115
|
"@storybook/mdx1-csf": "^1.0.0",
|
|
106
|
-
"@storybook/react": "
|
|
107
|
-
"@storybook/react-webpack5": "
|
|
116
|
+
"@storybook/react": "8.6.17",
|
|
117
|
+
"@storybook/react-webpack5": "8.6.17",
|
|
108
118
|
"@storybook/storybook-deployer": "2.8.16",
|
|
109
|
-
"@storybook/theming": "
|
|
119
|
+
"@storybook/theming": "8.6.17",
|
|
110
120
|
"@testing-library/jest-dom": "^6.9.1",
|
|
111
|
-
"@testing-library/react": "^
|
|
121
|
+
"@testing-library/react": "^15.0.7",
|
|
112
122
|
"@types/jest": "^29.5.14",
|
|
113
123
|
"audit-ci": "^7.1.0",
|
|
114
|
-
"babel-
|
|
115
|
-
"babel-
|
|
116
|
-
"babel-plugin-
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
"eslint": "^8.
|
|
124
|
-
"eslint-config-prettier": "^8.10.0",
|
|
124
|
+
"babel-loader": "^8.4.1",
|
|
125
|
+
"babel-plugin-react-docgen": "^4.2.1",
|
|
126
|
+
"babel-plugin-styled-components": "^2.1.4",
|
|
127
|
+
"browserslist": "^4.28.1",
|
|
128
|
+
"caniuse-lite": "^1.0.30001776",
|
|
129
|
+
"chalk": "^4.1.2",
|
|
130
|
+
"css-loader": "^5.2.7",
|
|
131
|
+
"dotenv": "^16.6.1",
|
|
132
|
+
"eslint": "^9.39.3",
|
|
133
|
+
"eslint-config-prettier": "^8.10.2",
|
|
125
134
|
"eslint-plugin-import": "^2.32.0",
|
|
126
|
-
"eslint-plugin-jest": "^
|
|
127
|
-
"eslint-plugin-jsx-a11y": "^6.
|
|
135
|
+
"eslint-plugin-jest": "^28.14.0",
|
|
136
|
+
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
128
137
|
"eslint-plugin-local-rules": "^3.0.2",
|
|
129
|
-
"eslint-plugin-prettier": "^4.2.
|
|
130
|
-
"eslint-plugin-react": "^7.
|
|
131
|
-
"eslint-plugin-react-hooks": "^
|
|
132
|
-
"eslint-webpack-plugin": "^
|
|
138
|
+
"eslint-plugin-prettier": "^4.2.5",
|
|
139
|
+
"eslint-plugin-react": "^7.37.5",
|
|
140
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
141
|
+
"eslint-webpack-plugin": "^5.0.3",
|
|
133
142
|
"identity-obj-proxy": "^3.0.0",
|
|
134
|
-
"jest": "^
|
|
135
|
-
"jest-
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
143
|
+
"jest": "^30.2.0",
|
|
144
|
+
"jest-axe": "^9.0.0",
|
|
145
|
+
"jest-environment-jsdom": "^30.2.0",
|
|
146
|
+
"nodemon": "^3.1.14",
|
|
147
|
+
"playroom": "^0.44.4",
|
|
148
|
+
"postcss": "8.5.8",
|
|
149
|
+
"prettier": "^2.8.8",
|
|
140
150
|
"react": "^18.3.1",
|
|
141
|
-
"react-docgen": "^7.
|
|
151
|
+
"react-docgen": "^7.1.1",
|
|
142
152
|
"react-dom": "^18.3.1",
|
|
143
|
-
"shelljs": "^0.
|
|
144
|
-
"storybook": "
|
|
153
|
+
"shelljs": "^0.10.0",
|
|
154
|
+
"storybook": "8.6.17",
|
|
145
155
|
"style-loader": "^2.0.0",
|
|
146
|
-
"
|
|
156
|
+
"swc-loader": "^0.2.7",
|
|
157
|
+
"webpack": "^5.105.3",
|
|
147
158
|
"webpack-cli": "^5.1.4"
|
|
148
159
|
},
|
|
149
160
|
"overrides": {
|
|
161
|
+
"@eslint/eslintrc": {
|
|
162
|
+
"ajv": "6.14.0",
|
|
163
|
+
"minimatch": "5.1.8"
|
|
164
|
+
},
|
|
165
|
+
"eslint": {
|
|
166
|
+
"ajv": "6.14.0"
|
|
167
|
+
},
|
|
168
|
+
"eslint-plugin-import": {
|
|
169
|
+
"minimatch": "5.1.8"
|
|
170
|
+
},
|
|
150
171
|
"parse-url": "8.1.0",
|
|
151
172
|
"remark-parse": "10.0.2",
|
|
152
173
|
"react": "^18.3.1",
|
|
153
|
-
"react-dom": "^18.3.1"
|
|
174
|
+
"react-dom": "^18.3.1",
|
|
175
|
+
"@storybook/core": "8.6.17",
|
|
176
|
+
"@storybook/test": "8.6.17",
|
|
177
|
+
"@storybook/builder-webpack5": "8.6.17",
|
|
178
|
+
"@storybook/preset-react-webpack": "8.6.17",
|
|
179
|
+
"@storybook/preview-api": "8.6.17",
|
|
180
|
+
"serialize-javascript": "7.0.4"
|
|
154
181
|
},
|
|
155
182
|
"browserslist": [
|
|
156
183
|
">0.2%",
|
|
@@ -159,44 +186,5 @@
|
|
|
159
186
|
],
|
|
160
187
|
"files": [
|
|
161
188
|
"es"
|
|
162
|
-
]
|
|
163
|
-
"jest": {
|
|
164
|
-
"testEnvironment": "jsdom",
|
|
165
|
-
"setupFilesAfterEnv": [
|
|
166
|
-
"<rootDir>/config/jest/setup.js"
|
|
167
|
-
],
|
|
168
|
-
"coverageThreshold": {
|
|
169
|
-
"global": {
|
|
170
|
-
"branches": 0,
|
|
171
|
-
"functions": 0,
|
|
172
|
-
"lines": 20,
|
|
173
|
-
"statements": 20
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
"collectCoverageFrom": [
|
|
177
|
-
"lib/**/*.{js,jsx,mjs}",
|
|
178
|
-
"!lib/**/*.mdx"
|
|
179
|
-
],
|
|
180
|
-
"coveragePathIgnorePatterns": [
|
|
181
|
-
"<rootDir>/lib/components/*/*.mdx"
|
|
182
|
-
],
|
|
183
|
-
"testMatch": [
|
|
184
|
-
"<rootDir>/lib/**/__tests__/**/*.{js,jsx,mjs}",
|
|
185
|
-
"<rootDir>/lib/**/?(*.)(spec|test).{js,jsx,mjs}"
|
|
186
|
-
],
|
|
187
|
-
"transform": {
|
|
188
|
-
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
|
|
189
|
-
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
|
|
190
|
-
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
|
|
191
|
-
},
|
|
192
|
-
"transformIgnorePatterns": [
|
|
193
|
-
"<rootDir>/lib/components/*/*.mdx",
|
|
194
|
-
"<rootDir>/lib/components/*/*.stories.mdx",
|
|
195
|
-
"node_modules/(?!(date-fns|@mui)/)"
|
|
196
|
-
],
|
|
197
|
-
"moduleNameMapper": {
|
|
198
|
-
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
|
|
199
|
-
"\\.(css|less)$": "identity-obj-proxy"
|
|
200
|
-
}
|
|
201
|
-
}
|
|
189
|
+
]
|
|
202
190
|
}
|