@dxc-technology/halstack-react 0.0.0-1c4cbc0 → 0.0.0-1d5e7bf

package/link/types.d.ts

@@ -43,10 +43,9 @@ export declare type LinkProps = {
      */
     tabIndex?: number;
     /**
-     * Content of the link. To use the component with other libraries (such as React Router or Next.js Link) pass the custom link as a child.
-     * The component will apply the styles to the custom link.
+     * Content of the link.
      */
-    children?: React.ReactNode;
+    children: string;
     /**
      * Element or path used as the icon that will be placed next to the link text.
      */

package/list/List.js

@@ -24,7 +24,7 @@ function List(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "disc" : _ref$type,
       _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
+      gutter = _ref$gutter === void 0 ? "0.25rem" : _ref$gutter;
   return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
     as: type === "number" ? "ol" : "ul",
     gutter: gutter

package/list/List.stories.tsx

@@ -41,52 +41,46 @@ export const Chromatic = () => (
         <DxcText>Text 2.</DxcText>
       </DxcList>
     </Container>
-    <Title title="gutter = xxxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
+    <Title title="gutter = 0rem" theme="light" level={4} />
+    <DxcList gutter="0rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
+    <Title title="gutter = 0.125rem" theme="light" level={4} />
+    <DxcList gutter="0.125rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xsmall" theme="light" level={4} />
-    <DxcList gutter="xsmall">
+    <Title title="gutter = 0.25rem" theme="light" level={4} />
+    <DxcList gutter="0.25rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = small" theme="light" level={4} />
-    <DxcList gutter="small">
+    <Title title="gutter = 0.5rem" theme="light" level={4} />
+    <DxcList gutter="0.5rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = medium" theme="light" level={4} />
-    <DxcList gutter="medium">
+    <Title title="gutter = 0.75rem" theme="light" level={4} />
+    <DxcList gutter="0.75rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = large" theme="light" level={4} />
-    <DxcList gutter="large">
+    <Title title="gutter = 1rem" theme="light" level={4} />
+    <DxcList gutter="1rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xlarge" theme="light" level={4} />
-    <DxcList gutter="xlarge">
+    <Title title="gutter = 1.5rem" theme="light" level={4} />
+    <DxcList gutter="1.5rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxlarge" theme="light" level={4} />
-    <DxcList gutter="xxlarge">
+    <Title title="gutter = 2rem" theme="light" level={4} />
+    <DxcList gutter="2rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxxlarge" theme="light" level={4} />
-    <DxcList gutter="xxxlarge">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-
   </>
 );
 

package/list/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare type Props = {
     children: React.ReactNode;
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";
     type?: "disc" | "circle" | "square" | "number";
 };
 export default Props;

package/main.d.ts

@@ -7,7 +7,6 @@ import DxcDialog from "./dialog/Dialog";
 import DxcDropdown from "./dropdown/Dropdown";
 import DxcFooter from "./footer/Footer";
 import DxcHeader from "./header/Header";
-import DxcRadio from "./radio/Radio";
 import DxcSlider from "./slider/Slider";
 import DxcSwitch from "./switch/Switch";
 import DxcTabs from "./tabs/Tabs";
@@ -42,6 +41,8 @@ import DxcRadioGroup from "./radio-group/RadioGroup";
 import DxcBleed from "./bleed/Bleed";
 import DxcInset from "./inset/Inset";
 import DxcQuickNav from "./quick-nav/QuickNav";
+import DxcNavTabs from "./tabs-nav/NavTabs";
+import DxcInline from "./inline/Inline";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, };
+export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcInline, };

package/main.js

@@ -121,6 +121,12 @@ Object.defineProperty(exports, "DxcHeading", {
     return _Heading["default"];
   }
 });
