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

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 (12) hide show
  1. package/dist/alert/Alert.js +4 -4
  2. package/dist/common/variables.js +120 -15
  3. package/dist/file-input/FileInput.js +4 -1
  4. package/dist/main.d.ts +1 -0
  5. package/dist/main.js +8 -0
  6. package/dist/new-input-text/NewInputText.js +25 -40
  7. package/dist/new-select/NewSelect.js +836 -0
  8. package/dist/new-select/index.d.ts +53 -0
  9. package/dist/new-textarea/NewTextarea.js +4 -1
  10. package/dist/number/Number.js +1 -3
  11. package/dist/slider/Slider.js +89 -14
  12. package/package.json +1 -1
package/dist/new-select/index.d.ts ADDED
@@ -0,0 +1,53 @@
1
+ type SVG = string | (HTMLElement & SVGElement);
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 OptionGroup = {
11
+ label: string;
12
+ options: Option[];
13
+ };
14
+ type Option = {
15
+ icon?: string | SVG;
16
+ label: string;
17
+ value: string;
18
+ };
19
+
20
+ type Props = {
21
+ label?: string;
22
+ name?: string;
23
+ value?: string | string[];
24
+ options?: Option[] | OptionGroup[];
25
+ helperText?: string;
26
+ placeholder?: string;
27
+ disabled?: boolean;
28
+ optional?: boolean;
29
+ searchable?: boolean;
30
+ multiple?: boolean;
31
+ onChange?: (value: string | string[]) => void;
32
+ onBlur?: (val: { value: string | string[]; error: string }) => void;
33
+ error?: string;
34
+ /**
35
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
36
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
37
+ */
38
+ margin?: Space | Margin;
39
+ /**
40
+ * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
41
+ */
42
+ size?: "small" | "medium" | "large" | "fillParent";
43
+ /**
44
+ * Value of the tabindex attribute.
45
+ */
46
+ tabIndex?: number;
47
+ /**
48
+ * Reference to the component.
49
+ */
50
+ ref?: React.RefObject<HTMLDivElement>;
51
+ };
52
+
53
+ export default function DxcNewSelect(props: Props): JSX.Element;
package/dist/new-textarea/NewTextarea.js CHANGED
@@ -146,10 +146,13 @@ var DxcNewTextarea = _react["default"].forwardRef(function (_ref, ref) {
146
146
  innerValue = _useState2[0],
147
147
  setInnerValue = _useState2[1];
148
148
 
149
+ var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
150
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
151
+ textareaId = _useState4[0];
152
+
149
153
  var colorsTheme = (0, _useTheme["default"])();
150
154
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
151
155
  var textareaRef = (0, _react.useRef)(null);
152
- var textareaId = "textarea-".concat((0, _uuid.v4)());
153
156
  var errorId = "error-message-".concat(textareaId);
154
157
 
155
158
  var isNotOptional = function isNotOptional(value) {
package/dist/number/Number.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
7
5
  Object.defineProperty(exports, "__esModule", {
@@ -13,7 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
13
11
 
14
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
13
 
16
- var _react = _interopRequireWildcard(require("react"));
14
+ var _react = _interopRequireDefault(require("react"));
17
15
 
18
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
17
 
package/dist/slider/Slider.js CHANGED
@@ -35,9 +35,39 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
35
 
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
- function _templateObject4() {
38
+ function _templateObject7() {
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n"]);
40
+
41
+ _templateObject7 = function _templateObject7() {
42
+ return data;
43
+ };
44
+
45
+ return data;
46
+ }
47
+
48
+ function _templateObject6() {
39
49
  var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-left: ", ";\n"]);
40
50
 
51
+ _templateObject6 = function _templateObject6() {
52
+ return data;
53
+ };
54
+
55
+ return data;
56
+ }
57
+
58
+ function _templateObject5() {
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-right: ", ";\n"]);
60
+
61
+ _templateObject5 = function _templateObject5() {
62
+ return data;
63
+ };
64
+
65
+ return data;
66
+ }
67
+
68
+ function _templateObject4() {
69
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 48px;\n align-items: center;\n\n .MultiSlider-root {\n display: flex;\n align-items: center;\n }\n .MuiSlider-container {\n padding: 30px 24px;\n }\n .MuiSlider-root.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n .Mui-disabled {\n & .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n }\n & .MuiSlider-track {\n background-color: ", ";\n }\n & .MuiSlider-rail {\n background-color: ", ";\n }\n & > .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", " !important;\n }\n & > .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n }\n .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n border-radius: 9999px;\n\n :hover,\n &.Mui-focusVisible {\n box-shadow: none;\n }\n &.MuiSlider-active {\n box-shadow: none;\n }\n :focus {\n outline: ", "\n auto 1px;\n outline-offset: 2px;\n background-color: ", ";\n }\n :hover {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n height: ", ";\n width: ", ";\n top: ", ";\n }\n :active {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n }\n .MuiSlider-track {\n background-color: ", ";\n height: ", ";\n top: ", ";\n border-radius: 9999px;\n }\n .MuiSlider-track.MuiSlider-trackAfter {\n background-color: ", ";\n }\n .MuiSlider-rail {\n background-color: ", ";\n height: ", ";\n top: ", ";\n }\n .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", ";\n }\n .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n"]);
70
+
41
71
  _templateObject4 = function _templateObject4() {
42
72
  return data;
43
73
  };
@@ -46,7 +76,7 @@ function _templateObject4() {
46
76
  }
47
77
 
48
78
  function _templateObject3() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-right: 16px;\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
50
80
 
51
81
  _templateObject3 = function _templateObject3() {
52
82
  return data;
@@ -56,7 +86,7 @@ function _templateObject3() {
56
86
  }
57
87
 
58
88
  function _templateObject2() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n\n .MultiSlider-root {\n display: flex;\n align-items: center;\n }\n .MuiSlider-container {\n padding: 30px 24px;\n }\n .MuiSlider-root.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n .Mui-disabled {\n & .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n }\n & .MuiSlider-track {\n background-color: ", ";\n }\n & .MuiSlider-rail {\n background-color: ", ";\n }\n & > .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", " !important;\n }\n & > .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n }\n .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n border-radius: 9999px;\n\n :hover,\n &.Mui-focusVisible {\n box-shadow: none;\n }\n &.MuiSlider-active {\n box-shadow: none;\n }\n :focus {\n outline: ", "\n auto 1px;\n outline-offset: 2px;\n background-color: ", ";\n }\n :hover {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n :active {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n }\n .MuiSlider-track {\n background-color: ", ";\n height: ", ";\n top: ", ";\n border-radius: 9999px;\n }\n .MuiSlider-track.MuiSlider-trackAfter {\n background-color: ", ";\n }\n .MuiSlider-rail {\n background-color: ", ";\n height: ", ";\n top: ", ";\n }\n .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", ";\n }\n .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n"]);
89
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
60
90
 
61
91
  _templateObject2 = function _templateObject2() {
62
92
  return data;
@@ -66,7 +96,7 @@ function _templateObject2() {
66
96
  }
67
97
 
68
98
  function _templateObject() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 32px;\n\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n"]);
99
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n"]);
70
100
 
71
101
  _templateObject = function _templateObject() {
72
102
  return data;
@@ -76,7 +106,9 @@ function _templateObject() {
76
106
  }
77
107
 
78
108
  var DxcSlider = function DxcSlider(_ref) {
79
- var _ref$minValue = _ref.minValue,
109
+ var label = _ref.label,
110
+ helperText = _ref.helperText,
111
+ _ref$minValue = _ref.minValue,
80
112
  minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
81
113
  _ref$maxValue = _ref.maxValue,
82
114
  maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
@@ -139,9 +171,10 @@ var DxcSlider = function DxcSlider(_ref) {
139
171
 
140
172
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
141
173
  theme: colorsTheme.slider
142
- }, _react["default"].createElement(SliderContainer, {
174
+ }, _react["default"].createElement(Container, {
143
175
  margin: margin,
144
- size: size,
176
+ size: size
177
+ }, _react["default"].createElement(Label, null, label), _react["default"].createElement(HelperText, null, helperText), _react["default"].createElement(SliderContainer, {
145
178
  backgroundType: backgroundType
146
179
  }, showLimitsValues && _react["default"].createElement(MinLabelContainer, {
147
180
  backgroundType: backgroundType,
@@ -167,7 +200,7 @@ var DxcSlider = function DxcSlider(_ref) {
167
200
  disabled: disabled,
168
201
  onChange: handlerInputChange,
169
202
  size: "small"
170
- }))));
203
+ })))));
171
204
  };
