@dxc-technology/halstack-react 0.0.0-f6d6be5 → 0.0.0-f70a97e
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 +1 -10
- package/BackgroundColorContext.js +4 -21
- package/HalstackContext.d.ts +43 -138
- package/HalstackContext.js +10 -35
- package/accordion/Accordion.js +23 -63
- 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/action-icon/ActionIcon.d.ts +4 -0
- package/action-icon/ActionIcon.js +47 -0
- package/action-icon/ActionIcon.stories.tsx +41 -0
- package/action-icon/ActionIcon.test.js +64 -0
- package/action-icon/types.d.ts +26 -0
- package/alert/Alert.js +15 -50
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +141 -43
- package/badge/Badge.stories.tsx +210 -0
- package/badge/Badge.test.js +30 -0
- package/badge/types.d.ts +52 -3
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +11 -33
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +18 -54
- package/bulleted-list/BulletedList.stories.tsx +1 -92
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +36 -59
- package/button/Button.stories.tsx +33 -132
- package/button/Button.test.js +13 -21
- package/button/types.d.ts +5 -5
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +85 -120
- 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.stories.tsx +1 -1
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.d.ts +105 -14
- package/common/coreTokens.js +40 -23
- package/common/utils.js +2 -8
- package/common/variables.d.ts +44 -139
- package/common/variables.js +55 -157
- package/container/Container.d.ts +4 -0
- package/container/Container.js +194 -0
- package/container/Container.stories.tsx +214 -0
- package/container/types.d.ts +74 -0
- package/container/types.js +5 -0
- package/contextual-menu/ContextualMenu.d.ts +7 -0
- package/contextual-menu/ContextualMenu.js +71 -0
- package/contextual-menu/ContextualMenu.stories.tsx +182 -0
- package/contextual-menu/ContextualMenu.test.js +71 -0
- package/contextual-menu/MenuItemAction.d.ts +4 -0
- package/contextual-menu/MenuItemAction.js +46 -0
- package/contextual-menu/types.d.ts +22 -0
- package/contextual-menu/types.js +5 -0
- 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 +28 -22
- package/dialog/Dialog.js +13 -40
- package/dialog/Dialog.stories.tsx +170 -0
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/divider/Divider.d.ts +4 -0
- package/divider/Divider.js +36 -0
- package/divider/Divider.stories.tsx +223 -0
- package/divider/Divider.test.js +38 -0
- package/divider/types.d.ts +19 -0
- package/divider/types.js +5 -0
- package/dropdown/Dropdown.js +48 -100
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +18 -20
- package/file-input/FileInput.js +180 -248
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +356 -354
- 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.d.ts +1 -1
- package/footer/Footer.js +38 -65
- package/footer/Footer.stories.tsx +19 -0
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +3 -2
- package/footer/Icons.js +66 -7
- package/footer/types.d.ts +16 -16
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +28 -84
- 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 +7 -8
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/icon/Icon.d.ts +4 -0
- package/icon/Icon.js +33 -0
- package/icon/Icon.stories.tsx +26 -0
- package/icon/types.d.ts +4 -0
- package/icon/types.js +5 -0
- package/image/Image.d.ts +2 -2
- package/image/Image.js +17 -32
- package/image/Image.stories.tsx +3 -1
- package/image/types.d.ts +2 -2
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +2 -2
- package/layout/ApplicationLayout.js +14 -54
- package/layout/Icons.d.ts +5 -5
- package/layout/Icons.js +1 -5
- 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 +7 -4
- package/main.js +32 -60
- package/nav-tabs/NavTabs.js +17 -46
- package/nav-tabs/NavTabs.stories.tsx +7 -5
- package/nav-tabs/NavTabs.test.js +38 -44
- package/nav-tabs/Tab.js +22 -50
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +1 -1
- package/number-input/NumberInput.js +45 -37
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +839 -575
- package/number-input/types.d.ts +11 -5
- package/package.json +29 -27
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +15 -43
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -19
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -34
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +21 -53
- 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/resultset-table/ResultsetTable.d.ts +7 -0
- package/{resultsetTable → resultset-table}/ResultsetTable.js +35 -64
- package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +102 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +138 -92
- package/{resultsetTable → resultset-table}/types.d.ts +13 -7
- package/resultset-table/types.js +5 -0
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +17 -27
- package/select/Select.js +87 -163
- package/select/Select.test.js +1942 -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 +28 -69
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +68 -125
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +16 -54
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/status-light/StatusLight.d.ts +4 -0
- package/status-light/StatusLight.js +51 -0
- package/status-light/StatusLight.stories.tsx +74 -0
- package/status-light/StatusLight.test.js +25 -0
- package/status-light/types.d.ts +17 -0
- package/status-light/types.js +5 -0
- package/switch/Switch.js +49 -97
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/DropdownTheme.js +62 -0
- package/table/Table.d.ts +6 -2
- package/table/Table.js +85 -33
- package/table/{Table.stories.jsx → Table.stories.tsx} +304 -2
- package/table/Table.test.js +93 -6
- package/table/types.d.ts +48 -6
- package/tabs/Tab.js +17 -33
- package/tabs/Tabs.js +52 -129
- package/tabs/Tabs.stories.tsx +1 -1
- 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 +15 -65
- package/text-input/TextInput.js +192 -284
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1227 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +67 -109
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +21 -61
- package/toggle-group/ToggleGroup.stories.tsx +1 -1
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +10 -10
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +41 -136
- 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 +25 -39
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +7 -7
- package/common/OpenSans.css +0 -69
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/resultsetTable/Icons.d.ts +0 -7
- package/resultsetTable/ResultsetTable.d.ts +0 -4
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → action-icon}/types.js +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
|
@@ -1,55 +1,37 @@
|
|
|
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
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
27
|
-
|
|
28
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
29
|
-
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
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; }
|
|
33
|
-
|
|
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; }
|
|
34
19
|
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
35
20
|
var _ref$label = _ref.label,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
21
|
+
label = _ref$label === void 0 ? "" : _ref$label,
|
|
22
|
+
_ref$helperText = _ref.helperText,
|
|
23
|
+
helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
|
|
24
|
+
_ref$overlay = _ref.overlay,
|
|
25
|
+
overlay = _ref$overlay === void 0 ? false : _ref$overlay,
|
|
26
|
+
value = _ref.value,
|
|
27
|
+
_ref$showValue = _ref.showValue,
|
|
28
|
+
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
29
|
+
margin = _ref.margin;
|
|
45
30
|
var colorsTheme = (0, _useTheme["default"])();
|
|
46
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
47
|
-
|
|
48
31
|
var _useState = (0, _react.useState)(0),
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
32
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
33
|
+
valueProgressBar = _useState2[0],
|
|
34
|
+
setValueProgressBar = _useState2[1];
|
|
53
35
|
(0, _react.useEffect)(function () {
|
|
54
36
|
setValueProgressBar(value === null || value === undefined || value < 0 ? 0 : value >= 0 && value <= 100 ? value : 100);
|
|
55
37
|
}, [value]);
|
|
@@ -62,34 +44,28 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
62
44
|
margin: margin
|
|
63
45
|
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
64
46
|
overlay: overlay,
|
|
65
|
-
backgroundType: backgroundType,
|
|
66
47
|
"aria-label": label || undefined
|
|
67
48
|
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
68
49
|
overlay: overlay,
|
|
69
50
|
showValue: showValue,
|
|
70
|
-
backgroundType: backgroundType,
|
|
71
51
|
value: valueProgressBar
|
|
72
52
|
}, valueProgressBar, " %")), /*#__PURE__*/_react["default"].createElement(LinearProgress, {
|
|
73
53
|
role: "progressbar",
|
|
74
54
|
helperText: helperText,
|
|
75
55
|
"aria-valuenow": showValue ? valueProgressBar : undefined
|
|
76
56
|
}, /*#__PURE__*/_react["default"].createElement(LinearProgressBar, {
|
|
77
|
-
backgroundType: backgroundType,
|
|
78
57
|
variant: value === null || value === undefined ? "indeterminate" : "determinate",
|
|
79
58
|
container: "first",
|
|
80
59
|
value: valueProgressBar
|
|
81
60
|
})), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
82
|
-
overlay: overlay
|
|
83
|
-
backgroundType: backgroundType
|
|
61
|
+
overlay: overlay
|
|
84
62
|
}, helperText))));
|
|
85
63
|
};
|
|
86
|
-
|
|
87
64
|
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n display: flex;\n flex-wrap: wrap;\n min-width: 100px;\n width: 100%;\n"])), function (_ref2) {
|
|
88
65
|
var overlay = _ref2.overlay,
|
|
89
|
-
|
|
66
|
+
theme = _ref2.theme;
|
|
90
67
|
return overlay ? "background-color: ".concat(theme.overlayColor, ";\n width: 100%;\n justify-content: center;\n height: 100vh;\n align-items: center;\n max-width: 100%;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1300;") : "background-color: \"transparent\";";
|
|
91
68
|
});
|
|
92
|
-
|
|
93
69
|
var ProgressBarContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
94
70
|
return props.overlay === true && "100" || "0";
|
|
95
71
|
}, function (props) {
|
|
@@ -105,9 +81,7 @@ var ProgressBarContainer = _styledComponents["default"].div(_templateObject2 ||
|
|
|
105
81
|
}, function (props) {
|
|
106
82
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
107
83
|
});
|
|
108
|
-
|
|
109
84
|
var InfoProgressBar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"])));
|
|
110
|
-
|
|
111
85
|
var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
112
86
|
return props.theme.labelFontFamily;
|
|
113
87
|
}, function (props) {
|
|
@@ -119,9 +93,8 @@ var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_te
|
|
|
119
93
|
}, function (props) {
|
|
120
94
|
return props.theme.labelFontTextTransform;
|
|
121
95
|
}, function (props) {
|
|
122
|
-
return props.
|
|
96
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor;
|
|
123
97
|
});
|
|
124
|
-
|
|
125
98
|
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"])), function (props) {
|
|
126
99
|
return props.theme.valueFontFamily;
|
|
127
100
|
}, function (props) {
|
|
@@ -133,13 +106,12 @@ var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (
|
|
|
133
106
|
}, function (props) {
|
|
134
107
|
return props.theme.valueFontTextTransform;
|
|
135
108
|
}, function (props) {
|
|
136
|
-
return props.
|
|
109
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.valueFontColor;
|
|
137
110
|
}, function (props) {
|
|
138
111
|
return props.value !== undefined && props.value !== null && props.showValue === true && "block" || "none";
|
|
139
112
|
});
|
|
140
|
-
|
|
141
113
|
var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
142
|
-
return props.
|
|
114
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor;
|
|
143
115
|
}, function (props) {
|
|
144
116
|
return props.theme.helperTextFontFamily;
|
|
145
117
|
}, function (props) {
|
|
@@ -149,7 +121,6 @@ var HelperText = _styledComponents["default"].span(_templateObject6 || (_templat
|
|
|
149
121
|
}, function (props) {
|
|
150
122
|
return props.theme.helperTextFontWeight;
|
|
151
123
|
});
|
|
152
|
-
|
|
153
124
|
var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"])), function (props) {
|
|
154
125
|
return props.theme.thickness;
|
|
155
126
|
}, function (props) {
|
|
@@ -159,9 +130,8 @@ var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_temp
|
|
|
159
130
|
}, function (props) {
|
|
160
131
|
return props.helperText !== "" && "8px";
|
|
161
132
|
});
|
|
162
|
-
|
|
163
133
|
var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n transform: ", ";\n top: 0;\n left: 0;\n width: 100%;\n bottom: 0;\n position: absolute;\n transition: ", ";\n transform-origin: left;\n ", ";\n ", ";\n\n @keyframes keyframes-indeterminate-first {\n 0% {\n left: -35%;\n right: 100%;\n }\n 60% {\n left: 100%;\n right: -90%;\n }\n 100% {\n left: 100%;\n right: -90%;\n }\n }\n\n @keyframes keyframes-indeterminate-second {\n 0% {\n left: -200%;\n right: 100%;\n }\n 60% {\n left: 107%;\n right: -8%;\n }\n 100% {\n left: 107%;\n right: -8%;\n }\n }\n"])), function (props) {
|
|
164
|
-
return props.
|
|
134
|
+
return props.theme.trackLineColor;
|
|
165
135
|
}, function (props) {
|
|
166
136
|
return "translateX(-".concat(props.variant === "determinate" ? 100 - props.value : 0, "%)");
|
|
167
137
|
}, function (props) {
|
|
@@ -171,6 +141,4 @@ var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_
|
|
|
171
141
|
}, function (props) {
|
|
172
142
|
return props.variant === "indeterminate" ? props.container === "first" ? "animation: keyframes-indeterminate-first 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;" : "animation: keyframes-indeterminate-second 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;" : "";
|
|
173
143
|
});
|
|
174
|
-
|
|
175
|
-
var _default = DxcProgressBar;
|
|
176
|
-
exports["default"] = _default;
|
|
144
|
+
var _default = exports["default"] = DxcProgressBar;
|
|
@@ -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;
|