@dxc-technology/halstack-react 0.0.0-fed0950 → 0.0.0-ff31c60

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.
Files changed (185) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6648 -0
  3. package/dist/index.d.ts +6648 -0
  4. package/dist/index.js +18393 -0
  5. package/dist/index.mjs +18115 -0
  6. package/package.json +78 -57
  7. package/babel.config.js +0 -4
  8. package/dist/ThemeContext.js +0 -15
  9. package/dist/accordion/Accordion.js +0 -264
  10. package/dist/accordion/Accordion.stories.js +0 -207
  11. package/dist/accordion/readme.md +0 -96
  12. package/dist/alert/Alert.js +0 -302
  13. package/dist/alert/Alert.stories.js +0 -158
  14. package/dist/alert/close.svg +0 -4
  15. package/dist/alert/error.svg +0 -4
  16. package/dist/alert/info.svg +0 -4
  17. package/dist/alert/readme.md +0 -43
  18. package/dist/alert/success.svg +0 -4
  19. package/dist/alert/warning.svg +0 -4
  20. package/dist/box/Box.js +0 -136
  21. package/dist/button/Button.js +0 -187
  22. package/dist/button/Button.stories.js +0 -224
  23. package/dist/button/readme.md +0 -93
  24. package/dist/card/Card.js +0 -246
  25. package/dist/checkbox/Checkbox.js +0 -221
  26. package/dist/checkbox/Checkbox.stories.js +0 -144
  27. package/dist/checkbox/readme.md +0 -116
  28. package/dist/chip/Chip.js +0 -170
  29. package/dist/common/OpenSans.css +0 -81
  30. package/dist/common/RequiredComponent.js +0 -50
  31. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  35. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  41. package/dist/common/services/example-service.js +0 -10
  42. package/dist/common/services/example-service.test.js +0 -12
  43. package/dist/common/utils.js +0 -22
  44. package/dist/common/variables.js +0 -77
  45. package/dist/date/Date.js +0 -342
  46. package/dist/date/Date.stories.js +0 -205
  47. package/dist/date/calendar.svg +0 -1
  48. package/dist/date/calendar_dark.svg +0 -1
  49. package/dist/date/readme.md +0 -73
  50. package/dist/dialog/Dialog.js +0 -164
  51. package/dist/dialog/Dialog.stories.js +0 -217
  52. package/dist/dialog/readme.md +0 -32
  53. package/dist/dropdown/Dropdown.js +0 -412
  54. package/dist/dropdown/Dropdown.stories.js +0 -249
  55. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  56. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  57. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  58. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  59. package/dist/dropdown/readme.md +0 -69
  60. package/dist/footer/Footer.js +0 -341
  61. package/dist/footer/Footer.stories.js +0 -94
  62. package/dist/footer/dxc_logo_wht.png +0 -0
  63. package/dist/footer/readme.md +0 -41
  64. package/dist/header/Header.js +0 -343
  65. package/dist/header/Header.stories.js +0 -176
  66. package/dist/header/close_icon.svg +0 -1
  67. package/dist/header/dxc_logo_black.png +0 -0
  68. package/dist/header/dxc_logo_white.png +0 -0
  69. package/dist/header/hamb_menu_black.svg +0 -1
  70. package/dist/header/hamb_menu_white.svg +0 -1
  71. package/dist/header/readme.md +0 -33
  72. package/dist/heading/Heading.js +0 -159
  73. package/dist/input-text/InputText.js +0 -510
  74. package/dist/input-text/InputText.stories.js +0 -209
  75. package/dist/input-text/error.svg +0 -1
  76. package/dist/input-text/readme.md +0 -91
  77. package/dist/link/Link.js +0 -129
  78. package/dist/link/readme.md +0 -51
  79. package/dist/main.js +0 -263
  80. package/dist/paginator/Paginator.js +0 -178
  81. package/dist/paginator/images/next.svg +0 -3
  82. package/dist/paginator/images/nextPage.svg +0 -3
  83. package/dist/paginator/images/previous.svg +0 -3
  84. package/dist/paginator/images/previousPage.svg +0 -3
  85. package/dist/paginator/readme.md +0 -50
  86. package/dist/progress-bar/ProgressBar.js +0 -189
  87. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  88. package/dist/progress-bar/readme.md +0 -63
  89. package/dist/radio/Radio.js +0 -204
  90. package/dist/radio/Radio.stories.js +0 -166
  91. package/dist/radio/readme.md +0 -70
  92. package/dist/resultsetTable/ResultsetTable.js +0 -334
  93. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  94. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  95. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  96. package/dist/select/Select.js +0 -425
  97. package/dist/select/Select.stories.js +0 -235
  98. package/dist/select/readme.md +0 -72
  99. package/dist/sidenav/Sidenav.js +0 -217
  100. package/dist/sidenav/arrow_icon.svg +0 -3
  101. package/dist/slider/Slider.js +0 -268
  102. package/dist/slider/Slider.stories.js +0 -241
  103. package/dist/slider/readme.md +0 -64
  104. package/dist/spinner/Spinner.js +0 -196
  105. package/dist/spinner/Spinner.stories.js +0 -183
  106. package/dist/spinner/readme.md +0 -65
  107. package/dist/switch/Switch.js +0 -219
  108. package/dist/switch/Switch.stories.js +0 -134
  109. package/dist/switch/readme.md +0 -133
  110. package/dist/table/Table.js +0 -84
  111. package/dist/tabs/Tabs.js +0 -183
  112. package/dist/tabs/Tabs.stories.js +0 -130
  113. package/dist/tabs/readme.md +0 -78
  114. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  115. package/dist/tabs-for-sections/readme.md +0 -78
  116. package/dist/tag/Tag.js +0 -217
  117. package/dist/textarea/Textarea.js +0 -226
  118. package/dist/toggle/Toggle.js +0 -223
  119. package/dist/toggle/Toggle.stories.js +0 -297
  120. package/dist/toggle/readme.md +0 -80
  121. package/dist/upload/Upload.js +0 -200
  122. package/dist/upload/Upload.stories.js +0 -72
  123. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  124. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  125. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  126. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -282
  127. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  128. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  129. package/dist/upload/file-upload/FileToUpload.js +0 -158
  130. package/dist/upload/file-upload/audio-icon.svg +0 -4
  131. package/dist/upload/file-upload/close.svg +0 -4
  132. package/dist/upload/file-upload/file-icon.svg +0 -4
  133. package/dist/upload/file-upload/video-icon.svg +0 -4
  134. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/Transaction.js +0 -155
  137. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  138. package/dist/upload/transaction/audio-icon.svg +0 -4
  139. package/dist/upload/transaction/error-icon.svg +0 -4
  140. package/dist/upload/transaction/file-icon-err.svg +0 -4
  141. package/dist/upload/transaction/file-icon.svg +0 -4
  142. package/dist/upload/transaction/image-icon-err.svg +0 -4
  143. package/dist/upload/transaction/image-icon.svg +0 -4
  144. package/dist/upload/transaction/success-icon.svg +0 -4
  145. package/dist/upload/transaction/video-icon-err.svg +0 -4
  146. package/dist/upload/transaction/video-icon.svg +0 -4
  147. package/dist/upload/transactions/Transactions.js +0 -120
  148. package/dist/wizard/Wizard.js +0 -310
  149. package/dist/wizard/invalid_icon.svg +0 -6
  150. package/dist/wizard/valid_icon.svg +0 -6
  151. package/dist/wizard/validation-wrong.svg +0 -6
  152. package/test/Accordion.test.js +0 -33
  153. package/test/Alert.test.js +0 -53
  154. package/test/Box.test.js +0 -10
  155. package/test/Button.test.js +0 -18
  156. package/test/Card.test.js +0 -30
  157. package/test/Checkbox.test.js +0 -45
  158. package/test/Chip.test.js +0 -25
  159. package/test/Date.test.js +0 -393
  160. package/test/Dialog.test.js +0 -23
  161. package/test/Dropdown.test.js +0 -130
  162. package/test/Footer.test.js +0 -99
  163. package/test/Header.test.js +0 -39
  164. package/test/Heading.test.js +0 -35
  165. package/test/InputText.test.js +0 -236
  166. package/test/Link.test.js +0 -25
  167. package/test/Paginator.test.js +0 -165
  168. package/test/ProgressBar.test.js +0 -35
  169. package/test/Radio.test.js +0 -37
  170. package/test/ResultsetTable.test.js +0 -282
  171. package/test/Select.test.js +0 -191
  172. package/test/Sidenav.test.js +0 -87
  173. package/test/Slider.test.js +0 -65
  174. package/test/Spinner.test.js +0 -27
  175. package/test/Switch.test.js +0 -45
  176. package/test/Table.test.js +0 -36
  177. package/test/Tabs.test.js +0 -88
  178. package/test/TabsForSections.test.js +0 -34
  179. package/test/Tag.test.js +0 -32
  180. package/test/TextArea.test.js +0 -52
  181. package/test/Toggle.test.js +0 -43
  182. package/test/Upload.test.js +0 -60
  183. package/test/Wizard.test.js +0 -130
  184. package/test/mocks/pngMock.js +0 -1
  185. package/test/mocks/svgMock.js +0 -1
