@dxc-technology/halstack-react 0.0.0-5a1e592 → 0.0.0-5a7a613

package/wizard/Wizard.js

@@ -1,117 +1,90 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 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;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+var _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 && {}.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)",
     fill: "#d0011b"
   }))
 };
-
 var DxcWizard = function DxcWizard(_ref) {
   var _ref2;
-
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
-      defaultCurrentStep = _ref.defaultCurrentStep,
-      currentStep = _ref.currentStep,
-      onStepClick = _ref.onStepClick,
-      steps = _ref.steps,
-      margin = _ref.margin,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
+    mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
+    defaultCurrentStep = _ref.defaultCurrentStep,
+    currentStep = _ref.currentStep,
+    onStepClick = _ref.onStepClick,
+    steps = _ref.steps,
+    margin = _ref.margin,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var _useState = (0, _react.useState)((_ref2 = currentStep !== null && currentStep !== void 0 ? currentStep : defaultCurrentStep) !== null && _ref2 !== void 0 ? _ref2 : 0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerCurrent = _useState2[0],
-      setInnerCurrentStep = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerCurrent = _useState2[0],
+    setInnerCurrentStep = _useState2[1];
   var renderedCurrent = currentStep == null ? innerCurrent : currentStep;
   var colorsTheme = (0, _useTheme["default"])();
-
   var handleStepClick = function handleStepClick(newValue) {
     if (currentStep == null) {
       setInnerCurrentStep(newValue);
     }
-
     if (onStepClick) {
       onStepClick(newValue);
     }
   };
-
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.wizard
   }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
@@ -139,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
@@ -154,7 +127,6 @@ var DxcWizard = function DxcWizard(_ref) {
     }));
   })));
 };
-
 var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  ", ";\n  font-family: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.mode === "vertical" ? "column" : "row";
 }, function (props) {
@@ -172,7 +144,6 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
-
 var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  ", "\n  flex-grow: ", ";\n  flex-direction: ", ";\n  ", "\n"])), function (props) {
   return props.mode !== "vertical" && "align-items: center;";
 }, function (props) {
@@ -182,7 +153,6 @@ var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templ
 }, function (props) {
   return props.mode === "vertical" && "width: fit-content;";
 });
-
 var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: 0.25rem;\n  background: inherit;\n  margin: ", ";\n\n  padding: 0px;\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n  &:focus {\n    outline: 2px solid ", ";\n  }\n"])), function (props) {
   return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
 }, function (props) {
@@ -192,12 +162,10 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
 }, function (props) {
   return props.theme.focusColor;
 });
-
 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;
@@ -207,21 +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;
@@ -232,12 +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;
@@ -254,8 +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;
@@ -272,14 +229,11 @@ 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;";
 }, function (props) {
   return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
 });
-
-var _default = DxcWizard;
-exports["default"] = _default;
+var _default = exports["default"] = DxcWizard;

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 {};

package/wizard/Wizard.test.js

@@ -1,25 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
-
+var _Wizard = _interopRequireDefault(require("./Wizard"));
 describe("Wizard components tests", function () {
   test("Wizard renders with correct steps", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getByText = _render.getByText,
-        getAllByRole = _render.getAllByRole;
-
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getByText = _render.getByText,
+      getAllByRole = _render.getAllByRole;
     var steps = getAllByRole("button");
     expect(getByText("first-step")).toBeTruthy();
     expect(getByText("second-step")).toBeTruthy();
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
   });
   test("Wizard renders with initially selected step", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      defaultCurrentStep: 1,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getAllByRole = _render2.getAllByRole;
-
+        defaultCurrentStep: 1,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getAllByRole = _render2.getAllByRole;
     var steps = getAllByRole("button");
     expect(steps[1].getAttribute("aria-current")).toBe("step");
   });
   test("Click on step text", function () {
     var onClick = jest.fn();
-
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }]
-    })),
-        getByText = _render3.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }]
+      })),
+      getByText = _render3.getByText;
     var step = getByText("first-step");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on step description", function () {
     var onClick = jest.fn();
-
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step",
-        description: "step-description"
-      }]
-    })),
-        getByText = _render4.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step",
+          description: "step-description"
+        }]
+      })),
+      getByText = _render4.getByText;
     var step = getByText("step-description");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on step number", function () {
     var onClick = jest.fn();
-
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }]
-    })),
-        getByText = _render5.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }]
+      })),
+      getByText = _render5.getByText;
     var step = getByText("1");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on disable step", function () {
     var onClick = jest.fn();
-
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step",
-        disabled: true
-      }]
-    })),
-        getByText = _render6.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step",
+          disabled: true
+        }]
+      })),
+      getByText = _render6.getByText;
     var step = getByText("second-step");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   test("Controlled wizard function is called", function () {
     var onClick = jest.fn(function (i) {
       return i;
     });
-
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      currentStep: 0,
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getAllByRole = _render7.getAllByRole;
-
+        currentStep: 0,
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getAllByRole = _render7.getAllByRole;
     var steps = getAllByRole("button");
-
     _react2.fireEvent.click(steps[1]);
-
     _react2.fireEvent.click(steps[0]);
-
     expect(onClick).toHaveBeenCalledTimes(2);
     expect(onClick).toHaveBeenNthCalledWith(1, 1);
     expect(onClick).toHaveBeenNthCalledWith(2, 0);

package/wizard/types.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-export declare type StepProps = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type StepProps = {
     /**
      * Step label.
      */
@@ -17,7 +17,7 @@ export declare type StepProps = {
      */
     description?: string;
     /**
-     * Element or path used as the icon displayed in the step.
+     * Material Symbol name or SVG element used as the icon displayed in the step.
      */
     icon?: string | SVG;
     /**
@@ -29,9 +29,9 @@ export declare type StepProps = {
      */
     valid?: boolean;
 };
-declare type Props = {
+type Props = {
     /**
-     * The wizard can be showed in horizontal or vertical.
+     * The wizard can be shown in horizontal or vertical.
      */
     mode?: "horizontal" | "vertical";
     /**
@@ -46,7 +46,7 @@ declare type Props = {
      * This function will be called when the user clicks a step. The step
      * number will be passed as a parameter.
      */
-    onStepClick?: (newCurrentStep: number) => void;
+    onStepClick?: (currentStep: number) => void;
     /**
      * An array of objects representing the steps.
      */

package/common/OpenSans.css

@@ -1,69 +0,0 @@
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Light.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Regular.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-SemiBold.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Bold.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-ExtraBold.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 800;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-LightItalic.ttf") format("truetype");
-  font-style: italic;
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Italic.ttf") format("truetype");
-  font-style: italic;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
-  font-style: italic;
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-BoldItalic.ttf") format("truetype");
-  font-style: italic;
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
-  font-style: italic;
-  font-weight: 800;
-}

package/date-input/Icons.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const calendarIcon: JSX.Element;
-export declare const leftCaret: JSX.Element;
-export declare const rightCaret: JSX.Element;
-export declare const downCaret: JSX.Element;
-export declare const upCaret: JSX.Element;