@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

package/main.d.ts

@@ -45,5 +45,6 @@ import DxcBadge from "./badge/Badge";
 import DxcStatusLight from "./status-light/StatusLight";
 import DxcContextualMenu from "./contextual-menu/ContextualMenu";
 import DxcDivider from "./divider/Divider";
+import DxcBreadcrumbs from "./breadcrumbs/Breadcrumbs";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, DxcContextualMenu, DxcDivider, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, DxcContextualMenu, DxcDivider, DxcBreadcrumbs, };

package/main.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "DxcBox", {
     return _Box["default"];
   }
 });
+Object.defineProperty(exports, "DxcBreadcrumbs", {
+  enumerable: true,
+  get: function get() {
+    return _Breadcrumbs["default"];
+  }
+});
 Object.defineProperty(exports, "DxcBulletedList", {
   enumerable: true,
   get: function get() {
@@ -352,6 +358,7 @@ var _Badge = _interopRequireDefault(require("./badge/Badge"));
 var _StatusLight = _interopRequireDefault(require("./status-light/StatusLight"));
 var _ContextualMenu = _interopRequireDefault(require("./contextual-menu/ContextualMenu"));
 var _Divider = _interopRequireDefault(require("./divider/Divider"));
+var _Breadcrumbs = _interopRequireDefault(require("./breadcrumbs/Breadcrumbs"));
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/nav-tabs/NavTabs.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/nav-tabs/NavTabs.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _NavTabs = _interopRequireDefault(require("./NavTabs"));
 var favoriteIcon = 'filled_Favorite';
 var pinIcon = 'Location_On';
 describe("Tabs component accessibility tests", function () {
@@ -31,7 +31,7 @@ describe("Tabs component accessibility tests", function () {
             notificationNumber: 12
           }, "Tab 3"))), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();

package/nav-tabs/NavTabs.js

@@ -15,7 +15,7 @@ var _Tab = _interopRequireDefault(require("./Tab"));
 var _NavTabsContext = require("./NavTabsContext");
 var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var getPropInChild = function getPropInChild(child, propName) {
   return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
 };
@@ -50,7 +50,17 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     innerFocusIndex = _useState2[0],
     setInnerFocusIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    underlineWidth = _useState4[0],
+    setUnderlineWidth = _useState4[1];
+  var refNavTabList = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  (0, _react.useEffect)(function () {
+    var _refNavTabList$curren, _refNavTabList$curren2;
+    console.log(refNavTabList === null || refNavTabList === void 0 ? void 0 : (_refNavTabList$curren = refNavTabList.current) === null || _refNavTabList$curren === void 0 ? void 0 : _refNavTabList$curren.scrollWidth);
+    setUnderlineWidth(refNavTabList === null || refNavTabList === void 0 ? void 0 : (_refNavTabList$curren2 = refNavTabList.current) === null || _refNavTabList$curren2 === void 0 ? void 0 : _refNavTabList$curren2.scrollWidth);
+  }, [children]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       iconPosition: iconPosition,
@@ -79,15 +89,20 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     theme: colorsTheme.navTabs
   }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
     onKeyDown: handleOnKeyDown,
+    ref: refNavTabList,
     role: "tablist",
     "aria-label": "Navigation tabs"
   }, /*#__PURE__*/_react["default"].createElement(_NavTabsContext.NavTabsContext.Provider, {
     value: contextValue
-  }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
+  }, children), /*#__PURE__*/_react["default"].createElement(Underline, {
+    underlineWidth: underlineWidth
+  })));
 };
-var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: ", ";\n"])), function (props) {
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: ", ";\n  z-index: -1;\n  width: ", "px;\n"])), function (props) {
   return props.theme.dividerColor;
+}, function (props) {
+  return props.underlineWidth;
 });
 DxcNavTabs.Tab = _Tab["default"];
-var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n"])));
+var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  overflow: auto;\n  z-index: 0;\n"])));
 var _default = exports["default"] = DxcNavTabs;