package/dist/box/Box.js DELETED
@@ -1,136 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _propTypes = _interopRequireDefault(require("prop-types"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _utils = require("../common/utils.js");
25
-
26
- require("../common/OpenSans.css");
27
-
28
- function _templateObject() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n border-radius: 4px;\n overflow: hidden;\n font-family: \"Open Sans\", sans-serif;\n width: ", ";\n\n box-shadow: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"]);
30
-
31
- _templateObject = function _templateObject() {
32
- return data;
33
- };
34
-
35
- return data;
36
- }
37
-
38
- var DxcBox = function DxcBox(_ref) {
39
- var shadowDepth = _ref.shadowDepth,
40
- margin = _ref.margin,
41
- padding = _ref.padding,
42
- _ref$display = _ref.display,
43
- display = _ref$display === void 0 ? "inline-flex" : _ref$display,
44
- children = _ref.children,
45
- _ref$size = _ref.size,
46
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
47
- return _react["default"].createElement(StyledDxcBox, {
48
- shadowDepth: shadowDepth,
49
- display: display,
50
- margin: margin,
51
- padding: padding,
52
- size: size
53
- }, children);
54
- };
55
-
56
- var sizes = {
57
- small: "48px",
58
- medium: "240px",
59
- large: "480px",
60
- fillParent: "100%",
61
- fitContent: "unset"
62
- };
63
-
64
- var calculateWidth = function calculateWidth(margin, size, padding) {
65
- if (size === "fillParent") {
66
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), " -\n ").concat((0, _utils.getMargin)(padding, "left"), " - ").concat((0, _utils.getMargin)(padding, "right"), ")");
67
- }
68
-
69
- return sizes[size];
70
- };
71
-
72
- var StyledDxcBox = _styledComponents["default"].div(_templateObject(), function (_ref2) {
73
- var display = _ref2.display;
74
- return display;
75
- }, function (props) {
76
- return calculateWidth(props.margin, props.size, props.padding);
77
- }, function (_ref3) {
78
- var shadowDepth = _ref3.shadowDepth;
79
- return shadowDepth === 1 ? "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)" : shadowDepth === 2 ? "0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)" : "none";
80
- }, function (_ref4) {
81
- var margin = _ref4.margin;
82
- return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
83
- }, function (_ref5) {
84
- var margin = _ref5.margin;
85
- return margin && margin.top ? _variables.spaces[margin.top] : "";
86
- }, function (_ref6) {
87
- var margin = _ref6.margin;
88
- return margin && margin.right ? _variables.spaces[margin.right] : "";
89
- }, function (_ref7) {
90
- var margin = _ref7.margin;
91
- return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
92
- }, function (_ref8) {
93
- var margin = _ref8.margin;
94
- return margin && margin.left ? _variables.spaces[margin.left] : "";
95
- }, function (_ref9) {
96
- var padding = _ref9.padding;
97
- return padding && (0, _typeof2["default"])(padding) !== "object" ? _variables.spaces[padding] : "0px";
98
- }, function (_ref10) {
99
- var padding = _ref10.padding;
100
- return padding && padding.top ? _variables.spaces[padding.top] : "";
101
- }, function (_ref11) {
102
- var padding = _ref11.padding;
103
- return padding && padding.right ? _variables.spaces[padding.right] : "";
104
- }, function (_ref12) {
105
- var padding = _ref12.padding;
106
- return padding && padding.bottom ? _variables.spaces[padding.bottom] : "";
107
- }, function (_ref13) {
108
- var padding = _ref13.padding;
109
- return padding && padding.left ? _variables.spaces[padding.left] : "";
110
- });
111
-
112
- DxcBox.propTypes = {
113
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
114
- display: _propTypes["default"].string,
115
- shadowDepth: _propTypes["default"].oneOf([0, 1, 2]),
116
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
117
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
118
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
119
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
120
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
121
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
122
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
123
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
124
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
125
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
126
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
127
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
128
- };
129
- DxcBox.defaultProps = {
130
- shadowDepth: 2,
131
- display: "inline-flex",
132
- margin: null,
133
- padding: null
134
- };
135
- var _default = DxcBox;
136
- exports["default"] = _default;
@@ -1,187 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _core = require("@material-ui/core");
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- require("../common/OpenSans.css");
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
33
-
34
- function _templateObject3() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n width: ", ";\n cursor: ", ";\n\n .MuiButtonBase-root {\n .MuiButton-label {\n display: flex;\n flex-direction: ", ";\n align-items: center;\n }\n letter-spacing: 1px;\n box-shadow: none;\n font-size: 14px;\n font-weight: 500;\n padding: ", ";\n min-width: ", ";\n border-radius: 4px;\n width: 100%;\n min-height: 43px;\n\n line-height: 1;\n font-family: \"Open Sans\", sans-serif;\n ", "\n }\n"]);
36
-
37
- _templateObject3 = function _templateObject3() {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _templateObject2() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 20px;\n max-width: 20px;\n margin-left: ", ";\n margin-right: ", ";\n"]);
46
-
47
- _templateObject2 = function _templateObject2() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n line-height: 18px;\n font-size: 14px;\n text-overflow: ellipsis;\n overflow: hidden;\n"]);
56
-
57
- _templateObject = function _templateObject() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- var DxcButton = function DxcButton(_ref) {
65
- var _ref$label = _ref.label,
66
- label = _ref$label === void 0 ? "" : _ref$label,
67
- _ref$mode = _ref.mode,
68
- mode = _ref$mode === void 0 ? "basic" : _ref$mode,
69
- _ref$disabled = _ref.disabled,
70
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
71
- _ref$theme = _ref.theme,
72
- theme = _ref$theme === void 0 ? "light" : _ref$theme,
73
- _ref$disableRipple = _ref.disableRipple,
74
- disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
75
- _ref$iconPosition = _ref.iconPosition,
76
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
77
- _ref$iconSrc = _ref.iconSrc,
78
- iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
79
- _ref$onClick = _ref.onClick,
80
- _onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
81
- margin = _ref.margin,
82
- size = _ref.size;
83
-
84
- var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
85
-
86
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
87
- theme: colorsTheme
88
- }, _react["default"].createElement(DxCButton, {
89
- margin: margin,
90
- mode: mode,
91
- brightness: theme,
92
- disabled: disabled,
93
- iconPosition: iconPosition,
94
- size: size
95
- }, _react["default"].createElement(_core.Button, {
96
- disabled: disabled,
97
- disableRipple: disableRipple,
98
- onClick: function onClick() {
99
- if (_onClick) {
100
- _onClick();
101
- }
102
- }
103
- }, _react["default"].createElement(LabelContainer, null, label), iconSrc && _react["default"].createElement(ButtonIcon, {
104
- label: label,
105
- iconPosition: iconPosition,
106
- src: iconSrc
107
- }))));
108
- };
109
-
110
- var sizes = {
111
- small: "42px",
112
- medium: "120px",
113
- large: "240px",
114
- fillParent: "100%",
115
- fitContent: "unset"
116
- };
117
-
118
- var calculateWidth = function calculateWidth(margin, size) {
119
- if (size === "fillParent") {
120
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
121
- }
122
-
123
- return sizes[size];
124
- };
125
-
126
- var LabelContainer = _styledComponents["default"].span(_templateObject());
127
-
128
- var ButtonIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
129
- return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
130
- }, function (props) {
131
- return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
132
- });
133
-
134
- var DxCButton = _styledComponents["default"].div(_templateObject3(), function (props) {
135
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
136
- }, function (props) {
137
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
138
- }, function (props) {
139
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
140
- }, function (props) {
141
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
142
- }, function (props) {
143
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
144
- }, function (props) {
145
- return calculateWidth(props.margin, props.size);
146
- }, function (props) {
147
- return props.disabled && "not-allowed" || "pointer";
148
- }, function (props) {
149
- return props.iconPosition === "after" && "row" || "row-reverse";
150
- }, function (props) {
151
- return props.size === "small" && "11px" || "12px 30px";
152
- }, function (props) {
153
- return props.size === "small" && "calc(100% - 22px)" || "unset";
154
- }, function (props) {
155
- var mode = props.mode,
156
- brightness = props.brightness;
157
-
158
- if (mode === "basic") {
159
- return "\n background-color: ".concat(props.theme.yellow, ";\n color: ").concat(props.theme.black, ";\n &:hover{\n background-color: ").concat(brightness === "light" && props.theme.black || props.theme.lightBlack, ";\n color: ").concat(props.theme.yellow, "; \n }\n &:disabled{ \n background-color:").concat(props.theme.yellow, ";\n opacity:0.5;\n color: ").concat(props.theme.black, ";\n cursor:not-allowed;\n }\n .MuiButton-label {\n z-index: 5\n }\n .MuiTouchRipple-child {\n background-color: ").concat(props.theme.white, ";\n }\n ");
160
- } else if (mode === "outlined") {
161
- return "\n background-color: transparent;\n padding: 10px 28px;\n color: ".concat(brightness === "light" && props.theme.black || props.theme.white, ";\n border: 2px solid;\n border-color: ").concat(brightness === "light" && props.theme.black || props.theme.white, ";\n &:hover{\n border-color: ").concat(props.theme.yellow, ";\n background-color: transparent;\n }\n &:disabled{ \n background-color:").concat(brightness === "light" && "transparent" || props.theme.black, ";\n border-color:").concat(brightness === "light" && props.theme.lightGrey || props.theme.darkGrey, ";\n color:").concat(brightness === "light" && props.theme.lightGrey || props.theme.darkGrey, ";\n cursor:not-allowed;\n }\n .MuiButton-label {\n z-index: 5\n }\n .MuiTouchRipple-child{\n background-color:").concat(brightness === "light" && props.theme.darkGrey || props.theme.lightGrey, ";\n }\n .MuiTouchRipple-root {\n border-radius: 2px;\n }\n \n ");
162
- } else if (mode === "flat") {
163
- return "\n background-color: ".concat(brightness === "light" && "transparent" || props.theme.black, ";\n color: ").concat(brightness === "light" && props.theme.black || props.theme.white, ";\n &:hover{\n background-color: ").concat(props.theme.lightGrey, ";\n color: ").concat(props.theme.black, ";\n }\n &:disabled{ \n background-color:").concat(brightness === "light" && props.theme.lightGrey || props.theme.darkGrey, ";\n opacity:0.5;\n color:").concat(brightness === "light" && props.theme.black || props.theme.lightGrey, ";\n cursor:not-allowed;\n }\n .MuiButton-label {\n z-index: 5\n }\n .MuiTouchRipple-child{\n background-color:").concat(brightness === "light" && props.theme.darkGrey || props.theme.darkGrey, ";\n }\n ");
164
- } else {
165
- return "\n background-color: ".concat(props.theme.yellow, ";\n color: ").concat(props.theme.black, "\n box-shadow: 0px 1.5px 3px 0px rgba(0, 0, 0, 0.16);\n &:hover{\n background-color:").concat(brightness === "light" && props.theme.black || props.theme.lightBlack, ";\n color:").concat(props.theme.yellow, ";\n }\n &:disabled{ \n background-color:").concat(props.theme.yellow, ";\n opacity:0.5;\n box-shadow:none;\n color: ").concat(props.theme.darkGrey, ";\n cursor:not-allowed;\n }\n .MuiButton-label {\n z-index: 5\n }\n .MuiTouchRipple-child {\n background-color: ").concat(props.theme.white, ";\n }\n ");
166
- }
167
- });
168
-
169
- DxcButton.propTypes = {
170
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
171
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
172
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
173
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
174
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
175
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
176
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
177
- label: _propTypes["default"].string,
178
- mode: _propTypes["default"].oneOf(["basic", "outlined", "raised", "flat"]),
179
- disabled: _propTypes["default"].bool,
180
- theme: _propTypes["default"].oneOf(["dark", "light"]),
181
- disableRipple: _propTypes["default"].bool,
182
- iconPosition: _propTypes["default"].oneOf(["after", "before"]),
183
- onClick: _propTypes["default"].func,
184
- iconSrc: _propTypes["default"].string
185
- };
186
- var _default = DxcButton;
187
- exports["default"] = _default;
@@ -1,224 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Button = _interopRequireDefault(require("./Button"));
20
-
21
- var onClick = (0, _addonActions.action)("onClick");
22
-
23
- onClick.toString = function () {
24
- return "onClickHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Button", module).add("Types", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
29
- mode: "basic",
30
- theme: "light",
31
- label: "Basic Button",
32
- onClick: onClick
33
- }), _react["default"].createElement(_Button["default"], {
34
- mode: "raised",
35
- theme: "light",
36
- label: "Raised Button",
37
- onClick: onClick
38
- }), _react["default"].createElement(_Button["default"], {
39
- mode: "flat",
40
- theme: "light",
41
- label: "Flat Button",
42
- onClick: onClick
43
- }), _react["default"].createElement(_Button["default"], {
44
- mode: "outlined",
45
- theme: "light",
46
- label: "Outlined Button",
47
- onClick: onClick
48
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
49
- disabled: true,
50
- mode: "basic",
51
- theme: "light",
52
- label: "Basic Button",
53
- onClick: onClick
54
- }), _react["default"].createElement(_Button["default"], {
55
- disabled: true,
56
- mode: "raised",
57
- theme: "light",
58
- label: "Raised Button",
59
- onClick: onClick
60
- }), _react["default"].createElement(_Button["default"], {
61
- disabled: true,
62
- mode: "flat",
63
- theme: "light",
64
- label: "Flat Button",
65
- onClick: onClick
66
- }), _react["default"].createElement(_Button["default"], {
67
- disabled: true,
68
- mode: "outlined",
69
- theme: "light",
70
- label: "Outlined Button",
71
- onClick: onClick
72
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
73
- style: {
74
- background: "black"
75
- }
76
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
77
- mode: "basic",
78
- theme: "dark",
79
- label: "Basic Button",
80
- onClick: onClick
81
- }), _react["default"].createElement(_Button["default"], {
82
- mode: "raised",
83
- theme: "dark",
84
- label: "Raised Button",
85
- onClick: onClick
86
- }), _react["default"].createElement(_Button["default"], {
87
- mode: "flat",
88
- theme: "dark",
89
- label: "Flat Button",
90
- onClick: onClick
91
- }), _react["default"].createElement(_Button["default"], {
92
- mode: "outlined",
93
- theme: "dark",
94
- label: "Outlined Button",
95
- onClick: onClick
96
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
97
- disabled: true,
98
- mode: "basic",
99
- theme: "dark",
100
- label: "Basic Button",
101
- onClick: onClick
102
- }), _react["default"].createElement(_Button["default"], {
103
- disabled: true,
104
- mode: "raised",
105
- theme: "dark",
106
- label: "Raised Button",
107
- onClick: onClick
108
- }), _react["default"].createElement(_Button["default"], {
109
- disabled: true,
110
- mode: "flat",
111
- theme: "dark",
112
- label: "Flat Button",
113
- onClick: onClick
114
- }), _react["default"].createElement(_Button["default"], {
115
- disabled: true,
116
- mode: "outlined",
117
- theme: "dark",
118
- label: "Outlined Button",
119
- onClick: onClick
120
- }))), _react["default"].createElement("h3", null, "With icon"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
121
- mode: "basic",
122
- theme: "light",
123
- label: "Basic Button",
124
- onClick: onClick,
125
- iconPosition: "after",
126
- iconSrc: _run_icon_black["default"]
127
- }), _react["default"].createElement(_Button["default"], {
128
- mode: "raised",
129
- theme: "light",
130
- label: "Raised Button",
131
- onClick: onClick,
132
- iconPosition: "after",
133
- iconSrc: _run_icon_black["default"]
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "Flat Button",
138
- onClick: onClick,
139
- iconSrc: _run_icon_black["default"]
140
- }), _react["default"].createElement(_Button["default"], {
141
- mode: "outlined",
142
- theme: "light",
143
- label: "Outlined Button",
144
- onClick: onClick,
145
- iconPosition: "after",
146
- iconSrc: _run_icon_black["default"]
147
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
148
- disabled: true,
149
- mode: "basic",
150
- theme: "light",
151
- label: "Basic Button",
152
- onClick: onClick,
153
- iconPosition: "after",
154
- iconSrc: _run_icon_black["default"]
155
- }), _react["default"].createElement(_Button["default"], {
156
- disabled: true,
157
- mode: "raised",
158
- theme: "light",
159
- label: "Raised Button",
160
- onClick: onClick,
161
- iconPosition: "after",
162
- iconSrc: _run_icon_black["default"]
163
- }), _react["default"].createElement(_Button["default"], {
164
- disabled: true,
165
- mode: "flat",
166
- theme: "light",
167
- label: "Flat Button",
168
- onClick: onClick,
169
- iconPosition: "after",
170
- iconSrc: _run_icon_black["default"]
171
- }), _react["default"].createElement(_Button["default"], {
172
- disabled: true,
173
- mode: "outlined",
174
- theme: "light",
175
- label: "Outlined Button",
176
- onClick: onClick,
177
- iconPosition: "after",
178
- iconSrc: _run_icon_black["default"]
179
- })));
180
- }, {
181
- notes: {
182
- markdown: _readme["default"]
183
- }
184
- });
185
-
186
- var knobProps = function knobProps() {
187
- return {
188
- label: (0, _addonKnobs.text)("label", "Test Button"),
189
- mode: (0, _addonKnobs.select)("mode", {
190
- basic: "basic",
191
- raised: "raised",
192
- flat: "flat",
193
- outlined: "outlined"
194
- }, "basic"),
195
- theme: (0, _addonKnobs.select)("theme", {
196
- light: "light",
197
- dark: "dark"
198
- }, "light"),
199
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
200
- iconPosition: (0, _addonKnobs.select)("icon position", {
201
- before: "before",
202
- after: "after"
203
- }, "before"),
204
- icon: (0, _addonKnobs["boolean"])("With Icon", true)
205
- };
206
- };
207
-
208
- (0, _react2.storiesOf)("Form Components|Button", module).add("Knobs example", function () {
209
- var props = knobProps();
210
- return _react["default"].createElement("div", {
211
- style: {
212
- background: props.theme === "dark" && "black" || "transparent"
213
- }
214
- }, props.icon && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
215
- onClick: onClick,
216
- iconSrc: _run_icon_black["default"]
217
- })) || _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
218
- onClick: onClick
219
- })));
220
- }, {
221
- notes: {
222
- markdown: _readme["default"]
223
- }
224
- });
@@ -1,93 +0,0 @@
1
- # DXC Button Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcButton } from "@dxc-technology/halstack-react";
7
-
8
- <DxcButton onClick={handleClick} label="Test Button" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>mode: 'basic' | 'outlined' | 'raised' | 'flat'</td>
21
- <td><code>'basic'</code></td>
22
- <td>Uses on of the available button modes.</td>
23
- </tr>
24
- <tr>
25
- <td>theme: 'light' |'dark'</td>
26
- <td><code>'light'</code></td>
27
- <td>Uses one of the available button modes.</td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td><code>'basic'</code></td>
32
- <td>Text to be placed next to the button.</td>
33
- </tr>
34
- <tr>
35
- <td>iconSrc: string</td>
36
- <td></td>
37
- <td>URL of the icon that will be placed next to the button label.</td>
38
- </tr>
39
- <tr>
40
- <td>iconPosition: 'before' | 'after'</td>
41
- <td><code>'before'</code></td>
42
- <td>Whether the icon should appear after or before the label.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>disableRipple: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the ripple effect will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>onClick: function</td>
56
- <td></td>
57
- <td>This function will be called when the user clicks the button. The event object will be passed as a parameter.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic button - Light theme - Enabled - Icon after label - With ripple
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcButton } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnClick = event => {
73
- console.log("Button clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <DxcButton
79
- label="Basic"
80
- mode="basic"
81
- disabled={false}
82
- theme="light"
83
- disableRipple={false}
84
- iconPosition="after"
85
- iconSrc="/images/run_icon.png"
86
- onClick={handleOnClick}
87
- />
88
- </div>
89
- );
90
- }
91
-
92
- export default App;
93
- ```