@dxc-technology/halstack-react 0.0.0-14e13eb → 0.0.0-58e75a5

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 (38) hide show
  1. package/dist/ThemeContext.js +2 -2
  2. package/dist/accordion/Accordion.js +32 -30
  3. package/dist/alert/Alert.js +8 -4
  4. package/dist/box/Box.js +1 -9
  5. package/dist/checkbox/Checkbox.js +5 -5
  6. package/dist/chip/Chip.js +21 -25
  7. package/dist/common/variables.js +329 -269
  8. package/dist/date/Date.js +3 -3
  9. package/dist/dialog/Dialog.js +7 -2
  10. package/dist/dropdown/Dropdown.js +6 -6
  11. package/dist/footer/Footer.js +19 -31
  12. package/dist/header/Header.js +17 -25
  13. package/dist/heading/Heading.js +1 -5
  14. package/dist/input-text/InputText.js +92 -57
  15. package/dist/link/Link.js +2 -2
  16. package/dist/main.js +8 -0
  17. package/dist/new-date/NewDate.js +4 -0
  18. package/dist/new-input-text/NewInputText.js +1 -1
  19. package/dist/new-textarea/NewTextarea.js +342 -0
  20. package/dist/paginator/Paginator.js +10 -4
  21. package/dist/select/Select.js +78 -56
  22. package/dist/sidenav/Sidenav.js +6 -12
  23. package/dist/spinner/Spinner.js +20 -16
  24. package/dist/table/Table.js +5 -1
  25. package/dist/tag/Tag.js +13 -5
  26. package/dist/textarea/Textarea.js +26 -22
  27. package/dist/toggle-group/ToggleGroup.js +1 -1
  28. package/dist/upload/buttons-upload/ButtonsUpload.js +5 -1
  29. package/dist/upload/dragAndDropArea/DragAndDropArea.js +10 -6
  30. package/dist/upload/file-upload/FileToUpload.js +1 -1
  31. package/dist/upload/transaction/Transaction.js +13 -9
  32. package/dist/upload/transactions/Transactions.js +11 -11
  33. package/dist/wizard/Wizard.js +8 -8
  34. package/package.json +1 -1
  35. package/test/NewDate.test.js +7 -4
  36. package/test/NewInputText.test.js +5 -5
  37. package/test/NewTextarea.test.js +201 -0
  38. package/test/Select.test.js +4 -7
package/dist/input-text/InputText.js CHANGED
@@ -43,10 +43,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
43
 
44
44
  var _error = _interopRequireDefault(require("./error.svg"));
45
45
 
46
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
46
+ var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
47
47
 
