@dxc-technology/halstack-react 0.0.0-d20b360 → 0.0.0-d25aef4

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 (170) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6703 -0
  3. package/dist/index.d.ts +6703 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +70 -66
  7. package/BackgroundColorContext.js +0 -50
  8. package/ThemeContext.js +0 -246
  9. package/V3Select/V3Select.js +0 -455
  10. package/V3Select/index.d.ts +0 -27
  11. package/V3Textarea/V3Textarea.js +0 -260
  12. package/V3Textarea/index.d.ts +0 -27
  13. package/accordion/Accordion.d.ts +0 -4
  14. package/accordion/Accordion.js +0 -258
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -170
  19. package/accordion-group/types.d.ts +0 -72
  20. package/accordion-group/types.js +0 -5
  21. package/alert/Alert.d.ts +0 -4
  22. package/alert/Alert.js +0 -290
  23. package/alert/types.d.ts +0 -49
  24. package/alert/types.js +0 -5
  25. package/badge/Badge.js +0 -59
  26. package/box/Box.js +0 -152
  27. package/box/Box.stories.jsx +0 -132
  28. package/box/index.d.ts +0 -25
  29. package/button/Button.d.ts +0 -4
  30. package/button/Button.js +0 -182
  31. package/button/Button.stories.tsx +0 -293
  32. package/button/types.d.ts +0 -57
  33. package/button/types.js +0 -5
  34. package/card/Card.d.ts +0 -4
  35. package/card/Card.js +0 -165
  36. package/card/types.d.ts +0 -69
  37. package/card/types.js +0 -5
  38. package/checkbox/Checkbox.d.ts +0 -4
  39. package/checkbox/Checkbox.js +0 -253
  40. package/checkbox/Checkbox.stories.tsx +0 -192
  41. package/checkbox/types.d.ts +0 -60
  42. package/checkbox/types.js +0 -5
  43. package/chip/Chip.js +0 -221
  44. package/chip/index.d.ts +0 -22
  45. package/common/OpenSans.css +0 -81
  46. package/common/RequiredComponent.js +0 -32
  47. package/common/fonts/OpenSans-Bold.ttf +0 -0
  48. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  49. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  50. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  51. package/common/fonts/OpenSans-Italic.ttf +0 -0
  52. package/common/fonts/OpenSans-Light.ttf +0 -0
  53. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  54. package/common/fonts/OpenSans-Regular.ttf +0 -0
  55. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  56. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  57. package/common/utils.js +0 -22
  58. package/common/variables.js +0 -1569
  59. package/date/Date.js +0 -373
  60. package/date/index.d.ts +0 -27
  61. package/date-input/DateInput.d.ts +0 -4
  62. package/date-input/DateInput.js +0 -361
  63. package/date-input/types.d.ts +0 -100
  64. package/date-input/types.js +0 -5
  65. package/dialog/Dialog.d.ts +0 -4
  66. package/dialog/Dialog.js +0 -165
  67. package/dialog/types.d.ts +0 -43
  68. package/dialog/types.js +0 -5
  69. package/dropdown/Dropdown.d.ts +0 -4
  70. package/dropdown/Dropdown.js +0 -417
  71. package/dropdown/types.d.ts +0 -89
  72. package/dropdown/types.js +0 -5
  73. package/file-input/FileInput.js +0 -532
  74. package/file-input/FileItem.js +0 -193
  75. package/file-input/index.d.ts +0 -81
  76. package/footer/Footer.d.ts +0 -4
  77. package/footer/Footer.js +0 -266
  78. package/footer/Footer.stories.jsx +0 -151
  79. package/footer/Icons.js +0 -77
  80. package/footer/types.d.ts +0 -61
  81. package/footer/types.js +0 -5
  82. package/header/Header.d.ts +0 -7
  83. package/header/Header.js +0 -324
  84. package/header/Icons.js +0 -34
  85. package/header/types.d.ts +0 -45
  86. package/header/types.js +0 -5
  87. package/heading/Heading.js +0 -176
  88. package/heading/index.d.ts +0 -17
  89. package/input-text/Icons.js +0 -22
  90. package/input-text/InputText.js +0 -611
  91. package/input-text/index.d.ts +0 -36
  92. package/layout/ApplicationLayout.js +0 -235
  93. package/layout/Icons.js +0 -55
  94. package/link/Link.js +0 -183
  95. package/link/index.d.ts +0 -23
  96. package/main.d.ts +0 -44
  97. package/main.js +0 -363
  98. package/number-input/NumberInput.js +0 -128
  99. package/number-input/NumberInput.stories.jsx +0 -115
  100. package/number-input/NumberInputContext.js +0 -16
  101. package/number-input/index.d.ts +0 -113
  102. package/paginator/Icons.js +0 -66
  103. package/paginator/Paginator.d.ts +0 -4
  104. package/paginator/Paginator.js +0 -198
  105. package/paginator/Paginator.stories.tsx +0 -63
  106. package/paginator/types.d.ts +0 -38
  107. package/paginator/types.js +0 -5
  108. package/password-input/PasswordInput.js +0 -199
  109. package/password-input/PasswordInput.stories.jsx +0 -131
  110. package/password-input/index.d.ts +0 -94
  111. package/progress-bar/ProgressBar.d.ts +0 -4
  112. package/progress-bar/ProgressBar.js +0 -170
  113. package/progress-bar/types.d.ts +0 -37
  114. package/progress-bar/types.js +0 -5
  115. package/radio/Radio.d.ts +0 -4
  116. package/radio/Radio.js +0 -174
  117. package/radio/Radio.stories.tsx +0 -192
  118. package/radio/types.d.ts +0 -54
  119. package/radio/types.js +0 -5
  120. package/resultsetTable/ResultsetTable.js +0 -274
  121. package/resultsetTable/index.d.ts +0 -19
  122. package/select/Select.js +0 -865
  123. package/select/index.d.ts +0 -131
  124. package/sidenav/Sidenav.js +0 -145
  125. package/sidenav/index.d.ts +0 -13
  126. package/slider/Slider.d.ts +0 -4
  127. package/slider/Slider.js +0 -306
  128. package/slider/types.d.ts +0 -83
  129. package/slider/types.js +0 -5
  130. package/spinner/Spinner.js +0 -267
  131. package/spinner/Spinner.stories.jsx +0 -102
  132. package/spinner/index.d.ts +0 -17
  133. package/switch/Switch.d.ts +0 -4
  134. package/switch/Switch.js +0 -179
  135. package/switch/types.d.ts +0 -58
  136. package/switch/types.js +0 -5
  137. package/table/Table.js +0 -118
  138. package/table/Table.stories.jsx +0 -276
  139. package/table/index.d.ts +0 -13
  140. package/tabs/Tabs.d.ts +0 -4
  141. package/tabs/Tabs.js +0 -211
  142. package/tabs/types.d.ts +0 -71
  143. package/tabs/types.js +0 -5
  144. package/tag/Tag.js +0 -208
  145. package/tag/index.d.ts +0 -24
  146. package/text-input/TextInput.js +0 -825
  147. package/text-input/index.d.ts +0 -135
  148. package/textarea/Textarea.js +0 -317
  149. package/textarea/Textarea.stories.jsx +0 -135
  150. package/textarea/index.d.ts +0 -117
  151. package/toggle/Toggle.js +0 -186
  152. package/toggle/index.d.ts +0 -21
  153. package/toggle-group/ToggleGroup.js +0 -243
  154. package/toggle-group/index.d.ts +0 -21
  155. package/upload/Upload.js +0 -201
  156. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  157. package/upload/buttons-upload/Icons.js +0 -40
  158. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  159. package/upload/dragAndDropArea/Icons.js +0 -39
  160. package/upload/file-upload/FileToUpload.js +0 -115
  161. package/upload/file-upload/Icons.js +0 -66
  162. package/upload/files-upload/FilesToUpload.js +0 -109
  163. package/upload/index.d.ts +0 -15
  164. package/upload/transaction/Icons.js +0 -160
  165. package/upload/transaction/Transaction.js +0 -104
  166. package/upload/transactions/Transactions.js +0 -94
  167. package/useTheme.js +0 -22
  168. package/wizard/Icons.js +0 -65
  169. package/wizard/Wizard.js +0 -271
  170. package/wizard/index.d.ts +0 -18
