@dxc-technology/halstack-react 0.0.0-c709eea → 0.0.0-c713b1b

package/wizard/Wizard.js

@@ -9,35 +9,84 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _Icons = require("./Icons");
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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 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,
@@ -45,7 +94,7 @@ var DxcWizard = function DxcWizard(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)(currentStep || 0),
+  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];
@@ -67,51 +116,52 @@ var DxcWizard = function DxcWizard(_ref) {
     theme: colorsTheme.wizard
   }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
     mode: mode,
-    margin: margin
-  }, steps.map(function (step, i) {
+    margin: margin,
+    role: "group"
+  }, steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
     return /*#__PURE__*/_react["default"].createElement(StepContainer, {
       key: "step".concat(i),
       mode: mode,
-      lastStep: i === steps.length - 1
+      lastStep: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1
     }, /*#__PURE__*/_react["default"].createElement(Step, {
-      tabIndex: tabIndex,
       onClick: function onClick() {
-        return handleStepClick(i);
+        handleStepClick(i);
       },
-      mode: mode,
       disabled: step.disabled,
+      mode: mode,
       first: i === 0,
-      last: i === steps.length - 1
-    }, /*#__PURE__*/_react["default"].createElement(StepHeader, null, /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      last: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1,
+      "aria-current": renderedCurrent === i ? "step" : "false",
+      tabIndex: tabIndex
+    }, /*#__PURE__*/_react["default"].createElement(StepHeader, {
+      validityIcon: step.valid !== undefined
+    }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
       current: i === renderedCurrent,
       visited: i < renderedCurrent,
       disabled: step.disabled
     }, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
       disabled: step.disabled
-    }, (0, _typeof2["default"])(step.icon) === "object" ? step.icon.type === "img" ? /*#__PURE__*/_react["default"].createElement(ImgContainer, {
-      current: i === renderedCurrent,
-      img: step.icon.props.src
-    }) : step.icon : /*#__PURE__*/_react["default"].createElement(step.icon)) : step.iconSrc ? /*#__PURE__*/_react["default"].createElement(Icon, {
-      src: step.iconSrc
-    }) : /*#__PURE__*/_react["default"].createElement(Number, {
+    }, typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+      src: step.icon
+    }) : step.icon) : /*#__PURE__*/_react["default"].createElement(Number, {
       disabled: step.disabled,
       current: i === renderedCurrent
-    }, 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, {
+    }, 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, {
       disabled: step.disabled,
       visited: i <= innerCurrent
-    }, step.label) : "", step.description ? /*#__PURE__*/_react["default"].createElement(Description, {
+    }, step.label), step.description && /*#__PURE__*/_react["default"].createElement(Description, {
       disabled: step.disabled,
       visited: i <= innerCurrent
-    }, step.description) : "") : ""), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
+    }, step.description))), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
       mode: mode
     }));
   })));
 };
 
-var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: \"center\";\n  ", ";\n  font-family: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+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\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) {
-  return props.mode === "vertical" ? "height: 500px" : "width: 100%";
+  return props.mode === "vertical" && "height: 500px";
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -146,14 +196,16 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
   return props.theme.focusColor;
 });
 
-var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-flex;\n  padding-bottom: 4px;\n"])));
+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  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
   return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
 }, function (props) {
   return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current && !props.disabled ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
 }, function (props) {
   return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
 }, function (props) {
@@ -172,20 +224,7 @@ var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_t
   return props.theme.stepContainerIconSize;
 });
 
