@dxc-technology/halstack-react 0.0.0-da224ae → 0.0.0-da4b2be

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 (329) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +2 -5
  3. package/HalstackContext.d.ts +1336 -0
  4. package/HalstackContext.js +335 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +118 -142
  7. package/accordion/Accordion.stories.tsx +395 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +9 -8
  10. package/accordion-group/AccordionGroup.d.ts +5 -4
  11. package/accordion-group/AccordionGroup.js +34 -76
  12. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  13. package/accordion-group/AccordionGroup.test.js +126 -0
  14. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  15. package/accordion-group/AccordionGroupAccordion.js +43 -0
  16. package/accordion-group/types.d.ts +15 -8
  17. package/alert/Alert.js +11 -12
  18. package/alert/Alert.stories.tsx +28 -0
  19. package/alert/Alert.test.js +92 -0
  20. package/alert/types.d.ts +1 -1
  21. package/badge/Badge.d.ts +4 -0
  22. package/badge/Badge.js +6 -4
  23. package/badge/types.d.ts +5 -0
  24. package/bleed/Bleed.d.ts +3 -0
  25. package/bleed/Bleed.js +51 -0
  26. package/bleed/Bleed.stories.tsx +342 -0
  27. package/bleed/types.d.ts +37 -0
  28. package/bleed/types.js +5 -0
  29. package/box/Box.d.ts +1 -1
  30. package/box/Box.js +23 -55
  31. package/box/Box.stories.tsx +38 -51
  32. package/box/Box.test.js +18 -0
  33. package/box/types.d.ts +0 -15
  34. package/bulleted-list/BulletedList.d.ts +7 -0
  35. package/bulleted-list/BulletedList.js +125 -0
  36. package/bulleted-list/BulletedList.stories.tsx +206 -0
  37. package/bulleted-list/types.d.ts +38 -0
  38. package/bulleted-list/types.js +5 -0
  39. package/button/Button.d.ts +1 -1
  40. package/button/Button.js +61 -85
  41. package/button/Button.stories.tsx +163 -14
  42. package/button/Button.test.js +35 -0
  43. package/button/types.d.ts +8 -12
  44. package/card/Card.js +35 -40
  45. package/card/Card.stories.tsx +200 -0
  46. package/card/Card.test.js +50 -0
  47. package/card/ice-cream.jpg +0 -0
  48. package/card/types.d.ts +5 -6
  49. package/checkbox/Checkbox.d.ts +2 -2
  50. package/checkbox/Checkbox.js +108 -111
  51. package/checkbox/Checkbox.stories.tsx +198 -130
  52. package/checkbox/Checkbox.test.js +155 -0
  53. package/checkbox/types.d.ts +13 -5
  54. package/chip/Chip.d.ts +4 -0
  55. package/chip/Chip.js +37 -118
  56. package/chip/Chip.stories.tsx +123 -30
  57. package/chip/Chip.test.js +54 -0
  58. package/chip/types.d.ts +45 -0
  59. package/chip/types.js +5 -0
  60. package/common/OpenSans.css +68 -80
  61. package/common/coreTokens.d.ts +146 -0
  62. package/common/coreTokens.js +167 -0
  63. package/common/utils.d.ts +1 -0
  64. package/common/utils.js +4 -4
  65. package/common/variables.d.ts +1482 -0
  66. package/common/variables.js +1100 -1316
  67. package/date-input/Calendar.d.ts +4 -0
  68. package/date-input/Calendar.js +258 -0
  69. package/date-input/DateInput.js +174 -266
  70. package/date-input/DateInput.stories.tsx +199 -33
  71. package/date-input/DateInput.test.js +835 -0
  72. package/date-input/DatePicker.d.ts +4 -0
  73. package/date-input/DatePicker.js +146 -0
  74. package/date-input/Icons.d.ts +6 -0
  75. package/date-input/Icons.js +75 -0
  76. package/date-input/YearPicker.d.ts +4 -0
  77. package/date-input/YearPicker.js +126 -0
  78. package/date-input/types.d.ts +67 -9
  79. package/dialog/Dialog.d.ts +1 -1
  80. package/dialog/Dialog.js +69 -103
  81. package/dialog/Dialog.stories.tsx +154 -171
  82. package/dialog/Dialog.test.js +369 -0
  83. package/dialog/types.d.ts +0 -12
  84. package/dropdown/Dropdown.d.ts +1 -1
  85. package/dropdown/Dropdown.js +248 -277
  86. package/dropdown/Dropdown.stories.tsx +438 -0
  87. package/dropdown/Dropdown.test.js +586 -0
  88. package/dropdown/DropdownMenu.d.ts +4 -0
  89. package/dropdown/DropdownMenu.js +74 -0
  90. package/dropdown/DropdownMenuItem.d.ts +4 -0
  91. package/dropdown/DropdownMenuItem.js +79 -0
  92. package/dropdown/types.d.ts +28 -17
  93. package/file-input/FileInput.d.ts +4 -0
  94. package/file-input/FileInput.js +183 -168
  95. package/file-input/FileInput.stories.tsx +618 -0
  96. package/file-input/FileInput.test.js +457 -0
  97. package/file-input/FileItem.d.ts +4 -0
  98. package/file-input/FileItem.js +50 -81
  99. package/file-input/types.d.ts +129 -0
  100. package/file-input/types.js +5 -0
  101. package/flex/Flex.d.ts +4 -0
  102. package/flex/Flex.js +71 -0
  103. package/flex/Flex.stories.tsx +112 -0
  104. package/flex/types.d.ts +97 -0
  105. package/flex/types.js +5 -0
  106. package/footer/Footer.d.ts +1 -1
  107. package/footer/Footer.js +34 -117
  108. package/footer/Footer.stories.tsx +228 -0
  109. package/footer/Footer.test.js +97 -0
  110. package/footer/Icons.d.ts +2 -0
  111. package/footer/Icons.js +4 -4
  112. package/footer/types.d.ts +23 -18
  113. package/grid/Grid.d.ts +7 -0
  114. package/grid/Grid.js +91 -0
  115. package/grid/Grid.stories.tsx +219 -0
  116. package/grid/types.d.ts +115 -0
  117. package/grid/types.js +5 -0
  118. package/header/Header.d.ts +3 -2
  119. package/header/Header.js +110 -131
  120. package/header/Header.stories.tsx +315 -0
  121. package/header/Header.test.js +79 -0
  122. package/header/Icons.d.ts +2 -0
  123. package/header/Icons.js +2 -2
  124. package/header/types.d.ts +5 -2
  125. package/heading/Heading.js +2 -2
  126. package/heading/Heading.stories.tsx +54 -0
  127. package/heading/Heading.test.js +186 -0
  128. package/inset/Inset.d.ts +3 -0
  129. package/inset/Inset.js +51 -0
  130. package/inset/Inset.stories.tsx +230 -0
  131. package/inset/types.d.ts +37 -0
  132. package/inset/types.js +5 -0
  133. package/layout/ApplicationLayout.d.ts +20 -0
  134. package/layout/ApplicationLayout.js +72 -136
  135. package/layout/ApplicationLayout.stories.tsx +162 -0
  136. package/layout/Icons.d.ts +5 -0
  137. package/layout/Icons.js +13 -2
  138. package/layout/SidenavContext.d.ts +5 -0
  139. package/layout/SidenavContext.js +19 -0
  140. package/layout/types.d.ts +41 -0
  141. package/layout/types.js +5 -0
  142. package/link/Link.d.ts +3 -2
  143. package/link/Link.js +64 -89
  144. package/link/Link.stories.tsx +199 -16
  145. package/link/Link.test.js +81 -0
  146. package/link/types.d.ts +7 -27
  147. package/main.d.ts +13 -12
  148. package/main.js +68 -54
  149. package/nav-tabs/NavTabs.d.ts +8 -0
  150. package/nav-tabs/NavTabs.js +122 -0
  151. package/nav-tabs/NavTabs.stories.tsx +274 -0
  152. package/nav-tabs/NavTabs.test.js +82 -0
  153. package/nav-tabs/Tab.d.ts +4 -0
  154. package/nav-tabs/Tab.js +146 -0
  155. package/nav-tabs/types.d.ts +52 -0
  156. package/nav-tabs/types.js +5 -0
  157. package/number-input/NumberInput.js +14 -24
  158. package/number-input/NumberInput.stories.tsx +5 -5
  159. package/number-input/NumberInput.test.js +542 -0
  160. package/number-input/NumberInputContext.d.ts +4 -0
  161. package/number-input/NumberInputContext.js +5 -2
  162. package/number-input/numberInputContextTypes.d.ts +19 -0
  163. package/number-input/numberInputContextTypes.js +5 -0
  164. package/number-input/types.d.ts +17 -10
  165. package/package.json +22 -23
  166. package/paginator/Icons.d.ts +5 -0
  167. package/paginator/Icons.js +16 -28
  168. package/paginator/Paginator.js +22 -57
  169. package/paginator/Paginator.stories.tsx +24 -0
  170. package/paginator/Paginator.test.js +318 -0
  171. package/paragraph/Paragraph.d.ts +5 -0
  172. package/paragraph/Paragraph.js +38 -0
  173. package/paragraph/Paragraph.stories.tsx +44 -0
  174. package/password-input/PasswordInput.js +23 -19
  175. package/password-input/PasswordInput.stories.tsx +3 -3
  176. package/password-input/PasswordInput.test.js +181 -0
  177. package/password-input/types.d.ts +29 -19
  178. package/progress-bar/ProgressBar.js +63 -57
  179. package/progress-bar/ProgressBar.stories.jsx +47 -12
  180. package/progress-bar/ProgressBar.test.js +110 -0
  181. package/quick-nav/QuickNav.d.ts +4 -0
  182. package/quick-nav/QuickNav.js +117 -0
  183. package/quick-nav/QuickNav.stories.tsx +356 -0
  184. package/quick-nav/types.d.ts +21 -0
  185. package/quick-nav/types.js +5 -0
  186. package/radio-group/Radio.d.ts +4 -0
  187. package/radio-group/Radio.js +156 -0
  188. package/radio-group/RadioGroup.d.ts +4 -0
  189. package/radio-group/RadioGroup.js +281 -0
  190. package/radio-group/RadioGroup.stories.tsx +214 -0
  191. package/radio-group/RadioGroup.test.js +722 -0
  192. package/radio-group/types.d.ts +114 -0
  193. package/radio-group/types.js +5 -0
  194. package/resultsetTable/Icons.d.ts +7 -0
  195. package/resultsetTable/Icons.js +51 -0
  196. package/resultsetTable/ResultsetTable.d.ts +4 -0
  197. package/resultsetTable/ResultsetTable.js +54 -133
  198. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  199. package/resultsetTable/ResultsetTable.test.js +325 -0
  200. package/resultsetTable/types.d.ts +67 -0
  201. package/resultsetTable/types.js +5 -0
  202. package/select/Icons.d.ts +10 -0
  203. package/select/Icons.js +93 -0
  204. package/select/Listbox.d.ts +4 -0
  205. package/select/Listbox.js +169 -0
  206. package/select/Option.d.ts +4 -0
  207. package/select/Option.js +97 -0
  208. package/select/Select.d.ts +4 -0
  209. package/select/Select.js +202 -401
  210. package/select/Select.stories.tsx +600 -201
  211. package/select/Select.test.js +2228 -0
  212. package/select/types.d.ts +210 -0
  213. package/select/types.js +5 -0
  214. package/sidenav/Icons.d.ts +7 -0
  215. package/sidenav/Icons.js +51 -0
  216. package/sidenav/Sidenav.d.ts +6 -5
  217. package/sidenav/Sidenav.js +148 -46
  218. package/sidenav/Sidenav.stories.tsx +282 -0
  219. package/sidenav/Sidenav.test.js +44 -0
  220. package/sidenav/types.d.ts +52 -26
  221. package/slider/Slider.d.ts +2 -2
  222. package/slider/Slider.js +124 -99
  223. package/slider/Slider.stories.tsx +72 -9
  224. package/slider/Slider.test.js +250 -0
  225. package/slider/types.d.ts +8 -0
  226. package/spinner/Spinner.js +20 -26
  227. package/spinner/Spinner.stories.jsx +53 -26
  228. package/spinner/Spinner.test.js +64 -0
  229. package/switch/Switch.d.ts +2 -2
  230. package/switch/Switch.js +153 -70
  231. package/switch/Switch.stories.tsx +54 -43
  232. package/switch/Switch.test.js +225 -0
  233. package/switch/types.d.ts +10 -2
  234. package/table/Table.js +6 -6
  235. package/table/Table.stories.jsx +81 -1
  236. package/table/Table.test.js +26 -0
  237. package/tabs/Tab.d.ts +4 -0
  238. package/tabs/Tab.js +132 -0
  239. package/tabs/Tabs.d.ts +1 -1
  240. package/tabs/Tabs.js +362 -112
  241. package/tabs/Tabs.stories.tsx +226 -0
  242. package/tabs/Tabs.test.js +350 -0
  243. package/tabs/types.d.ts +39 -18
  244. package/tag/Tag.d.ts +1 -1
  245. package/tag/Tag.js +25 -37
  246. package/tag/Tag.stories.tsx +38 -28
  247. package/tag/Tag.test.js +60 -0
  248. package/tag/types.d.ts +23 -14
  249. package/text-input/Icons.d.ts +8 -0
  250. package/text-input/Icons.js +60 -0
  251. package/text-input/Suggestion.d.ts +4 -0
  252. package/text-input/Suggestion.js +84 -0
  253. package/text-input/Suggestions.d.ts +4 -0
  254. package/text-input/Suggestions.js +134 -0
  255. package/text-input/TextInput.d.ts +4 -0
  256. package/text-input/TextInput.js +236 -388
  257. package/text-input/TextInput.stories.tsx +569 -0
  258. package/text-input/TextInput.test.js +1723 -0
  259. package/text-input/types.d.ts +197 -0
  260. package/text-input/types.js +5 -0
  261. package/textarea/Textarea.d.ts +4 -0
  262. package/textarea/Textarea.js +41 -82
  263. package/textarea/Textarea.stories.jsx +96 -15
  264. package/textarea/Textarea.test.js +435 -0
  265. package/textarea/types.d.ts +137 -0
  266. package/textarea/types.js +5 -0
  267. package/toggle-group/ToggleGroup.d.ts +4 -0
  268. package/toggle-group/ToggleGroup.js +24 -49
  269. package/toggle-group/ToggleGroup.stories.tsx +69 -32
  270. package/toggle-group/ToggleGroup.test.js +156 -0
  271. package/toggle-group/types.d.ts +105 -0
  272. package/toggle-group/types.js +5 -0
  273. package/typography/Typography.d.ts +4 -0
  274. package/typography/Typography.js +32 -0
  275. package/typography/Typography.stories.tsx +198 -0
  276. package/typography/types.d.ts +18 -0
  277. package/typography/types.js +5 -0
  278. package/useTheme.d.ts +1235 -0
  279. package/useTheme.js +3 -3
  280. package/useTranslatedLabels.d.ts +85 -0
  281. package/useTranslatedLabels.js +20 -0
  282. package/utils/BaseTypography.d.ts +21 -0
  283. package/utils/BaseTypography.js +108 -0
  284. package/utils/FocusLock.d.ts +13 -0
  285. package/utils/FocusLock.js +138 -0
  286. package/wizard/Wizard.d.ts +1 -1
  287. package/wizard/Wizard.js +113 -59
  288. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +48 -19
  289. package/wizard/Wizard.test.js +141 -0
  290. package/wizard/types.d.ts +10 -10
  291. package/ThemeContext.js +0 -246
  292. package/V3Select/V3Select.js +0 -455
  293. package/V3Select/index.d.ts +0 -27
  294. package/V3Textarea/V3Textarea.js +0 -260
  295. package/V3Textarea/index.d.ts +0 -27
  296. package/chip/index.d.ts +0 -22
  297. package/common/RequiredComponent.js +0 -32
  298. package/date/Date.js +0 -373
  299. package/date/index.d.ts +0 -27
  300. package/file-input/index.d.ts +0 -81
  301. package/footer/Footer.stories.jsx +0 -151
  302. package/input-text/Icons.js +0 -22
  303. package/input-text/InputText.js +0 -611
  304. package/input-text/index.d.ts +0 -36
  305. package/radio/Radio.d.ts +0 -4
  306. package/radio/Radio.js +0 -174
  307. package/radio/Radio.stories.tsx +0 -192
  308. package/radio/types.d.ts +0 -54
  309. package/resultsetTable/index.d.ts +0 -19
  310. package/select/index.d.ts +0 -131
  311. package/text-input/index.d.ts +0 -135
  312. package/textarea/index.d.ts +0 -117
  313. package/toggle/Toggle.js +0 -186
  314. package/toggle/index.d.ts +0 -21
  315. package/toggle-group/index.d.ts +0 -21
  316. package/upload/Upload.js +0 -201
  317. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  318. package/upload/buttons-upload/Icons.js +0 -40
  319. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  320. package/upload/dragAndDropArea/Icons.js +0 -39
  321. package/upload/file-upload/FileToUpload.js +0 -115
  322. package/upload/file-upload/Icons.js +0 -66
  323. package/upload/files-upload/FilesToUpload.js +0 -109
  324. package/upload/index.d.ts +0 -15
  325. package/upload/transaction/Icons.js +0 -160
  326. package/upload/transaction/Transaction.js +0 -104
  327. package/upload/transactions/Transactions.js +0 -94
  328. package/wizard/Icons.js +0 -65
  329. /package/{radio → badge}/types.js +0 -0
