@dxc-technology/halstack-react 0.0.0-4845f79 → 0.0.0-48526b5

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 (196) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +4007 -0
  3. package/dist/index.d.ts +4007 -0
  4. package/dist/index.js +14916 -0
  5. package/dist/index.mjs +14827 -0
  6. package/package.json +92 -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 -300
  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 -1436
  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 -223
  125. package/dist/upload/Upload.js +0 -205
  126. package/dist/upload/Upload.stories.js +0 -72
  127. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  128. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  129. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  130. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  131. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  132. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  133. package/dist/upload/file-upload/FileToUpload.js +0 -184
  134. package/dist/upload/file-upload/audio-icon.svg +0 -4
  135. package/dist/upload/file-upload/close.svg +0 -4
  136. package/dist/upload/file-upload/file-icon.svg +0 -4
  137. package/dist/upload/file-upload/video-icon.svg +0 -4
  138. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  139. package/dist/upload/readme.md +0 -37
  140. package/dist/upload/transaction/Transaction.js +0 -175
  141. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  142. package/dist/upload/transaction/audio-icon.svg +0 -4
  143. package/dist/upload/transaction/error-icon.svg +0 -4
  144. package/dist/upload/transaction/file-icon-err.svg +0 -4
  145. package/dist/upload/transaction/file-icon.svg +0 -4
  146. package/dist/upload/transaction/image-icon-err.svg +0 -4
  147. package/dist/upload/transaction/image-icon.svg +0 -4
  148. package/dist/upload/transaction/success-icon.svg +0 -4
  149. package/dist/upload/transaction/video-icon-err.svg +0 -4
  150. package/dist/upload/transaction/video-icon.svg +0 -4
  151. package/dist/upload/transactions/Transactions.js +0 -138
  152. package/dist/useTheme.js +0 -22
  153. package/dist/wizard/Wizard.js +0 -411
  154. package/dist/wizard/invalid_icon.svg +0 -5
  155. package/dist/wizard/valid_icon.svg +0 -5
  156. package/dist/wizard/validation-wrong.svg +0 -6
  157. package/test/Accordion.test.js +0 -33
  158. package/test/AccordionGroup.test.js +0 -125
  159. package/test/Alert.test.js +0 -53
  160. package/test/Box.test.js +0 -10
  161. package/test/Button.test.js +0 -18
  162. package/test/Card.test.js +0 -30
  163. package/test/Checkbox.test.js +0 -45
  164. package/test/Chip.test.js +0 -25
  165. package/test/Date.test.js +0 -393
  166. package/test/Dialog.test.js +0 -23
  167. package/test/Dropdown.test.js +0 -145
  168. package/test/Footer.test.js +0 -99
  169. package/test/Header.test.js +0 -39
  170. package/test/Heading.test.js +0 -35
  171. package/test/InputText.test.js +0 -240
  172. package/test/Link.test.js +0 -43
  173. package/test/NewDate.test.js +0 -203
  174. package/test/NewInputText.test.js +0 -817
  175. package/test/NewTextarea.test.js +0 -201
  176. package/test/Number.test.js +0 -241
  177. package/test/Paginator.test.js +0 -177
  178. package/test/Password.test.js +0 -76
  179. package/test/ProgressBar.test.js +0 -35
  180. package/test/Radio.test.js +0 -37
  181. package/test/ResultsetTable.test.js +0 -330
  182. package/test/Select.test.js +0 -189
  183. package/test/Sidenav.test.js +0 -45
  184. package/test/Slider.test.js +0 -82
  185. package/test/Spinner.test.js +0 -27
  186. package/test/Switch.test.js +0 -45
  187. package/test/Table.test.js +0 -36
  188. package/test/Tabs.test.js +0 -109
  189. package/test/TabsForSections.test.js +0 -34
  190. package/test/Tag.test.js +0 -32
  191. package/test/TextArea.test.js +0 -52
  192. package/test/ToggleGroup.test.js +0 -81
  193. package/test/Upload.test.js +0 -60
  194. package/test/Wizard.test.js +0 -130
  195. package/test/mocks/pngMock.js +0 -1
  196. 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,300 +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: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\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: 24px;\n height: 24px;\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\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n 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 _useState3 = (0, _react.useState)(false),
