@dxc-technology/halstack-react 0.0.0-2bcc6e9 → 0.0.0-2ea264d

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 (116) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/accordion/Accordion.js +72 -59
  4. package/dist/accordion-group/AccordionGroup.js +1 -3
  5. package/dist/alert/Alert.js +126 -111
  6. package/dist/alert/index.d.ts +51 -0
  7. package/dist/box/Box.js +1 -11
  8. package/dist/button/Button.js +30 -20
  9. package/dist/checkbox/Checkbox.js +30 -21
  10. package/dist/chip/Chip.js +21 -25
  11. package/dist/common/variables.js +967 -553
  12. package/dist/date/Date.js +13 -15
  13. package/dist/date-input/DateInput.js +400 -0
  14. package/dist/date-input/index.d.ts +95 -0
  15. package/dist/dialog/Dialog.js +15 -32
  16. package/dist/dropdown/Dropdown.js +123 -71
  17. package/dist/file-input/FileInput.js +644 -0
  18. package/dist/file-input/FileItem.js +280 -0
  19. package/dist/file-input/index.d.ts +81 -0
  20. package/dist/footer/Footer.js +69 -53
  21. package/dist/footer/Icons.js +77 -0
  22. package/dist/header/Header.js +89 -86
  23. package/dist/header/Icons.js +59 -0
  24. package/dist/heading/Heading.js +1 -5
  25. package/dist/input-text/InputText.js +96 -58
  26. package/dist/layout/ApplicationLayout.js +1 -1
  27. package/dist/link/Link.js +23 -26
  28. package/dist/main.d.ts +8 -0
  29. package/dist/main.js +62 -6
  30. package/dist/new-select/NewSelect.js +836 -0
  31. package/dist/new-select/index.d.ts +53 -0
  32. package/dist/number-input/NumberInput.js +136 -0
  33. package/dist/number-input/NumberInputContext.js +16 -0
  34. package/dist/number-input/index.d.ts +113 -0
  35. package/dist/paginator/Paginator.js +10 -4
  36. package/dist/password-input/PasswordInput.js +198 -0
  37. package/dist/password-input/index.d.ts +94 -0
  38. package/dist/progress-bar/ProgressBar.js +63 -27
  39. package/dist/resultsetTable/ResultsetTable.js +5 -22
  40. package/dist/select/Select.js +189 -185
  41. package/dist/sidenav/Sidenav.js +11 -15
  42. package/dist/slider/Slider.js +141 -62
  43. package/dist/spinner/Spinner.js +225 -58
  44. package/dist/table/Table.js +6 -2
  45. package/dist/tag/Tag.js +38 -36
  46. package/dist/text-input/TextInput.js +971 -0
  47. package/dist/text-input/index.d.ts +135 -0
  48. package/dist/textarea/Textarea.js +233 -124
  49. package/dist/textarea/index.d.ts +117 -0
  50. package/dist/toggle-group/ToggleGroup.js +130 -44
  51. package/dist/upload/Upload.js +3 -3
  52. package/dist/upload/buttons-upload/ButtonsUpload.js +5 -1
  53. package/dist/upload/dragAndDropArea/DragAndDropArea.js +10 -6
  54. package/dist/upload/file-upload/FileToUpload.js +1 -1
  55. package/dist/upload/readme.md +2 -2
  56. package/dist/upload/transaction/Transaction.js +12 -8
  57. package/dist/upload/transactions/Transactions.js +11 -11
  58. package/dist/wizard/Wizard.js +13 -13
  59. package/dist/wizard/invalid_icon.svg +4 -5
  60. package/dist/wizard/valid_icon.svg +4 -5
  61. package/package.json +4 -2
  62. package/test/Date.test.js +48 -44
  63. package/test/DateInput.test.js +242 -0
  64. package/test/Dropdown.test.js +15 -0
  65. package/test/FileInput.test.js +201 -0
  66. package/test/Footer.test.js +2 -7
  67. package/test/Header.test.js +5 -10
  68. package/test/InputText.test.js +24 -16
  69. package/test/NumberInput.test.js +259 -0
  70. package/test/Paginator.test.js +1 -1
  71. package/test/PasswordInput.test.js +83 -0
  72. package/test/ResultsetTable.test.js +1 -2
  73. package/test/Select.test.js +44 -24
  74. package/test/Spinner.test.js +5 -0
  75. package/test/TextInput.test.js +732 -0
  76. package/test/Textarea.test.js +193 -0
  77. package/test/ToggleGroup.test.js +5 -1
  78. package/test/Upload.test.js +5 -5
  79. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  80. package/dist/accordion/Accordion.stories.js +0 -207
  81. package/dist/accordion/readme.md +0 -96
  82. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  83. package/dist/accordion-group/readme.md +0 -70
  84. package/dist/alert/Alert.stories.js +0 -158
  85. package/dist/alert/close.svg +0 -4
  86. package/dist/alert/error.svg +0 -4
  87. package/dist/alert/info.svg +0 -4
  88. package/dist/alert/readme.md +0 -43
  89. package/dist/alert/success.svg +0 -4
  90. package/dist/alert/warning.svg +0 -4
  91. package/dist/button/Button.stories.js +0 -224
  92. package/dist/button/readme.md +0 -93
  93. package/dist/dialog/Dialog.stories.js +0 -217
  94. package/dist/dialog/readme.md +0 -32
  95. package/dist/dropdown/Dropdown.stories.js +0 -249
  96. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  97. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  98. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  99. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  100. package/dist/dropdown/readme.md +0 -69
  101. package/dist/footer/Footer.stories.js +0 -94
  102. package/dist/footer/dxc_logo_wht.png +0 -0
  103. package/dist/footer/readme.md +0 -41
  104. package/dist/header/Header.stories.js +0 -176
  105. package/dist/header/close_icon.svg +0 -1
  106. package/dist/header/dxc_logo_black.png +0 -0
  107. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  108. package/dist/header/dxc_logo_white.png +0 -0
  109. package/dist/header/hamb_menu_black.svg +0 -1
  110. package/dist/header/hamb_menu_white.svg +0 -1
  111. package/dist/header/readme.md +0 -33
  112. package/dist/input-text/InputText.stories.js +0 -209
  113. package/dist/select/Select.stories.js +0 -235
  114. package/dist/select/readme.md +0 -72
  115. package/dist/slider/Slider.stories.js +0 -241
  116. package/dist/toggle-group/readme.md +0 -82
