@automattic/vip-design-system 0.9.4 → 0.10.0

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

@@ -0,0 +1,29 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { withAsyncPaginate } from 'react-select-async-paginate';
+
+/**
+  * Internal dependencies
+  */
+import { SearchSelect } from './SearchSelect';
+
+// Asynchronous search select to load paginated results asynchronously
+const CustomAsyncPaginate = withAsyncPaginate( SearchSelect );
+
+const AsyncSearchSelect = ( { options, ...props } ) => (
+	<CustomAsyncPaginate
+		SelectComponent={ SearchSelect }
+		loadOptions={ options }
+		{ ...props }
+	/>
+);
+
+AsyncSearchSelect.propTypes = {
+	options: PropTypes.array,
+};
+
+export { AsyncSearchSelect };

package/src/system/Form/SearchSelect.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
  */
 import { Flex, Text } from '..';
 
+// Option component
 export const Option = ( { label, isSelected, ...props } ) => (
 	<components.Option {...props}>
 		<Flex sx={{ alignItems: 'center' }}>
@@ -32,7 +33,45 @@ Option.propTypes = {
 	isSelected: PropTypes.bool,
 };
 
-export const DropdownIndicator = props => <MdExpandMore {...props} sx={{ color: 'text', mr: 2 }} />;
+// DropdownIndicator component
+export const DropdownIndicator = ( {
+	innerProps,
+	isFocused,
+	isDisabled,
+	clearValue,
+	cx,
+	getStyles,
+	getValue,
+	hasValue,
+	isMulti,
+	isRtl,
+	options,
+	selectProps,
+	setValue,
+	selectOption,
+	theme,
+	...props
+} ) => <MdExpandMore { ...props } sx={ { color: 'text', mr: 2 } } />;
+
+DropdownIndicator.propTypes = {
+	innerProps: PropTypes.object,
+	isFocused: PropTypes.bool,
+	isDisabled: PropTypes.bool,
+	clearValue: PropTypes.func,
+	cx: PropTypes.func,
+	getStyles: PropTypes.func,
+	getValue: PropTypes.func,
+	hasValue: PropTypes.bool,
+	isMulti: PropTypes.bool,
+	isRtl: PropTypes.bool,
+	options: PropTypes.array,
+	selectProps: PropTypes.object,
+	setValue: PropTypes.func,
+	selectOption: PropTypes.func,
+	theme: PropTypes.object,
+};
+
+// ClearIndicator component
 const ClearIndicator = ( { innerProps: { ref, ...restInnerProps }, ...props } ) => (
 	<MdClose ref={ref} {...restInnerProps} {...props} sx={{ color: 'text', mr: 2 }} />
 );
@@ -41,11 +80,12 @@ ClearIndicator.propTypes = {
 	innerProps: PropTypes.object,
 };
 
+// Parent SearchSelect component
 const SearchSelect = props => (
 	<Select
-		{...props}
+		{ ...props }
 		classNamePrefix={ 'select' }
-		components={{ Option, DropdownIndicator, ClearIndicator }}
+		components={ { Option, DropdownIndicator, ClearIndicator } }
 		sx={ {
 			'.select__control': {
 				background: 'none',

package/src/system/Form/Select.js

@@ -11,8 +11,10 @@ import PropTypes from 'prop-types';
  */
 import { SearchSelect } from './SearchSelect';
 import { InlineSelect } from './InlineSelect';
+import { AsyncSearchSelect } from './AsyncSearchSelect';
 
-const Select = ( { isMulti = false, isInline, options, label, isSearch, usePortal, ...props } ) => {
+const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch, usePortal, ...props } ) => {
+	let Component;
 	const selectRef = React.useRef();
 	const portalProps = {};
 
@@ -22,14 +24,25 @@ const Select = ( { isMulti = false, isInline, options, label, isSearch, usePorta
 		portalProps.styles = { menuPortal: base => ( { ...base, position: 'fixed' } ) };
 	}
 
-	const Component = isInline ? InlineSelect : SearchSelect;
+	switch ( true ) {
+		case isInline:
+			Component = InlineSelect;
+			break;
+		case isAsync:
+			Component = AsyncSearchSelect;
+			break;
+		default:
+			Component = SearchSelect;
+			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 = {
 	isInline: PropTypes.bool,
 	isMulti: PropTypes.bool,
+	isAsync: PropTypes.bool,
 	isSearch: PropTypes.bool,
 	label: PropTypes.string,
 	options: PropTypes.array,

package/src/system/Form/Select.stories.js

@@ -105,6 +105,36 @@ export const Inline = () => {
 	);
 };
 
+export const Async = () => {
+	const [ value, setValue ] = useState( [] );
+	const loadOptions = async () => new Promise( resolve => {
+		setTimeout( () => {
+			resolve( {
+				options: [
+					...options,
+					{ value: 'newvanilla', label: 'New Vanilla' },
+				],
+			} );
+		}, 2000 );
+	} );
+
+	return (
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="Async Select"
+				value={value}
+				isAsync
+				usePortal
+				loadOptions={ loadOptions }
+				noneLabel="Everyone"
+				placeholder="Load async..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
+		</Box>
+	);
+};
+
 export const DropdownMenu = () => {
 	return (
 		<Box sx={{ mr: 2, width: 200 }}>

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+  * Internal dependencies
+  */
+import { Select } from './Select';
+
+describe( '<Select />', () => {
+	it( 'renders the Select component with the specified placeholder', () => {
+		render(
+			<Select
+				inputId={ 'search-select' }
+				placeholder={ 'Search...' }
+			/>
+		);
+
+		// Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
+		const placeholder = screen.getByText( 'Search...' );
+
+		expect( placeholder ).toBeInTheDocument();
+	} );
+
+	it( 'renders the Select component with accessibility props', async () => {
+		const { container } = render(
+			<Select
+				inputId={ 'search-select' }
+				aria-label={ 'Search or select from the dropdown list' }
+			/>
+		);
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

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',

package/src/system/Tabs/Tabs.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -10,8 +11,9 @@ import PropTypes from 'prop-types';
  */
 import { Flex } from '..';
 
-const Tabs = ( { sx, ...props } ) => (
+const Tabs = ( { className = null, sx, ...props } ) => (
 	<Flex
+		className={ classNames( 'vip-tabs-component', className ) }
 		sx={{
 			borderBottom: '1px solid',
 			borderColor: 'border',
@@ -25,8 +27,9 @@ const Tabs = ( { sx, ...props } ) => (
 );
 
 Tabs.propTypes = {
-	variant: PropTypes.string,
+	className: PropTypes.any,
 	sx: PropTypes.object,
+	variant: PropTypes.string,
 };
 
 export { Tabs };