48
48
  function _templateObject10() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n position: relative;\n\n height: auto;\n width: ", ";\n .MuiTextField-root {\n width: 100%;\n font-family: ", ";\n\n .MuiFormHelperText-root {\n font-weight: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", " !important;\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n color: ", ";\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n padding-left: ", ";\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: ", ";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n &::after {\n border-bottom: ", ";\n }\n\n &.Mui-error {\n &::before {\n border-width: ", ";\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: 2px;\n border-color: ", ";\n transform: scaleX(1);\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n .MuiInputBase-input {\n padding-left: ", ";\n color: ", ";\n text-overflow: ellipsis;\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n .MuiInputAdornment-root {\n height: 20px;\n color: ", ";\n &.MuiInputAdornment-positionEnd {\n & > p {\n font-family: ", ";\n\n color: ", ";\n margin-right: 8px;\n margin-bottom: 1px;\n }\n }\n &.Mui-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", " !important;\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n\n .MuiTextField-root {\n width: 100%;\n font-family: ", ";\n\n .MuiFormHelperText-root {\n font-weight: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", " !important;\n margin-top: 6px;\n }\n\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-left: ", ";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: ", ";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n\n &::after {\n border-bottom: ", ";\n }\n\n &.Mui-error {\n &::before {\n border-width: ", ";\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: calc(", " + 1px);\n border-color: ", ";\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n\n .MuiInputBase-input {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-left: ", ";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n\n .MuiInputAdornment-root {\n height: 20px;\n\n &.MuiInputAdornment-positionEnd {\n & > p {\n font-family: ", ";\n margin-right: 8px;\n margin-bottom: 1px;\n }\n }\n &.Mui-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom-color: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", " !important;\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
50
50
 
51
51
  _templateObject10 = function _templateObject10() {
52
52
  return data;
@@ -116,7 +116,7 @@ function _templateObject4() {
116
116
  }
117
117
 
118
118
  function _templateObject3() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n .MuiPaper-root {\n max-height: 250px;\n overflow: auto;\n ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n li {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n }\n"]);
119
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n .MuiPaper-root {\n max-height: 250px;\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n border-style: ", ";\n overflow: auto;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n\n li {\n padding-bottom: ", ";\n padding-top: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n }\n"]);
120
120
 
121
121
  _templateObject3 = function _templateObject3() {
122
122
  return data;
@@ -333,6 +333,28 @@ var DxcInputText = function DxcInputText(_ref) {
333
333
  }
334
334
  };
335
335
 
336
+ var ThemedSuggestions = function ThemedSuggestions() {
337
+ var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
338
+ return _react["default"].createElement(SuggestionsContainer, {
339
+ margin: margin,
340
+ size: size,
341
+ backgroundType: backgroundType
342
+ }, _react["default"].createElement(_Paper["default"], null, isOpen && !isSearching && !isError && filteredOptions.length === 0 && _react["default"].createElement(_MenuItem["default"], null, "No matches found."), isOpen && !isSearching && filteredOptions.length > 0 && filteredOptions.map(function (suggestion) {
343
+ return _react["default"].createElement(_MenuItem["default"], {
344
+ key: suggestion,
345
+ disableRipple: true,
346
+ onMouseDown: function onMouseDown(event) {
347
+ return event.preventDefault();
348
+ },
349
+ onClick: function onClick() {
350
+ return handlerSuggestionClicked(suggestion);
351
+ }
352
+ }, suggestion);
353
+ }), isSearching && _react["default"].createElement(_MenuItem["default"], null, "Searching..."), isError && _react["default"].createElement(_MenuItem["default"], null, "Error fetching data", _react["default"].createElement(ErrorIcon, {
354
+ src: _error["default"]
355
+ }))));
356
+ };
357
+
336
358
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
337
359
  theme: colorsTheme.inputText
338
360
  }, _react["default"].createElement(TextContainer, {
@@ -422,23 +444,9 @@ var DxcInputText = function DxcInputText(_ref) {
422
444
  marginTop: "0px"
423
445
  }
424
446
  }
425
- }, _react["default"].createElement(SuggestionsContainer, {
426
- margin: margin,
427
- size: size
428
- }, _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Paper["default"], null, isOpen && !isSearching && !isError && filteredOptions.length === 0 && _react["default"].createElement(_MenuItem["default"], null, "No matches found."), isOpen && !isSearching && filteredOptions.length > 0 && filteredOptions.map(function (suggestion) {
429
- return _react["default"].createElement(_MenuItem["default"], {
430
- key: suggestion,
431
- disableRipple: true,
432
- onMouseDown: function onMouseDown(event) {
433
- return event.preventDefault();
434
- },
435
- onClick: function onClick() {
436
- return handlerSuggestionClicked(suggestion);
437
- }
438
- }, suggestion);
439
- }), isSearching && _react["default"].createElement(_MenuItem["default"], null, "Searching..."), isError && _react["default"].createElement(_MenuItem["default"], null, "Error fetching data", _react["default"].createElement(ErrorIcon, {
440
- src: _error["default"]
441
- })))))));
447
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
448
+ color: colorsTheme.inputText.optionBackgroundColor
449
+ }, _react["default"].createElement(ThemedSuggestions, null))));
442
450
  };
443
451
 
444
452
  var sizes = {
@@ -474,16 +482,38 @@ var DxcSuggestions = (0, _styledComponents["default"])(_Popper["default"])(_temp
474
482
 
475
483
  var SuggestionsContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
476
484
  return calculateWidth(props.margin, props.size);
485
+ }, function (props) {
486
+ return props.theme.optionBackgroundColor;
487
+ }, function (props) {
488
+ return props.theme.fontFamily;
489
+ }, function (props) {
490
+ return props.theme.optionFontSize;
491
+ }, function (props) {
492
+ return props.theme.optionFontStyle;
493
+ }, function (props) {
494
+ return props.theme.optionFontWeight;
495
+ }, function (props) {
496
+ return props.backgroundType === "dark" ? props.theme.optionFontColorOnDark : props.theme.optionFontColor;
497
+ }, function (props) {
498
+ return props.theme.optionBorderColor;
499
+ }, function (props) {
500
+ return props.theme.optionBorderThickness;
501
+ }, function (props) {
502
+ return props.theme.optionBorderStyle;
477
503
  }, function (props) {
478
504
  return props.theme.scrollBarTrackColor;
479
505
  }, function (props) {
480
506
  return props.theme.scrollBarThumbColor;
507
+ }, function (props) {
508
+ return props.theme.optionPaddingBottom;
509
+ }, function (props) {
510
+ return props.theme.optionPaddingTop;
481
511
  }, function (props) {
482
512
  return props.theme.hoverOptionColor;
483
513
  }, function (props) {
484
- return props.theme.hoverOptionBackgroundColor;
514
+ return props.backgroundType === "dark" ? props.theme.hoverOptionBackgroundColorOnDark : props.theme.hoverOptionBackgroundColor;
485
515
  }, function (props) {
486
- return props.theme.selectedOptionBackgroundColor;
516
+ return props.backgroundType === "dark" ? props.theme.selectedOptionBackgroundColorOnDark : props.theme.selectedOptionBackgroundColor;
487
517
  });
488
518
 
489
519
  var PrefixIcon = _styledComponents["default"].img(_templateObject4(), function (props) {
@@ -493,7 +523,7 @@ var PrefixIcon = _styledComponents["default"].img(_templateObject4(), function (
493
523
  });
494
524
 
495
525
  var PrefixIconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
496
- return props.backgroundType === "dark" ? props.theme.prefixIconColorOnDark || props.theme.fontColorBaseOnDark : props.theme.prefixIconColor || props.theme.fontColorBase;
526
+ return props.backgroundType === "dark" ? props.theme.prefixIconColorOnDark : props.theme.prefixIconColor;
497
527
  }, function (props) {
498
528
  return props.disabled && 0.5 || 1;
499
529
  }, function (props) {
@@ -503,13 +533,13 @@ var PrefixIconContainer = _styledComponents["default"].div(_templateObject5(), f
503
533
  var PrefixLabel = _styledComponents["default"].span(_templateObject6(), function (props) {
504
534
  return props.theme.prefixLabelFontWeight;
505
535
  }, function (props) {
506
- return props.theme.fontFamilyBase;
536
+ return props.theme.fontFamily;
507
537
  }, function (props) {
508
538
  return props.theme.prefixLabelFontSize;
509
539
  }, function (props) {
510
540
  return props.theme.prefixLabelFontStyle;
511
541
  }, function (props) {
512
- return props.backgroundType === "dark" ? props.theme.prefixLabelFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.prefixLabelFontColor || props.theme.fontColorBase;
542
+ return props.backgroundType === "dark" ? props.theme.prefixLabelFontColorOnDark : props.theme.prefixLabelFontColor;
513
543
  }, function (props) {
514
544
  return props.disabled && 0.5 || 1;
515
545
  }, function (props) {
@@ -523,7 +553,7 @@ var SuffixIcon = _styledComponents["default"].img(_templateObject7(), function (
523
553
  });
524
554
 
525
555
  var SuffixIconContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
526
- return props.backgroundType === "dark" ? props.theme.suffixIconColorOnDark || props.theme.fontColorBaseOnDark : props.theme.suffixIconColor || props.theme.fontColorBase;
556
+ return props.backgroundType === "dark" ? props.theme.suffixIconColorOnDark : props.theme.suffixIconColor;
527
557
  }, function (props) {
528
558
  return props.disabled && 0.5 || 1;
529
559
  }, function (props) {
@@ -535,18 +565,16 @@ var SuffixLabel = _styledComponents["default"].span(_templateObject9(), function
535
565
  }, function (props) {
536
566
  return props.theme.suffixLabelFontWeight;
537
567
  }, function (props) {
538
- return props.theme.fontFamilyBase;
568
+ return props.theme.fontFamily;
539
569
  }, function (props) {
540
570
  return props.theme.suffixLabelFontSize;
541
571
  }, function (props) {
542
572
  return props.theme.suffixLabelFontStyle;
543
573
  }, function (props) {
544
- return props.backgroundType === "dark" ? props.theme.suffixLabelFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.suffixLabelFontColor || props.theme.fontColorBase;
574
+ return props.backgroundType === "dark" ? props.theme.suffixLabelFontColorOnDark : props.theme.suffixLabelFontColor;
545
575
  });
546
576
 
547
577
  var TextContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
548
- return props.theme.fontSizeBase;
549
- }, function (props) {
550
578
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
551
579
  }, function (props) {
552
580
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -559,88 +587,95 @@ var TextContainer = _styledComponents["default"].div(_templateObject10(), functi
559
587
  }, function (props) {
560
588
  return calculateWidth(props.margin, props.size);
561
589
  }, function (props) {
562
- return props.theme.fontFamilyBase;
590
+ return props.theme.fontFamily;
563
591
  }, function (props) {
564
592
  return props.theme.assistiveTextFontWeight;
565
593
  }, function (props) {
566
- return props.theme.fontFamilyBase;
594
+ return props.theme.fontFamily;
567
595
  }, function (props) {
568
596
  return props.theme.assistiveTextFontSize;
569
597
  }, function (props) {
570
598
  return props.theme.assistiveTextFontStyle;
571
599
  }, function (props) {
572
- return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.assistiveTextFontColor || props.theme.fontColorBase;
600
+ return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
573
601
  }, function (props) {
574
602
  return props.theme.labelFontSize;
575
603
  }, function (props) {
576
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
604
+ return props.theme.labelFontStyle;
605
+ }, function (props) {
606
+ return props.theme.labelFontWeight;
577
607
  }, function (props) {
578
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
608
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
579
609
  }, function (props) {
580
610
  return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
581
611
  }, function (props) {
582
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
612
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
613
+ }, function (props) {
614
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
583
615
  }, function (props) {
584
616
  return props.prefixIconSrc || props.prefixIcon || (props.prefix || props.suffix) && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
585
617
  }, function (props) {
586
- return props.theme.fontFamilyBase;
618
+ return props.theme.fontFamily;
587
619
  }, function (props) {
588
620
  return props.prefixIcon && "translate(8px, 1.5px) scale(0.75);" || props.prefixIconSrc && "translate(8px, 1.5px) scale(0.75);" || props.prefix && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
589
621
  }, function (props) {
590
622
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
591
623
  }, function (props) {
592
- return props.theme.fontFamilyBase;
624
+ return props.theme.fontFamily;
593
625
  }, function (props) {
594
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
626
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
595
627
  }, function (props) {
596
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
628
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
597
629
  }, function (props) {
598
- return props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase;
630
+ return props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor;
599
631
  }, function (props) {
600
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
632
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
601
633
  }, function (props) {
602
- return props.theme.fontFamilyBase;
634
+ return props.theme.fontFamily;
603
635
  }, function (props) {
604
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase);
636
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
605
637
  }, function (props) {
606
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase);
638
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
607
639
  }, function (props) {
608
- return "2px solid ".concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineFocusColor || props.theme.fontColorBase);
640
+ return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
609
641
  }, function (props) {
610
642
  return props.theme.underlineThickness;
611
643
  }, function (props) {
612
644
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
613
645
  }, function (props) {
614
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineFocusColor || props.theme.fontColorBase;
646
+ return props.theme.underlineThickness;
647
+ }, function (props) {
648
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
615
649
  }, function (props) {
616
650
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
617
651
  }, function (props) {
618
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor, " !important");
652
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
619
653
  }, function (props) {
620
- return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
654
+ return props.theme.valueFontSize;
655
+ }, function (props) {
656
+ return props.theme.valueFontStyle;
621
657
  }, function (props) {
622
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
658
+ return props.theme.valueFontWeight;
623
659
  }, function (props) {
624
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
660
+ return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
625
661
  }, function (props) {
626
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
662
+ return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
627
663
  }, function (props) {
628
- return props.theme.fontFamilyBase;
664
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
629
665
  }, function (props) {
630
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
666
+ return props.theme.fontFamily;
631
667
  }, function (props) {
632
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
668
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
633
669
  }, function (props) {
634
670
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
635
671
  }, function (props) {
636
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
672
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
637
673
  });
638
674
 
639
675
  DxcInputText.propTypes = {
640
676
  label: _propTypes["default"].string,
641
677
  name: _propTypes["default"].string,
642
678
  value: _propTypes["default"].string,
643
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
644
679
  assistiveText: _propTypes["default"].string,
645
680
  disabled: _propTypes["default"].bool,
646
681
  prefix: _propTypes["default"].string,
package/dist/link/Link.js CHANGED
@@ -206,7 +206,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (pr
206
206
  }, function (props) {
207
207
  return props.iconPosition === "before" ? "margin-right" : "margin-left";
208
208
  }, function (props) {
209
- return props.theme.iconGutter;
209
+ return props.theme.iconSpacing;
210
210
  });
211
211
 
212
212
  var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
@@ -216,7 +216,7 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), fun
216
216
  }, function (props) {
217
217
  return props.iconPosition === "before" ? "margin-right" : "margin-left";
218
218
  }, function (props) {
219
- return props.theme.iconGutter;
219
+ return props.theme.iconSpacing;
220
220
  });
