@automattic/vip-design-system 0.9.6 → 0.10.0

package/build/system/Wizard/Wizard.stories.js

@@ -1,43 +1,24 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Wizard, Flex, Box, Heading, Label, Input, Button } from '..';
+export default {
   title: 'Wizard',
-  component: _.Wizard
+  component: Wizard
 };
-exports["default"] = _default;
-
-var Default = function Default() {
+export var Default = function Default() {
   var steps = [{
     title: 'Choose Domain',
     subTitle: 'You can bring a domain name you already own, or buy a new one.',
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
-        children: "Domain"
-      }), (0, _jsxRuntime.jsx)(_.Input, {
-        autoFocus: true,
-        placeholder: "yourdomain.com"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
-        children: "Continue"
-      })]
-    })
+    children: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Domain"), /*#__PURE__*/React.createElement(Input, {
+      autoFocus: true,
+      placeholder: "yourdomain.com"
+    }), /*#__PURE__*/React.createElement(Button, null, "Continue"))
   }, {
     title: 'Configure DNS'
   }, {
@@ -45,39 +26,30 @@ var Default = function Default() {
   }, {
     title: 'Verify Domain'
   }];
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Flex, {
-      sx: {
-        alignItems: 'center'
-      },
-      children: (0, _jsxRuntime.jsx)(_.Box, {
-        sx: {
-          flex: '1 1 auto'
-        },
-        children: (0, _jsxRuntime.jsxs)(_.Heading, {
-          variant: "h1",
-          sx: {
-            display: 'flex',
-            alignItems: 'center',
-            mb: 1
-          },
-          children: ["Add Domain:", ' ', (0, _jsxRuntime.jsx)("span", {
-            sx: {
-              color: 'muted',
-              ml: 2
-            },
-            children: "Production"
-          })]
-        })
-      })
-    }), (0, _jsxRuntime.jsx)(_.Box, {
-      mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Wizard, {
-        activeStep: 0,
-        steps: steps
-      })
-    })]
-  });
-};
-
-exports.Default = Default;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: '1 1 auto'
+    }
+  }, /*#__PURE__*/React.createElement(Heading, {
+    variant: "h1",
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      mb: 1
+    }
+  }, "Add Domain:", ' ', /*#__PURE__*/React.createElement("span", {
+    sx: {
+      color: 'muted',
+      ml: 2
+    }
+  }, "Production")))), /*#__PURE__*/React.createElement(Box, {
+    mt: 4
+  }, /*#__PURE__*/React.createElement(Wizard, {
+    activeStep: 0,
+    steps: steps
+  })));
+};

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.6",
+	"version": "0.10.0",
 	"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,

package/src/system/OptionRow/OptionRow.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Badge, Box, Grid, Heading, Text } from '..';
+import classNames from 'classnames';
 
 const OptionRow = ( {
 	image,
@@ -24,6 +25,8 @@ const OptionRow = ( {
 	to,
 	small = false,
 	disabled = false,
+	order = null,
+	className = null,
 	...props
 } ) => {
 	const mergedCard = disabled
@@ -53,6 +56,8 @@ const OptionRow = ( {
 			to={to}
 			columns={[ 1, 1, 'auto 1fr auto' ]}
 			gap={[ 3, 3, `${ small ? 3 : 4 }` ]}
+			data-order={ order || undefined }
+			className={ classNames( 'vip-option-row-component', className ) }
 			{...props}
 			sx={{
 				alignItems: 'center',
@@ -119,6 +124,8 @@ OptionRow.propTypes = {
 	to: PropTypes.string,
 	small: PropTypes.bool,
 	disabled: PropTypes.bool,
+	order: PropTypes.number,
+	className: PropTypes.any,
 };
 
 export { OptionRow };

package/src/system/OptionRow/OptionRow.stories.js

@@ -26,6 +26,7 @@ export const Default = () => (
 			label="Option Row"
 			subTitle="Mostly used to link off to other pages."
 			as="a"
+			order={ 2 }
 		/>
 	</Box>
 );

package/src/system/OptionRow/OptionRow.test.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+* Internal dependencies
+*/
+import { OptionRow } from './OptionRow';
+
+describe( '<OptionRow />', () => {
+	it( 'renders the OptionRow', async () => {
+		const { container } = render(
+			<OptionRow
+				label="Option Row"
+				subTitle="Mostly used to link off to other pages."
+				as="a"
+			/>
+		);
+
+		expect( screen.getByText( 'Mostly used to link off to other pages.' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Progress/Progress.js

@@ -11,10 +11,12 @@ import PropTypes from 'prop-types';
  */
 import { Spinner } from '../Spinner';
 import { Box, Heading, Text, Flex } from '../';
+import classNames from 'classnames';
 
-const Progress = ( { steps, activeStep, sx, ...props } ) => (
+const Progress = ( { steps, activeStep, sx, className, ...props } ) => (
 	<Box>
 		<ThemeProgress
+			className={ classNames( 'vip-progress-component', className ) }
 			{ ...props }
 			sx={ {
 				color: 'primary',
@@ -39,6 +41,7 @@ Progress.propTypes = {
 	steps: PropTypes.array,
 	activeStep: PropTypes.number,
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Progress };

package/src/system/ResourceList/ResourceList.js

@@ -59,7 +59,7 @@ const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) =>
 		itemsList.map( ( item, index ) => <StyledListItem key={index}>{renderItem( item )}</StyledListItem> );
 
 	return (
-		<Box as="ul" sx={{ listStyleType: 'none', m: 0, p: 0 }}>
+		<Box as="ul" sx={{ listStyleType: 'none', m: 0, p: 0 }} className="vip-resource-list-component">
 			{groupedByDay
 				? Object.keys( groupedItems ).map( ( groupName, index ) => (
 					<Box sx={{ mb: 4 }} key={index}>

package/src/system/Spinner/Spinner.js

@@ -5,20 +5,23 @@
  */
 import { Spinner as ThemeSpinner } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Spinner = ( { sx, ...props } ) => (
+const Spinner = ( { sx, className = null, ...props } ) => (
 	<ThemeSpinner
 		strokeWidth={2}
 		sx={{
 			fill: 'none',
 			color: 'primary',
 		}}
+		className={ classNames( 'vip-spinner-component', className ) }
 		{...props}
 	/>
 );
 
 Spinner.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Spinner };

package/src/system/Tabs/TabItem.js

@@ -15,6 +15,7 @@ const TabItem = ( { active = false, sx, ...props } ) => (
 		variant="h4"
 		as="button"
 		tabIndex="0"
+		data-active={ active || undefined }
 		sx={ {
 			cursor: 'pointer',
 			background: 'none',