@dxc-technology/halstack-react 0.0.0-a799608 → 0.0.0-a7fec42

package/dropdown/Dropdown.js

@@ -146,7 +146,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
         handleOnOpenMenu();
         break;
 
-      case "Space":
+      case " ":
       case "Down":
       case "ArrowDown":
       case "Enter":
@@ -186,7 +186,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
         setNextIndexFocus();
         break;
 
-      case "Space":
+      case " ":
       case "Enter":
         event.preventDefault();
         handleMenuItemOnClick(options[visualFocusIndex].value);
@@ -254,7 +254,8 @@ var DxcDropdown = function DxcDropdown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(Popover.Root, {
     open: isOpen
   }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
-    asChild: true
+    asChild: true,
+    type: undefined
   }, /*#__PURE__*/_react["default"].createElement(DropdownTrigger, {
     opened: isOpen,
     onClick: handleTriggerOnClick,
@@ -267,8 +268,8 @@ var DxcDropdown = function DxcDropdown(_ref) {
     margin: margin,
     size: size,
     id: triggerId,
-    "aria-disabled": disabled,
     "aria-haspopup": "true",
+    "aria-controls": menuId,
     "aria-expanded": isOpen ? true : undefined,
     tabIndex: tabIndex,
     ref: triggerRef
@@ -302,7 +303,7 @@ var sizes = {
   medium: "240px",
   large: "480px",
   fillParent: "100%",
-  fitContent: "unset"
+  fitContent: "fit-content"
 };
 
 var calculateWidth = function calculateWidth(margin, size) {

package/dropdown/Dropdown.test.js

@@ -74,7 +74,6 @@ describe("Dropdown component tests", function () {
         getByRole = _render.getByRole;
 
     var dropdown = getByRole("button");
-    expect(dropdown.getAttribute("aria-disabled")).toBe("false");
     expect(dropdown.getAttribute("aria-haspopup")).toBe("true");
     expect(dropdown.getAttribute("aria-expanded")).toBeNull();
     expect(dropdown.getAttribute("aria-activedescendant")).toBeNull();
@@ -82,6 +81,7 @@ describe("Dropdown component tests", function () {
     _userEvent["default"].click(dropdown);
 
     var menu = getByRole("menu");
+    expect(dropdown.getAttribute("aria-controls")).toBe(menu.id);
     expect(dropdown.getAttribute("aria-expanded")).toBe("true");
     expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
     expect(menu.getAttribute("aria-orientation")).toBe("vertical");
@@ -123,7 +123,6 @@ describe("Dropdown component tests", function () {
         queryByText = _render3.queryByText;
 
     var dropdown = getByRole("button");
-    expect(dropdown.getAttribute("aria-disabled")).toBe("true");
     expect(queryByRole("menu")).toBeFalsy();
 
     _userEvent["default"].click(dropdown);
@@ -267,7 +266,7 @@ describe("Dropdown component tests", function () {
     var dropdown = getByRole("button");
 
     _react2.fireEvent.keyDown(dropdown, {
-      key: "Space",
+      key: " ",
       code: "Space",
       keyCode: 32,
       charCode: 32

package/dropdown/DropdownMenuItem.js

@@ -49,7 +49,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
   }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label)));
 };
 
-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) {
+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) {
   return props.theme.optionIconSpacing;
 }, function (props) {
   return props.theme.optionPaddingTop;

package/flex/Flex.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import FlexPropsType from "./types";
-declare const DxcFlex: ({ children, ...props }: FlexPropsType) => JSX.Element;
+declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: FlexPropsType) => JSX.Element;
 export default DxcFlex;

package/flex/Flex.js

@@ -11,6 +11,8 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,20 +21,39 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var _excluded = ["children"];
+var _excluded = ["direction", "wrap", "gap", "order", "grow", "shrink", "basis", "children"],
+    _excluded2 = ["justifyContent", "alignItems", "alignContent", "alignSelf"];
 
 var DxcFlex = function DxcFlex(_ref) {
-  var children = _ref.children,
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "row" : _ref$direction,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? "nowrap" : _ref$wrap,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? "0" : _ref$gap,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$grow = _ref.grow,
+      grow = _ref$grow === void 0 ? 0 : _ref$grow,
+      _ref$shrink = _ref.shrink,
+      shrink = _ref$shrink === void 0 ? 1 : _ref$shrink,
+      _ref$basis = _ref.basis,
+      basis = _ref$basis === void 0 ? "auto" : _ref$basis,
+      children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(Flex, props, children);
+  return /*#__PURE__*/_react["default"].createElement(Flex, (0, _extends2["default"])({
+    $direction: direction,
+    $wrap: wrap,
+    $order: order,
+    $grow: grow,
+    $shrink: shrink,
+    $basis: basis,
+    $gap: gap
+  }, props), children);
 };
 
 var Flex = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
-  var _ref2$direction = _ref2.direction,
-      direction = _ref2$direction === void 0 ? "row" : _ref2$direction,
-      _ref2$wrap = _ref2.wrap,
-      wrap = _ref2$wrap === void 0 ? "nowrap" : _ref2$wrap,
-      _ref2$justifyContent = _ref2.justifyContent,
+  var _ref2$justifyContent = _ref2.justifyContent,
       justifyContent = _ref2$justifyContent === void 0 ? "flex-start" : _ref2$justifyContent,
       _ref2$alignItems = _ref2.alignItems,
       alignItems = _ref2$alignItems === void 0 ? "stretch" : _ref2$alignItems,
@@ -40,17 +61,8 @@ var Flex = _styledComponents["default"].div(_templateObject || (_templateObject
       alignContent = _ref2$alignContent === void 0 ? "normal" : _ref2$alignContent,
       _ref2$alignSelf = _ref2.alignSelf,
       alignSelf = _ref2$alignSelf === void 0 ? "auto" : _ref2$alignSelf,
-      _ref2$gap = _ref2.gap,
-      gap = _ref2$gap === void 0 ? "0" : _ref2$gap,
-      _ref2$order = _ref2.order,
-      order = _ref2$order === void 0 ? 0 : _ref2$order,
-      _ref2$grow = _ref2.grow,
-      grow = _ref2$grow === void 0 ? 0 : _ref2$grow,
-      _ref2$shrink = _ref2.shrink,
-      shrink = _ref2$shrink === void 0 ? 1 : _ref2$shrink,
-      _ref2$basis = _ref2.basis,
-      basis = _ref2$basis === void 0 ? "auto" : _ref2$basis;
-  return "\n    flex-direction: ".concat(direction, "; \n    flex-wrap: ").concat(wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    align-self: ").concat(alignSelf, ";\n    gap: ").concat((0, _typeof2["default"])(gap) === "object" ? "".concat(gap.rowGap, " ").concat(gap.columnGap) : gap, ";\n    order: ").concat(order, ";\n    flex-grow: ").concat(grow, ";\n    flex-shrink: ").concat(shrink, ";\n    flex-basis: ").concat(basis, ";\n  ");
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return "\n    flex-direction: ".concat(props.$direction, "; \n    flex-wrap: ").concat(props.$wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    align-self: ").concat(alignSelf, ";\n    gap: ").concat((0, _typeof2["default"])(props.$gap) === "object" ? "".concat(props.$gap.rowGap, " ").concat(props.$gap.columnGap) : props.$gap, ";\n    order: ").concat(props.$order, ";\n    flex-grow: ").concat(props.$grow, ";\n    flex-shrink: ").concat(props.$shrink, ";\n    flex-basis: ").concat(props.$basis, ";\n  ");
 });
 
 var _default = DxcFlex;

package/flex/types.d.ts

@@ -3,13 +3,15 @@ declare type Gap = {
     rowGap: string;
     columnGap: string;
 };
-declare type Props = {
-    direction?: "row" | "row-reverse" | "column" | "column-reverse";
-    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+declare type CommonProps = {
     justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
     alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
     alignContent?: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
     alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+};
+declare type Props = CommonProps & {
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
     gap?: string | Gap;
     order?: number;
     grow?: number;
@@ -18,4 +20,13 @@ declare type Props = {
     as?: keyof HTMLElementTagNameMap;
     children: React.ReactNode;
 };
+export declare type StyledProps = CommonProps & {
+    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    $wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    $gap?: string | Gap;
+    $order?: number;
+    $grow?: number;
+    $shrink?: number;
+    $basis?: string;
+};
 export default Props;

package/footer/types.d.ts

@@ -57,6 +57,7 @@ declare type FooterPropsType = {
      */
     margin?: Space | Size;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area of the component.
      * You can pass an object with properties in order to specify different padding sizes.
      */

package/header/types.d.ts

@@ -32,6 +32,7 @@ declare type Props = {
      */
     margin?: Space;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area of the component
      * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in

package/number-input/NumberInput.test.js

@@ -83,7 +83,7 @@ describe("Number input component tests", function () {
     })),
         getByRole = _render8.getByRole;
 
-    var input = getByRole("textbox");
+    var input = getByRole("spinbutton");
 
     _userEvent["default"].type(input, "1");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-a799608",
+  "version": "0.0.0-a7fec42",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -13,8 +13,8 @@
   "main": "./main.js",
   "types": "./main.d.ts",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.x",
+    "react-dom": "^18.x",
     "styled-components": "^5.0.1"
   },
   "dependencies": {
@@ -24,7 +24,7 @@
     "@material-ui/lab": "4.0.0-alpha.17",
     "@material-ui/pickers": "3.2.2",
     "@material-ui/styles": "4.0.2",
-    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
@@ -73,8 +73,8 @@
     "eslint-plugin-storybook": "^0.5.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.x",
+    "react-dom": "^18.x",
     "react-test-renderer": "^16.8.6",
     "storybook-addon-pseudo-states": "^1.0.0",
     "styled-components": "^5.0.1",

package/password-input/PasswordInput.js

@@ -100,14 +100,16 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     }
   }, [isPasswordVisible]);
 
-  var viewPassword = function viewPassword() {
+  var viewPassword = function viewPassword(event) {
     setInputType("text");
     setIsPasswordVisible(true);
+    event.preventDefault();
   };
 
-  var hidePassword = function hidePassword() {
+  var hidePassword = function hidePassword(event) {
     setInputType("password");
     setIsPasswordVisible(false);
+    event.preventDefault();
   };
 
   var action = {

package/password-input/PasswordInput.test.js

@@ -46,9 +46,9 @@ describe("Password input component tests", function () {
       label: "Password input",
       onChange: onChange
     })),
-        getByRole = _render4.getByRole;
+        getByLabelText = _render4.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
 
     _userEvent["default"].type(passwordInput, "Pa$$w0rd");
 
@@ -64,9 +64,9 @@ describe("Password input component tests", function () {
       label: "Password input",
       onBlur: onBlur
     })),
-        getByRole = _render5.getByRole;
+        getByLabelText = _render5.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
 
     _userEvent["default"].type(passwordInput, "Pa$$w0rd");
 
@@ -83,9 +83,9 @@ describe("Password input component tests", function () {
       clearable: true
     })),
         getAllByRole = _render6.getAllByRole,
-        getByRole = _render6.getByRole;
+        getByLabelText = _render6.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
 
     _userEvent["default"].type(passwordInput, "Pa$$w0rd");
 
@@ -101,9 +101,9 @@ describe("Password input component tests", function () {
       label: "Password input"
     })),
         getAllByRole = _render7.getAllByRole,
-        getByRole = _render7.getByRole;
+        getByLabelText = _render7.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
 
     _userEvent["default"].type(passwordInput, "Pa$$w0rd");
 
@@ -117,9 +117,9 @@ describe("Password input component tests", function () {
       clearable: true
     })),
         getAllByRole = _render8.getAllByRole,
-        getByRole = _render8.getByRole;
+        getByLabelText = _render8.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
 
     _userEvent["default"].type(passwordInput, "Pa$$w0rd");
 
@@ -164,9 +164,10 @@ describe("Password input component tests", function () {
     var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
       label: "Password input"
     })),
-        getByRole = _render10.getByRole;
+        getByRole = _render10.getByRole,
+        getByLabelText = _render10.getByLabelText;
 
-    var passwordInput = getByRole("textbox");
+    var passwordInput = getByLabelText("Password input");
     expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
     expect(passwordInput.getAttribute("aria-controls")).toBeNull();
     expect(passwordInput.getAttribute("aria-expanded")).toBeNull();

package/quick-nav/QuickNav.js

@@ -48,13 +48,10 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
     text: title || translatedLabels.quickNav.contentTitle
-  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    direction: "column",
-    gap: "0.5rem"
-  }, links.map(function (link) {
+  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, links.map(function (link) {
     var _link$links;
 
-    return /*#__PURE__*/_react["default"].createElement(ListRow, {
+    return /*#__PURE__*/_react["default"].createElement("li", {
       key: link.label
     }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
       space: "0.25rem"
@@ -62,18 +59,20 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
       href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
         lower: true
       }))
-    }, link === null || link === void 0 ? void 0 : link.label), (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
-      return /*#__PURE__*/_react["default"].createElement(ListRow, {
+    }, link === null || link === void 0 ? void 0 : link.label), /*#__PURE__*/_react["default"].createElement(ListSecondColumn, null, (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
+      return /*#__PURE__*/_react["default"].createElement("li", {
         key: sublink.label
       }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
         horizontal: "0.5rem"
       }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
-        href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
+        href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
+          lower: true
+        }), "-").concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true
         }))
       }, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
-    }))));
-  }))))));
+    })))));
+  })))));
 };
 
 var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  border-left: 2px solid ", ";\n"])), function (props) {