221
221
 
222
222
  DxcLink.propTypes = {
package/dist/main.js CHANGED
@@ -241,6 +241,12 @@ Object.defineProperty(exports, "DxcNumber", {
241
241
  return _Number["default"];
242
242
  }
243
243
  });
244
+ Object.defineProperty(exports, "DxcNewTextarea", {
245
+ enumerable: true,
246
+ get: function get() {
247
+ return _NewTextarea["default"];
248
+ }
249
+ });
244
250
  Object.defineProperty(exports, "ThemeContext", {
245
251
  enumerable: true,
246
252
  get: function get() {
@@ -338,6 +344,8 @@ var _NewDate = _interopRequireDefault(require("./new-date/NewDate"));
338
344
 
339
345
  var _Number = _interopRequireDefault(require("./number/Number"));
340
346
 
347
+ var _NewTextarea = _interopRequireDefault(require("./new-textarea/NewTextarea"));
348
+
341
349
  var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
342
350
 
343
351
  var _BackgroundColorContext = require("./BackgroundColorContext.js");
package/dist/new-date/NewDate.js CHANGED
@@ -63,6 +63,8 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
63
63
  helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
64
64
  _ref$placeholder = _ref.placeholder,
65
65
  placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
66
+ _ref$clearable = _ref.clearable,
67
+ clearable = _ref$clearable === void 0 ? false : _ref$clearable,
66
68
  _ref$disabled = _ref.disabled,
67
69
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
68
70
  _ref$optional = _ref.optional,
@@ -320,6 +322,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
320
322
  helperText: helperText,
321
323
  placeholder: placeholder ? format.toUpperCase() : null,
322
324
  action: calendarAction,
325
+ clearable: clearable,
323
326
  disabled: disabled,
324
327
  optional: optional,
325
328
  onChange: handleIOnChange,
@@ -377,6 +380,7 @@ DxcNewDate.propTypes = {
377
380
  format: _propTypes["default"].string,
378
381
  helperText: _propTypes["default"].string,
379
382
  placeholder: _propTypes["default"].bool,
383
+ clearable: _propTypes["default"].bool,
380
384
  disabled: _propTypes["default"].bool,
381
385
  optional: _propTypes["default"].bool,
382
386
  onChange: _propTypes["default"].func,
package/dist/new-input-text/NewInputText.js CHANGED
@@ -86,7 +86,7 @@ function _templateObject11() {
86
86
  }
87
87
 
88
88
  function _templateObject10() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 18px;\n width: 18px;\n margin-left: calc(1rem * 0.25);\n pointer-events: none;\n color: ", ";\n\n svg {\n line-height: 18px;\n font-size: 1.25rem;\n }\n"]);
89
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n margin-left: calc(1rem * 0.25);\n pointer-events: none;\n color: ", ";\n\n svg {\n line-height: 18px;\n font-size: 1.25rem;\n }\n"]);
90
90
 
91
91
  _templateObject10 = function _templateObject10() {
92
92
  return data;