@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
|
@@ -1,108 +1,91 @@
|
|
|
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 _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("ProgressBar component tests", function () {
|
|
12
8
|
test("ProgressBar renders with label and helperText", function () {
|
|
13
9
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
label: "test-label",
|
|
11
|
+
helperText: "helper-text"
|
|
12
|
+
})),
|
|
13
|
+
getByText = _render.getByText;
|
|
19
14
|
expect(getByText("test-label")).toBeTruthy();
|
|
20
15
|
expect(getByText("helper-text")).toBeTruthy();
|
|
21
16
|
});
|
|
22
17
|
test("ProgressBar renders with default value", function () {
|
|
23
18
|
var value = 0;
|
|
24
|
-
|
|
25
19
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
showValue: true
|
|
21
|
+
})),
|
|
22
|
+
getByText = _render2.getByText,
|
|
23
|
+
getByRole = _render2.getByRole;
|
|
31
24
|
var progressBar = getByRole("progressbar");
|
|
32
25
|
expect(getByText("0 %")).toBeTruthy();
|
|
33
26
|
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
34
27
|
});
|
|
35
28
|
test("ProgressBar renders with value", function () {
|
|
36
29
|
var value = 25;
|
|
37
|
-
|
|
38
30
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
31
|
+
showValue: true,
|
|
32
|
+
value: value
|
|
33
|
+
})),
|
|
34
|
+
getByText = _render3.getByText,
|
|
35
|
+
getByRole = _render3.getByRole;
|
|
45
36
|
var progressBar = getByRole("progressbar");
|
|
46
37
|
expect(getByText("25 %")).toBeTruthy();
|
|
47
38
|
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
48
39
|
});
|
|
49
40
|
test("ProgressBar renders with negative value", function () {
|
|
50
41
|
var value = 0;
|
|
51
|
-
|
|
52
42
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
showValue: true,
|
|
44
|
+
value: -20
|
|
45
|
+
})),
|
|
46
|
+
getByText = _render4.getByText,
|
|
47
|
+
getByRole = _render4.getByRole;
|
|
59
48
|
var progressBar = getByRole("progressbar");
|
|
60
49
|
expect(getByText("0 %")).toBeTruthy();
|
|
61
50
|
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
62
51
|
});
|
|
63
52
|
test("ProgressBar renders as indeterminate", function () {
|
|
64
53
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], null)),
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
getByRole = _render5.getByRole;
|
|
67
55
|
var progressBar = getByRole("progressbar");
|
|
68
56
|
expect(progressBar.getAttribute("aria-valuenow")).toBe(null);
|
|
69
57
|
});
|
|
70
58
|
test("Overlay progressBar renders with label and helperText", function () {
|
|
71
59
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
60
|
+
label: "test-label",
|
|
61
|
+
helperText: "helper-text",
|
|
62
|
+
overlay: true
|
|
63
|
+
})),
|
|
64
|
+
getByText = _render6.getByText;
|
|
78
65
|
expect(getByText("test-label")).toBeTruthy();
|
|
79
66
|
expect(getByText("helper-text")).toBeTruthy();
|
|
80
67
|
});
|
|
81
68
|
test("Overlay progressBar renders with default value", function () {
|
|
82
69
|
var value = 0;
|
|
83
|
-
|
|
84
70
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
71
|
+
showValue: true,
|
|
72
|
+
overlay: true
|
|
73
|
+
})),
|
|
74
|
+
getByText = _render7.getByText,
|
|
75
|
+
getByRole = _render7.getByRole;
|
|
91
76
|
var progressBar = getByRole("progressbar");
|
|
92
77
|
expect(getByText("0 %")).toBeTruthy();
|
|
93
78
|
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
94
79
|
});
|
|
95
80
|
test("Overlay progressBar renders with value", function () {
|
|
96
81
|
var value = 25;
|
|
97
|
-
|
|
98
82
|
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
83
|
+
showValue: true,
|
|
84
|
+
value: value,
|
|
85
|
+
overlay: true
|
|
86
|
+
})),
|
|
87
|
+
getByText = _render8.getByText,
|
|
88
|
+
getByRole = _render8.getByRole;
|
|
106
89
|
var progressBar = getByRole("progressbar");
|
|
107
90
|
expect(getByText("25 %")).toBeTruthy();
|
|
108
91
|
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
package/progress-bar/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
type Size = {
|
|
3
3
|
top?: Space;
|
|
4
4
|
bottom?: Space;
|
|
5
5
|
left?: Space;
|
|
6
6
|
right?: Space;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
type Props = {
|
|
9
9
|
/**
|
|
10
10
|
* Text to be placed above the progress bar.
|
|
11
11
|
*/
|
package/quick-nav/QuickNav.js
CHANGED
|
@@ -1,43 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
12
|
var _slugify = _interopRequireDefault(require("slugify"));
|
|
19
|
-
|
|
20
13
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
21
|
-
|
|
22
14
|
var _Heading = _interopRequireDefault(require("../heading/Heading"));
|
|
23
|
-
|
|
24
15
|
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
25
|
-
|
|
26
16
|
var _Inset = _interopRequireDefault(require("../inset/Inset"));
|
|
27
|
-
|
|
28
17
|
var _Typography = _interopRequireDefault(require("../typography/Typography"));
|
|
29
|
-
|
|
30
18
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
31
|
-
|
|
32
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
33
|
-
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
37
|
-
|
|
20
|
+
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); }
|
|
21
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
|
|
38
22
|
var DxcQuickNav = function DxcQuickNav(_ref) {
|
|
39
23
|
var title = _ref.title,
|
|
40
|
-
|
|
24
|
+
links = _ref.links;
|
|
41
25
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
42
26
|
var colorsTheme = (0, _useTheme["default"])();
|
|
43
27
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
@@ -50,7 +34,6 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
|
|
|
50
34
|
text: title || translatedLabels.quickNav.contentTitle
|
|
51
35
|
}), /*#__PURE__*/_react["default"].createElement(ListColumn, null, links.map(function (link) {
|
|
52
36
|
var _link$links;
|
|
53
|
-
|
|
54
37
|
return /*#__PURE__*/_react["default"].createElement("li", {
|
|
55
38
|
key: link.label
|
|
56
39
|
}, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
|
|
@@ -74,7 +57,6 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
|
|
|
74
57
|
})))));
|
|
75
58
|
})))));
|
|
76
59
|
};
|
|
77
|
-
|
|
78
60
|
var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n border-left: 2px solid ", ";\n"])), function (props) {
|
|
79
61
|
return props.theme.paddingTop;
|
|
80
62
|
}, function (props) {
|
|
@@ -86,11 +68,8 @@ var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_te
|
|
|
86
68
|
}, function (props) {
|
|
87
69
|
return props.theme.dividerBorderColor;
|
|
88
70
|
});
|
|
89
|
-
|
|
90
71
|
var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0;\n padding: 0;\n list-style-type: none;\n"])));
|
|
91
|
-
|
|
92
72
|
var ListSecondColumn = _styledComponents["default"].ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n"])));
|
|
93
|
-
|
|
94
73
|
var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n display: block;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n\n &:hover {\n color: ", ";\n }\n &:focus {\n outline-color: ", ";\n outline-style: ", ";\n outline-width: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
95
74
|
return props.theme.fontSize;
|
|
96
75
|
}, function (props) {
|
|
@@ -112,6 +91,4 @@ var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4
|
|
|
112
91
|
}, function (props) {
|
|
113
92
|
return props.theme.focusBorderRadius;
|
|
114
93
|
});
|
|
115
|
-
|
|
116
|
-
var _default = DxcQuickNav;
|
|
117
|
-
exports["default"] = _default;
|
|
94
|
+
var _default = exports["default"] = DxcQuickNav;
|
package/quick-nav/types.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
type Link = {
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* Label to be shown in the link.
|
|
4
4
|
*/
|
|
5
|
-
|
|
5
|
+
label: string;
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Sublinks of the link.
|
|
8
8
|
*/
|
|
9
|
-
links
|
|
9
|
+
links?: Link[];
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
type Props = {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Title of the quick nav component.
|
|
14
14
|
*/
|
|
15
|
-
|
|
15
|
+
title?: string;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Links to be shown inside the quick nav component.
|
|
18
18
|
*/
|
|
19
|
-
links
|
|
19
|
+
links: Link[];
|
|
20
20
|
};
|
|
21
21
|
export default Props;
|
package/radio-group/Radio.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioProps } from "./types";
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused,
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused, readOnly, tabIndex, }: RadioProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
package/radio-group/Radio.js
CHANGED
|
@@ -1,72 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
-
|
|
20
13
|
var _uuid = require("uuid");
|
|
21
|
-
|
|
22
14
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
23
|
-
|
|
24
15
|
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
25
|
-
|
|
26
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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" != _typeof(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 DxcRadio = function DxcRadio(_ref) {
|
|
33
20
|
var label = _ref.label,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
21
|
+
checked = _ref.checked,
|
|
22
|
+
onClick = _ref.onClick,
|
|
23
|
+
error = _ref.error,
|
|
24
|
+
disabled = _ref.disabled,
|
|
25
|
+
focused = _ref.focused,
|
|
26
|
+
readOnly = _ref.readOnly,
|
|
27
|
+
tabIndex = _ref.tabIndex;
|
|
42
28
|
var _useState = (0, _react.useState)("radio-".concat((0, _uuid.v4)())),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
29
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 1),
|
|
30
|
+
radioLabelId = _useState2[0];
|
|
46
31
|
var ref = (0, _react.useRef)(null);
|
|
47
32
|
var colorsTheme = (0, _useTheme["default"])();
|
|
48
|
-
|
|
49
33
|
var handleOnClick = function handleOnClick() {
|
|
50
34
|
var _ref$current;
|
|
51
|
-
|
|
52
35
|
onClick();
|
|
53
36
|
document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
|
|
54
37
|
};
|
|
55
|
-
|
|
56
38
|
var _useState3 = (0, _react.useState)(true),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
39
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
40
|
+
firstUpdate = _useState4[0],
|
|
41
|
+
setFirstUpdate = _useState4[1];
|
|
61
42
|
(0, _react.useEffect)(function () {
|
|
62
43
|
var _ref$current2;
|
|
63
|
-
|
|
64
44
|
// Don't apply in the first render
|
|
65
45
|
if (firstUpdate) {
|
|
66
46
|
setFirstUpdate(false);
|
|
67
47
|
return;
|
|
68
48
|
}
|
|
69
|
-
|
|
70
49
|
focused && (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus());
|
|
71
50
|
}, [focused]);
|
|
72
51
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
@@ -74,12 +53,12 @@ var DxcRadio = function DxcRadio(_ref) {
|
|
|
74
53
|
}, /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
|
|
75
54
|
error: error,
|
|
76
55
|
disabled: disabled,
|
|
77
|
-
|
|
56
|
+
readOnly: readOnly,
|
|
78
57
|
onClick: disabled ? undefined : handleOnClick
|
|
79
58
|
}, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
|
|
80
59
|
error: error,
|
|
81
60
|
disabled: disabled,
|
|
82
|
-
|
|
61
|
+
readOnly: readOnly,
|
|
83
62
|
role: "radio",
|
|
84
63
|
"aria-checked": checked,
|
|
85
64
|
"aria-disabled": disabled,
|
|
@@ -88,29 +67,24 @@ var DxcRadio = function DxcRadio(_ref) {
|
|
|
88
67
|
ref: ref
|
|
89
68
|
}, checked && /*#__PURE__*/_react["default"].createElement(Dot, {
|
|
90
69
|
disabled: disabled,
|
|
91
|
-
|
|
70
|
+
readOnly: readOnly,
|
|
92
71
|
error: error
|
|
93
72
|
}))), /*#__PURE__*/_react["default"].createElement(Label, {
|
|
94
73
|
id: radioLabelId,
|
|
95
74
|
disabled: disabled
|
|
96
75
|
}, label))));
|
|
97
76
|
};
|
|
98
|
-
|
|
99
77
|
var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
|
|
100
78
|
switch (state) {
|
|
101
79
|
case "enabled":
|
|
102
|
-
return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.
|
|
103
|
-
|
|
80
|
+
return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readOnly ? props.theme.readOnlyRadioInputColor : props.theme.radioInputColor;
|
|
104
81
|
case "hover":
|
|
105
|
-
return props.error ? props.theme.hoverErrorRadioInputColor : props.
|
|
106
|
-
|
|
82
|
+
return props.error ? props.theme.hoverErrorRadioInputColor : props.readOnly ? props.theme.hoverReadOnlyRadioInputColor : props.theme.hoverRadioInputColor;
|
|
107
83
|
case "active":
|
|
108
|
-
return props.error ? props.theme.activeErrorRadioInputColor : props.
|
|
84
|
+
return props.error ? props.theme.activeErrorRadioInputColor : props.readOnly ? props.theme.activeReadOnlyRadioInputColor : props.theme.activeRadioInputColor;
|
|
109
85
|
}
|
|
110
86
|
};
|
|
111
|
-
|
|
112
87
|
var RadioInputContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n"])));
|
|
113
|
-
|
|
114
88
|
var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid ", ";\n border-radius: 50%;\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n ", "\n"])), function (props) {
|
|
115
89
|
return getRadioInputStateColor(props, "enabled");
|
|
116
90
|
}, function (props) {
|
|
@@ -118,11 +92,9 @@ var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templat
|
|
|
118
92
|
}, function (props) {
|
|
119
93
|
return props.disabled && "pointer-events: none;";
|
|
120
94
|
});
|
|
121
|
-
|
|
122
95
|
var Dot = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n height: 10px;\n width: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
|
|
123
96
|
return getRadioInputStateColor(props, "enabled");
|
|
124
97
|
});
|
|
125
|
-
|
|
126
98
|
var Label = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
|
|
127
99
|
return props.theme.radioInputLabelMargin;
|
|
128
100
|
}, function (props) {
|
|
@@ -138,9 +110,8 @@ var Label = _styledComponents["default"].span(_templateObject4 || (_templateObje
|
|
|
138
110
|
}, function (props) {
|
|
139
111
|
return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
|
|
140
112
|
});
|
|
141
|
-
|
|
142
113
|
var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n\n &:hover {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n &:active {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n"])), function (props) {
|
|
143
|
-
return props.disabled ? "not-allowed" : props.
|
|
114
|
+
return props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer";
|
|
144
115
|
}, RadioInput, function (props) {
|
|
145
116
|
return !props.disabled && getRadioInputStateColor(props, "hover");
|
|
146
117
|
}, Dot, function (props) {
|
|
@@ -150,7 +121,4 @@ var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_tem
|
|
|
150
121
|
}, Dot, function (props) {
|
|
151
122
|
return !props.disabled && getRadioInputStateColor(props, "active");
|
|
152
123
|
});
|
|
153
|
-
|
|
154
|
-
var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);
|
|
155
|
-
|
|
156
|
-
exports["default"] = _default;
|
|
124
|
+
var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DxcRadio);
|