@dxc-technology/halstack-react 0.0.0-30b70fe → 0.0.0-33d426c

package/wizard/Wizard.js

@@ -0,0 +1,281 @@
+"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 _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 _variables = require("../common/variables.js");
+
+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 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 _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
+      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)(currentStep || 0),
+      _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, {
+    mode: mode,
+    margin: margin
+  }, 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 === null || steps === void 0 ? void 0 : steps.length) - 1
+    }, /*#__PURE__*/_react["default"].createElement(Step, {
+      tabIndex: tabIndex,
+      onClick: function onClick() {
+        return handleStepClick(i);
+      },
+      mode: mode,
+      disabled: step.disabled,
+      first: i === 0,
+      last: i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1
+    }, /*#__PURE__*/_react["default"].createElement(StepHeader, null, /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      current: i === renderedCurrent,
+      visited: i < renderedCurrent,
+      disabled: step.disabled
+    }, step.icon ? typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+      src: step.icon
+    }) : /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
+      disabled: step.disabled
+    }, (0, _typeof2["default"])(step.icon) === "object" ? step.icon : /*#__PURE__*/_react["default"].createElement(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, {
+      disabled: step.disabled,
+      visited: i <= innerCurrent
+    }, 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, {
+      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) {
+  return props.mode === "vertical" ? "column" : "row";
+}, function (props) {
+  return props.mode === "vertical" ? "height: 500px" : "width: 100%";
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
+}, 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) {
+  return props.lastStep ? "0" : "1";
+}, function (props) {
+  return props.mode === "vertical" ? "column" : "row";
+}, function (props) {
+  return props.mode === "vertical" ? "width: 100%;" : "";
+});
+
+var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  background: inherit;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: ", ";\n\n  padding: 0px;\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\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) {
+  return props.disabled ? "cursor: not-allowed" : "";
+}, function (props) {
+  return props.disabled ? "" : "cursor: pointer";
+}, function (props) {
+  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 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 && !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) {
+  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
+});
+
+var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+  return props.theme.stepContainerIconSize;
+}, function (props) {
+  return props.theme.stepContainerIconSize;
+});
+
+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) {
+  return props.theme.stepContainerIconSize;
+}, function (props) {
+  return props.theme.stepContainerIconSize;
+});
+
+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;
+}, function (props) {
+  return props.theme.stepContainerFontStyle;
+}, function (props) {
+  return props.theme.stepContainerFontWeight;
+}, function (props) {
+  return props.theme.stepContainerLetterSpacing;
+});
+
+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) {
+  return props.theme.labelTextAlign;
+}, function (props) {
+  return props.theme.labelFontFamily;
+}, function (props) {
+  return props.theme.labelFontSize;
+}, function (props) {
+  return props.theme.labelFontStyle;
+}, function (props) {
+  return props.theme.labelFontWeight;
+}, function (props) {
+  return props.theme.labelLetterSpacing;
+}, function (props) {
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
+}, 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) {
+  return props.theme.descriptionTextAlign;
+}, function (props) {
+  return props.theme.descriptionFontFamily;
+}, function (props) {
+  return props.theme.descriptionFontSize;
+}, function (props) {
+  return props.theme.descriptionFontStyle;
+}, function (props) {
+  return props.theme.descriptionFontWeight;
+}, function (props) {
+  return props.theme.descriptionLetterSpacing;
+}, function (props) {
+  return props.theme.descriptionFontTextTransform;
+}, function (props) {
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
+});
+
+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" : "";
+}, 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;

package/wizard/Wizard.stories.tsx

@@ -0,0 +1,224 @@
+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 = () => {
+  return (
+    <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 = () => {
+  return (
+    <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 currentStep={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,128 @@
+"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;
+
+    expect(getByText("first-step")).toBeTruthy();
+    expect(getByText("second-step")).toBeTruthy();
+  });
+  test("Click on step text", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }]
+    })),
+        getByText = _render2.getByText;
+
+    var step = getByText("first-step");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on step description", function () {
+    var onClick = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step",
+        description: "step-description"
+      }]
+    })),
+        getByText = _render3.getByText;
+
+    var step = getByText("step-description");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on step number", function () {
+    var onClick = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }]
+    })),
+        getByText = _render4.getByText;
+
+    var step = getByText("1");
+
+    _react2.fireEvent.click(step);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Click on disable step", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }, {
+        label: "second-step",
+        disabled: true
+      }]
+    })),
+        getByText = _render5.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 _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+      currentStep: 1,
+      onStepClick: onClick,
+      steps: [{
+        label: "first-step"
+      }, {
+        label: "second-step"
+      }]
+    })),
+        getByText = _render6.getByText;
+
+    var step1 = getByText("first-step");
+    var step2 = getByText("second-step");
+
+    _react2.fireEvent.click(step1);
+
+    _react2.fireEvent.click(step2);
+
+    _react2.fireEvent.click(step1);
+
+    expect(onClick).toHaveBeenCalledTimes(3); //Test the received value in the onClick function
+
+    expect(onClick).toHaveBeenNthCalledWith(1, 0);
+    expect(onClick).toHaveBeenNthCalledWith(2, 1);
+    expect(onClick).toHaveBeenNthCalledWith(3, 0);
+  });
+});