@automattic/vip-design-system 0.9.4 → 0.10.0

package/build/system/Notice/Notice.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.Notice = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -11,7 +13,7 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "inline", "children", "title", "sx"];
+var _excluded = ["variant", "inline", "children", "title", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -61,6 +63,8 @@ var Notice = function Notice(_ref2) {
       title = _ref2.title,
       _ref2$sx = _ref2.sx,
       sx = _ref2$sx === void 0 ? {} : _ref2$sx,
+      _ref2$className = _ref2.className,
+      className = _ref2$className === void 0 ? null : _ref2$className,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   var color = 'yellow';
@@ -91,7 +95,8 @@ var Notice = function Notice(_ref2) {
         textDecoration: 'underline',
         border: 'none'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-notice-component', className)
   }, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
@@ -130,5 +135,6 @@ Notice.propTypes = {
   inline: _propTypes["default"].bool,
   sx: _propTypes["default"].object,
   title: _propTypes["default"].node,
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Notification/Notification.js

@@ -29,6 +29,7 @@ var Notification = function Notification(_ref) {
       status = _ref$status === void 0 ? 'success' : _ref$status,
       onClose = _ref.onClose;
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    className: "vip-notification-component",
     sx: {
       boxShadow: 'medium',
       width: 320,

package/build/system/OptionRow/OptionRow.js

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled"];
+var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -36,6 +38,10 @@ var OptionRow = function OptionRow(_ref) {
       small = _ref$small === void 0 ? false : _ref$small,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? null : _ref$order,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var mergedCard = disabled ? {
@@ -58,7 +64,9 @@ var OptionRow = function OptionRow(_ref) {
   return (0, _jsxRuntime.jsxs)(_.Grid, _extends({
     to: to,
     columns: [1, 1, 'auto 1fr auto'],
-    gap: [3, 3, "" + (small ? 3 : 4)]
+    gap: [3, 3, "" + (small ? 3 : 4)],
+    "data-order": order || undefined,
+    className: (0, _classnames["default"])('vip-option-row-component', className)
   }, props, {
     sx: _extends({
       alignItems: 'center',
@@ -135,5 +143,7 @@ OptionRow.propTypes = {
   meta: _propTypes["default"].node,
   to: _propTypes["default"].string,
   small: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  order: _propTypes["default"].number,
+  className: _propTypes["default"].any
 };

package/build/system/OptionRow/OptionRow.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _OptionRow = require("./OptionRow");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<OptionRow />', function () {
+  it('renders the OptionRow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a"
+            })), container = _render.container;
+            expect(_react.screen.getByText('Mostly used to link off to other pages.')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/Progress/Progress.js

@@ -11,9 +11,11 @@ var _Spinner = require("../Spinner");
 
 var _ = require("../");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "sx"];
+var _excluded = ["steps", "activeStep", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,10 +27,13 @@ var Progress = function Progress(_ref) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       sx = _ref.sx,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({}, props, {
+    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({
+      className: (0, _classnames["default"])('vip-progress-component', className)
+    }, props, {
       sx: _extends({
         color: 'primary'
       }, sx),
@@ -63,5 +68,6 @@ exports.Progress = Progress;
 Progress.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/ResourceList/ResourceList.js

@@ -83,6 +83,7 @@ var ResourceList = function ResourceList(_ref) {
       m: 0,
       p: 0
     },
+    className: "vip-resource-list-component",
     children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
       return (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {

package/build/system/Spinner/Spinner.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,6 +21,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Spinner = function Spinner(_ref) {
   var sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Spinner, _extends({
@@ -26,11 +30,13 @@ var Spinner = function Spinner(_ref) {
     sx: {
       fill: 'none',
       color: 'primary'
-    }
+    },
+    className: (0, _classnames["default"])('vip-spinner-component', className)
   }, props));
 };
 
 exports.Spinner = Spinner;
 Spinner.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Tabs/TabItem.js

@@ -27,6 +27,7 @@ var TabItem = function TabItem(_ref) {
     variant: "h4",
     as: "button",
     tabIndex: "0",
+    "data-active": active || undefined,
     sx: _extends({
       cursor: 'pointer',
       background: 'none',

package/build/system/Tabs/Tabs.js

@@ -3,13 +3,15 @@
 exports.__esModule = true;
 exports.Tabs = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["className", "sx"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -18,10 +20,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Tabs = function Tabs(_ref) {
-  var sx = _ref.sx,
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      sx = _ref.sx,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Flex, _extends({
+    className: (0, _classnames["default"])('vip-tabs-component', className),
     sx: _extends({
       borderBottom: '1px solid',
       borderColor: 'border',
@@ -34,6 +39,7 @@ var Tabs = function Tabs(_ref) {
 
 exports.Tabs = Tabs;
 Tabs.propTypes = {
-  variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  className: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  variant: _propTypes["default"].string
 };

package/build/system/Text/Text.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,6 +21,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Text = function Text(_ref) {
   var sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
@@ -26,11 +30,13 @@ var Text = function Text(_ref) {
     sx: _extends({
       lineHeight: 1.5,
       marginBottom: 2
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-text-component', className)
   }, props));
 };
 
 exports.Text = Text;
 Text.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Time/index.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["time", "relativeTime", "timeOnly"];
+var _excluded = ["time", "relativeTime", "timeOnly", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -60,6 +62,8 @@ var Time = function Time(_ref) {
       relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
       _ref$timeOnly = _ref.timeOnly,
       timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var formattedTime;
@@ -77,7 +81,8 @@ var Time = function Time(_ref) {
       timeZoneName: 'short'
     }),
     datetime: time,
-    as: "time"
+    as: "time",
+    className: (0, _classnames["default"])('vip-time-component', className)
   }, props, {
     children: formattedTime
   }));
@@ -87,5 +92,6 @@ exports.Time = Time;
 Time.propTypes = {
   time: _propTypes["default"].string,
   timeOnly: _propTypes["default"].bool,
-  relativeTime: _propTypes["default"].bool
+  relativeTime: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

package/build/system/Timeline/Timeline.js

@@ -0,0 +1,77 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Timeline = void 0;
+
+var _themeUi = require("theme-ui");
+
+var _md = require("react-icons/md");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["time", "first", "last", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var VerticalLine = function VerticalLine() {
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      borderLeft: '2px solid',
+      borderColor: 'border',
+      height: 'calc( 50% - 16px )',
+      borderRadius: '2px'
+    }
+  });
+};
+
+var Timeline = function Timeline(_ref) {
+  var time = _ref.time,
+      _ref$first = _ref.first,
+      first = _ref$first === void 0 ? false : _ref$first,
+      _ref$last = _ref.last,
+      last = _ref$last === void 0 ? false : _ref$last,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({
+    className: (0, _classnames["default"])('vip-timeline-component', className)
+  }, props, {
+    children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
+      sx: {
+        flexDirection: 'column',
+        justifyContent: 'space-evenly',
+        alignItems: 'center'
+      },
+      children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
+        "aria-hidden": true,
+        sx: {
+          color: 'border'
+        },
+        size: 18
+      }), !last && (0, _jsxRuntime.jsx)(VerticalLine, {})]
+    }), (0, _jsxRuntime.jsx)(_themeUi.Flex, {
+      sx: {
+        alignItems: 'center',
+        ml: 2
+      },
+      children: time
+    })]
+  }));
+};
+
+exports.Timeline = Timeline;
+Timeline.propTypes = {
+  first: _propTypes["default"].bool,
+  time: _propTypes["default"].node,
+  last: _propTypes["default"].bool,
+  className: _propTypes["default"].any
+};

package/build/system/Timeline/index.js

@@ -1,71 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Timeline = void 0;
 
-var _themeUi = require("theme-ui");
+var _Timeline = require("./Timeline");
 
-var _md = require("react-icons/md");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["time", "first", "last"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var VerticalLine = function VerticalLine() {
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      borderLeft: '2px solid',
-      borderColor: 'border',
-      height: 'calc( 50% - 16px )',
-      borderRadius: '2px'
-    }
-  });
-};
-
-var Timeline = function Timeline(_ref) {
-  var time = _ref.time,
-      _ref$first = _ref.first,
-      first = _ref$first === void 0 ? false : _ref$first,
-      _ref$last = _ref.last,
-      last = _ref$last === void 0 ? false : _ref$last,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({}, props, {
-    children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
-      sx: {
-        flexDirection: 'column',
-        justifyContent: 'space-evenly',
-        alignItems: 'center'
-      },
-      children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
-        sx: {
-          color: 'border'
-        },
-        size: 18
-      }), !last && (0, _jsxRuntime.jsx)(VerticalLine, {})]
-    }), (0, _jsxRuntime.jsx)(_themeUi.Flex, {
-      sx: {
-        alignItems: 'center',
-        ml: 2
-      },
-      children: (0, _jsxRuntime.jsx)("span", {
-        children: time
-      })
-    })]
-  }));
-};
-
-exports.Timeline = Timeline;
-Timeline.propTypes = {
-  first: _propTypes["default"].bool,
-  time: _propTypes["default"].string,
-  last: _propTypes["default"].bool
-};
+exports.Timeline = _Timeline.Timeline;

package/build/system/Wizard/Wizard.js

@@ -7,13 +7,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _md = require("react-icons/md");
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "variant", "completed"];
+var _excluded = ["steps", "activeStep", "variant", "completed", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,9 +29,12 @@ var Wizard = function Wizard(_ref) {
       variant = _ref.variant,
       _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? [] : _ref$completed,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-wizard-component', className),
     children: variant === 'horizontal' ? (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Flex, _extends({
         sx: {
@@ -41,6 +46,7 @@ var Wizard = function Wizard(_ref) {
               subTitle = _ref2.subTitle;
           return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
             children: [(0, _jsxRuntime.jsx)(_.WizardStepHorizontal, {
+              order: index + 1,
               active: index === activeStep,
               title: title,
               subTitle: subTitle
@@ -62,6 +68,7 @@ var Wizard = function Wizard(_ref) {
         title: title,
         subTitle: subTitle,
         complete: completed.includes(index),
+        order: index + 1,
         children: children
       }, index);
     })
@@ -73,5 +80,6 @@ Wizard.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
   variant: _propTypes["default"].string,
-  completed: _propTypes["default"].array
+  completed: _propTypes["default"].array,
+  className: _propTypes["default"].any
 };

package/build/system/Wizard/WizardStep.js

@@ -28,7 +28,8 @@ var WizardStep = function WizardStep(_ref) {
       _ref$complete = _ref.complete,
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
-      active = _ref.active;
+      active = _ref.active,
+      order = _ref.order;
   var borderLeftColor = 'border';
 
   if (complete) {
@@ -60,6 +61,8 @@ var WizardStep = function WizardStep(_ref) {
       borderColor: active ? 'primary' : 'border',
       borderLeftColor: borderLeftColor
     },
+    "data-step": order,
+    "data-active": active || undefined,
     children: [(0, _jsxRuntime.jsxs)(_.Heading, {
       variant: "h4",
       sx: {
@@ -88,5 +91,6 @@ WizardStep.propTypes = {
   subTitle: _propTypes["default"].node,
   complete: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
-  children: _propTypes["default"].node.isRequired
+  children: _propTypes["default"].node,
+  order: _propTypes["default"].number.isRequired
 };

package/build/system/Wizard/WizardStepHorizontal.js

@@ -24,7 +24,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  */
 var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
   var title = _ref.title,
-      active = _ref.active;
+      active = _ref.active,
+      order = _ref.order;
   return (0, _jsxRuntime.jsxs)(_.Heading, {
     variant: "h4",
     sx: {
@@ -33,6 +34,8 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
       alignItems: 'center',
       color: active ? 'heading' : 'muted'
     },
+    "data-step": order,
+    "data-active": active || undefined,
     children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
       sx: {
         mr: 2
@@ -45,5 +48,6 @@ exports.WizardStepHorizontal = WizardStepHorizontal;
 WizardStepHorizontal.propTypes = {
   title: _propTypes["default"].node,
   subTitle: _propTypes["default"].node,
-  active: _propTypes["default"].bool
+  active: _propTypes["default"].bool,
+  order: _propTypes["default"].number.isRequired
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.9.4",
+	"version": "0.10.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -19,9 +19,11 @@
 		"@radix-ui/react-radio-group": "^0.1.0",
 		"@radix-ui/react-tooltip": "^0.1.0",
 		"babel-loader": "^8.2.2",
+		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",
 		"react-icons": "^4.2.0",
-		"react-select": "^4.3.1"
+		"react-select": "^4.3.1",
+		"react-select-async-paginate": "^0.6.1"
 	},
 	"peerDependencies": {
 		"react": "*",

package/src/system/Avatar/Avatar.js

@@ -5,6 +5,7 @@
  */
 import PropTypes from 'prop-types';
 import { Image } from 'theme-ui';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ const Avatar = ( {
 	name = null,
 	size = 32,
 	src = null,
+	className = null,
 	...props
 } ) => (
 	<Box
@@ -34,6 +36,7 @@ const Avatar = ( {
 			padding: '1px',
 			textAlign: 'center',
 		} }
+		className={ classNames( 'vip-avatar-component', className ) }
 		{ ...props }
 	>
 		{ src ? (
@@ -68,6 +71,7 @@ Avatar.propTypes = {
 	size: PropTypes.number,
 	src: PropTypes.string,
 	name: PropTypes.string,
+	className: PropTypes.any,
 };
 
 export { Avatar };