@dxc-technology/halstack-react 0.0.0-f2bad31 → 0.0.0-f319e71

package/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import DxcTooltip from "./Tooltip";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcButton from "../button/Button";
+import { userEvent, within } from "@storybook/test";
+import DxcInset from "../inset/Inset";
+import Title from "../../.storybook/components/Title";
+import DxcFlex from "../flex/Flex";
+
+export default {
+  title: "Tooltip",
+  component: DxcTooltip,
+};
+
+const Tooltip = () => (
+  <>
+    <Title title="Default tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset bottom="3rem">
+        <DxcTooltip label="Tooltip Test">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const LargeTextWithinTooltip = () => (
+  <>
+    <Title title="Multiple line tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset bottom="5rem" left="1rem">
+        <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const TopTooltip = () => (
+  <>
+    <Title title="Top tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset top="3rem">
+        <DxcTooltip label="Tooltip Test" position="top">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const LeftTooltip = () => (
+  <>
+    <Title title="Left tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcFlex justifyContent="center">
+        <DxcTooltip label="Tooltip Test" position="left">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcFlex>
+    </ExampleContainer>
+  </>
+);
+
+const RightTooltip = () => (
+  <>
+    <Title title="Right tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcTooltip label="Tooltip Test" position="right">
+        <DxcButton label="Hoverable button" />
+      </DxcTooltip>
+    </ExampleContainer>
+  </>
+);
+
+export const Chromatic = Tooltip.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const LargeTextTooltip = LargeTextWithinTooltip.bind({});
+LargeTextTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionTop = TopTooltip.bind({});
+TooltipPositionTop.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionLeft = LeftTooltip.bind({});
+TooltipPositionLeft.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionRight = RightTooltip.bind({});
+TooltipPositionRight.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};

package/tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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/useTheme.d.ts

@@ -251,8 +251,7 @@ declare const useTheme: () => {
     dialog?: Partial<{
         overlayColor: string;
         backgroundColor: string;
-        closeIconWidth: string;
-        closeIconHeight: string;
+        closeIconSize: string;
         closeIconTopPosition: string;
         closeIconRightPosition: string;
         closeIconBackgroundColor: string;
@@ -290,7 +289,6 @@ declare const useTheme: () => {
         disabledColor: string;
         disabledButtonBackgroundColor: string;
         disabledButtonBorderColor: string;
-        disabledBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -330,7 +328,6 @@ declare const useTheme: () => {
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -531,8 +528,8 @@ declare const useTheme: () => {
         totalItemsContainerMarginLeft: string;
     }>;
     paragraph?: Partial<{
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     }>;

package/utils/BaseTypography.js

@@ -11,7 +11,7 @@ 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 BaseTypography = function BaseTypography(_ref) {
   var as = _ref.as,

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/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

@@ -13,54 +13,47 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+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)",
@@ -119,9 +112,9 @@ var DxcWizard = function DxcWizard(_ref) {
       current: i === renderedCurrent,
       visited: i < renderedCurrent,
       disabled: step.disabled
-    }, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, null, typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
-      src: step.icon
-    }) : step.icon) : /*#__PURE__*/_react["default"].createElement(Number, null, i + 1)), step.valid !== undefined && (step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.invalidIcon))), (step.label || step.description) && /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label && /*#__PURE__*/_react["default"].createElement(Label, {
+    }, step.icon ? typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      icon: step.icon
+    }) : step.icon : /*#__PURE__*/_react["default"].createElement(Number, null, i + 1)), step.valid !== undefined && (step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.invalidIcon))), (step.label || step.description) && /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label && /*#__PURE__*/_react["default"].createElement(Label, {
       current: i === renderedCurrent,
       disabled: step.disabled,
       visited: i <= innerCurrent
@@ -172,7 +165,7 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
 var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-flex;\n  ", "\n"])), function (props) {
   return props.validityIcon && "padding-bottom: 4px;";
 });
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  font-size: ", ";\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
 }, function (props) {
   return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
@@ -182,18 +175,14 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
   return props.disabled ? "color: ".concat(props.theme.disabledStepFontColor, ";") : "color: ".concat(props.current ? props.theme.selectedStepFontColor : !props.visited ? props.theme.unvisitedStepFontColor : props.theme.visitedStepFontColor, ";");
 }, function (props) {
   return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
-});
-var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
-  return props.theme.stepIconSize;
 }, function (props) {
   return props.theme.stepIconSize;
-});
-var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+}, function (props) {
   return props.theme.stepIconSize;
 }, function (props) {
   return props.theme.stepIconSize;
 });
-var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  opacity: 1;\n  margin: 0px 0px 0px 1px;\n"])), function (props) {
+var Number = _styledComponents["default"].p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  opacity: 1;\n  margin: 0px 0px 0px 1px;\n"])), function (props) {
   return props.theme.stepFontSize;
 }, function (props) {
   return props.theme.stepFontFamily;
@@ -204,9 +193,9 @@ var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject
 }, function (props) {
   return props.theme.stepFontTracking;
 });
-var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
-var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 12px;\n"])));
-var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  ", ";\n  text-transform: ", ";\n  margin: 0;\n"])), function (props) {
+var ValidityIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
+var InfoContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 12px;\n"])));
+var Label = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  ", ";\n  text-transform: ", ";\n  margin: 0;\n"])), function (props) {
   return props.theme.labelTextAlign;
 }, function (props) {
   return props.theme.labelFontFamily;
@@ -223,7 +212,7 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, function (props) {
   return props.theme.labelFontTextTransform;
 });
-var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  ", ";\n  margin: 0;\n"])), function (props) {
+var Description = _styledComponents["default"].p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  ", ";\n  margin: 0;\n"])), function (props) {
   return props.theme.helperTextTextAlign;
 }, function (props) {
   return props.theme.helperTextFontFamily;
@@ -240,7 +229,7 @@ var Description = _styledComponents["default"].p(_templateObject12 || (_template
 }, function (props) {
   return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
 });
-var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
+var StepSeparator = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
   return props.mode === "horizontal" ? "height: 0;" : "width: 0;";
 }, function (props) {
   return props.mode === "vertical" && "margin: 0 18px;";

package/wizard/Wizard.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import DxcWizard from "./Wizard";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import { HalstackProvider } from "../HalstackContext";
 
 export default {
@@ -133,6 +133,21 @@ const stepLargeIcons = [
   },
 ];
 
+const stepMaterialSymbols = [
+  {
+    label: "First step",
+    icon: "filled_home",
+  },
+  {
+    label: "Second step",
+    icon: "filled_favorite",
+  },
+  {
+    label: "Third step",
+    icon: "filled_star",
+  },
+];
+
 const opinionatedTheme = {
   wizard: {
     baseColor: "#5f249f",
@@ -171,6 +186,10 @@ export const Chromatic = () => (
       <Title title="With large icons" theme="light" level={4} />
       <DxcWizard steps={stepLargeIcons}></DxcWizard>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With Material Symbols" theme="light" level={4} />
+      <DxcWizard steps={stepMaterialSymbols}></DxcWizard>
+    </ExampleContainer>
     <Title title="Margins horizontal" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/wizard/Wizard.test.d.ts

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