@@ -88,9 +87,9 @@ var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_te
   return props.theme.dividerBorderColor;
 });
 
-var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n"])));
+var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n"])));
 
-var ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"])));
+var ListSecondColumn = _styledComponents["default"].ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n"])));
 
 var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  display: block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n\n  &:hover {\n    color: ", ";\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-style: ", ";\n    outline-width: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
   return props.theme.fontSize;

package/quick-nav/QuickNav.stories.tsx

@@ -11,33 +11,60 @@ export default {
   component: DxcQuickNav,
 };
 
+const defaultLinks = [
+  {
+    label: "Overview",
+  },
+  {
+    label: "Principles",
+    links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Accordion",
+      },
+      {
+        label: "Button",
+      },
+    ],
+  },
+];
+
 const links = [
   {
     label: "Overview",
-    id: "overview",
     links: [
       {
         label: "Introduction",
-        id: "introduction",
+      },
+    ],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Introduction",
+      },
+      {
+        label: "Accordion",
       },
     ],
   },
   {
     label: "Principles very very very very very very very very long",
-    id: "principles",
     links: [
-      { label: "Color very very very very very very very very long", id: "color" },
-      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
-      { label: "Typography", id: "typography" },
+      { label: "Color very very very very very very very very long" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong" },
+      { label: "Typography" },
     ],
   },
   {
     label: "Componentsveryveryveryveryveryveryveryverylong",
-    id: "components",
     links: [
       {
         label: "Accordion",
-        id: "accordion",
       },
     ],
   },
@@ -48,19 +75,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav 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 links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Link focus" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -87,7 +120,44 @@ export const Chromatic = () => (
               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.
             </DxcParagraph>
-            <Content id="introduction">
+            <Content id="overview-introduction">
+              <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <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
+                guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
+                and engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                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.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 guidelines, responsive design techniques, and layout
+                proposals have been carefully curated by DXC design and engineering teams with the objective of creating
+                a unique visual language and ecosystem for our applications. This is the DXC way of creating User
+                Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
+                Technology bussines needs, but it is open for anyone 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.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 guidelines,
+                responsive design techniques, and layout proposals have been carefully curated by DXC design and
+                engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                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.
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="components-introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
@@ -121,10 +191,18 @@ export const Chromatic = () => (
                 check out our contribution guidelines.
               </DxcParagraph>
             </Content>
+            <Content id="components-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>
-          <Content id="principles">
+          <Content id="principles-very-very-very-very-very-very-very-very-long">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="color">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
@@ -161,7 +239,7 @@ export const Chromatic = () => (
                 role-based color palettes and must not be used outside this context.
               </DxcParagraph>
             </Content>
-            <Content id="spacing">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
@@ -183,7 +261,7 @@ export const Chromatic = () => (
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
               </DxcParagraph>
             </Content>
-            <Content id="typography">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
@@ -220,9 +298,9 @@ export const Chromatic = () => (
               </DxcParagraph>
             </Content>
           </Content>
-          <Content id="components">
+          <Content id="componentsveryveryveryveryveryveryveryverylong">
             <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="accordion">
+            <Content id="componentsveryveryveryveryveryveryveryverylong-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.
@@ -233,7 +311,7 @@ export const Chromatic = () => (
           </Content>
         </ContentContainer>
         <QuickNavContainer>
-          <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+          <DxcQuickNav title="Sections" links={links} />
         </QuickNavContainer>
       </Container>
     </ExampleContainer>

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;