@dxc-technology/halstack-react 6.2.0 → 6.2.2

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 (17) hide show
  1. package/checkbox/Checkbox.js +0 -1
  2. package/dialog/Dialog.js +4 -4
  3. package/dialog/Dialog.stories.tsx +56 -0
  4. package/dropdown/Dropdown.js +2 -2
  5. package/dropdown/Dropdown.test.js +1 -1
  6. package/dropdown/DropdownMenuItem.js +1 -1
  7. package/package.json +1 -1
  8. package/radio-group/Radio.d.ts +1 -1
  9. package/radio-group/Radio.js +43 -28
  10. package/radio-group/RadioGroup.js +18 -20
  11. package/radio-group/RadioGroup.stories.tsx +1 -0
  12. package/radio-group/RadioGroup.test.js +28 -58
  13. package/radio-group/types.d.ts +2 -2
  14. package/slider/Slider.js +8 -5
  15. package/switch/Switch.js +90 -80
  16. package/switch/Switch.test.js +26 -13
  17. package/tabs-nav/Tab.js +1 -1
package/checkbox/Checkbox.js CHANGED
@@ -96,7 +96,6 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
96
96
  var handleKeyboard = function handleKeyboard(event) {
97
97
  switch (event.key) {
98
98
  case " ":
99
- case "Space":
100
99
  event.preventDefault();
101
100
  handleCheckboxChange();
102
101
  }
package/dialog/Dialog.js CHANGED
@@ -108,7 +108,7 @@ var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObj
108
108
  return props.theme.overlayOpacity;
109
109
  });
110
110
 
111
- var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n z-index: 1300;\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n ", "\n box-sizing: border-box;\n box-shadow: ", ";\n border-radius: 4px;\n\n @media (min-width: ", "rem) {\n max-width: 80%;\n min-width: 800px;\n }\n\n @media (max-width: ", "rem) {\n //mobile phones\n max-width: 92%;\n min-width: 92%;\n }\n"])), function (props) {
111
+ var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n z-index: 1300;\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n ", "\n box-sizing: border-box;\n box-shadow: ", ";\n border-radius: 4px;\n position: relative;\n\n @media (min-width: ", "rem) {\n max-width: 80%;\n min-width: 800px;\n }\n\n @media (max-width: ", "rem) {\n //mobile phones\n max-width: 92%;\n min-width: 92%;\n }\n"])), function (props) {
112
112
  return props.theme.backgroundColor;
113
113
  }, function (props) {
114
114
  return props.theme.fontFamily;
@@ -117,12 +117,12 @@ var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObje
117
117
  }, function (props) {
118
118
  return props.theme.fontWeight;
119
119
  }, function (props) {
120
- return props.isCloseVisible && "min-height: 72px;";
120
+ return props.isCloseVisible && "min-height: 72px; padding-top: 24px;";
121
121
  }, function (props) {
122
122
  return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
123
123
  }, _variables.responsiveSizes.medium, _variables.responsiveSizes.medium);
124
124
 
125
- var Children = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"])), function (props) {
125
+ var Children = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"])), function (props) {
126
126
  return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : _variables.spaces["small"];
