@automattic/vip-design-system 0.33.2 → 0.33.4

package/build/system/Accordion/Accordion.js

@@ -104,7 +104,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         all: 'unset',
         fontFamily: 'inherit',
         px: 3,
-        height: 45,
+        minHeight: 45,
         flex: 1,
         display: 'flex',
         alignItems: 'center',
@@ -134,7 +134,9 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
           fontSize: 3,
           color: 'icon.primary',
           transform: 'rotate(90deg)',
-          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)'
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          minHeight: '20px',
+          minWidth: '20px'
         },
         "aria-hidden": true
       })]

package/build/system/Accordion/Accordion.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithLargeText = exports.Default = void 0;
 
 var _ri = require("react-icons/ri");
 
@@ -44,40 +44,55 @@ var ExampleContent = function ExampleContent() {
   });
 };
 
+var ExampleAccordion = function ExampleAccordion() {
+  return (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
+    defaultValue: "teamPermissions",
+    sx: {
+      width: '250px'
+    },
+    children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "teamPermissions",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
+        children: "Team & Permissions"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "addContentMedia",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
+        children: "Add Content & Media"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "addCode",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
+        children: "Add Code"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    })]
+  });
+};
+
 var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(ExampleAccordion, {});
+};
+
+exports.Default = Default;
+
+var WithLargeText = function WithLargeText() {
   return (0, _jsxRuntime.jsx)(_.Box, {
-    children: (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
-      defaultValue: "teamPermissions",
-      sx: {
-        width: '450px'
-      },
-      children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "teamPermissions",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
-          children: "Team & Permissions"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "addContentMedia",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
-          children: "Add Content & Media"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "addCode",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
-          children: "Add Code"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      })]
-    })
+    sx: {
+      '.vip-heading-component > button': {
+        fontSize: '25px'
+      }
+    },
+    children: (0, _jsxRuntime.jsx)(ExampleAccordion, {})
   });
 };
 
-exports.Default = Default;
+exports.WithLargeText = WithLargeText;

package/build/system/Form/Label.js

@@ -13,11 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _themeUi = require("theme-ui");
+
 var _RequiredLabel = require("./RequiredLabel");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx", "children", "required"];
