@automattic/vip-design-system 0.9.4 → 0.10.0

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/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/AsyncSearchSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.AsyncSearchSelect = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactSelectAsyncPaginate = require("react-select-async-paginate");
+
+var _SearchSelect = require("./SearchSelect");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["options"];
+
+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; }
+
+// Asynchronous search select to load paginated results asynchronously
+var CustomAsyncPaginate = (0, _reactSelectAsyncPaginate.withAsyncPaginate)(_SearchSelect.SearchSelect);
+
+var AsyncSearchSelect = function AsyncSearchSelect(_ref) {
+  var options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return (0, _jsxRuntime.jsx)(CustomAsyncPaginate, _extends({
+    SelectComponent: _SearchSelect.SearchSelect,
+    loadOptions: options
+  }, props));
+};
+
+exports.AsyncSearchSelect = AsyncSearchSelect;
+AsyncSearchSelect.propTypes = {
+  options: _propTypes["default"].array
+};

package/build/system/Form/SearchSelect.js

@@ -14,8 +14,9 @@ var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["label", "isSelected"],
-    _excluded2 = ["ref"],
-    _excluded3 = ["innerProps"];
+    _excluded2 = ["innerProps", "isFocused", "isDisabled", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectProps", "setValue", "selectOption", "theme"],
+    _excluded3 = ["ref"],
+    _excluded4 = ["innerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,6 +28,7 @@ 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; }
 
+// Option component
 var Option = function Option(_ref) {
   var label = _ref.label,
       isSelected = _ref.isSelected,
@@ -65,9 +67,26 @@ exports.Option = Option;
 Option.propTypes = {
   label: _propTypes["default"].string,
   isSelected: _propTypes["default"].bool
-};
+}; // DropdownIndicator component
+
+var DropdownIndicator = function DropdownIndicator(_ref2) {
+  var innerProps = _ref2.innerProps,
+      isFocused = _ref2.isFocused,
+      isDisabled = _ref2.isDisabled,
+      clearValue = _ref2.clearValue,
+      cx = _ref2.cx,
+      getStyles = _ref2.getStyles,
+      getValue = _ref2.getValue,
+      hasValue = _ref2.hasValue,
+      isMulti = _ref2.isMulti,
+      isRtl = _ref2.isRtl,
+      options = _ref2.options,
+      selectProps = _ref2.selectProps,
+      setValue = _ref2.setValue,
+      selectOption = _ref2.selectOption,
+      theme = _ref2.theme,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
-var DropdownIndicator = function DropdownIndicator(props) {
   return (0, _jsxRuntime.jsx)(_md.MdExpandMore, _extends({}, props, {
     sx: {
       color: 'text',
@@ -77,12 +96,29 @@ var DropdownIndicator = function DropdownIndicator(props) {
 };
 
 exports.DropdownIndicator = DropdownIndicator;
-
-var ClearIndicator = function ClearIndicator(_ref2) {
-  var _ref2$innerProps = _ref2.innerProps,
-      ref = _ref2$innerProps.ref,
-      restInnerProps = _objectWithoutPropertiesLoose(_ref2$innerProps, _excluded2),
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+DropdownIndicator.propTypes = {
+  innerProps: _propTypes["default"].object,
+  isFocused: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  clearValue: _propTypes["default"].func,
+  cx: _propTypes["default"].func,
+  getStyles: _propTypes["default"].func,
+  getValue: _propTypes["default"].func,
+  hasValue: _propTypes["default"].bool,
+  isMulti: _propTypes["default"].bool,
+  isRtl: _propTypes["default"].bool,
+  options: _propTypes["default"].array,
+  selectProps: _propTypes["default"].object,
+  setValue: _propTypes["default"].func,
+  selectOption: _propTypes["default"].func,
+  theme: _propTypes["default"].object
+}; // ClearIndicator component
+
+var ClearIndicator = function ClearIndicator(_ref3) {
+  var _ref3$innerProps = _ref3.innerProps,
+      ref = _ref3$innerProps.ref,
+      restInnerProps = _objectWithoutPropertiesLoose(_ref3$innerProps, _excluded3),
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
 
   return (0, _jsxRuntime.jsx)(_md.MdClose, _extends({
     ref: ref
@@ -96,7 +132,7 @@ var ClearIndicator = function ClearIndicator(_ref2) {
 
 ClearIndicator.propTypes = {
   innerProps: _propTypes["default"].object
-};
+}; // Parent SearchSelect component
 
 var SearchSelect = function SearchSelect(props) {
   return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {

package/build/system/Form/Select.js

@@ -11,9 +11,11 @@ var _SearchSelect = require("./SearchSelect");
 
 var _InlineSelect = require("./InlineSelect");
 
+var _AsyncSearchSelect = require("./AsyncSearchSelect");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isMulti", "isInline", "options", "label", "isSearch", "usePortal"];
+var _excluded = ["isMulti", "isInline", "isAsync", "options", "label", "isSearch", "usePortal"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,12 +27,15 @@ var Select = function Select(_ref) {
   var _ref$isMulti = _ref.isMulti,
       isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
       isInline = _ref.isInline,
+      isAsync = _ref.isAsync,
       options = _ref.options,
       label = _ref.label,
       isSearch = _ref.isSearch,
       usePortal = _ref.usePortal,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var Component;
+
   var selectRef = _react["default"].useRef();
 
   var portalProps = {};
@@ -48,9 +53,23 @@ var Select = function Select(_ref) {
     };
   }
 
-  var Component = isInline ? _InlineSelect.InlineSelect : _SearchSelect.SearchSelect;
+  switch (true) {
+    case isInline:
+      Component = _InlineSelect.InlineSelect;
+      break;
+
+    case isAsync:
+      Component = _AsyncSearchSelect.AsyncSearchSelect;
+      break;
+
+    default:
+      Component = _SearchSelect.SearchSelect;
+      break;
+  }
+
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
+    className: "vip-select-component",
     children: (0, _jsxRuntime.jsx)(Component, _extends({
       isMulti: isMulti,
       label: label,
@@ -63,6 +82,7 @@ exports.Select = Select;
 Select.propTypes = {
   isInline: _propTypes["default"].bool,
   isMulti: _propTypes["default"].bool,
+  isAsync: _propTypes["default"].bool,
   isSearch: _propTypes["default"].bool,
   label: _propTypes["default"].string,
   options: _propTypes["default"].array,

package/build/system/Form/Select.test.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Select = require("./Select");
+
+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('<Select />', function () {
+  it('renders the Select component with the specified placeholder', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {
+      inputId: 'search-select',
+      placeholder: 'Search...'
+    })); // Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
+
+    var placeholder = _react.screen.getByText('Search...');
+
+    expect(placeholder).toBeInTheDocument();
+  });
+  it('renders the Select component with accessibility props', /*#__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)(_Select.Select, {
+              inputId: 'search-select',
+              "aria-label": 'Search or select from the dropdown list'
+            })), container = _render.container;
+            _context.t0 = expect;
+            _context.next = 4;
+            return (0, _jestAxe.axe)(container);
+
+          case 4:
+            _context.t1 = _context.sent;
+            (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

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