@dxc-technology/halstack-react 0.0.0-aa1e975 → 0.0.0-ab373ef

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 (193) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6643 -0
  3. package/dist/index.d.ts +6643 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +79 -68
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -248
  10. package/dist/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -186
  12. package/dist/alert/Alert.js +0 -403
  13. package/dist/alert/index.d.ts +0 -51
  14. package/dist/badge/Badge.js +0 -63
  15. package/dist/box/Box.js +0 -156
  16. package/dist/button/Button.js +0 -238
  17. package/dist/card/Card.js +0 -254
  18. package/dist/checkbox/Checkbox.js +0 -300
  19. package/dist/checkbox/Checkbox.stories.js +0 -144
  20. package/dist/checkbox/readme.md +0 -116
  21. package/dist/chip/Chip.js +0 -265
  22. package/dist/common/OpenSans.css +0 -81
  23. package/dist/common/RequiredComponent.js +0 -40
  24. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  34. package/dist/common/utils.js +0 -22
  35. package/dist/common/variables.js +0 -1546
  36. package/dist/date/Date.js +0 -379
  37. package/dist/date/Date.stories.js +0 -205
  38. package/dist/date/readme.md +0 -73
  39. package/dist/dialog/Dialog.js +0 -218
  40. package/dist/dropdown/Dropdown.js +0 -544
  41. package/dist/file-input/FileInput.js +0 -644
  42. package/dist/file-input/FileItem.js +0 -280
  43. package/dist/file-input/index.d.ts +0 -81
  44. package/dist/footer/Footer.js +0 -395
  45. package/dist/footer/Footer.stories.js +0 -94
  46. package/dist/footer/dxc_logo.svg +0 -15
  47. package/dist/footer/readme.md +0 -41
  48. package/dist/header/Header.js +0 -403
  49. package/dist/header/Header.stories.js +0 -176
  50. package/dist/header/close_icon.svg +0 -1
  51. package/dist/header/dxc_logo_black.svg +0 -8
  52. package/dist/header/hamb_menu_black.svg +0 -1
  53. package/dist/header/hamb_menu_white.svg +0 -1
  54. package/dist/header/readme.md +0 -33
  55. package/dist/heading/Heading.js +0 -218
  56. package/dist/input-text/InputText.js +0 -707
  57. package/dist/input-text/InputText.stories.js +0 -209
  58. package/dist/input-text/error.svg +0 -1
  59. package/dist/input-text/readme.md +0 -91
  60. package/dist/layout/ApplicationLayout.js +0 -331
  61. package/dist/layout/facebook.svg +0 -45
  62. package/dist/layout/linkedin.svg +0 -50
  63. package/dist/layout/twitter.svg +0 -53
  64. package/dist/link/Link.js +0 -237
  65. package/dist/link/readme.md +0 -51
  66. package/dist/main.d.ts +0 -8
  67. package/dist/main.js +0 -367
  68. package/dist/new-date/NewDate.js +0 -400
  69. package/dist/new-date/index.d.ts +0 -95
  70. package/dist/new-input-text/NewInputText.js +0 -967
  71. package/dist/new-input-text/index.d.ts +0 -135
  72. package/dist/new-select/NewSelect.js +0 -836
  73. package/dist/new-select/index.d.ts +0 -53
  74. package/dist/new-textarea/NewTextarea.js +0 -365
  75. package/dist/new-textarea/index.d.ts +0 -117
  76. package/dist/number/Number.js +0 -136
  77. package/dist/number/NumberContext.js +0 -16
  78. package/dist/number/index.d.ts +0 -113
  79. package/dist/paginator/Paginator.js +0 -289
  80. package/dist/paginator/images/next.svg +0 -3
  81. package/dist/paginator/images/nextPage.svg +0 -3
  82. package/dist/paginator/images/previous.svg +0 -3
  83. package/dist/paginator/images/previousPage.svg +0 -3
  84. package/dist/paginator/readme.md +0 -50
  85. package/dist/password/Password.js +0 -200
  86. package/dist/password/index.d.ts +0 -94
  87. package/dist/password/styles.css +0 -3
  88. package/dist/progress-bar/ProgressBar.js +0 -242
  89. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  90. package/dist/progress-bar/readme.md +0 -63
  91. package/dist/radio/Radio.js +0 -209
  92. package/dist/radio/Radio.stories.js +0 -166
  93. package/dist/radio/readme.md +0 -70
  94. package/dist/resultsetTable/ResultsetTable.js +0 -358
  95. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  96. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  97. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  98. package/dist/select/Select.js +0 -549
  99. package/dist/sidenav/Sidenav.js +0 -179
  100. package/dist/slider/Slider.js +0 -394
  101. package/dist/slider/Slider.stories.js +0 -241
  102. package/dist/slider/readme.md +0 -64
  103. package/dist/spinner/Spinner.js +0 -381
  104. package/dist/spinner/Spinner.stories.js +0 -183
  105. package/dist/spinner/readme.md +0 -65
  106. package/dist/switch/Switch.js +0 -222
  107. package/dist/switch/Switch.stories.js +0 -134
  108. package/dist/switch/readme.md +0 -133
  109. package/dist/table/Table.js +0 -132
  110. package/dist/tabs/Tabs.js +0 -343
  111. package/dist/tabs/Tabs.stories.js +0 -130
  112. package/dist/tabs/readme.md +0 -78
  113. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  114. package/dist/tabs-for-sections/readme.md +0 -78
  115. package/dist/tag/Tag.js +0 -282
  116. package/dist/textarea/Textarea.js +0 -264
  117. package/dist/toggle/Toggle.js +0 -220
  118. package/dist/toggle/Toggle.stories.js +0 -297
  119. package/dist/toggle/readme.md +0 -80
  120. package/dist/toggle-group/ToggleGroup.js +0 -223
  121. package/dist/upload/Upload.js +0 -205
  122. package/dist/upload/Upload.stories.js +0 -72
  123. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  124. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  125. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  126. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  127. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  128. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  129. package/dist/upload/file-upload/FileToUpload.js +0 -184
  130. package/dist/upload/file-upload/audio-icon.svg +0 -4
  131. package/dist/upload/file-upload/close.svg +0 -4
  132. package/dist/upload/file-upload/file-icon.svg +0 -4
  133. package/dist/upload/file-upload/video-icon.svg +0 -4
  134. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/Transaction.js +0 -175
  137. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  138. package/dist/upload/transaction/audio-icon.svg +0 -4
  139. package/dist/upload/transaction/error-icon.svg +0 -4
  140. package/dist/upload/transaction/file-icon-err.svg +0 -4
  141. package/dist/upload/transaction/file-icon.svg +0 -4
  142. package/dist/upload/transaction/image-icon-err.svg +0 -4
  143. package/dist/upload/transaction/image-icon.svg +0 -4
  144. package/dist/upload/transaction/success-icon.svg +0 -4
  145. package/dist/upload/transaction/video-icon-err.svg +0 -4
  146. package/dist/upload/transaction/video-icon.svg +0 -4
  147. package/dist/upload/transactions/Transactions.js +0 -138
  148. package/dist/useTheme.js +0 -22
  149. package/dist/wizard/Wizard.js +0 -411
  150. package/dist/wizard/invalid_icon.svg +0 -5
  151. package/dist/wizard/valid_icon.svg +0 -5
  152. package/dist/wizard/validation-wrong.svg +0 -6
  153. package/test/Accordion.test.js +0 -33
  154. package/test/AccordionGroup.test.js +0 -125
  155. package/test/Alert.test.js +0 -53
  156. package/test/Box.test.js +0 -10
  157. package/test/Button.test.js +0 -18
  158. package/test/Card.test.js +0 -30
  159. package/test/Checkbox.test.js +0 -45
  160. package/test/Chip.test.js +0 -25
  161. package/test/Date.test.js +0 -393
  162. package/test/Dialog.test.js +0 -23
  163. package/test/Dropdown.test.js +0 -145
  164. package/test/FileInput.test.js +0 -201
  165. package/test/Footer.test.js +0 -99
  166. package/test/Header.test.js +0 -39
  167. package/test/Heading.test.js +0 -35
  168. package/test/InputText.test.js +0 -240
  169. package/test/Link.test.js +0 -43
  170. package/test/NewDate.test.js +0 -232
  171. package/test/NewInputText.test.js +0 -734
  172. package/test/NewTextarea.test.js +0 -195
  173. package/test/Number.test.js +0 -257
  174. package/test/Paginator.test.js +0 -177
  175. package/test/Password.test.js +0 -83
  176. package/test/ProgressBar.test.js +0 -35
  177. package/test/Radio.test.js +0 -37
  178. package/test/ResultsetTable.test.js +0 -329
  179. package/test/Select.test.js +0 -212
  180. package/test/Sidenav.test.js +0 -45
  181. package/test/Slider.test.js +0 -82
  182. package/test/Spinner.test.js +0 -32
  183. package/test/Switch.test.js +0 -45
  184. package/test/Table.test.js +0 -36
  185. package/test/Tabs.test.js +0 -109
  186. package/test/TabsForSections.test.js +0 -34
  187. package/test/Tag.test.js +0 -32
  188. package/test/TextArea.test.js +0 -52
  189. package/test/ToggleGroup.test.js +0 -81
  190. package/test/Upload.test.js +0 -60
  191. package/test/Wizard.test.js +0 -130
  192. package/test/mocks/pngMock.js +0 -1
  193. package/test/mocks/svgMock.js +0 -1
