@dxc-technology/halstack-react 0.0.0-9196773 → 0.0.0-933ff75

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 (66) hide show
  1. package/dist/V3Textarea/V3Textarea.js +264 -0
  2. package/dist/button/Button.js +1 -1
  3. package/dist/common/variables.js +40 -40
  4. package/dist/date/Date.js +6 -6
  5. package/dist/file-input/FileInput.js +2 -2
  6. package/dist/footer/Footer.js +44 -18
  7. package/dist/footer/Icons.js +77 -0
  8. package/dist/header/Header.js +80 -49
  9. package/dist/header/Icons.js +59 -0
  10. package/dist/input-text/Icons.js +22 -0
  11. package/dist/input-text/InputText.js +4 -6
  12. package/dist/layout/ApplicationLayout.js +4 -8
  13. package/dist/layout/Icons.js +55 -0
  14. package/dist/main.d.ts +1 -1
  15. package/dist/main.js +7 -7
  16. package/dist/paginator/Icons.js +66 -0
  17. package/dist/paginator/Paginator.js +5 -11
  18. package/dist/slider/Slider.js +16 -6
  19. package/dist/textarea/Textarea.js +227 -122
  20. package/dist/{new-textarea → textarea}/index.d.ts +1 -1
  21. package/dist/upload/transaction/Icons.js +160 -0
  22. package/dist/upload/transaction/Transaction.js +11 -38
  23. package/dist/wizard/Icons.js +65 -0
  24. package/dist/wizard/Wizard.js +3 -9
  25. package/package.json +1 -1
  26. package/test/Date.test.js +48 -44
  27. package/test/Footer.test.js +2 -7
  28. package/test/Header.test.js +5 -10
  29. package/test/Slider.test.js +9 -17
  30. package/test/{NewTextarea.test.js → Textarea.test.js} +16 -18
  31. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  32. package/dist/footer/dxc_logo.svg +0 -15
  33. package/dist/footer/readme.md +0 -41
  34. package/dist/header/Header.stories.js +0 -176
  35. package/dist/header/close_icon.svg +0 -1
  36. package/dist/header/dxc_logo_black.svg +0 -8
  37. package/dist/header/hamb_menu_black.svg +0 -1
  38. package/dist/header/hamb_menu_white.svg +0 -1
  39. package/dist/header/readme.md +0 -33
  40. package/dist/input-text/error.svg +0 -1
  41. package/dist/input-text/readme.md +0 -91
  42. package/dist/layout/facebook.svg +0 -45
  43. package/dist/layout/linkedin.svg +0 -50
  44. package/dist/layout/twitter.svg +0 -53
  45. package/dist/new-textarea/NewTextarea.js +0 -369
  46. package/dist/paginator/images/next.svg +0 -3
  47. package/dist/paginator/images/nextPage.svg +0 -3
  48. package/dist/paginator/images/previous.svg +0 -3
  49. package/dist/paginator/images/previousPage.svg +0 -3
  50. package/dist/paginator/readme.md +0 -50
  51. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  52. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  53. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  54. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  55. package/dist/upload/transaction/audio-icon.svg +0 -4
  56. package/dist/upload/transaction/error-icon.svg +0 -4
  57. package/dist/upload/transaction/file-icon-err.svg +0 -4
  58. package/dist/upload/transaction/file-icon.svg +0 -4
  59. package/dist/upload/transaction/image-icon-err.svg +0 -4
  60. package/dist/upload/transaction/image-icon.svg +0 -4
  61. package/dist/upload/transaction/success-icon.svg +0 -4
  62. package/dist/upload/transaction/video-icon-err.svg +0 -4
  63. package/dist/upload/transaction/video-icon.svg +0 -4
  64. package/dist/wizard/invalid_icon.svg +0 -5
  65. package/dist/wizard/valid_icon.svg +0 -5
  66. package/dist/wizard/validation-wrong.svg +0 -6