172
205
 
173
206
  var sizes = {
@@ -180,9 +213,7 @@ var calculateWidth = function calculateWidth(margin, size) {
180
213
  return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
181
214
  };
182
215
 
183
- var StyledTextInput = _styledComponents["default"].div(_templateObject());
184
-
185
- var SliderContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
216
+ var Container = _styledComponents["default"].div(_templateObject(), function (props) {
186
217
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
187
218
  }, function (props) {
188
219
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -194,7 +225,37 @@ var SliderContainer = _styledComponents["default"].div(_templateObject2(), funct
194
225
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
195
226
  }, function (props) {
196
227
  return calculateWidth(props.margin, props.size);
228
+ });
229
+
230
+ var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
231
+ return props.theme.labelFontColor;
232
+ }, function (props) {
233
+ return props.theme.labelFontFamily;
234
+ }, function (props) {
235
+ return props.theme.labelFontSize;
236
+ }, function (props) {
237
+ return props.theme.labelFontStyle;
238
+ }, function (props) {
239
+ return props.theme.labelFontWeight;
240
+ }, function (props) {
241
+ return props.theme.labelLineHeight;
242
+ });
243
+
244
+ var HelperText = _styledComponents["default"].span(_templateObject3(), function (props) {
245
+ return props.theme.helperTextFontColor;
246
+ }, function (props) {
247
+ return props.theme.helperTextFontFamily;
197
248
  }, function (props) {
249
+ return props.theme.helperTextFontSize;
250
+ }, function (props) {
251
+ return props.theme.helperTextFontstyle;
252
+ }, function (props) {
253
+ return props.theme.helperTextFontWeight;
254
+ }, function (props) {
255
+ return props.theme.helperTextLineHeight;
256
+ });
257
+
258
+ var SliderContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
198
259
  return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