@@ -1,200 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireDefault(require("styled-components"));
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _NewInputText = _interopRequireDefault(require("../new-input-text/NewInputText"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- require("./styles.css");
29
-
30
- function _templateObject() {
31
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
32
-
33
- _templateObject = function _templateObject() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- var DxcPassword = _react["default"].forwardRef(function (_ref, ref) {
41
- var _ref$label = _ref.label,
42
- label = _ref$label === void 0 ? "" : _ref$label,
43
- _ref$name = _ref.name,
44
- name = _ref$name === void 0 ? "" : _ref$name,
45
- value = _ref.value,
46
- _ref$helperText = _ref.helperText,
47
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
48
- _ref$clearable = _ref.clearable,
49
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
50
- onChange = _ref.onChange,
51
- onBlur = _ref.onBlur,
52
- _ref$error = _ref.error,
53
- error = _ref$error === void 0 ? "" : _ref$error,
54
- pattern = _ref.pattern,
55
- length = _ref.length,
56
- _ref$autocomplete = _ref.autocomplete,
57
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
58
- margin = _ref.margin,
59
- _ref$size = _ref.size,
60
- size = _ref$size === void 0 ? "medium" : _ref$size,
61
- _ref$tabIndex = _ref.tabIndex,
62
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
63
-
64
- var _useState = (0, _react.useState)(false),
65
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
66
- isPasswordVisible = _useState2[0],
67
- setIsPasswordVisible = _useState2[1];
68
-
69
- var inputRef = (0, _react.useRef)(null);
70
-
71
- var setInputType = function setInputType(type) {
72
- var _inputRef$current, _inputRef$current$chi;
73
-
74
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[2]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
75
- };
76
-
77
- var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
78
- if (error && clearable && value) {
79
- var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
80
-
81
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[2]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
82
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[2]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
83
- } else if (error || clearable && !value) {
84
- var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
85
-
86
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[2]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
87
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[2]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
88
- } else {
89
- var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
90
-
91
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[2]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
92
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[2]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
93
- }
94
- };
95
-
96
- (0, _react.useEffect)(function () {
97
- setAriaAttributes(false, "Show");
98
-
99
- if (isPasswordVisible) {
100
- setInputType("text");
101
- setAriaAttributes(true, "Hide");
102
- } else {
103
- setInputType("password");
104
- setAriaAttributes(false, "Show");
105
- }
106
- }, [isPasswordVisible]);
107
-
108
- var viewPassword = function viewPassword() {
109
- setInputType("text");
110
- setIsPasswordVisible(true);
111
- };
112
-
113
- var hidePassword = function hidePassword() {
114
- setInputType("password");
115
- setIsPasswordVisible(false);
116
- };
117
-
118
- var action = {
119
- onClick: isPasswordVisible ? hidePassword : viewPassword,
120
- icon: isPasswordVisible ? _react["default"].createElement("svg", {
121
- xmlns: "http://www.w3.org/2000/svg",
122
- height: "24px",
123
- viewBox: "0 0 24 24",
124
- width: "24px",
125
- fill: "#000000"
126
- }, _react["default"].createElement("path", {
127
- d: "M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z",
128
- fill: "none"
129
- }), _react["default"].createElement("path", {
130
- d: "M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"
131
- })) : _react["default"].createElement("svg", {
132
- xmlns: "http://www.w3.org/2000/svg",
133
- height: "24px",
134
- viewBox: "0 0 24 24",
135
- width: "24px",
136
- fill: "#000000"
137
- }, _react["default"].createElement("path", {
138
- d: "M0 0h24v24H0V0z",
139
- fill: "none"
140
- }), _react["default"].createElement("path", {
141
- d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
142
- }))
143
- };
144
- return _react["default"].createElement(DXCPassword, {
145
- ref: ref
146
- }, _react["default"].createElement(_NewInputText["default"], {
147
- ref: inputRef,
148
- label: label,
149
- name: name,
150
- value: value,
151
- helperText: helperText,
152
- action: action,
153
- error: error,
154
- clearable: clearable,
155
- onChange: onChange,
156
- onBlur: onBlur,
157
- margin: margin,
158
- size: size,
159
- pattern: pattern,
160
- length: length,
161
- autocomplete: autocomplete,
162
- tabIndex: tabIndex
163
- }));
164
- });
165
-
166
- var sizes = {
167
- small: "240px",
168
- medium: "360px",
169
- large: "480px",
170
- fillParent: "100%"
171
- };
172
-
173
- var DXCPassword = _styledComponents["default"].div(_templateObject());
174
-
175
- DxcPassword.propTypes = {
176
- label: _propTypes["default"].string,
177
- name: _propTypes["default"].string,
178
- value: _propTypes["default"].string,
179
- helperText: _propTypes["default"].string,
180
- error: _propTypes["default"].string,
181
- clearable: _propTypes["default"].bool,
182
- onChange: _propTypes["default"].func,
183
- onBlur: _propTypes["default"].func,
184
- autocomplete: _propTypes["default"].string,
185
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
186
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
187
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
188
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
189
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
190
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
191
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
192
- pattern: _propTypes["default"].string,
193
- length: _propTypes["default"].shape({
194
- min: _propTypes["default"].number,
195
- max: _propTypes["default"].number
196
- }),
197
- tabIndex: _propTypes["default"].number
198
- };
199
- var _default = DxcPassword;
200
- exports["default"] = _default;
@@ -1,94 +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
- /**
12
- * Text to be placed above the password.
13
- */
14
- label?: string;
15
- /**
16
- * Name attribute of the input element.
17
- */
18
- name?: string;
19
- /**
20
- * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
21
- */
22
- value?: string;
23
- /**
24
- * Helper text to be placed above the password.
25
- */
26
- helperText?: string;
27
- /**
28
- * If true, the password will have an action to clear the entered value.
29
- */
30
- clearable?: boolean;
31
- /**
32
- * This function will be called when the user types within the input
33
- * element of the component. An object including the current value and
34
- * the error (if the value entered is not valid) will be passed to this
35
- * function. If there is no error, error will be null.
36
- * */
37
- onChange?: (val: { value: string; error: string }) => void;
38
- /**
39
- * This function will be called when the input element loses the focus.
40
- * An object including the input value and the error (if the value entered is
41
- * not valid) will be passed to this function. If there is no error, error will be null.
42
- */
43
- onBlur?: (val: { value: string; error: string }) => void;
44
- /**
45
- * If it is defined, the component will change its appearance, showing
46
- * the error below the password component. If it is not defined, the
47
- * error messages will be managed internally, but never displayed on its own.
48
- */
49
- error?: string;
50
- /**
51
- * Regular expression that defines the valid format allowed by the
52
- * password. This will be checked both when the input element loses the
53
- * focus and while typing within it. If the string entered does not match
54
- * the pattern, the onBlur and onChange functions will be called with the
55
- * current value and an internal error informing that this value does not
56
- * match the pattern. If the pattern is met, the error parameter of both
57
- * events will be null.
58
- */
59
- pattern?: string;
60
- /**
61
- * Specifies the minimun and maximum length allowed by the password.
62
- * This will be checked both when the input element loses the
63
- * focus and while typing within it. If the string entered does not
64
- * comply the length, the onBlur and onChange functions will be called
65
- * with the current value and an internal error informing that the value
66
- * length does not comply the specified range. If a valid length is
67
- * reached, the error parameter of both events will be null.
68
- */
69
- length?: { min?: number; max?: number };
70
- /**
71
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
72
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
73
- */
74
- autocomplete?: string;
75
- /**
76
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
77
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
78
- */
79
- margin?: Space | Margin;
80
- /**
81
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
82
- */
83
- size?: Size;
84
- /**
85
- * Value of the tabindex attribute.
86
- */
87
- tabIndex?: number;
88
- /**
89
- * Reference to the component.
90
- */
91
- ref?: React.RefObject<HTMLDivElement>;
92
- };
93
-
94
- export default function DxcPassword(props: Props): JSX.Element;
@@ -1,3 +0,0 @@
1
- ::-ms-reveal {
2
- display: none;
3
- }
@@ -1,242 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
-
30
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
31
-
32
- function _templateObject6() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"]);
34
-
35
- _templateObject6 = function _templateObject6() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject5() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"]);
44
-
45
- _templateObject5 = function _templateObject5() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject4() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"]);
54
-
55
- _templateObject4 = function _templateObject4() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject3() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"]);
64
-
65
- _templateObject3 = function _templateObject3() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject2() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n .MuiLinearProgress-root {\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n }\n .MuiLinearProgress-bar {\n background-color: ", ";\n }\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
74
-
75
- _templateObject2 = function _templateObject2() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n width: 100%;\n"]);
84
-
85
- _templateObject = function _templateObject() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- var DxcProgressBar = function DxcProgressBar(_ref) {
93
- var _ref$label = _ref.label,
94
- label = _ref$label === void 0 ? "" : _ref$label,
95
- _ref$helperText = _ref.helperText,
96
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
97
- _ref$overlay = _ref.overlay,
98
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
99
- value = _ref.value,
100
- _ref$showValue = _ref.showValue,
101
- showValue = _ref$showValue === void 0 ? false : _ref$showValue,
102
- margin = _ref.margin;
103
- var colorsTheme = (0, _useTheme["default"])();
104
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
105
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
106
- theme: colorsTheme.progressBar
107
- }, _react["default"].createElement(BackgroundProgressBar, {
108
- overlay: overlay
109
- }, _react["default"].createElement(DXCProgressBar, {
110
- overlay: overlay,
111
- margin: margin,
112
- backgroundType: backgroundType
113
- }, _react["default"].createElement(InfoProgressBar, null, _react["default"].createElement(ProgressBarLabel, {
114
- overlay: overlay,
115
- backgroundType: backgroundType
116
- }, label), _react["default"].createElement(ProgressBarProgress, {
117
- overlay: overlay,
118
- showValue: showValue,
119
- backgroundType: backgroundType
120
- }, value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), _react["default"].createElement(_LinearProgress["default"], {
121
- variant: showValue ? "determinate" : "indeterminate",
122
- value: value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100,
123
- helperText: helperText
124
- }), helperText && _react["default"].createElement(HelperText, {
125
- overlay: overlay,
126
- backgroundType: backgroundType
127
- }, helperText))));
128
- };
129
-
130
- var BackgroundProgressBar = _styledComponents["default"].div(_templateObject(), function (props) {
131
- return props.overlay === true ? "".concat(props.theme.overlayColor) : "transparent";
132
- }, function (props) {
133
- return props.overlay === true && "0.8";
134
- }, function (props) {
135
- return props.overlay === true ? "100%" : "";
136
- }, function (props) {
137
- return props.overlay === true ? "center" : "";
138
- }, function (props) {
139
- return props.overlay === true ? "100vh" : "";
140
- }, function (props) {
141
- return props.overlay === true ? "center" : "";
142
- }, function (props) {
143
- return props.overlay === true ? "100%" : "";
144
- }, function (props) {
145
- return props.overlay === true ? "fixed" : "";
146
- }, function (props) {
147
- return props.overlay === true ? "0" : "";
148
- }, function (props) {
149
- return props.overlay === true ? "0" : "";
150
- }, function (props) {
151
- return props.overlay === true ? "0" : "";
152
- }, function (props) {
153
- return props.overlay === true ? "0" : "";
154
- }, function (props) {
155
- return props.overlay ? 1300 : "";
156
- });
157
-
158
- var DXCProgressBar = _styledComponents["default"].div(_templateObject2(), function (props) {
159
- return props.overlay === true && "100" || "0";
160
- }, function (props) {
161
- return props.overlay === true ? "80%" : "100%";
162
- }, function (props) {
163
- return props.theme.thickness;
164
- }, function (props) {
165
- return props.theme.totalLineColor;
166
- }, function (props) {
167
- return props.theme.borderRadius;
168
- }, function (props) {
169
- return props.helperText !== "" && "8px";
170
- }, function (props) {
171
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
172
- }, function (props) {
173
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
174
- }, function (props) {
175
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
176
- }, function (props) {
177
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
178
- }, function (props) {
179
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
180
- }, function (props) {
181
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
182
- });
183
-
184
- var InfoProgressBar = _styledComponents["default"].div(_templateObject3());
185
-
186
- var ProgressBarLabel = _styledComponents["default"].div(_templateObject4(), function (props) {
187
- return props.theme.labelFontFamily;
188
- }, function (props) {
189
- return props.theme.labelFontStyle;
190
- }, function (props) {
191
- return props.theme.labelFontSize;
192
- }, function (props) {
193
- return props.theme.labelFontWeight;
194
- }, function (props) {
195
- return props.theme.labelFontTextTransform;
196
- }, function (props) {
197
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
198
- });
199
-
200
- var ProgressBarProgress = _styledComponents["default"].div(_templateObject5(), function (props) {
201
- return props.theme.valueFontFamily;
202
- }, function (props) {
203
- return props.theme.valueFontStyle;
204
- }, function (props) {
205
- return props.theme.valueFontSize;
206
- }, function (props) {
207
- return props.theme.valueFontWeight;
208
- }, function (props) {
209
- return props.theme.valueFontTextTransform;
210
- }, function (props) {
211
- return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.valueFontColor;
212
- }, function (props) {
213
- return props.value !== "" && props.showValue === true && "block" || "none";
214
- });
215
-
216
- var HelperText = _styledComponents["default"].span(_templateObject6(), function (props) {
217
- return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
218
- }, function (props) {
219
- return props.theme.fontFamily;
220
- }, function (props) {
221
- return props.theme.helperTextFontSize;
222
- }, function (props) {
223
- return props.theme.helperTextFontStyle;
224
- }, function (props) {
225
- return props.theme.helperTextFontWeight;
226
- });
227
-
228
- DxcProgressBar.propTypes = {
229
- label: _propTypes["default"].string,
230
- helperText: _propTypes["default"].string,
231
- overlay: _propTypes["default"].bool,
232
- value: _propTypes["default"].number,
233
- showValue: _propTypes["default"].bool,
234
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
235
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
236
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
237
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
238
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
239
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
240
- };
241
- var _default = DxcProgressBar;
242
- exports["default"] = _default;