+var _excluded = ["sx", "children", "required", "as"];
 var baseLabelColor = 'input.label.default';
 exports.baseLabelColor = baseLabelColor;
 var baseLabelStyle = {
@@ -32,9 +34,14 @@ var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
   var sx = _ref.sx,
       children = _ref.children,
       required = _ref.required,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'label' : _ref$as,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
-    sx: (0, _extends2["default"])({}, baseLabelStyle, {
+  return (0, _jsxRuntime.jsxs)(_themeUi.Box, (0, _extends2["default"])({
+    as: as,
+    sx: (0, _extends2["default"])({
+      all: 'unset'
+    }, baseLabelStyle, {
       display: 'block',
       mb: 2
     }, sx),
@@ -48,6 +55,7 @@ exports.Label = Label;
 Label.propTypes = {
   children: _propTypes["default"].any,
   required: _propTypes["default"].bool,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  as: _propTypes["default"].node
 };
 Label.displayName = 'Label';

package/build/system/Form/RadioBoxGroup.js

@@ -15,10 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _Label = require("./Label");
-
 var _Validation = require("./Validation");
 
+var _RequiredLabel = require("./RequiredLabel");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
@@ -171,15 +171,15 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
         borderColor: 'input.border.error',
         borderRadius: 2
       } : {}),
-      ref: forwardRef
+      ref: forwardRef,
+      "aria-required": required,
+      role: "radiogroup"
     }, props, {
-      children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
-        as: "legend",
+      children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
         sx: {
           mb: 2
         },
-        required: required,
-        children: groupLabel
+        children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
       }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
         children: "Choose an option"
       }), (0, _jsxRuntime.jsx)("div", {

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -33,8 +33,6 @@ var _Form = require("../Form");
 
 var _ = require("../");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
-
 var _md = require("react-icons/md");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -195,10 +193,7 @@ var SelectedOptions = function SelectedOptions(_ref2) {
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap'
         },
-        "aria-hidden": "true",
         children: option
-      }), (0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
-        children: [option + " selected. Press Space or Enter to remove.", index === 0 ? ' Press Shift Tab to add more.' : '']
       }), (0, _jsxRuntime.jsx)(_md.MdClose, {
         sx: {
           ml: 2

package/build/system/Table/Table.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,10 +19,16 @@ var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
 var _ = require("../");
 
+var _random = require("../utils/random");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className", "children", "caption"];
 
+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 || typeof 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 Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       className = _ref.className,
@@ -36,21 +42,32 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
     console.warn('[A11Y] Please, add a caption to your table.');
   }
 
+  var captionId = (0, _react.useMemo)(function () {
+    return "table_caption_" + (0, _random.generateId)();
+  }, []);
   return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-table-component', className),
     sx: {
       width: '100%',
       overflowX: 'auto'
     },
+    role: "region",
+    ariaLabelledby: captionId // Because this container is scrollable, it needs to be focusable.
+    // A tabIndex value of 0 makes it focusable by keyboard and does not
+    // interfere with the tab order.
+    ,
+    tabIndex: 0,
     children: (0, _jsxRuntime.jsxs)("table", (0, _extends2["default"])({
       sx: (0, _extends2["default"])({
         width: '100%',
         minWidth: '1024px',
         borderSpacing: 0
       }, sx),
-      className: (0, _classnames["default"])('vip-table-component', className),
+      className: (0, _classnames["default"])('vip-table-component-element', className),
       ref: forwardRef
     }, props, {
       children: [caption && (0, _jsxRuntime.jsx)("caption", {
+        id: captionId,
         sx: _ScreenReaderText.screenReaderTextClass,
         children: caption
       }), children]

package/build/system/Table/Table.stories.js

@@ -51,8 +51,7 @@ var ExampleTable = function ExampleTable(_ref) {
           children: "2s"
         }, "duration"), (0, _jsxRuntime.jsx)(_.Text, {
           children: "11th Mar 2020, 16:49:22"
-        }, "time")],
-        gbc: true
+        }, "time")]
       }), (0, _jsxRuntime.jsxs)(_.TableRow, {
         children: [(0, _jsxRuntime.jsx)(_.TableCell, {
           children: (0, _jsxRuntime.jsx)(_.Flex, {

package/build/system/Wizard/Wizard.js

@@ -21,7 +21,7 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "variant", "completed", "className", "titleAutofocus"];
+var _excluded = ["steps", "activeStep", "variant", "completed", "skipped", "className", "titleAutofocus"];
 
 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); }
 
@@ -33,6 +33,8 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       variant = _ref.variant,
       _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? [] : _ref$completed,
+      _ref$skipped = _ref.skipped,
+      skipped = _ref$skipped === void 0 ? [] : _ref$skipped,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       _ref$titleAutofocus = _ref.titleAutofocus,
@@ -86,14 +88,20 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
           children = _ref3.children,
-          titleVariant = _ref3.titleVariant;
+          titleVariant = _ref3.titleVariant,
+          summary = _ref3.summary,
+          onChange = _ref3.onChange;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
+        skipped: skipped.includes(index),
         order: index + 1,
+        totalSteps: steps.length,
         subTitle: subTitle,
         title: title,
         titleVariant: titleVariant,
+        summary: summary,
+        onChange: onChange,
         shouldFocusTitle: titleAutofocus && didMount,
         children: children
       }, index);
@@ -108,6 +116,7 @@ Wizard.propTypes = {
   activeStep: _propTypes["default"].number,
   variant: _propTypes["default"].string,
   completed: _propTypes["default"].array,
+  skipped: _propTypes["default"].array,
   className: _propTypes["default"].any,
   titleAutofocus: _propTypes["default"].bool
 };

package/build/system/Wizard/Wizard.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithTitleAutoFocus = exports.Default = exports.CustomTitle = void 0;
+exports["default"] = exports.WithTitleAutoFocus = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -76,6 +76,7 @@ var Default = function Default() {
       children: (0, _jsxRuntime.jsx)(_.Wizard, {
         activeStep: 0,
         steps: steps,
+        completed: [1],
         className: "vip-wizard-xyz"
       })
     })
@@ -96,6 +97,13 @@ var WithTitleAutoFocus = function WithTitleAutoFocus() {
   var steps = [{
     title: 'Choose Domain',
     titleVariant: 'h2',
+    summary: [{
+      label: 'Demo Label',
+      value: 'Demo value'
+    }],
+    onChange: function onChange() {
+      return setActiveStep(0);
+    },
     children: (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Label, {
         children: "Domain"
@@ -114,6 +122,9 @@ var WithTitleAutoFocus = function WithTitleAutoFocus() {
   }, {
     title: 'Configure DNS',
     titleVariant: 'h2',
+    onChange: function onChange() {
+      return setActiveStep(1);
+    },
     children: (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Label, {
         children: "DNS"
@@ -127,11 +138,33 @@ var WithTitleAutoFocus = function WithTitleAutoFocus() {
         children: "back"
       })]
     })
+  }, {
+    title: 'Certificate',
+    titleVariant: 'h2',
+    summary: [{
+      label: 'Certificate status',
+      value: 'Not found'
+    }],
+    onChange: function onChange() {
+      return setActiveStep(2);
+    },
+    children: (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [(0, _jsxRuntime.jsx)(_.Label, {
+        children: "Certificate validation"
+      }), (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mt: 3
+        },
+        children: "Check certificate"
+      })]
+    })
   }];
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [(0, _jsxRuntime.jsx)(_.Box, {
       mt: 4,
       children: (0, _jsxRuntime.jsx)(_.Wizard, {
+        completed: [0, 1],
+        skipped: [2],
         activeStep: activeStep,
         steps: steps,
         titleAutofocus: autoFocus,
@@ -159,34 +192,4 @@ var WithTitleAutoFocus = function WithTitleAutoFocus() {
   });
 };
 
-exports.WithTitleAutoFocus = WithTitleAutoFocus;
-
-var CustomTitle = function CustomTitle() {
-  var steps = [{
-    title: (0, _jsxRuntime.jsx)("h3", {
-      sx: {
-        m: 0
-      },
-      children: "Choose Domain"
-    }),
-    subTitle: (0, _jsxRuntime.jsx)("span", {
-      children: "You can bring a domain name you already own, or buy a new one."
-    })
-  }, {
-    title: (0, _jsxRuntime.jsx)("h3", {
-      sx: {
-        m: 0
-      },
-      children: "Configure DNS"
-    })
-  }];
-  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: (0, _jsxRuntime.jsx)(_.Wizard, {
-      activeStep: 0,
-      steps: steps,
-      className: "vip-wizard-xyz"
-    })
-  });
-};
-
-exports.CustomTitle = CustomTitle;
+exports.WithTitleAutoFocus = WithTitleAutoFocus;

package/build/system/Wizard/WizardStep.js

@@ -7,12 +7,14 @@ exports.WizardStep = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _md = require("react-icons/md");
+var _bs = require("react-icons/bs");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
+var _ScreenReaderText = require("../ScreenReaderText");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 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); }
@@ -31,33 +33,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
       subTitle = _ref.subTitle,
