@dxc-technology/halstack-react 0.0.0-335f028 → 0.0.0-336cd81

package/radio-group/Radio.js

@@ -28,10 +28,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var DxcRadio = function DxcRadio(_ref) {
-  var _option$disabled;
-
-  var option = _ref.option,
-      currentValue = _ref.currentValue,
+  var label = _ref.label,
+      checked = _ref.checked,
       onClick = _ref.onClick,
       error = _ref.error,
       disabled = _ref.disabled,
@@ -50,7 +48,7 @@ var DxcRadio = function DxcRadio(_ref) {
     var _ref$current;
 
     onClick();
-    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());
+    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());
   };
 
   var _useState3 = (0, _react.useState)(true),
@@ -75,52 +73,57 @@ var DxcRadio = function DxcRadio(_ref) {
     error: error,
     disabled: disabled,
     readonly: readonly,
-    onMouseDown: function onMouseDown(event) {
-      // Prevents div's onClick from stealing the radio input's focus
-      event.preventDefault();
-    },
-    onClick: handleOnClick
+    onClick: disabled ? undefined : handleOnClick
   }, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
     error: error,
     disabled: disabled,
     readonly: readonly,
     role: "radio",
-    "aria-checked": option.value === currentValue,
-    "aria-disabled": (_option$disabled = option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false,
+    "aria-checked": checked,
+    "aria-disabled": disabled,
     "aria-labelledby": radioLabelId,
     tabIndex: disabled ? -1 : focused ? tabIndex : -1,
     ref: ref
-  }, option.value === currentValue && /*#__PURE__*/_react["default"].createElement(Dot, {
+  }, checked && /*#__PURE__*/_react["default"].createElement(Dot, {
     disabled: disabled,
     readonly: readonly,
     error: error
   }))), /*#__PURE__*/_react["default"].createElement(Label, {
     id: radioLabelId,
     disabled: disabled
-  }, option.label))));
+  }, label))));
 };
 
-var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
+var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
+  switch (state) {
+    case "enabled":
+      return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readonly ? props.theme.readonlyRadioInputColor : props.theme.radioInputColor;
 
-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) {
-  return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
-}, function (props) {
-  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;";
-});
+    case "hover":
+      return props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor;
 
-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"])));
+    case "active":
+      return props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor;
+  }
+};
 
-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) {
-  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;
+var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
+
+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"])));
+
+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) {
+  return getRadioInputStateColor(props, "enabled");
+}, function (props) {
+  return props.theme.focusBorderColor;
 }, function (props) {
-  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    ";
+  return props.disabled && "pointer-events: none;";
 });
 
-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) {
-  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;
+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) {
+  return getRadioInputStateColor(props, "enabled");
 });
 
-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) {
+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) {
   return props.theme.radioInputLabelMargin;
 }, function (props) {
   return props.theme.fontFamily;
@@ -133,7 +136,19 @@ var Label = _styledComponents["default"].span(_templateObject6 || (_templateObje
 }, function (props) {
   return props.theme.radioInputLabelLineHeight;
 }, function (props) {
-  return props.disabled && "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;");
+  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
+});
+
+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) {
+  return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
+}, RadioInput, function (props) {
+  return !props.disabled && getRadioInputStateColor(props, "hover");
+}, Dot, function (props) {
+  return !props.disabled && getRadioInputStateColor(props, "hover");
+}, RadioInput, function (props) {
+  return !props.disabled && getRadioInputStateColor(props, "active");
+}, Dot, function (props) {
+  return !props.disabled && getRadioInputStateColor(props, "active");
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);

package/radio-group/RadioGroup.js

@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Radio = _interopRequireDefault(require("./Radio"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -39,6 +41,8 @@ var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
 };
 
 var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var label = _ref.label,
       name = _ref.name,
       helperText = _ref.helperText,
@@ -47,8 +51,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$optional = _ref.optional,
       optional = _ref$optional === void 0 ? false : _ref$optional,
-      _ref$optionalItemLabe = _ref.optionalItemLabel,
-      optionalItemLabel = _ref$optionalItemLabe === void 0 ? "N/A" : _ref$optionalItemLabe,
+      optionalItemLabel = _ref.optionalItemLabel,
       _ref$readonly = _ref.readonly,
       readonly = _ref$readonly === void 0 ? false : _ref$readonly,
       _ref$stacking = _ref.stacking,
@@ -78,8 +81,10 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       firstTimeFocus = _useState6[0],
       setFirstTimeFocus = _useState6[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
-    label: optionalItemLabel,
+    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
     value: "",
     disabled: disabled
   };
@@ -92,7 +97,6 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       currentFocusIndex = _useState8[0],
       setCurrentFocusIndex = _useState8[1];
 
-  var colorsTheme = (0, _useTheme["default"])();
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
 
@@ -100,16 +104,16 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       value !== null && value !== void 0 ? value : setInnerValue(newValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
-  }, [value, innerValue, setInnerValue, onChange]);
+  }, [value, innerValue, onChange]);
 
-  var handleOnBlur = function handleOnBlur(e) {
+  var handleOnBlur = function handleOnBlur(event) {
     // If the radio group loses the focus to an element not contained inside it...
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
       setFirstTimeFocus(true);
       var currentValue = value !== null && value !== void 0 ? value : innerValue;
       !optional && !Boolean(currentValue) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue,
-        error: "This field is required. Please, choose an option."
+        error: translatedLabels.formFields.requiredSelectionErrorMessage
       }) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue
       });
@@ -147,27 +151,24 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   };
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 37: // arrow left
-
-      case 38:
-        // arrow up
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
+      case "Up":
+      case "ArrowUp":
         event.preventDefault();
         setPreviousRadioChecked();
         break;
 
-      case 39: // arrow right
-
-      case 40:
-        // arrow down
+      case "Right":
+      case "ArrowRight":
+      case "Down":
+      case "ArrowDown":
         event.preventDefault();
         setNextRadioChecked();
         break;
 
-      case 13: // enter
-
-      case 32:
-        // space
+      case " ":
         event.preventDefault();
         handleOnChange(innerOptions[currentFocusIndex].value);
         break;
@@ -182,7 +183,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     id: radioGroupLabelId,
     helperText: helperText,
     disabled: disabled
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, " ".concat(translatedLabels.formFields.optionalLabel))), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
     onBlur: handleOnBlur,
@@ -192,20 +193,22 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     role: "radiogroup",
     "aria-disabled": disabled,
     "aria-labelledby": radioGroupLabelId,
-    "aria-invalid": error ? "true" : "false",
+    "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": !disabled && !readonly && !optional,
     "aria-readonly": readonly,
     "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
   }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
-    value: value !== null && value !== void 0 ? value : innerValue,
+    disabled: disabled,
+    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
     readOnly: true,
     "aria-hidden": "true"
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      option: option,
-      currentValue: value !== null && value !== void 0 ? value : innerValue,
+      key: "radio-".concat(index),
+      label: option.label,
+      checked: (value !== null && value !== void 0 ? value : innerValue) === option.value,
       onClick: function onClick() {
         handleOnChange(option.value);
         setCurrentFocusIndex(index);
@@ -260,7 +263,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.groupLabelMargin;
 });
 
-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) {
+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) {
   return props.stacking;
 }, function (props) {
   return props.theme.groupVerticalGutter;

package/radio-group/RadioGroup.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcRadioGroup from "./RadioGroup";