127
127
  }, function (props) {
128
128
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
@@ -134,7 +134,7 @@ var Children = _styledComponents["default"].div(_templateObject5 || (_templateOb
134
134
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
135
135
  });
136
136
 
137
- var CloseIconContainer = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n position: relative;\n top: 20px;\n right: 20px;\n color: ", ";\n width: ", ";\n height: ", ";\n"])), function (props) {
137
+ var CloseIconContainer = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n position: absolute;\n top: 20px;\n right: 20px;\n color: ", ";\n width: ", ";\n height: ", ";\n"])), function (props) {
138
138
  return props.theme.closeIconColor;
139
139
  }, function (props) {
140
140
  return props.theme.closeIconWidth;
package/dialog/Dialog.stories.tsx CHANGED
@@ -1,5 +1,9 @@
1
1
  import React from "react";
2
2
  import DxcDialog from "./Dialog";
3
+ import DxcTextInput from "../text-input/TextInput";
4
+ import DxcButton from "../button/Button";
5
+ import DxcFlex from "../flex/Flex";
6
+ import DxcInset from "../inset/Inset";
3
7
  import Title from "../../.storybook/components/Title";
4
8
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
9
 
@@ -30,6 +34,50 @@ export const DefaultDialog = () => (
30
34
  </>
31
35
  );
32
36
 
37
+ export const DialogWithInputs = () => (
38
+ <>
39
+ <ExampleContainer expanded={true}>
40
+ <Title title="Dialog with inputs" theme="light" level={4} />
41
+ <DxcDialog>
42
+ <DxcInset bottom="1rem">
43
+ <DxcFlex gap="2rem" direction="column">
44
+ <DxcFlex gap="1rem" direction="column">
45
+ <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
46
+ <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
47
+ </DxcFlex>
48
+ <DxcFlex justifyContent="flex-end" gap="1rem">
49
+ <DxcButton label="Save"></DxcButton>
50
+ <DxcButton label="Cancel" mode="secondary"></DxcButton>
51
+ </DxcFlex>
52
+ </DxcFlex>
53
+ </DxcInset>
54
+ </DxcDialog>
55
+ </ExampleContainer>
56
+ </>
57
+ );
58
+
59
+ const RespDialog = () => (
60
+ <>
61
+ <ExampleContainer expanded={true}>
62
+ <Title title="Responsive dialog" theme="light" level={4} />
63
+ <DxcDialog>
64
+ <DxcInset bottom="1rem">
65
+ <DxcFlex gap="2rem" direction="column">
66
+ <DxcFlex gap="1rem" direction="column">
67
+ <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
68
+ <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
69
+ </DxcFlex>
70
+ <DxcFlex justifyContent="flex-end" gap="1rem">
71
+ <DxcButton label="Save"></DxcButton>
72
+ <DxcButton label="Cancel" mode="secondary"></DxcButton>
73
+ </DxcFlex>
74
+ </DxcFlex>
75
+ </DxcInset>
76
+ </DxcDialog>
77
+ </ExampleContainer>
78
+ </>
79
+ );
80
+
33
81
  export const DialogWithoutOverlay = () => (
34
82
  <ExampleContainer expanded={true}>
35
83
  <Title title="Dialog Without Overlay" theme="light" level={4} />
@@ -209,3 +257,11 @@ export const DialogWithXxlargePadding = () => (
209
257
  </DxcDialog>
210
258
  </ExampleContainer>
211
259
  );
260
+
261
+ export const ResponsiveDialog = RespDialog.bind({});
262
+ ResponsiveDialog.parameters = {
263
+ viewport: {
264
+ defaultViewport: "iphonex",
265
+ },
266
+ chromatic: { viewports: [375] },
267
+ };
package/dropdown/Dropdown.js CHANGED
@@ -146,7 +146,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
146
146
  handleOnOpenMenu();
147
147
  break;
148
148
 
149
- case "Space":
149
+ case " ":
150
150
  case "Down":
151
151
  case "ArrowDown":
152
152
  case "Enter":
@@ -186,7 +186,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
186
186
  setNextIndexFocus();
187
187
  break;
188
188
 
189
- case "Space":
189
+ case " ":
190
190
  case "Enter":
191
191
  event.preventDefault();
192
192
  handleMenuItemOnClick(options[visualFocusIndex].value);
package/dropdown/Dropdown.test.js CHANGED
@@ -267,7 +267,7 @@ describe("Dropdown component tests", function () {
267
267
  var dropdown = getByRole("button");
268
268
 
269
269
  _react2.fireEvent.keyDown(dropdown, {
270
- key: "Space",
270
+ key: " ",
271
271
  code: "Space",
272
272
  keyCode: 32,
273
273
  charCode: 32
package/dropdown/DropdownMenuItem.js CHANGED
@@ -49,7 +49,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
49
49
  }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label)));
50
50
  };
51
51
 
52
- var DropdownMenuItemContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: ", ";\n min-height: 36px;\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n ", "\n :hover {\n background-color: ", ";\n }\n :active {\n background-color: ", ";\n }\n"])), function (props) {
52
+ var DropdownMenuItemContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: ", ";\n min-height: 36px;\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n ", "\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"])), function (props) {
53
53
  return props.theme.optionIconSpacing;
54
54
  }, function (props) {
55
55
  return props.theme.optionPaddingTop;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "6.2.0",
3
+ "version": "6.2.2",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "https://developer.dxc.com/halstack",
package/radio-group/Radio.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { RadioProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ option, currentValue, onClick, error, disabled, focused, readonly, tabIndex, }: RadioProps) => JSX.Element>;
3
+ declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused, readonly, tabIndex, }: RadioProps) => JSX.Element>;
4
4
  export default _default;
package/radio-group/Radio.js CHANGED
@@ -28,10 +28,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
28
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
29
 
30
30
  var DxcRadio = function DxcRadio(_ref) {
31
- var _option$disabled;
32
-
33
- var option = _ref.option,
34
- currentValue = _ref.currentValue,
31
+ var label = _ref.label,
32
+ checked = _ref.checked,
35
33
  onClick = _ref.onClick,
36
34
  error = _ref.error,
37
35
  disabled = _ref.disabled,
@@ -50,7 +48,7 @@ var DxcRadio = function DxcRadio(_ref) {
50
48
  var _ref$current;
51
49
 
52
50
  onClick();
53
- focused && document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
51
+ document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
54
52
  };
55
53
 
56
54
  var _useState3 = (0, _react.useState)(true),
@@ -75,52 +73,57 @@ var DxcRadio = function DxcRadio(_ref) {
75
73
  error: error,
76
74
  disabled: disabled,
77
75
  readonly: readonly,
78
- onMouseDown: function onMouseDown(event) {
79
- // Prevents div's onClick from stealing the radio input's focus
80
- event.preventDefault();
81
- },
82
- onClick: handleOnClick
76
+ onClick: disabled ? undefined : handleOnClick
83
77
  }, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
84
78
  error: error,
85
79
  disabled: disabled,
86
80
  readonly: readonly,
87
81
  role: "radio",
88
- "aria-checked": option.value === currentValue,
89
- "aria-disabled": (_option$disabled = option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false,
82
+ "aria-checked": checked,
83
+ "aria-disabled": disabled,
90
84
  "aria-labelledby": radioLabelId,
91
85
  tabIndex: disabled ? -1 : focused ? tabIndex : -1,
92
86
  ref: ref
93
- }, option.value === currentValue && /*#__PURE__*/_react["default"].createElement(Dot, {
87
+ }, checked && /*#__PURE__*/_react["default"].createElement(Dot, {
94
88
  disabled: disabled,
95
89
  readonly: readonly,
96
90
  error: error
97
91
  }))), /*#__PURE__*/_react["default"].createElement(Label, {
98
92
  id: radioLabelId,
99
93
  disabled: disabled
100
- }, option.label))));
94
+ }, label))));
101
95
  };
102
96
 
103
- var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
97
+ var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
98
+ switch (state) {
99
+ case "enabled":
100
+ return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readonly ? props.theme.readonlyRadioInputColor : props.theme.radioInputColor;
104
101
 
105
- var RadioContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n\n ", "\n"])), function (props) {
106
- return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
107
- }, function (props) {
108
- return !props.disabled ? "\n &:hover {\n & > div > div { \n border-color: ".concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n & > span {\n background-color: ").concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n }\n };\n }\n &:active {\n & > div > div {\n border-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n & > span {\n background-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n }\n }\n }\n ") : "pointer-events: none;";
109
- });
102
+ case "hover":
103
+ return props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor;
110
104
 
111
- var RadioInputContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n"])));
105
+ case "active":
106
+ return props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor;
107
+ }
108
+ };
112
109
 