+      _ref$skipped = _ref.skipped,
+      skipped = _ref$skipped === void 0 ? false : _ref$skipped,
       _ref$complete = _ref.complete,
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
       active = _ref.active,
       order = _ref.order,
+      totalSteps = _ref.totalSteps,
       shouldFocusTitle = _ref.shouldFocusTitle,
       _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant;
+      titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant,
+      summary = _ref.summary,
+      onChange = _ref.onChange;
 
   var titleRef = _react["default"].useRef(null);
 
-  var borderLeftColor = 'border';
-
-  if (complete) {
-    borderLeftColor = 'success';
-  } else if (active) {
-    borderLeftColor = 'primary';
+  var status = 'inactive';
+  var statusText = 'Step not completed';
+
+  if (active) {
+    status = 'active';
+    statusText = ''; // not adding the status text for active step since it's announced by aria-current
+  } else if (complete) {
+    status = 'complete';
+    statusText = 'Step completed';
+  } else if (skipped) {
+    status = 'skipped';
+    statusText = 'Step skipped';
   }
 
-  var color = 'text';
-
-  if (complete) {
-    color = 'success';
-  } else if (active) {
-    color = 'heading';
+  if (statusText !== '') {
+    statusText = "Status: " + statusText;
   }
 
+  var stepText = "Step " + order + " of " + totalSteps;
+  var borderLeftColor = "wizard.step.border." + status;
+  var statusIconColor = "wizard.step.icon." + status;
+  var headingColor = "wizard.step.heading." + status;
+  var StatusIcon = complete ? _bs.BsFillCheckCircleFill : _bs.BsCircleFill;
   (0, _react.useLayoutEffect)(function () {
     if (active && titleRef != null && titleRef.current && shouldFocusTitle) {
       titleRef.current.focus();
@@ -74,50 +88,115 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       borderBottom: active ? 'none' : '1px solid',
       '&:first-of-type': {
         borderTopWidth: '1px',
-        borderTopStyle: 'solid',
-        borderTopColor: 'borders.2'
+        borderTopStyle: 'solid'
       },
-      borderColor: active ? 'primary' : 'borders.2',
+      borderColor: 'wizard.step.border.default',
       borderLeftColor: borderLeftColor,
       overflow: 'inherit'
     },
     "data-step": order,
     "data-active": active || undefined,
-    ref: forwardRef,
-    children: [typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
-      variant: titleVariant,
+    ref: forwardRef // aria-current={ active ? 'step' : undefined }
+    ,
+    children: [(0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
-        mb: 0,
-        display: 'flex',
-        alignItems: 'center',
-        color: color,
-        fontSize: 2,
-        fontWeight: active ? 'bold' : 'normal'
+        alignItems: 'flex-end',
+        mb: 2
       },
-      ref: titleRef,
-      tabIndex: shouldFocusTitle ? -1 : undefined,
-      children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-        "aria-hidden": "true",
+      children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+        variant: titleVariant,
         sx: {
-          mr: 2,
-          color: active ? 'icon.primary' : 'icon.disabled'
-        }
-      }), title]
-    }) : (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        alignItems: 'center',
-        color: color
-      },
-      children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-        "aria-hidden": "true",
+          mb: 1,
+          color: headingColor,
+          fontSize: 2,
+          fontWeight: '500',
+          flexGrow: 1
+        },
+        ref: titleRef,
+        tabIndex: shouldFocusTitle ? -1 : undefined,
+        "aria-current": active ? 'step' : undefined,
+        children: [(0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            color: 'wizard.step.number.color'
+          },
+          "aria-hidden": "true",
+          children: stepText
+        }), (0, _jsxRuntime.jsxs)(_.Flex, {
+          as: "span",
+          sx: {
+            mt: 3,
+            alignItems: 'center'
+          },
+          "aria-hidden": "true",
+          children: [(0, _jsxRuntime.jsx)(StatusIcon, {
+            sx: {
+              mr: 3,
+              mt: 0,
+              color: statusIconColor
+            }
+          }), title]
+        }), (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
+          children:
+          /**
+           * we are adding the composed title here so that it's announced correctly by the voiceover
+           * Using tags inside the heading would make the voiceover read the heading in multiple parts
+           **/
+          stepText + ": " + title + ". " + statusText
+        })]
+      }), !active && (complete || skipped) && onChange && (0, _jsxRuntime.jsxs)(_.Button, {
+        variant: "text",
+        onClick: onChange,
         sx: {
-          mr: 2,
-          color: active ? 'icon.primary' : 'icon.disabled'
+          height: 'auto',
+          alignSelf: 'flex-end'
+        },
+        children: ["Change ", (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
+          children: "the " + title + " step"
+        })]
+      })]
+    }), !active && (complete || skipped) && (summary == null ? void 0 : summary.length) > 0 && (0, _jsxRuntime.jsx)(_.Table, {
+      caption: "Summary of " + title,
+      sx: {
+        width: 'auto',
+        minWidth: 'auto',
+        '> tbody > tr': {
+          '> td, > th': {
+            fontWeight: '500',
+            border: 'none',
+            pl: 0,
+            '&:first-of-type': {
+              pl: 0
+            }
+          }
         }
-      }), title]
+      },
+      children: (0, _jsxRuntime.jsx)("tbody", {
+        children: summary.map(function (item, index) {
+          return (0, _jsxRuntime.jsxs)(_.TableRow, {
+            children: [(0, _jsxRuntime.jsxs)(_.TableCell, {
+              as: "th",
+              scope: "row",
+              sx: {
+                color: 'gray',
+                whiteSpace: 'nowrap',
+                pr: 1
+              },
+              children: [item.label, item.value ? ':' : '']
+            }), (0, _jsxRuntime.jsx)(_.TableCell, {
+              sx: {
+                color: 'text'
+              },
+              children: (0, _jsxRuntime.jsx)("strong", {
+                children: item.value
+              })
+            })]
+          }, "summary_tb_" + index);
+        })
+      })
     }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
       sx: {
-        mb: 3
+        mb: 3,
+        mt: 2
       },
       children: subTitle
     }), active && children]
@@ -131,8 +210,15 @@ WizardStep.propTypes = {
   children: _propTypes["default"].node,
   complete: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
+  totalSteps: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
+  title: _propTypes["default"].string,
   titleVariant: _propTypes["default"].string,
+  skipped: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  summary: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].node,
+    value: _propTypes["default"].node
+  })),
   shouldFocusTitle: _propTypes["default"].bool
 };