@dxc-technology/halstack-react 3.2.0 → 4.0.0

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 (265) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +16 -9
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1567 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +79 -37
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +162 -66
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +71 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +65 -40
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +992 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -201
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -523
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  163. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/heading/Heading.js +0 -163
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/layout/facebook.svg +0 -45
  173. package/dist/layout/linkedin.svg +0 -50
  174. package/dist/layout/twitter.svg +0 -53
  175. package/dist/link/readme.md +0 -51
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -490
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/slider/Slider.js +0 -267
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -198
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/textarea/Textarea.js +0 -238
  204. package/dist/toggle/Toggle.stories.js +0 -297
  205. package/dist/toggle/readme.md +0 -80
  206. package/dist/toggle-group/ToggleGroup.js +0 -223
  207. package/dist/toggle-group/readme.md +0 -82
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/audio-icon.svg +0 -4
  214. package/dist/upload/file-upload/close.svg +0 -4
  215. package/dist/upload/file-upload/file-icon.svg +0 -4
  216. package/dist/upload/file-upload/video-icon.svg +0 -4
  217. package/dist/upload/readme.md +0 -37
  218. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  219. package/dist/upload/transaction/audio-icon.svg +0 -4
  220. package/dist/upload/transaction/error-icon.svg +0 -4
  221. package/dist/upload/transaction/file-icon-err.svg +0 -4
  222. package/dist/upload/transaction/file-icon.svg +0 -4
  223. package/dist/upload/transaction/image-icon-err.svg +0 -4
  224. package/dist/upload/transaction/image-icon.svg +0 -4
  225. package/dist/upload/transaction/success-icon.svg +0 -4
  226. package/dist/upload/transaction/video-icon-err.svg +0 -4
  227. package/dist/upload/transaction/video-icon.svg +0 -4
  228. package/dist/wizard/invalid_icon.svg +0 -6
  229. package/dist/wizard/valid_icon.svg +0 -6
  230. package/dist/wizard/validation-wrong.svg +0 -6
  231. package/test/Accordion.test.js +0 -33
  232. package/test/AccordionGroup.test.js +0 -125
  233. package/test/Alert.test.js +0 -53
  234. package/test/Box.test.js +0 -10
  235. package/test/Button.test.js +0 -18
  236. package/test/Card.test.js +0 -30
  237. package/test/Checkbox.test.js +0 -45
  238. package/test/Chip.test.js +0 -25
  239. package/test/Date.test.js +0 -393
  240. package/test/Dialog.test.js +0 -23
  241. package/test/Dropdown.test.js +0 -130
  242. package/test/Footer.test.js +0 -99
  243. package/test/Header.test.js +0 -39
  244. package/test/Heading.test.js +0 -35
  245. package/test/InputText.test.js +0 -240
  246. package/test/Link.test.js +0 -42
  247. package/test/Paginator.test.js +0 -177
  248. package/test/ProgressBar.test.js +0 -35
  249. package/test/Radio.test.js +0 -37
  250. package/test/ResultsetTable.test.js +0 -330
  251. package/test/Select.test.js +0 -192
  252. package/test/Sidenav.test.js +0 -45
  253. package/test/Slider.test.js +0 -82
  254. package/test/Spinner.test.js +0 -27
  255. package/test/Switch.test.js +0 -45
  256. package/test/Table.test.js +0 -36
  257. package/test/Tabs.test.js +0 -109
  258. package/test/TabsForSections.test.js +0 -34
  259. package/test/Tag.test.js +0 -32
  260. package/test/TextArea.test.js +0 -52
  261. package/test/ToggleGroup.test.js +0 -81
  262. package/test/Upload.test.js +0 -60
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. package/test/mocks/svgMock.js +0 -1
@@ -1,223 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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
- function _templateObject6() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 20px;\n width: 20px;\n overflow: hidden;\n display: flex;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
32
-
33
- _templateObject6 = function _templateObject6() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject5() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 20px;\n width: 20px;\n"]);
42
-
43
- _templateObject5 = function _templateObject5() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject4() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n"]);
52
-
53
- _templateObject4 = function _templateObject4() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject3() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n ", "\n"]);
62
-
63
- _templateObject3 = function _templateObject3() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- function _templateObject2() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"]);
72
-
73
- _templateObject2 = function _templateObject2() {
74
- return data;
75
- };
76
-
77
- return data;
78
- }
79
-
80
- function _templateObject() {
81
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: flex;\n flex-direction: column;\n ", "\n"]);
82
-
83
- _templateObject = function _templateObject() {
84
- return data;
85
- };
86
-
87
- return data;
88
- }
89
-
90
- var DxcToggleGroup = function DxcToggleGroup(_ref) {
91
- var value = _ref.value,
92
- onChange = _ref.onChange,
93
- _ref$disabled = _ref.disabled,
94
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
95
- _ref$options = _ref.options,
96
- options = _ref$options === void 0 ? [] : _ref$options,
97
- margin = _ref.margin,
98
- _ref$multiple = _ref.multiple,
99
- multiple = _ref$multiple === void 0 ? false : _ref$multiple,
100
- _ref$tabIndex = _ref.tabIndex,
101
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
102
- var colorsTheme = (0, _useTheme["default"])();
103
-
104
- var _useState = (0, _react.useState)(multiple ? [] : null),
105
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
106
- selectedValue = _useState2[0],
107
- setSelectedValue = _useState2[1];
108
-
109
- var handleToggleChange = function handleToggleChange(selectedOption) {
110
- var newSelectedOptions;
111
-
112
- if (value == null) {
113
- if (multiple) {
114
- newSelectedOptions = selectedValue.map(function (value) {
115
- return value;
116
- });
117
-
118
- if (newSelectedOptions.includes(selectedOption)) {
119
- var index = newSelectedOptions.indexOf(selectedOption);
120
- newSelectedOptions.splice(index, 1);
121
- } else {
122
- newSelectedOptions.push(selectedOption);
123
- }
124
-
125
- setSelectedValue(newSelectedOptions);
126
- } else {
127
- setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
128
- }
129
- } else if (multiple) {
130
- newSelectedOptions = value.map(function (v) {
131
- return v;
132
- });
133
- newSelectedOptions.push(selectedOption);
134
- }
135
-
136
- if (typeof onChange === "function") {
137
- onChange(multiple ? newSelectedOptions : selectedOption);
138
- }
139
- };
140
-
141
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
142
- theme: colorsTheme.toggleGroup
143
- }, _react["default"].createElement(ToggleGroup, {
144
- margin: margin,
145
- disabled: disabled
146
- }, _react["default"].createElement(ToggleGroupContainer, null, options.map(function (option, i) {
147
- return _react["default"].createElement(ToggleContainer, {
148
- selected: multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
149
- tabIndex: !disabled ? tabIndex : -1,
150
- onClick: function onClick() {
151
- return !disabled && handleToggleChange(option.value);
152
- },
153
- isFirst: i === 0,
154
- isLast: i === options.length - 1,
155
- isIcon: option.iconSrc || option.icon,
156
- disabled: disabled,
157
- key: "toggle-".concat(i, "-").concat(option.label)
158
- }, option.icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc ? _react["default"].createElement(Icon, {
159
- src: option.iconSrc
160
- }) : _react["default"].createElement(LabelContainer, null, option.label));
161
- }))));
162
- };
163
-
164
- var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (props) {
165
- return props.theme.fontSizeBase;
166
- }, function (props) {
167
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
168
- }, function (props) {
169
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
170
- }, function (props) {
171
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
172
- }, function (props) {
173
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
174
- }, function (props) {
175
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
176
- }, function (props) {
177
- return props.disabled && "opacity: ".concat(props.theme.disabledOpacity, ";");
178
- });
179
-
180
- var ToggleGroupContainer = _styledComponents["default"].div(_templateObject2());
181
-
182
- var ToggleContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
183
- return "\n background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n padding: ").concat(props.isIcon ? "10px 12px" : "12px 30px", ";\n ").concat(!props.disabled ? "&:hover {\n background-color: ".concat(props.selected ? props.theme.selectedBackgroundHoverColor : props.theme.unselectedBackgroundHoverColor, ";\n color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n }\n cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n cursor: not-allowed;"), "\n ");
184
- });
185
-
186
- var LabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
187
- return props.theme.fontSize;
188
- }, function (props) {
189
- return props.theme.fontFamily;
190
- }, function (props) {
191
- return props.theme.fontStyle;
192
- }, function (props) {
193
- return props.theme.fontLetterSpacingWide02;
194
- }, function (props) {
195
- return props.theme.fontTextTransform;
196
- });
197
-
198
- var Icon = _styledComponents["default"].img(_templateObject5());
199
-
200
- var IconContainer = _styledComponents["default"].div(_templateObject6());
201
-
202
- DxcToggleGroup.propTypes = {
203
- //label: PropTypes.string,
204
- value: _propTypes["default"].any,
205
- onChange: _propTypes["default"].func,
206
- disabled: _propTypes["default"].bool,
207
- multiple: _propTypes["default"].bool,
208
- options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
209
- value: _propTypes["default"].any.isRequired,
210
- label: _propTypes["default"].string,
211
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
212
- iconSrc: _propTypes["default"].string
213
- })),
214
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
215
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
216
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
217
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
218
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
219
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
220
- tabIndex: _propTypes["default"].number
221
- };
222
- var _default = DxcToggleGroup;
223
- exports["default"] = _default;
@@ -1,82 +0,0 @@
1
- # DXC Toggle Group Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>value: any | any[]</td>
13
- <td></td>
14
- <td>
15
- The key(s) of the selected value(s). If the toggle group component
16
- doesn't allow multiple selection, it must be one unique value. If the
17
- component allows multiple selection, value must be an array. If
18
- undefined, the component will be uncontrolled and the value will be
19
- managed internally by the component.
20
- </td>
21
- </tr>
22
- <tr>
23
- <td>onChange: function</td>
24
- <td></td>
25
- <td>
26
- This function will be called every time the selection changes. The
27
- number with the key of the selected value will be passed as a
28
- parameter to this function. If multiple selection is allowed, an array
29
- of keys will be passed
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>disabled: boolean</td>
34
- <td>
35
- <code>false</code>
36
- </td>
37
- <td>If true, the component will be disabled.</td>
38
- </tr>
39
- <tr>
40
- <td>multiple: boolean</td>
41
- <td>
42
- <code>false</code>
43
- </td>
44
- <td>
45
- If true, the toggle group will support multiple selection. In that
46
- case, value must be an array of numbers with the keys of the selected
47
- values.
48
- </td>
49
- </tr>
50
- <tr>
51
- <td>options: object[]</td>
52
- <td>
53
- <code>[]</code>
54
- </td>
55
- <td>
56
- An array of objects representing the selectable options. Each object
57
- has the following properties:
58
- <ul>
59
- <li>
60
- <b>value</b>: Number with the option inner value.
61
- </li>
62
- <li>
63
- <b>label</b>: String with the option display value.
64
- </li>
65
- <li>
66
- <b>iconSrc</b>: URL of the icon that will be placed. IconSrc and
67
- label can't be used at same time.
68
- </li>
69
- </ul>
70
- </td>
71
- </tr>
72
- <tr>
73
- <td>margin: string | object</td>
74
- <td></td>
75
- <td>
76
- Size of the margin to be applied to the component ('xxsmall' |
77
- 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
78
- can pass an object with 'top', 'bottom', 'left' and 'right' properties
79
- in order to specify different margin sizes.
80
- </td>
81
- </tr>
82
- </table>
@@ -1,72 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
6
-
7
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
-
9
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
-
11
- var _react = _interopRequireDefault(require("react"));
12
-
13
- var _react2 = require("@storybook/react");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Upload = _interopRequireDefault(require("./Upload"));
18
-
19
- function callbackFunc() {
20
- return _callbackFunc.apply(this, arguments);
21
- }
22
-
23
- function _callbackFunc() {
24
- _callbackFunc = (0, _asyncToGenerator2["default"])(
25
- /*#__PURE__*/
26
- _regenerator["default"].mark(function _callee() {
27
- return _regenerator["default"].wrap(function _callee$(_context) {
28
- while (1) {
29
- switch (_context.prev = _context.next) {
30
- case 0:
31
- return _context.abrupt("return", new Promise(function (resolve) {
32
- return setTimeout(resolve, 1000);
33
- }));
34
-
35
- case 1:
36
- case "end":
37
- return _context.stop();
38
- }
39
- }
40
- }, _callee);
41
- }));
42
- return _callbackFunc.apply(this, arguments);
43
- }
44
-
45
- (0, _react2.storiesOf)("Form Components|Upload", module).add("Component", function () {
46
- return _react["default"].createElement("div", {
47
- style: {
48
- marginTop: "80px"
49
- }
50
- }, _react["default"].createElement(_Upload["default"], {
51
- callbackUpload: callbackFunc
52
- }));
53
- }, {
54
- notes: {
55
- markdown: _readme["default"]
56
- }
57
- });
58
-
59
- var knobProps = function knobProps() {
60
- return {};
61
- };
62
-
63
- (0, _react2.storiesOf)("Form Components|Upload", module).add("Knobs example", function () {
64
- var props = knobProps();
65
- return _react["default"].createElement(_Upload["default"], (0, _extends2["default"])({}, props, {
66
- callbackUpload: callbackFunc
67
- }));
68
- }, {
69
- notes: {
70
- markdown: _readme["default"]
71
- }
72
- });
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
4
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="74.5" height="74.5" viewBox="0 0 24 24" fill="#666666">
2
- <path fill="none" d="M0 0h24v24H0z"/>
3
- <path d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="43.5" height="43.5" viewBox="0 0 24 24">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,37 +0,0 @@
1
- # DXC Upload Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcUpload } from "@dxc-technology/halstack-react";
7
- ```
8
-
9
- ## Props
10
-
11
- <table>
12
- <tr style="background-color: grey">
13
- <td>Name</td>
14
- <td>Default</td>
15
- <td>Description</td>
16
- </tr>
17
- <tr>
18
- <td>onUpload: function</td>
19
- <td></td>
20
- <td>This function will be called when the user clicks the 'Upload' button for every file to be uploaded, we will send as a parameter the File object; apart from that this function should return one promise on which we should make 'then'(here we should show a Success alert) or 'catch' (in this case we would receive the error message as a string)</td>
21
- </tr>
22
-
23
- </table>
24
-
25
- ## Examples
26
-
27
- ```js
28
- import React from "react";
29
-
30
- import { DxcUpload } from "@dxc-technology/halstack-react";
31
-
32
- function App() {
33
- return <Upload callbackUpload={callbackFunc} />;
34
- }
35
-
36
- export default App;
37
- ```
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#50B50F">
2
- <path fill="none" d="M0 0h24v24H0z"/>
3
- <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
2
- <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
3
- <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
4
- <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
5
- </g>
6
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
2
- <g id="Group_2914" data-name="Group 2914" transform="translate(4677 3925)">
3
- <path id="Path_2822" data-name="Path 2822" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-4669 -3917)" fill="#dbf1c4"/>
4
- <path id="check-circle-regular" d="M256,8C119.033,8,8,119.033,8,256S119.033,504,256,504,504,392.967,504,256,392.967,8,256,8Zm0,48A200,200,0,1,1,56,256,199.893,199.893,0,0,1,256,56M396.2,186.267l-22.536-22.718a12,12,0,0,0-16.97-.068L215.346,303.7,155.554,243.42a12,12,0,0,0-16.97-.069l-22.719,22.536a12,12,0,0,0-.068,16.971l90.781,91.516a12,12,0,0,0,16.97.068l172.589-171.2a12,12,0,0,0,.067-16.971Z" transform="translate(-4685 -3933)" fill="#7ed321"/>
5
- </g>
6
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
2
- <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
3
- <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
4
- <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
5
- </g>
6
- </svg>
@@ -1,33 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcAccordion from "../src/accordion/Accordion";
4
-
5
- describe("Accordion component tests", () => {
6
- test("Accordion renders with correct text", () => {
7
- const onChange = jest.fn();
8
- const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} />);
9
-
10
- expect(getByText("Accordion")).toBeTruthy();
11
- });
12
-
13
- test("Calls correct function on click", () => {
14
- const onChange = jest.fn();
15
- const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} />);
16
-
17
- fireEvent.click(getByText("Accordion"));
18
- expect(onChange).toHaveBeenCalled();
19
- });
20
-
21
- test("Controlled accordion", () => {
22
- const onChange = jest.fn();
23
- const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} isExpanded={true} />);
24
-
25
- fireEvent.click(getByText("Accordion"));
26
- fireEvent.click(getByText("Accordion"));
27
- fireEvent.click(getByText("Accordion"));
28
- expect(onChange).toHaveBeenCalledTimes(3);
29
- expect(onChange.mock.calls[0][0]).toBe(false);
30
- expect(onChange.mock.calls[1][0]).toBe(false);
31
- expect(onChange.mock.calls[2][0]).toBe(false);
32
- });
33
- });