@dxc-technology/halstack-react 0.0.0-d4fec82 → 0.0.0-d618bea
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 +10 -0
- package/BackgroundColorContext.js +1 -3
- package/ThemeContext.d.ts +15 -0
- package/ThemeContext.js +5 -8
- package/V3Select/V3Select.js +2 -2
- package/V3Textarea/V3Textarea.js +2 -2
- package/accordion/Accordion.js +2 -2
- package/accordion-group/AccordionGroup.js +2 -2
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/alert/Alert.js +2 -2
- package/alert/Alert.stories.tsx +170 -0
- package/alert/types.d.ts +1 -1
- package/badge/Badge.js +1 -1
- package/box/Box.d.ts +4 -0
- package/box/Box.js +6 -32
- package/box/{Box.stories.jsx → Box.stories.tsx} +0 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +9 -12
- package/button/Button.stories.tsx +217 -234
- package/button/types.d.ts +11 -11
- package/card/Card.js +5 -6
- package/card/Card.stories.tsx +201 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +4 -6
- package/checkbox/Checkbox.js +2 -2
- package/checkbox/Checkbox.stories.tsx +192 -0
- package/checkbox/types.d.ts +1 -1
- package/chip/Chip.d.ts +4 -0
- package/chip/Chip.js +1 -23
- package/chip/Chip.stories.tsx +121 -0
- package/chip/types.d.ts +53 -0
- package/chip/types.js +5 -0
- package/common/variables.js +44 -37
- package/date/Date.js +1 -1
- package/date-input/DateInput.js +4 -7
- package/date-input/DateInput.stories.tsx +138 -0
- package/dialog/Dialog.d.ts +4 -0
- package/dialog/Dialog.js +6 -25
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.js +1 -1
- package/dropdown/types.d.ts +1 -1
- package/file-input/FileInput.d.ts +4 -0
- package/file-input/FileInput.js +65 -76
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +12 -21
- package/file-input/types.d.ts +112 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +8 -8
- package/footer/Footer.stories.tsx +151 -0
- package/footer/types.d.ts +22 -18
- package/header/Header.d.ts +7 -0
- package/header/Header.js +28 -30
- package/header/Header.stories.tsx +162 -0
- package/header/Icons.js +2 -27
- package/header/types.d.ts +47 -0
- package/header/types.js +5 -0
- package/heading/Heading.d.ts +4 -0
- package/heading/Heading.js +7 -24
- package/heading/Heading.stories.tsx +53 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/input-text/InputText.js +2 -2
- package/layout/ApplicationLayout.d.ts +10 -0
- package/layout/ApplicationLayout.js +8 -18
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/link/Link.js +4 -26
- package/link/Link.stories.tsx +146 -0
- package/link/types.d.ts +74 -0
- package/link/types.js +5 -0
- package/list/List.d.ts +7 -0
- package/list/List.js +37 -0
- package/list/List.stories.tsx +70 -0
- package/main.d.ts +7 -3
- package/main.js +34 -2
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +5 -50
- package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/number-input/NumberInputContext.js +5 -2
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +1 -1
- package/paginator/Paginator.js +2 -8
- package/paginator/Paginator.stories.tsx +63 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/password-input/PasswordInput.js +19 -55
- package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +1 -1
- package/password-input/types.d.ts +107 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.js +3 -3
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/radio/Radio.js +2 -2
- package/radio/Radio.stories.tsx +192 -0
- package/radio/types.d.ts +2 -2
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/resultsetTable/ResultsetTable.js +4 -27
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/row/Row.d.ts +11 -0
- package/row/Row.js +124 -0
- package/row/Row.stories.tsx +223 -0
- package/select/Select.js +15 -17
- package/select/Select.stories.tsx +572 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +6 -15
- package/sidenav/Sidenav.stories.tsx +165 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +1 -1
- package/slider/Slider.js +43 -32
- package/slider/Slider.stories.tsx +177 -0
- package/slider/types.d.ts +2 -7
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +8 -25
- package/spinner/Spinner.stories.jsx +102 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/stack/Stack.d.ts +10 -0
- package/stack/Stack.js +94 -0
- package/stack/Stack.stories.tsx +150 -0
- package/switch/Switch.js +4 -4
- package/switch/Switch.stories.tsx +160 -0
- package/table/Table.d.ts +4 -0
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +276 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.js +4 -2
- package/tabs/Tabs.stories.tsx +121 -0
- package/tabs/types.d.ts +3 -4
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +21 -36
- package/tag/Tag.stories.tsx +145 -0
- package/tag/types.d.ts +60 -0
- package/tag/types.js +5 -0
- package/text/Text.d.ts +7 -0
- package/text/Text.js +30 -0
- package/text/Text.stories.tsx +19 -0
- package/text-input/TextInput.d.ts +4 -0
- package/text-input/TextInput.js +42 -81
- package/text-input/TextInput.stories.tsx +456 -0
- package/text-input/types.d.ts +159 -0
- package/text-input/types.js +5 -0
- package/textarea/Textarea.js +29 -32
- package/textarea/index.d.ts +18 -8
- package/toggle/Toggle.js +1 -1
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/toggle-group/ToggleGroup.js +8 -34
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/toggle-group/types.d.ts +84 -0
- package/toggle-group/types.js +5 -0
- package/upload/buttons-upload/ButtonsUpload.js +2 -2
- package/upload/dragAndDropArea/DragAndDropArea.js +2 -2
- package/upload/file-upload/FileToUpload.js +1 -1
- package/upload/files-upload/FilesToUpload.js +1 -1
- package/upload/transaction/Transaction.js +2 -2
- package/upload/transactions/Transactions.js +1 -1
- package/useTheme.d.ts +2 -0
- package/useTheme.js +1 -1
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +13 -53
- package/wizard/Wizard.stories.jsx +224 -0
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/box/index.d.ts +0 -25
- package/chip/index.d.ts +0 -22
- package/dialog/index.d.ts +0 -18
- package/file-input/index.d.ts +0 -81
- package/header/index.d.ts +0 -25
- package/heading/index.d.ts +0 -17
- package/link/index.d.ts +0 -23
- package/number-input/index.d.ts +0 -113
- package/password-input/index.d.ts +0 -94
- package/resultsetTable/index.d.ts +0 -19
- package/sidenav/index.d.ts +0 -13
- package/spinner/index.d.ts +0 -17
- package/table/index.d.ts +0 -13
- package/tag/index.d.ts +0 -24
- package/text-input/index.d.ts +0 -135
- package/toggle-group/index.d.ts +0 -21
- package/wizard/index.d.ts +0 -18
package/box/Box.js
CHANGED
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
12
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
13
|
|
|
16
14
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
@@ -19,15 +17,13 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
19
17
|
|
|
20
18
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
19
|
|
|
22
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
-
|
|
24
20
|
var _variables = require("../common/variables.js");
|
|
25
21
|
|
|
26
22
|
var _utils = require("../common/utils.js");
|
|
27
23
|
|
|
28
|
-
var _useTheme = _interopRequireDefault(require("../useTheme
|
|
24
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
29
25
|
|
|
30
|
-
var _BackgroundColorContext = require("../BackgroundColorContext
|
|
26
|
+
var _BackgroundColorContext = require("../BackgroundColorContext");
|
|
31
27
|
|
|
32
28
|
var _templateObject;
|
|
33
29
|
|
|
@@ -36,12 +32,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
36
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; }
|
|
37
33
|
|
|
38
34
|
var DxcBox = function DxcBox(_ref) {
|
|
39
|
-
var shadowDepth = _ref.shadowDepth,
|
|
40
|
-
|
|
41
|
-
padding = _ref.padding,
|
|
35
|
+
var _ref$shadowDepth = _ref.shadowDepth,
|
|
36
|
+
shadowDepth = _ref$shadowDepth === void 0 ? 2 : _ref$shadowDepth,
|
|
42
37
|
_ref$display = _ref.display,
|
|
43
38
|
display = _ref$display === void 0 ? "inline-flex" : _ref$display,
|
|
44
39
|
children = _ref.children,
|
|
40
|
+
margin = _ref.margin,
|
|
41
|
+
padding = _ref.padding,
|
|
45
42
|
_ref$size = _ref.size,
|
|
46
43
|
size = _ref$size === void 0 ? "fitContent" : _ref$size;
|
|
47
44
|
var colorsTheme = (0, _useTheme["default"])();
|
|
@@ -125,28 +122,5 @@ var StyledDxcBox = _styledComponents["default"].div(_templateObject || (_templat
|
|
|
125
122
|
return padding && padding.left ? _variables.spaces[padding.left] : "";
|
|
126
123
|
});
|
|
127
124
|
|
|
128
|
-
DxcBox.propTypes = {
|
|
129
|
-
size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
|
|
130
|
-
display: _propTypes["default"].string,
|
|
131
|
-
shadowDepth: _propTypes["default"].oneOf([0, 1, 2]),
|
|
132
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
133
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
134
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
135
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
136
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
137
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
138
|
-
padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
139
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
140
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
141
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
142
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
143
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
144
|
-
};
|
|
145
|
-
DxcBox.defaultProps = {
|
|
146
|
-
shadowDepth: 2,
|
|
147
|
-
display: "inline-flex",
|
|
148
|
-
margin: null,
|
|
149
|
-
padding: null
|
|
150
|
-
};
|
|
151
125
|
var _default = DxcBox;
|
|
152
126
|
exports["default"] = _default;
|
|
File without changes
|
package/box/types.d.ts
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
declare type Margin = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
declare type Padding = {
|
|
10
|
+
top?: Space;
|
|
11
|
+
bottom?: Space;
|
|
12
|
+
left?: Space;
|
|
13
|
+
right?: Space;
|
|
14
|
+
};
|
|
15
|
+
declare type Props = {
|
|
16
|
+
/**
|
|
17
|
+
* The size of the shadow to be displayed around the box.
|
|
18
|
+
*/
|
|
19
|
+
shadowDepth?: 0 | 1 | 2;
|
|
20
|
+
/**
|
|
21
|
+
* Changes the display CSS property of the box div.
|
|
22
|
+
*/
|
|
23
|
+
display?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Custom content that will be placed in the box component.
|
|
26
|
+
*/
|
|
27
|
+
children: React.ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
30
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
31
|
+
*/
|
|
32
|
+
margin?: Space | Margin;
|
|
33
|
+
/**
|
|
34
|
+
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
35
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
|
|
36
|
+
*/
|
|
37
|
+
padding?: Space | Padding;
|
|
38
|
+
/**
|
|
39
|
+
* Size of the component.
|
|
40
|
+
*/
|
|
41
|
+
size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
42
|
+
};
|
|
43
|
+
export default Props;
|
package/box/types.js
ADDED
package/button/Button.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import ButtonPropsType from "./types";
|
|
3
|
-
declare const DxcButton: ({ label, mode, disabled, iconPosition, type,
|
|
3
|
+
declare const DxcButton: ({ label, mode, disabled, iconPosition, type, icon, iconSrc, onClick, margin, size, tabIndex, }: ButtonPropsType) => JSX.Element;
|
|
4
4
|
export default DxcButton;
|
package/button/Button.js
CHANGED
|
@@ -23,9 +23,9 @@ var _variables = require("../common/variables.js");
|
|
|
23
23
|
|
|
24
24
|
var _utils = require("../common/utils.js");
|
|
25
25
|
|
|
26
|
-
var _useTheme = _interopRequireDefault(require("../useTheme
|
|
26
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
27
27
|
|
|
28
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext
|
|
28
|
+
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
29
29
|
|
|
30
30
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
31
31
|
|
|
@@ -44,16 +44,15 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
44
44
|
iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
|
|
45
45
|
_ref$type = _ref.type,
|
|
46
46
|
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
47
|
+
icon = _ref.icon,
|
|
47
48
|
_ref$iconSrc = _ref.iconSrc,
|
|
48
49
|
iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
|
|
49
|
-
|
|
50
|
-
_ref$onClick = _ref.onClick,
|
|
51
|
-
_onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
|
|
50
|
+
_onClick = _ref.onClick,
|
|
52
51
|
margin = _ref.margin,
|
|
53
|
-
size = _ref.size,
|
|
52
|
+
_ref$size = _ref.size,
|
|
53
|
+
size = _ref$size === void 0 ? "fitContent" : _ref$size,
|
|
54
54
|
_ref$tabIndex = _ref.tabIndex,
|
|
55
55
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
56
|
-
|
|
57
56
|
var colorsTheme = (0, _useTheme["default"])();
|
|
58
57
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
59
58
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
@@ -68,15 +67,13 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
68
67
|
backgroundType: backgroundType,
|
|
69
68
|
icon: icon
|
|
70
69
|
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
71
|
-
disabled: disabled,
|
|
72
70
|
type: type,
|
|
71
|
+
disabled: disabled,
|
|
73
72
|
disableRipple: true,
|
|
74
|
-
"aria-disabled": disabled
|
|
73
|
+
"aria-disabled": disabled,
|
|
75
74
|
tabIndex: disabled ? -1 : tabIndex,
|
|
76
75
|
onClick: function onClick() {
|
|
77
|
-
|
|
78
|
-
_onClick();
|
|
79
|
-
}
|
|
76
|
+
_onClick();
|
|
80
77
|
}
|
|
81
78
|
}, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
|
|
82
79
|
icon: icon,
|