@@ -1,199 +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 _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 _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _templateObject;
29
-
30
- 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); }
31
-
32
- 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; }
33
-
34
- var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
35
- var _ref$label = _ref.label,
36
- label = _ref$label === void 0 ? "" : _ref$label,
37
- _ref$name = _ref.name,
38
- name = _ref$name === void 0 ? "" : _ref$name,
39
- value = _ref.value,
40
- _ref$helperText = _ref.helperText,
41
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
42
- _ref$clearable = _ref.clearable,
43
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
44
- onChange = _ref.onChange,
45
- onBlur = _ref.onBlur,
46
- _ref$error = _ref.error,
47
- error = _ref$error === void 0 ? "" : _ref$error,
48
- pattern = _ref.pattern,
49
- length = _ref.length,
50
- _ref$autocomplete = _ref.autocomplete,
51
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
52
- margin = _ref.margin,
53
- _ref$size = _ref.size,
54
- size = _ref$size === void 0 ? "medium" : _ref$size,
55
- _ref$tabIndex = _ref.tabIndex,
56
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
57
-
58
- var _useState = (0, _react.useState)(false),
59
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
60
- isPasswordVisible = _useState2[0],
61
- setIsPasswordVisible = _useState2[1];
62
-
63
- var inputRef = (0, _react.useRef)(null);
64
-
65
- var setInputType = function setInputType(type) {
66
- var _inputRef$current, _inputRef$current$chi;
67
-
68
- 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);
69
- };
70
-
71
- var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
72
- if (error && clearable && value) {
73
- var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
74
-
75
- 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);
76
- 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);
77
- } else if (error || clearable && !value) {
78
- var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
79
-
80
- 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);
81
- 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);
82
- } else {
83
- var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
84
-
85
- 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);
86
- 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);
87
- }
88
- };
89
-
90
- var getIconTitle = function getIconTitle() {
91
- return isPasswordVisible ? "Hide password" : "Show password";
92
- };
93
-
94
- (0, _react.useEffect)(function () {
95
- setAriaAttributes(false, "Show");
96
-
97
- if (isPasswordVisible) {
98
- setInputType("text");
99
- setAriaAttributes(true, "Hide");
100
- } else {
101
- setInputType("password");
102
- setAriaAttributes(false, "Show");
103
- }
104
- }, [isPasswordVisible]);
105
-
106
- var viewPassword = function viewPassword() {
107
- setInputType("text");
108
- setIsPasswordVisible(true);
109
- };
110
-
111
- var hidePassword = function hidePassword() {
112
- setInputType("password");
113
- setIsPasswordVisible(false);
114
- };
115
-
116
- var action = {
117
- onClick: isPasswordVisible ? hidePassword : viewPassword,
118
- icon: isPasswordVisible ? /*#__PURE__*/_react["default"].createElement("svg", {
119
- xmlns: "http://www.w3.org/2000/svg",
120
- height: "24px",
121
- viewBox: "0 0 24 24",
122
- width: "24px",
123
- fill: "currentColor"
124
- }, /*#__PURE__*/_react["default"].createElement("path", {
125
- d: "M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z",
126
- fill: "none"
127
- }), /*#__PURE__*/_react["default"].createElement("path", {
128
- 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"
129
- })) : /*#__PURE__*/_react["default"].createElement("svg", {
130
- xmlns: "http://www.w3.org/2000/svg",
131
- height: "24px",
132
- viewBox: "0 0 24 24",
133
- width: "24px",
134
- fill: "currentColor"
135
- }, /*#__PURE__*/_react["default"].createElement("path", {
136
- d: "M0 0h24v24H0V0z",
137
- fill: "none"
138
- }), /*#__PURE__*/_react["default"].createElement("path", {
139
- 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"
140
- })),
141
- title: getIconTitle()
142
- };
143
- return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
144
- ref: ref
145
- }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
146
- ref: inputRef,
147
- label: label,
148
- name: name,
149
- value: value,
150
- helperText: helperText,
151
- action: action,
152
- error: error,
153
- clearable: clearable,
154
- onChange: onChange,
155
- onBlur: onBlur,
156
- margin: margin,
157
- size: size,
158
- pattern: pattern,
159
- length: length,
160
- autocomplete: autocomplete,
161
- tabIndex: tabIndex
162
- }));
163
- });
164
-
165
- var sizes = {
166
- small: "240px",
167
- medium: "360px",
168
- large: "480px",
169
- fillParent: "100%"
170
- };
171
-
172
- var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & ::-ms-reveal {\n display: none;\n }\n"])));
173
-
174
- DxcPasswordInput.propTypes = {
175
- label: _propTypes["default"].string,
176
- name: _propTypes["default"].string,
177
- value: _propTypes["default"].string,
178
- helperText: _propTypes["default"].string,
179
- error: _propTypes["default"].string,
180
- clearable: _propTypes["default"].bool,
181
- onChange: _propTypes["default"].func,
182
- onBlur: _propTypes["default"].func,
183
- autocomplete: _propTypes["default"].string,
184
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
185
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
186
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
187
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
188
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
189
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
190
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
191
- pattern: _propTypes["default"].string,
192
- length: _propTypes["default"].shape({
193
- min: _propTypes["default"].number,
194
- max: _propTypes["default"].number
195
- }),
196
- tabIndex: _propTypes["default"].number
197
- };
198
- var _default = DxcPasswordInput;
199
- exports["default"] = _default;
@@ -1,131 +0,0 @@
1
- import React from "react";
2
- import { userEvent, within } from "@storybook/testing-library";
3
- import DxcPasswordInput from "./PasswordInput";
4
- import { BackgroundColorProvider } from "../BackgroundColorContext";
5
- import Title from "../../.storybook/components/Title";
6
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
7
- import DarkContainer from "../../.storybook/components/DarkSection";
8
-
9
- export default {
10
- title: "Password input ",
11
- component: DxcPasswordInput,
12
- };
13
-
14
- export const Chromatic = () => (
15
- <>
16
- <ExampleContainer>
17
- <Title title="Without label" theme="light" level={4} />
18
- <DxcPasswordInput />
19
- </ExampleContainer>
20
- <ExampleContainer>
21
- <Title title="With label" theme="light" level={4} />
22
- <DxcPasswordInput label="Password input" clearable />
23
- </ExampleContainer>
24
- <ExampleContainer>
25
- <Title title="Clearable" theme="light" level={4} />
26
- <DxcPasswordInput label="Password input" clearable value="password" />
27
- </ExampleContainer>
28
- <ExampleContainer>
29
- <Title title="Non clearable" theme="light" level={4} />
30
- <DxcPasswordInput label="Non clearable password input" value="password" />
31
- </ExampleContainer>
32
- <ExampleContainer>
33
- <Title title="Helper text" theme="light" level={4} />
34
- <DxcPasswordInput label="Help password input" helperText="Help message" />
35
- </ExampleContainer>
36
- <ExampleContainer>
37
- <Title title="Invalid" theme="light" level={4} />
38
- <DxcPasswordInput label="Error password input" error="Error message." />
39
- </ExampleContainer>
40
- <BackgroundColorProvider color="#333333">
41
- <DarkContainer>
42
- <Title title="Dark" theme="dark" level={2} />
43
- <ExampleContainer>
44
- <Title title="With label, helper text and value" theme="dark" level={4} />
45
- <DxcPasswordInput label="Password input" helperText="Help message" value="Password" />
46
- </ExampleContainer>
47
- <ExampleContainer>
48
- <Title title="With label, helper text, value and error" theme="dark" level={4} />
49
- <DxcPasswordInput label="Password input" helperText="Help message" error="Error message." value="Password" />
50
- </ExampleContainer>
51
- </DarkContainer>
52
- </BackgroundColorProvider>
53
- <Title title="Margins" theme="light" level={2} />
54
- <ExampleContainer>
55
- <Title title="Xxsmall margin" theme="light" level={4} />
56
- <DxcPasswordInput label="Xxsmmall" margin="xxsmall" />
57
- </ExampleContainer>
58
- <ExampleContainer>
59
- <Title title="Xsmall margin" theme="light" level={4} />
60
- <DxcPasswordInput label="Xsmall" margin="xsmall" />
61
- </ExampleContainer>
62
- <ExampleContainer>
63
- <Title title="Small margin" theme="light" level={4} />
64
- <DxcPasswordInput label="Small" margin="small" />
65
- </ExampleContainer>
66
- <ExampleContainer>
67
- <Title title="Medium margin" theme="light" level={4} />
68
- <DxcPasswordInput label="Medium" margin="medium" />
69
- </ExampleContainer>
70
- <ExampleContainer>
71
- <Title title="Large margin" theme="light" level={4} />
72
- <DxcPasswordInput label="Large" margin="large" />
73
- </ExampleContainer>
74
- <ExampleContainer>
75
- <Title title="Xlarge margin" theme="light" level={4} />
76
- <DxcPasswordInput label="Xlarge" margin="xlarge" />
77
- </ExampleContainer>
78
- <ExampleContainer>
79
- <Title title="Xxlarge margin" theme="light" level={4} />
80
- <DxcPasswordInput label="Xxlarge" margin="xxlarge" />
81
- </ExampleContainer>
82
- <Title title="Sizes" theme="light" level={2} />
83
- <ExampleContainer>
84
- <Title title="Small size" theme="light" level={4} />
85
- <DxcPasswordInput label="Small" size="small" />
86
- </ExampleContainer>
87
- <ExampleContainer>
88
- <Title title="Medium size" theme="light" level={4} />
89
- <DxcPasswordInput label="Medium" size="medium" />
90
- </ExampleContainer>
91
- <ExampleContainer>
92
- <Title title="Large size" theme="light" level={4} />
93
- <DxcPasswordInput label="Large" size="large" />
94
- </ExampleContainer>
95
- <ExampleContainer>
96
- <Title title="FillParent size" theme="light" level={4} />
97
- <DxcPasswordInput label="FillParent" size="fillParent" />
98
- </ExampleContainer>
99
- </>
100
- );
101
-
102
- const Password = () => (
103
- <ExampleContainer>
104
- <Title title="Show password" theme="light" level={4} />
105
- <DxcPasswordInput label="Password input" value="Password" />
106
- </ExampleContainer>
107
- );
108
- const PasswordDark = () => (
109
- <BackgroundColorProvider color="#333333">
110
- <DarkContainer>
111
- <ExampleContainer>
112
- <Title title="Show password" theme="dark" level={4} />
113
- <DxcPasswordInput label="Password input" value="Password" />
114
- </ExampleContainer>
115
- </DarkContainer>
116
- </BackgroundColorProvider>
117
- );
118
-
119
- export const ShowPassword = Password.bind({});
120
- ShowPassword.play = async ({ canvasElement }) => {
121
- const canvas = within(canvasElement);
122
- const passwordBtn = canvas.getByRole("button");
123
- await userEvent.click(passwordBtn);
124
- };
125
-
126
- export const ShowPasswordDark = PasswordDark.bind({});
127
- ShowPasswordDark.play = async ({ canvasElement }) => {
128
- const canvas = within(canvasElement);
129
- const passwordBtn = canvas.getByRole("button");
130
- await userEvent.click(passwordBtn);
131
- };
@@ -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 input 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 input 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 input. 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 input.
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 DxcPasswordInput(props: Props): JSX.Element;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ProgressBarPropsType from "./types";
3
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: ProgressBarPropsType) => JSX.Element;
4
- export default DxcProgressBar;
@@ -1,170 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
27
-
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
29
-
30
- 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); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
33
-
34
- var DxcProgressBar = function DxcProgressBar(_ref) {
35
- var _ref$label = _ref.label,
36
- label = _ref$label === void 0 ? "" : _ref$label,
37
- _ref$helperText = _ref.helperText,
38
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
39
- _ref$overlay = _ref.overlay,
40
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
41
- value = _ref.value,
42
- _ref$showValue = _ref.showValue,
43
- showValue = _ref$showValue === void 0 ? false : _ref$showValue,
44
- margin = _ref.margin;
45
- var colorsTheme = (0, _useTheme["default"])();
46
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
47
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
48
- theme: colorsTheme.progressBar
49
- }, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
50
- overlay: overlay
51
- }, /*#__PURE__*/_react["default"].createElement(DXCProgressBar, {
52
- overlay: overlay,
53
- margin: margin,
54
- backgroundType: backgroundType
55
- }, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
56
- overlay: overlay,
57
- backgroundType: backgroundType
58
- }, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
59
- overlay: overlay,
60
- showValue: showValue,
61
- backgroundType: backgroundType
62
- }, value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
63
- variant: showValue ? "determinate" : "indeterminate",
64
- value: value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
65
- }), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
66
- overlay: overlay,
67
- backgroundType: backgroundType
68
- }, helperText))));
69
- };
70
-
71
- var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (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"])), function (props) {
72
- return props.overlay === true ? "".concat(props.theme.overlayColor) : "transparent";
73
- }, function (props) {
74
- return props.overlay === true && "0.8";
75
- }, function (props) {
76
- return props.overlay === true ? "100%" : "";
77
- }, function (props) {
78
- return props.overlay === true ? "center" : "";
79
- }, function (props) {
80
- return props.overlay === true ? "100vh" : "";
81
- }, function (props) {
82
- return props.overlay === true ? "center" : "";
83
- }, function (props) {
84
- return props.overlay === true ? "100%" : "";
85
- }, function (props) {
86
- return props.overlay === true ? "fixed" : "";
87
- }, function (props) {
88
- return props.overlay === true ? "0" : "";
89
- }, function (props) {
90
- return props.overlay === true ? "0" : "";
91
- }, function (props) {
92
- return props.overlay === true ? "0" : "";
93
- }, function (props) {
94
- return props.overlay === true ? "0" : "";
95
- }, function (props) {
96
- return props.overlay ? 1300 : "";
97
- });
98
-
99
- var DXCProgressBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (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"])), function (props) {
100
- return props.overlay === true && "100" || "0";
101
- }, function (props) {
102
- return props.overlay === true ? "80%" : "100%";
103
- }, function (props) {
104
- return props.theme.thickness;
105
- }, function (props) {
106
- return props.theme.totalLineColor;
107
- }, function (props) {
108
- return props.theme.borderRadius;
109
- }, function (props) {
110
- return props.helperText !== "" && "8px";
111
- }, function (props) {
112
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
113
- }, function (props) {
114
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
115
- }, function (props) {
116
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
117
- }, function (props) {
118
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
119
- }, function (props) {
120
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
121
- }, function (props) {
122
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
123
- });
124
-
125
- var InfoProgressBar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (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"])));
126
-
127
- var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (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"])), function (props) {
128
- return props.theme.labelFontFamily;
129
- }, function (props) {
130
- return props.theme.labelFontStyle;
131
- }, function (props) {
132
- return props.theme.labelFontSize;
133
- }, function (props) {
134
- return props.theme.labelFontWeight;
135
- }, function (props) {
136
- return props.theme.labelFontTextTransform;
137
- }, function (props) {
138
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
139
- });
140
-
141
- var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (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"])), function (props) {
142
- return props.theme.valueFontFamily;
143
- }, function (props) {
144
- return props.theme.valueFontStyle;
145
- }, function (props) {
146
- return props.theme.valueFontSize;
147
- }, function (props) {
148
- return props.theme.valueFontWeight;
149
- }, function (props) {
150
- return props.theme.valueFontTextTransform;
151
- }, function (props) {
152
- return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.valueFontColor;
153
- }, function (props) {
154
- return props.value !== "" && props.showValue === true && "block" || "none";
155
- });
156
-
157
- var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
158
- return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
159
- }, function (props) {
160
- return props.theme.helperTextFontFamily;
161
- }, function (props) {
162
- return props.theme.helperTextFontSize;
163
- }, function (props) {
164
- return props.theme.helperTextFontStyle;
165
- }, function (props) {
166
- return props.theme.helperTextFontWeight;
167
- });
168
-
169
- var _default = DxcProgressBar;
170
- exports["default"] = _default;
@@ -1,37 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Size = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare type Props = {
9
- /**
10
- * Text to be placed above the progress bar.
11
- */
12
- label?: string;
13
- /**
14
- * Helper text to be placed under the progress bar.
15
- */
16
- helperText?: string;
17
- /**
18
- * If true, the progress bar will be displayed as a modal.
19
- */
20
- overlay?: boolean;
21
- /**
22
- * The value of the progress indicator. If it's received the component is
23
- * determinate otherwise is indeterminate.
24
- */
25
- value?: number;
26
- /**
27
- * If true, the value is displayed above the progress bar.
28
- */
29
- showValue?: boolean;
30
- /**
31
- * Size of the margin to be applied to the component. You can pass
32
- * an object with 'top', 'bottom', 'left' and 'right' properties
33
- * in order to specify different margin sizes.
34
- */
35
- margin?: Space | Size;
36
- };
37
- export default Props;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/radio/Radio.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import RadioPropsType from "./types";
3
- declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
4
- export default DxcRadio;