@dxc-technology/halstack-react 0.0.0-f0d662d → 0.0.0-f1bbdfe

package/wizard/Wizard.js

@@ -9,17 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 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.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -82,8 +82,11 @@ var icons = {
 };
 
 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,
@@ -91,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];
@@ -113,48 +116,49 @@ var DxcWizard = function DxcWizard(_ref) {
     theme: colorsTheme.wizard
   }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
     mode: mode,
-    margin: margin
+    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 === 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 === null || steps === void 0 ? void 0 : 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 ? typeof step.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+    }, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, null, 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, {
+    }) : 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
-    }, step.label) : "", step.description ? /*#__PURE__*/_react["default"].createElement(Description, {
+    }, step.label), step.description && /*#__PURE__*/_react["default"].createElement(Description, {
+      current: i === renderedCurrent,
       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  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) {
@@ -170,16 +174,16 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
 });
 
 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;";
+  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%;" : "";
+  return props.mode === "vertical" && "width: fit-content;";
 });
 
-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) {
+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) {
   return props.disabled ? "cursor: not-allowed" : "";
@@ -189,42 +193,44 @@ 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;
+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) {
+  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
 }, function (props) {
-  return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
 }, 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  ");
+  return "\n    ".concat(props.disabled ? "border: ".concat(props.theme.disabledStepBorderThickness, " ").concat(props.theme.disabledStepBorderStyle, " ").concat(props.theme.disabledStepBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedStepBorderThickness, " ").concat(props.theme.selectedStepBorderStyle, " ").concat(props.theme.selectedStepBorderColor, ";") : props.visited ? "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.visitedStepBorderColor, ";") : "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.unvisitedStepBorderColor, ";"), "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledStepBackgroundColor) : props.current ? "".concat(props.theme.selectedStepBackgroundColor) : !props.visited ? "".concat(props.theme.unvisitedStepBackgroundColor) : "".concat(props.theme.visitedStepBackgroundColor), ";\n  ");
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
+  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.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
+  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.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  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) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  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) {
-  return props.theme.stepContainerFontSize;
+  return props.theme.stepFontSize;
 }, function (props) {
-  return props.theme.stepContainerFontFamily;
+  return props.theme.stepFontFamily;
 }, function (props) {
-  return props.theme.stepContainerFontStyle;
+  return props.theme.stepFontStyle;
 }, function (props) {
-  return props.theme.stepContainerFontWeight;
+  return props.theme.stepFontWeight;
 }, function (props) {
-  return props.theme.stepContainerLetterSpacing;
+  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"])));
@@ -242,37 +248,35 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, function (props) {
   return props.theme.labelFontWeight;
 }, function (props) {
-  return props.theme.labelLetterSpacing;
+  return props.theme.labelFontTracking;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledLabelFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedLabelFontColor : props.current ? props.theme.selectedLabelFontColor : props.theme.visitedLabelFontColor, ";");
 }, 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;
+  return props.theme.helperTextTextAlign;
 }, function (props) {
-  return props.theme.descriptionFontFamily;
+  return props.theme.helperTextFontFamily;
 }, function (props) {
-  return props.theme.descriptionFontSize;
+  return props.theme.helperTextFontSize;
 }, function (props) {
-  return props.theme.descriptionFontStyle;
+  return props.theme.helperTextFontStyle;
 }, function (props) {
-  return props.theme.descriptionFontWeight;
+  return props.theme.helperTextFontWeight;
 }, function (props) {
-  return props.theme.descriptionLetterSpacing;
+  return props.theme.helperTextFontTracking;
 }, function (props) {
-  return props.theme.descriptionFontTextTransform;
+  return props.theme.helperTextFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
+  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  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" : "";
+var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (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;" : "";
+  return props.mode === "vertical" && "margin: 0 18px;";
 }, function (props) {
   return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
 });

package/wizard/Wizard.stories.tsx

@@ -3,29 +3,25 @@ import DxcWizard from "./Wizard";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 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 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 = [
   {
@@ -137,19 +133,41 @@ const stepLargeIcons = [
   },
 ];
 
+const opinionatedTheme = {
+  wizard: {
+    baseColor: "#5f249f",
+    fontColor: "#000000",
+    selectedStepFontColor: "#ffffff",
+  },
+};
+
 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>
+      <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in horizontal" theme="light" level={4} />
       <DxcWizard steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in vertical" theme="light" level={4} />
       <DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="Disabled steps" theme="light" level={4} />
       <DxcWizard steps={stepDisabled}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused steps" theme="light" level={4} />
+      <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With icons" theme="light" level={4} />
       <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With large icons" theme="light" level={4} />
       <DxcWizard steps={stepLargeIcons}></DxcWizard>
     </ExampleContainer>
@@ -211,10 +229,21 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
+const WizardSelected = () => (
+  <ExampleContainer>
+    <Title title="Clicked step" theme="light" level={4} />
+    <DxcWizard steps={stepWithLabel} mode="vertical"></DxcWizard>
+  </ExampleContainer>
+);
 
 export const WizardStepActived = WizardSelected.bind({});
 WizardStepActived.play = async ({ canvasElement }) => {

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.tsx"));
+
+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);
+  });
+});

package/wizard/types.d.ts

@@ -6,8 +6,8 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-declare type Step = {
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export declare type StepProps = {
     /**
      * Step label.
      */
@@ -35,7 +35,11 @@ declare type Props = {
      */
     mode?: "horizontal" | "vertical";
     /**
-     * Defines which step is marked as the current. The numeration starts in 0.
+     * Initially selected step, only when it is uncontrolled.
+     */
+    defaultCurrentStep?: number;
+    /**
+     * Defines which step is marked as the current. The numeration starts at 0.
      */
     currentStep?: number;
     /**
@@ -46,7 +50,7 @@ declare type Props = {
     /**
      * An array of objects representing the steps.
      */
-    steps: Step[];
+    steps: StepProps[];
     /**
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.

package/ThemeContext.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-declare const ThemeContext: React.Context<object>;
-declare type ThemeProviderCommonProps = {
-    children: React.ReactNode;
-};
-declare type ThemeProviderDefaultTheme = ThemeProviderCommonProps & {
-    theme: object;
-};
-declare type ThemeProviderAdvancedTheme = ThemeProviderCommonProps & {
-    advancedTheme: object;
-};
-declare type ThemeProviderPropsType = ThemeProviderDefaultTheme | ThemeProviderAdvancedTheme;
-declare const ThemeProvider: (props: ThemeProviderPropsType) => JSX.Element;
-export default ThemeContext;
-export { ThemeProvider };