@dxc-technology/halstack-react 10.0.0 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +26 -6
- package/HalstackContext.js +9 -34
- package/README.md +47 -0
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.js +1 -2
- package/common/utils.js +2 -8
- package/common/variables.d.ts +23 -6
- package/common/variables.js +25 -15
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +131 -220
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +293 -342
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +4 -0
- package/image/Image.js +70 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -51
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +700 -412
- package/number-input/types.d.ts +11 -5
- package/package.json +28 -26
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -126
- package/password-input/PasswordInput.stories.tsx +1 -32
- package/password-input/PasswordInput.test.js +157 -140
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +182 -263
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +91 -105
- package/toggle-group/ToggleGroup.stories.tsx +7 -4
- package/toggle-group/ToggleGroup.test.js +68 -87
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +20 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → image}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/accordion/types.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
type Props = {
|
|
11
11
|
/**
|
|
12
12
|
* The panel label.
|
|
13
13
|
*/
|
|
@@ -50,7 +50,7 @@ declare type Props = {
|
|
|
50
50
|
*/
|
|
51
51
|
margin?: Space | Margin;
|
|
52
52
|
/**
|
|
53
|
-
* Value of the tabindex.
|
|
53
|
+
* Value of the tabindex attribute.
|
|
54
54
|
*/
|
|
55
55
|
tabIndex?: number;
|
|
56
56
|
};
|
|
@@ -1,62 +1,40 @@
|
|
|
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"] = exports.AccordionGroupAccordionContext = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
-
|
|
18
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
-
|
|
20
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
|
-
|
|
24
15
|
var _utils = require("../common/utils");
|
|
25
|
-
|
|
26
16
|
var _variables = require("../common/variables");
|
|
27
|
-
|
|
28
17
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
29
|
-
|
|
30
18
|
var _AccordionGroupAccordion = _interopRequireDefault(require("./AccordionGroupAccordion"));
|
|
31
|
-
|
|
32
19
|
var _templateObject;
|
|
33
|
-
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
39
|
-
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
41
|
-
|
|
42
|
-
var AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
43
|
-
exports.AccordionGroupAccordionContext = AccordionGroupAccordionContext;
|
|
44
|
-
|
|
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" != _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; }
|
|
22
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
|
+
var AccordionGroupAccordionContext = exports.AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
45
25
|
var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
|
|
46
26
|
var defaultIndexActive = _ref.defaultIndexActive,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
27
|
+
indexActive = _ref.indexActive,
|
|
28
|
+
_ref$disabled = _ref.disabled,
|
|
29
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
30
|
+
onActiveChange = _ref.onActiveChange,
|
|
31
|
+
margin = _ref.margin,
|
|
32
|
+
children = _ref.children;
|
|
53
33
|
var colorsTheme = (0, _useTheme["default"])();
|
|
54
|
-
|
|
55
34
|
var _useState = (0, _react.useState)(defaultIndexActive !== null && defaultIndexActive !== void 0 ? defaultIndexActive : -1),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
35
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
36
|
+
innerIndexActive = _useState2[0],
|
|
37
|
+
setInnerIndexActive = _useState2[1];
|
|
60
38
|
var handlerActiveChange = (0, _react.useCallback)(function (index) {
|
|
61
39
|
indexActive !== null && indexActive !== void 0 ? indexActive : setInnerIndexActive(function (prev) {
|
|
62
40
|
return index === prev ? -1 : index;
|
|
@@ -84,13 +62,10 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
|
|
|
84
62
|
}, accordion);
|
|
85
63
|
})));
|
|
86
64
|
};
|
|
87
|
-
|
|
88
65
|
DxcAccordionGroup.Accordion = _AccordionGroupAccordion["default"];
|
|
89
|
-
|
|
90
66
|
var calculateWidth = function calculateWidth(margin) {
|
|
91
67
|
return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
|
|
92
68
|
};
|
|
93
|
-
|
|
94
69
|
var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n\n > div:not(:last-of-type):not(:only-of-type) {\n border-bottom: ", ";\n border-color: ", ";\n }\n > div:not(:first-of-type):not(:last-of-type):not(:only-of-type) {\n border-radius: 0;\n & > h3 > button {\n border-radius: 0;\n }\n }\n > div:first-of-type:not(:only-of-type) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n & > h3 > button {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n > div:last-of-type:not(:only-of-type) {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n\n & > h3 > button {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n }\n"])), function (props) {
|
|
95
70
|
return calculateWidth(props.margin);
|
|
96
71
|
}, function (_ref2) {
|
|
@@ -123,6 +98,4 @@ var AccordionGroupContainer = _styledComponents["default"].div(_templateObject |
|
|
|
123
98
|
}, function (props) {
|
|
124
99
|
return props.theme.borderRadius;
|
|
125
100
|
});
|
|
126
|
-
|
|
127
|
-
var _default = DxcAccordionGroup;
|
|
128
|
-
exports["default"] = _default;
|
|
101
|
+
var _default = exports["default"] = DxcAccordionGroup;
|
|
@@ -1,50 +1,41 @@
|
|
|
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 _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("Accordion component tests", function () {
|
|
12
8
|
test("Uncontrolled accordion group calls correct function on click", function () {
|
|
13
9
|
var onActiveChange = jest.fn();
|
|
14
|
-
|
|
15
10
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
11
|
+
margin: "large",
|
|
12
|
+
onActiveChange: onActiveChange
|
|
13
|
+
}, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
14
|
+
label: "Accordion1",
|
|
15
|
+
margin: "large"
|
|
16
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
17
|
+
label: "Accordion2"
|
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
|
|
19
|
+
getByText = _render.getByText,
|
|
20
|
+
getAllByRole = _render.getAllByRole;
|
|
27
21
|
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
|
|
28
22
|
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
|
|
29
|
-
|
|
30
23
|
_react2.fireEvent.click(getByText("Accordion1"));
|
|
31
|
-
|
|
32
24
|
expect(onActiveChange).toHaveBeenCalled();
|
|
33
25
|
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
|
|
34
26
|
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
|
|
35
27
|
});
|
|
36
28
|
test("Uncontrolled accordion group renders initially with an accordion expanded using defaultIndexActive", function () {
|
|
37
29
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
30
|
+
defaultIndexActive: 1
|
|
31
|
+
}, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
32
|
+
label: "Accordion1"
|
|
33
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
34
|
+
label: "Accordion2"
|
|
35
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
|
|
36
|
+
queryByText = _render2.queryByText,
|
|
37
|
+
getByText = _render2.getByText,
|
|
38
|
+
getAllByRole = _render2.getAllByRole;
|
|
48
39
|
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
|
|
49
40
|
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
|
|
50
41
|
expect(getByText("Second accordion")).toBeTruthy();
|
|
@@ -52,29 +43,24 @@ describe("Accordion component tests", function () {
|
|
|
52
43
|
});
|
|
53
44
|
test("Controlled accordion with indexActive change", function () {
|
|
54
45
|
var onActiveChange = jest.fn();
|
|
55
|
-
|
|
56
46
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
47
|
+
margin: "large",
|
|
48
|
+
indexActive: 1,
|
|
49
|
+
onActiveChange: onActiveChange
|
|
50
|
+
}, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
51
|
+
label: "Accordion1",
|
|
52
|
+
margin: "large"
|
|
53
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
54
|
+
label: "Accordion2"
|
|
55
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
|
|
56
|
+
queryByText = _render3.queryByText,
|
|
57
|
+
getByText = _render3.getByText,
|
|
58
|
+
getAllByRole = _render3.getAllByRole,
|
|
59
|
+
rerender = _render3.rerender;
|
|
71
60
|
expect(queryByText("Text1")).toBeFalsy();
|
|
72
61
|
expect(getByText("Text2")).toBeTruthy();
|
|
73
|
-
|
|
74
62
|
_react2.fireEvent.click(getByText("Accordion1"));
|
|
75
|
-
|
|
76
63
|
_react2.fireEvent.click(getByText("Accordion2"));
|
|
77
|
-
|
|
78
64
|
expect(onActiveChange.mock.calls[0][0]).toBe(0);
|
|
79
65
|
expect(onActiveChange.mock.calls[1][0]).toBe(1);
|
|
80
66
|
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
|
|
@@ -94,23 +80,19 @@ describe("Accordion component tests", function () {
|
|
|
94
80
|
});
|
|
95
81
|
test("Disabled uncontrolled accordion group", function () {
|
|
96
82
|
var onActiveChange = jest.fn();
|
|
97
|
-
|
|
98
83
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
84
|
+
margin: "large",
|
|
85
|
+
onActiveChange: onActiveChange,
|
|
86
|
+
disabled: true
|
|
87
|
+
}, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
88
|
+
label: "Accordion1",
|
|
89
|
+
margin: "large"
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
|
|
91
|
+
label: "Accordion2"
|
|
92
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
|
|
93
|
+
getByText = _render4.getByText;
|
|
110
94
|
_react2.fireEvent.click(getByText("Accordion1"));
|
|
111
|
-
|
|
112
95
|
_react2.fireEvent.click(getByText("Accordion2"));
|
|
113
|
-
|
|
114
96
|
expect(onActiveChange).toHaveBeenCalledTimes(0);
|
|
115
97
|
});
|
|
116
98
|
});
|
|
@@ -1,35 +1,25 @@
|
|
|
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
|
-
|
|
9
|
+
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
12
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
12
|
var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
|
|
17
|
-
|
|
18
13
|
var _AccordionGroup = require("./AccordionGroup");
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
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; }
|
|
23
|
-
|
|
14
|
+
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); }
|
|
15
|
+
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; }
|
|
24
16
|
var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
|
|
25
|
-
var childProps = (0, _extends2["default"])({}, _ref);
|
|
26
|
-
|
|
17
|
+
var childProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
|
|
27
18
|
var _useContext = (0, _react.useContext)(_AccordionGroup.AccordionGroupAccordionContext),
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
activeIndex = _useContext.activeIndex,
|
|
20
|
+
handlerActiveChange = _useContext.handlerActiveChange,
|
|
21
|
+
disabled = _useContext.disabled,
|
|
22
|
+
index = _useContext.index;
|
|
33
23
|
return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
|
|
34
24
|
isExpanded: activeIndex === index,
|
|
35
25
|
onChange: function onChange() {
|
|
@@ -38,6 +28,4 @@ var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
|
|
|
38
28
|
disabled: disabled
|
|
39
29
|
}, childProps), childProps.children);
|
|
40
30
|
};
|
|
41
|
-
|
|
42
|
-
var _default = AccordionGroupAccordion;
|
|
43
|
-
exports["default"] = _default;
|
|
31
|
+
var _default = exports["default"] = AccordionGroupAccordion;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
export
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
export type AccordionPropsType = {
|
|
11
11
|
/**
|
|
12
12
|
* The panel label.
|
|
13
13
|
*/
|
|
@@ -30,7 +30,7 @@ export declare type AccordionPropsType = {
|
|
|
30
30
|
*/
|
|
31
31
|
children: React.ReactNode;
|
|
32
32
|
};
|
|
33
|
-
|
|
33
|
+
type Props = {
|
|
34
34
|
/**
|
|
35
35
|
* Initially active accordion, only when it is uncontrolled.
|
|
36
36
|
*/
|
|
@@ -58,7 +58,7 @@ declare type Props = {
|
|
|
58
58
|
*/
|
|
59
59
|
children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
|
|
60
60
|
};
|
|
61
|
-
export
|
|
61
|
+
export type AccordionGroupAccordionContextProps = {
|
|
62
62
|
activeIndex: number;
|
|
63
63
|
handlerActiveChange: (index: number) => void;
|
|
64
64
|
disabled: boolean;
|
package/alert/Alert.js
CHANGED
|
@@ -1,38 +1,23 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
17
|
-
|
|
18
12
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
-
|
|
20
13
|
var _variables = require("../common/variables");
|
|
21
|
-
|
|
22
14
|
var _utils = require("../common/utils");
|
|
23
|
-
|
|
24
15
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
25
|
-
|
|
26
16
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
27
|
-
|
|
28
17
|
var _BackgroundColorContext = require("../BackgroundColorContext");
|
|
29
|
-
|
|
30
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
31
|
-
|
|
32
|
-
function
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
19
|
+
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); }
|
|
20
|
+
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; }
|
|
36
21
|
var alertIcons = {
|
|
37
22
|
close: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
38
23
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -96,27 +81,24 @@ var alertIcons = {
|
|
|
96
81
|
fill: "none"
|
|
97
82
|
}))
|
|
98
83
|
};
|
|
99
|
-
|
|
100
84
|
var DxcAlert = function DxcAlert(_ref) {
|
|
101
85
|
var _ref$type = _ref.type,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
86
|
+
type = _ref$type === void 0 ? "info" : _ref$type,
|
|
87
|
+
_ref$mode = _ref.mode,
|
|
88
|
+
mode = _ref$mode === void 0 ? "inline" : _ref$mode,
|
|
89
|
+
_ref$inlineText = _ref.inlineText,
|
|
90
|
+
inlineText = _ref$inlineText === void 0 ? "" : _ref$inlineText,
|
|
91
|
+
onClose = _ref.onClose,
|
|
92
|
+
children = _ref.children,
|
|
93
|
+
margin = _ref.margin,
|
|
94
|
+
_ref$size = _ref.size,
|
|
95
|
+
size = _ref$size === void 0 ? "fitContent" : _ref$size,
|
|
96
|
+
tabIndex = _ref.tabIndex;
|
|
113
97
|
var colorsTheme = (0, _useTheme["default"])();
|
|
114
98
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
115
|
-
|
|
116
99
|
var getTypeText = function getTypeText() {
|
|
117
100
|
return type === "info" ? translatedLabels.alert.infoTitleText : type === "confirm" ? translatedLabels.alert.successTitleText : type === "warning" ? translatedLabels.alert.warningTitleText : translatedLabels.alert.errorTitleText;
|
|
118
101
|
};
|
|
119
|
-
|
|
120
102
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
121
103
|
theme: colorsTheme.alert
|
|
122
104
|
}, /*#__PURE__*/_react["default"].createElement(AlertModal, {
|
|
@@ -138,7 +120,6 @@ var DxcAlert = function DxcAlert(_ref) {
|
|
|
138
120
|
color: type === "info" && colorsTheme.alert.infoBackgroundColor || type === "confirm" && colorsTheme.alert.successBackgroundColor || type === "warning" && colorsTheme.alert.warningBackgroundColor || type === "error" && colorsTheme.alert.errorBackgroundColor
|
|
139
121
|
}, children)))));
|
|
140
122
|
};
|
|
141
|
-
|
|
142
123
|
var sizes = {
|
|
143
124
|
small: "280px",
|
|
144
125
|
medium: "480px",
|
|
@@ -146,11 +127,9 @@ var sizes = {
|
|
|
146
127
|
fillParent: "100%",
|
|
147
128
|
fitContent: "fit-content"
|
|
148
129
|
};
|
|
149
|
-
|
|
150
130
|
var calculateWidth = function calculateWidth(margin, size) {
|
|
151
131
|
return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
|
|
152
132
|
};
|
|
153
|
-
|
|
154
133
|
var AlertModal = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n width: ", ";\n height: ", ";\n justify-content: ", ";\n align-items: ", ";\n top: ", ";\n left: ", ";\n position: ", ";\n display: ", ";\n z-index: ", ";\n"])), function (props) {
|
|
155
134
|
return props.theme.fontSizeBase;
|
|
156
135
|
}, function (props) {
|
|
@@ -172,7 +151,6 @@ var AlertModal = _styledComponents["default"].div(_templateObject || (_templateO
|
|
|
172
151
|
}, function (props) {
|
|
173
152
|
return props.mode === "modal" ? "1200" : "";
|
|
174
153
|
});
|
|
175
|
-
|
|
176
154
|
var OverlayContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n"])), function (props) {
|
|
177
155
|
return props.mode === "modal" ? "".concat(props.theme.overlayColor) : "transparent";
|
|
178
156
|
}, function (props) {
|
|
@@ -186,7 +164,6 @@ var OverlayContainer = _styledComponents["default"].div(_templateObject2 || (_te
|
|
|
186
164
|
}, function (props) {
|
|
187
165
|
return props.mode === "modal" ? "0" : "";
|
|
188
166
|
});
|
|
189
|
-
|
|
190
167
|
var AlertContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: ", ";\n overflow: hidden;\n box-sizing: border-box;\n\n background-color: ", ";\n\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n padding-left: 12px;\n padding-right: 12px;\n justify-content: ", ";\n align-items: ", ";\n max-width: ", ";\n width: ", ";\n z-index: ", ";\n"])), function (props) {
|
|
191
168
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
192
169
|
}, function (props) {
|
|
@@ -220,11 +197,9 @@ var AlertContainer = _styledComponents["default"].div(_templateObject3 || (_temp
|
|
|
220
197
|
}, function (props) {
|
|
221
198
|
return props.mode === "modal" ? "1300" : "";
|
|
222
199
|
});
|
|
223
|
-
|
|
224
200
|
var AlertInfo = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n height: calc(48px - calc(", " * 2));\n align-items: center;\n width: 100%;\n"])), function (props) {
|
|
225
201
|
return props.theme.borderThickness;
|
|
226
202
|
});
|
|
227
|
-
|
|
228
203
|
var AlertTitle = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 8px;\n padding-right: ", ";\n padding-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n"])), function (props) {
|
|
229
204
|
return props.theme.titlePaddingRight;
|
|
230
205
|
}, function (props) {
|
|
@@ -242,7 +217,6 @@ var AlertTitle = _styledComponents["default"].div(_templateObject5 || (_template
|
|
|
242
217
|
}, function (props) {
|
|
243
218
|
return props.theme.titleTextTransform;
|
|
244
219
|
});
|
|
245
|
-
|
|
246
220
|
var AlertInlineText = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 8px;\n padding-right: ", ";\n padding-left: ", ";\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n"])), function (props) {
|
|
247
221
|
return props.theme.inlineTextPaddingRight;
|
|
248
222
|
}, function (props) {
|
|
@@ -258,7 +232,6 @@ var AlertInlineText = _styledComponents["default"].div(_templateObject6 || (_tem
|
|
|
258
232
|
}, function (props) {
|
|
259
233
|
return props.theme.inlineTextFontColor;
|
|
260
234
|
});
|
|
261
|
-
|
|
262
235
|
var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n margin-right: 12px;\n padding-right: ", ";\n padding-left: ", ";\n\n color: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (props) {
|
|
263
236
|
return props.theme.iconPaddingRight;
|
|
264
237
|
}, function (props) {
|
|
@@ -270,13 +243,10 @@ var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_template
|
|
|
270
243
|
}, function (props) {
|
|
271
244
|
return props.theme.iconSize;
|
|
272
245
|
});
|
|
273
|
-
|
|
274
246
|
var AlertText = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n align-items: center;\n overflow: hidden;\n"])));
|
|
275
|
-
|
|
276
247
|
var AlertContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1 1 auto;\n padding: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
277
248
|
return "".concat(props.theme.contentPaddingTop, " ").concat(props.theme.contentPaddingRight, " ").concat(props.theme.contentPaddingBottom, " ").concat(props.theme.contentPaddingLeft);
|
|
278
249
|
});
|
|
279
|
-
|
|
280
250
|
var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n border: 1px solid transparent;\n border-radius: 2px;\n box-shadow: 0 0 0 2px transparent;\n padding: 3px;\n margin-left: 12px;\n background-color: transparent;\n color: #000000;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n &:focus,\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n }\n &:active {\n background-color: ", ";\n }\n"])), function (props) {
|
|
281
251
|
return props.theme.hoverActionBackgroundColor;
|
|
282
252
|
}, function (props) {
|
|
@@ -284,6 +254,4 @@ var AlertCloseAction = _styledComponents["default"].button(_templateObject10 ||
|
|
|
284
254
|
}, function (props) {
|
|
285
255
|
return props.theme.activeActionBackgroundColor;
|
|
286
256
|
});
|
|
287
|
-
|
|
288
|
-
var _default = DxcAlert;
|
|
289
|
-
exports["default"] = _default;
|
|
257
|
+
var _default = exports["default"] = DxcAlert;
|