package/date/Date.js DELETED
@@ -1,373 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _pickers = require("@material-ui/pickers");
23
-
24
- var _core = require("@material-ui/core");
25
-
26
- var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
27
-
28
- var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
29
-
30
- var _moment = _interopRequireDefault(require("moment"));
31
-
32
- var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
33
-
34
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
35
-
36
- var _propTypes = _interopRequireDefault(require("prop-types"));
37
-
38
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
39
-
40
- var _variables = require("../common/variables.js");
41
-
42
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
-
44
- var _templateObject, _DxcDate$propTypes;
45
-
46
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
47
-
48
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
49
-
50
- var DxcDate = function DxcDate(_ref) {
51
- var value = _ref.value,
52
- _ref$format = _ref.format,
53
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
54
- _ref$label = _ref.label,
55
- label = _ref$label === void 0 ? "" : _ref$label,
56
- name = _ref.name,
57
- _ref$disabled = _ref.disabled,
58
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
59
- _ref$required = _ref.required,
60
- required = _ref$required === void 0 ? false : _ref$required,
61
- _ref$assistiveText = _ref.assistiveText,
62
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
63
- _ref$invalid = _ref.invalid,
64
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
65
- onChange = _ref.onChange,
66
- _ref$placeholder = _ref.placeholder,
67
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
68
- _ref$onBlur = _ref.onBlur,
69
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
70
- margin = _ref.margin,
71
- _ref$size = _ref.size,
72
- size = _ref$size === void 0 ? "medium" : _ref$size,
73
- _ref$tabIndex = _ref.tabIndex,
74
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
75
-
76
- var _useState = (0, _react.useState)(""),
77
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
78
- innerValue = _useState2[0],
79
- setInnerValue = _useState2[1];
80
-
81
- var _useState3 = (0, _react.useState)(false),
82
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
83
- isOpen = _useState4[0],
84
- setIsOpen = _useState4[1];
85
-
86
- var _useState5 = (0, _react.useState)(null),
87
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
88
- anchorEl = _useState6[0],
89
- setAnchorEl = _useState6[1];
90
-
91
- var colorsTheme = (0, _useTheme["default"])();
92
-
93
- var handleMenuItemClick = function handleMenuItemClick(date) {
94
- var stringValue = (0, _moment["default"])(date).format(format.toUpperCase());
95
- if (value == null) setInnerValue(stringValue);
96
- if (typeof onChange === "function") onChange({
97
- stringValue: stringValue,
98
- dateValue: date && date.toJSON() ? date : null
99
- });
100
- };
101
-
102
- var onChangeInput = function onChangeInput(string) {
103
- var momentDate = (0, _moment["default"])(string, format.toUpperCase(), true);
104
-
105
- if (value == null) {
106
- setInnerValue(string);
107
- }
108
-
109
- if (typeof onChange === "function") {
110
- onChange({
111
- stringValue: string,
112
- dateValue: momentDate.isValid() ? momentDate._d : null
113
- });
114
- }
115
- };
116
-
117
- var handlerInputBlur = function handlerInputBlur(inputString) {
118
- setInnerValue(inputString);
119
- if (onBlur) onBlur(inputString);
120
- };
121
-
122
- var getValueForPicker = function getValueForPicker() {
123
- return (0, _moment["default"])(value == null ? innerValue : value, format.toUpperCase(), true).format();
124
- };
125
-
126
- var openCalendar = function openCalendar(event) {
127
- if (event) {
128
- setIsOpen(!isOpen);
129
- setAnchorEl(event.currentTarget);
130
- }
131
- };
132
-
133
- var handlerPickerClose = function handlerPickerClose() {
134
- setIsOpen(false);
135
- handlerInputBlur(value == null ? innerValue : value);
136
- };
137
-
138
- var calendarSVG = function calendarSVG() {
139
- return /*#__PURE__*/_react["default"].createElement("svg", {
140
- xmlns: "http://www.w3.org/2000/svg",
141
- height: "24",
142
- viewBox: "0 0 24 24",
143
- width: "24",
144
- fill: "currentColor"
145
- }, /*#__PURE__*/_react["default"].createElement("path", {
146
- "data-testid": "calendarIcon",
147
- d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
148
- }), /*#__PURE__*/_react["default"].createElement("path", {
149
- d: "M0 0h24v24H0z",
150
- fill: "none"
151
- }));
152
- };
153
-
154
- var dateTheme = (0, _core.createMuiTheme)({
155
- overrides: {
156
- MuiTypography: {
157
- root: {
158
- fontFamily: "".concat(colorsTheme.date.fontFamily, " !important")
159
- }
160
- },
161
- MuiPickersYearSelection: {
162
- container: {
163
- color: colorsTheme.date.pickerYearColor,
164
- "&::-webkit-scrollbar": {
165
- width: "3px"
166
- },
167
- "&::-webkit-scrollbar-track": {
168
- backgroundColor: "#D9D9D9",
169
- borderRadius: "3px"
170
- },
171
- "&::-webkit-scrollbar-thumb": {
172
- backgroundColor: "#666666",
173
- borderRadius: "3px"
174
- }
175
- }
176
- },
177
- MuiPickersToolbar: {
178
- toolbar: {
179
- backgroundColor: colorsTheme.date.pickerBackgroundColor,
180
- color: colorsTheme.date.pickerFontColor
181
- }
182
- },
183
- MuiIconButton: {
184
- root: {
185
- height: "36px",
186
- width: "36px",
187
- padding: "0px"
188
- }
189
- },
190
- MuiTouchRipple: {
191
- child: {
192
- opacity: "0"
193
- }
194
- },
195
- MuiButtonBase: {
196
- root: {
197
- "&:focus": {
198
- outline: colorsTheme.date.focusColor + " solid 2px"
199
- }
200
- }
201
- },
202
- MuiPickersBasePicker: {
203
- pickerView: {
204
- minWidth: "unset",
205
- maxWidth: "unset",
206
- minHeight: "unset",
207
- padding: "0px 10px",
208
- height: colorsTheme.date.pickerHeight,
209
- width: colorsTheme.date.pickerWidth,
210
- backgroundColor: colorsTheme.date.pickerBackgroundColor,
211
- fontFamily: colorsTheme.date.fontFamily
212
- }
213
- },
214
- MuiPickersToolbarText: {
215
- toolbarTxt: {
216
- color: colorsTheme.date.pickerActualDateColor,
217
- fontFamily: colorsTheme.date.fontFamily,
218
- fontSize: "2rem"
219
- },
220
- toolbarBtnSelected: {
221
- color: colorsTheme.date.pickerActualDateColor
222
- }
223
- },
224
- MuiPickersCalendarHeader: {
225
- transitionContainer: {
226
- color: colorsTheme.date.pickerMonthColor
227
- },
228
- dayLabel: {
229
- color: colorsTheme.date.pickerWeekLabelColor,
230
- fontFamily: colorsTheme.date.fontFamily
231
- },
232
- switchHeader: {
233
- backgroundColor: colorsTheme.white,
234
- color: colorsTheme.date.pickerFontColor
235
- },
236
- iconButton: {
237
- backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows,
238
- "&:hover": {
239
- backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows
240
- }
241
- }
242
- },
243
- MuiPickersCalendar: {
244
- week: {
245
- marginBottom: "2px"
246
- }
247
- },
248
- MuiPickersDay: {
249
- current: {
250
- border: colorsTheme.date.pickerActualDateColor + " 2px solid",
251
- color: colorsTheme.date.pickerFontColor
252
- },
253
- day: {
254
- fontFamily: colorsTheme.date.fontFamily,
255
- color: colorsTheme.date.pickerFontColor,
256
- "&:hover": {
257
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor,
258
- color: colorsTheme.date.pickerHoverDateFontColor
259
- }
260
- },
261
- daySelected: {
262
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
263
- color: colorsTheme.date.pickerSelectedDateColor,
264
- "&:hover": {
265
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
266
- color: colorsTheme.date.pickerSelectedDateColor,
267
- opacity: "1"
268
- }
269
- }
270
- },
271
- MuiPickersYear: {
272
- yearSelected: {
273
- color: colorsTheme.date.pickerSelectedDateColor,
274
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
275
- margin: "0px 100px",
276
- borderRadius: "20px"
277
- },
278
- root: {
279
- "&:focus": {
280
- color: colorsTheme.date.pickerHoverDateFontColor,
281
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor
282
- }
283
- }
284
- },
285
- MuiPickersModal: {
286
- dialogAction: {
287
- color: "pink"
288
- }
289
- }
290
- }
291
- });
292
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
293
- theme: colorsTheme
294
- }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
295
- theme: dateTheme
296
- }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
297
- utils: _dateFns["default"]
298
- }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
299
- margin: margin
300
- }, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
301
- label: label,
302
- name: name,
303
- suffixIcon: calendarSVG,
304
- required: required,
305
- invalid: invalid,
306
- disabled: disabled,
307
- assistiveText: assistiveText,
308
- margin: margin,
309
- size: size,
310
- placeholder: placeholder ? format.toUpperCase() : null,
311
- value: value == null ? innerValue : value,
312
- onClickSuffix: openCalendar,
313
- onChange: onChangeInput,
314
- onBlur: onBlur && handlerInputBlur || null,
315
- tabIndex: tabIndex
316
- }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
317
- open: isOpen,
318
- anchorEl: anchorEl,
319
- anchorOrigin: {
320
- vertical: "bottom",
321
- horizontal: "left"
322
- },
323
- transformOrigin: {
324
- vertical: "top",
325
- horizontal: "center"
326
- },
327
- PaperProps: {
328
- style: {
329
- marginTop: "10px"
330
- }
331
- }
332
- }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
333
- onClickAway: handlerPickerClose
334
- }, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
335
- variant: "static",
336
- value: getValueForPicker(),
337
- onChange: function onChange(date) {
338
- return handleMenuItemClick(date);
339
- },
340
- format: format,
341
- disabled: disabled
342
- }))))))));
343
- };
344
-
345
- var sizes = {
346
- medium: "240px",
347
- large: "480px",
348
- fillParent: "100%"
349
- };
350
-
351
- var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
352
-
353
- DxcDate.propTypes = (_DxcDate$propTypes = {
354
- value: _propTypes["default"].string,
355
- format: _propTypes["default"].string,
356
- label: _propTypes["default"].string,
357
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
358
- name: _propTypes["default"].string,
359
- disabled: _propTypes["default"].bool,
360
- required: _propTypes["default"].bool,
361
- placeholder: _propTypes["default"].bool,
362
- assistiveText: _propTypes["default"].string,
363
- invalid: _propTypes["default"].bool,
364
- onChange: _propTypes["default"].func,
365
- onBlur: _propTypes["default"].func
366
- }, (0, _defineProperty2["default"])(_DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
367
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
368
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
369
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
370
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
371
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _DxcDate$propTypes);
372
- var _default = DxcDate;
373
- exports["default"] = _default;
package/date/index.d.ts DELETED
@@ -1,27 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- value?: string;
12
- format?: string;
13
- label?: string;
14
- name?: string,
15
- disabled?: boolean;
16
- required?: boolean;
17
- assistiveText?: string;
18
- invalid?: boolean;
19
- onChange?: void;
20
- placeholder?: string;
21
- onBlur?: void;
22
- margin?: Space | Margin;
23
- size?: Size;
24
- tabIndex?: number;
25
- };
26
-
27
- export default function DxcDate(props: Props): JSX.Element;
@@ -1,81 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- type FileData = {
10
- error?: string;
11
- file?: File;
12
- preview?: string;
13
- };
14
-
15
- type Props = {
16
- /**
17
- * Name attribute of the file input element.
18
- */
19
- name?: string;
20
- /**
21
- * Text to be placed above the file input.
22
- */
23
- label?: string;
24
- /**
25
- * Uses one of the available file input modes:
26
- * 'file': Files are selected by clicking the button and selecting it through the file explorer.
27
- * 'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
28
- * 'dropzone': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
29
- * The drag and drop area of this mode is bigger than the one of the filedrop mode.
30
- */
31
- mode?: "file" | "filedrop" | "dropzone";
32
- /**
33
- * Helper text to be placed above the file input.
34
- */
35
- helperText?: string;
36
- /**
37
- * Defines the file types accepted by the component. It is not possible to select a file with a non valid type.
38
- */
39
- accept?: string;
40
- /**
41
- * An array of FileData representing the selected files.
42
- */
43
- value?: FileData[];
44
- /**
45
- * Minimum file size allowed (in bytes). If the file size does not comply the minSize, an error will be passed to the FileData.
46
- */
47
- minSize?: number;
48
- /**
49
- * Maximum file size allowed (in bytes). If the file size does not comply the maxSize, an error will be passed to the FileData.
50
- */
51
- maxSize?: number;
52
- /**
53
- * If true and if the file is an image, a preview of it will be shown. If it is not an image, an icon refering to the file's type will be shown.
54
- * If mode is not multiple and there is one file already selected, the file will be replaced by the last selected one.
55
- */
56
- showPreview?: boolean;
57
- /**
58
- * If true, more than one file can be selected. If false, only one file can be selected.
59
- */
60
- multiple?: boolean;
61
- /**
62
- * If true, the component will be disabled.
63
- */
64
- disabled?: boolean;
65
- /**
66
- * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
67
- * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
68
- */
69
- callbackFile?: (files: FileData[]) => void;
70
- /**
71
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
72
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
73
- */
74
- margin?: Space | Margin;
75
- /**
76
- * Value of the tabindex attribute.
77
- */
78
- tabIndex?: number;
79
- };
80
-
81
- export default function DxcFileInput(props: Props): JSX.Element;
@@ -1,151 +0,0 @@
1
- import React from "react";
2
- import DxcFooter from "./Footer";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- const social = [
7
- {
8
- href: "https://www.linkedin.com/company/dxctechnology",
9
- logo: (
10
- <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
11
- <g>
12
- <path
13
- d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
14
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
15
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
16
- C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332
17
- c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41
18
- c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708
19
- c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92
20
- c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991
21
- c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974
22
- c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64
23
- H370.873z"
24
- />
25
- </g>
26
- </svg>
27
- ),
28
- },
29
- {
30
- href: "https://twitter.com/dxctechnology",
31
- logo: (
32
- <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
33
- <g>
34
- <path
35
- d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
36
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
37
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
38
- C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
39
- c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
40
- c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
41
- c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
42
- c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
43
- c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
44
- c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
45
- c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
46
- c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
47
- c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
48
- C357.458,149.793,347.462,160.166,335.471,168.735z"
49
- />
50
- </g>
51
- </svg>
52
- ),
53
- },
54
- {
55
- href: "https://www.facebook.com/DXCTechnology/",
56
- logo: (
57
- <svg
58
- version="1.1"
59
- id="Capa_1"
60
- x="0px"
61
- y="0px"
62
- viewBox="0 0 438.536 438.536"
63
- fill="currentColor"
64
- width="1000px"
65
- height="500px"
66
- >
67
- <g>
68
- <path
69
- d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
70
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
71
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
72
- C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
73
- c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
74
- c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
75
- />
76
- </g>
77
- </svg>
78
- ),
79
- },
80
- ];
81
-
82
- const bottom = [
83
- {
84
- href: "https://www.linkedin.com/company/dxctechnology",
85
- text: "Linkedin",
86
- },
87
- {
88
- href: "https://twitter.com/dxctechnology",
89
- text: "Twitter",
90
- },
91
- {
92
- href: "https://www.facebook.com/DXCTechnology/",
93
- text: "Facebook",
94
- },
95
- ];
96
-
97
- export default {
98
- title: "Footer",
99
- component: DxcFooter,
100
- };
101
-
102
- export const Chromatic = () => (
103
- <>
104
- <ExampleContainer>
105
- <Title title="Default" theme="light" level={4} />
106
- <DxcFooter />
107
- </ExampleContainer>
108
- <ExampleContainer>
109
- <Title title="With children, copyright, bottom links and social links" theme="light" level={4} />
110
- <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
111
- <div>
112
- <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
113
- </div>
114
- </DxcFooter>
115
- </ExampleContainer>
116
- <Title title="Margins" theme="light" level={2} />
117
- <ExampleContainer>
118
- <Title title="Xxsmall margin" theme="light" level={4} />
119
- <DxcFooter margin="xxsmall"></DxcFooter>
120
- <Title title="Xsmall margin" theme="light" level={4} />
121
- <DxcFooter margin="xsmall"></DxcFooter>
122
- <Title title="Small margin" theme="light" level={4} />
123
- <DxcFooter margin="small"></DxcFooter>
124
- <Title title="Medium margin" theme="light" level={4} />
125
- <DxcFooter margin="medium"></DxcFooter>
126
- <Title title="Large margin" theme="light" level={4} />
127
- <DxcFooter margin="large"></DxcFooter>
128
- <Title title="Xlarge margin" theme="light" level={4} />
129
- <DxcFooter margin="xlarge"></DxcFooter>
130
- <Title title="Xxlarge margin" theme="light" level={4} />
131
- <DxcFooter margin="xxlarge"></DxcFooter>
132
- </ExampleContainer>
133
- <Title title="Padding" theme="light" level={2} />
134
- <ExampleContainer>
135
- <Title title="Xxsmall padding" theme="light" level={4} />
136
- <DxcFooter padding="xxsmall"></DxcFooter>
137
- <Title title="Xsmall padding" theme="light" level={4} />
138
- <DxcFooter padding="xsmall"></DxcFooter>
139
- <Title title="Small padding" theme="light" level={4} />
140
- <DxcFooter padding="small"></DxcFooter>
141
- <Title title="Medium padding" theme="light" level={4} />
142
- <DxcFooter padding="medium"></DxcFooter>
143
- <Title title="Large padding" theme="light" level={4} />
144
- <DxcFooter padding="large"></DxcFooter>
145
- <Title title="Xlarge padding" theme="light" level={4} />
146
- <DxcFooter padding="xlarge"></DxcFooter>
147
- <Title title="Xxlarge padding" theme="light" level={4} />
148
- <DxcFooter padding="xxlarge"></DxcFooter>
149
- </ExampleContainer>
150
- </>
151
- );
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _default = /*#__PURE__*/_react["default"].createElement("svg", {
13
- xmlns: "http://www.w3.org/2000/svg",
14
- height: "24px",
15
- viewBox: "0 0 24 24",
16
- width: "24px",
17
- fill: "currentColor"
18
- }, /*#__PURE__*/_react["default"].createElement("path", {
19
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
20
- }));
21
-
22
- exports["default"] = _default;