113
- var RadioInput = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 18px;\n height: 18px;\n border: 2px solid\n ", ";\n border-radius: 50%;\n\n ", "\n"])), function (props) {
114
- if (props.disabled) return props.theme.disabledRadioInputColor;else if (props.error) return props.theme.errorRadioInputColor;else if (props.readonly) return props.theme.readonlyRadioInputColor;else return props.theme.radioInputColor;
110
+ var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
111
+
112
+ var RadioInputContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n"])));
113
+
114
+ var RadioInput = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid ", ";\n border-radius: 50%;\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n ", "\n"])), function (props) {
115
+ return getRadioInputStateColor(props, "enabled");
116
+ }, function (props) {
117
+ return props.theme.focusBorderColor;
115
118
  }, function (props) {
116
- return !props.disabled ? "&:focus {\n outline: 2px solid ".concat(props.theme.focusBorderColor, ";\n outline-offset: 1px;\n }\n &:focus-visible {\n outline: 2px solid ").concat(props.theme.focusBorderColor, ";\n outline-offset: 1px;\n }\n ") : "\n :focus-visible {\n outline: none;\n }\n ";
119
+ return props.disabled && "pointer-events: none;";
117
120
  });
118
121
 
119
- var Dot = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: 10px;\n width: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
120
- if (props.disabled) return props.theme.disabledRadioInputColor;else if (props.error) return props.theme.errorRadioInputColor;else if (props.readonly) return props.theme.readonlyRadioInputColor;else return props.theme.radioInputColor;
122
+ var Dot = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: 10px;\n width: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
123
+ return getRadioInputStateColor(props, "enabled");
121
124
  });
122
125
 
123
- var Label = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
126
+ var Label = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
124
127
  return props.theme.radioInputLabelMargin;
125
128
  }, function (props) {
126
129
  return props.theme.fontFamily;
@@ -133,7 +136,19 @@ var Label = _styledComponents["default"].span(_templateObject6 || (_templateObje
133
136
  }, function (props) {
134
137
  return props.theme.radioInputLabelLineHeight;
135
138
  }, function (props) {
136
- return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;") : "color: ".concat(props.theme.radioInputLabelFontColor);
139
+ return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
140
+ });
141
+
142
+ var RadioContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n\n &:hover {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n &:active {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n"])), function (props) {
143
+ return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
144
+ }, RadioInput, function (props) {
145
+ return !props.disabled && getRadioInputStateColor(props, "hover");
146
+ }, Dot, function (props) {
147
+ return !props.disabled && getRadioInputStateColor(props, "hover");
148
+ }, RadioInput, function (props) {
149
+ return !props.disabled && getRadioInputStateColor(props, "active");
150
+ }, Dot, function (props) {
151
+ return !props.disabled && getRadioInputStateColor(props, "active");
137
152
  });
138
153
 
139
154
  var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);
package/radio-group/RadioGroup.js CHANGED
@@ -27,7 +27,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
27
27
 
28
28
  var _Radio = _interopRequireDefault(require("./Radio"));
29
29
 
30
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
30
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
31
31
 
32
32
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
33
 
@@ -41,6 +41,8 @@ var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
41
41
  };
42
42
 
43
43
  var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
44
+ var _ref2;
45
+
44
46
  var label = _ref.label,
45
47
  name = _ref.name,
46
48
  helperText = _ref.helperText,
@@ -102,11 +104,11 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
102
104
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
103
105
  onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
104
106
  }
105
- }, [value, innerValue, setInnerValue, onChange]);
107
+ }, [value, innerValue, onChange]);
106
108
 
107
- var handleOnBlur = function handleOnBlur(e) {
109
+ var handleOnBlur = function handleOnBlur(event) {
108
110
  // If the radio group loses the focus to an element not contained inside it...
109
- if (!e.currentTarget.contains(e.relatedTarget)) {
111
+ if (!event.currentTarget.contains(event.relatedTarget)) {
110
112
  setFirstTimeFocus(true);
111
113
  var currentValue = value !== null && value !== void 0 ? value : innerValue;
112
114
  !optional && !Boolean(currentValue) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
@@ -166,8 +168,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
166
168
  setNextRadioChecked();
167
169
  break;
168
170
 
169
- case "Enter":
170
- case "Space":
171
+ case " ":
171
172
  event.preventDefault();
172
173
  handleOnChange(innerOptions[currentFocusIndex].value);
173
174
  break;
@@ -182,7 +183,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
182
183
  id: radioGroupLabelId,
183
184
  helperText: helperText,
184
185
  disabled: disabled
185
- }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
186
+ }, label, optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, " ".concat(translatedLabels.formFields.optionalLabel))), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
186
187
  disabled: disabled
187
188
  }, helperText), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
188
189
  onBlur: handleOnBlur,
@@ -192,20 +193,20 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
192
193
  role: "radiogroup",
193
194
  "aria-disabled": disabled,
194
195
  "aria-labelledby": radioGroupLabelId,
195
- "aria-invalid": error ? "true" : "false",
196
+ "aria-invalid": error ? true : false,
196
197
  "aria-errormessage": error ? errorId : undefined,
197
198
  "aria-required": !disabled && !readonly && !optional,
198
199
  "aria-readonly": readonly,
199
200
  "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
200
- }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
201
+ }, /*#__PURE__*/_react["default"].createElement("input", {
202
+ type: "hidden",
201
203
  name: name,
202
- value: value !== null && value !== void 0 ? value : innerValue,
203
- readOnly: true,
204
- "aria-hidden": "true"
204
+ value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : ""
205
205
  }), innerOptions.map(function (option, index) {
206
206
  return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
207
- option: option,
208
- currentValue: value !== null && value !== void 0 ? value : innerValue,
207
+ key: "radio-".concat(index),
208
+ label: option.label,
209
+ checked: (value !== null && value !== void 0 ? value : innerValue) === option.value,
209
210
  onClick: function onClick() {
210
211
  handleOnChange(option.value);
211
212
  setCurrentFocusIndex(index);
@@ -214,8 +215,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
214
215
  disabled: option.disabled || disabled,
215
216
  focused: currentFocusIndex === index,
216
217
  readonly: readonly,
217
- tabIndex: tabIndex,
218
- key: "radio-".concat(index)
218
+ tabIndex: tabIndex
219
219
  });
220
220
  })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
