@automattic/vip-design-system 0.9.6 → 0.10.2

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,13 +56,15 @@ 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',
 				cursor: disabled ? 'auto' : 'pointer',
 				textDecoration: 'none',
 				color: 'inherit',
-				'&:hover': {
+				'&:hover': ! disabled && {
 					backgroundColor: 'hover',
 				},
 				...inlineStyles,
@@ -102,7 +107,9 @@ const OptionRow = ( {
 				{subTitle && <Text sx={{ mb: 1, color: 'muted' }}>{subTitle}</Text>}
 				{body && <Text sx={{ mb: 0 }}>{body}</Text>}
 			</Box>
-			<Box>{meta ? meta : <MdArrowForward size={24} />}</Box>
+			{ ( false !== meta && '' !== meta ) && (
+				<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={24} /> }</Box>
+			) }
 		</Grid>
 	);
 };
@@ -119,6 +126,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 → OptionRow.stories.jsx}

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

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

@@ -0,0 +1,49 @@
+/**
+ * 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();
+	} );
+
+	it( 'renders a disabled OptionRow', async () => {
+		// eslint-disable-next-line max-len
+		const image1 = "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='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
+
+		const { container } = render(
+			<OptionRow
+				image={image1}
+				label="Option Row"
+				subTitle="Mostly used to link off to other pages."
+				as="a"
+				disabled
+				meta=""
+			/>
+		);
+
+		expect( screen.getByAltText( 'Image representing the list item' ).closest( 'div' ) ).toHaveStyle( { background: 'none' } );
+		expect( screen.queryByTestId( 'meta' ) ).not.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/Table/Table.js

@@ -6,7 +6,7 @@
 import PropTypes from 'prop-types';
 
 const Table = ( { sx, ...props } ) => (
-	<div sx={ { overflowX: 'auto', pb: 300, mb: -300 } }>
+	<div sx={ { overflowX: 'auto' } }>
 		<table
 			sx={ { width: '100%', minWidth: 1024, ...sx } }
 			cellPadding={ 0 }

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

package/src/system/Text/Text.js

@@ -5,8 +5,9 @@
  */
 import { Text as ThemeText } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Text = ( { sx, ...props } ) => (
+const Text = ( { sx, className = null, ...props } ) => (
 	<ThemeText
 		as="p"
 		sx={{
@@ -14,12 +15,14 @@ const Text = ( { sx, ...props } ) => (
 			marginBottom: 2,
 			...sx,
 		}}
+		className={ classNames( 'vip-text-component', className ) }
 		{...props}
 	/>
 );
 
 Text.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Text };

package/src/system/Time/index.js

@@ -5,6 +5,7 @@
  */
 import { Text } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const formatter = new Intl.RelativeTimeFormat( undefined, {
 	numeric: 'auto',
@@ -31,7 +32,7 @@ function formatTimeAgo( date ) {
 	}
 }
 
-const Time = ( { time, relativeTime = false, timeOnly = false, ...props } ) => {
+const Time = ( { time, relativeTime = false, timeOnly = false, className = null, ...props } ) => {
 	let formattedTime;
 	if ( relativeTime ) {
 		formattedTime = formatTimeAgo( time );
@@ -46,6 +47,7 @@ const Time = ( { time, relativeTime = false, timeOnly = false, ...props } ) => {
 			title={time.toLocaleString( 'sv', { timeZoneName: 'short' } )}
 			datetime={time}
 			as="time"
+			className={ classNames( 'vip-time-component', className ) }
 			{...props}
 		>
 			{formattedTime}
@@ -57,6 +59,7 @@ Time.propTypes = {
 	time: PropTypes.string,
 	timeOnly: PropTypes.bool,
 	relativeTime: PropTypes.bool,
+	className: PropTypes.any,
 };
 
 export { Time };

package/src/system/Timeline/Timeline.js

@@ -6,6 +6,7 @@
 import { Flex } from 'theme-ui';
 import { MdWatchLater } from 'react-icons/md';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const VerticalLine = () => {
 	return (
@@ -20,8 +21,8 @@ const VerticalLine = () => {
 	);
 };
 
-const Timeline = ( { time, first = false, last = false, ...props } ) => (
-	<Flex { ...props }>
+const Timeline = ( { time, first = false, last = false, className = null, ...props } ) => (
+	<Flex className={ classNames( 'vip-timeline-component', className ) } { ...props }>
 		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
 			{ ! first && (
 				<VerticalLine />
@@ -41,6 +42,7 @@ Timeline.propTypes = {
 	first: PropTypes.bool,
 	time: PropTypes.node,
 	last: PropTypes.bool,
+	className: PropTypes.any,
 };
 
 export { Timeline };

package/src/system/Wizard/Wizard.js

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { MdArrowForward } from 'react-icons/md';
 
 /**
@@ -12,9 +13,9 @@ import { MdArrowForward } from 'react-icons/md';
  */
 import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 
-const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
+const Wizard = ( { steps, activeStep, variant, completed = [], className = null, ...props } ) => {
 	return (
-		<Box>
+		<Box className={ classNames( 'vip-wizard-component', className ) }>
 			{variant === 'horizontal' ? (
 				<Box>
 					<Flex
@@ -26,6 +27,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
 						{steps.map( ( { title, subTitle }, index ) => (
 							<React.Fragment key={index}>
 								<WizardStepHorizontal
+									order={index + 1}
 									active={index === activeStep}
 									title={title}
 									subTitle={subTitle}
@@ -44,6 +46,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
 						subTitle={subTitle}
 						complete={completed.includes( index )}
 						key={index}
+						order={index + 1}
 					>
 						{children}
 					</WizardStep>
@@ -58,6 +61,7 @@ Wizard.propTypes = {
 	activeStep: PropTypes.number,
 	variant: PropTypes.string,
 	completed: PropTypes.array,
+	className: PropTypes.any,
 };
 
 export { Wizard };

package/src/system/Wizard/{Wizard.stories.js → Wizard.stories.jsx}

@@ -51,7 +51,7 @@ export const Default = () => {
 				</Box>
 			</Flex>
 			<Box mt={4}>
-				<Wizard activeStep={0} steps={steps} />
+				<Wizard activeStep={0} steps={steps} className="vip-wizard-xyz" />
 			</Box>
 		</React.Fragment>
 	);

package/src/system/Wizard/WizardStep.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Card, Heading, Text } from '..';
 
-const WizardStep = ( { title, subTitle, complete = false, children, active } ) => {
+const WizardStep = ( { title, subTitle, complete = false, children, active, order } ) => {
 	let borderLeftColor = 'border';
 
 	if ( complete ) {
@@ -44,6 +44,8 @@ const WizardStep = ( { title, subTitle, complete = false, children, active } ) =
 				borderColor: active ? 'primary' : 'border',
 				borderLeftColor: borderLeftColor,
 			}}
+			data-step={ order }
+			data-active={ active || undefined }
 		>
 			<Heading
 				variant="h4"
@@ -69,7 +71,8 @@ WizardStep.propTypes = {
 	subTitle: PropTypes.node,
 	complete: PropTypes.bool,
 	active: PropTypes.bool,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.node,
+	order: PropTypes.number.isRequired,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Heading } from '..';
 
-const WizardStepHorizontal = ( { title, active } ) => {
+const WizardStepHorizontal = ( { title, active, order } ) => {
 	return (
 		<Heading
 			variant="h4"
@@ -21,6 +21,8 @@ const WizardStepHorizontal = ( { title, active } ) => {
 				alignItems: 'center',
 				color: active ? 'heading' : 'muted',
 			}}
+			data-step={ order }
+			data-active={ active || undefined }
 		>
 			<MdCheckCircle sx={{ mr: 2 }} />
 			{title}
@@ -32,6 +34,7 @@ WizardStepHorizontal.propTypes = {
 	title: PropTypes.node,
 	subTitle: PropTypes.node,
 	active: PropTypes.bool,
+	order: PropTypes.number.isRequired,
 };
 
 export { WizardStepHorizontal };