@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.
- package/dist/V3Textarea/V3Textarea.js +264 -0
- package/dist/button/Button.js +1 -1
- package/dist/common/variables.js +40 -40
- package/dist/date/Date.js +6 -6
- package/dist/file-input/FileInput.js +2 -2
- package/dist/footer/Footer.js +44 -18
- package/dist/footer/Icons.js +77 -0
- package/dist/header/Header.js +80 -49
- package/dist/header/Icons.js +59 -0
- package/dist/input-text/Icons.js +22 -0
- package/dist/input-text/InputText.js +4 -6
- package/dist/layout/ApplicationLayout.js +4 -8
- package/dist/layout/Icons.js +55 -0
- package/dist/main.d.ts +1 -1
- package/dist/main.js +7 -7
- package/dist/paginator/Icons.js +66 -0
- package/dist/paginator/Paginator.js +5 -11
- package/dist/slider/Slider.js +16 -6
- package/dist/textarea/Textarea.js +227 -122
- package/dist/{new-textarea → textarea}/index.d.ts +1 -1
- package/dist/upload/transaction/Icons.js +160 -0
- package/dist/upload/transaction/Transaction.js +11 -38
- package/dist/wizard/Icons.js +65 -0
- package/dist/wizard/Wizard.js +3 -9
- package/package.json +1 -1
- package/test/Date.test.js +48 -44
- package/test/Footer.test.js +2 -7
- package/test/Header.test.js +5 -10
- package/test/Slider.test.js +9 -17
- package/test/{NewTextarea.test.js → Textarea.test.js} +16 -18
- package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
- package/dist/footer/dxc_logo.svg +0 -15
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.svg +0 -8
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/new-textarea/NewTextarea.js +0 -369
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/wizard/invalid_icon.svg +0 -5
- package/dist/wizard/valid_icon.svg +0 -5
- 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;
|
package/dist/paginator/readme.md
DELETED
|
@@ -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="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,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>
|