@automattic/vip-design-system 0.9.5 → 0.10.1

package/.github/workflows/nodejs.yaml

@@ -21,7 +21,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install -g npm@latest
+    - run: npm install -g npm@7.24.2
     - run: npm install
     - run: npm run test
     - run: npm run build

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "prettier.enable": false,
+}

package/README.md

@@ -43,10 +43,10 @@ Note: it's super useful to run `npm run watch` in another process, so any change
 
 ### Publish NPM Package Instructions
 
-Once all the changes needed are merged to master, and you are ready to release a new version, follow these steps:
+Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:
 
 1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
-2. Pull all the changes to your local master. Make sure you have the latest master locally.
+2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
 3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
 
 ```bash
@@ -67,11 +67,11 @@ npm publish
 
 Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.
 
-7. Push the tags to the repository and master updates.
+7. Push the tags to the repository and trunk updates.
 
 ```
 git push --tags
-git push origin master
+git push origin trunk
 ```
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.

package/build/system/Avatar/Avatar.js

@@ -7,11 +7,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _themeUi = require("theme-ui");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isVIP", "name", "size", "src"];
+var _excluded = ["isVIP", "name", "size", "src", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -28,6 +30,8 @@ var Avatar = function Avatar(_ref) {
       size = _ref$size === void 0 ? 32 : _ref$size,
       _ref$src = _ref.src,
       src = _ref$src === void 0 ? null : _ref$src,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
@@ -47,7 +51,8 @@ var Avatar = function Avatar(_ref) {
       color: 'white',
       padding: '1px',
       textAlign: 'center'
-    }
+    },
+    className: (0, _classnames["default"])('vip-avatar-component', className)
   }, props, {
     children: src ? (0, _jsxRuntime.jsx)(_themeUi.Image, {
       src: src,
@@ -76,5 +81,6 @@ Avatar.propTypes = {
   isVIP: _propTypes["default"].bool,
   size: _propTypes["default"].number,
   src: _propTypes["default"].string,
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Badge/Badge.js

@@ -3,13 +3,15 @@
 exports.__esModule = true;
 exports.Badge = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,6 +23,8 @@ var Badge = function Badge(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'blue' : _ref$variant,
       sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Text, _extends({
@@ -36,12 +40,14 @@ var Badge = function Badge(_ref) {
       display: 'inline-block',
       borderRadius: 1,
       fontWeight: 'heading'
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-badge-component', className)
   }, props));
 };
 
 exports.Badge = Badge;
 Badge.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/BlankState/BlankState.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.BlankState = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
@@ -27,12 +29,15 @@ var BlankState = function BlankState(_ref) {
       image = _ref.image,
       _ref$imageAlt = _ref.imageAlt,
       imageAlt = _ref$imageAlt === void 0 ? 'Image representing the blank state' : _ref$imageAlt,
-      title = _ref.title;
+      title = _ref.title,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     sx: {
       textAlign: 'center',
       padding: 5
     },
+    className: (0, _classnames["default"])('vip-blank-state-component', className),
     children: [icon ? icon : (0, _jsxRuntime.jsx)("img", {
       src: image,
       sx: {
@@ -60,5 +65,6 @@ BlankState.propTypes = {
   icon: _propTypes["default"].node,
   image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   imageAlt: _propTypes["default"].string,
-  title: _propTypes["default"].node
+  title: _propTypes["default"].node,
+  className: _propTypes["default"].any
 };

package/build/system/Box/Box.js

@@ -3,18 +3,28 @@
 exports.__esModule = true;
 exports.Box = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = require("react");
 
 var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+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); }
 
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({
-    ref: ref
+    ref: ref,
+    className: (0, _classnames["default"])('vip-box-component', props.className)
   }, props));
 });
 exports.Box = Box;
-Box.displayName = 'Box';
+Box.displayName = 'Box';
+Box.propTypes = {
+  className: _propTypes["default"].any
+};

package/build/system/Button/Button.js

@@ -7,6 +7,8 @@ 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"];
@@ -34,11 +36,13 @@ var Button = function Button(_ref) {
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-button-component', props.className)
   }, props));
 };
 
 exports.Button = Button;
 Button.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Card/Card.js

@@ -9,9 +9,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,6 +26,7 @@ var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
@@ -32,13 +35,15 @@ var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       // pass variant prop to sx
       variant: "cards." + variant,
       overflow: 'hidden'
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-card-component', className)
   }, props));
 });
 
 exports.Card = Card;
 Card.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };
 Card.displayName = 'Card';

package/build/system/Code/Code.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.Code = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("react");
@@ -11,7 +13,7 @@ var _md = require("react-icons/md");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["prompt", "showCopy", "onCopy"];
+var _excluded = ["prompt", "showCopy", "onCopy", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -26,6 +28,7 @@ var Code = function Code(_ref) {
       showCopy = _ref$showCopy === void 0 ? false : _ref$showCopy,
       _ref$onCopy = _ref.onCopy,
       onCopy = _ref$onCopy === void 0 ? null : _ref$onCopy,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var ref = (0, _react.useRef)();
@@ -46,7 +49,8 @@ var Code = function Code(_ref) {
         marginRight: 2,
         userSelect: 'none'
       }
-    }
+    },
+    className: (0, _classnames["default"])('vip-code-component', className)
   }, props));
 
   if (!showCopy) {
@@ -100,5 +104,6 @@ exports.Code = Code;
 Code.propTypes = {
   prompt: _propTypes["default"].bool,
   showCopy: _propTypes["default"].bool,
-  onCopy: _propTypes["default"].func
+  onCopy: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };

package/build/system/ConfirmationDialog/ConfirmationDialog.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.ConfirmationDialogContent = exports.ConfirmationDialog = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,9 +27,12 @@ var ConfirmationDialogContent = function ConfirmationDialogContent(_ref) {
       onClose = _ref.onClose,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Confirm' : _ref$label,
-      onConfirm = _ref.onConfirm;
+      onConfirm = _ref.onConfirm,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     p: 4,
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
     children: [(0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h3",
       sx: {
@@ -66,7 +71,8 @@ ConfirmationDialogContent.propTypes = {
   body: _propTypes["default"].node,
   label: _propTypes["default"].string,
   onClose: _propTypes["default"].func,
-  onConfirm: _propTypes["default"].func
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };
 
 var ConfirmationDialog = function ConfirmationDialog(_ref2) {

package/build/system/Dialog/Dialog.js

@@ -81,6 +81,7 @@ var Dialog = function Dialog(_ref) {
       position: 'relative'
     },
     ref: dialogRef,
+    className: "vip-dialog-component",
     children: [(0, _jsxRuntime.jsx)(_.DialogTrigger, {
       tabIndex: "0",
       sx: {

package/build/system/Form/Select.js

@@ -69,6 +69,7 @@ var Select = function Select(_ref) {
 
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
+    className: "vip-select-component",
     children: (0, _jsxRuntime.jsx)(Component, _extends({
       isMulti: isMulti,
       label: label,

package/build/system/Form/Toggle.js

@@ -3,11 +3,13 @@
 exports.__esModule = true;
 exports.Toggle = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["name"];
+var _excluded = ["name", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -18,9 +20,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Toggle = function Toggle(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsxs)(CheckBoxWrapper, {
+    className: (0, _classnames["default"])('vip-checkbox-component', className),
     children: [(0, _jsxRuntime.jsx)(CheckBox, _extends({
       name: name,
       id: name,
@@ -33,7 +38,8 @@ var Toggle = function Toggle(_ref) {
 
 exports.Toggle = Toggle;
 Toggle.propTypes = {
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };
 
 var CheckBoxWrapper = function CheckBoxWrapper(props) {

package/build/system/Heading/Heading.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 = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,6 +23,8 @@ var Heading = function Heading(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Heading, _extends({
@@ -29,12 +33,14 @@ var Heading = function Heading(_ref) {
       color: 'heading',
       // pass variant prop to sx
       variant: "text." + variant
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-heading-component', className)
   }, props));
 };
 
 exports.Heading = Heading;
 Heading.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

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,14 +64,16 @@ 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',
       cursor: disabled ? 'auto' : 'pointer',
       textDecoration: 'none',
       color: 'inherit',
-      '&:hover': {
+      '&:hover': !disabled && {
         backgroundColor: 'hover'
       }
     }, inlineStyles),
@@ -115,7 +123,8 @@ var OptionRow = function OptionRow(_ref) {
         },
         children: body
       })]
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+    }), false !== meta && '' !== meta && (0, _jsxRuntime.jsx)(_.Box, {
+      "data-testid": "meta",
       children: meta ? meta : (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
         size: 24
       })
@@ -135,5 +144,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,84 @@
+"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);
+  })));
+  it('renders a disabled OptionRow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var image1, _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // eslint-disable-next-line max-len
+            image1 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
+              image: image1,
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a",
+              disabled: true,
+              meta: ""
+            })), container = _render2.container;
+            expect(_react.screen.getByAltText('Image representing the list item').closest('div')).toHaveStyle({
+              background: 'none'
+            });
+            expect(_react.screen.queryByTestId('meta')).not.toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

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