@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/Wizard/Wizard.js

@@ -1,25 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Wizard = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 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"];
-
-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 _excluded = ["steps", "activeStep", "variant", "completed", "className"];
 
 var Wizard = function Wizard(_ref) {
   var steps = _ref.steps,
@@ -27,11 +29,13 @@ var Wizard = function Wizard(_ref) {
       variant = _ref.variant,
       _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? [] : _ref$completed,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_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({
+      children: [(0, _jsxRuntime.jsx)(_.Flex, (0, _extends2["default"])({
         sx: {
           flex: '0 0 auto'
         }
@@ -41,6 +45,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 +67,7 @@ var Wizard = function Wizard(_ref) {
         title: title,
         subTitle: subTitle,
         complete: completed.includes(index),
+        order: index + 1,
         children: children
       }, index);
     })
@@ -73,5 +79,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/Wizard.stories.js

@@ -1,7 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -9,8 +11,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
@@ -74,7 +74,8 @@ var Default = function Default() {
       mt: 4,
       children: (0, _jsxRuntime.jsx)(_.Wizard, {
         activeStep: 0,
-        steps: steps
+        steps: steps,
+        className: "vip-wizard-xyz"
       })
     })]
   });

package/build/system/Wizard/WizardStep.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.WizardStep = void 0;
 
@@ -11,8 +13,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**
@@ -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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.WizardStepHorizontal = void 0;
 
@@ -11,8 +13,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**
@@ -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/build/system/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 
 var _Avatar = require("./Avatar");
@@ -133,6 +135,4 @@ var _Wizard = require("./Wizard");
 
 exports.Wizard = _Wizard.Wizard;
 exports.WizardStep = _Wizard.WizardStep;
-exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;

package/build/system/theme/colors.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.dark = exports.light = void 0;
+exports.light = exports["default"] = exports.dark = void 0;
 
 /** @jsxImportSource theme-ui */
 

package/build/system/theme/index.js

@@ -1,12 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _colors = require("./colors");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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 _colors = require("./colors");
 
+/**
+ * Internal dependencies
+ */
 var textStyles = {
   h1: {
     fontSize: 5,
@@ -80,7 +85,7 @@ var _default = {
     useColorSchemeMediaQuery: false
   },
   initialColorModeName: 'light',
-  colors: _extends({
+  colors: (0, _extends2["default"])({
     text: _colors.light.grey['90'],
     heading: _colors.light.grey['100'],
     background: '#fdfdfd',
@@ -105,7 +110,7 @@ var _default = {
     backgroundMuted: _colors.light.grey['5']
   }, _colors.light, {
     modes: {
-      dark: _extends({
+      dark: (0, _extends2["default"])({
         text: _colors.dark.grey['90'],
         heading: _colors.dark.grey['100'],
         background: _colors.dark.grey['5'],
@@ -281,7 +286,7 @@ var _default = {
     }
   },
   styles: {
-    root: _extends({
+    root: (0, _extends2["default"])({
       fontFamily: 'body',
       lineHeight: 'body',
       fontWeight: 'body',

package/package.json

@@ -1,16 +1,17 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.9.6",
+	"version": "0.10.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
 		"format": "eslint . --fix",
-		"jest": "NODE_ENV=test jest --detectOpenHandles",
+		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
 		"lint": "eslint . -f json | eslines --quiet",
 		"storybook": "start-storybook -p 6006",
+		"dev": "npm run storybook",
 		"test": "npm run lint && npm run jest",
 		"watch": "npm run build -- --watch"
 	},
@@ -19,6 +20,7 @@
 		"@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",
@@ -41,7 +43,9 @@
 			"json",
 			"html"
 		],
-		"testURL": "http://localhost",
+		"testEnvironmentOptions": {
+			"url": "http://localhost"
+		},
 		"roots": [
 			"<rootDir>/src",
 			"<rootDir>/test"
@@ -53,14 +57,14 @@
 			"<rootDir>/test/setupAfterEnv.js"
 		],
 		"transformIgnorePatterns": [
-			".*.stories.js$"
+			"\\.stories.jsx$"
 		],
 		"transform": {
 			"\\.[jt]sx?$": "babel-jest"
 		}
 	},
 	"devDependencies": {
-		"@axe-core/react": "4.3.2",
+		"@axe-core/react": "4.4.3",
 		"@babel/cli": "^7.14.3",
 		"@babel/core": "7.14.0",
 		"@babel/eslint-parser": "7.15.7",
@@ -70,16 +74,17 @@
 		"@babel/plugin-syntax-class-static-block": "^7.14.5",
 		"@babel/plugin-syntax-private-property-in-object": "^7.14.5",
 		"@babel/plugin-transform-react-display-name": "^7.15.1",
+		"@babel/plugin-transform-runtime": "^7.18.5",
 		"@babel/preset-env": "^7.14.1",
 		"@babel/preset-flow": "7.13.13",
 		"@babel/preset-react": "^7.12.13",
 		"@babel/runtime": "7.14.0",
-		"@storybook/addon-actions": "5.3.21",
-		"@storybook/addon-links": "5.3.21",
-		"@storybook/addons": "5.3.21",
-		"@storybook/node-logger": "^6.4.0",
-		"@storybook/preset-create-react-app": "^3.2.0",
-		"@storybook/react": "5.3.21",
+		"@mdx-js/react": "^2.1.1",
+		"@storybook/addon-a11y": "^6.5.9",
+		"@storybook/addon-actions": "^6.5.9",
+		"@storybook/addon-essentials": "^6.5.9",
+		"@storybook/addon-links": "^6.5.9",
+		"@storybook/react": "^6.5.9",
 		"@testing-library/dom": "^8.11.1",
 		"@testing-library/jest-dom": "^5.15.0",
 		"@testing-library/react": "^12.1.2",
@@ -94,13 +99,20 @@
 		"eslint-plugin-jsx-a11y": "6.4.1",
 		"eslint-plugin-no-async-foreach": "0.1.1",
 		"eslint-plugin-react": "7.25.3",
+		"eslint-plugin-storybook": "^0.5.12",
 		"eslint-plugin-wpcalypso": "4.1.0",
 		"immer": ">=9.0.6",
-		"jest-axe": "5.0.1",
+		"jest": "^28.1.1",
+		"jest-axe": "6.0.0",
+		"jest-environment-jsdom": "^28.1.1",
+		"jsdom": "19.0.0",
+		"jsdom-global": "3.0.2",
 		"open-cli": "^7.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",
 		"react-refresh": "^0.9.0",
-		"react-scripts": "^4.0.3"
+		"theme-ui": "0.10.0"
 	}
 }

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

package/src/system/Badge/Badge.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -10,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Text } from '../';
 
-const Badge = ( { variant = 'blue', sx, ...props } ) => (
+const Badge = ( { variant = 'blue', sx, className = null, ...props } ) => (
 	<Text
 		as="span"
 		sx={ {
@@ -26,6 +27,7 @@ const Badge = ( { variant = 'blue', sx, ...props } ) => (
 			fontWeight: 'heading',
 			...sx,
 		} }
+		className={ classNames( 'vip-badge-component', className ) }
 		{ ...props }
 	/>
 );
@@ -33,6 +35,7 @@ const Badge = ( { variant = 'blue', sx, ...props } ) => (
 Badge.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Badge };

package/src/system/BlankState/BlankState.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -17,9 +18,10 @@ const BlankState = ( {
 	image,
 	imageAlt = 'Image representing the blank state',
 	title,
+	className = null,
 } ) => {
 	return (
-		<Box sx={{ textAlign: 'center', padding: 5 }}>
+		<Box sx={{ textAlign: 'center', padding: 5 }} className={ classNames( 'vip-blank-state-component', className ) }>
 			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt={imageAlt} />}
 			<Heading variant="h4">{title}</Heading>
 			<Text>{body}</Text>
@@ -35,6 +37,7 @@ BlankState.propTypes = {
 	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	imageAlt: PropTypes.string,
 	title: PropTypes.node,
+	className: PropTypes.any,
 };
 
 export { BlankState };

package/src/system/BlankState/BlankState.test.js

@@ -12,47 +12,48 @@ import { BlankState } from './BlankState';
 import { Link } from '../Link';
 
 // eslint-disable-next-line max-len
-const image = "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='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+const image =
+	"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='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
 
 const defaultProps = {
-	body: 'Sorry, there\'s nothing here yet.',
+	body: "Sorry, there's nothing here yet.",
 	cta: <Link as="a">Explore add-ons →</Link>,
 	image,
 	imageAlt: 'This is the image alt',
 	title: 'Power up your application',
 };
 
-describe( '<BlankState />', () => {
-	it( 'renders the BlankState component', async () => {
-		const { container } = render( <BlankState { ...defaultProps } /> );
+describe('<BlankState />', () => {
+	it('renders the BlankState component', async () => {
+		const { container } = render(<BlankState {...defaultProps} />);
 
-		expect( screen.getByText( defaultProps.body ) ).toBeInTheDocument();
-		expect( screen.getByText( defaultProps.title ) ).toBeInTheDocument();
-		expect( screen.getByText( 'Explore add-ons →' ) ).toBeInTheDocument();
-		expect( screen.getByAltText( defaultProps.imageAlt ) ).toBeInTheDocument();
+		expect(screen.getByText(defaultProps.body)).toBeInTheDocument();
+		expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
+		expect(screen.getByText('Explore add-ons →')).toBeInTheDocument();
+		expect(screen.getByAltText(defaultProps.imageAlt)).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
+		await expect(await axe(container)).toHaveNoViolations();
+	});
 
-	it( 'renders the BlankState component with default alt text for the given image', async () => {
+	it('renders the BlankState component with default alt text for the given image', async () => {
 		const props = { ...defaultProps, imageAlt: undefined };
-		const { container } = render( <BlankState { ...props } /> );
+		const { container } = render(<BlankState {...props} />);
 
-		expect( screen.getByAltText( 'Image representing the blank state' ) ).toBeInTheDocument();
+		expect(screen.getByAltText('Image representing the blank state')).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
+		await expect(await axe(container)).toHaveNoViolations();
+	});
 
-	it( 'renders the BlankState component with an icon', async () => {
+	it('renders the BlankState component with an icon', async () => {
 		const icon = <MdContentCopy title="this is an icon" />;
 		const props = { ...defaultProps, icon };
-		const { container } = render( <BlankState { ...props } /> );
+		const { container } = render(<BlankState {...props} />);
 
-		expect( screen.getByTitle( 'this is an icon' ) ).toBeInTheDocument();
+		expect(screen.getByTitle('this is an icon')).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
-} );
+		await expect(await axe(container)).toHaveNoViolations();
+	});
+});

package/src/system/Box/Box.js

@@ -3,11 +3,16 @@
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Box as ThemeBox } from 'theme-ui';
 
-const Box = forwardRef( ( props, ref ) => <ThemeBox ref={ref} {...props} /> );
+const Box = forwardRef( ( props, ref ) => <ThemeBox ref={ref} className={ classNames( 'vip-box-component', props.className ) } {...props} /> );
 
 Box.displayName = 'Box';
+Box.propTypes = {
+	className: PropTypes.any,
+};
 
 export { Box };

package/src/system/Button/Button.js

@@ -5,6 +5,7 @@
  */
 import { Button as ThemeButton } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const Button = ( { sx, ...props } ) => (
 	<ThemeButton
@@ -22,12 +23,14 @@ const Button = ( { sx, ...props } ) => (
 			},
 			...sx,
 		}}
+		className={ classNames( 'vip-button-component', props.className ) }
 		{...props}
 	/>
 );
 
 Button.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Button };

package/src/system/Card/Card.js

@@ -10,8 +10,9 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Box } from '..';
+import classNames from 'classnames';
 
-const Card = React.forwardRef( ( { variant = 'primary', sx = {}, ...props }, ref ) => {
+const Card = React.forwardRef( ( { variant = 'primary', sx = {}, className, ...props }, ref ) => {
 	return (
 		<Box
 			ref={ref}
@@ -21,6 +22,7 @@ const Card = React.forwardRef( ( { variant = 'primary', sx = {}, ...props }, ref
 				overflow: 'hidden',
 				...sx,
 			}}
+			className={ classNames( 'vip-card-component', className ) }
 			{...props}
 		/>
 	);
@@ -29,6 +31,7 @@ const Card = React.forwardRef( ( { variant = 'primary', sx = {}, ...props }, ref
 Card.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 Card.displayName = 'Card';

package/src/system/Code/Code.js

@@ -3,11 +3,12 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useRef, useState } from 'react';
 import { MdContentCopy } from 'react-icons/md';
 
-const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) => {
+const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...props } ) => {
 	const ref = useRef();
 
 	const codeDom = (
@@ -29,6 +30,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) =
 					userSelect: 'none',
 				},
 			} }
+			className={ classNames( 'vip-code-component', className ) }
 			{ ...props }
 		/>
 	);
@@ -88,6 +90,7 @@ Code.propTypes = {
 	prompt: PropTypes.bool,
 	showCopy: PropTypes.bool,
 	onCopy: PropTypes.func,
+	className: PropTypes.any,
 };
 
 export { Code };