@dxc-technology/halstack-react 0.0.0-4845f79 → 0.0.0-49006fa

package/toggle-group/types.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type OptionCommons = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+};
+declare type OptionIcon = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label?: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon: string | SVG;
+};
+declare type OptionLabel = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon?: string | SVG;
+};
+declare type Option = OptionIcon | OptionLabel;
+declare type CommonProps = {
+    /**
+     * Text to be placed above the component.
+     */
+    label?: string;
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option[];
+    /**
+     * 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.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+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 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.
+     */
+    value?: number;
+    /**
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number) => void;
+};
+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;
+    /**
+     * 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.
+     */
+    value?: number[];
+    /**
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number[]) => void;
+};
+declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+export default Props;

package/toggle-group/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/useTheme.d.ts

@@ -0,0 +1,2 @@
+declare const useTheme: () => any;
+export default useTheme;

package/{dist/useTheme.js → useTheme.js}

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

package/wizard/Wizard.d.ts

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

package/wizard/Wizard.js

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