@dxc-technology/halstack-react 0.0.0-10e5d11 → 0.0.0-11075fb

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 (197) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6589 -0
  3. package/dist/index.d.ts +6589 -0
  4. package/dist/index.js +13762 -0
  5. package/dist/index.mjs +13704 -0
  6. package/package.json +76 -67
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -216
  10. package/dist/accordion/Accordion.js +0 -348
  11. package/dist/accordion/Accordion.stories.js +0 -207
  12. package/dist/accordion/readme.md +0 -96
  13. package/dist/accordion-group/AccordionGroup.js +0 -188
  14. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  15. package/dist/accordion-group/readme.md +0 -70
  16. package/dist/alert/Alert.js +0 -403
  17. package/dist/badge/Badge.js +0 -63
  18. package/dist/box/Box.js +0 -156
  19. package/dist/button/Button.js +0 -231
  20. package/dist/button/Button.stories.js +0 -224
  21. package/dist/button/readme.md +0 -93
  22. package/dist/card/Card.js +0 -254
  23. package/dist/checkbox/Checkbox.js +0 -294
  24. package/dist/checkbox/Checkbox.stories.js +0 -144
  25. package/dist/checkbox/readme.md +0 -116
  26. package/dist/chip/Chip.js +0 -265
  27. package/dist/common/OpenSans.css +0 -81
  28. package/dist/common/RequiredComponent.js +0 -40
  29. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  35. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  39. package/dist/common/utils.js +0 -22
  40. package/dist/common/variables.js +0 -1438
  41. package/dist/date/Date.js +0 -381
  42. package/dist/date/Date.stories.js +0 -205
  43. package/dist/date/readme.md +0 -73
  44. package/dist/dialog/Dialog.js +0 -240
  45. package/dist/dialog/Dialog.stories.js +0 -217
  46. package/dist/dialog/readme.md +0 -32
  47. package/dist/dropdown/Dropdown.js +0 -504
  48. package/dist/dropdown/Dropdown.stories.js +0 -249
  49. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  50. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  51. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  52. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  53. package/dist/dropdown/readme.md +0 -69
  54. package/dist/footer/Footer.js +0 -395
  55. package/dist/footer/Footer.stories.js +0 -94
  56. package/dist/footer/dxc_logo.svg +0 -15
  57. package/dist/footer/readme.md +0 -41
  58. package/dist/header/Header.js +0 -423
  59. package/dist/header/Header.stories.js +0 -176
  60. package/dist/header/close_icon.svg +0 -1
  61. package/dist/header/dxc_logo_black.svg +0 -8
  62. package/dist/header/hamb_menu_black.svg +0 -1
  63. package/dist/header/hamb_menu_white.svg +0 -1
  64. package/dist/header/readme.md +0 -33
  65. package/dist/heading/Heading.js +0 -218
  66. package/dist/input-text/InputText.js +0 -707
  67. package/dist/input-text/InputText.stories.js +0 -209
  68. package/dist/input-text/error.svg +0 -1
  69. package/dist/input-text/readme.md +0 -91
  70. package/dist/layout/ApplicationLayout.js +0 -331
  71. package/dist/layout/facebook.svg +0 -45
  72. package/dist/layout/linkedin.svg +0 -50
  73. package/dist/layout/twitter.svg +0 -53
  74. package/dist/link/Link.js +0 -241
  75. package/dist/link/readme.md +0 -51
  76. package/dist/main.js +0 -351
  77. package/dist/new-date/NewDate.js +0 -403
  78. package/dist/new-input-text/NewInputText.js +0 -961
  79. package/dist/new-textarea/NewTextarea.js +0 -346
  80. package/dist/number/Number.js +0 -138
  81. package/dist/number/NumberContext.js +0 -16
  82. package/dist/paginator/Paginator.js +0 -289
  83. package/dist/paginator/images/next.svg +0 -3
  84. package/dist/paginator/images/nextPage.svg +0 -3
  85. package/dist/paginator/images/previous.svg +0 -3
  86. package/dist/paginator/images/previousPage.svg +0 -3
  87. package/dist/paginator/readme.md +0 -50
  88. package/dist/password/Password.js +0 -200
  89. package/dist/password/styles.css +0 -3
  90. package/dist/progress-bar/ProgressBar.js +0 -206
  91. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  92. package/dist/progress-bar/readme.md +0 -63
  93. package/dist/radio/Radio.js +0 -209
  94. package/dist/radio/Radio.stories.js +0 -166
  95. package/dist/radio/readme.md +0 -70
  96. package/dist/resultsetTable/ResultsetTable.js +0 -358
  97. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  98. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  99. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  100. package/dist/select/Select.js +0 -585
  101. package/dist/select/Select.stories.js +0 -235
  102. package/dist/select/readme.md +0 -72
  103. package/dist/sidenav/Sidenav.js +0 -177
  104. package/dist/slider/Slider.js +0 -319
  105. package/dist/slider/Slider.stories.js +0 -241
  106. package/dist/slider/readme.md +0 -64
  107. package/dist/spinner/Spinner.js +0 -218
  108. package/dist/spinner/Spinner.stories.js +0 -183
  109. package/dist/spinner/readme.md +0 -65
  110. package/dist/switch/Switch.js +0 -222
  111. package/dist/switch/Switch.stories.js +0 -134
  112. package/dist/switch/readme.md +0 -133
  113. package/dist/table/Table.js +0 -132
  114. package/dist/tabs/Tabs.js +0 -343
  115. package/dist/tabs/Tabs.stories.js +0 -130
  116. package/dist/tabs/readme.md +0 -78
  117. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  118. package/dist/tabs-for-sections/readme.md +0 -78
  119. package/dist/tag/Tag.js +0 -288
  120. package/dist/textarea/Textarea.js +0 -264
  121. package/dist/toggle/Toggle.js +0 -220
  122. package/dist/toggle/Toggle.stories.js +0 -297
  123. package/dist/toggle/readme.md +0 -80
  124. package/dist/toggle-group/ToggleGroup.js +0 -241
  125. package/dist/toggle-group/readme.md +0 -82
  126. package/dist/upload/Upload.js +0 -205
  127. package/dist/upload/Upload.stories.js +0 -72
  128. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  129. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  130. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  131. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  132. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  133. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  134. package/dist/upload/file-upload/FileToUpload.js +0 -184
  135. package/dist/upload/file-upload/audio-icon.svg +0 -4
  136. package/dist/upload/file-upload/close.svg +0 -4
  137. package/dist/upload/file-upload/file-icon.svg +0 -4
  138. package/dist/upload/file-upload/video-icon.svg +0 -4
  139. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  140. package/dist/upload/readme.md +0 -37
  141. package/dist/upload/transaction/Transaction.js +0 -175
  142. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  143. package/dist/upload/transaction/audio-icon.svg +0 -4
  144. package/dist/upload/transaction/error-icon.svg +0 -4
  145. package/dist/upload/transaction/file-icon-err.svg +0 -4
  146. package/dist/upload/transaction/file-icon.svg +0 -4
  147. package/dist/upload/transaction/image-icon-err.svg +0 -4
  148. package/dist/upload/transaction/image-icon.svg +0 -4
  149. package/dist/upload/transaction/success-icon.svg +0 -4
  150. package/dist/upload/transaction/video-icon-err.svg +0 -4
  151. package/dist/upload/transaction/video-icon.svg +0 -4
  152. package/dist/upload/transactions/Transactions.js +0 -138
  153. package/dist/useTheme.js +0 -22
  154. package/dist/wizard/Wizard.js +0 -411
  155. package/dist/wizard/invalid_icon.svg +0 -5
  156. package/dist/wizard/valid_icon.svg +0 -5
  157. package/dist/wizard/validation-wrong.svg +0 -6
  158. package/test/Accordion.test.js +0 -33
  159. package/test/AccordionGroup.test.js +0 -125
  160. package/test/Alert.test.js +0 -53
  161. package/test/Box.test.js +0 -10
  162. package/test/Button.test.js +0 -18
  163. package/test/Card.test.js +0 -30
  164. package/test/Checkbox.test.js +0 -45
  165. package/test/Chip.test.js +0 -25
  166. package/test/Date.test.js +0 -393
  167. package/test/Dialog.test.js +0 -23
  168. package/test/Dropdown.test.js +0 -145
  169. package/test/Footer.test.js +0 -99
  170. package/test/Header.test.js +0 -39
  171. package/test/Heading.test.js +0 -35
  172. package/test/InputText.test.js +0 -240
  173. package/test/Link.test.js +0 -43
  174. package/test/NewDate.test.js +0 -203
  175. package/test/NewInputText.test.js +0 -817
  176. package/test/NewTextarea.test.js +0 -201
  177. package/test/Number.test.js +0 -241
  178. package/test/Paginator.test.js +0 -177
  179. package/test/Password.test.js +0 -76
  180. package/test/ProgressBar.test.js +0 -35
  181. package/test/Radio.test.js +0 -37
  182. package/test/ResultsetTable.test.js +0 -330
  183. package/test/Select.test.js +0 -189
  184. package/test/Sidenav.test.js +0 -45
  185. package/test/Slider.test.js +0 -82
  186. package/test/Spinner.test.js +0 -27
  187. package/test/Switch.test.js +0 -45
  188. package/test/Table.test.js +0 -36
  189. package/test/Tabs.test.js +0 -109
  190. package/test/TabsForSections.test.js +0 -34
  191. package/test/Tag.test.js +0 -32
  192. package/test/TextArea.test.js +0 -52
  193. package/test/ToggleGroup.test.js +0 -81
  194. package/test/Upload.test.js +0 -60
  195. package/test/Wizard.test.js +0 -130
  196. package/test/mocks/pngMock.js +0 -1
  197. package/test/mocks/svgMock.js +0 -1
