@automattic/vip-design-system 0.20.1 → 0.22.0

package/src/system/Form/RadioBoxGroup.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { MdCheckCircle } from 'react-icons/md';
@@ -12,54 +13,59 @@ import { MdCheckCircle } from 'react-icons/md';
  */
 import { Heading, Text } from '../';
 
-const RadioBoxGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
-	<RadioGroupPrimitive.Root
-		onValueChange={ onChange }
-		value={ value }
-		aria-label={ groupLabel }
-		sx={ {
-			display: 'flex',
-			gap: 2,
-		} }
-		{ ...props }
-	>
-		{ options.map( ( option, index ) => (
-			<RadioGroupPrimitive.Item
-				key={ option.value }
-				value={ option.value }
-				id={ `o${ index }` }
-				sx={ {
-					p: 3,
-					background: 'none',
-					cursor: 'pointer',
-					borderRadius: 2,
-					textAlign: 'left',
-					border: '1px solid',
-					borderColor: 'border',
-					position: 'relative',
-					'&:hover': {
-						borderColor: 'grey.10',
-					},
-					'&[data-state=checked]': {
-						borderColor: 'primary',
-					},
-				} }
-			>
-				<RadioGroupPrimitive.Indicator>
-					<MdCheckCircle
-						size={ 16 }
-						sx={ { position: 'absolute', top: 2, right: 2, color: 'primary' } }
-					/>
-				</RadioGroupPrimitive.Indicator>
-				<Heading variant="h4" as="label" htmlFor={ `o${ index }` } sx={ { mb: 0 } }>
-					{ option.label }
-				</Heading>
-				<Text sx={ { color: 'muted', mb: 0, fontSize: 1 } }>{ option.description }</Text>
-			</RadioGroupPrimitive.Item>
-		) ) }
-	</RadioGroupPrimitive.Root>
+const RadioBoxGroup = React.forwardRef(
+	( { onChange, groupLabel, value, options, ...props }, forwardRef ) => (
+		<RadioGroupPrimitive.Root
+			onValueChange={ onChange }
+			value={ value }
+			aria-label={ groupLabel }
+			sx={ {
+				display: 'flex',
+				gap: 2,
+			} }
+			ref={ forwardRef }
+			{ ...props }
+		>
+			{ options.map( ( option, index ) => (
+				<RadioGroupPrimitive.Item
+					key={ option.value }
+					value={ option.value }
+					id={ `o${ index }` }
+					sx={ {
+						p: 3,
+						background: 'none',
+						cursor: 'pointer',
+						borderRadius: 2,
+						textAlign: 'left',
+						border: '1px solid',
+						borderColor: 'border',
+						position: 'relative',
+						'&:hover': {
+							borderColor: 'grey.10',
+						},
+						'&[data-state=checked]': {
+							borderColor: 'primary',
+						},
+					} }
+				>
+					<RadioGroupPrimitive.Indicator>
+						<MdCheckCircle
+							size={ 16 }
+							sx={ { position: 'absolute', top: 2, right: 2, color: 'primary' } }
+						/>
+					</RadioGroupPrimitive.Indicator>
+					<Heading variant="h4" as="label" htmlFor={ `o${ index }` } sx={ { mb: 0 } }>
+						{ option.label }
+					</Heading>
+					<Text sx={ { color: 'muted', mb: 0, fontSize: 1 } }>{ option.description }</Text>
+				</RadioGroupPrimitive.Item>
+			) ) }
+		</RadioGroupPrimitive.Root>
+	)
 );
 
