@automattic/vip-design-system 0.9.5 → 0.10.1

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

@@ -9,9 +9,11 @@ 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"];
+var _excluded = ["time", "first", "last", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -36,9 +38,13 @@ var Timeline = function Timeline(_ref) {
       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({}, props, {
+  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',
@@ -46,6 +52,7 @@ var Timeline = function Timeline(_ref) {
         alignItems: 'center'
       },
       children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
+        "aria-hidden": true,
         sx: {
           color: 'border'
         },
@@ -65,5 +72,6 @@ exports.Timeline = Timeline;
 Timeline.propTypes = {
   first: _propTypes["default"].bool,
   time: _propTypes["default"].node,
-  last: _propTypes["default"].bool
+  last: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

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.5",
+	"version": "0.10.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -19,6 +19,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",

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

package/src/system/ConfirmationDialog/ConfirmationDialog.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -11,8 +12,8 @@ import React from 'react';
  */
 import { Dialog, Box, Heading, Text, Flex, Button } from '../';
 
-const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', onConfirm } ) => (
-	<Box p={ 4 }>
+const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', onConfirm, className = null } ) => (
+	<Box p={ 4 } className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Heading variant="h3" sx={ { mb: 2 } }>
 			{ title }
 		</Heading>
@@ -40,6 +41,7 @@ ConfirmationDialogContent.propTypes = {
 	label: PropTypes.string,
 	onClose: PropTypes.func,
 	onConfirm: PropTypes.func,
+	className: PropTypes.any,
 };
 
 const ConfirmationDialog = ( { trigger, onConfirm, needsConfirm = true, ...props } ) => {

package/src/system/Dialog/Dialog.js

@@ -46,7 +46,7 @@ const Dialog = ( { trigger, position = 'left', startOpen = false, content, disab
 	};
 
 	return (
-		<div onClick={ e => e.stopPropagation() } sx={ { position: 'relative' } } ref={ dialogRef }>
+		<div onClick={ e => e.stopPropagation() } sx={ { position: 'relative' } } ref={ dialogRef } className="vip-dialog-component">
 			<DialogTrigger
 				tabIndex="0"
 				sx={ { display: 'inline' } }

package/src/system/Form/Select.js

@@ -36,7 +36,7 @@ const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch,
 			break;
 	}
 
-	return <div ref={selectRef}><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
+	return <div ref={selectRef} className="vip-select-component"><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
 };
 
 Select.propTypes = {

package/src/system/Form/Toggle.js

@@ -3,10 +3,11 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const Toggle = ( { name = 'toggle', ...props } ) => (
-	<CheckBoxWrapper>
+const Toggle = ( { name = 'toggle', className = null, ...props } ) => (
+	<CheckBoxWrapper className={ classNames( 'vip-checkbox-component', className ) }>
 		<CheckBox name={name} id={name} type="checkbox" {...props} />
 		<CheckBoxLabel htmlFor={name} />
 	</CheckBoxWrapper>
@@ -14,6 +15,7 @@ const Toggle = ( { name = 'toggle', ...props } ) => (
 
 Toggle.propTypes = {
 	name: PropTypes.string,
+	className: PropTypes.any,
 };
 
 export { Toggle };

package/src/system/Heading/Heading.js

@@ -5,8 +5,9 @@
  */
 import { Heading as ThemeHeading } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Heading = ( { variant = 'h3', sx, ...props } ) => (
+const Heading = ( { variant = 'h3', sx, className = null, ...props } ) => (
 	<ThemeHeading
 		as={variant}
 		sx={{
@@ -15,6 +16,7 @@ const Heading = ( { variant = 'h3', sx, ...props } ) => (
 			variant: `text.${ variant }`,
 			...sx,
 		}}
+		className={ classNames( 'vip-heading-component', className ) }
 		{...props}
 	/>
 );
@@ -22,6 +24,7 @@ const Heading = ( { variant = 'h3', sx, ...props } ) => (
 Heading.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Heading };

package/src/system/Notice/Notice.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 
@@ -36,7 +37,7 @@ NoticeIcon.propTypes = {
 	variant: PropTypes.string,
 };
 
-const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, ...props } ) => {
+const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, className = null, ...props } ) => {
 	let color = 'yellow';
 
 	switch ( variant ) {
@@ -66,6 +67,7 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 				},
 				...sx,
 			} }
+			className={ classNames( 'vip-notice-component', className ) }
 			{ ...props }
 		>
 			<Flex sx={ {
@@ -93,6 +95,7 @@ Notice.propTypes = {
 	sx: PropTypes.object,
 	title: PropTypes.node,
 	variant: PropTypes.string,
+	className: PropTypes.any,
 };
 
 export { Notice };

package/src/system/Notification/Notification.js

@@ -13,6 +13,7 @@ import { Box, Button, Card, Flex, Heading, Text } from '../';
 
 const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card
+		className="vip-notification-component"
 		sx={{
 			boxShadow: 'medium',
 			width: 320,