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

package/textarea/types.d.ts

@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the textarea element.
      */
     name?: string;
+    /**
+     * Initial value of the textarea, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
      */
@@ -52,26 +56,29 @@ declare type Props = {
      * This function will be called when the user types within the textarea.
      * An object including the current value and the error (if the value
      * entered is not valid) will be passed to this function.
-     * If there is no error, error will be null.
+     * If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the textarea loses the focus. An
      * object including the textarea value and the error (if the value entered
      * is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the textarea. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the textarea. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -81,7 +88,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -91,7 +98,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -101,7 +108,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**

package/toggle-group/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import ToogleGroupPropsType from "./types";
-declare const DxcToggleGroup: ({ label, helperText, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
+declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
 export default DxcToggleGroup;

package/toggle-group/ToggleGroup.js

@@ -34,6 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DxcToggleGroup = function DxcToggleGroup(_ref) {
   var label = _ref.label,
       helperText = _ref.helperText,
+      defaultValue = _ref.defaultValue,
       value = _ref.value,
       onChange = _ref.onChange,
       _ref$disabled = _ref.disabled,
@@ -46,7 +47,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(multiple ? [] : -1),
+  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       selectedValue = _useState2[0],
       setSelectedValue = _useState2[1];
@@ -108,9 +109,9 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     role: multiple ? "group" : "radiogroup"
   }, options.map(function (option, i) {
     return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       role: multiple ? "switch" : "radio",
-      "aria-checked": multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      "aria-checked": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       tabIndex: !disabled ? tabIndex : -1,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
@@ -172,7 +173,7 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject3 || (_templat
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
+var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
   return props.theme.containerBorderThickness;
 }, function (props) {
   return props.theme.containerBorderStyle;

package/toggle-group/ToggleGroup.stories.tsx

@@ -97,7 +97,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Selected" theme="light" level={4} />
-      <DxcToggleGroup label="Selected" helperText="HelperText" value={2} options={options} />
+      <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Icons toggle group" theme="light" level={4} />
@@ -109,11 +109,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcToggleGroup label="Disabled" value={2} options={options} disabled />
+      <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcToggleGroup label="Hovered" options={twoOptions} value={2} />
+      <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Multiple toggleGroup" theme="light" level={4} />
@@ -121,7 +121,7 @@ export const Chromatic = () => (
         label="Toggle group"
         helperText="Please select one or more"
         options={options}
-        value={[1, 3]}
+        defaultValue={[1, 3]}
         multiple
       ></DxcToggleGroup>
     </ExampleContainer>

package/toggle-group/ToggleGroup.test.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+
+var options = [{
+  value: 1,
+  label: "Amazon"
+}, {
+  value: 2,
+  label: "Ebay"
+}, {
+  value: 3,
+  label: "Apple"
+}, {
+  value: 4,
+  label: "Google"
+}];
+describe("Toggle group component tests", function () {
+  test("Toggle group renders with correct labels", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: options
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    expect(getByText("Apple")).toBeTruthy();
+    expect(getByText("Google")).toBeTruthy();
+  });
+  test("Uncontrolled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Controlled toggle group calls correct function on change with value", function () {
+    var onChange = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: 1
+    })),
+        getByText = _render3.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+  test("Function on change is not called when disable", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      disabled: true
+    })),
+        getByText = _render4.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getAllByRole = _render5.getAllByRole;
+
+    var toggleOptions = getAllByRole("switch");
+
+    _react2.fireEvent.click(toggleOptions[0]);
+
+    expect(onChange).toHaveBeenCalledWith([1]);
+
+    _react2.fireEvent.click(toggleOptions[1]);
+
+    _react2.fireEvent.click(toggleOptions[3]);
+
+    expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
+    expect(toggleOptions[0].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+  });
+  test("Controlled multiple toggle returns always same values", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      onChange: onChange,
+      value: [1],
+      multiple: true
+    })),
+        getByText = _render6.getByText;
+
+    var option = getByText("Ebay");
+
+    _react2.fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith([1, 2]);
+    var option2 = getByText("Google");
+
+    _react2.fireEvent.click(option2);
+
+    expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
+  });
+  test("Single selection: Renders with correct default value", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      defaultValue: 2
+    })),
+        getAllByRole = _render7.getAllByRole;
+
+    var toggleOptions = getAllByRole("radio");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+  });
+  test("Multiple selection: Renders with correct default value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      options: options,
+      defaultValue: [2, 4],
+      multiple: true
+    })),
+        getAllByRole = _render8.getAllByRole;
+
+    var toggleOptions = getAllByRole("switch");
+    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+  });
+});

package/toggle-group/types.d.ts

@@ -66,6 +66,10 @@ declare type SingleSelectionToggle = CommonProps & {
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
     multiple?: false;
+    /**
+     * The key of the initially selected value.
+     */
+    defaultValue?: number;
     /**
      * The key of the selected value. If the component allows multiple selection, value must be an array.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
@@ -82,6 +86,10 @@ declare type MultipleSelectionToggle = CommonProps & {
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
     multiple: true;
+    /**
+     * The array of keys with the initially selected values.
+     */
+    defaultValue?: number[];
     /**
      * An array with the keys of the selected values.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.

package/useTheme.js

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _variables = require("./common/variables.js");
 
-var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
+var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
 
 var useTheme = function useTheme() {
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]);
+  var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
   return colorsTheme || _variables.componentTokens;
 };
 

package/wizard/Wizard.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import WizardPropsType from "./types";
-declare const DxcWizard: ({ mode, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
+declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
 export default DxcWizard;

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,52 @@ 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, {
-      src: step.icon
-    }) : /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
+    }, 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, {
+    }, 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) {
@@ -189,7 +196,9 @@ 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;

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,7 +131,7 @@ 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>
       <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} />