94
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
95
- isLabelHovered = _useState4[0],
96
- setIsLabelHovered = _useState4[1];
97
-
98
- var colorsTheme = (0, _useTheme["default"])();
99
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
100
-
101
- var handlerCheckboxChange = function handlerCheckboxChange(checkboxValue) {
102
- if (checked === undefined) {
103
- var isChecked = checkboxValue.target.checked === undefined ? !innerChecked : checkboxValue.target.checked;
104
- setInnerChecked(isChecked);
105
-
106
- if (typeof onChange === "function") {
107
- onChange(isChecked);
108
- }
109
- } else {
110
- if (typeof onChange === "function") {
111
- onChange(!checked);
112
- }
113
- }
114
- };
115
-
116
- var handleLabelHover = function handleLabelHover() {
117
- setIsLabelHovered(!isLabelHovered);
118
- };
119
-
120
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
121
- theme: colorsTheme.checkbox
122
- }, _react["default"].createElement(CheckboxContainer, {
123
- id: name,
124
- brightness: _variables.componentTokens,
125
- labelPosition: labelPosition,
126
- disabled: disabled,
127
- margin: margin,
128
- size: size,
129
- backgroundType: backgroundType,
130
- isLabelHovered: isLabelHovered
131
- }, _react["default"].createElement(_Checkbox["default"], {
132
- checked: checked != undefined ? checked : innerChecked,
133
- inputProps: {
134
- name: name,
135
- "aria-label": label,
136
- role: "checkbox",
137
- "aria-checked": checked != undefined ? checked : innerChecked
138
- },
139
- onChange: handlerCheckboxChange,
140
- value: value,
141
- disabled: disabled,
142
- disableRipple: true,
143
- className: "test",
144
- tabIndex: tabIndex
145
- }), _react["default"].createElement(CheckboxBlackBack, {
146
- labelPosition: labelPosition,
147
- disabled: disabled,
148
- checked: checked != undefined ? checked : innerChecked,
149
- backgroundType: backgroundType
150
- }), required && _react["default"].createElement(_RequiredComponent["default"], null), label && _react["default"].createElement(LabelContainer, {
151
- labelPosition: labelPosition,
152
- onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
153
- disabled: disabled,
154
- className: "labelContainer",
155
- backgroundType: backgroundType,
156
- onMouseOver: handleLabelHover,
157
- onMouseOut: handleLabelHover
158
- }, label)));
159
- };
160
-
161
- var sizes = {
162
- small: "120px",
163
- medium: "240px",
164
- large: "480px",
165
- fillParent: "100%",
166
- fitContent: "unset"
167
- };
168
-
169
- var calculateWidth = function calculateWidth(margin, size) {
170
- if (size === "fillParent") {
171
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
172
- }
173
-
174
- return sizes[size];
175
- };
176
-
177
- var getDisabledColor = function getDisabledColor(props, element) {
178
- switch (element) {
179
- case "check":
180
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledCheckColorOnDark : props.theme.disabledCheckColor;
181
- break;
182
-
183
- case "background":
184
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBackgroundColorCheckedOnDark : props.theme.disabledBackgroundColorChecked;
185
- break;
186
-
187
- case "border":
188
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;
189
- break;
190
-
191
- case "label":
192
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
193
- break;
194
- }
195
- };
196
-
197
- var getNotDisabledColor = function getNotDisabledColor(props, element) {
198
- switch (element) {
199
- case "check":
200
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkColorOnDark : props.theme.checkColor;
201
- break;
202
-
203
- case "background":
204
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.backgroundColorCheckedOnDark : props.theme.backgroundColorChecked;
205
- break;
206
-
207
- case "border":
208
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.borderColorOnDark : props.theme.borderColor;
209
- break;
210
-
211
- case "label":
212
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
213
- break;
214
- }
215
- };
216
-
217
- var LabelContainer = _styledComponents["default"].span(_templateObject(), function (props) {
218
- return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
219
- }, function (props) {
220
- return props.disabled ? "not-allowed" : "pointer";
221
- }, function (props) {
222
- return props.theme.fontFamily;
223
- }, function (props) {
224
- return props.theme.fontSize;
225
- }, function (props) {
226
- return props.theme.fontWeight;
227
- });
228
-
229
- var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
230
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
231
- }, function (props) {
232
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
233
- }, function (props) {
234
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
235
- }, function (props) {
236
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
237
- }, function (props) {
238
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
239
- }, function (props) {
240
- return calculateWidth(props.margin, props.size);
241
- }, function (props) {
242
- return props.disabled ? "not-allowed" : "pointer";
243
- }, function (props) {
244
- return props.labelPosition === "before" ? "row-reverse" : "row";
245
- }, function (props) {
246
- return props.isLabelHovered ? props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor : getNotDisabledColor(props, "border");
247
- }, function (props) {
248
- return getDisabledColor(props, "border");
249
- }, function (props) {
250
- return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
251
- }, function (props) {
252
- return props.backgroundType === "dark" ? props.theme.hoverBackgroundColorCheckedOnDark : props.theme.hoverBackgroundColorChecked;
253
- }, function (props) {
254
- return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
255
- }, function (props) {
256
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
257
- }, function (props) {
258
- return props.theme.checkLabelSpacing;
259
- }, function (props) {
260
- return props.labelPosition === "after" ? "0px" : "";
261
- }, function (props) {
262
- return props.labelPosition === "before" ? "0px" : "";
263
- }, function (props) {
264
- return props.labelPosition === "before" ? "unset" : "1px";
265
- }, function (props) {
266
- return props.labelPosition === "before" ? "1px" : "unset";
267
- });
268
-
269
- var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
270
- return !props.checked ? "transparent" : props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check");
271
- }, function (props) {
272
- return props.labelPosition === "before" ? "unset" : "5px";
273
- }, function (props) {
274
- return props.labelPosition === "before" ? "5px" : "unset";
275
- }, function (props) {
276
- return props.labelPosition === "after" ? "0px" : "";
277
- }, function (props) {
278
- return props.labelPosition === "before" ? "0px" : "";
279
- });
280
-
281
- DxcCheckbox.propTypes = {
282
- checked: _propTypes["default"].bool,
283
- value: _propTypes["default"].any,
284
- label: _propTypes["default"].string,
285
- labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
286
- name: _propTypes["default"].string,
287
- disabled: _propTypes["default"].bool,
288
- onChange: _propTypes["default"].func,
289
- required: _propTypes["default"].bool,
290
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
291
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
292
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
293
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
294
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
295
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
296
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
297
- tabIndex: _propTypes["default"].number
298
- };
299
- var _default = DxcCheckbox;
300
- exports["default"] = _default;