package/dist/card/Card.js DELETED
@@ -1,254 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
-
30
- var _Box = _interopRequireDefault(require("../box/Box"));
31
-
32
- function _templateObject6() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n overflow: hidden;\n"]);
34
-
35
- _templateObject6 = function _templateObject6() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject5() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 35%;\n height: 100%;\n flex-shrink: 0;\n background: ", ";\n justify-content: center;\n align-items: center;\n display: inline-flex;\n"]);
44
-
45
- _templateObject5 = function _templateObject5() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject4() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n object-fit: ", ";\n"]);
54
-
55
- _templateObject4 = function _templateObject4() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject3() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n"]);
64
-
65
- _templateObject3 = function _templateObject3() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject2() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n height: ", ";\n width: ", ";\n &:hover {\n border-color: ", ";\n }\n"]);
74
-
75
- _templateObject2 = function _templateObject2() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
84
-
85
- _templateObject = function _templateObject() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- var DxcCard = function DxcCard(_ref) {
93
- var imageSrc = _ref.imageSrc,
94
- children = _ref.children,
95
- margin = _ref.margin,
96
- contentPadding = _ref.contentPadding,
97
- linkHref = _ref.linkHref,
98
- onClick = _ref.onClick,
99
- imageBgColor = _ref.imageBgColor,
100
- imagePadding = _ref.imagePadding,
101
- imagePosition = _ref.imagePosition,
102
- outlined = _ref.outlined,
103
- imageCover = _ref.imageCover,
104
- _ref$tabIndex = _ref.tabIndex,
105
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
106
- var colorsTheme = (0, _useTheme["default"])();
107
-
108
- var _useState = (0, _react.useState)(false),
109
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
110
- isHovered = _useState2[0],
111
- changeIsHovered = _useState2[1];
112
-
113
- var tagContent = _react["default"].createElement(_Box["default"], {
114
- shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
115
- }, _react["default"].createElement(_styledComponents.ThemeProvider, {
116
- theme: colorsTheme.card
117
- }, _react["default"].createElement(CardContainer, {
118
- hasAction: onClick || linkHref,
119
- outlined: outlined,
120
- imagePosition: imagePosition
121
- }, imageSrc && _react["default"].createElement(ImageContainer, {
122
- imageBgColor: imageBgColor
123
- }, _react["default"].createElement(TagImage, {
124
- imagePadding: imagePadding,
125
- cover: imageCover,
126
- src: imageSrc
127
- })), _react["default"].createElement(CardContent, {
128
- contentPadding: contentPadding
129
- }, children))));
130
-
131
- return _react["default"].createElement(StyledDxcCard, {
132
- margin: margin,
133
- onMouseEnter: function onMouseEnter() {
134
- return changeIsHovered(true);
135
- },
136
- onMouseLeave: function onMouseLeave() {
137
- return changeIsHovered(false);
138
- },
139
- onClick: onClick,
140
- hasAction: onClick,
141
- tabIndex: typeof onClick === "function" && !linkHref ? tabIndex : -1
142
- }, linkHref && _react["default"].createElement(StyledLink, {
143
- tabIndex: tabIndex,
144
- href: linkHref
145
- }, tagContent) || tagContent);
146
- };
147
-
148
- var StyledDxcCard = _styledComponents["default"].div(_templateObject(), function (_ref2) {
149
- var hasAction = _ref2.hasAction;
150
- return hasAction && "pointer" || "unset";
151
- }, function (_ref3) {
152
- var hasAction = _ref3.hasAction;
153
- return !hasAction && "none";
154
- }, function (_ref4) {
155
- var margin = _ref4.margin;
156
- return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
157
- }, function (_ref5) {
158
- var margin = _ref5.margin;
159
- return margin && margin.top ? _variables.spaces[margin.top] : "";
160
- }, function (_ref6) {
161
- var margin = _ref6.margin;
162
- return margin && margin.right ? _variables.spaces[margin.right] : "";
163
- }, function (_ref7) {
164
- var margin = _ref7.margin;
165
- return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
166
- }, function (_ref8) {
167
- var margin = _ref8.margin;
168
- return margin && margin.left ? _variables.spaces[margin.left] : "";
169
- });
170
-
171
- var CardContainer = _styledComponents["default"].div(_templateObject2(), function (_ref9) {
172
- var imagePosition = _ref9.imagePosition;
173
- return imagePosition === "before" && "row" || "row-reverse";
174
- }, function (props) {
175
- return props.theme.height;
176
- }, function (props) {
177
- return props.theme.width;
178
- }, function (_ref10) {
179
- var hasAction = _ref10.hasAction;
180
- return hasAction ? "" : "unset";
181
- });
182
-
183
- var StyledLink = _styledComponents["default"].a(_templateObject3());
184
-
185
- var TagImage = _styledComponents["default"].img(_templateObject4(), function (_ref11) {
186
- var imagePadding = _ref11.imagePadding;
187
- return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
188
- }, function (_ref12) {
189
- var imagePadding = _ref12.imagePadding;
190
- return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
191
- }, function (_ref13) {
192
- var cover = _ref13.cover;
193
- return cover ? "cover" : "contain";
194
- });
195
-
196
- var ImageContainer = _styledComponents["default"].div(_templateObject5(), function (_ref14) {
197
- var imageBgColor = _ref14.imageBgColor;
198
- return imageBgColor;
199
- });
200
-
201
- var CardContent = _styledComponents["default"].div(_templateObject6(), function (_ref15) {
202
- var contentPadding = _ref15.contentPadding;
203
- return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
204
- }, function (_ref16) {
205
- var contentPadding = _ref16.contentPadding;
206
- return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
207
- }, function (_ref17) {
208
- var contentPadding = _ref17.contentPadding;
209
- return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
210
- }, function (_ref18) {
211
- var contentPadding = _ref18.contentPadding;
212
- return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
213
- }, function (_ref19) {
214
- var contentPadding = _ref19.contentPadding;
215
- return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.left ? _variables.spaces[contentPadding.left] : "";
216
- });
217
-
218
- DxcCard.propTypes = {
219
- imageSrc: _propTypes["default"].string,
220
- imageBgColor: _propTypes["default"].string,
221
- imagePadding: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces))),
222
- imagePosition: _propTypes["default"].oneOf(["before", "after"]),
223
- linkHref: _propTypes["default"].string,
224
- onClick: _propTypes["default"].func,
225
- outlined: _propTypes["default"].bool,
226
- imageCover: _propTypes["default"].bool,
227
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
228
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
229
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
230
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
231
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
232
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
233
- contentPadding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
234
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
235
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
236
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
237
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
238
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
239
- tabIndex: _propTypes["default"].number
240
- };
241
- DxcCard.defaultProps = {
242
- imageSrc: null,
243
- margin: null,
244
- contentPadding: null,
245
- outlined: false,
246
- imagePadding: null,
247
- imageCover: false,
248
- linkHref: null,
249
- onClick: null,
250
- imageBgColor: "black",
251
- imagePosition: "before"
252
- };
253
- var _default = DxcCard;
254
- exports["default"] = _default;
@@ -1,294 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _utils = require("../common/utils.js");
33
-
34
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
-
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 17px;\n height: 17px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 26.6px;\n height: 26.6px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n &.Mui-focusVisible {\n .MuiIconButton-label {\n outline: ", "\n auto 1px;\n }\n }\n z-index: 1;\n padding: 10px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin: 2px;\n margin-left: ", ";\n margin-right: ", ";\n }\n"]);
50
-
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- var DxcCheckbox = function DxcCheckbox(_ref) {
69
- var checked = _ref.checked,
70
- value = _ref.value,
71
- _ref$label = _ref.label,
72
- label = _ref$label === void 0 ? "" : _ref$label,
73
- _ref$labelPosition = _ref.labelPosition,
74
- labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
75
- _ref$name = _ref.name,
76
- name = _ref$name === void 0 ? "" : _ref$name,
77
- _ref$disabled = _ref.disabled,
78
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
79
- onChange = _ref.onChange,
80
- _ref$required = _ref.required,
81
- required = _ref$required === void 0 ? false : _ref$required,
82
- margin = _ref.margin,
83
- _ref$size = _ref.size,
84
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
85
- _ref$tabIndex = _ref.tabIndex,
86
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
87
-
88
- var _useState = (0, _react.useState)(false),
89
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
90
- innerChecked = _useState2[0],
91
- setInnerChecked = _useState2[1];
92
-
93
- var colorsTheme = (0, _useTheme["default"])();
94
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
95
-
96
- var handlerCheckboxChange = function handlerCheckboxChange(checkboxValue) {
97
- if (checked === undefined) {
98
- var isChecked = checkboxValue.target.checked === undefined ? !innerChecked : checkboxValue.target.checked;
99
- setInnerChecked(isChecked);
100
-
101
- if (typeof onChange === "function") {
102
- onChange(isChecked);
103
- }
104
- } else {
105
- if (typeof onChange === "function") {
106
- onChange(!checked);
107
- }
108
- }
109
- };
110
-
111
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
112
- theme: colorsTheme.checkbox
113
- }, _react["default"].createElement(CheckboxContainer, {
114
- id: name,
115
- brightness: _variables.componentTokens,
116
- labelPosition: labelPosition,
117
- disabled: disabled,
118
- margin: margin,
119
- size: size,
120
- backgroundType: backgroundType
121
- }, _react["default"].createElement(_Checkbox["default"], {
122
- checked: checked != undefined ? checked : innerChecked,
123
- inputProps: {
124
- name: name,
125
- "aria-label": label,
126
- role: "checkbox",
127
- "aria-checked": checked != undefined ? checked : innerChecked
128
- },
129
- onChange: handlerCheckboxChange,
130
- value: value,
131
- disabled: disabled,
132
- disableRipple: true,
133
- className: "test",
134
- tabIndex: tabIndex
135
- }), _react["default"].createElement(CheckboxBlackBack, {
136
- labelPosition: labelPosition,
137
- disabled: disabled,
138
- checked: checked != undefined ? checked : innerChecked,
139
- backgroundType: backgroundType
140
- }), required && _react["default"].createElement(_RequiredComponent["default"], null), label && _react["default"].createElement(LabelContainer, {
141
- labelPosition: labelPosition,
142
- onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
143
- disabled: disabled,
144
- className: "labelContainer",
145
- backgroundType: backgroundType
146
- }, label)));
147
- };
148
-
149
- var sizes = {
150
- small: "120px",
151
- medium: "240px",
152
- large: "480px",
153
- fillParent: "100%",
154
- fitContent: "unset"
155
- };
156
-
157
- var calculateWidth = function calculateWidth(margin, size) {
158
- if (size === "fillParent") {
159
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
160
- }
161
-
162
- return sizes[size];
163
- };
164
-
165
- var getDisabledColor = function getDisabledColor(props, element) {
166
- switch (element) {
167
- case "check":
168
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledCheckColorOnDark : props.theme.disabledCheckColor;
169
- break;
170
-
171
- case "background":
172
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBackgroundColorCheckedOnDark : props.theme.disabledBackgroundColorChecked;
173
- break;
174
-
175
- case "border":
176
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;
177
- break;
178
-
179
- case "label":
180
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
181
- break;
182
- }
183
- };
184
-
185
- var getNotDisabledColor = function getNotDisabledColor(props, element) {
186
- switch (element) {
187
- case "check":
188
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkColorOnDark : props.theme.checkColor;
189
- break;
190
-
191
- case "background":
192
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.backgroundColorCheckedOnDark : props.theme.backgroundColorChecked;
193
- break;
194
-
195
- case "border":
196
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.borderColorOnDark : props.theme.borderColor;
197
- break;
198
-
199
- case "label":
200
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
201
- break;
202
- }
203
- };
204
-
205
- var LabelContainer = _styledComponents["default"].span(_templateObject(), function (props) {
206
- return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
207
- }, function (props) {
208
- return props.disabled ? "not-allowed" : "pointer";
209
- }, function (props) {
210
- return props.theme.fontFamily;
211
- }, function (props) {
212
- return props.theme.fontSize;
213
- }, function (props) {
214
- return props.theme.fontWeight;
215
- });
216
-
217
- var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
218
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
219
- }, function (props) {
220
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
221
- }, function (props) {
222
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
223
- }, function (props) {
224
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
225
- }, function (props) {
226
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
227
- }, function (props) {
228
- return calculateWidth(props.margin, props.size);
229
- }, function (props) {
230
- return props.disabled ? "not-allowed" : "pointer";
231
- }, function (props) {
232
- return props.labelPosition === "before" ? "row-reverse" : "row";
233
- }, function (props) {
234
- return getNotDisabledColor(props, "border");
235
- }, function (props) {
236
- return getDisabledColor(props, "border");
237
- }, function (props) {
238
- return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
239
- }, function (props) {
240
- return props.backgroundType === "dark" ? props.theme.hoverBackgroundColorCheckedOnDark : props.theme.hoverBackgroundColorChecked;
241
- }, function (props) {
242
- return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
243
- }, function (props) {
244
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
245
- }, function (props) {
246
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
247
- }, function (props) {
248
- return props.theme.checkLabelSpacing;
249
- }, function (props) {
250
- return props.labelPosition === "after" ? "0px" : "";
251
- }, function (props) {
252
- return props.labelPosition === "before" ? "0px" : "";
253
- }, function (props) {
254
- return props.labelPosition === "after" ? "0px" : "";
255
- }, function (props) {
256
- return props.labelPosition === "before" ? "0px" : "";
257
- });
258
-
259
- var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
260
- return !props.checked ? "transparent" : props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check");
261
- }, function (props) {
262
- return props.labelPosition === "before" ? "unset" : "5px";
263
- }, function (props) {
264
- return props.labelPosition === "before" ? "5px" : "unset";
265
- }, function (props) {
266
- return props.labelPosition === "after" ? "0px" : "";
267
- }, function (props) {
268
- return props.labelPosition === "before" ? "0px" : "";
269
- }, function (props) {
270
- return props.labelPosition === "after" ? "0px" : "";
271
- }, function (props) {
272
- return props.labelPosition === "before" ? "0px" : "";
273
- });
274
-
275
- DxcCheckbox.propTypes = {
276
- checked: _propTypes["default"].bool,
277
- value: _propTypes["default"].any,
278
- label: _propTypes["default"].string,
279
- labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
280
- name: _propTypes["default"].string,
281
- disabled: _propTypes["default"].bool,
282
- onChange: _propTypes["default"].func,
283
- required: _propTypes["default"].bool,
284
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
285
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
286
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
287
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
288
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
289
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
290
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
291
- tabIndex: _propTypes["default"].number
292
- };
293
- var _default = DxcCheckbox;
294
- exports["default"] = _default;