+RadioBoxGroup.displayName = 'RadioBoxGroup';
+
 RadioBoxGroup.propTypes = {
 	onChange: PropTypes.func,
 	options: PropTypes.array,

package/src/system/Form/Toggle.js

@@ -4,6 +4,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -12,62 +13,61 @@ import * as Switch from '@radix-ui/react-switch';
 // Documentation for Radix Switch component
 // https://www.radix-ui.com/docs/primitives/components/switch
 
-export const Toggle = ( {
-	name = 'toggle',
-	onChange,
-	className = null,
-	variant = 'primary',
-	...rest
-} ) => (
-	<Switch.Root
-		className={ classNames( 'vip-toggle-component', className ) }
-		sx={ {
-			all: 'unset',
-			cursor: 'pointer',
-			position: 'relative',
-			width: 40,
-			height: 20,
-			borderRadius: '32px',
-			backgroundColor: 'muted',
-			backgroundRepeat: 'no-repeat',
-			backgroundPosition: 'right 2px top 2px',
-			backgroundImage: `url(
+export const Toggle = React.forwardRef(
+	( { name = 'toggle', onChange, className = null, variant = 'primary', ...rest }, forwardRef ) => (
+		<Switch.Root
+			className={ classNames( 'vip-toggle-component', className ) }
+			sx={ {
+				all: 'unset',
+				cursor: 'pointer',
+				position: 'relative',
+				width: 40,
+				height: 20,
+				borderRadius: '32px',
+				backgroundColor: 'muted',
+				backgroundRepeat: 'no-repeat',
+				backgroundPosition: 'right 2px top 2px',
+				backgroundImage: `url(
 				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
-			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+				WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
 
-			'&:focus': theme => theme.outline,
-			'&:focus-visible': theme => theme.outline,
-			'&[disabled]': {
-				opacity: 0.7,
-			},
-			'&[data-state="checked"]': {
-				backgroundColor: variant,
-				backgroundPosition: 'left 2px top 2px',
-				backgroundImage: `url(
+				'&:focus': theme => theme.outline,
+				'&:focus-visible': theme => theme.outline,
+				'&[disabled]': {
+					opacity: 0.7,
+				},
+				'&[data-state="checked"]': {
+					backgroundColor: variant,
+					backgroundPosition: 'left 2px top 2px',
+					backgroundImage: `url(
 					'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
-			},
-		} }
-		name={ name }
-		onCheckedChange={ onChange || undefined }
-		{ ...rest }
-	>
-		<Switch.Thumb
-			sx={ {
-				display: 'block',
-				width: 16,
-				height: 16,
-				backgroundColor: 'white',
-				borderRadius: '50%',
-				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
-				transition: 'transform 100ms',
-				transform: 'translateX(2px)',
-				willChange: 'transform',
-				'&[data-state="checked"]': { transform: 'translateX(22px)' },
+				},
 			} }
-		/>
-	</Switch.Root>
+			name={ name }
+			onCheckedChange={ onChange || undefined }
+			ref={ forwardRef }
+			{ ...rest }
+		>
+			<Switch.Thumb
+				sx={ {
+					display: 'block',
+					width: 16,
+					height: 16,
+					backgroundColor: 'white',
+					borderRadius: '50%',
+					boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+					transition: 'transform 100ms',
+					transform: 'translateX(2px)',
+					willChange: 'transform',
+					'&[data-state="checked"]': { transform: 'translateX(22px)' },
+				} }
+			/>
+		</Switch.Root>
+	)
 );
 
+Toggle.displayName = 'Toggle';
+
 Toggle.propTypes = {
 	name: PropTypes.string,
 	className: PropTypes.any,

package/src/system/Form/ToggleGroup.js

@@ -3,54 +3,60 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
-const ToggleGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
-	<RadioGroupPrimitive.Root
-		onValueChange={ onChange }
-		value={ value }
-		aria-label={ groupLabel }
-		sx={ {
-			bg: 'backgroundSecondary',
-			p: 1,
-			display: 'flex',
-			alignItems: 'center',
-		} }
-		{ ...props }
-	>
-		{ options.map( ( option, index ) => (
-			<RadioGroupPrimitive.Item
-				key={ option.value }
-				value={ option.value }
-				id={ `o${ index }` }
-				sx={ {
-					fontSize: 1,
-					color: 'muted',
-					background: 'none',
-					border: 'none',
-					cursor: 'pointer',
-					borderRadius: 1,
-					py: 1,
-					px: 2,
-					flex: '1 1 auto',
-					textAlign: 'center',
-					'&:hover': {
-						color: 'heading',
-					},
-					'&[data-state=checked]': {
-						backgroundColor: 'card',
-						boxShadow: 'low',
-						color: 'heading',
-					},
-				} }
-			>
-				{ option.label }
-			</RadioGroupPrimitive.Item>
-		) ) }
-	</RadioGroupPrimitive.Root>
+const ToggleGroup = React.forwardRef(
+	( { onChange, groupLabel, value, options, ...props }, forwardRef ) => (
+		<RadioGroupPrimitive.Root
+			onValueChange={ onChange }
+			value={ value }
+			aria-label={ groupLabel }
+			sx={ {
+				bg: 'backgroundSecondary',
+				p: 1,
+				display: 'flex',
+				alignItems: 'center',
+			} }
+			ref={ forwardRef }
+			{ ...props }
+		>
+			{ options.map( ( option, index ) => (
+				<RadioGroupPrimitive.Item
+					key={ option.value }
+					value={ option.value }
+					id={ `o${ index }` }
+					sx={ {
+						fontSize: 1,
+						color: 'muted',
+						background: 'none',
+						border: 'none',
+						cursor: 'pointer',
+						borderRadius: 1,
+						py: 1,
+						px: 2,
+						flex: '1 1 auto',
+						textAlign: 'center',
+						'&:hover': {
+							color: 'heading',
+						},
+						'&[data-state=checked]': {
+							backgroundColor: 'card',
+							boxShadow: 'low',
+							color: 'heading',
+						},
+					} }
+				>
+					{ option.label }
+				</RadioGroupPrimitive.Item>
+			) ) }
+		</RadioGroupPrimitive.Root>
+	)
 );
 
+ToggleGroup.displayName = 'ToggleGroup';
+
 ToggleGroup.propTypes = {
 	onChange: PropTypes.func,
 	options: PropTypes.array,

package/src/system/Link/Link.js

@@ -3,10 +3,11 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Link as ThemeLink } from 'theme-ui';
 import PropTypes from 'prop-types';
 
-const Link = ( { active = false, sx, ...props } ) => (
+const Link = React.forwardRef( ( { active = false, sx, ...props }, forwardRef ) => (
 	<ThemeLink
 		{ ...props }
 		sx={ {
@@ -27,8 +28,11 @@ const Link = ( { active = false, sx, ...props } ) => (
 			'&:focus-visible': theme => theme.outline,
 			...sx,
 		} }
+		ref={ forwardRef }
 	/>
-);
+) );
+
+Link.displayName = 'Link';
 
 Link.propTypes = {
 	active: PropTypes.bool,

package/src/system/Notice/Notice.js

@@ -28,7 +28,7 @@ const NoticeIcon = ( { color, variant } ) => {
 			break;
 	}
 
-	return <Icon sx={ { color, flex: '0 0 auto' } } size={ 21 } />;
+	return <Icon sx={ { color, flex: '0 0 auto' } } size={ 21 } aria-hidden="true" />;
 };
 
 NoticeIcon.propTypes = {

package/src/system/Notification/Notification.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { MdCheckCircle, MdClose, MdError } from 'react-icons/md';
 import PropTypes from 'prop-types';
 
@@ -12,43 +13,49 @@ import PropTypes from 'prop-types';
 import { Box, Card, Flex, Text, Button } from '../';
 import ScreenReaderText from '../ScreenReaderText';
 
-const Notification = ( { title, body, status = 'success', onClose } ) => (
-	<Card
-		role="alert"
-		className="vip-notification-component"
-		sx={ {
-			boxShadow: 'medium',
-			width: 320,
-			position: 'relative',
-			variant: `notification.${ status }`,
-		} }
-	>
-		<ScreenReaderText>Alert,</ScreenReaderText>
-		<Flex sx={ { alignItems: 'center' } }>
-			{ status === 'error' ? (
-				<MdError sx={ { color: 'error', flex: '0 0 auto' } } aria-hidden="true" />
-			) : (
-				<MdCheckCircle sx={ { color: 'success', flex: '0 0 auto' } } aria-hidden="true" />
+const Notification = React.forwardRef(
+	( { title, body, status = 'success', onClose }, forwardRef ) => (
+		<Card
+			role="alert"
+			className="vip-notification-component"
+			sx={ {
+				boxShadow: 'medium',
+				width: 320,
+				position: 'relative',
+				variant: `notification.${ status }`,
+			} }
+			ref={ forwardRef }
+		>
+			<ScreenReaderText>Alert,</ScreenReaderText>
+
+			<Flex sx={ { alignItems: 'center' } }>
+				{ status === 'error' ? (
+					<MdError sx={ { color: 'error', flex: '0 0 auto' } } aria-hidden="true" />
+				) : (
+					<MdCheckCircle sx={ { color: 'success', flex: '0 0 auto' } } aria-hidden="true" />
+				) }
+				<Box sx={ { flex: '1 1 auto', ml: 3 } }>
+					<p sx={ { my: 0, color: 'heading', fontWeight: 'bold' } }>{ title }</p>
+					{ body && <Text sx={ { mb: 0, mt: 1 } }>{ body }</Text> }
+				</Box>
+			</Flex>
+
+			{ onClose && (
+				<Button
+					onClick={ onClose }
+					variant="icon"
+					sx={ { color: 'muted', position: 'absolute', top: 2, right: 2 } }
+					aria-hidden="true"
+				>
+					<MdClose />
+				</Button>
 			) }
-			<Box sx={ { flex: '1 1 auto', ml: 3 } }>
-				<p sx={ { my: 0, color: 'heading', fontWeight: 'bold' } }>{ title }</p>
-				{ body && <Text sx={ { mb: 0, mt: 1 } }>{ body }</Text> }
-			</Box>
-		</Flex>
-
-		{ onClose && (
-			<Button
-				onClick={ onClose }
-				variant="icon"
-				sx={ { color: 'muted', position: 'absolute', top: 2, right: 2 } }
-				aria-hidden="true"
-			>
-				<MdClose />
-			</Button>
-		) }
-	</Card>
+		</Card>
+	)
 );
 
+Notification.displayName = 'Notification';
+
 Notification.propTypes = {
 	title: PropTypes.node,
 	body: PropTypes.node,

package/src/system/OptionRow/OptionRow.js

@@ -34,87 +34,95 @@ const regularGridStyle = small => ( {
 	borderColor: 'borders.2',
 } );
 
-const OptionRow = ( {
-	image,
-	icon,
-	badge,
-	label,
-	inline = false,
-	subTitle,
-	body,
-	meta,
-	to,
-	small = false,
-	disabled = false,
-	order = null,
-	className = null,
-	...props
-} ) => {
-	const mergedCard = disabled ? disabledStyles : {};
-	const inlineStyles = inline ? gridInlineStyle : regularGridStyle( small );
+const OptionRow = React.forwardRef(
+	(
+		{
+			image,
+			icon,
+			badge,
+			label,
+			inline = false,
+			subTitle,
+			body,
+			meta,
+			to,
+			small = false,
+			disabled = false,
+			order = null,
+			className = null,
+			...props
+		},
+		forwardRef
+	) => {
+		const mergedCard = disabled ? disabledStyles : {};
+		const inlineStyles = inline ? gridInlineStyle : regularGridStyle( small );
 
-	return (
-		<Grid
-			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': ! disabled && {
-					backgroundColor: 'hover',
-				},
-				...inlineStyles,
-			} }
-		>
-			<Box>
-				{ image ? (
-					<Box
-						sx={ {
-							display: [ 'inline-block', 'inline-block', 'block' ],
-							p: small ? 12 : 20,
-							flex: '0 0 auto',
-							bg: 'brand.70',
-							color: 'brand.10',
-							borderRadius: 1,
-							...mergedCard,
-						} }
-					>
-						{ React.isValidElement( image ) ? (
-							image
-						) : (
-							<img
-								src={ image }
-								width={ small ? 32 : 48 }
-								sx={ { display: 'block' } }
-								alt="Image representing the list item"
-							/>
-						) }
-					</Box>
-				) : (
-					icon && icon
+		return (
+			<Grid
+				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 ) }
+				ref={ forwardRef }
+				{ ...props }
+				sx={ {
+					alignItems: 'center',
+					cursor: disabled ? 'auto' : 'pointer',
+					textDecoration: 'none',
+					color: 'inherit',
+					'&:hover': ! disabled && {
+						backgroundColor: 'hover',
+					},
+					...inlineStyles,
+				} }
+			>
+				<Box>
+					{ image ? (
+						<Box
+							sx={ {
+								display: [ 'inline-block', 'inline-block', 'block' ],
+								p: small ? 12 : 20,
+								flex: '0 0 auto',
+								bg: 'brand.70',
+								color: 'brand.10',
+								borderRadius: 1,
+								...mergedCard,
+							} }
+						>
+							{ React.isValidElement( image ) ? (
+								image
+							) : (
+								<img
+									src={ image }
+									width={ small ? 32 : 48 }
+									sx={ { display: 'block' } }
+									alt="Image representing the list item"
+								/>
+							) }
+						</Box>
+					) : (
+						icon && icon
+					) }
+				</Box>
+
+				<Box sx={ { flex: '1 1 auto' } }>
+					<Heading variant="h4" sx={ { mb: subTitle || body ? 1 : 0 } }>
+						{ label }
+						{ badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
+					</Heading>
+					{ subTitle && <Text sx={ { mb: 1, color: 'muted' } }>{ subTitle }</Text> }
+					{ body && <Text sx={ { mb: 0 } }>{ body }</Text> }
+				</Box>
+				{ false !== meta && '' !== meta && (
+					<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={ 24 } /> }</Box>
 				) }
-			</Box>
+			</Grid>
+		);
+	}
+);
 
-			<Box sx={ { flex: '1 1 auto' } }>
-				<Heading variant="h4" sx={ { mb: subTitle || body ? 1 : 0 } }>
-					{ label }
-					{ badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
-				</Heading>
-				{ subTitle && <Text sx={ { mb: 1, color: 'muted' } }>{ subTitle }</Text> }
-				{ body && <Text sx={ { mb: 0 } }>{ body }</Text> }
-			</Box>
-			{ false !== meta && '' !== meta && (
-				<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={ 24 } /> }</Box>
-			) }
-		</Grid>
-	);
-};
+OptionRow.displayName = 'OptionRow';
 
 OptionRow.propTypes = {
 	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),