221
221
  id: errorId,
@@ -261,7 +261,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
261
261
  return props.theme.groupLabelMargin;
262
262
  });
263
263
 
264
- var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n\n row-gap: ", ";\n column-gap: ", ";\n"])), function (props) {
264
+ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n row-gap: ", ";\n column-gap: ", ";\n"])), function (props) {
265
265
  return props.stacking;
266
266
  }, function (props) {
267
267
  return props.theme.groupVerticalGutter;
@@ -269,9 +269,7 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
269
269
  return props.theme.groupHorizontalGutter;
270
270
  });
271
271
 
272
- var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: none;\n"])));
273
-
274
- var Error = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n margin-top: 0.5rem;\n"])), function (props) {
272
+ var Error = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n margin-top: 0.5rem;\n"])), function (props) {
275
273
  return props.theme.errorMessageColor;
276
274
  }, function (props) {
277
275
  return props.theme.fontFamily;
package/radio-group/RadioGroup.stories.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import React from "react";
1
2
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
2
3
  import Title from "../../.storybook/components/Title";
3
4
  import DxcRadioGroup from "./RadioGroup";
package/radio-group/RadioGroup.test.js CHANGED
@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
 
5
5
  var _react = _interopRequireDefault(require("react"));
6
6
 
7
- var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
8
-
9
7
  var _react2 = require("@testing-library/react");
10
8
 
11
9
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
12
10
 
11
+ var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
12
+
13
13
  var options = [{
14
14
  label: "Option 01",
15
15
  value: "1"
@@ -38,7 +38,7 @@ var options = [{
38
38
  label: "Option 09",
39
39
  value: "9"
40
40
  }];
41
- var single_disabled_options = [{
41
+ var singleDisabledOptions = [{
42
42
  label: "Option 01",
43
43
  value: "1"
44
44
  }, {
@@ -107,8 +107,8 @@ describe("Radio Group component tests", function () {
107
107
  });
108
108
 
109
109
  _react2.fireEvent.keyDown(radioGroup, {
110
- key: "Enter",
111
- code: "Enter",
110
+ key: " ",
111
+ code: "Space",
112
112
  keyCode: 13,
113
113
  charCode: 13
114
114
  });
@@ -135,7 +135,7 @@ describe("Radio Group component tests", function () {
135
135
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
136
136
  name: "test",
137
137
  label: "test-radioGroup-label",
138
- options: single_disabled_options
138
+ options: singleDisabledOptions
139
139
  })),
140
140
  getByRole = _render4.getByRole,
141
141
  getAllByRole = _render4.getAllByRole;
@@ -403,7 +403,7 @@ describe("Radio Group component tests", function () {
403
403
  expect(onChange).not.toHaveBeenCalled();
404
404
  expect(document.activeElement).toEqual(checkedRadio);
405
405
  });
406
- test("The 'enter' key checks the current focused option if anyone is checked", function () {
406
+ test("The 'space' key checks the current focused option if anyone is checked", function () {
407
407
  var onChange = jest.fn();
408
408
 
409
409
  var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
@@ -422,37 +422,7 @@ describe("Radio Group component tests", function () {
422
422
  var submitInput = container.querySelector("input[name=\"test\"]");
423
423
 
424
424
  _react2.fireEvent.keyDown(radioGroup, {
425
- key: "Enter",
426
- code: "Enter",
427
- keyCode: 13,
428
- charCode: 13
429
- });
430
-
431
- expect(onChange).toHaveBeenCalledWith("1");
432
- expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
433
- expect(checkedRadio.tabIndex).toBe(0);
434
- expect(submitInput.value).toBe("1");
435
- });
436
- test("The 'space' key checks the current focused option if anyone is checked", function () {
437
- var onChange = jest.fn();
438
-
439
- var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
440
- name: "test",
441
- label: "test-radio-group-label",
442
- helperText: "test-radio-group-helper-text",
443
- options: options,
444
- onChange: onChange
445
- })),
446
- getByRole = _render15.getByRole,
447
- getAllByRole = _render15.getAllByRole,
448
- container = _render15.container;
449
-
450
- var radioGroup = getByRole("radiogroup");
451
- var checkedRadio = getAllByRole("radio")[0];
452
- var submitInput = container.querySelector("input[name=\"test\"]");
453
-
454
- _react2.fireEvent.keyDown(radioGroup, {
455
- key: "Space",
425
+ key: " ",
456
426
  code: "Space",
457
427
  keyCode: 32,
458
428
  charCode: 32
@@ -467,7 +437,7 @@ describe("Radio Group component tests", function () {
467
437
  var onChange = jest.fn();
468
438
  var onBlur = jest.fn();
469
439
 
470
- var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
440
+ var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
471
441
  name: "test",
472
442
  label: "test-radio-group-label",
473
443
  helperText: "test-radio-group-helper-text",
@@ -475,9 +445,9 @@ describe("Radio Group component tests", function () {
475
445
  onChange: onChange,
476
446
  onBlur: onBlur
477
447
  })),
478
- getByRole = _render16.getByRole,
479
- getAllByRole = _render16.getAllByRole,
480
- container = _render16.container;
448
+ getByRole = _render15.getByRole,
449
+ getAllByRole = _render15.getAllByRole,
450
+ container = _render15.container;
481
451
 
482
452
  var radioGroup = getByRole("radiogroup");
483
453
  var radios = getAllByRole("radio");
@@ -510,7 +480,7 @@ describe("Radio Group component tests", function () {
510
480
  var onChange = jest.fn();
511
481
  var onBlur = jest.fn();
512
482
 
513
- var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
483
+ var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
514
484
  defaultValue: "8",
515
485
  name: "test",
516
486
  label: "test-radio-group-label",
@@ -519,9 +489,9 @@ describe("Radio Group component tests", function () {
519
489
  onChange: onChange,
520
490
  onBlur: onBlur
521
491
  })),
522
- getByRole = _render17.getByRole,
523
- getAllByRole = _render17.getAllByRole,
524
- container = _render17.container;
492
+ getByRole = _render16.getByRole,
493
+ getAllByRole = _render16.getAllByRole,
494
+ container = _render16.container;
525
495
 
526
496
  var radioGroup = getByRole("radiogroup");
527
497
  var radios = getAllByRole("radio");
@@ -559,7 +529,7 @@ describe("Radio Group component tests", function () {
559
529
  var onChange = jest.fn();
560
530
  var onBlur = jest.fn();
561
531
 
562
- var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
532
+ var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
563
533
  defaultValue: "2",
564
534
  name: "test",
565
535
  label: "test-radio-group-label",
@@ -568,9 +538,9 @@ describe("Radio Group component tests", function () {
568
538
  onChange: onChange,
569
539
  onBlur: onBlur
570
540
  })),
571
- getByRole = _render18.getByRole,
572
- getAllByRole = _render18.getAllByRole,
573
- container = _render18.container;
541
+ getByRole = _render17.getByRole,
542
+ getAllByRole = _render17.getAllByRole,
543
+ container = _render17.container;
574
544
 
575
545
  var radioGroup = getByRole("radiogroup");
576
546
  var radios = getAllByRole("radio");
@@ -607,16 +577,16 @@ describe("Radio Group component tests", function () {
607
577
  test("Keyboard focus movement continues from the last radio input clicked", function () {
608
578
  var onChange = jest.fn();
609
579
 
610
- var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
580
+ var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
611
581
  name: "test",
612
582
  label: "test-radio-group-label",
613
583
  helperText: "test-radio-group-helper-text",
614
584
  options: options,
615
585
  onChange: onChange
616
586
  })),
617
- getByRole = _render19.getByRole,
618
- getAllByRole = _render19.getAllByRole,
619
- container = _render19.container;
587
+ getByRole = _render18.getByRole,
588
+ getAllByRole = _render18.getAllByRole,
589
+ container = _render18.container;
620
590
 
621
591
  var radioGroup = getByRole("radiogroup");
622
592
  var radios = getAllByRole("radio");
@@ -655,7 +625,7 @@ describe("Radio Group component tests", function () {
655
625
  test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
656
626
  var onChange = jest.fn();
657
627
 
658
- var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
628
+ var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
659
629
  name: "test",
660
630
  label: "test-radio-group-label",
661
631
  helperText: "test-radio-group-helper-text",
@@ -663,9 +633,9 @@ describe("Radio Group component tests", function () {
663
633
  onChange: onChange,
664
634
  readonly: true
665
635
  })),
666
- getByRole = _render20.getByRole,
667
- getAllByRole = _render20.getAllByRole,
668
- container = _render20.container;
636
+ getByRole = _render19.getByRole,
637
+ getAllByRole = _render19.getAllByRole,
638
+ container = _render19.container;
669
639
 
670
640
  var radioGroup = getByRole("radiogroup");
671
641
  var radios = getAllByRole("radio");
package/radio-group/types.d.ts CHANGED
@@ -102,8 +102,8 @@ export declare type RefType = HTMLDivElement;
102
102
  * Single radio prop types.
103
103
  */
104
104
  export declare type RadioProps = {
105
- option: Option;
106
- currentValue?: string;
105
+ label: string;
106
+ checked: boolean;
107
107
  onClick: () => void;
108
108
  error?: string;
109
109
  disabled: boolean;
package/slider/Slider.js CHANGED
@@ -100,8 +100,9 @@ var DxcSlider = function DxcSlider(_ref) {
100
100
  while (index <= numberOfMarks) {
101
101
  ticks.push( /*#__PURE__*/_react["default"].createElement(TickMark, {
102
102
  disabled: disabled,
103
- stepPosition: step * index / range * 100,
104
- backgroundType: backgroundType
103
+ stepPosition: step * index / range,
104
+ backgroundType: backgroundType,
105
+ stepValue: (value !== null && value !== void 0 ? value : innerValue) / maxValue
105
106
  }));
106
107
  index++;
107
108
  }
@@ -110,7 +111,7 @@ var DxcSlider = function DxcSlider(_ref) {
110
111
  } else {
111
112
  return null;
112
113
  }
113
- }, [minValue, maxValue, step]);
114
+ }, [minValue, maxValue, step, value, innerValue]);
114
115
 
115
116
  var handleSliderChange = function handleSliderChange(event) {
116
117
  var valueToCheck = event.target.value;
@@ -321,14 +322,16 @@ var MarksContainer = _styledComponents["default"].div(_templateObject10 || (_tem
321
322
  return props.isFirefox ? getFireFoxStyles() : getChromeStyles();
322
323
  });
323
324
 
324
- var TickMark = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n background: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n left: ", ";\n"])), function (props) {
325
+ var TickMark = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n background: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n left: ", ";\n ", ";\n"])), function (props) {
325
326
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor : props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
326
327
  }, function (props) {
327
328
  return props.theme.tickHeight;
328
329
  }, function (props) {
329
330
  return props.theme.tickWidth;
330
331
  }, function (props) {
331
- return "".concat(props.stepPosition, "%");
332
+ return "calc(".concat(props.stepPosition, " * 100%)");
333
+ }, function (props) {
334
+ return !props.disabled ? "z-index: ".concat(props.stepPosition <= props.stepValue ? "0" : "1") : "";
332
335
  });
333
336
 
334
337
  var StyledTextInput = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n max-width: 70px;\n"])), function (props) {
package/switch/Switch.js CHANGED
@@ -31,15 +31,13 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
31
31
 
32
32
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
33
33
 
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
34
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
35
35
 
36
36
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
37
 
38
38
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
39
 
40
40
  var DxcSwitch = function DxcSwitch(_ref) {
41
- var _ref2;
42
-
43
41
  var defaultChecked = _ref.defaultChecked,
44
42
  checked = _ref.checked,
45
43
  value = _ref.value,
@@ -71,10 +69,6 @@ var DxcSwitch = function DxcSwitch(_ref) {
71
69
  innerChecked = _useState4[0],
72
70
  setInnerChecked = _useState4[1];
73
71
 
74
- var _useState5 = (0, _react.useState)((_ref2 = label !== "" && label !== null && label !== undefined) !== null && _ref2 !== void 0 ? _ref2 : false),
75
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
76
- hasLabel = _useState6[0];
77
-
78
72
  var colorsTheme = (0, _useTheme["default"])();
79
73
  var translatedLabels = (0, _useTranslatedLabels["default"])();
80
74
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
@@ -89,30 +83,16 @@ var DxcSwitch = function DxcSwitch(_ref) {
89
83
  refTrack.current.focus();
90
84
  var isChecked = !(checked !== null && checked !== void 0 ? checked : innerChecked);
91
85
  setInnerChecked(isChecked);
92
-
93
- if (typeof onChange === "function") {
94
- onChange(isChecked);
95
- }
96
-
86
+ onChange === null || onChange === void 0 ? void 0 : onChange(isChecked);
97
87
  break;
98
88
  }
99
89
  };
100
90
 
101
91
  var handlerSwitchChange = function handlerSwitchChange(event) {
102
- if (checked === undefined) {
103
- var _event$target$checked;
104
-
105
- var isChecked = (_event$target$checked = event.target.checked) !== null && _event$target$checked !== void 0 ? _event$target$checked : !innerChecked;
106
- setInnerChecked(isChecked);
107
-
108
- if (typeof onChange === "function") {
109
- onChange(isChecked);
110
- }
111
- } else {
112
- if (typeof onChange === "function") {
113
- onChange(!checked);
114
- }
115
- }
92
+ checked !== null && checked !== void 0 ? checked : setInnerChecked(function (innerChecked) {
93
+ return !innerChecked;
94
+ });
95
+ onChange === null || onChange === void 0 ? void 0 : onChange(checked ? !checked : !innerChecked);
116
96
  };
117
97
 
118
98
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -120,47 +100,38 @@ var DxcSwitch = function DxcSwitch(_ref) {
120
100
  }, /*#__PURE__*/_react["default"].createElement(SwitchContainer, {
121
101
  margin: margin,
122
102
  size: size,
123
- onKeyDown: handleOnKeyDown
124
- }, labelPosition === "before" && hasLabel && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
103
+ onKeyDown: handleOnKeyDown,
104
+ disabled: disabled,
105
+ onClick: !disabled ? handlerSwitchChange : undefined
106
+ }, labelPosition === "before" && label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
125
107
  id: labelId,
126
108
  labelPosition: labelPosition,
127
- onClick: !disabled ? handlerSwitchChange : undefined,
128
109
  disabled: disabled,
129
110
  backgroundType: backgroundType,
130
- hasLabel: hasLabel
131
- }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, translatedLabels.formFields.optionalLabel)), /*#__PURE__*/_react["default"].createElement(SwitchBase, {
132
- labelPosition: labelPosition,
133
- hasLabel: hasLabel,
134
- htmlFor: labelId,
135
- onClick: disabled === true ? function () {} : handlerSwitchChange
136
- }, /*#__PURE__*/_react["default"].createElement(SwitchInput, {
111
+ label: label
112
+ }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, translatedLabels.formFields.optionalLabel)), /*#__PURE__*/_react["default"].createElement(ValueInput, {
137
113
  type: "checkbox",
138
- role: "switch",
139
114
  name: name,
140
- id: labelId,
141
- disabled: disabled,
115
+ "aria-hidden": true,
142
116
  value: value,
143
- "aria-labelledby": labelId,
144
- "aria-label": hasLabel ? label : undefined,
145
- "aria-checked": checked !== null && checked !== void 0 ? checked : innerChecked,
146
- defaultChecked: defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : undefined,
147
- tabIndex: -1
148
- }), disabled ? /*#__PURE__*/_react["default"].createElement(DisabledSwitchTrack, {
149
- backgroundType: backgroundType,
150
- "data-checked": checked !== null && checked !== void 0 ? checked : innerChecked ? innerChecked : undefined,
151
- tabIndex: -1
152
- }) : /*#__PURE__*/_react["default"].createElement(SwitchTrack, {
117
+ disabled: disabled,
118
+ checked: checked !== null && checked !== void 0 ? checked : innerChecked,
119
+ readOnly: true
120
+ }), /*#__PURE__*/_react["default"].createElement(SwitchBase, null, /*#__PURE__*/_react["default"].createElement(SwitchTrack, {
121
+ role: "switch",
153
122
  backgroundType: backgroundType,
154
- "data-checked": checked !== null && checked !== void 0 ? checked : innerChecked ? innerChecked : undefined,
155
- tabIndex: tabIndex,
123
+ "aria-checked": checked !== null && checked !== void 0 ? checked : innerChecked,
124
+ "aria-disabled": disabled,
125
+ disabled: disabled,
126
+ "aria-labelledby": labelId,
127
+ tabIndex: !disabled ? tabIndex : -1,
156
128
  ref: refTrack
157
- })), labelPosition === "after" && hasLabel && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
129
+ })), labelPosition === "after" && label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
158
130
  id: labelId,
159
131
  labelPosition: labelPosition,
160
- onClick: !disabled ? handlerSwitchChange : undefined,
161
132
  disabled: disabled,
162
133
  backgroundType: backgroundType,
163
- hasLabel: hasLabel
134
+ label: label
164
135
  }, optional && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, translatedLabels.formFields.optionalLabel), " ", label)));
165
136
  };
166
137
 
@@ -176,8 +147,60 @@ var calculateWidth = function calculateWidth(margin, size) {
176
147
  return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
177
148
  };
178
149
 
179
- var SwitchContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n width: ", ";\n height: 40px;\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
150
+ var getDisabledColor = function getDisabledColor(props, element, subelement) {
151
+ switch (element) {
152
+ case "track":
153
+ switch (subelement) {
154
+ case "check":
155
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledCheckedTrackBackgroundColorOnDark : props.theme.disabledCheckedTrackBackgroundColor;
156
+
157
+ case "uncheck":
158
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledUncheckedTrackBackgroundColorOnDark : props.theme.disabledUncheckedTrackBackgroundColor;
159
+ }
160
+
161
+ case "thumb":
162
+ switch (subelement) {
163
+ case "check":
164
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledCheckedThumbBackgroundColorOnDark : props.theme.disabledCheckedThumbBackgroundColor;
165
+
166
+ case "uncheck":
167
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledUncheckedThumbBackgroundColorOnDark : props.theme.disabledUncheckedThumbBackgroundColor;
168
+ }
169
+
170
+ case "label":
171
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor;
172
+ }
173
+ };
174
+
175
+ var getNotDisabledColor = function getNotDisabledColor(props, element, subelement) {
176
+ switch (element) {
177
+ case "track":
178
+ switch (subelement) {
179
+ case "check":
180
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkedTrackBackgroundColorOnDark : props.theme.checkedTrackBackgroundColor;
181
+
182
+ case "uncheck":
183
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.uncheckedTrackBackgroundColorOnDark : props.theme.uncheckedTrackBackgroundColor;
184
+ }
185
+
186
+ case "thumb":
187
+ switch (subelement) {
188
+ case "check":
189
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkedThumbBackgroundColorOnDark : props.theme.checkedThumbBackgroundColor;
190
+
191
+ case "uncheck":
192
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.uncheckedThumbBackgroundColorOnDark : props.theme.uncheckedThumbBackgroundColor;
193
+ }
194
+
195
+ case "label":
196
+ return props.backgroundType && props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
197
+ }
198
+ };
199
+
200
+ var SwitchContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n width: ", ";\n height: 40px;\n cursor: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
180
201
  return calculateWidth(props.margin, props.size);
202
+ }, function (props) {
203
+ return props.disabled === true ? "not-allowed" : "pointer";
181
204
  }, function (props) {
182
205
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
183
206
  }, function (props) {
@@ -190,8 +213,8 @@ var SwitchContainer = _styledComponents["default"].div(_templateObject || (_temp
190
213
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
191
214
  });
192
215
 
193
- var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n opacity: 1;\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n cursor: ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
194
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
216
+ var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n opacity: 1;\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
217
+ return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
195
218
  }, function (props) {
196
219
  return props.theme.labelFontFamily;
197
220
  }, function (props) {
@@ -201,23 +224,21 @@ var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_tem
201
224
  }, function (props) {
202
225
  return props.theme.labelFontWeight;
203
226
  }, function (props) {
204
- return props.disabled === true ? "not-allowed" : "pointer";
205
- }, function (props) {
206
- return !props.hasLabel ? "margin: 0px;" : props.labelPosition === "after" ? "margin-left: ".concat(props.theme.spaceBetweenLabelSwitch, ";") : "margin-right: ".concat(props.theme.spaceBetweenLabelSwitch, ";");
227
+ return !props.label ? "margin: 0px;" : props.labelPosition === "after" ? "margin-left: ".concat(props.theme.spaceBetweenLabelSwitch, ";") : "margin-right: ".concat(props.theme.spaceBetweenLabelSwitch, ";");
207
228
  }, function (props) {
208
229
  return props.labelPosition === "before" && "order: -1";
209
230
  });
