@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/tooltip/Tooltip.test.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+describe("Tooltip component tests", function () {
+  test("Tooltip does not render by default", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, queryByRole;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), queryByRole = _render.queryByRole;
+          _context.next = 3;
+          return (0, _react2.waitFor)(function () {
+            var tooltipElement = queryByRole("tooltip");
+            expect(tooltipElement).toBeFalsy();
+          });
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Tooltip renders with correct label on hover", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, getByText, triggerElement;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), getByText = _render2.getByText;
+          triggerElement = getByText("Hoverable button");
+          _userEvent["default"].hover(triggerElement);
+          _context2.next = 5;
+          return _react2.screen.findByRole("tooltip", {
+            name: "Tooltip Test"
+          });
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Tooltip stops being rendered when hover is stopped", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, getByText, queryByRole, triggerElement;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), getByText = _render3.getByText, queryByRole = _render3.queryByRole;
+          triggerElement = getByText("Hoverable button");
+          _userEvent["default"].hover(triggerElement);
+          _userEvent["default"].unhover(triggerElement);
+          _context3.next = 6;
+          return (0, _react2.waitFor)(function () {
+            var tooltipElement = queryByRole("tooltip");
+            expect(tooltipElement).toBeFalsy();
+          });
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/tooltip/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+type Props = {
+    /**
+     * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+     */
+    position?: "bottom" | "top" | "left" | "right";
+    /**
+     * Text to be displayed inside the tooltip.
+     */
+    label: string;
+    /**
+     * Content in which the Tooltip will be displayed.
+     */
+    children: React.ReactNode;
+};
+export default Props;

package/tooltip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/typography/Typography.accessibility.test.d.ts

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

package/typography/Typography.accessibility.test.js

@@ -5,7 +5,7 @@ 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 _axeHelper = require("../../test/accessibility/axe-helper.js");
 var _Typography = _interopRequireDefault(require("./Typography"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 describe("Typography component accessibility tests", function () {
@@ -40,7 +40,7 @@ describe("Typography component accessibility tests", function () {
             fontSize: "0.75rem"
           }, "0.75rem."))), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -75,7 +75,7 @@ describe("Typography component accessibility tests", function () {
             letterSpacing: "0.1em"
           }, "0.1em."))), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -110,7 +110,7 @@ describe("Typography component accessibility tests", function () {
             lineHeight: "2em"
           }, "2em."))), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -139,7 +139,7 @@ describe("Typography component accessibility tests", function () {
             fontWeight: "700"
           }, "700."))), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -162,7 +162,7 @@ describe("Typography component accessibility tests", function () {
             textDecoration: "line-through"
           }, "Line-through."))), container = _render5.container;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();
@@ -185,7 +185,7 @@ describe("Typography component accessibility tests", function () {
             fontFamily: "Source Code Pro, monospace"
           }, "Source Code Pro, monospace."))), container = _render6.container;
           _context6.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context6.sent;
           expect(results).toHaveNoViolations();
@@ -208,7 +208,7 @@ describe("Typography component accessibility tests", function () {
             fontStyle: "normal"
           }, "Normal."))), container = _render7.container;
           _context7.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context7.sent;
           expect(results).toHaveNoViolations();
@@ -234,7 +234,7 @@ describe("Typography component accessibility tests", function () {
             textAlign: "right"
           }, "Right."))), container = _render8.container;
           _context8.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context8.sent;
           expect(results).toHaveNoViolations();
@@ -265,7 +265,7 @@ describe("Typography component accessibility tests", function () {
             fontSize: "2rem"
           }, "                  ", " pre-wrap: A bunch of words you see."))), container = _render9.container;
           _context9.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context9.sent;
           expect(results).toHaveNoViolations();
@@ -288,7 +288,7 @@ describe("Typography component accessibility tests", function () {
             textAlign: "left"
           }, "Display Inline.", /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "A different text.")))), container = _render10.container;
           _context10.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context10.sent;
           expect(results).toHaveNoViolations();
@@ -326,7 +326,7 @@ describe("Typography component accessibility tests", function () {
             textOverflow: "unset"
           }, "Overflow unset.")))), container = _render11.container;
           _context11.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context11.sent;
           expect(results).toHaveNoViolations();

