@dxc-technology/halstack-react 0.0.0-375a8b0 → 0.0.0-38267fd

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 (298) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +343 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +119 -138
  7. package/accordion/Accordion.stories.tsx +395 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +12 -11
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +16 -37
  12. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  13. package/accordion-group/AccordionGroup.test.js +126 -0
  14. package/accordion-group/types.d.ts +17 -10
  15. package/alert/Alert.js +7 -4
  16. package/alert/Alert.stories.tsx +28 -0
  17. package/alert/Alert.test.js +92 -0
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +6 -4
  20. package/badge/types.d.ts +5 -0
  21. package/bleed/Bleed.d.ts +3 -0
  22. package/bleed/Bleed.js +51 -0
  23. package/bleed/Bleed.stories.tsx +341 -0
  24. package/bleed/types.d.ts +37 -0
  25. package/bleed/types.js +5 -0
  26. package/box/Box.js +25 -37
  27. package/box/Box.stories.tsx +15 -0
  28. package/box/Box.test.js +18 -0
  29. package/box/types.d.ts +1 -0
  30. package/bulleted-list/BulletedList.d.ts +7 -0
  31. package/bulleted-list/BulletedList.js +123 -0
  32. package/bulleted-list/BulletedList.stories.tsx +200 -0
  33. package/bulleted-list/types.d.ts +11 -0
  34. package/bulleted-list/types.js +5 -0
  35. package/button/Button.d.ts +1 -1
  36. package/button/Button.js +59 -82
  37. package/button/Button.stories.tsx +163 -14
  38. package/button/Button.test.js +35 -0
  39. package/button/types.d.ts +10 -14
  40. package/card/Card.js +25 -28
  41. package/card/Card.stories.tsx +1 -1
  42. package/card/Card.test.js +50 -0
  43. package/card/types.d.ts +1 -0
  44. package/checkbox/Checkbox.d.ts +2 -2
  45. package/checkbox/Checkbox.js +108 -111
  46. package/checkbox/Checkbox.stories.tsx +198 -130
  47. package/checkbox/Checkbox.test.js +155 -0
  48. package/checkbox/types.d.ts +14 -6
  49. package/chip/Chip.d.ts +4 -0
  50. package/chip/Chip.js +22 -88
  51. package/chip/Chip.stories.tsx +98 -13
  52. package/chip/Chip.test.js +56 -0
  53. package/chip/types.d.ts +45 -0
  54. package/chip/types.js +5 -0
  55. package/common/variables.js +529 -602
  56. package/date-input/Calendar.d.ts +4 -0
  57. package/date-input/Calendar.js +258 -0
  58. package/date-input/DateInput.js +174 -266
  59. package/date-input/DateInput.stories.tsx +199 -33
  60. package/date-input/DateInput.test.js +835 -0
  61. package/date-input/DatePicker.d.ts +4 -0
  62. package/date-input/DatePicker.js +146 -0
  63. package/date-input/Icons.d.ts +6 -0
  64. package/date-input/Icons.js +75 -0
  65. package/date-input/YearPicker.d.ts +4 -0
  66. package/date-input/YearPicker.js +126 -0
  67. package/date-input/types.d.ts +67 -9
  68. package/dialog/Dialog.js +79 -95
  69. package/dialog/Dialog.stories.tsx +230 -123
  70. package/dialog/Dialog.test.js +369 -0
  71. package/dialog/types.d.ts +3 -2
  72. package/dropdown/Dropdown.d.ts +1 -1
  73. package/dropdown/Dropdown.js +248 -277
  74. package/dropdown/Dropdown.stories.tsx +438 -0
  75. package/dropdown/Dropdown.test.js +585 -0
  76. package/dropdown/DropdownMenu.d.ts +4 -0
  77. package/dropdown/DropdownMenu.js +70 -0
  78. package/dropdown/DropdownMenuItem.d.ts +4 -0
  79. package/dropdown/DropdownMenuItem.js +81 -0
  80. package/dropdown/types.d.ts +30 -19
  81. package/file-input/FileInput.d.ts +2 -2
  82. package/file-input/FileInput.js +179 -142
  83. package/file-input/FileInput.stories.tsx +618 -0
  84. package/file-input/FileInput.test.js +457 -0
  85. package/file-input/FileItem.d.ts +4 -14
  86. package/file-input/FileItem.js +47 -67
  87. package/file-input/types.d.ts +49 -7
  88. package/flex/Flex.d.ts +4 -0
  89. package/flex/Flex.js +69 -0
  90. package/flex/Flex.stories.tsx +103 -0
  91. package/flex/types.d.ts +32 -0
  92. package/flex/types.js +5 -0
  93. package/footer/Footer.d.ts +1 -1
  94. package/footer/Footer.js +32 -113
  95. package/footer/Footer.stories.tsx +228 -0
  96. package/footer/Footer.test.js +109 -0
  97. package/footer/Icons.d.ts +2 -0
  98. package/footer/Icons.js +4 -4
  99. package/footer/types.d.ts +22 -17
  100. package/header/Header.js +109 -130
  101. package/header/Header.stories.tsx +189 -36
  102. package/header/Header.test.js +79 -0
  103. package/header/Icons.d.ts +2 -0
  104. package/header/Icons.js +2 -2
  105. package/header/types.d.ts +3 -2
  106. package/heading/Heading.js +1 -1
  107. package/heading/Heading.stories.tsx +3 -2
  108. package/heading/Heading.test.js +186 -0
  109. package/inset/Inset.d.ts +3 -0
  110. package/inset/Inset.js +51 -0
  111. package/inset/Inset.stories.tsx +229 -0
  112. package/inset/types.d.ts +37 -0
  113. package/inset/types.js +5 -0
  114. package/layout/ApplicationLayout.d.ts +20 -0
  115. package/layout/ApplicationLayout.js +71 -135
  116. package/layout/ApplicationLayout.stories.tsx +162 -0
  117. package/layout/Icons.d.ts +5 -0
  118. package/layout/Icons.js +13 -2
  119. package/layout/SidenavContext.d.ts +5 -0
  120. package/layout/SidenavContext.js +19 -0
  121. package/layout/types.d.ts +42 -0
  122. package/layout/types.js +5 -0
  123. package/link/Link.d.ts +3 -2
  124. package/link/Link.js +62 -87
  125. package/link/Link.stories.tsx +159 -52
  126. package/link/Link.test.js +83 -0
  127. package/link/types.d.ts +9 -29
  128. package/main.d.ts +12 -12
  129. package/main.js +64 -58
  130. package/nav-tabs/NavTabs.d.ts +8 -0
  131. package/nav-tabs/NavTabs.js +125 -0
  132. package/nav-tabs/NavTabs.stories.tsx +260 -0
  133. package/nav-tabs/NavTabs.test.js +82 -0
  134. package/nav-tabs/Tab.d.ts +4 -0
  135. package/nav-tabs/Tab.js +150 -0
  136. package/nav-tabs/types.d.ts +53 -0
  137. package/nav-tabs/types.js +5 -0
  138. package/number-input/NumberInput.js +14 -24
  139. package/number-input/NumberInput.stories.tsx +5 -5
  140. package/number-input/NumberInput.test.js +542 -0
  141. package/number-input/types.d.ts +17 -10
  142. package/package.json +21 -22
  143. package/paginator/Icons.d.ts +5 -0
  144. package/paginator/Icons.js +16 -28
  145. package/paginator/Paginator.js +21 -54
  146. package/paginator/Paginator.stories.tsx +24 -0
  147. package/paginator/Paginator.test.js +315 -0
  148. package/paragraph/Paragraph.d.ts +6 -0
  149. package/paragraph/Paragraph.js +38 -0
  150. package/paragraph/Paragraph.stories.tsx +44 -0
  151. package/password-input/PasswordInput.js +23 -19
  152. package/password-input/PasswordInput.stories.tsx +3 -3
  153. package/password-input/PasswordInput.test.js +181 -0
  154. package/password-input/types.d.ts +26 -21
  155. package/progress-bar/ProgressBar.d.ts +2 -2
  156. package/progress-bar/ProgressBar.js +62 -56
  157. package/progress-bar/ProgressBar.stories.jsx +47 -12
  158. package/progress-bar/ProgressBar.test.js +110 -0
  159. package/progress-bar/types.d.ts +3 -4
  160. package/quick-nav/QuickNav.d.ts +4 -0
  161. package/quick-nav/QuickNav.js +117 -0
  162. package/quick-nav/QuickNav.stories.tsx +356 -0
  163. package/quick-nav/types.d.ts +21 -0
  164. package/quick-nav/types.js +5 -0
  165. package/radio-group/Radio.d.ts +4 -0
  166. package/radio-group/Radio.js +156 -0
  167. package/radio-group/RadioGroup.d.ts +4 -0
  168. package/radio-group/RadioGroup.js +283 -0
  169. package/radio-group/RadioGroup.stories.tsx +214 -0
  170. package/radio-group/RadioGroup.test.js +722 -0
  171. package/radio-group/types.d.ts +114 -0
  172. package/radio-group/types.js +5 -0
  173. package/resultsetTable/Icons.d.ts +7 -0
  174. package/resultsetTable/Icons.js +51 -0
  175. package/resultsetTable/ResultsetTable.d.ts +1 -1
  176. package/resultsetTable/ResultsetTable.js +53 -107
  177. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  178. package/resultsetTable/ResultsetTable.test.js +325 -0
  179. package/resultsetTable/types.d.ts +8 -4
  180. package/select/Icons.d.ts +10 -0
  181. package/select/Icons.js +93 -0
  182. package/select/Listbox.d.ts +4 -0
  183. package/select/Listbox.js +169 -0
  184. package/select/Option.d.ts +4 -0
  185. package/select/Option.js +97 -0
  186. package/select/Select.d.ts +4 -0
  187. package/select/Select.js +196 -397
  188. package/select/Select.stories.tsx +600 -201
  189. package/select/Select.test.js +2228 -0
  190. package/select/types.d.ts +210 -0
  191. package/select/types.js +5 -0
  192. package/sidenav/Sidenav.d.ts +6 -5
  193. package/sidenav/Sidenav.js +184 -54
  194. package/sidenav/Sidenav.stories.tsx +249 -132
  195. package/sidenav/Sidenav.test.js +44 -0
  196. package/sidenav/types.d.ts +50 -27
  197. package/slider/Slider.d.ts +2 -2
  198. package/slider/Slider.js +124 -98
  199. package/slider/Slider.stories.tsx +72 -9
  200. package/slider/Slider.test.js +250 -0
  201. package/slider/types.d.ts +10 -2
  202. package/spinner/Spinner.js +5 -5
  203. package/spinner/Spinner.stories.jsx +27 -0
  204. package/spinner/Spinner.test.js +64 -0
  205. package/switch/Switch.d.ts +2 -2
  206. package/switch/Switch.js +152 -69
  207. package/switch/Switch.stories.tsx +54 -43
  208. package/switch/Switch.test.js +225 -0
  209. package/switch/types.d.ts +12 -4
  210. package/table/Table.js +4 -4
  211. package/table/Table.stories.jsx +81 -1
  212. package/table/Table.test.js +26 -0
  213. package/tabs/Tab.d.ts +4 -0
  214. package/tabs/Tab.js +133 -0
  215. package/tabs/Tabs.d.ts +1 -1
  216. package/tabs/Tabs.js +364 -110
  217. package/tabs/Tabs.stories.tsx +226 -0
  218. package/tabs/Tabs.test.js +351 -0
  219. package/tabs/types.d.ts +39 -17
  220. package/tag/Tag.d.ts +1 -1
  221. package/tag/Tag.js +19 -29
  222. package/tag/Tag.stories.tsx +38 -28
  223. package/tag/Tag.test.js +60 -0
  224. package/tag/types.d.ts +23 -14
  225. package/text-input/Icons.d.ts +8 -0
  226. package/text-input/Icons.js +60 -0
  227. package/text-input/Suggestion.d.ts +4 -0
  228. package/text-input/Suggestion.js +84 -0
  229. package/text-input/Suggestions.d.ts +4 -0
  230. package/text-input/Suggestions.js +134 -0
  231. package/text-input/TextInput.js +231 -343
  232. package/text-input/TextInput.stories.tsx +569 -0
  233. package/text-input/TextInput.test.js +1724 -0
  234. package/text-input/types.d.ts +63 -23
  235. package/textarea/Textarea.d.ts +4 -0
  236. package/textarea/Textarea.js +39 -79
  237. package/textarea/Textarea.stories.jsx +96 -15
  238. package/textarea/Textarea.test.js +437 -0
  239. package/textarea/types.d.ts +137 -0
  240. package/textarea/types.js +5 -0
  241. package/toggle-group/ToggleGroup.d.ts +4 -0
  242. package/toggle-group/ToggleGroup.js +18 -46
  243. package/toggle-group/ToggleGroup.stories.tsx +69 -32
  244. package/toggle-group/ToggleGroup.test.js +156 -0
  245. package/toggle-group/types.d.ts +105 -0
  246. package/toggle-group/types.js +5 -0
  247. package/typography/Typography.d.ts +4 -0
  248. package/typography/Typography.js +131 -0
  249. package/typography/Typography.stories.tsx +198 -0
  250. package/typography/types.d.ts +18 -0
  251. package/typography/types.js +5 -0
  252. package/useTheme.d.ts +2 -0
  253. package/useTheme.js +2 -2
  254. package/useTranslatedLabels.d.ts +2 -0
  255. package/useTranslatedLabels.js +20 -0
  256. package/utils/FocusLock.d.ts +13 -0
  257. package/utils/FocusLock.js +139 -0
  258. package/wizard/Wizard.d.ts +1 -1
  259. package/wizard/Wizard.js +112 -58
  260. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +48 -19
  261. package/wizard/Wizard.test.js +141 -0
  262. package/wizard/types.d.ts +13 -12
  263. package/ThemeContext.js +0 -246
  264. package/V3Select/V3Select.js +0 -455
  265. package/V3Select/index.d.ts +0 -27
  266. package/V3Textarea/V3Textarea.js +0 -260
  267. package/V3Textarea/index.d.ts +0 -27
  268. package/chip/index.d.ts +0 -22
  269. package/common/RequiredComponent.js +0 -32
  270. package/date/Date.js +0 -373
  271. package/date/index.d.ts +0 -27
  272. package/footer/Footer.stories.jsx +0 -151
  273. package/input-text/Icons.js +0 -22
  274. package/input-text/InputText.js +0 -611
  275. package/input-text/index.d.ts +0 -36
  276. package/radio/Radio.d.ts +0 -4
  277. package/radio/Radio.js +0 -174
  278. package/radio/Radio.stories.tsx +0 -192
  279. package/radio/types.d.ts +0 -54
  280. package/select/index.d.ts +0 -131
  281. package/textarea/index.d.ts +0 -117
  282. package/toggle/Toggle.js +0 -186
  283. package/toggle/index.d.ts +0 -21
  284. package/toggle-group/index.d.ts +0 -21
  285. package/upload/Upload.js +0 -201
  286. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  287. package/upload/buttons-upload/Icons.js +0 -40
  288. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  289. package/upload/dragAndDropArea/Icons.js +0 -39
  290. package/upload/file-upload/FileToUpload.js +0 -115
  291. package/upload/file-upload/Icons.js +0 -66
  292. package/upload/files-upload/FilesToUpload.js +0 -109
  293. package/upload/index.d.ts +0 -15
  294. package/upload/transaction/Icons.js +0 -160
  295. package/upload/transaction/Transaction.js +0 -104
  296. package/upload/transactions/Transactions.js +0 -94
  297. package/wizard/Icons.js +0 -65
  298. /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,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;