210
231
 
211
- var SwitchBase = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n margin: ", ";\n"])), function (props) {
212
- return !props.hasLabel ? "0px 4px" : props.labelPosition === "before" ? "0 4px 0 12px" : "0 12px 0 4px";
213
- });
232
+ var SwitchBase = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n margin: 0px 12px;\n"])));
214
233
 
215
- var SwitchInput = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0px;\n"])));
234
+ var ValueInput = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: none;\n"])));
216
235
 
217
- var SwitchTrack = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border-radius: 15px;\n width: ", ";\n height: ", ";\n position: relative;\n transition: transform 0.2s ease;\n\n &:focus-visible {\n outline: none;\n ::before {\n outline: ", ";\n outline-offset: 6px;\n }\n }\n\n /* Thumb element */\n ::before {\n content: \"\";\n transform: initial;\n transition: transform 0.2s ease;\n position: absolute;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n z-index: 1;\n box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);\n bottom: -6px;\n left: -4px;\n transform: translateX(0px);\n background-color: ", ";\n }\n\n /* Unchecked */\n background-color: ", ";\n\n /* Checked */\n &[data-checked=\"true\"] {\n background-color: ", ";\n ::before {\n transform: translateX(", ");\n background-color: ", ";\n }\n }\n"])), function (props) {
236
+ var SwitchTrack = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border-radius: 15px;\n width: ", ";\n height: ", ";\n position: relative;\n cursor: ", ";\n\n &:focus-visible {\n outline: none;\n ::before {\n outline: ", ";\n outline-offset: 6px;\n }\n }\n\n /* Thumb element */\n ::before {\n content: \"\";\n transform: initial;\n position: absolute;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n z-index: 1;\n box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);\n bottom: -6px;\n left: -4px;\n transform: translateX(0px);\n background-color: ", ";\n }\n\n /* Unchecked */\n background-color: ", ";\n\n /* Checked */\n &[aria-checked=\"true\"] {\n background-color: ", ";\n ::before {\n transform: translateX(", ");\n background-color: ", ";\n }\n }\n"])), function (props) {
218
237
  return props.theme.trackWidth;
219
238
  }, function (props) {
220
239
  return props.theme.trackHeight;
240
+ }, function (props) {
241
+ return props.disabled ? "not-allowed" : "pointer";
221
242
  }, function (props) {
222
243
  return "".concat(props.backgroundType === "dark" ? props.theme.thumbFocusColorOnDark : props.theme.thumbFocusColor, " solid 2px");
223
244
  }, function (props) {
@@ -225,27 +246,16 @@ var SwitchTrack = _styledComponents["default"].span(_templateObject5 || (_templa
225
246
  }, function (props) {
226
247
  return props.theme.thumbHeight;
227
248
  }, function (props) {
228
- return props.backgroundType === "dark" ? props.theme.uncheckedThumbBackgroundColorOnDark : props.theme.uncheckedThumbBackgroundColor;
249
+ return props.disabled ? getDisabledColor(props, "thumb", "uncheck") : getNotDisabledColor(props, "thumb", "uncheck");
229
250
  }, function (props) {
230
- return props.backgroundType === "dark" ? props.theme.uncheckedTrackBackgroundColorOnDark : props.theme.uncheckedTrackBackgroundColor;
251
+ return props.disabled ? getDisabledColor(props, "track", "uncheck") : getNotDisabledColor(props, "track", "uncheck");
231
252
  }, function (props) {
232
- return props.backgroundType === "dark" ? props.theme.checkedTrackBackgroundColorOnDark : props.theme.checkedTrackBackgroundColor;
253
+ return props.disabled ? getDisabledColor(props, "track", "check") : getNotDisabledColor(props, "track", "check");
233
254
  }, function (props) {
234
255
  return props.theme.thumbShift;
235
256
  }, function (props) {
236
- return props.backgroundType === "dark" ? props.theme.checkedThumbBackgroundColorOnDark : props.theme.checkedThumbBackgroundColor;
257
+ return props.disabled ? getDisabledColor(props, "thumb", "check") : getNotDisabledColor(props, "thumb", "check");
237
258
  });
238
259
 
239
- var DisabledSwitchTrack = (0, _styledComponents["default"])(SwitchTrack)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: not-allowed;\n\n /* Unchecked */\n background-color: ", ";\n\n ::before {\n background-color: ", ";\n }\n\n /* Checked */\n &[data-checked=\"true\"] {\n background-color: ", ";\n\n ::before {\n transform: translateX(", ");\n background-color: ", ";\n }\n }\n"])), function (props) {
240
- return props.backgroundType === "dark" ? props.theme.disabledUncheckedTrackBackgroundColorOnDark : props.theme.disabledUncheckedTrackBackgroundColor;
241
- }, function (props) {
242
- return props.backgroundType === "dark" ? props.theme.disabledUncheckedThumbBackgroundColorOnDark : props.theme.disabledUncheckedThumbBackgroundColor;
243
- }, function (props) {
244
- return props.backgroundType === "dark" ? props.theme.disabledCheckedTrackBackgroundColorOnDark : props.theme.disabledCheckedTrackBackgroundColor;
245
- }, function (props) {
246
- return props.theme.thumbShift;
247
- }, function (props) {
248
- return props.backgroundType === "dark" ? props.theme.disabledCheckedThumbBackgroundColorOnDark : props.theme.disabledCheckedThumbBackgroundColor;
249
- });
250
260
  var _default = DxcSwitch;
