@dxc-technology/halstack-react 0.0.0-a45812e → 0.0.0-a4aa1a8

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 (183) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6500 -0
  3. package/dist/index.d.ts +6500 -0
  4. package/dist/index.js +13497 -0
  5. package/dist/index.mjs +13440 -0
  6. package/package.json +76 -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/common/OpenSans.css +0 -81
  29. package/dist/common/RequiredComponent.js +0 -50
  30. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  35. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  40. package/dist/common/services/example-service.js +0 -10
  41. package/dist/common/services/example-service.test.js +0 -12
  42. package/dist/common/utils.js +0 -22
  43. package/dist/common/variables.js +0 -77
  44. package/dist/date/Date.js +0 -345
  45. package/dist/date/Date.stories.js +0 -205
  46. package/dist/date/calendar.svg +0 -1
  47. package/dist/date/calendar_dark.svg +0 -1
  48. package/dist/date/readme.md +0 -73
  49. package/dist/dialog/Dialog.js +0 -164
  50. package/dist/dialog/Dialog.stories.js +0 -217
  51. package/dist/dialog/readme.md +0 -32
  52. package/dist/dropdown/Dropdown.js +0 -412
  53. package/dist/dropdown/Dropdown.stories.js +0 -249
  54. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  55. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  56. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  57. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  58. package/dist/dropdown/readme.md +0 -69
  59. package/dist/footer/Footer.js +0 -341
  60. package/dist/footer/Footer.stories.js +0 -94
  61. package/dist/footer/dxc_logo_wht.png +0 -0
  62. package/dist/footer/readme.md +0 -41
  63. package/dist/header/Header.js +0 -343
  64. package/dist/header/Header.stories.js +0 -176
  65. package/dist/header/close_icon.svg +0 -1
  66. package/dist/header/dxc_logo_black.png +0 -0
  67. package/dist/header/dxc_logo_white.png +0 -0
  68. package/dist/header/hamb_menu_black.svg +0 -1
  69. package/dist/header/hamb_menu_white.svg +0 -1
  70. package/dist/header/readme.md +0 -33
  71. package/dist/heading/Heading.js +0 -159
  72. package/dist/input-text/InputText.js +0 -510
  73. package/dist/input-text/InputText.stories.js +0 -209
  74. package/dist/input-text/error.svg +0 -1
  75. package/dist/input-text/readme.md +0 -91
  76. package/dist/link/Link.js +0 -129
  77. package/dist/link/readme.md +0 -51
  78. package/dist/main.js +0 -263
  79. package/dist/paginator/Paginator.js +0 -178
  80. package/dist/paginator/images/next.svg +0 -3
  81. package/dist/paginator/images/nextPage.svg +0 -3
  82. package/dist/paginator/images/previous.svg +0 -3
  83. package/dist/paginator/images/previousPage.svg +0 -3
  84. package/dist/paginator/readme.md +0 -50
  85. package/dist/progress-bar/ProgressBar.js +0 -189
  86. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  87. package/dist/progress-bar/readme.md +0 -63
  88. package/dist/radio/Radio.js +0 -204
  89. package/dist/radio/Radio.stories.js +0 -166
  90. package/dist/radio/readme.md +0 -70
  91. package/dist/resultsetTable/ResultsetTable.js +0 -334
  92. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  93. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  94. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  95. package/dist/select/Select.js +0 -425
  96. package/dist/select/Select.stories.js +0 -235
  97. package/dist/select/readme.md +0 -72
  98. package/dist/sidenav/Sidenav.js +0 -217
  99. package/dist/sidenav/arrow_icon.svg +0 -3
  100. package/dist/slider/Slider.js +0 -268
  101. package/dist/slider/Slider.stories.js +0 -241
  102. package/dist/slider/readme.md +0 -64
  103. package/dist/spinner/Spinner.js +0 -196
  104. package/dist/spinner/Spinner.stories.js +0 -183
  105. package/dist/spinner/readme.md +0 -65
  106. package/dist/switch/Switch.js +0 -219
  107. package/dist/switch/Switch.stories.js +0 -134
  108. package/dist/switch/readme.md +0 -133
  109. package/dist/table/Table.js +0 -84
  110. package/dist/tabs/Tabs.js +0 -183
  111. package/dist/tabs/Tabs.stories.js +0 -130
  112. package/dist/tabs/readme.md +0 -78
  113. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  114. package/dist/tabs-for-sections/readme.md +0 -78
  115. package/dist/tag/Tag.js +0 -217
  116. package/dist/textarea/Textarea.js +0 -226
  117. package/dist/toggle/Toggle.js +0 -223
  118. package/dist/toggle/Toggle.stories.js +0 -297
  119. package/dist/toggle/readme.md +0 -80
  120. package/dist/upload/Upload.js +0 -200
  121. package/dist/upload/Upload.stories.js +0 -72
  122. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  123. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  124. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  125. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -282
  126. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  127. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  128. package/dist/upload/file-upload/FileToUpload.js +0 -158
  129. package/dist/upload/file-upload/audio-icon.svg +0 -4
  130. package/dist/upload/file-upload/close.svg +0 -4
  131. package/dist/upload/file-upload/file-icon.svg +0 -4
  132. package/dist/upload/file-upload/video-icon.svg +0 -4
  133. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  134. package/dist/upload/readme.md +0 -37
  135. package/dist/upload/transaction/Transaction.js +0 -155
  136. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  137. package/dist/upload/transaction/audio-icon.svg +0 -4
  138. package/dist/upload/transaction/error-icon.svg +0 -4
  139. package/dist/upload/transaction/file-icon-err.svg +0 -4
  140. package/dist/upload/transaction/file-icon.svg +0 -4
  141. package/dist/upload/transaction/image-icon-err.svg +0 -4
  142. package/dist/upload/transaction/image-icon.svg +0 -4
  143. package/dist/upload/transaction/success-icon.svg +0 -4
  144. package/dist/upload/transaction/video-icon-err.svg +0 -4
  145. package/dist/upload/transaction/video-icon.svg +0 -4
  146. package/dist/upload/transactions/Transactions.js +0 -120
  147. package/dist/wizard/Wizard.js +0 -310
  148. package/dist/wizard/invalid_icon.svg +0 -6
  149. package/dist/wizard/valid_icon.svg +0 -6
  150. package/dist/wizard/validation-wrong.svg +0 -6
  151. package/test/Accordion.test.js +0 -33
  152. package/test/Alert.test.js +0 -53
  153. package/test/Box.test.js +0 -10
  154. package/test/Button.test.js +0 -18
  155. package/test/Card.test.js +0 -30
  156. package/test/Checkbox.test.js +0 -45
  157. package/test/Date.test.js +0 -393
  158. package/test/Dialog.test.js +0 -23
  159. package/test/Dropdown.test.js +0 -130
  160. package/test/Footer.test.js +0 -99
  161. package/test/Header.test.js +0 -39
  162. package/test/Heading.test.js +0 -35
  163. package/test/InputText.test.js +0 -236
  164. package/test/Link.test.js +0 -25
  165. package/test/Paginator.test.js +0 -165
  166. package/test/ProgressBar.test.js +0 -35
  167. package/test/Radio.test.js +0 -37
  168. package/test/ResultsetTable.test.js +0 -282
  169. package/test/Select.test.js +0 -191
  170. package/test/Sidenav.test.js +0 -87
  171. package/test/Slider.test.js +0 -65
  172. package/test/Spinner.test.js +0 -27
  173. package/test/Switch.test.js +0 -45
  174. package/test/Table.test.js +0 -36
  175. package/test/Tabs.test.js +0 -88
  176. package/test/TabsForSections.test.js +0 -34
  177. package/test/Tag.test.js +0 -32
  178. package/test/TextArea.test.js +0 -52
  179. package/test/Toggle.test.js +0 -43
  180. package/test/Upload.test.js +0 -60
  181. package/test/Wizard.test.js +0 -130
  182. package/test/mocks/pngMock.js +0 -1
  183. 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 "@diaas/dxc-react-cdk";
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 "@diaas/dxc-react-cdk";
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
- ```