@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370
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 +3 -3
- package/BackgroundColorContext.js +12 -2
- package/HalstackContext.d.ts +1330 -7
- package/HalstackContext.js +84 -67
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +74 -55
- package/accordion/Accordion.stories.tsx +3 -101
- package/accordion/Accordion.test.js +34 -19
- package/accordion/types.d.ts +4 -16
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +49 -42
- package/accordion-group/AccordionGroup.stories.tsx +77 -76
- package/accordion-group/AccordionGroup.test.js +62 -54
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +6 -18
- package/alert/Alert.js +47 -20
- package/alert/Alert.test.js +46 -29
- package/alert/types.d.ts +3 -3
- package/badge/Badge.js +14 -2
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +21 -13
- package/bleed/Bleed.stories.tsx +1 -0
- package/bleed/types.d.ts +2 -2
- package/box/Box.d.ts +1 -1
- package/box/Box.js +33 -33
- package/box/Box.stories.tsx +25 -53
- package/box/Box.test.js +7 -2
- package/box/types.d.ts +3 -15
- package/bulleted-list/BulletedList.js +36 -9
- package/bulleted-list/BulletedList.stories.tsx +7 -1
- package/bulleted-list/types.d.ts +32 -5
- package/button/Button.d.ts +1 -1
- package/button/Button.js +83 -71
- package/button/Button.stories.tsx +4 -4
- package/button/Button.test.js +28 -8
- package/button/types.d.ts +8 -4
- package/card/Card.d.ts +1 -1
- package/card/Card.js +67 -62
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +22 -11
- package/card/types.d.ts +4 -10
- package/checkbox/Checkbox.js +71 -27
- package/checkbox/Checkbox.test.js +60 -33
- package/checkbox/types.d.ts +4 -4
- package/chip/Chip.js +51 -48
- package/chip/Chip.stories.tsx +25 -17
- package/chip/Chip.test.js +29 -17
- package/chip/types.d.ts +4 -4
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/utils.d.ts +1 -0
- package/common/utils.js +8 -3
- package/common/variables.d.ts +226 -175
- package/common/variables.js +956 -1133
- package/date-input/Calendar.js +55 -12
- package/date-input/DateInput.js +82 -35
- package/date-input/DateInput.test.js +351 -164
- package/date-input/DatePicker.js +38 -8
- package/date-input/Icons.js +12 -0
- package/date-input/YearPicker.js +30 -5
- package/date-input/types.d.ts +7 -7
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +83 -86
- package/dialog/Dialog.stories.tsx +127 -221
- package/dialog/Dialog.test.js +331 -18
- package/dialog/types.d.ts +1 -14
- package/dropdown/Dropdown.js +86 -32
- package/dropdown/Dropdown.test.js +211 -104
- package/dropdown/DropdownMenu.js +22 -8
- package/dropdown/DropdownMenuItem.js +15 -6
- package/dropdown/types.d.ts +8 -8
- package/file-input/FileInput.js +218 -134
- package/file-input/FileInput.test.js +343 -331
- package/file-input/FileItem.js +39 -12
- package/file-input/types.d.ts +10 -10
- package/flex/Flex.js +39 -25
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +74 -9
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +80 -68
- package/footer/Footer.stories.tsx +12 -89
- package/footer/Footer.test.js +47 -40
- package/footer/Icons.js +4 -0
- package/footer/types.d.ts +15 -17
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +72 -55
- package/header/Header.stories.tsx +7 -71
- package/header/Header.test.js +26 -13
- package/header/Icons.js +4 -0
- package/header/types.d.ts +2 -16
- package/heading/Heading.js +28 -7
- package/heading/Heading.test.js +88 -71
- package/heading/types.d.ts +3 -3
- package/inset/Inset.js +21 -13
- package/inset/Inset.stories.tsx +2 -1
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +5 -5
- package/layout/ApplicationLayout.js +57 -15
- package/layout/Icons.js +10 -0
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +4 -0
- package/layout/types.d.ts +5 -6
- package/link/Link.js +41 -21
- package/link/Link.test.js +42 -26
- package/link/types.d.ts +4 -4
- package/main.d.ts +2 -1
- package/main.js +55 -0
- package/nav-tabs/NavTabs.d.ts +2 -2
- package/nav-tabs/NavTabs.js +43 -16
- package/nav-tabs/NavTabs.stories.tsx +14 -0
- package/nav-tabs/NavTabs.test.js +44 -37
- package/nav-tabs/Tab.js +71 -45
- package/nav-tabs/types.d.ts +10 -11
- package/number-input/NumberInput.js +30 -20
- package/number-input/NumberInput.test.js +249 -113
- package/number-input/NumberInputContext.js +5 -0
- package/number-input/numberInputContextTypes.d.ts +1 -1
- package/number-input/types.d.ts +4 -4
- package/package.json +7 -7
- package/paginator/Icons.js +10 -0
- package/paginator/Paginator.js +39 -17
- package/paginator/Paginator.test.js +156 -104
- package/paginator/types.d.ts +1 -1
- package/paragraph/Paragraph.d.ts +3 -4
- package/paragraph/Paragraph.js +18 -8
- package/password-input/PasswordInput.js +51 -22
- package/password-input/PasswordInput.test.js +94 -51
- package/password-input/types.d.ts +4 -4
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +39 -14
- package/progress-bar/ProgressBar.test.js +53 -36
- package/progress-bar/types.d.ts +4 -3
- package/quick-nav/QuickNav.js +24 -2
- package/quick-nav/types.d.ts +2 -2
- package/radio-group/Radio.js +53 -22
- package/radio-group/RadioGroup.js +84 -41
- package/radio-group/RadioGroup.test.js +288 -186
- package/radio-group/types.d.ts +4 -4
- package/resultsetTable/Icons.js +3 -0
- package/resultsetTable/ResultsetTable.js +56 -21
- package/resultsetTable/ResultsetTable.test.js +75 -42
- package/resultsetTable/types.d.ts +5 -5
- package/select/Icons.js +3 -0
- package/select/Listbox.js +35 -10
- package/select/Option.js +24 -8
- package/select/Select.js +143 -56
- package/select/Select.test.js +839 -456
- package/select/types.d.ts +12 -12
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +116 -104
- package/sidenav/Sidenav.stories.tsx +60 -60
- package/sidenav/Sidenav.test.js +10 -3
- package/sidenav/types.d.ts +26 -23
- package/slider/Slider.js +84 -38
- package/slider/Slider.test.js +104 -76
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +51 -28
- package/spinner/Spinner.stories.jsx +28 -28
- package/spinner/Spinner.test.js +35 -26
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +66 -24
- package/switch/Switch.test.js +97 -52
- package/switch/types.d.ts +4 -4
- package/table/Table.js +22 -4
- package/table/Table.test.js +7 -2
- package/table/types.d.ts +3 -3
- package/tabs/Tab.js +39 -22
- package/tabs/Tabs.js +131 -62
- package/tabs/Tabs.test.js +122 -67
- package/tabs/types.d.ts +8 -8
- package/tag/Tag.js +54 -27
- package/tag/Tag.test.js +31 -20
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.js +3 -0
- package/text-input/Suggestion.js +24 -8
- package/text-input/Suggestions.js +36 -11
- package/text-input/TextInput.js +144 -59
- package/text-input/TextInput.stories.tsx +1 -1
- package/text-input/TextInput.test.js +858 -539
- package/text-input/types.d.ts +9 -9
- package/textarea/Textarea.js +73 -38
- package/textarea/Textarea.test.js +173 -98
- package/textarea/types.d.ts +4 -4
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +59 -21
- package/toggle-group/ToggleGroup.test.js +72 -40
- package/toggle-group/types.d.ts +11 -11
- package/typography/Typography.d.ts +2 -2
- package/typography/Typography.js +23 -110
- package/typography/Typography.stories.tsx +1 -1
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +1234 -1
- package/useTheme.js +6 -0
- package/useTranslatedLabels.d.ts +84 -2
- package/useTranslatedLabels.js +5 -0
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +138 -0
- package/wizard/Wizard.js +47 -13
- package/wizard/Wizard.test.js +81 -54
- package/wizard/types.d.ts +7 -8
- package/card/ice-cream.jpg +0 -0
- package/translatedLabelsType.d.ts +0 -82
- /package/{translatedLabelsType.js → grid/types.js} +0 -0
package/paragraph/Paragraph.js
CHANGED
|
@@ -1,28 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
11
|
+
|
|
9
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
|
|
13
|
+
|
|
11
14
|
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
15
|
+
|
|
12
16
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
17
|
+
|
|
18
|
+
var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
|
|
19
|
+
|
|
13
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
14
22
|
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; }
|
|
15
|
-
|
|
23
|
+
|
|
24
|
+
var DxcParagraph = function DxcParagraph(_ref) {
|
|
16
25
|
var children = _ref.children;
|
|
17
26
|
var colorsTheme = (0, _useTheme["default"])();
|
|
18
27
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
19
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
28
|
+
return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
|
|
20
29
|
as: "p",
|
|
21
|
-
display: colorsTheme
|
|
22
|
-
fontSize: colorsTheme
|
|
23
|
-
fontWeight: colorsTheme
|
|
24
|
-
color: backgroundType && backgroundType === "dark" ? colorsTheme
|
|
30
|
+
display: colorsTheme.paragraph.display,
|
|
31
|
+
fontSize: colorsTheme.paragraph.fontSize,
|
|
32
|
+
fontWeight: colorsTheme.paragraph.fontWeight,
|
|
33
|
+
color: backgroundType && backgroundType === "dark" ? colorsTheme.paragraph.fontColorOnDark : colorsTheme.paragraph.fontColor
|
|
25
34
|
}, children);
|
|
26
35
|
};
|
|
27
|
-
|
|
36
|
+
|
|
37
|
+
var _default = DxcParagraph;
|
|
28
38
|
exports["default"] = _default;
|
|
@@ -1,72 +1,96 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
11
|
+
|
|
9
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
10
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
11
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
12
18
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
+
|
|
13
20
|
var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
|
|
21
|
+
|
|
14
22
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
23
|
+
|
|
15
24
|
var _templateObject;
|
|
25
|
+
|
|
16
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
17
28
|
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; }
|
|
29
|
+
|
|
18
30
|
var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
19
31
|
var label = _ref.label,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
32
|
+
_ref$name = _ref.name,
|
|
33
|
+
name = _ref$name === void 0 ? "" : _ref$name,
|
|
34
|
+
value = _ref.value,
|
|
35
|
+
helperText = _ref.helperText,
|
|
36
|
+
_ref$clearable = _ref.clearable,
|
|
37
|
+
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
38
|
+
onChange = _ref.onChange,
|
|
39
|
+
onBlur = _ref.onBlur,
|
|
40
|
+
error = _ref.error,
|
|
41
|
+
pattern = _ref.pattern,
|
|
42
|
+
minLength = _ref.minLength,
|
|
43
|
+
maxLength = _ref.maxLength,
|
|
44
|
+
_ref$autocomplete = _ref.autocomplete,
|
|
45
|
+
autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
|
|
46
|
+
margin = _ref.margin,
|
|
47
|
+
_ref$size = _ref.size,
|
|
48
|
+
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
49
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
50
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
51
|
+
|
|
39
52
|
var _useState = (0, _react.useState)(false),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
53
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
54
|
+
isPasswordVisible = _useState2[0],
|
|
55
|
+
setIsPasswordVisible = _useState2[1];
|
|
56
|
+
|
|
43
57
|
var inputRef = (0, _react.useRef)(null);
|
|
44
58
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
59
|
+
|
|
45
60
|
var setInputType = function setInputType(type) {
|
|
46
61
|
var _inputRef$current, _inputRef$current$chi;
|
|
62
|
+
|
|
47
63
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[label && helperText ? 2 : label || helperText ? 1 : 0]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
|
|
48
64
|
};
|
|
65
|
+
|
|
49
66
|
var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
|
|
50
67
|
var inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
|
|
68
|
+
|
|
51
69
|
if (error && clearable && value) {
|
|
52
70
|
var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
|
|
71
|
+
|
|
53
72
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[inputIndex]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
54
73
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[inputIndex]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
|
|
55
74
|
} else if (error || clearable && !value) {
|
|
56
75
|
var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
|
|
76
|
+
|
|
57
77
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[inputIndex]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
58
78
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[inputIndex]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
|
|
59
79
|
} else {
|
|
60
80
|
var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
|
|
81
|
+
|
|
61
82
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[inputIndex]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
62
83
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[inputIndex]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
|
|
63
84
|
}
|
|
64
85
|
};
|
|
86
|
+
|
|
65
87
|
var getIconTitle = function getIconTitle() {
|
|
66
88
|
return isPasswordVisible ? translatedLabels.passwordInput.inputHidePasswordTitle : translatedLabels.passwordInput.inputShowPasswordTitle;
|
|
67
89
|
};
|
|
90
|
+
|
|
68
91
|
(0, _react.useEffect)(function () {
|
|
69
92
|
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
|
|
93
|
+
|
|
70
94
|
if (isPasswordVisible) {
|
|
71
95
|
setInputType("text");
|
|
72
96
|
setAriaAttributes(true, translatedLabels.passwordInput.inputHidePasswordTitle);
|
|
@@ -75,14 +99,17 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
|
|
|
75
99
|
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
|
|
76
100
|
}
|
|
77
101
|
}, [isPasswordVisible]);
|
|
102
|
+
|
|
78
103
|
var viewPassword = function viewPassword() {
|
|
79
104
|
setInputType("text");
|
|
80
105
|
setIsPasswordVisible(true);
|
|
81
106
|
};
|
|
107
|
+
|
|
82
108
|
var hidePassword = function hidePassword() {
|
|
83
109
|
setInputType("password");
|
|
84
110
|
setIsPasswordVisible(false);
|
|
85
111
|
};
|
|
112
|
+
|
|
86
113
|
var action = {
|
|
87
114
|
onClick: isPasswordVisible ? hidePassword : viewPassword,
|
|
88
115
|
icon: isPasswordVisible ? /*#__PURE__*/_react["default"].createElement("svg", {
|
|
@@ -132,6 +159,8 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
|
|
|
132
159
|
tabIndex: tabIndex
|
|
133
160
|
}));
|
|
134
161
|
});
|
|
162
|
+
|
|
135
163
|
var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & ::-ms-reveal {\n display: none;\n }\n"])));
|
|
164
|
+
|
|
136
165
|
var _default = DxcPasswordInput;
|
|
137
166
|
exports["default"] = _default;
|
|
@@ -1,43 +1,57 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
6
|
+
|
|
5
7
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
8
|
+
|
|
6
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
|
|
7
11
|
var _react2 = require("@testing-library/react");
|
|
12
|
+
|
|
8
13
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
9
|
-
|
|
14
|
+
|
|
15
|
+
var _PasswordInput = _interopRequireDefault(require("./PasswordInput.tsx"));
|
|
16
|
+
|
|
10
17
|
describe("Password input component tests", function () {
|
|
11
18
|
test("Password input renders with label", function () {
|
|
12
19
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
label: "Password input label"
|
|
21
|
+
})),
|
|
22
|
+
getByText = _render.getByText;
|
|
23
|
+
|
|
16
24
|
expect(getByText("Password input label")).toBeTruthy();
|
|
17
25
|
});
|
|
18
26
|
test("Password input renders with helper text", function () {
|
|
19
27
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
28
|
+
helperText: "Helper text"
|
|
29
|
+
})),
|
|
30
|
+
getByText = _render2.getByText;
|
|
31
|
+
|
|
23
32
|
expect(getByText("Helper text")).toBeTruthy();
|
|
24
33
|
});
|
|
25
34
|
test("Password input renders error", function () {
|
|
26
35
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
36
|
+
error: "Error message."
|
|
37
|
+
})),
|
|
38
|
+
getByText = _render3.getByText;
|
|
39
|
+
|
|
30
40
|
expect(getByText("Error message.")).toBeTruthy();
|
|
31
41
|
});
|
|
32
42
|
test("onChange function is called correctly", function () {
|
|
33
43
|
var onChange = jest.fn();
|
|
44
|
+
|
|
34
45
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
46
|
+
label: "Password input",
|
|
47
|
+
onChange: onChange
|
|
48
|
+
})),
|
|
49
|
+
getByLabelText = _render4.getByLabelText;
|
|
50
|
+
|
|
39
51
|
var passwordInput = getByLabelText("Password input");
|
|
52
|
+
|
|
40
53
|
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
54
|
+
|
|
41
55
|
expect(onChange).toHaveBeenCalledWith({
|
|
42
56
|
value: "P"
|
|
43
57
|
});
|
|
@@ -45,14 +59,19 @@ describe("Password input component tests", function () {
|
|
|
45
59
|
});
|
|
46
60
|
test("onBlur function is called correctly", function () {
|
|
47
61
|
var onBlur = jest.fn();
|
|
62
|
+
|
|
48
63
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
64
|
+
label: "Password input",
|
|
65
|
+
onBlur: onBlur
|
|
66
|
+
})),
|
|
67
|
+
getByLabelText = _render5.getByLabelText;
|
|
68
|
+
|
|
53
69
|
var passwordInput = getByLabelText("Password input");
|
|
70
|
+
|
|
54
71
|
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
72
|
+
|
|
55
73
|
_react2.fireEvent.blur(passwordInput);
|
|
74
|
+
|
|
56
75
|
expect(onBlur).toHaveBeenCalledWith({
|
|
57
76
|
value: "Pa$$w0rd"
|
|
58
77
|
});
|
|
@@ -60,79 +79,103 @@ describe("Password input component tests", function () {
|
|
|
60
79
|
});
|
|
61
80
|
test("Clear password input value", function () {
|
|
62
81
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
82
|
+
label: "Password input",
|
|
83
|
+
clearable: true
|
|
84
|
+
})),
|
|
85
|
+
getAllByRole = _render6.getAllByRole,
|
|
86
|
+
getByLabelText = _render6.getByLabelText;
|
|
87
|
+
|
|
68
88
|
var passwordInput = getByLabelText("Password input");
|
|
89
|
+
|
|
69
90
|
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
91
|
+
|
|
70
92
|
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
71
93
|
var clearButton = getAllByRole("button")[0];
|
|
94
|
+
|
|
72
95
|
_userEvent["default"].click(clearButton);
|
|
96
|
+
|
|
73
97
|
expect(passwordInput.value).toBe("");
|
|
74
98
|
});
|
|
75
99
|
test("Non clearable password input has no clear icon", function () {
|
|
76
100
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
101
|
+
label: "Password input"
|
|
102
|
+
})),
|
|
103
|
+
getAllByRole = _render7.getAllByRole,
|
|
104
|
+
getByLabelText = _render7.getByLabelText;
|
|
105
|
+
|
|
81
106
|
var passwordInput = getByLabelText("Password input");
|
|
107
|
+
|
|
82
108
|
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
109
|
+
|
|
83
110
|
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
84
111
|
var buttons = getAllByRole("button");
|
|
85
112
|
expect(buttons.length).toBe(1);
|
|
86
113
|
});
|
|
87
114
|
test("Show/hide password input button works correctly", function () {
|
|
88
115
|
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
116
|
+
label: "Password input",
|
|
117
|
+
clearable: true
|
|
118
|
+
})),
|
|
119
|
+
getAllByRole = _render8.getAllByRole,
|
|
120
|
+
getByLabelText = _render8.getByLabelText;
|
|
121
|
+
|
|
94
122
|
var passwordInput = getByLabelText("Password input");
|
|
123
|
+
|
|
95
124
|
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
125
|
+
|
|
96
126
|
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
97
127
|
expect(passwordInput.type).toBe("password");
|
|
98
128
|
var showButton = getAllByRole("button")[1];
|
|
129
|
+
|
|
99
130
|
_userEvent["default"].click(showButton);
|
|
131
|
+
|
|
100
132
|
expect(passwordInput.type).toBe("text");
|
|
101
133
|
});
|
|
102
134
|
test("Password tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
103
135
|
var _render9, getAllByRole, getByTitle, queryByTitle, showButton;
|
|
136
|
+
|
|
104
137
|
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
105
|
-
while (1)
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
138
|
+
while (1) {
|
|
139
|
+
switch (_context.prev = _context.next) {
|
|
140
|
+
case 0:
|
|
141
|
+
_render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
142
|
+
label: "Password input",
|
|
143
|
+
clearable: true,
|
|
144
|
+
value: "Password"
|
|
145
|
+
})), getAllByRole = _render9.getAllByRole, getByTitle = _render9.getByTitle, queryByTitle = _render9.queryByTitle;
|
|
146
|
+
showButton = getAllByRole("button")[1];
|
|
147
|
+
|
|
148
|
+
_userEvent["default"].hover(showButton);
|
|
149
|
+
|
|
150
|
+
expect(getByTitle("Show password")).toBeTruthy();
|
|
151
|
+
|
|
152
|
+
_userEvent["default"].unhover(showButton);
|
|
153
|
+
|
|
154
|
+
expect(queryByTitle("Hide password")).toBeFalsy();
|
|
155
|
+
|
|
156
|
+
case 6:
|
|
157
|
+
case "end":
|
|
158
|
+
return _context.stop();
|
|
159
|
+
}
|
|
120
160
|
}
|
|
121
161
|
}, _callee);
|
|
122
162
|
})));
|
|
123
163
|
test("Password input has correct accesibility attributes", function () {
|
|
124
164
|
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
165
|
+
label: "Password input"
|
|
166
|
+
})),
|
|
167
|
+
getByRole = _render10.getByRole,
|
|
168
|
+
getByLabelText = _render10.getByLabelText;
|
|
169
|
+
|
|
129
170
|
var passwordInput = getByLabelText("Password input");
|
|
130
171
|
expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
|
|
131
172
|
expect(passwordInput.getAttribute("aria-controls")).toBeNull();
|
|
132
173
|
expect(passwordInput.getAttribute("aria-expanded")).toBeNull();
|
|
133
174
|
var showButton = getByRole("button");
|
|
134
175
|
expect(showButton.getAttribute("aria-label")).toBe("Show password");
|
|
176
|
+
|
|
135
177
|
_userEvent["default"].click(showButton);
|
|
178
|
+
|
|
136
179
|
expect(showButton.getAttribute("aria-label")).toBe("Hide password");
|
|
137
180
|
});
|
|
138
181
|
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
1
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
declare type Margin = {
|
|
3
3
|
top?: Space;
|
|
4
4
|
bottom?: Space;
|
|
5
5
|
left?: Space;
|
|
6
6
|
right?: Space;
|
|
7
7
|
};
|
|
8
|
-
type Props = {
|
|
8
|
+
declare type Props = {
|
|
9
9
|
/**
|
|
10
10
|
* Text to be placed above the password.
|
|
11
11
|
*/
|
|
@@ -106,5 +106,5 @@ type Props = {
|
|
|
106
106
|
/**
|
|
107
107
|
* Reference to the component.
|
|
108
108
|
*/
|
|
109
|
-
export type RefType = HTMLDivElement;
|
|
109
|
+
export declare type RefType = HTMLDivElement;
|
|
110
110
|
export default Props;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import
|
|
3
|
-
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }:
|
|
2
|
+
import ProgressBarPropsType from "./types";
|
|
3
|
+
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: ProgressBarPropsType) => JSX.Element;
|
|
4
4
|
export default DxcProgressBar;
|
|
@@ -1,44 +1,60 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
11
|
+
|
|
9
12
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
+
|
|
10
14
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
+
|
|
11
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
12
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
13
20
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
|
+
|
|
14
22
|
var _variables = require("../common/variables");
|
|
23
|
+
|
|
15
24
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
25
|
+
|
|
16
26
|
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
27
|
+
|
|
17
28
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
29
|
+
|
|
18
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
+
|
|
19
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
|
+
|
|
20
34
|
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
21
35
|
var _ref$label = _ref.label,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
label = _ref$label === void 0 ? "" : _ref$label,
|
|
37
|
+
_ref$helperText = _ref.helperText,
|
|
38
|
+
helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
|
|
39
|
+
_ref$overlay = _ref.overlay,
|
|
40
|
+
overlay = _ref$overlay === void 0 ? false : _ref$overlay,
|
|
41
|
+
value = _ref.value,
|
|
42
|
+
_ref$showValue = _ref.showValue,
|
|
43
|
+
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
44
|
+
margin = _ref.margin;
|
|
31
45
|
var colorsTheme = (0, _useTheme["default"])();
|
|
32
46
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
47
|
+
|
|
33
48
|
var _useState = (0, _react.useState)(0),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
49
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
50
|
+
valueProgressBar = _useState2[0],
|
|
51
|
+
setValueProgressBar = _useState2[1];
|
|
52
|
+
|
|
37
53
|
(0, _react.useEffect)(function () {
|
|
38
54
|
setValueProgressBar(value === null || value === undefined || value < 0 ? 0 : value >= 0 && value <= 100 ? value : 100);
|
|
39
55
|
}, [value]);
|
|
40
56
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
41
|
-
theme: colorsTheme
|
|
57
|
+
theme: colorsTheme.progressBar
|
|
42
58
|
}, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
|
|
43
59
|
overlay: overlay
|
|
44
60
|
}, /*#__PURE__*/_react["default"].createElement(ProgressBarContainer, {
|
|
@@ -67,11 +83,13 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
67
83
|
backgroundType: backgroundType
|
|
68
84
|
}, helperText))));
|
|
69
85
|
};
|
|
86
|
+
|
|
70
87
|
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) {
|
|
71
88
|
var overlay = _ref2.overlay,
|
|
72
|
-
|
|
89
|
+
theme = _ref2.theme;
|
|
73
90
|
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\";";
|
|
74
91
|
});
|
|
92
|
+
|
|
75
93
|
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) {
|
|
76
94
|
return props.overlay === true && "100" || "0";
|
|
77
95
|
}, function (props) {
|
|
@@ -87,7 +105,9 @@ var ProgressBarContainer = _styledComponents["default"].div(_templateObject2 ||
|
|
|
87
105
|
}, function (props) {
|
|
88
106
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
89
107
|
});
|
|
108
|
+
|
|
90
109
|
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
|
+
|
|
91
111
|
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) {
|
|
92
112
|
return props.theme.labelFontFamily;
|
|
93
113
|
}, function (props) {
|
|
@@ -101,6 +121,7 @@ var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_te
|
|
|
101
121
|
}, function (props) {
|
|
102
122
|
return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor;
|
|
103
123
|
});
|
|
124
|
+
|
|
104
125
|
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) {
|
|
105
126
|
return props.theme.valueFontFamily;
|
|
106
127
|
}, function (props) {
|
|
@@ -116,6 +137,7 @@ var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (
|
|
|
116
137
|
}, function (props) {
|
|
117
138
|
return props.value !== undefined && props.value !== null && props.showValue === true && "block" || "none";
|
|
118
139
|
});
|
|
140
|
+
|
|
119
141
|
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) {
|
|
120
142
|
return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor;
|
|
121
143
|
}, function (props) {
|
|
@@ -127,6 +149,7 @@ var HelperText = _styledComponents["default"].span(_templateObject6 || (_templat
|
|
|
127
149
|
}, function (props) {
|
|
128
150
|
return props.theme.helperTextFontWeight;
|
|
129
151
|
});
|
|
152
|
+
|
|
130
153
|
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) {
|
|
131
154
|
return props.theme.thickness;
|
|
132
155
|
}, function (props) {
|
|
@@ -136,6 +159,7 @@ var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_temp
|
|
|
136
159
|
}, function (props) {
|
|
137
160
|
return props.helperText !== "" && "8px";
|
|
138
161
|
});
|
|
162
|
+
|
|
139
163
|
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) {
|
|
140
164
|
return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
|
|
141
165
|
}, function (props) {
|
|
@@ -147,5 +171,6 @@ var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_
|
|
|
147
171
|
}, function (props) {
|
|
148
172
|
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;" : "";
|
|
149
173
|
});
|
|
174
|
+
|
|
150
175
|
var _default = DxcProgressBar;
|
|
151
176
|
exports["default"] = _default;
|