251
261
  exports["default"] = _default;
package/switch/Switch.test.js CHANGED
@@ -185,28 +185,41 @@ describe("Switch component tests", function () {
185
185
  expect(onChange.mock.calls[1][0]).toBe(false);
186
186
  });
187
187
  test("Renders with correct initial value and initial state when it is uncontrolled", function () {
188
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
188
+ var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
189
189
  label: "Default label",
190
190
  defaultChecked: true,
191
- value: "test-defaultChecked"
191
+ value: "test-defaultChecked",
192
+ name: "test"
193
+ }));
194
+ var switchEl = component.getByRole("switch");
195
+ var inputEl = component.container.querySelector("input[name=\"test\"]");
196
+ expect(inputEl.value).toBe("test-defaultChecked");
197
+ expect(switchEl.getAttribute("aria-checked")).toBe("true");
198
+ });
199
+ test("Renders with correct aria attributes", function () {
200
+ var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
201
+ label: "Default label"
192
202
  })),
203
+ getByText = _render10.getByText,
193
204
  getByRole = _render10.getByRole;
194
205
 
195
- var inputEl = getByRole("switch");
196
- expect(inputEl.checked).toBe(true);
197
- expect(inputEl.value).toBe("test-defaultChecked");
198
- expect(inputEl.getAttribute("aria-checked")).toBe("true");
206
+ var switchEl = getByRole("switch");
207
+ var label = getByText("Default label");
208
+ expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
209
+ expect(switchEl.getAttribute("aria-checked")).toBe("false");
199
210
  });
200
- test("Renders with correct aria attributes", function () {
211
+ test("Renders disabled switch correctly", function () {
201
212
  var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
202
- label: "Default label"
213
+ label: "Default label",
214
+ disabled: true
203
215
  })),
204
- getByRole = _render11.getByRole,
205
- getByText = _render11.getByText;
216
+ getByText = _render11.getByText,
217
+ getByRole = _render11.getByRole;
206
218
 
207
- var inputEl = getByRole("switch");
219
+ var switchEl = getByRole("switch");
208
220
  var label = getByText("Default label");
209
- expect(inputEl.getAttribute("aria-labelledby")).toBe(label.id);
210
- expect(inputEl.getAttribute("aria-checked")).toBe("false");
221
+ expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
222
+ expect(switchEl.getAttribute("aria-checked")).toBe("false");
223
+ expect(switchEl.getAttribute("aria-disabled")).toBe("true");
211
224
  });
212
225
  });
package/tabs-nav/Tab.js CHANGED
@@ -60,8 +60,8 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
60
60
  var _tabRef$current2;
61
61
 
62
62
  switch (event.key) {
63
+ case " ":
63
64
  case "Enter":
64
- case "Space":
65
65
  tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
66
66
  event.preventDefault();
67
67
  break;