+Object.defineProperty(exports, "DxcInline", {
+  enumerable: true,
+  get: function get() {
+    return _Inline["default"];
+  }
+});
 Object.defineProperty(exports, "DxcInset", {
   enumerable: true,
   get: function get() {
@@ -139,6 +145,12 @@ Object.defineProperty(exports, "DxcList", {
     return _List["default"];
   }
 });
+Object.defineProperty(exports, "DxcNavTabs", {
+  enumerable: true,
+  get: function get() {
+    return _NavTabs["default"];
+  }
+});
 Object.defineProperty(exports, "DxcNumberInput", {
   enumerable: true,
   get: function get() {
@@ -169,12 +181,6 @@ Object.defineProperty(exports, "DxcQuickNav", {
     return _QuickNav["default"];
   }
 });
-Object.defineProperty(exports, "DxcRadio", {
-  enumerable: true,
-  get: function get() {
-    return _Radio["default"];
-  }
-});
 Object.defineProperty(exports, "DxcRadioGroup", {
   enumerable: true,
   get: function get() {
@@ -314,8 +320,6 @@ var _Footer = _interopRequireDefault(require("./footer/Footer"));
 
 var _Header = _interopRequireDefault(require("./header/Header"));
 
-var _Radio = _interopRequireDefault(require("./radio/Radio"));
-
 var _Slider = _interopRequireDefault(require("./slider/Slider"));
 
 var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -384,6 +388,10 @@ var _Inset = _interopRequireDefault(require("./inset/Inset"));
 
 var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
 
+var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
+
+var _Inline = _interopRequireDefault(require("./inline/Inline"));
+
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 
 var _BackgroundColorContext = require("./BackgroundColorContext");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-1c4cbc0",
+  "version": "0.0.0-1d5e7bf",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -24,6 +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",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",

package/paginator/Paginator.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _Paginator = _interopRequireDefault(require("./Paginator"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 describe("Paginator component tests", function () {
   test("Paginator renders with default values", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], null)),

package/progress-bar/ProgressBar.js

@@ -37,7 +37,7 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
       _ref$helperText = _ref.helperText,
       helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
       _ref$overlay = _ref.overlay,
-      overlay = _ref$overlay === void 0 ? true : _ref$overlay,
+      overlay = _ref$overlay === void 0 ? false : _ref$overlay,
       value = _ref.value,
       _ref$showValue = _ref.showValue,
       showValue = _ref$showValue === void 0 ? false : _ref$showValue,

package/progress-bar/ProgressBar.stories.jsx

@@ -12,40 +12,40 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Without labels" theme="light" level={4} />
-      <DxcProgressBar overlay={false} value={50} showValue />
+      <DxcProgressBar value={50} showValue />
       <Title title="With helperText" theme="light" level={4} />
-      <DxcProgressBar helperText="Helper text" value={50} overlay={false} showValue />
+      <DxcProgressBar helperText="Helper text" value={50} showValue />
       <Title title="Without default value" theme="light" level={4} />
-      <DxcProgressBar label="Loading..." overlay={false} showValue />
+      <DxcProgressBar label="Loading..." showValue />
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xxsmall" margin="xxsmall" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xxsmall" margin="xxsmall" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xsmall" margin="xsmall" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xsmall" margin="xsmall" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin small" margin="small" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin small" margin="small" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin medium" margin="medium" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin medium" margin="medium" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin large" margin="large" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin large" margin="large" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xlarge" margin="xlarge" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xlarge" margin="xlarge" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="XxLarge margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xxlarge" margin="xxlarge" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue />
     </ExampleContainer>
   </>
 );
@@ -53,6 +53,6 @@ export const Chromatic = () => (
 export const ProgressBarOverlay = () => (
   <ExampleContainer>
     <Title title="Overlay" theme="dark" level={4} />
-    <DxcProgressBar label="Overlay" helperText="Helper text" showValue value={50} />
+    <DxcProgressBar label="Overlay" helperText="Helper text" overlay={true} showValue value={50} />
   </ExampleContainer>
 );

package/quick-nav/QuickNav.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,59 +13,104 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _slugify = _interopRequireDefault(require("slugify"));
 
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
 var _Heading = _interopRequireDefault(require("../heading/Heading"));
 
 var _Stack = _interopRequireDefault(require("../stack/Stack"));
 
 var _Inset = _interopRequireDefault(require("../inset/Inset"));
 
-var _List = _interopRequireDefault(require("../list/List"));
-
 var _Text = _interopRequireDefault(require("../text/Text"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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); }
+
+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 DxcQuickNav = function DxcQuickNav(_ref) {
   var title = _ref.title,
       links = _ref.links;
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  return /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+  var colorsTheme = (0, _useTheme["default"])();
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.quickNav
+  }, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    gutter: "0.5rem"
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
     text: title || translatedLabels.quickNav.contentTitle
-  }), /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    gutter: "0.5rem"
   }, links.map(function (link) {
     var _link$links;
 
-    return /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-      space: "xxsmall"
+    return /*#__PURE__*/_react["default"].createElement(ListRow, {
+      key: link.label
+    }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+      space: "0.25rem"
     }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
       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(_Inset["default"], {
-        horizontal: "xsmall"
+    }, link === null || link === void 0 ? void 0 : link.label), /*#__PURE__*/_react["default"].createElement(ListColumn, null, (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
+      return /*#__PURE__*/_react["default"].createElement(ListRow, {
+        key: sublink.label
+      }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+        horizontal: "0.5rem"
       }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
         href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true
         }))
-      }, sublink === null || sublink === void 0 ? void 0 : sublink.label)));
-    })));
-  })))));
+      }, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
+    })))));
+  }))))));
 };
 