package/nav-tabs/NavTabs.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import DxcNavTabs from "./NavTabs";
+import DxcContainer from "../container/Container";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
@@ -16,10 +17,9 @@ const iconSVG = (
   </svg>
 );
 
+const favoriteIcon = "filled_Favorite";
 
-const favoriteIcon = 'filled_Favorite'
-
-const pinIcon = 'Location_On';
+const pinIcon = "Location_On";
 
 const opinionatedTheme = {
   navTabs: {
@@ -275,5 +275,20 @@ export const Chromatic = () => (
         </DxcNavTabs>
       </HalstackProvider>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="NavTabs in a limited space container" theme="light" level={4} />
+      <DxcContainer width="500px">
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </DxcContainer>
+    </ExampleContainer>
   </>
 );

package/nav-tabs/NavTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/nav-tabs/NavTabs.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
+var _NavTabs = _interopRequireDefault(require("./NavTabs"));
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels and attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
@@ -27,12 +27,14 @@ describe("Tabs component tests", function () {
     tabs.forEach(function (tab, index) {
       expect(tab.getAttribute("aria-selected")).toBe((index === 0).toString());
     });
-    var anchors = getAllByRole("link");
-    expect(anchors.length).toBe(2);
+    var anchors = getAllByRole("tab");
+    expect(anchors.length).toBe(3);
     expect(anchors[0].getAttribute("href")).toBe("/test1");
-    expect(anchors[1].getAttribute("href")).toBe("/test3");
+    expect(anchors[1].getAttribute("href")).toBeFalsy();
+    expect(anchors[2].getAttribute("href")).toBe("/test3");
     expect(anchors[0].getAttribute("tabindex")).toBe("0");
     expect(anchors[1].getAttribute("tabindex")).toBe("-1");
+    expect(anchors[2].getAttribute("tabindex")).toBe("-1");
   });
   test("Tabs render with correct labels, badges and icons", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
@@ -49,7 +51,6 @@ describe("Tabs component tests", function () {
         icon: "Settings"
       }, "Tab 3"))),
       getByText = _render2.getByText,
-      getByRole = _render2.getByRole,
       queryByText = _render2.queryByText;
     expect(getByText("10")).toBeTruthy();
     expect(queryByText("20")).toBeFalsy();
@@ -68,8 +69,9 @@ describe("Tabs component tests", function () {
         active: true
       }, "Tab 3"))),
       getAllByRole = _render3.getAllByRole;
-    var tabs = getAllByRole("link");
+    var tabs = getAllByRole("tab");
     expect(tabs[0].getAttribute("tabindex")).toBe("-1");
-    expect(tabs[1].getAttribute("tabindex")).toBe("3");
+    expect(tabs[1].getAttribute("tabindex")).toBe("-1");
+    expect(tabs[2].getAttribute("tabindex")).toBe("3");
   });
 });

package/nav-tabs/Tab.js

@@ -20,7 +20,7 @@ var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
   var href = _ref.href,
     _ref$active = _ref.active,
@@ -53,10 +53,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     }
   };
   return /*#__PURE__*/_react["default"].createElement(TabContainer, {
-    active: active,
-    role: "tab",
-    "aria-selected": active,
-    "aria-disabled": disabled
+    active: active
   }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
     href: !disabled ? href : undefined,
     disabled: disabled,
@@ -70,7 +67,10 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
       }
     },
     onKeyDown: handleOnKeyDown,
-    tabIndex: active ? tabIndex : -1
+    tabIndex: active ? tabIndex : -1,
+    role: "tab",
+    "aria-selected": active,
+    "aria-disabled": disabled
   }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
     iconPosition: iconPosition,
     active: active,
