@dxc-technology/halstack-react 0.0.0-ec7b867 → 0.0.0-ecc45e2

package/wizard/Wizard.js

@@ -9,10 +9,10 @@ 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"));
@@ -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\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

@@ -9,23 +9,18 @@ export default {
   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 = [
   {
@@ -41,7 +36,6 @@ const stepWithLabel = [
     label: "Forth step",
   },
 ];
-
 const stepWithLabelDescription = [
   {
     label: "First step",
@@ -62,7 +56,6 @@ const stepWithLabelDescription = [
     valid: false,
   },
 ];
-
 const stepWithLongDescription = [
   {
     label: "First step",
@@ -80,7 +73,6 @@ const stepWithLongDescription = [
       "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",
@@ -106,7 +98,6 @@ const stepDisabled = [
     disabled: true,
   },
 ];
-
 const stepIcons = [
   {
     label: "First step",
@@ -121,7 +112,6 @@ const stepIcons = [
     icon: favoriteSVG,
   },
 ];
-
 const stepLargeIcons = [
   {
     label: "First step",
@@ -141,15 +131,29 @@ 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>
@@ -214,7 +218,12 @@ export const Chromatic = () => (
   </>
 );
 
-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"));
+
+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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type Step = {
     /**
      * Step label.
@@ -29,13 +29,18 @@ declare type Step = {
      */
     valid?: boolean;
 };
+export declare type Mode = "horizontal" | "vertical";
 declare type Props = {
     /**
      * The wizard can be showed in horizontal or vertical.
      */
-    mode?: "horizontal" | "vertical";
+    mode?: Mode;
     /**
-     * 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;
     /**

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