199
260
  }, function (props) {
200
261
  return props.theme.thumbHeight;
@@ -234,6 +295,12 @@ var SliderContainer = _styledComponents["default"].div(_templateObject2(), funct
234
295
  return props.backgroundType === "dark" ? props.theme.hoverThumbBackgroundColorOnDark : props.theme.hoverThumbBackgroundColor;
235
296
  }, function (props) {
236
297
  return props.theme.hoverThumbScale;
298
+ }, function (props) {
299
+ return props.theme.hoverThumbHeight;
300
+ }, function (props) {
301
+ return props.theme.hoverThumbWidth;
302
+ }, function (props) {
303
+ return props.theme.hoverThumbVerticalPosition;
237
304
  }, function (props) {
238
305
  return props.backgroundType === "dark" ? props.theme.activeThumbBackgroundColorOnDark : props.theme.activeThumbBackgroundColor;
239
306
  }, function (props) {
@@ -264,7 +331,7 @@ var SliderContainer = _styledComponents["default"].div(_templateObject2(), funct
264
331
  return props.theme.tickVerticalPosition;
265
332
  });
266
333
 
267
- var MinLabelContainer = _styledComponents["default"].span(_templateObject3(), function (props) {
334
+ var MinLabelContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
268
335
  return props.theme.fontFamily;
269
336
  }, function (props) {
270
337
  return props.theme.fontSize;
@@ -276,9 +343,11 @@ var MinLabelContainer = _styledComponents["default"].span(_templateObject3(), fu
276
343
  return props.disabled ? props.theme.disabledFontColor : props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
277
344
  }, function (props) {
278
345
  return props.theme.fontLetterSpacing;
346
+ }, function (props) {
347
+ return props.theme.floorLabelMarginRight;
279
348
  });
280
349
 
281
- var MaxLabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
350
+ var MaxLabelContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
282
351
  return props.theme.fontFamily;
283
352
  }, function (props) {
284
353
  return props.theme.fontSize;
@@ -291,10 +360,16 @@ var MaxLabelContainer = _styledComponents["default"].span(_templateObject4(), fu
291
360
  }, function (props) {
292
361
  return props.theme.fontLetterSpacing;
293
362
  }, function (props) {
294
- return props.step === 1 ? "16px" : "20px";
363
+ return props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem";
364
+ });
365
+
366
+ var StyledTextInput = _styledComponents["default"].div(_templateObject7(), function (props) {
367
+ return props.theme.inputMarginLeft;
295
368
  });
296
369
 
297
370
  DxcSlider.propTypes = {
371
+ label: _propTypes["default"].string,
372
+ helperText: _propTypes["default"].string,
298
373
  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
299
374
  minValue: _propTypes["default"].number,
300
375
  maxValue: _propTypes["default"].number,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "0.0.0-a9c6846",
3
+ "version": "0.0.0-aa1e975",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "http://developer.dxc.com/tools/react",