@dxc-technology/halstack-react 0.0.0-b22e2a8 → 0.0.0-b230d97

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