-var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 5px 15px;\n  border-left: 2px solid #bfbfbf;\n  li > div:first-child {\n    display: none;\n  }\n"])));
+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) {
+  return props.theme.paddingTop;
+}, function (props) {
+  return props.theme.paddingBottom;
+}, function (props) {
+  return props.theme.paddingLeft;
+}, function (props) {
+  return props.theme.paddingRight;
+}, function (props) {
+  return props.theme.dividerBorderColor;
+});
 
-var Link = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: 14px;\n  color: #666666;\n  &:hover {\n    color: #ab63cf;\n  }\n  &:focus {\n    border-radius: 2px;\n    border-color: #0095ff;\n  }\n"])));
+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 ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\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;
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontColor;
+}, function (props) {
+  return props.theme.hoverFontColor;
+}, function (props) {
+  return props.theme.focusBorderColor;
+}, function (props) {
+  return props.theme.focusBorderStyle;
+}, function (props) {
+  return props.theme.focusBorderThickness;
+}, function (props) {
+  return props.theme.focusBorderRadius;
+});
 
 var _default = DxcQuickNav;
 exports["default"] = _default;

package/quick-nav/QuickNav.stories.tsx

@@ -23,14 +23,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 = () => (
@@ -47,6 +57,12 @@ export const Chromatic = () => (
         <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links}></DxcQuickNav>
+      </QuickNavContainer>
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="QuickNav with content" level={4} />
       <Container>
@@ -204,6 +220,17 @@ export const Chromatic = () => (
               </DxcText>
             </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" }} />
+              <DxcText>
+                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.
+              </DxcText>
+            </Content>
+          </Content>
         </ContentContainer>
         <QuickNavContainer>
           <DxcQuickNav title="Sections" links={links}></DxcQuickNav>

package/radio-group/RadioGroup.js

@@ -216,7 +216,8 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled: option.disabled || disabled,
       focused: currentFocusIndex === index,
       readonly: readonly,
-      tabIndex: tabIndex
+      tabIndex: tabIndex,
+      key: "radio-".concat(index)
     });
   })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,

package/resultsetTable/ResultsetTable.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 var columns = [{
   displayValue: "Id",
   isSortable: false

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLUListElement>>>;
+declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element>;
 export default _default;