@@ -95,7 +95,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     label: typeof notificationNumber === "number" && notificationNumber
   }))));
 });
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n  z-index: 1;\n"])), function (props) {
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n"])), function (props) {
   return props.active ? props.theme.selectedUnderlineColor : "transparent";
 });
 var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n  gap: ", ";\n  height: ", ";\n  min-width: 176px;\n  min-height: 44px;\n  padding: 0.375rem;\n  border-radius: 4px;\n  background: ", ";\n  text-decoration-color: transparent;\n  text-decoration-line: none;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {

package/number-input/NumberInput.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/number-input/NumberInput.accessibility.test.js

@@ -7,8 +7,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Number input component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -60,7 +59,7 @@ describe("Number input component accessibility tests", function () {
             step: 1
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -91,7 +90,7 @@ describe("Number input component accessibility tests", function () {
             optional: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -122,7 +121,7 @@ describe("Number input component accessibility tests", function () {
             step: 1
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -153,7 +152,7 @@ describe("Number input component accessibility tests", function () {
             disabled: true
           })), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -184,7 +183,7 @@ describe("Number input component accessibility tests", function () {
             readOnly: true
           })), container = _render5.container;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();
@@ -215,7 +214,7 @@ describe("Number input component accessibility tests", function () {
             autocomplete: "on"
           })), container = _render6.container;
           _context6.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context6.sent;
           expect(results).toHaveNoViolations();

package/number-input/NumberInput.js

@@ -13,7 +13,7 @@ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 var _NumberInputContext = require("./NumberInputContext");
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -59,7 +59,8 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
       stepNumber: step
     }
   }, /*#__PURE__*/_react["default"].createElement(NumberInputContainer, {
-    ref: numberInputRef
+    ref: numberInputRef,
+    size: size
   }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
@@ -82,5 +83,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
     ref: ref
   })));
 });
-var NumberInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  // Chrome, Safari, Edge, Opera\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  // Firefox\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n"])));
+var NumberInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  // Chrome, Safari, Edge, Opera\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  // Firefox\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n"])), function (props) {
+  return props.size == "fillParent" && "width: 100%;";
+});
 var _default = exports["default"] = DxcNumberInput;

package/number-input/NumberInput.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcNumberInput from "./NumberInput";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Number Input",
@@ -32,25 +33,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="33"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="33" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="1"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="1" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active read only" theme="light" level={4} />
@@ -127,5 +114,13 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcNumberInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcNumberInput label="fillParent" size="fillParent" />
+        <DxcNumberInput label="medium" size="medium" />
+        <DxcNumberInput label="large" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
   </>
 );

package/number-input/NumberInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/number-input/NumberInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Number input component tests", function () {
   test("Number input renders with label, helper text, placeholder and increment/decrement action buttons", function () {
@@ -776,7 +775,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render30.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -804,7 +803,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render31.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -832,7 +831,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render32.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -860,7 +859,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render33.getByLabelText;
     var number = getByLabelText("Number input label");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-c293b72",
+  "version": "0.0.0-c2b6ec9",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -19,10 +19,10 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "color": "^3.1.3",
     "dayjs": "^1.11.1",
-    "slugify": "^1.6.5",
-    "uuid": "^8.3.2"
+    "slugify": "^1.6.5"
   },
   "scripts": {
     "test": "jest --env=jsdom --config=./jest.config.js",
@@ -37,41 +37,45 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.16.8",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/builder-vite": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/test": "^8.0.9",
+    "@storybook/test-runner": "^0.17.0",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/color": "^3.0.3",
-    "@types/react": "^18.0.18",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "^18.2.79",
     "@types/styled-components": "5.1.29",
-    "@types/uuid": "^9.0.6",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
-    "chromatic": "^8.0.0",
+    "chromatic": "^11.3.0",
+    "css-loader": "^7.1.1",
     "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
@@ -79,8 +83,9 @@
     "playwright": "^1.41.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.3",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook": "^8.0.8",
+    "storybook-addon-pseudo-states": "^3.0.1",
+    "style-loader": "^4.0.0",
     "styled-components": "^5.0.1",
     "typescript": "^5.3.3"
   }

package/paginator/Paginator.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/paginator/Paginator.accessibility.test.js

@@ -7,8 +7,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Paginator = _interopRequireDefault(require("./Paginator.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Paginator = _interopRequireDefault(require("./Paginator"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 global.DOMRect = {
   fromRect: function fromRect() {
@@ -66,7 +65,7 @@ describe("Paginator component accessibility tests", function () {
             showGoToPage: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();