@dxc-technology/halstack-react 10.1.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 +18 -6
- package/HalstackContext.js +9 -34
- 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 +15 -6
- package/common/variables.js +17 -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.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 +2 -2
- package/image/Image.js +17 -32
- 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 +1 -1
- 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 +1 -1
- package/main.js +3 -52
- 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 +1 -1
- package/number-input/NumberInput.js +24 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +682 -577
- package/number-input/types.d.ts +11 -5
- package/package.json +27 -25
- 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 +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +153 -129
- 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.test.js +1902 -1796
- 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 +128 -193
- 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 +20 -57
- 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 +12 -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/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{resultsetTable → 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/heading/Heading.js
CHANGED
|
@@ -1,46 +1,32 @@
|
|
|
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 _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
23
|
-
|
|
24
15
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
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; }
|
|
29
|
-
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
30
18
|
var DxcHeading = function DxcHeading(_ref) {
|
|
31
19
|
var _ref$level = _ref.level,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
20
|
+
level = _ref$level === void 0 ? 1 : _ref$level,
|
|
21
|
+
_ref$text = _ref.text,
|
|
22
|
+
text = _ref$text === void 0 ? "" : _ref$text,
|
|
23
|
+
as = _ref.as,
|
|
24
|
+
weight = _ref.weight,
|
|
25
|
+
margin = _ref.margin;
|
|
38
26
|
var colorsTheme = (0, _useTheme["default"])();
|
|
39
|
-
|
|
40
27
|
var checkValidAs = function checkValidAs() {
|
|
41
28
|
if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
|
|
42
29
|
};
|
|
43
|
-
|
|
44
30
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
45
31
|
theme: colorsTheme.heading
|
|
46
32
|
}, /*#__PURE__*/_react["default"].createElement(HeadingContainer, {
|
|
@@ -62,7 +48,6 @@ var DxcHeading = function DxcHeading(_ref) {
|
|
|
62
48
|
weight: weight
|
|
63
49
|
}, text)));
|
|
64
50
|
};
|
|
65
|
-
|
|
66
51
|
var HeadingContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
67
52
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
68
53
|
}, function (props) {
|
|
@@ -74,7 +59,6 @@ var HeadingContainer = _styledComponents["default"].div(_templateObject || (_tem
|
|
|
74
59
|
}, function (props) {
|
|
75
60
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
76
61
|
});
|
|
77
|
-
|
|
78
62
|
var HeadingLevel1 = _styledComponents["default"].h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"])), function (props) {
|
|
79
63
|
return props.theme.level1FontFamily;
|
|
80
64
|
}, function (props) {
|
|
@@ -90,7 +74,6 @@ var HeadingLevel1 = _styledComponents["default"].h1(_templateObject2 || (_templa
|
|
|
90
74
|
}, function (props) {
|
|
91
75
|
return props.theme.level1FontColor;
|
|
92
76
|
});
|
|
93
|
-
|
|
94
77
|
var HeadingLevel2 = _styledComponents["default"].h2(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"])), function (props) {
|
|
95
78
|
return props.theme.level2FontFamily;
|
|
96
79
|
}, function (props) {
|
|
@@ -106,7 +89,6 @@ var HeadingLevel2 = _styledComponents["default"].h2(_templateObject3 || (_templa
|
|
|
106
89
|
}, function (props) {
|
|
107
90
|
return props.theme.level2FontColor;
|
|
108
91
|
});
|
|
109
|
-
|
|
110
92
|
var HeadingLevel3 = _styledComponents["default"].h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"])), function (props) {
|
|
111
93
|
return props.theme.level3FontFamily;
|
|
112
94
|
}, function (props) {
|
|
@@ -122,7 +104,6 @@ var HeadingLevel3 = _styledComponents["default"].h3(_templateObject4 || (_templa
|
|
|
122
104
|
}, function (props) {
|
|
123
105
|
return props.theme.level3FontColor;
|
|
124
106
|
});
|
|
125
|
-
|
|
126
107
|
var HeadingLevel4 = _styledComponents["default"].h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"])), function (props) {
|
|
127
108
|
return props.theme.level4FontFamily;
|
|
128
109
|
}, function (props) {
|
|
@@ -138,7 +119,6 @@ var HeadingLevel4 = _styledComponents["default"].h4(_templateObject5 || (_templa
|
|
|
138
119
|
}, function (props) {
|
|
139
120
|
return props.theme.level4FontColor;
|
|
140
121
|
});
|
|
141
|
-
|
|
142
122
|
var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"])), function (props) {
|
|
143
123
|
return props.theme.level5FontFamily;
|
|
144
124
|
}, function (props) {
|
|
@@ -154,6 +134,4 @@ var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templa
|
|
|
154
134
|
}, function (props) {
|
|
155
135
|
return props.theme.level5FontColor;
|
|
156
136
|
});
|
|
157
|
-
|
|
158
|
-
var _default = DxcHeading;
|
|
159
|
-
exports["default"] = _default;
|
|
137
|
+
var _default = exports["default"] = DxcHeading;
|
package/heading/Heading.test.js
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
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 _Heading = _interopRequireDefault(require("./Heading.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("Heading component tests", function () {
|
|
12
8
|
test("Heading renders with default level", function () {
|
|
13
9
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
text: "my-heading-test"
|
|
11
|
+
})),
|
|
12
|
+
getByText = _render.getByText,
|
|
13
|
+
getByRole = _render.getByRole;
|
|
19
14
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
20
15
|
expect(getByRole("heading", {
|
|
21
16
|
level: 1
|
|
@@ -23,12 +18,11 @@ describe("Heading component tests", function () {
|
|
|
23
18
|
});
|
|
24
19
|
test("Heading renders with level 1", function () {
|
|
25
20
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
21
|
+
text: "my-heading-test",
|
|
22
|
+
level: 1
|
|
23
|
+
})),
|
|
24
|
+
getByText = _render2.getByText,
|
|
25
|
+
getByRole = _render2.getByRole;
|
|
32
26
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
33
27
|
expect(getByRole("heading", {
|
|
34
28
|
level: 1
|
|
@@ -36,12 +30,11 @@ describe("Heading component tests", function () {
|
|
|
36
30
|
});
|
|
37
31
|
test("Heading renders with level 2", function () {
|
|
38
32
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
33
|
+
text: "my-heading-test",
|
|
34
|
+
level: 2
|
|
35
|
+
})),
|
|
36
|
+
getByText = _render3.getByText,
|
|
37
|
+
getByRole = _render3.getByRole;
|
|
45
38
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
46
39
|
expect(getByRole("heading", {
|
|
47
40
|
level: 2
|
|
@@ -49,12 +42,11 @@ describe("Heading component tests", function () {
|
|
|
49
42
|
});
|
|
50
43
|
test("Heading renders with level 3", function () {
|
|
51
44
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
45
|
+
text: "my-heading-test",
|
|
46
|
+
level: 3
|
|
47
|
+
})),
|
|
48
|
+
getByText = _render4.getByText,
|
|
49
|
+
getByRole = _render4.getByRole;
|
|
58
50
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
59
51
|
expect(getByRole("heading", {
|
|
60
52
|
level: 3
|
|
@@ -62,12 +54,11 @@ describe("Heading component tests", function () {
|
|
|
62
54
|
});
|
|
63
55
|
test("Heading renders with level 4", function () {
|
|
64
56
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
57
|
+
text: "my-heading-test",
|
|
58
|
+
level: 4
|
|
59
|
+
})),
|
|
60
|
+
getByText = _render5.getByText,
|
|
61
|
+
getByRole = _render5.getByRole;
|
|
71
62
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
72
63
|
expect(getByRole("heading", {
|
|
73
64
|
level: 4
|
|
@@ -75,12 +66,11 @@ describe("Heading component tests", function () {
|
|
|
75
66
|
});
|
|
76
67
|
test("Heading renders with level 5", function () {
|
|
77
68
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
69
|
+
text: "my-heading-test",
|
|
70
|
+
level: 5
|
|
71
|
+
})),
|
|
72
|
+
getByText = _render6.getByText,
|
|
73
|
+
getByRole = _render6.getByRole;
|
|
84
74
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
85
75
|
expect(getByRole("heading", {
|
|
86
76
|
level: 5
|
|
@@ -88,12 +78,11 @@ describe("Heading component tests", function () {
|
|
|
88
78
|
});
|
|
89
79
|
test("Heading renders with default level and as h5", function () {
|
|
90
80
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
81
|
+
text: "my-heading-test",
|
|
82
|
+
as: "h5"
|
|
83
|
+
})),
|
|
84
|
+
getByText = _render7.getByText,
|
|
85
|
+
getByRole = _render7.getByRole;
|
|
97
86
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
98
87
|
expect(getByRole("heading", {
|
|
99
88
|
level: 5
|
|
@@ -101,13 +90,12 @@ describe("Heading component tests", function () {
|
|
|
101
90
|
});
|
|
102
91
|
test("Heading renders with level 1 and as h5", function () {
|
|
103
92
|
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
93
|
+
text: "my-heading-test",
|
|
94
|
+
level: 1,
|
|
95
|
+
as: "h5"
|
|
96
|
+
})),
|
|
97
|
+
getByText = _render8.getByText,
|
|
98
|
+
getByRole = _render8.getByRole;
|
|
111
99
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
112
100
|
expect(getByRole("heading", {
|
|
113
101
|
level: 5
|
|
@@ -115,13 +103,12 @@ describe("Heading component tests", function () {
|
|
|
115
103
|
});
|
|
116
104
|
test("Heading renders with level 2 and as h4", function () {
|
|
117
105
|
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
106
|
+
text: "my-heading-test",
|
|
107
|
+
level: 2,
|
|
108
|
+
as: "h4"
|
|
109
|
+
})),
|
|
110
|
+
getByText = _render9.getByText,
|
|
111
|
+
getByRole = _render9.getByRole;
|
|
125
112
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
126
113
|
expect(getByRole("heading", {
|
|
127
114
|
level: 4
|
|
@@ -129,13 +116,12 @@ describe("Heading component tests", function () {
|
|
|
129
116
|
});
|
|
130
117
|
test("Heading renders with level 3 and as h2", function () {
|
|
131
118
|
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
119
|
+
text: "my-heading-test",
|
|
120
|
+
level: 3,
|
|
121
|
+
as: "h2"
|
|
122
|
+
})),
|
|
123
|
+
getByText = _render10.getByText,
|
|
124
|
+
getByRole = _render10.getByRole;
|
|
139
125
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
140
126
|
expect(getByRole("heading", {
|
|
141
127
|
level: 2
|
|
@@ -143,13 +129,12 @@ describe("Heading component tests", function () {
|
|
|
143
129
|
});
|
|
144
130
|
test("Heading renders with level 4 and as h3", function () {
|
|
145
131
|
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
132
|
+
text: "my-heading-test",
|
|
133
|
+
level: 4,
|
|
134
|
+
as: "h3"
|
|
135
|
+
})),
|
|
136
|
+
getByText = _render11.getByText,
|
|
137
|
+
getByRole = _render11.getByRole;
|
|
153
138
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
154
139
|
expect(getByRole("heading", {
|
|
155
140
|
level: 3
|
|
@@ -157,13 +142,12 @@ describe("Heading component tests", function () {
|
|
|
157
142
|
});
|
|
158
143
|
test("Heading renders with level 5 as h4", function () {
|
|
159
144
|
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
145
|
+
text: "my-heading-test",
|
|
146
|
+
level: 5,
|
|
147
|
+
as: "h4"
|
|
148
|
+
})),
|
|
149
|
+
getByText = _render12.getByText,
|
|
150
|
+
getByRole = _render12.getByRole;
|
|
167
151
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
168
152
|
expect(getByRole("heading", {
|
|
169
153
|
level: 4
|
|
@@ -171,13 +155,12 @@ describe("Heading component tests", function () {
|
|
|
171
155
|
});
|
|
172
156
|
test("Heading renders with level 5 and invalid as", function () {
|
|
173
157
|
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
158
|
+
text: "my-heading-test",
|
|
159
|
+
level: 5,
|
|
160
|
+
as: "h4afdssf"
|
|
161
|
+
})),
|
|
162
|
+
getByText = _render13.getByText,
|
|
163
|
+
getByRole = _render13.getByRole;
|
|
181
164
|
expect(getByText("my-heading-test")).toBeTruthy();
|
|
182
165
|
expect(getByRole("heading", {
|
|
183
166
|
level: 5
|
package/heading/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
type Margin = {
|
|
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
|
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
11
11
|
* The html tag of the heading will be the one specified in the 'as' prop.
|
|
@@ -16,14 +16,14 @@ declare type Props = {
|
|
|
16
16
|
* Heading text.
|
|
17
17
|
*/
|
|
18
18
|
text: string;
|
|
19
|
-
/**
|
|
20
|
-
* Specifies the html tag of the heading.
|
|
21
|
-
*/
|
|
22
|
-
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
23
19
|
/**
|
|
24
20
|
* Modifies the default weight of the heading.
|
|
25
21
|
*/
|
|
26
22
|
weight?: "light" | "normal" | "bold";
|
|
23
|
+
/**
|
|
24
|
+
* Specifies the HTML tag of the heading.
|
|
25
|
+
*/
|
|
26
|
+
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
27
27
|
/**
|
|
28
28
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
29
29
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
package/image/Image.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
import ImagePropsType from "./types";
|
|
3
|
-
declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: ImagePropsType) => JSX.Element;
|
|
3
|
+
declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: ImagePropsType) => React.JSX.Element;
|
|
4
4
|
export default DxcImage;
|
package/image/Image.js
CHANGED
|
@@ -1,51 +1,39 @@
|
|
|
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 _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
19
|
-
|
|
20
13
|
var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
|
|
21
|
-
|
|
22
14
|
var _templateObject;
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
15
|
+
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); }
|
|
16
|
+
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; }
|
|
28
17
|
var CaptionWrapper = function CaptionWrapper(_ref) {
|
|
29
18
|
var condition = _ref.condition,
|
|
30
|
-
|
|
31
|
-
|
|
19
|
+
wrapper = _ref.wrapper,
|
|
20
|
+
children = _ref.children;
|
|
32
21
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? wrapper(children) : children);
|
|
33
22
|
};
|
|
34
|
-
|
|
35
23
|
var DxcImage = function DxcImage(_ref2) {
|
|
36
24
|
var alt = _ref2.alt,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
25
|
+
caption = _ref2.caption,
|
|
26
|
+
_ref2$lazyLoading = _ref2.lazyLoading,
|
|
27
|
+
lazyLoading = _ref2$lazyLoading === void 0 ? false : _ref2$lazyLoading,
|
|
28
|
+
src = _ref2.src,
|
|
29
|
+
srcSet = _ref2.srcSet,
|
|
30
|
+
sizes = _ref2.sizes,
|
|
31
|
+
width = _ref2.width,
|
|
32
|
+
height = _ref2.height,
|
|
33
|
+
objectFit = _ref2.objectFit,
|
|
34
|
+
objectPosition = _ref2.objectPosition,
|
|
35
|
+
onLoad = _ref2.onLoad,
|
|
36
|
+
onError = _ref2.onError;
|
|
49
37
|
var colorsTheme = (0, _useTheme["default"])();
|
|
50
38
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
51
39
|
theme: colorsTheme.image
|
|
@@ -78,8 +66,5 @@ var DxcImage = function DxcImage(_ref2) {
|
|
|
78
66
|
}
|
|
79
67
|
})));
|
|
80
68
|
};
|
|
81
|
-
|
|
82
69
|
var Figure = _styledComponents["default"].figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: fit-content;\n margin: 0;\n padding: 0;\n"])));
|
|
83
|
-
|
|
84
|
-
var _default = DxcImage;
|
|
85
|
-
exports["default"] = _default;
|
|
70
|
+
var _default = exports["default"] = DxcImage;
|
package/image/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
type Props = {
|
|
3
3
|
/**
|
|
4
4
|
* Alternative text description displayed when the specified image is not loaded.
|
|
5
5
|
*
|
|
@@ -64,7 +64,7 @@ declare type Props = {
|
|
|
64
64
|
*/
|
|
65
65
|
onError?: React.ReactEventHandler<HTMLImageElement>;
|
|
66
66
|
};
|
|
67
|
-
export
|
|
67
|
+
export type CaptionWrapperProps = {
|
|
68
68
|
condition: boolean;
|
|
69
69
|
wrapper: (children: React.ReactNode) => JSX.Element;
|
|
70
70
|
children: React.ReactNode;
|
package/inset/Inset.js
CHANGED
|
@@ -1,29 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = Inset;
|
|
9
|
-
|
|
10
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
11
|
var _templateObject;
|
|
17
|
-
|
|
18
12
|
function Inset(_ref) {
|
|
19
13
|
var space = _ref.space,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
horizontal = _ref.horizontal,
|
|
15
|
+
vertical = _ref.vertical,
|
|
16
|
+
top = _ref.top,
|
|
17
|
+
right = _ref.right,
|
|
18
|
+
bottom = _ref.bottom,
|
|
19
|
+
left = _ref.left,
|
|
20
|
+
children = _ref.children;
|
|
27
21
|
return /*#__PURE__*/_react["default"].createElement(StyledInset, {
|
|
28
22
|
space: space,
|
|
29
23
|
horizontal: horizontal,
|
|
@@ -34,18 +28,16 @@ function Inset(_ref) {
|
|
|
34
28
|
left: left
|
|
35
29
|
}, children);
|
|
36
30
|
}
|
|
37
|
-
|
|
38
31
|
function getSpacingValue(spacingName) {
|
|
39
32
|
return spacingName ? spacingName : "0rem";
|
|
40
33
|
}
|
|
41
|
-
|
|
42
34
|
var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
|
|
43
35
|
var space = _ref2.space,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
horizontal = _ref2.horizontal,
|
|
37
|
+
vertical = _ref2.vertical,
|
|
38
|
+
top = _ref2.top,
|
|
39
|
+
right = _ref2.right,
|
|
40
|
+
bottom = _ref2.bottom,
|
|
41
|
+
left = _ref2.left;
|
|
50
42
|
return "\n padding: ".concat(getSpacingValue(top || vertical || space), " ").concat(getSpacingValue(right || horizontal || space), "\n ").concat(getSpacingValue(bottom || vertical || space), " ").concat(getSpacingValue(left || horizontal || space), ";\n");
|
|
51
43
|
});
|
package/inset/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
|
|
3
|
+
type Props = {
|
|
4
4
|
/**
|
|
5
5
|
* Applies the spacing scale to all sides.
|
|
6
6
|
*/
|
|
@@ -4,7 +4,7 @@ declare const DxcApplicationLayout: {
|
|
|
4
4
|
({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
|
|
5
5
|
Header: {
|
|
6
6
|
({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: import("../header/types").default): JSX.Element;
|
|
7
|
-
Dropdown: (props: import("../dropdown/types").default) => JSX.Element;
|
|
7
|
+
Dropdown: (props: import("../dropdown/types").default) => React.JSX.Element;
|
|
8
8
|
};
|
|
9
9
|
Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
|
|
10
10
|
Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
|