package/dist/button/Button.js CHANGED
@@ -32,7 +32,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
32
32
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
33
33
 
34
34
  function _templateObject4() {
35
- 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 width: ", ";\n cursor: ", ";\n\n .MuiButtonBase-root {\n .MuiButton-label {\n display: flex;\n flex-direction: ", ";\n align-items: center;\n }\n letter-spacing: ", ";\n \n box-shadow: none;\n font-size: ", ";\n font-weight: ", ";\n min-width: ", ";\n\n width: 100%;\n min-height: ", ";\n font-family: ", ";\n &:focus {\n outline: ", " auto 1px;\n }\n transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n &:hover {\n transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n }\n ", "\n }\n"]);
35
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n width: ", ";\n cursor: ", ";\n\n .MuiButtonBase-root {\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n\n .MuiButton-label {\n display: flex;\n flex-direction: ", ";\n align-items: center;\n }\n\n box-shadow: 0 0 0 2px transparent;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n min-width: ", ";\n width: 100%;\n height: 40px;\n transition: none !important;\n\n &:focus {\n border-color: transparent;\n box-shadow: 0 0 0 2px\n ", ";\n }\n\n ", "\n }\n"]);
36
36
 
37
37
  _templateObject4 = function _templateObject4() {
38
38
  return data;
@@ -42,7 +42,7 @@ function _templateObject4() {
42
42
  }
43
43
 
44
44
  function _templateObject3() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 20px;\n max-width: 20px;\n margin-left: ", ";\n margin-right: ", ";\n"]);
45
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 24px;\n max-width: 24px;\n margin-left: ", ";\n margin-right: ", ";\n"]);
46
46
 
47
47
  _templateObject3 = function _templateObject3() {
48
48
  return data;
@@ -52,7 +52,7 @@ function _templateObject3() {
52
52
  }
53
53
 
54
54
  function _templateObject2() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 20px;\n max-width: 20px;\n margin-left: ", ";\n margin-right: ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
55
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 24px;\n max-width: 24px;\n margin-left: ", ";\n margin-right: ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
56
56
 
57
57
  _templateObject2 = function _templateObject2() {
58
58
  return data;
@@ -62,7 +62,7 @@ function _templateObject2() {
62
62
  }
63
63
 
64
64
  function _templateObject() {
65
- var data = (0, _taggedTemplateLiteral2["default"])(["\n line-height: ", ";\n font-size: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n text-transform: ", ";\n"]);
65
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n line-height: ", ";\n font-size: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n text-transform: none;\n margin-right: ", ";\n margin-left: ", ";\n"]);
66
66
 
67
67
  _templateObject = function _templateObject() {
68
68
  return data;
@@ -103,7 +103,8 @@ var DxcButton = function DxcButton(_ref) {
103
103
  disabled: disabled,
104
104
  iconPosition: iconPosition,
105
105
  size: size,
106
- backgroundType: backgroundType
106
+ backgroundType: backgroundType,
107
+ icon: icon
107
108
  }, _react["default"].createElement(_core.Button, {
108
109
  disabled: disabled,
109
110
  type: type,
@@ -115,7 +116,10 @@ var DxcButton = function DxcButton(_ref) {
115
116
  _onClick();
116
117
  }
117
118
  }
118
- }, _react["default"].createElement(LabelContainer, null, label), icon ? _react["default"].createElement(IconContainer, {
119
+ }, label && _react["default"].createElement(LabelContainer, {
120
+ icon: icon,
121
+ iconPosition: iconPosition
122
+ }, label), icon ? _react["default"].createElement(IconContainer, {
119
123
  label: label,
120
124
  iconPosition: iconPosition
121
125
  }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(ButtonIcon, {
@@ -146,13 +150,15 @@ var LabelContainer = _styledComponents["default"].span(_templateObject(), functi
146
150
  }, function (props) {
147
151
  return props.theme.fontSize;
148
152
  }, function (props) {
149
- return props.theme.labelTextTranform;
153
+ return !props.icon || props.iconPosition === "before" ? "8px" : "0px";
154
+ }, function (props) {
155
+ return !props.icon || props.iconPosition === "after" ? "8px" : "0px";
150
156
  });
151
157
 
152
158
  var IconContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
153
- return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
159
+ return !props.label ? "0px" : props.iconPosition === "after" && props.label !== "" && "8px" || "8px";
154
160
  }, function (props) {
155
- return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
161
+ return !props.label ? "0px" : props.iconPosition === "before" && props.label !== "" && "8px" || "8px";
156
162
  });
157
163
 
158
164
  var ButtonIcon = _styledComponents["default"].img(_templateObject3(), function (props) {
@@ -162,8 +168,6 @@ var ButtonIcon = _styledComponents["default"].img(_templateObject3(), function (
162
168
  });
163
169
 
164
170
  var DxCButton = _styledComponents["default"].div(_templateObject4(), function (props) {
165
- return props.theme.fontSizeBase;
166
- }, function (props) {
167
171
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
168
172
  }, function (props) {
169
173
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -177,32 +181,38 @@ var DxCButton = _styledComponents["default"].div(_templateObject4(), function (p
177
181
  return calculateWidth(props.margin, props.size);
178
182
  }, function (props) {
179
183
  return props.disabled && "not-allowed" || "pointer";
184
+ }, function (props) {
185
+ return props.theme.paddingLeft;
186
+ }, function (props) {
187
+ return props.theme.paddingRight;
188
+ }, function (props) {
189
+ return props.theme.paddingTop;
190
+ }, function (props) {
191
+ return props.theme.paddingBottom;
180
192
  }, function (props) {
181
193
  return props.iconPosition === "after" && "row" || "row-reverse";
182
194
  }, function (props) {
183
- return props.theme.labelLetterSpacing;
195
+ return props.theme.fontFamily;
184
196
  }, function (props) {
185
197
  return props.theme.fontSize;
186
198
  }, function (props) {
187
199
  return props.theme.fontWeight;
188
200
  }, function (props) {
189
- return props.size === "small" && "calc(100% - 22px)" || "unset";
190
- }, function (props) {
191
- return props.theme.minHeight;
201
+ return props.theme.labelLetterSpacing;
192
202
  }, function (props) {
193
- return props.theme.fontFamily;
203
+ return props.size === "small" && "calc(100% - 22px)" || "unset";
194
204
  }, function (props) {
195
- return props.theme.focusColor;
205
+ return props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor;
196
206
  }, function (props) {
197
207
  var mode = props.mode,
198
208
  backgroundType = props.backgroundType;
199
209
 
200
210
  if (mode === "primary") {
201
- return "\n border-radius: ".concat(props.theme.primaryBorderRadius, ";\n border-width: ").concat(props.theme.primaryBorderThickness, ";\n border-style: ").concat(props.theme.primaryBorderStyle, ";\n border-color: ").concat(backgroundType === "dark" ? props.theme.primaryBorderColorOnDark : props.theme.primaryBorderColor, ";\n font-family: ").concat(props.theme.primaryFontFamily, ";\n font-size: ").concat(props.theme.primaryFontSize, ";\n font-weight: ").concat(props.theme.primaryFontWeight, ";\n\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.primaryFontColorOnDark : props.theme.primaryFontColor, " !important;\n padding-right:").concat(props.size === "small" && "11px" || "30px", ";\n padding-left:").concat(props.size === "small" && "11px" || "30px", ";\n padding-top:").concat(props.theme.primaryPaddingTop, ";\n padding-bottom:").concat(props.theme.primaryPaddingBottom, ";\n &:hover{\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryHoverBackgroundColorOnDark : props.theme.primaryHoverBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.primaryHoverFontColorOnDark : props.theme.primaryHoverFontColor, " !important; \n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryActiveBackgroundColorOnDark : props.theme.primaryActiveBackgroundColor, " !important;\n \n }\n &:focus {\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.primaryHoverFontColorOnDark : props.theme.primaryHoverFontColor, " !important;\n }\n &:disabled{ \n cursor: not-allowed;\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryDisabledBackgroundColorOnDark : props.theme.primaryDisabledBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.primaryDisabledFontColorOnDark : props.theme.primaryDisabledFontColor, "!important; \n }\n .MuiButton-label {\n z-index: 5\n }\n ");
211
+ return "\n border-radius: ".concat(props.theme.primaryBorderRadius, ";\n border-width: ").concat(props.theme.primaryBorderThickness, ";\n border-style: ").concat(props.theme.primaryBorderStyle, ";\n font-family: ").concat(props.theme.primaryFontFamily, ";\n font-size: ").concat(props.theme.primaryFontSize, ";\n font-weight: ").concat(props.theme.primaryFontWeight, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor, ";\n color: ").concat(backgroundType && backgroundType === "dark" ? props.theme.primaryFontColorOnDark : props.theme.primaryFontColor, " !important;\n\n &:hover {\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryHoverBackgroundColorOnDark : props.theme.primaryHoverBackgroundColor, ";\n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryActiveBackgroundColorOnDark : props.theme.primaryActiveBackgroundColor, " !important;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n &:disabled { \n cursor: not-allowed;\n background-color: ").concat(backgroundType === "dark" ? props.theme.primaryDisabledBackgroundColorOnDark : props.theme.primaryDisabledBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.primaryDisabledFontColorOnDark : props.theme.primaryDisabledFontColor, "!important; \n }\n .MuiButton-label {\n z-index: 5;\n }\n ");
202
212
  } else if (mode === "secondary") {
203
- return "\n border-radius: ".concat(props.theme.secondaryBorderRadius, ";\n border-width:").concat(props.theme.secondaryBorderThickness, ";\n border-style:").concat(props.theme.secondaryBorderStyle, ";\n font-family: ").concat(props.theme.secondaryFontFamily, ";\n font-size: ").concat(props.theme.secondaryFontSize, ";\n font-weight: ").concat(props.theme.secondaryFontWeight, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor, ";\n padding-right:").concat(props.size === "small" && "9px" || "28px", ";\n padding-left:").concat(props.size === "small" && "9px" || "28px", ";\n padding-top:").concat(props.theme.secondaryPaddingTop, ";\n padding-bottom:").concat(props.theme.secondaryPaddingBottom, ";\n \n color: ").concat(backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor, " !important;\n \n border-color: ").concat(backgroundType === "dark" ? props.theme.secondaryOutlinedColorOnDark : props.theme.secondaryOutlinedColor, ";\n &:hover{\n border-color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverOutlinedColorOnDark : props.theme.secondaryHoverOutlinedColor, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverBackgroundColorOnDark : props.theme.secondaryHoverBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor, " !important; \n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryActiveBackgroundColorOnDark : props.theme.secondaryActiveBackgroundColor, " !important;\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor, " !important;\n }\n &:focus {\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor, " !important; \n }\n &:disabled{\n cursor: not-allowed;\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryDisabledFontColorOnDark : props.theme.secondaryDisabledFontColor, " !important;\n border-color: ").concat(backgroundType === "dark" ? props.theme.secondaryDisabledOutlinedColorOnDark : props.theme.secondaryDisabledOutlinedColor, ";\n }\n .MuiButton-label {\n z-index: 5\n }\n\n ");
213
+ return "\n border-radius: ".concat(props.theme.secondaryBorderRadius, ";\n border-width: ").concat(props.theme.secondaryBorderThickness, ";\n border-style: ").concat(props.theme.secondaryBorderStyle, ";\n font-family: ").concat(props.theme.secondaryFontFamily, ";\n font-size: ").concat(props.theme.secondaryFontSize, ";\n font-weight: ").concat(props.theme.secondaryFontWeight, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor, " !important;\n border-color: ").concat(backgroundType === "dark" ? props.theme.secondaryBorderColorOnDark : props.theme.secondaryBorderColor, ";\n\n &:hover {\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverBackgroundColorOnDark : props.theme.secondaryHoverBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor, " !important;\n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryActiveBackgroundColorOnDark : props.theme.secondaryActiveBackgroundColor, " !important;\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor, " !important;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n &:disabled {\n cursor: not-allowed;\n background-color: ").concat(backgroundType === "dark" ? props.theme.secondaryDisabledBackgroundColorOnDark : props.theme.secondaryDisabledBackgroundColor, " !important;\n color: ").concat(backgroundType === "dark" ? props.theme.secondaryDisabledFontColorOnDark : props.theme.secondaryDisabledFontColor, " !important;\n border-color: ").concat(backgroundType === "dark" ? props.theme.secondaryDisabledBorderColorOnDark : props.theme.secondaryDisabledBorderColor, ";\n }\n .MuiButton-label {\n z-index: 5;\n }\n ");
204
214
  } else if (mode === "text") {
205
- return "\n border-radius: ".concat(props.theme.textBorderRadius, ";\n border-width:").concat(props.theme.textBorderThickness, ";\n border-style:").concat(props.theme.textBorderStyle, ";\n border-color:").concat(backgroundType === "dark" ? props.theme.textBorderColorOnDark : props.theme.textBorderColor, ";\n font-family: ").concat(props.theme.textFontFamily, ";\n font-size: ").concat(props.theme.textFontSize, ";\n font-weight: ").concat(props.theme.textFontWeight, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor, " !important;\n padding-right:").concat(props.size === "small" && "11px" || "30px", ";\n padding-left:").concat(props.size === "small" && "11px" || "30px", ";\n padding-top:").concat(props.theme.textPaddingTop, ";\n padding-bottom:").concat(props.theme.textPaddingBottom, ";\n\n &:hover{\n background-color: ").concat(backgroundType === "dark" ? props.theme.textHoverBackgroundColorOnDark : props.theme.textHoverBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.textHoverFontColorOnDark : props.theme.textHoverFontColor, " !important;\n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.textActiveBackgroundColorOnDark : props.theme.textActiveBackgroundColor, " !important;\n color: ").concat(backgroundType === "dark" ? props.theme.textHoverFontColorOnDark : props.theme.textHoverFontColor, " !important;\n }\n &:focus {\n background-color: ").concat(backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor, " !important; \n }\n &:disabled{\n cursor:not-allowed;\n color: ").concat(backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor, " !important;\n background-color: ").concat(backgroundType === "dark" ? props.theme.textDisabledBackgroundColorOnDark : props.theme.textDisabledBackgroundColor, ";\n \n }\n ");
215
+ return "\n border-radius: ".concat(props.theme.textBorderRadius, ";\n border-width: ").concat(props.theme.textBorderThickness, ";\n border-style: ").concat(props.theme.textBorderStyle, ";\n font-family: ").concat(props.theme.textFontFamily, ";\n font-size: ").concat(props.theme.textFontSize, ";\n font-weight: ").concat(props.theme.textFontWeight, ";\n background-color: ").concat(backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor, ";\n color: ").concat(backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor, " !important;\n\n &:hover {\n background-color: ").concat(backgroundType === "dark" ? props.theme.textHoverBackgroundColorOnDark : props.theme.textHoverBackgroundColor, ";\n }\n &:active {\n background-color: ").concat(backgroundType === "dark" ? props.theme.textActiveBackgroundColorOnDark : props.theme.textActiveBackgroundColor, " !important;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n &:disabled {\n cursor:not-allowed;\n color: ").concat(backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor, " !important;\n background-color: ").concat(backgroundType === "dark" ? props.theme.textDisabledBackgroundColorOnDark : props.theme.textDisabledBackgroundColor, ";\n }\n ");
206
216
  }
207
217
  });
208
218
 
package/dist/checkbox/Checkbox.js CHANGED
@@ -36,7 +36,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
38
  function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 17px;\n height: 17px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n margin-left: ", ";\n margin-right: ", ";\n"]);
40
40
 
41
41
  _templateObject3 = function _templateObject3() {
42
42
  return data;
@@ -46,7 +46,7 @@ function _templateObject3() {
46
46
  }
47
47
 
48
48
  function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n &.Mui-disabled{\n color: ", ";\n }\n &.Mui-checked {\n color:", ";\n &:hover {\n background-color: transparent;\n color:", ";\n }\n }\n }\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n color: ", ";\n }\n &.Mui-focusVisible {\n .MuiIconButton-label {\n outline: ", " auto 1px;\n }\n }\n z-index: 1;\n padding: 10px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin: 2px;\n margin-left: ", ";\n margin-right: ", ";\n color:", ";\n\n } }\n .MuiSvgIcon-root {\n width: 26.6px;\n height: 26.6px;\n }\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n right: ", ";\n }\n"]);
50
50
 
51
51
  _templateObject2 = function _templateObject2() {
52
52
  return data;
@@ -90,8 +90,13 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
90
90
  innerChecked = _useState2[0],
91
91
  setInnerChecked = _useState2[1];
92
92
 
93
+ var _useState3 = (0, _react.useState)(false),
94
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
95
+ isLabelHovered = _useState4[0],
96
+ setIsLabelHovered = _useState4[1];
97
+
93
98
  var colorsTheme = (0, _useTheme["default"])();
94
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]) || "light";
99
+ var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
95
100
 
96
101
  var handlerCheckboxChange = function handlerCheckboxChange(checkboxValue) {
97
102
  if (checked === undefined) {
@@ -108,6 +113,10 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
108
113
  }
109
114
  };
110
115
 
116
+ var handleLabelHover = function handleLabelHover() {
117
+ setIsLabelHovered(!isLabelHovered);
118
+ };
119
+
111
120
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
112
121
  theme: colorsTheme.checkbox
113
122
  }, _react["default"].createElement(CheckboxContainer, {
@@ -117,11 +126,15 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
117
126
  disabled: disabled,
118
127
  margin: margin,
119
128
  size: size,
120
- backgroundType: backgroundType
129
+ backgroundType: backgroundType,
130
+ isLabelHovered: isLabelHovered
121
131
  }, _react["default"].createElement(_Checkbox["default"], {
122
132
  checked: checked != undefined ? checked : innerChecked,
123
- inputProps: name = {
124
- name: name
133
+ inputProps: {
134
+ name: name,
135
+ "aria-label": label,
136
+ role: "checkbox",
137
+ "aria-checked": checked != undefined ? checked : innerChecked
125
138
  },
126
139
  onChange: handlerCheckboxChange,
127
140
  value: value,
@@ -139,7 +152,9 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
139
152
  onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
140
153
  disabled: disabled,
141
154
  className: "labelContainer",
142
- backgroundType: backgroundType
155
+ backgroundType: backgroundType,
156
+ onMouseOver: handleLabelHover,
157
+ onMouseOut: handleLabelHover
143
158
  }, label)));
144
159
  };
145
160
 
@@ -228,17 +243,17 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
228
243
  }, function (props) {
229
244
  return props.labelPosition === "before" ? "row-reverse" : "row";
230
245
  }, function (props) {
231
- return props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "border");
246
+ return props.isLabelHovered ? props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor : getNotDisabledColor(props, "border");
232
247
  }, function (props) {
233
- return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
248
+ return getDisabledColor(props, "border");
234
249
  }, function (props) {
235
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.backgroundHoverColorCheckedOnDark : props.theme.backgroundHoverColorChecked;
250
+ return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
236
251
  }, function (props) {
237
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.borderHoverColorOnDark : props.theme.borderHoverColor;
252
+ return props.backgroundType === "dark" ? props.theme.hoverBackgroundColorCheckedOnDark : props.theme.hoverBackgroundColorChecked;
238
253
  }, function (props) {
239
- return props.theme.focusColor;
254
+ return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
240
255
  }, function (props) {
241
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
256
+ return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
242
257
  }, function (props) {
243
258
  return props.theme.checkLabelSpacing;
244
259
  }, function (props) {
@@ -246,11 +261,9 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
246
261
  }, function (props) {
247
262
  return props.labelPosition === "before" ? "0px" : "";
248
263
  }, function (props) {
249
- return props.labelPosition === "after" ? "0px" : "";
250
- }, function (props) {
251
- return props.labelPosition === "before" ? "0px" : "";
264
+ return props.labelPosition === "before" ? "unset" : "1px";
252
265
  }, function (props) {
253
- return props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "border");
266
+ return props.labelPosition === "before" ? "1px" : "unset";
254
267
  });
255
268
 
256
269
  var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
@@ -263,10 +276,6 @@ var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), fu
263
276
  return props.labelPosition === "after" ? "0px" : "";
264
277
  }, function (props) {
265
278
  return props.labelPosition === "before" ? "0px" : "";
266
- }, function (props) {
267
- return props.labelPosition === "after" ? "0px" : "";
268
- }, function (props) {
269
- return props.labelPosition === "before" ? "0px" : "";
270
279
  });
