@dxc-technology/halstack-react 0.0.0-0e7fa98 → 0.0.0-0ea575c

package/quick-nav/QuickNav.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import DxcQuickNav from "./QuickNav";
 import DxcHeading from "../heading/Heading";
-import DxcText from "../text/Text";
+import DxcParagraph from "../paragraph/Paragraph";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
@@ -11,6 +11,36 @@ export default {
   component: DxcQuickNav,
 };
 
+const defaultLinks = [
+  {
+    label: "Overview",
+    id: "overview",
+  },
+  {
+    label: "Principles",
+    id: "principles",
+    links: [
+      { label: "Color", id: "color" },
+      { label: "Spacing", id: "spacing" },
+      { label: "Typography", id: "typography" },
+    ],
+  },
+  {
+    label: "Components",
+    id: "components",
+    links: [
+      {
+        label: "Accordion",
+        id: "accordion",
+      },
+      {
+        label: "Button",
+        id: "button",
+      },
+    ],
+  },
+];
+
 const links = [
   {
     label: "Overview",
@@ -23,14 +53,24 @@ const links = [
     ],
   },
   {
-    label: "Principles",
+    label: "Principles very very very very very very very very long",
     id: "principles",
     links: [
-      { label: "Color", id: "color" },
-      { label: "Spacing", id: "spacing" },
+      { label: "Color very very very very very very very very long", id: "color" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
       { label: "Typography", id: "typography" },
     ],
   },
+  {
+    label: "Componentsveryveryveryveryveryveryveryverylong",
+    id: "components",
+    links: [
+      {
+        label: "Accordion",
+        id: "accordion",
+      },
+    ],
+  },
 ];
 
 export const Chromatic = () => (
@@ -38,13 +78,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={defaultLinks} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Text overflow" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -53,7 +105,7 @@ export const Chromatic = () => (
         <ContentContainer>
           <Content id="overview">
             <DxcHeading level={1} text="Overview" margin={{ bottom: "small" }} />
-            <DxcText>
+            <DxcParagraph>
               Halstack is the DXC Technology's open source design system for insurance products and digital experiences.
               Our system provides all the tools and resources needed to create superior, beautiful but above all,
               functional user experiences. Halstack is the DXC Technology's open source design system for insurance
@@ -70,10 +122,10 @@ export const Chromatic = () => (
               create superior, beautiful but above all, functional user experiences.Halstack is the DXC Technology's
               open source design system for insurance products and digital experiences. Our system provides all the
               tools and resources needed to create superior, beautiful but above all, functional user experiences.
-            </DxcText>
+            </DxcParagraph>
             <Content id="introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
                 provide guidance for development teams in order to deliver delightful and consistent user experiences to
                 our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
@@ -103,14 +155,14 @@ export const Chromatic = () => (
                 to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
                 design new features, or help us improve the project documentation. If you're interested, definitely
                 check out our contribution guidelines.
-              </DxcText>
+              </DxcParagraph>
             </Content>
           </Content>
           <Content id="principles">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
             <Content id="color">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
                 palette brings a unified consistency and helps in guiding the user's perception order. Our color palette
                 is based in the HSL model . All our color families are calculated using the lightness value of the
@@ -143,11 +195,11 @@ export const Chromatic = () => (
                 tokens to manage color. Appart from a multi-purpose greyscale family, purple and blue are the core color
                 families used in our set of components. Additional families as red, green and yellow help as feedback
                 role-based color palettes and must not be used outside this context.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="spacing">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
                 values of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent,
                 yet distinct enough, steps between them.In the search of consistent alignment between the elements we
@@ -165,11 +217,11 @@ export const Chromatic = () => (
                 consistent, yet distinct enough, steps between them.In the search of consistent alignment between the
                 elements we provide a spacing scale based on a root values of 8px and 4px. The numbers 4 and 8 are
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
                 has on the user interface content. It defines what is the first noticeable piece of information or data
                 based on the font shape, size, color, or type and it highlights some pieces of text over the rest. Some
@@ -201,12 +253,23 @@ export const Chromatic = () => (
                 Halstack Design System include headers, body, taglines, captions, and labels. Make sure you include all
                 the different typographic variants in order to enhance the application's content structure, including
                 the Heading component which defines different levels of page and section titles.
-              </DxcText>
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
             </Content>
           </Content>
         </ContentContainer>
         <QuickNavContainer>
-          <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+          <DxcQuickNav title="Sections" links={links} />
         </QuickNavContainer>
       </Container>
     </ExampleContainer>

package/quick-nav/types.d.ts

@@ -2,13 +2,13 @@ declare type Props = {
     /**
      * Title of the quick nav component.
      */
-    title: string;
+    title?: string;
     /**
      * Links to be shown inside the quick nav component.
      */
-    links: Link[];
+    links: LinkType[];
 };
-declare type Link = {
+declare type LinkType = {
     /**
      * Label to be shown in the link.
      */
@@ -16,6 +16,6 @@ declare type Link = {
     /**
      * Sublinks of the link.
      */
-    links?: Link[];
+    links?: LinkType[];
 };
 export default Props;

package/radio-group/Radio.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioProps } from "./types";
-declare const _default: React.MemoExoticComponent<({ option, currentValue, onClick, error, disabled, focused, readonly, tabIndex, }: RadioProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused, readonly, tabIndex, }: RadioProps) => JSX.Element>;
 export default _default;

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,9 +23,11 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
 
@@ -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,20 @@ 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, {
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "hidden",
     name: name,
-    value: value !== null && value !== void 0 ? value : innerValue,
-    readOnly: true,
-    "aria-hidden": "true"
+    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : ""
   }), 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 +261,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;
@@ -268,9 +269,7 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
   return props.theme.groupHorizontalGutter;
 });
 
-var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
-
-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) {
+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) {
   return props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;

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";