package/typography/Typography.stories.tsx

@@ -140,9 +140,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Typography whitespace" theme="light" level={4} />
       <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography fontSize="2rem">
-          {"                  "} Normal: A bunch of words you see.
-        </DxcTypography>
+        <DxcTypography fontSize="2rem">{"                  "} Normal: A bunch of words you see.</DxcTypography>
       </div>
       <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
         <DxcTypography whiteSpace="nowrap" fontSize="2rem">

package/typography/Typography.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Typography = _interopRequireDefault(require("./Typography"));
+describe("Typography component tests", function () {
+  test("Renders as the selected component", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        as: "h1"
+      }, "Test H1 Text")),
+      container = _render.container;
+    expect(container.querySelector('h1')).not.toBeNull();
+  });
+  test("Renders as span if it receives invalid tag", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        as: "br"
+      }, "Test BR Text")),
+      container = _render2.container;
+    expect(container.querySelector('br')).toBeNull();
+    expect(container.querySelector('span')).not.toBeNull();
+  });
+});

package/useTheme.d.ts

@@ -217,6 +217,29 @@ declare const useTheme: () => {
         focusBorderThickness: string;
         focusBorderRadius: string;
     }>;
+    contextualMenu?: Partial<{
+        fontFamily: string;
+        backgroundColor: string;
+        borderColor: string;
+        menuItemFontColor: string;
+        menuItemFontSize: string;
+        menuItemFontStyle: string;
+        menuItemFontWeight: string;
+        menuItemLineHeight: string;
+        hoverMenuItemBackgroundColor: string;
+        activeMenuItemBackgroundColor: string;
+        selectedMenuItemBackgroundColor: string;
+        hoverSelectedMenuItemBackgroundColor: string;
+        activeSelectedMenuItemBackgroundColor: string;
+        selectedMenuItemFontWeight: string;
+        sectionTitleFontColor: string;
+        sectionTitleFontSize: string;
+        sectionTitleFontStyle: string;
+        sectionTitleFontWeight: string;
+        sectionTitleLineHeight: string;
+        iconColor: string;
+        iconSize: string;
+    }>;
     dateInput?: Partial<{
         pickerBackgroundColor: string;
         pickerFontColor: string;
@@ -289,7 +312,6 @@ declare const useTheme: () => {
         disabledColor: string;
         disabledButtonBackgroundColor: string;
         disabledButtonBorderColor: string;
-        disabledBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -329,7 +351,6 @@ declare const useTheme: () => {
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -530,8 +551,8 @@ declare const useTheme: () => {
         totalItemsContainerMarginLeft: string;
     }>;
     paragraph?: Partial<{
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     }>;
@@ -999,7 +1020,13 @@ declare const useTheme: () => {
         helperTextLineHeight: string;
         disabledHelperTextFontColor: string;
         prefixColor: string;
+        prefixDividerBorderWidth: string;
+        prefixDividerBorderStyle: string;
+        prefixDividerPaddingRight: string;
         suffixColor: string;
+        suffixDividerBorderStyle: string;
+        suffixDividerBorderWidth: string;
+        suffixDividerPaddingLeft: string;
         disabledPrefixColor: string;
         disabledSuffixColor: string;
         placeholderFontColor: string;

package/useTranslatedLabels.d.ts

@@ -16,6 +16,17 @@ declare const useTranslatedLabels: () => {
         warningTitleText: string;
         errorTitleText: string;
     }>;
+    barChart?: Partial<{
+        ariaLabel: string;
+        filterLabel: string;
+        filterPlaceholder: string;
+        loadingDataMessage: string;
+        noDataMessageBody: string;
+        noDataMessageTitle: string;
+        noMatchesMessageBody: string;
+        noMatchesMessageTitle: string;
+        retryButtonLabel: string;
+    }>;
     dateInput?: Partial<{
         invalidDateErrorMessage: string;
     }>;

package/utils/BaseTypography.js

@@ -11,8 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 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 TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+var ValidTypographyTags = ["a", "blockquote", "cite", "code", "div", "em", "figcaption", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "small", "span", "strong"];
+var isValidTypography = function isValidTypography(tag) {
+  return ValidTypographyTags.includes(tag);
+};
 var BaseTypography = function BaseTypography(_ref) {
   var as = _ref.as,
     display = _ref.display,
@@ -30,65 +34,65 @@ var BaseTypography = function BaseTypography(_ref) {
     children = _ref.children;
   var componentContext = (0, _react.useContext)(TypographyContext);
   var contextValue = (0, _react.useMemo)(function () {
-    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13;
     return {
-      as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
-      display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
-      fontFamily: (_ref4 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref4 !== void 0 ? _ref4 : "Open Sans, sans-serif",
-      fontSize: (_ref5 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref5 !== void 0 ? _ref5 : "1rem",
-      fontStyle: (_ref6 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref6 !== void 0 ? _ref6 : "normal",
-      fontWeight: (_ref7 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref7 !== void 0 ? _ref7 : "400",
-      letterSpacing: (_ref8 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref8 !== void 0 ? _ref8 : "0em",
-      lineHeight: (_ref9 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref9 !== void 0 ? _ref9 : "1.5em",
-      textAlign: (_ref10 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref10 !== void 0 ? _ref10 : "left",
-      color: (_ref11 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref11 !== void 0 ? _ref11 : "#000000",
-      textDecoration: (_ref12 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref12 !== void 0 ? _ref12 : "none",
-      textOverflow: (_ref13 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref13 !== void 0 ? _ref13 : "unset",
-      whiteSpace: (_ref14 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref14 !== void 0 ? _ref14 : "normal"
+      as: isValidTypography(as) ? as : isValidTypography(componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) ? componentContext === null || componentContext === void 0 ? void 0 : componentContext.as : "span",
+      display: (_ref2 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref2 !== void 0 ? _ref2 : "inline",
+      fontFamily: (_ref3 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref3 !== void 0 ? _ref3 : "Open Sans, sans-serif",
+      fontSize: (_ref4 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref4 !== void 0 ? _ref4 : "1rem",
+      fontStyle: (_ref5 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref5 !== void 0 ? _ref5 : "normal",
+      fontWeight: (_ref6 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref6 !== void 0 ? _ref6 : "400",
+      letterSpacing: (_ref7 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref7 !== void 0 ? _ref7 : "0em",
+      lineHeight: (_ref8 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref8 !== void 0 ? _ref8 : "1.5em",
+      textAlign: (_ref9 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref9 !== void 0 ? _ref9 : "left",
+      color: (_ref10 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref10 !== void 0 ? _ref10 : "#000000",
+      textDecoration: (_ref11 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref11 !== void 0 ? _ref11 : "none",
+      textOverflow: (_ref12 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref12 !== void 0 ? _ref12 : "unset",
+      whiteSpace: (_ref13 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref13 !== void 0 ? _ref13 : "normal"
     };
   }, [as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace]);
   return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
 };
-var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref15) {
-  var display = _ref15.display;
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref14) {
+  var display = _ref14.display;
   return display;
-}, function (_ref16) {
-  var color = _ref16.color;
+}, function (_ref15) {
+  var color = _ref15.color;
   return color;
-}, function (_ref17) {
-  var fontFamily = _ref17.fontFamily;
+}, function (_ref16) {
+  var fontFamily = _ref16.fontFamily;
   return fontFamily;
-}, function (_ref18) {
-  var fontSize = _ref18.fontSize;
+}, function (_ref17) {
+  var fontSize = _ref17.fontSize;
   return fontSize;
-}, function (_ref19) {
-  var fontStyle = _ref19.fontStyle;
+}, function (_ref18) {
+  var fontStyle = _ref18.fontStyle;
   return fontStyle;
-}, function (_ref20) {
-  var fontWeight = _ref20.fontWeight;
+}, function (_ref19) {
+  var fontWeight = _ref19.fontWeight;
   return fontWeight;
-}, function (_ref21) {
-  var letterSpacing = _ref21.letterSpacing;
+}, function (_ref20) {
+  var letterSpacing = _ref20.letterSpacing;
   return letterSpacing;
-}, function (_ref22) {
-  var lineHeight = _ref22.lineHeight;
+}, function (_ref21) {
+  var lineHeight = _ref21.lineHeight;
   return lineHeight;
-}, function (_ref23) {
-  var textAlign = _ref23.textAlign;
+}, function (_ref22) {
+  var textAlign = _ref22.textAlign;
   return textAlign;
-}, function (_ref24) {
-  var textDecoration = _ref24.textDecoration;
+}, function (_ref23) {
+  var textDecoration = _ref23.textDecoration;
   return textDecoration;
-}, function (_ref25) {
-  var textOverflow = _ref25.textOverflow;
+}, function (_ref24) {
+  var textOverflow = _ref24.textOverflow;
   return textOverflow;
-}, function (_ref26) {
-  var whiteSpace = _ref26.whiteSpace;
+}, function (_ref25) {
+  var whiteSpace = _ref25.whiteSpace;
   return whiteSpace;
-}, function (_ref27) {
-  var textOverflow = _ref27.textOverflow;
+}, function (_ref26) {
+  var textOverflow = _ref26.textOverflow;
   return textOverflow !== "unset" ? "hidden" : "visible";
 });
 var _default = exports["default"] = BaseTypography;

package/utils/FocusLock.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 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 not = {
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
@@ -95,7 +95,8 @@ var FocusLock = function FocusLock(_ref) {
     });
   }, [focusableElements]);
   var focusLast = function focusLast() {
-    focusableElements.reverse().some(function (element) {
+    var _focusableElements$re;
+    focusableElements === null || focusableElements === void 0 ? void 0 : (_focusableElements$re = focusableElements.reverse()) === null || _focusableElements$re === void 0 ? void 0 : _focusableElements$re.some(function (element) {
       return attemptFocus(element);
     });
   };

package/utils/useWidth.d.ts

@@ -0,0 +1,2 @@
+declare const useWidth: <T extends Element>(target: T) => number;
+export default useWidth;

package/utils/useWidth.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useWidth = function useWidth(target) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (target != null) {
+      setWidth(target.getBoundingClientRect().width);
+      var triggerObserver = new ResizeObserver(function (entries) {
+        var rect = entries[0].target.getBoundingClientRect();
+        setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
+      });
+      triggerObserver.observe(target);
+      return function () {
+        triggerObserver.unobserve(target);
+      };
+    }
+  }, [target]);
+  return width;
+};
+var _default = exports["default"] = useWidth;

package/wizard/Wizard.accessibility.test.d.ts

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

package/wizard/Wizard.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 _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Wizard = _interopRequireDefault(require("./Wizard"));
 var favoriteSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   viewBox: "0 0 24 24",
   fill: "currentColor"
@@ -42,7 +42,7 @@ describe("Wizard component accessibility tests", function () {
             margin: "medium"
           })), 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/wizard/Wizard.js

@@ -16,52 +16,44 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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" != _typeof3(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" != _typeof3(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 icons = {
   validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
-    id: "check_circle_black_18dp",
     xmlns: "http://www.w3.org/2000/svg",
     width: "18",
     height: "18",
     viewBox: "0 0 18 18"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2946",
     "data-name": "Path 2946",
     d: "M0,0H18V18H0Z",
     fill: "none"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2947",
     "data-name": "Path 2947",
     d: "M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z",
     transform: "translate(-0.986 -0.986)",
     fill: "#eafaef",
     opacity: "0.999"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2948",
     "data-name": "Path 2948",
     d: "M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z",
     transform: "translate(-0.493 -0.493)",
     fill: "#24a148"
   })),
   invalidIcon: /*#__PURE__*/_react["default"].createElement("svg", {
-    id: "highlight_off_black_18dp",
     xmlns: "http://www.w3.org/2000/svg",
     width: "18",
     height: "18",
     viewBox: "0 0 18 18"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2943",
     "data-name": "Path 2943",
     d: "M0,0H18V18H0Z",
     fill: "none"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2944",
     "data-name": "Path 2944",
     d: "M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z",
     transform: "translate(-1.002 -1.002)",
     fill: "#ffe6e9"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    id: "Path_2945",
     "data-name": "Path 2945",
     d: "M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z",
     transform: "translate(-0.501 -0.501)",