271
280
 
272
281
  DxcCheckbox.propTypes = {
package/dist/chip/Chip.js CHANGED
@@ -28,7 +28,7 @@ var _utils = require("../common/utils.js");
28
28
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
30
  function _templateObject5() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n opacity: ", ";\n ", "\n ", "\n width: ", ";\n height: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
31
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n ", "\n width: ", ";\n height: ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n"]);
32
32
 
33
33
  _templateObject5 = function _templateObject5() {
34
34
  return data;
@@ -38,7 +38,7 @@ function _templateObject5() {
38
38
  }
39
39
 
40
40
  function _templateObject4() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n margin-right: ", ";\n width: ", ";\n height: ", ";\n padding-left: \"", "\";\n padding-right: ", ";\n"]);
41
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-right: ", ";\n width: ", ";\n height: ", ";\n"]);
42
42
 
43
43
  _templateObject4 = function _templateObject4() {
44
44
  return data;
@@ -48,7 +48,7 @@ function _templateObject4() {
48
48
  }
49
49
 
50
50
  function _templateObject3() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n margin-left: ", ";\n width: ", ";\n height: ", ";\n padding-left: ", ";\n padding-right: ", ";\n"]);
51
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-left: ", ";\n width: ", ";\n height: ", ";\n"]);
52
52
 
53
53
  _templateObject3 = function _templateObject3() {
54
54
  return data;
@@ -68,7 +68,7 @@ function _templateObject2() {
68
68
  }
69
69
 
70
70
  function _templateObject() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n border-radius: ", ";\n margin: 2px;\n max-width: ", ";\n background-color: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
71
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n min-height: 40px;\n max-width: ", ";\n background-color: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n"]);
72
72
 
73
73
  _templateObject = function _templateObject() {
74
74
  return data;
@@ -152,13 +152,13 @@ var getCursor = function getCursor(interactuable, disabled) {
152
152
  return "cursor:default; outline:none;";
153
153
  };
154
154
 
155
- var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function (props) {
156
- return props.theme.borderRadius;
157
- }, function (_ref2) {
155
+ var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function (_ref2) {
158
156
  var margin = _ref2.margin;
159
157
  return "calc(100% - 40px - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
160
158
  }, function (props) {
161
159
  return props.disabled && props.theme.disabledBackgroundColor || props.theme.backgroundColor;
160
+ }, function (props) {
161
+ return props.theme.borderRadius;
162
162
  }, function (props) {
163
163
  return props.theme.borderThickness;
164
164
  }, function (props) {
@@ -173,9 +173,6 @@ var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function
173
173
  return props.theme.contentPaddingLeft;
174
174
  }, function (props) {
175
175
  return props.theme.contentPaddingRight;
176
- }, function (_ref3) {
177
- var disabled = _ref3.disabled;
178
- return disabled && "not-allowed";
179
176
  }, function (props) {
180
177
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
181
178
  }, function (props) {
@@ -186,6 +183,9 @@ var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function
186
183
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
187
184
  }, function (props) {
188
185
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
186
+ }, function (_ref3) {
187
+ var disabled = _ref3.disabled;
188
+ return disabled && "not-allowed";
189
189
  });
190
190
 
191
191
  var ChipTextContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
@@ -197,44 +197,40 @@ var ChipTextContainer = _styledComponents["default"].span(_templateObject2(), fu
197
197
  }, function (props) {
198
198
  return props.theme.fontStyle;
199
199
  }, function (props) {
200
- return props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
200
+ return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
201
201
  }, function (_ref4) {
202
202
  var disabled = _ref4.disabled;
203
203
  return disabled && "not-allowed" || "default";
204
204
  });
205
205
 
206
206
  var SuffixIconContainer = _styledComponents["default"].img(_templateObject3(), function (props) {
207
+ return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
208
+ }, function (props) {
207
209
  return getCursor(props.interactuable, props.disabled);
208
210
  }, function (props) {
209
- return (props.label || props.suffixIconSrc) && "10px" || props.prefixIconSrc && "5px";
211
+ return (props.label || props.suffixIconSrc) && props.theme.iconSpacing || props.prefixIconSrc && "5px";
210
212
  }, function (props) {
211
213
  return props.theme.iconSize;
212
214
  }, function (props) {
213
215
  return props.theme.iconSize;
214
- }, function (props) {
215
- return props.theme.iconPaddingLeft;
216
- }, function (props) {
217
- return props.theme.iconPaddingRight;
218
216
  });
219
217
 
220
218
  var PrefixIconContainer = _styledComponents["default"].img(_templateObject4(), function (props) {
219
+ return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
220
+ }, function (props) {
221
221
  return getCursor(props.interactuable, props.disabled);
222
222
  }, function (props) {
223
- return (props.label || props.suffixIconSrc) && "10px" || props.prefixIconSrc && "5px";
223
+ return (props.label || props.suffixIconSrc) && props.theme.iconSpacing || props.prefixIconSrc && "5px";
224
224
  }, function (props) {
225
225
  return props.theme.iconSize;
226
226
  }, function (props) {
227
227
  return props.theme.iconSize;
228
- }, function (props) {
229
- return props.theme.iconPaddingLeft;
230
- }, function (props) {
231
- return props.theme.iconPaddingRight;
232
228
  });
233
229
 
234
230
  var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
235
- return props.disabled && props.theme.iconMaxWidth;
231
+ return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
236
232
  }, function (props) {
237
- return props.prefixIcon ? "margin-right: ".concat((props.label || props.suffixIcon || props.suffixIconSrc) && "10px" || (props.prefixIcon || props.prefixIconSrc) && "0", ";") : "margin-left: ".concat((props.label || props.prefixIcon || props.prefixIconSrc) && "10px" || (props.prefixIcon || props.prefixIconSrc) && "0", ";");
233
+ return props.prefixIcon ? "margin-right: ".concat((props.label || props.suffixIcon || props.suffixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";") : "margin-left: ".concat((props.label || props.prefixIcon || props.prefixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";");
238
234
  }, function (props) {
239
235
  return getCursor(props.interactuable, props.disabled);
240
236
  }, function (props) {
@@ -242,9 +238,9 @@ var IconContainer = _styledComponents["default"].div(_templateObject5(), functio
242
238
  }, function (props) {
243
239
  return props.theme.iconSize;
244
240
  }, function (props) {
245
- return props.theme.iconPaddingLeft;
241
+ return props.theme.focusColor;
246
242
  }, function (props) {
247
- return props.theme.iconPaddingRight;
243
+ return props.disabled && "outline: none;";
248
244
  });
249
245
 
250
246
  DxcChip.propTypes = {