@@ -1,369 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _utils = require("../common/utils.js");
25
-
26
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
-
28
- var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _uuid = require("uuid");
33
-
34
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
35
-
36
- function _templateObject6() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n min-height: 1.5em;\n line-height: 1.5em;\n"]);
38
-
39
- _templateObject6 = function _templateObject6() {
40
- return data;
41
- };
42
-
43
- return data;
44
- }
45
-
46
- function _templateObject5() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n ", "\n\n margin: calc(1rem * 0.25) 0;\n padding: calc(1rem * 0.5) calc(1rem * 1);\n box-shadow: 0 0 0 2px transparent;\n border-radius: calc(1rem * 0.25);\n border: 1px solid\n ", ";\n ", "\n\n ", ";\n ", ";\n\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n\n ::placeholder {\n color: ", ";\n }\n"]);
48
-
49
- _templateObject5 = function _templateObject5() {
50
- return data;
51
- };
52
-
53
- return data;
54
- }
55
-
56
- function _templateObject4() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
58
-
59
- _templateObject4 = function _templateObject4() {
60
- return data;
61
- };
62
-
63
- return data;
64
- }
65
-
66
- function _templateObject3() {
67
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"]);
68
-
69
- _templateObject3 = function _templateObject3() {
70
- return data;
71
- };
72
-
73
- return data;
74
- }
75
-
76
- function _templateObject2() {
77
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
78
-
79
- _templateObject2 = function _templateObject2() {
80
- return data;
81
- };
82
-
83
- return data;
84
- }
85
-
86
- function _templateObject() {
87
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
88
-
89
- _templateObject = function _templateObject() {
90
- return data;
91
- };
92
-
93
- return data;
94
- }
95
-
96
- var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
97
- return "This field is required. Please, enter a value.";
98
- };
99
-
100
- var getLengthErrorMessage = function getLengthErrorMessage(length) {
101
- return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
102
- };
103
-
104
- var getPatternErrorMessage = function getPatternErrorMessage() {
105
- return "Please match the format requested.";
106
- };
107
-
108
- var patternMatch = function patternMatch(pattern, value) {
109
- return new RegExp(pattern).test(value);
110
- };
111
-
112
- var DxcNewTextarea = _react["default"].forwardRef(function (_ref, ref) {
113
- var _ref$label = _ref.label,
114
- label = _ref$label === void 0 ? "" : _ref$label,
115
- _ref$name = _ref.name,
116
- name = _ref$name === void 0 ? "" : _ref$name,
117
- value = _ref.value,
118
- _ref$helperText = _ref.helperText,
119
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
120
- _ref$placeholder = _ref.placeholder,
121
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
122
- _ref$disabled = _ref.disabled,
123
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
124
- _ref$optional = _ref.optional,
125
- optional = _ref$optional === void 0 ? false : _ref$optional,
126
- _ref$verticalGrow = _ref.verticalGrow,
127
- verticalGrow = _ref$verticalGrow === void 0 ? "auto" : _ref$verticalGrow,
128
- _ref$rows = _ref.rows,
129
- rows = _ref$rows === void 0 ? 4 : _ref$rows,
130
- onChange = _ref.onChange,
131
- onBlur = _ref.onBlur,
132
- _ref$error = _ref.error,
133
- error = _ref$error === void 0 ? "" : _ref$error,
134
- pattern = _ref.pattern,
135
- length = _ref.length,
136
- _ref$autocomplete = _ref.autocomplete,
137
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
138
- margin = _ref.margin,
139
- _ref$size = _ref.size,
140
- size = _ref$size === void 0 ? "medium" : _ref$size,
141
- _ref$tabIndex = _ref.tabIndex,
142
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
143
-
144
- var _useState = (0, _react.useState)(""),
145
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
146
- innerValue = _useState2[0],
147
- setInnerValue = _useState2[1];
148
-
149
- var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
150
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
151
- textareaId = _useState4[0];
152
-
153
- var colorsTheme = (0, _useTheme["default"])();
154
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
155
- var textareaRef = (0, _react.useRef)(null);
156
- var errorId = "error-message-".concat(textareaId);
157
-
158
- var isNotOptional = function isNotOptional(value) {
159
- return value === "" && !optional;
160
- };
161
-
162
- var isLengthIncorrect = function isLengthIncorrect(value) {
163
- return value !== "" && length && length.min && length.max && (value.length < length.min || value.length > length.max);
164
- };
165
-
166
- var changeValue = function changeValue(newValue) {
167
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
168
- if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
169
- value: newValue,
170
- error: getNotOptionalErrorMessage()
171
- });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
172
- value: newValue,
173
- error: getLengthErrorMessage(length)
174
- });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
175
- value: newValue,
176
- error: getPatternErrorMessage()
177
- });else onChange === null || onChange === void 0 ? void 0 : onChange({
178
- value: newValue,
179
- error: null
180
- });
181
- };
182
-
183
- var handleTOnBlur = function handleTOnBlur(event) {
184
- if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
185
- value: event.target.value,
186
- error: getNotOptionalErrorMessage()
187
- });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
188
- value: event.target.value,
189
- error: getLengthErrorMessage(length)
190
- });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
191
- value: event.target.value,
192
- error: getPatternErrorMessage()
193
- });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
194
- value: event.target.value,
195
- error: null
196
- });
197
- };
198
-
199
- var handleTOnChange = function handleTOnChange(event) {
200
- changeValue(event.target.value);
201
- };
202
-
203
- (0, _react.useLayoutEffect)(function () {
204
- if (verticalGrow === "auto") {
205
- var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
206
- var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
207
- textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
208
- var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
209
- textareaRef.current.style.height = "".concat(newHeight, "px");
210
- }
211
- }, [value, verticalGrow, rows, innerValue]);
212
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
213
- theme: colorsTheme.newTextarea
214
- }, _react["default"].createElement(DxcTextarea, {
215
- margin: margin,
216
- size: size,
217
- ref: ref
218
- }, _react["default"].createElement(Label, {
219
- htmlFor: textareaId,
220
- disabled: disabled,
221
- backgroundType: backgroundType
222
- }, label, " ", optional && _react["default"].createElement(OptionalLabel, null, "(Optional)")), _react["default"].createElement(HelperText, {
223
- disabled: disabled,
224
- backgroundType: backgroundType
225
- }, helperText), _react["default"].createElement(Textarea, {
226
- id: textareaId,
227
- name: name,
228
- value: value !== null && value !== void 0 ? value : innerValue,
229
- placeholder: placeholder,
230
- verticalGrow: verticalGrow,
231
- rows: rows,
232
- onChange: handleTOnChange,
233
- onBlur: handleTOnBlur,
234
- disabled: disabled,
235
- error: error,
236
- minLength: length === null || length === void 0 ? void 0 : length.min,
237
- maxLength: length === null || length === void 0 ? void 0 : length.max,
238
- autoComplete: autocomplete,
239
- backgroundType: backgroundType,
240
- ref: textareaRef,
241
- tabIndex: tabIndex,
242
- "aria-invalid": error ? "true" : "false",
243
- "aria-describedby": error ? errorId : undefined,
244
- "aria-required": optional ? "false" : "true"
245
- }), !disabled && _react["default"].createElement(Error, {
246
- id: errorId,
247
- backgroundType: backgroundType
248
- }, error)));
249
- });
250
-
251
- var sizes = {
252
- small: "240px",
253
- medium: "360px",
254
- large: "480px",
255
- fillParent: "100%"
256
- };
257
-
258
- var calculateWidth = function calculateWidth(margin, size) {
259
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
260
- };
261
-
262
- var DxcTextarea = _styledComponents["default"].div(_templateObject(), function (props) {
263
- return calculateWidth(props.margin, props.size);
264
- }, function (props) {
265
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
266
- }, function (props) {
267
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
268
- }, function (props) {
269
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
270
- }, function (props) {
271
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
272
- }, function (props) {
273
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
274
- });
275
-
276
- var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
277
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
278
- }, function (props) {
279
- return props.theme.fontFamily;
280
- }, function (props) {
281
- return props.theme.labelFontSize;
282
- }, function (props) {
283
- return props.theme.labelFontStyle;
284
- }, function (props) {
285
- return props.theme.labelFontWeight;
286
- }, function (props) {
287
- return props.theme.labelLineHeight;
288
- });
289
-
290
- var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
291
- return props.theme.optionalLabelFontWeight;
292
- });
293
-
294
- var HelperText = _styledComponents["default"].span(_templateObject4(), function (props) {
295
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
296
- }, function (props) {
297
- return props.theme.fontFamily;
298
- }, function (props) {
299
- return props.theme.helperTextFontSize;
300
- }, function (props) {
301
- return props.theme.helperTextFontStyle;
302
- }, function (props) {
303
- return props.theme.helperTextFontWeight;
304
- }, function (props) {
305
- return props.theme.helperTextLineHeight;
306
- });
307
-
308
- var Textarea = _styledComponents["default"].textarea(_templateObject5(), function (props) {
309
- if (props.verticalGrow === "none") return "resize: none;";else if (props.verticalGrow === "auto") return "resize: none; overflow: hidden;";else if (props.verticalGrow === "manual") return "resize: vertical;";else return "resize: none;";
310
- }, function (props) {
311
- if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");else return "background-color: transparent;";
312
- }, function (props) {
313
- if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
314
- }, function (props) {
315
- return props.error && !props.disabled && "border-color: transparent;\n box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n ");
316
- }, function (props) {
317
- return props.disabled && "cursor: not-allowed;";
318
- }, function (props) {
319
- return !props.disabled && "\n &:hover {\n border-color: ".concat(props.error ? "transparent" : props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor, ";\n ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.hoverErrorBorderColorOnDark : props.theme.hoverErrorBorderColor, ";"), "\n }\n &:focus {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n &:focus-within {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n ");
320
- }, function (props) {
321
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
322
- }, function (props) {
323
- return props.theme.fontFamily;
324
- }, function (props) {
325
- return props.theme.valueFontSize;
326
- }, function (props) {
327
- return props.theme.valueFontStyle;
328
- }, function (props) {
329
- return props.theme.valueFontWeight;
330
- }, function (props) {
331
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
332
- });
333
-
334
- var Error = _styledComponents["default"].span(_templateObject6(), function (props) {
335
- return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
336
- }, function (props) {
337
- return props.theme.fontFamily;
338
- });
339
-
340
- DxcNewTextarea.propTypes = {
341
- label: _propTypes["default"].string,
342
- name: _propTypes["default"].string,
343
- value: _propTypes["default"].string,
344
- helperText: _propTypes["default"].string,
345
- placeholder: _propTypes["default"].string,
346
- verticalGrow: _propTypes["default"].oneOf(["auto", "none", "manual"]),
347
- rows: _propTypes["default"].number,
348
- length: _propTypes["default"].shape({
349
- min: _propTypes["default"].number,
350
- max: _propTypes["default"].number
351
- }),
352
- pattern: _propTypes["default"].string,
353
- disabled: _propTypes["default"].bool,
354
- optional: _propTypes["default"].bool,
355
- onChange: _propTypes["default"].func,
356
- onBlur: _propTypes["default"].func,
357
- error: _propTypes["default"].string,
358
- autocomplete: _propTypes["default"].string,
359
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
360
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
361
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
362
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
363
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
364
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
365
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
366
- tabIndex: _propTypes["default"].number
367
- };
368
- var _default = DxcNewTextarea;
369
- exports["default"] = _default;
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="7.41" height="12" viewBox="0 0 7.41 12">
2
- <path id="Path_2461" data-name="Path 2461" d="M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z" transform="translate(-8.59 -6)"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="12.41" height="12" viewBox="0 0 12.41 12">
2
- <path id="Path_2465" data-name="Path 2465" d="M5.59,7.41,10.18,12,5.59,16.59,7,18l6-6L7,6ZM16,6h2V18H16Z" transform="translate(-5.59 -6)"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="7.41" height="12" viewBox="0 0 7.41 12">
2
- <path id="Path_2459" data-name="Path 2459" d="M15.41,7.41,14,6,8,12l6,6,1.41-1.41L10.83,12Z" transform="translate(-8 -6)"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="12.41" height="12" viewBox="0 0 12.41 12">
2
- <path id="Path_2463" data-name="Path 2463" d="M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z" transform="translate(-6 -6)"/>
3
- </svg>
@@ -1,50 +0,0 @@
1
- # DXC Paginator Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>currentPage: number</td>
13
- <td><code>1</code></td>
14
- <td>Current page.</td>
15
- </tr>
16
- <tr>
17
- <td>itemsPerPage: number</td>
18
- <td><code>5</code></td>
19
- <td>Number of items to be displayed on each page.</td>
20
- </tr>
21
- <tr>
22
- <td>totalItems: number</td>
23
- <td></td>
24
- <td>Total number of items.</td>
25
- </tr>
26
- <tr>
27
- <td>nextFunction: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the next page button.<br>
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>prevFunction: function</td>
34
- <td></td>
35
- <td>This function will be called when the user clicks the previous page button.<br>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td>lastFunction: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the last page button.<br>
42
- </td>
43
- </tr>
44
- <tr>
45
- <td>firstFunction: function</td>
46
- <td></td>
47
- <td>This function will be called when the user clicks the first page button.<br>
48
- </td>
49
- </tr>
50
- </table>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#50B50F">
2
- <path fill="none" d="M0 0h24v24H0z"/>
3
- <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,5 +0,0 @@
1
- <svg id="highlight_off_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
2
- <path id="Path_2943" data-name="Path 2943" d="M0,0H18V18H0Z" fill="none"/>
3
- <path id="Path_2944" data-name="Path 2944" d="M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z" transform="translate(-1.002 -1.002)" fill="#ffe6e9"/>
4
- <path id="Path_2945" data-name="Path 2945" d="M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z" transform="translate(-0.501 -0.501)" fill="#d0011b"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg id="check_circle_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
2
- <path id="Path_2946" data-name="Path 2946" d="M0,0H18V18H0Z" fill="none"/>
3
- <path id="Path_2947" data-name="Path 2947" d="M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z" transform="translate(-0.986 -0.986)" fill="#eafaef" opacity="0.999"/>
4
- <path id="Path_2948" data-name="Path 2948" d="M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z" transform="translate(-0.493 -0.493)" fill="#24a148"/>
5
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
2
- <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
3
- <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
4
- <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
5
- </g>
6
- </svg>