@dxc-technology/halstack-react 10.0.0 → 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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +26 -6
- package/HalstackContext.js +9 -34
- package/README.md +47 -0
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.js +1 -2
- package/common/utils.js +2 -8
- package/common/variables.d.ts +23 -6
- package/common/variables.js +25 -15
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +131 -220
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +293 -342
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +4 -0
- package/image/Image.js +70 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -51
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +700 -412
- package/number-input/types.d.ts +11 -5
- package/package.json +28 -26
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -126
- package/password-input/PasswordInput.stories.tsx +1 -32
- package/password-input/PasswordInput.test.js +157 -140
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +182 -263
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +91 -105
- package/toggle-group/ToggleGroup.stories.tsx +7 -4
- package/toggle-group/ToggleGroup.test.js +68 -87
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +20 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → image}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/wizard/Wizard.js
CHANGED
|
@@ -1,34 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
-
|
|
14
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
|
-
|
|
22
14
|
var _variables = require("../common/variables");
|
|
23
|
-
|
|
24
15
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
25
|
-
|
|
26
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
32
19
|
var icons = {
|
|
33
20
|
validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
34
21
|
id: "check_circle_black_18dp",
|
|
@@ -80,38 +67,31 @@ var icons = {
|
|
|
80
67
|
fill: "#d0011b"
|
|
81
68
|
}))
|
|
82
69
|
};
|
|
83
|
-
|
|
84
70
|
var DxcWizard = function DxcWizard(_ref) {
|
|
85
71
|
var _ref2;
|
|
86
|
-
|
|
87
72
|
var _ref$mode = _ref.mode,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
73
|
+
mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
|
|
74
|
+
defaultCurrentStep = _ref.defaultCurrentStep,
|
|
75
|
+
currentStep = _ref.currentStep,
|
|
76
|
+
onStepClick = _ref.onStepClick,
|
|
77
|
+
steps = _ref.steps,
|
|
78
|
+
margin = _ref.margin,
|
|
79
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
80
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
97
81
|
var _useState = (0, _react.useState)((_ref2 = currentStep !== null && currentStep !== void 0 ? currentStep : defaultCurrentStep) !== null && _ref2 !== void 0 ? _ref2 : 0),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
83
|
+
innerCurrent = _useState2[0],
|
|
84
|
+
setInnerCurrentStep = _useState2[1];
|
|
102
85
|
var renderedCurrent = currentStep == null ? innerCurrent : currentStep;
|
|
103
86
|
var colorsTheme = (0, _useTheme["default"])();
|
|
104
|
-
|
|
105
87
|
var handleStepClick = function handleStepClick(newValue) {
|
|
106
88
|
if (currentStep == null) {
|
|
107
89
|
setInnerCurrentStep(newValue);
|
|
108
90
|
}
|
|
109
|
-
|
|
110
91
|
if (onStepClick) {
|
|
111
92
|
onStepClick(newValue);
|
|
112
93
|
}
|
|
113
94
|
};
|
|
114
|
-
|
|
115
95
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
116
96
|
theme: colorsTheme.wizard
|
|
117
97
|
}, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
|
|
@@ -154,7 +134,6 @@ var DxcWizard = function DxcWizard(_ref) {
|
|
|
154
134
|
}));
|
|
155
135
|
})));
|
|
156
136
|
};
|
|
157
|
-
|
|
158
137
|
var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n ", ";\n font-family: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
159
138
|
return props.mode === "vertical" ? "column" : "row";
|
|
160
139
|
}, function (props) {
|
|
@@ -172,7 +151,6 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
|
|
|
172
151
|
}, function (props) {
|
|
173
152
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
174
153
|
});
|
|
175
|
-
|
|
176
154
|
var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"])), function (props) {
|
|
177
155
|
return props.mode !== "vertical" && "align-items: center;";
|
|
178
156
|
}, function (props) {
|
|
@@ -182,7 +160,6 @@ var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templ
|
|
|
182
160
|
}, function (props) {
|
|
183
161
|
return props.mode === "vertical" && "width: fit-content;";
|
|
184
162
|
});
|
|
185
|
-
|
|
186
163
|
var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: 0.25rem;\n background: inherit;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
|
|
187
164
|
return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
|
|
188
165
|
}, function (props) {
|
|
@@ -192,11 +169,9 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
|
|
|
192
169
|
}, function (props) {
|
|
193
170
|
return props.theme.focusColor;
|
|
194
171
|
});
|
|
195
|
-
|
|
196
172
|
var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n ", "\n"])), function (props) {
|
|
197
173
|
return props.validityIcon && "padding-bottom: 4px;";
|
|
198
174
|
});
|
|
199
|
-
|
|
200
175
|
var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n"])), function (props) {
|
|
201
176
|
return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
|
|
202
177
|
}, function (props) {
|
|
@@ -208,19 +183,16 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
208
183
|
}, function (props) {
|
|
209
184
|
return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
|
|
210
185
|
});
|
|
211
|
-
|
|
212
186
|
var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"])), function (props) {
|
|
213
187
|
return props.theme.stepIconSize;
|
|
214
188
|
}, function (props) {
|
|
215
189
|
return props.theme.stepIconSize;
|
|
216
190
|
});
|
|
217
|
-
|
|
218
191
|
var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
219
192
|
return props.theme.stepIconSize;
|
|
220
193
|
}, function (props) {
|
|
221
194
|
return props.theme.stepIconSize;
|
|
222
195
|
});
|
|
223
|
-
|
|
224
196
|
var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"])), function (props) {
|
|
225
197
|
return props.theme.stepFontSize;
|
|
226
198
|
}, function (props) {
|
|
@@ -232,11 +204,8 @@ var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject
|
|
|
232
204
|
}, function (props) {
|
|
233
205
|
return props.theme.stepFontTracking;
|
|
234
206
|
});
|
|
235
|
-
|
|
236
207
|
var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"])));
|
|
237
|
-
|
|
238
208
|
var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
|
|
239
|
-
|
|
240
209
|
var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"])), function (props) {
|
|
241
210
|
return props.theme.labelTextAlign;
|
|
242
211
|
}, function (props) {
|
|
@@ -254,7 +223,6 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
|
|
|
254
223
|
}, function (props) {
|
|
255
224
|
return props.theme.labelFontTextTransform;
|
|
256
225
|
});
|
|
257
|
-
|
|
258
226
|
var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"])), function (props) {
|
|
259
227
|
return props.theme.helperTextTextAlign;
|
|
260
228
|
}, function (props) {
|
|
@@ -272,7 +240,6 @@ var Description = _styledComponents["default"].p(_templateObject12 || (_template
|
|
|
272
240
|
}, function (props) {
|
|
273
241
|
return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
|
|
274
242
|
});
|
|
275
|
-
|
|
276
243
|
var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"])), function (props) {
|
|
277
244
|
return props.mode === "horizontal" ? "height: 0;" : "width: 0;";
|
|
278
245
|
}, function (props) {
|
|
@@ -280,6 +247,4 @@ var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_temp
|
|
|
280
247
|
}, function (props) {
|
|
281
248
|
return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
|
|
282
249
|
});
|
|
283
|
-
|
|
284
|
-
var _default = DxcWizard;
|
|
285
|
-
exports["default"] = _default;
|
|
250
|
+
var _default = exports["default"] = DxcWizard;
|
package/wizard/Wizard.test.js
CHANGED
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _react2 = require("@testing-library/react");
|
|
8
|
-
|
|
9
6
|
var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("Wizard components tests", function () {
|
|
12
8
|
test("Wizard renders with correct steps", function () {
|
|
13
9
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
steps: [{
|
|
11
|
+
label: "first-step"
|
|
12
|
+
}, {
|
|
13
|
+
label: "second-step"
|
|
14
|
+
}]
|
|
15
|
+
})),
|
|
16
|
+
getByText = _render.getByText,
|
|
17
|
+
getAllByRole = _render.getAllByRole;
|
|
23
18
|
var steps = getAllByRole("button");
|
|
24
19
|
expect(getByText("first-step")).toBeTruthy();
|
|
25
20
|
expect(getByText("second-step")).toBeTruthy();
|
|
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
|
|
|
28
23
|
});
|
|
29
24
|
test("Wizard renders with initially selected step", function () {
|
|
30
25
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
26
|
+
defaultCurrentStep: 1,
|
|
27
|
+
steps: [{
|
|
28
|
+
label: "first-step"
|
|
29
|
+
}, {
|
|
30
|
+
label: "second-step"
|
|
31
|
+
}]
|
|
32
|
+
})),
|
|
33
|
+
getAllByRole = _render2.getAllByRole;
|
|
40
34
|
var steps = getAllByRole("button");
|
|
41
35
|
expect(steps[1].getAttribute("aria-current")).toBe("step");
|
|
42
36
|
});
|
|
43
37
|
test("Click on step text", function () {
|
|
44
38
|
var onClick = jest.fn();
|
|
45
|
-
|
|
46
39
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
onStepClick: onClick,
|
|
41
|
+
steps: [{
|
|
42
|
+
label: "first-step"
|
|
43
|
+
}]
|
|
44
|
+
})),
|
|
45
|
+
getByText = _render3.getByText;
|
|
54
46
|
var step = getByText("first-step");
|
|
55
|
-
|
|
56
47
|
_react2.fireEvent.click(step);
|
|
57
|
-
|
|
58
48
|
expect(onClick).toHaveBeenCalled();
|
|
59
49
|
});
|
|
60
50
|
test("Click on step description", function () {
|
|
61
51
|
var onClick = jest.fn();
|
|
62
|
-
|
|
63
52
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
53
|
+
onStepClick: onClick,
|
|
54
|
+
steps: [{
|
|
55
|
+
label: "first-step",
|
|
56
|
+
description: "step-description"
|
|
57
|
+
}]
|
|
58
|
+
})),
|
|
59
|
+
getByText = _render4.getByText;
|
|
72
60
|
var step = getByText("step-description");
|
|
73
|
-
|
|
74
61
|
_react2.fireEvent.click(step);
|
|
75
|
-
|
|
76
62
|
expect(onClick).toHaveBeenCalled();
|
|
77
63
|
});
|
|
78
64
|
test("Click on step number", function () {
|
|
79
65
|
var onClick = jest.fn();
|
|
80
|
-
|
|
81
66
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
67
|
+
onStepClick: onClick,
|
|
68
|
+
steps: [{
|
|
69
|
+
label: "first-step"
|
|
70
|
+
}]
|
|
71
|
+
})),
|
|
72
|
+
getByText = _render5.getByText;
|
|
89
73
|
var step = getByText("1");
|
|
90
|
-
|
|
91
74
|
_react2.fireEvent.click(step);
|
|
92
|
-
|
|
93
75
|
expect(onClick).toHaveBeenCalled();
|
|
94
76
|
});
|
|
95
77
|
test("Click on disable step", function () {
|
|
96
78
|
var onClick = jest.fn();
|
|
97
|
-
|
|
98
79
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
80
|
+
onStepClick: onClick,
|
|
81
|
+
steps: [{
|
|
82
|
+
label: "first-step"
|
|
83
|
+
}, {
|
|
84
|
+
label: "second-step",
|
|
85
|
+
disabled: true
|
|
86
|
+
}]
|
|
87
|
+
})),
|
|
88
|
+
getByText = _render6.getByText;
|
|
109
89
|
var step = getByText("second-step");
|
|
110
|
-
|
|
111
90
|
_react2.fireEvent.click(step);
|
|
112
|
-
|
|
113
91
|
expect(onClick).toHaveBeenCalledTimes(0);
|
|
114
92
|
});
|
|
115
93
|
test("Controlled wizard function is called", function () {
|
|
116
94
|
var onClick = jest.fn(function (i) {
|
|
117
95
|
return i;
|
|
118
96
|
});
|
|
119
|
-
|
|
120
97
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
98
|
+
currentStep: 0,
|
|
99
|
+
onStepClick: onClick,
|
|
100
|
+
steps: [{
|
|
101
|
+
label: "first-step"
|
|
102
|
+
}, {
|
|
103
|
+
label: "second-step"
|
|
104
|
+
}]
|
|
105
|
+
})),
|
|
106
|
+
getAllByRole = _render7.getAllByRole;
|
|
131
107
|
var steps = getAllByRole("button");
|
|
132
|
-
|
|
133
108
|
_react2.fireEvent.click(steps[1]);
|
|
134
|
-
|
|
135
109
|
_react2.fireEvent.click(steps[0]);
|
|
136
|
-
|
|
137
110
|
expect(onClick).toHaveBeenCalledTimes(2);
|
|
138
111
|
expect(onClick).toHaveBeenNthCalledWith(1, 1);
|
|
139
112
|
expect(onClick).toHaveBeenNthCalledWith(2, 0);
|
package/wizard/types.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
export
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
export type StepProps = {
|
|
11
11
|
/**
|
|
12
12
|
* Step label.
|
|
13
13
|
*/
|
|
@@ -29,7 +29,7 @@ export declare type StepProps = {
|
|
|
29
29
|
*/
|
|
30
30
|
valid?: boolean;
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
type Props = {
|
|
33
33
|
/**
|
|
34
34
|
* The wizard can be showed in horizontal or vertical.
|
|
35
35
|
*/
|
|
@@ -46,7 +46,7 @@ declare type Props = {
|
|
|
46
46
|
* This function will be called when the user clicks a step. The step
|
|
47
47
|
* number will be passed as a parameter.
|
|
48
48
|
*/
|
|
49
|
-
onStepClick?: (
|
|
49
|
+
onStepClick?: (currentStep: number) => void;
|
|
50
50
|
/**
|
|
51
51
|
* An array of objects representing the steps.
|
|
52
52
|
*/
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var defaultState = {
|
|
13
|
-
stepNumber: 1
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
|
|
17
|
-
|
|
18
|
-
var _default = NumberInputContext;
|
|
19
|
-
exports["default"] = _default;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
declare type Props = {
|
|
2
|
-
/**
|
|
3
|
-
* Type of the input.
|
|
4
|
-
*/
|
|
5
|
-
typeNumber?: string;
|
|
6
|
-
/**
|
|
7
|
-
* Minimum value allowed by the number input.
|
|
8
|
-
*/
|
|
9
|
-
minNumber?: number;
|
|
10
|
-
/**
|
|
11
|
-
* Maximum value allowed by the number input.
|
|
12
|
-
*/
|
|
13
|
-
maxNumber?: number;
|
|
14
|
-
/**
|
|
15
|
-
* The step interval to use when using the up and down arrows to adjust the value.
|
|
16
|
-
*/
|
|
17
|
-
stepNumber?: number;
|
|
18
|
-
};
|
|
19
|
-
export default Props;
|