@automattic/vip-design-system 0.19.1 → 0.20.0

package/src/system/Heading/Heading.js

@@ -3,24 +3,30 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Heading as ThemeHeading } from 'theme-ui';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Heading = ( { variant = 'h3', sx, className = null, ...props } ) => (
-	<ThemeHeading
-		as={ variant }
-		sx={ {
-			color: 'heading',
-			// pass variant prop to sx
-			variant: `text.${ variant }`,
-			...sx,
-		} }
-		className={ classNames( 'vip-heading-component', className ) }
-		{ ...props }
-	/>
+const Heading = React.forwardRef(
+	( { variant = 'h3', sx, className = null, ...props }, forwardRef ) => (
+		<ThemeHeading
+			as={ variant }
+			sx={ {
+				color: 'heading',
+				// pass variant prop to sx
+				variant: `text.${ variant }`,
+				...sx,
+			} }
+			className={ classNames( 'vip-heading-component', className ) }
+			ref={ forwardRef }
+			{ ...props }
+		/>
+	)
 );
 
+Heading.displayName = 'Heading';
+
 Heading.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,

package/src/system/Heading/Heading.stories.jsx

@@ -15,6 +15,5 @@ export const Default = () => (
 		<Heading variant="h3">Heading Three</Heading>
 		<Heading variant="h4">Heading Four</Heading>
 		<Heading variant="h5">Heading Five</Heading>
-		<Heading variant="caps">Heading Caps</Heading>
 	</Box>
 );

package/src/system/Link/Link.js

@@ -21,6 +21,7 @@ const Link = ( { active = false, sx, ...props } ) => (
 			},
 			'&:hover, &:focus': {
 				color: 'links.hover',
+				textDecoration: 'none',
 			},
 			'&:focus': theme => theme.outline,
 			'&:focus-visible': theme => theme.outline,

package/src/system/NewForm/FormSelect.test.js

@@ -21,10 +21,48 @@ const defaultProps = {
 	options,
 };
 
+const groupedProps = {
+	...defaultProps,
+	options: [
+		{
+			label: 'Group name',
+			options: [ options[ 0 ] ],
+		},
+		{
+			label: 'Another Group name',
+			options: [ options[ 1 ], options[ 2 ] ],
+		},
+	],
+};
+
 describe( '<FormSelect />', () => {
 	it( 'renders the FormSelect component', async () => {
 		const { container } = render( <FormSelect id="my_desert_list" { ...defaultProps } /> );
 
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the FormSelect component with optgroup when options are grouped', async () => {
+		const { container } = render( <FormSelect id="my_desert_list" { ...groupedProps } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'group' ) ).toHaveLength( 2 );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the FormSelect component when isInline is true', async () => {
+		const { container } = render( <FormSelect id="my_desert_list" isInline { ...defaultProps } /> );
+
 		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
 

package/src/system/Progress/Progress.js

@@ -3,45 +3,74 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Progress as ThemeProgress } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { Spinner } from '../Spinner';
-import { Box, Heading, Text, Flex } from '../';
-import classNames from 'classnames';
+import { MdCheck } from 'react-icons/md';
+import { Box, Text, Flex } from '../';
+
+const prefix = 'vip-progress-component';
+const uniqueID = () => Math.random().toString( 36 ).substring( 7 );
+
+const Progress = React.forwardRef(
+	( { steps, activeStep, sx, forLabel = '', className, ...props }, forwardRef ) => {
+		const stepsTotal = steps.length;
+		const isDone = activeStep === stepsTotal - 1;
+		const instance = uniqueID();
+		const htmlFor = `${ prefix }-${ instance }`;
+		const currentValue = activeStep + 1;
 
-const Progress = ( { steps, activeStep, sx, className, ...props } ) => (
-	<Box>
-		<ThemeProgress
-			className={ classNames( 'vip-progress-component', className ) }
-			{ ...props }
-			sx={ {
-				color: 'primary',
-				...sx,
-			} }
-			max={ steps.length }
-			value={ activeStep + 1 }
-		/>
-		{ steps && (
-			<Flex sx={ { alignItems: 'center', mt: 2 } }>
-				<Spinner size={ 24 } />
-				<Heading variant="h4" sx={ { ml: 2, mb: 0 } }>
-					{ `${ activeStep + 1 } of ${ steps.length }` }:{ ' ' }
-					<Text as="span" sx={ { color: 'muted' } }>
-						{ steps[ activeStep ] }
-					</Text>
-				</Heading>
-			</Flex>
-		) }
-	</Box>
+		return (
+			<Box className={ classNames( prefix, className ) }>
+				<ThemeProgress
+					sx={ {
+						color: 'primary',
+						backgroundColor: 'background',
+						...sx,
+					} }
+					max={ stepsTotal }
+					value={ currentValue }
+					id={ htmlFor }
+					aria-label={ forLabel }
+					ref={ forwardRef }
+					{ ...props }
+				/>
+
+				{ steps && (
+					<Flex
+						sx={ { alignItems: 'center', mt: 2 } }
+						aria-live="polite"
+						aria-atomic="true"
+						aria-describedby={ htmlFor }
+					>
+						{ ! isDone && <Spinner size={ 24 } aria-hidden="true" /> }
+						{ isDone && <MdCheck size={ 24 } aria-hidden="true" /> }
+
+						<Text sx={ { ml: 2, mb: 0 } }>
+							<strong>{ `${ currentValue } of ${ stepsTotal }` }: </strong>
+							<Text as="span" sx={ { color: 'muted' } }>
+								{ steps[ activeStep ] }
+							</Text>
+						</Text>
+					</Flex>
+				) }
+			</Box>
+		);
+	}
 );
 
+Progress.displayName = 'Progress';
+
 Progress.propTypes = {
 	steps: PropTypes.array,
 	activeStep: PropTypes.number,
+	forLabel: PropTypes.node,
 	sx: PropTypes.object,
 	className: PropTypes.any,
 };

package/src/system/Progress/Progress.stories.jsx

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import React, { useEffect } from 'react';
 import { Progress } from '..';
 
 export default {
@@ -8,11 +9,17 @@ export default {
 	component: Progress,
 };
 
-export const Default = () => (
-	<Progress
-		max={ 1 }
-		value={ 1 / 2 }
-		steps={ [ 'Downloading Data', 'Importing Data...', 'Finalizing' ] }
-		activeStep={ 1 }
-	/>
-);
+export const Default = () => {
+	const [ counter, setCounter ] = React.useState( 0 );
+	const steps = [ 'Downloading Data', 'Importing Data...', 'Finalizing', 'Done' ];
+
+	useEffect( () => {
+		setTimeout( () => {
+			if ( counter < steps.length - 1 ) {
+				setCounter( counter + 1 );
+			}
+		}, 2000 );
+	}, [ counter, setCounter ] );
+
+	return <Progress forLabel="Update site progress" steps={ steps } activeStep={ counter } />;
+};

package/src/system/Table/Table.js

@@ -3,18 +3,22 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Table = ( { sx, className, ...props } ) => (
+const Table = React.forwardRef( ( { sx, className, ...props }, forwardRef ) => (
 	<table
 		sx={ { width: '100%', minWidth: 1024, ...sx } }
 		cellPadding={ 0 }
 		cellSpacing={ 0 }
 		className={ classNames( 'vip-table-component', className ) }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Table.displayName = 'Table';
 
 Table.propTypes = {
 	sx: PropTypes.object,

package/src/system/Wizard/Wizard.js

@@ -42,7 +42,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 					{ steps[ activeStep ].children }
 				</Box>
 			) : (
-				steps.map( ( { title, subTitle, children, titleVariant }, index ) => (
+				steps.map( ( { title, subTitle, children }, index ) => (
 					<WizardStep
 						active={ index === activeStep }
 						complete={ completed.includes( index ) }
@@ -50,7 +50,6 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 						order={ index + 1 }
 						subTitle={ subTitle }
 						title={ title }
-						titleVariant={ titleVariant }
 					>
 						{ children }
 					</WizardStep>

package/src/system/Wizard/Wizard.stories.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -52,16 +54,14 @@ export const Default = () => {
 	);
 };
 
-export const CustomHeadingVariant = () => {
+export const CustomTitle = () => {
 	const steps = [
 		{
-			title: 'Choose Domain',
-			titleVariant: 'h1',
-			subTitle: <h2>You can bring a domain name you already own, or buy a new one.</h2>,
+			title: <h3 sx={ { m: 0 } }>Choose Domain</h3>,
+			subTitle: <span>You can bring a domain name you already own, or buy a new one.</span>,
 		},
 		{
-			title: 'Configure DNS',
-			titleVariant: 'h1',
+			title: <h3 sx={ { m: 0 } }>Configure DNS</h3>,
 		},
 	];
 	return (

package/src/system/Wizard/WizardStep.js

@@ -9,18 +9,10 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Card, Heading, Text } from '..';
+import { Card, Heading, Text, Flex } from '..';
 
-const WizardStep = ( {
-	title,
-	subTitle,
-	complete = false,
-	children,
-	active,
-	order,
-	titleVariant = 'h4',
-} ) => {
-	let borderLeftColor = 'borders.2';
+const WizardStep = ( { title, subTitle, complete = false, children, active, order } ) => {
+	let borderLeftColor = 'border';
 
 	if ( complete ) {
 		borderLeftColor = 'success';
@@ -56,19 +48,26 @@ const WizardStep = ( {
 			data-step={ order }
 			data-active={ active || undefined }
 		>
-			<Heading
-				variant={ titleVariant }
-				sx={ {
-					mb: 0,
-					display: 'flex',
-					alignItems: 'center',
-					color,
-					fontSize: 2,
-				} }
-			>
-				<MdCheckCircle sx={ { mr: 2 } } size={ 18 } />
-				{ title }
-			</Heading>
+			{ typeof title === 'string' ? (
+				<Heading
+					variant="h4"
+					sx={ {
+						mb: 0,
+						display: 'flex',
+						alignItems: 'center',
+						color: color,
+					} }
+				>
+					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+					{ title }
+				</Heading>
+			) : (
+				<Flex sx={ { alignItems: 'center', color } }>
+					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+					{ title }
+				</Flex>
+			) }
+
 			{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
 
 			{ active && children }
@@ -83,7 +82,6 @@ WizardStep.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
-	titleVariant: PropTypes.string,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -9,24 +9,31 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading } from '..';
+import { Heading, Flex } from '..';
 
-const WizardStepHorizontal = ( { title, active, order, titleVariant = 'h4' } ) => {
-	return (
+const WizardStepHorizontal = ( { title, active, order } ) => {
+	const color = active ? 'heading' : 'muted';
+
+	return typeof title === 'string' ? (
 		<Heading
-			variant={ titleVariant }
+			variant="h4"
 			sx={ {
 				mb: 0,
 				display: 'flex',
 				alignItems: 'center',
-				color: active ? 'heading' : 'muted',
+				color,
 			} }
 			data-step={ order }
 			data-active={ active || undefined }
 		>
-			<MdCheckCircle sx={ { mr: 2 } } />
+			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
 			{ title }
 		</Heading>
+	) : (
+		<Flex sx={ { alignItems: 'center', color } }>
+			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+			{ title }
+		</Flex>
 	);
 };
 
@@ -35,7 +42,6 @@ WizardStepHorizontal.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
-	titleVariant: PropTypes.string,
 };
 
 export { WizardStepHorizontal };

package/src/system/index.js

@@ -44,7 +44,6 @@ import { Link } from './Link';
 import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
-import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
 import { Time } from './Time';
 import { Timeline } from './Timeline';
@@ -94,8 +93,6 @@ export {
 	Select,
 	Radio,
 	RadioBoxGroup,
-	ResourceList,
-	ResourceItem,
 	Textarea,
 	Progress,
 	Text,

package/src/system/ResourceList/ResourceItem.js

@@ -1,66 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Box, Flex, Time } from '..';
-
-const ResourceItem = ( {
-	children,
-	item,
-	renderActions,
-	relativeTime = false,
-	timeOnly = false,
-	dateKey,
-	icon = null,
-} ) => {
-	return (
-		<Flex
-			sx={ {
-				alignItems: 'center',
-				gap: 3,
-			} }
-		>
-			{ icon }
-			<Box sx={ { flex: '1 1 auto' } }>{ children }</Box>
-			<Flex
-				sx={ {
-					flex: '0 0 auto',
-					alignItems: 'center',
-					gap: 3,
-				} }
-			>
-				<Time
-					className="time"
-					relativeTime={ relativeTime }
-					timeOnly={ timeOnly }
-					time={ item[ dateKey ] }
-					sx={ { color: 'muted', mb: 0, textAlign: 'right', flex: '0 0 auto' } }
-				/>
-				{ renderActions && (
-					<Flex className="actions" sx={ { alignItems: 'center', gap: 3 } }>
-						<Box sx={ { width: 4, height: 4, borderRadius: 4, bg: 'border' } } />
-						{ renderActions( item ) }
-					</Flex>
-				) }
-			</Flex>
-		</Flex>
-	);
-};
-
-ResourceItem.propTypes = {
-	children: PropTypes.node,
-	item: PropTypes.object,
-	icon: PropTypes.node,
-	relativeTime: PropTypes.bool,
-	timeOnly: PropTypes.bool,
-	dateKey: PropTypes.string,
-	renderActions: PropTypes.func,
-};
-
-export { ResourceItem };

package/src/system/ResourceList/ResourceList.js

@@ -1,108 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { useMemo } from 'react';
-
-/**
- * Internal dependencies
- */
-import { Box, Heading } from '..';
-
-const formatterOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-
-const formatDate = date => {
-	const today = new Date();
-	if ( date.getFullYear() !== today.getFullYear() ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getMonth() !== today.getMonth() ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getDate() < today.getDate() - 1 ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getDate() === today.getDate() - 1 ) {
-		return 'Yesterday';
-	}
-	return 'Today';
-};
-
-const StyledListItem = props => (
-	<Box
-		as="li"
-		sx={ {
-			py: 2,
-			borderBottom: '1px solid',
-			borderColor: 'borders.2',
-			listStyleType: 'none',
-			margin: 0,
-			px: 0,
-		} }
-		{ ...props }
-	/>
-);
-
-const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) => {
-	let groupedItems = {};
-	if ( groupedByDay ) {
-		groupedItems = items?.reduce( ( itemGroups, item ) => {
-			const formattedDate = formatDate( item[ dateKey ] );
-			const itemsAtDate = itemGroups[ formattedDate ];
-
-			return {
-				...itemGroups,
-				[ formattedDate ]: itemsAtDate ? [ ...itemsAtDate, item ] : [ item ],
-			};
-		}, {} );
-	}
-
-	const renderItemList = itemsList =>
-		itemsList.map( ( item, index ) => (
-			<StyledListItem key={ index }>{ renderItem( item ) }</StyledListItem>
-		) );
-
-	const renderGoupedItems = () =>
-		useMemo(
-			() =>
-				Object.keys( groupedItems ).map( ( groupName, index ) => (
-					<Box sx={ { mb: 4 } } key={ index } as="li">
-						<Heading variant="h4" as="h4" sx={ { mb: 3 } }>
-							{ groupName }
-						</Heading>
-						<Box
-							as="ul"
-							sx={ {
-								listStyleType: 'none',
-								m: 0,
-								p: 0,
-								borderTop: '1px solid',
-								borderColor: 'border',
-							} }
-						>
-							{ renderItemList( groupedItems[ groupName ] ) }
-						</Box>
-					</Box>
-				) ),
-			[ groupedItems ]
-		);
-
-	return (
-		<Box
-			as="ul"
-			sx={ { listStyleType: 'none', m: 0, p: 0 } }
-			className="vip-resource-list-component"
-		>
-			{ groupedByDay ? renderGoupedItems( groupedItems ) : renderItemList( items ) }
-		</Box>
-	);
-};
-
-ResourceList.propTypes = {
-	groupedByDay: PropTypes.bool,
-	items: PropTypes.array,
-	renderItem: PropTypes.func,
-	relativeTime: PropTypes.bool,
-	dateKey: PropTypes.string,
-};
-
-export { ResourceList };