-var ImgContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n"])), function (props) {
-  return props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor;
-}, function (_ref2) {
-  var img = _ref2.img;
-  return img;
-}, function (props) {
-  return "".concat(props.theme.stepContainerIconSize, " ").concat(props.theme.stepContainerIconSize);
-}, function (props) {
-  return props.theme.stepContainerIconSize;
-}, function (props) {
-  return props.theme.stepContainerIconSize;
-});
-
-var Number = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (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(_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) {
   return props.theme.stepContainerFontSize;
 }, function (props) {
   return props.theme.stepContainerFontFamily;
@@ -197,11 +236,11 @@ var Number = _styledComponents["default"].p(_templateObject9 || (_templateObject
   return props.theme.stepContainerLetterSpacing;
 });
 
-var ValidityIconContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
+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(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 12px;\n"])));
+var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 12px;\n"])));
 
-var Label = _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  ", ";\n  text-transform: ", ";\n  margin: 0;\n"])), function (props) {
+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) {
   return props.theme.labelTextAlign;
 }, function (props) {
   return props.theme.labelFontFamily;
@@ -219,7 +258,7 @@ var Label = _styledComponents["default"].p(_templateObject12 || (_templateObject
   return props.theme.labelFontTextTransform;
 });
 
-var Description = _styledComponents["default"].p(_templateObject13 || (_templateObject13 = (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(_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) {
   return props.theme.descriptionTextAlign;
 }, function (props) {
   return props.theme.descriptionFontFamily;
@@ -237,7 +276,7 @@ var Description = _styledComponents["default"].p(_templateObject13 || (_template
   return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
 });
 
-var StepSeparator = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
+var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {
   return props.mode === "horizontal" ? "" : "0";
 }, function (props) {
   return props.mode === "horizontal" ? "0" : "";
@@ -247,25 +286,5 @@ var StepSeparator = _styledComponents["default"].div(_templateObject14 || (_temp
   return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
 });
 
-DxcWizard.propTypes = {
-  mode: _propTypes["default"].oneOf(["horizontal", "vertical"]),
-  currentStep: _propTypes["default"].number,
-  onStepClick: _propTypes["default"].func,
-  steps: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    label: _propTypes["default"].string,
-    description: _propTypes["default"].string,
-    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-    iconSrc: _propTypes["default"].string,
-    disabled: _propTypes["default"].bool,
-    valid: _propTypes["default"].bool
-  })),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcWizard;
 exports["default"] = _default;

package/wizard/Wizard.stories.tsx

@@ -0,0 +1,214 @@
+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";
+
+export default {
+  title: "Wizard",
+  component: DxcWizard,
+};
+
+const favoriteSVG = (
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
+const largeIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+  </svg>
+);
+
+const stepWithLabel = [
+  {
+    label: "First step",
+  },
+  {
+    label: "Second step",
+  },
+  {
+    label: "Third step",
+  },
+  {
+    label: "Forth step",
+  },
+];
+const stepWithLabelDescription = [
+  {
+    label: "First step",
+    description: "Description",
+  },
+  {
+    label: "Second step",
+    description: "Description",
+  },
+  {
+    label: "Third step",
+    description: "Description",
+    valid: true,
+  },
+  {
+    label: "Forth step",
+    description: "Description",
+    valid: false,
+  },
+];
+const stepWithLongDescription = [
+  {
+    label: "First step",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    label: "Second step",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    label: "Third step",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+];
+const stepDisabled = [
+  {
+    label: "First step",
+    description: "Description",
+    disabled: true,
+  },
+  {
+    label: "Second step",
+    description: "Description",
+    icon: favoriteSVG,
+    disabled: true,
+  },
+  {
+    label: "Third step",
+    description: "Description",
+    disabled: true,
+    valid: true,
+  },
+  {
+    label: "Forth step",
+    description: "Description",
+    valid: false,
+    disabled: true,
+  },
+];
+const stepIcons = [
+  {
+    label: "First step",
+    icon: favoriteSVG,
+  },
+  {
+    label: "Second step",
+    icon: favoriteSVG,
+  },
+  {
+    label: "Third step",
+    icon: favoriteSVG,
+  },
+];
+const stepLargeIcons = [
+  {
+    label: "First step",
+    icon: largeIcon,
+  },
+  {
+    label: "Second step",
+    icon: largeIcon,
+  },
+  {
+    label: "Third step",
+    icon: largeIcon,
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Current step in the third step, labels and description" theme="light" level={4} />
+      <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      <Title title="With long description in horizontal" theme="light" level={4} />
+      <DxcWizard steps={stepWithLongDescription}></DxcWizard>
+      <Title title="With long description in vertical" theme="light" level={4} />
+      <DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
+      <Title title="Disabled steps" theme="light" level={4} />
+      <DxcWizard steps={stepDisabled}></DxcWizard>
+      <Title title="With icons" theme="light" level={4} />
+      <DxcWizard steps={stepIcons}></DxcWizard>
+      <Title title="With large icons" theme="light" level={4} />
+      <DxcWizard steps={stepLargeIcons}></DxcWizard>
+    </ExampleContainer>
+    <Title title="Margins horizontal" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcWizard margin="xxsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcWizard margin="xsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcWizard margin="small" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcWizard margin="medium" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcWizard margin="large" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcWizard margin="xlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcWizard margin="xxlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <Title title="Margins vertical" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xxsmall" steps={stepWithLabelDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="small" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="medium" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="large" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+  </>
+);
+
+const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
+
+export const WizardStepActived = WizardSelected.bind({});
+WizardStepActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("Third step");
+  await userEvent.click(option);
+};

package/wizard/Wizard.test.js

@@ -0,0 +1,141 @@
+"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"));
+
+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;
+
+    var steps = getAllByRole("button");
+    expect(getByText("first-step")).toBeTruthy();
+    expect(getByText("second-step")).toBeTruthy();
+    expect(steps[0].getAttribute("aria-current")).toBe("step");
+    expect(steps[1].getAttribute("aria-current")).toBe("false");
+  });
+  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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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);
+  });
+});