@automattic/vip-design-system 0.10.2 → 0.11.1

package/src/system/Form/ToggleGroup.js

@@ -19,37 +19,35 @@ const ToggleGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
 		} }
 		{ ...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>
-			) )
-		}
+		{ 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>
 );
 

package/src/system/Form/ToggleGroup.stories.jsx

@@ -30,5 +30,12 @@ const options = [
 
 export const Default = () => {
 	const [ value, setValue ] = useState( 'one' );
-	return <ToggleGroup value={ value } onChange={ newValue => setValue( newValue ) } groupLabel="group" options={ options } />;
+	return (
+		<ToggleGroup
+			value={ value }
+			onChange={ newValue => setValue( newValue ) }
+			groupLabel="group"
+			options={ options }
+		/>
+	);
 };

package/src/system/Form/ToggleRow.js

@@ -36,7 +36,12 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 						flex: '0 0 auto',
 					} }
 				>
-					<img src={ image } width={ 32 } sx={ { display: 'block' } } alt="Icon representing a toggle" />
+					<img
+						src={ image }
+						width={ 32 }
+						sx={ { display: 'block' } }
+						alt="Icon representing a toggle"
+					/>
 				</Card>
 			</Box>
 		) }

package/src/system/Form/Validation.js

@@ -15,7 +15,12 @@ const Validation = ( { children, isValid, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
 
 	return (
-		<Heading variant="h5" as="p" sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } } { ...props }>
+		<Heading
+			variant="h5"
+			as="p"
+			sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } }
+			{ ...props }
+		>
 			<Icon sx={ { mr: 1 } } />
 			{ children }
 		</Heading>

package/src/system/Form/index.js

@@ -13,4 +13,16 @@ import { RadioBoxGroup } from './RadioBoxGroup';
 import { Textarea } from './Textarea';
 import { Checkbox } from './Checkbox';
 
-export { Input, Label, Radio, RadioBoxGroup, ToggleGroup, Select, Textarea, Toggle, ToggleRow, Validation, Checkbox };
+export {
+	Input,
+	Label,
+	Radio,
+	RadioBoxGroup,
+	ToggleGroup,
+	Select,
+	Textarea,
+	Toggle,
+	ToggleRow,
+	Validation,
+	Checkbox,
+};

package/src/system/Grid/Grid.js

@@ -8,7 +8,7 @@ import { Grid as ThemeGrid } from 'theme-ui';
 import { forwardRef } from 'react';
 
 const Grid = forwardRef( ( props, ref ) => {
-	return <ThemeGrid {...props} ref={ref} />;
+	return <ThemeGrid { ...props } ref={ ref } />;
 } );
 
 Grid.displayName = 'Grid';

package/src/system/Grid/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Heading/Heading.js

@@ -9,15 +9,15 @@ import classNames from 'classnames';
 
 const Heading = ( { variant = 'h3', sx, className = null, ...props } ) => (
 	<ThemeHeading
-		as={variant}
-		sx={{
+		as={ variant }
+		sx={ {
 			color: 'heading',
 			// pass variant prop to sx
 			variant: `text.${ variant }`,
 			...sx,
-		}}
+		} }
 		className={ classNames( 'vip-heading-component', className ) }
-		{...props}
+		{ ...props }
 	/>
 );
 

package/src/system/Heading/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Link/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Notice/Notice.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 import { Box, Flex, Heading, Card } from '../';
 
 const NoticeIcon = ( { color, variant } ) => {
@@ -27,9 +27,7 @@ const NoticeIcon = ( { color, variant } ) => {
 			break;
 	}
 
-	return (
-		<Icon sx={ { marginRight: 2, color, flex: '0 0 auto' } }/>
-	);
+	return <Icon sx={ { marginRight: 2, color, flex: '0 0 auto' } } />;
 };
 
 NoticeIcon.propTypes = {
@@ -37,7 +35,15 @@ NoticeIcon.propTypes = {
 	variant: PropTypes.string,
 };
 
-const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, className = null, ...props } ) => {
+const Notice = ( {
+	variant = 'warning',
+	inline = false,
+	children,
+	title,
+	sx = {},
+	className = null,
+	...props
+} ) => {
 	let color = 'yellow';
 
 	switch ( variant ) {
@@ -70,17 +76,25 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 			className={ classNames( 'vip-notice-component', className ) }
 			{ ...props }
 		>
-			<Flex sx={ {
-				alignItems: 'center',
-			} }>
-				<Flex sx={ {
+			<Flex
+				sx={ {
 					alignItems: 'center',
-				} }>
-					<NoticeIcon color={`${ color }.100`} variant={ variant } />
+				} }
+			>
+				<Flex
+					sx={ {
+						alignItems: 'center',
+					} }
+				>
+					<NoticeIcon color={ `${ color }.100` } variant={ variant } />
 				</Flex>
 
 				<Box sx={ { ml: 23 } }>
-					{ title && <Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>{ title }</Heading> }
+					{ title && (
+						<Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>
+							{ title }
+						</Heading>
+					) }
 					{ children }
 				</Box>
 			</Flex>

package/src/system/Notice/Notice.stories.jsx

@@ -15,23 +15,21 @@ export default {
 
 export const Default = () => (
 	<React.Fragment>
-		<Notice variant="alert" sx={{ mb: 4 }}>
+		<Notice variant="alert" sx={ { mb: 4 } }>
 			<Heading variant="h4">Your site is ready to launch!</Heading>
-			<Text sx={{ mb: 0 }}>
+			<Text sx={ { mb: 0 } }>
 				It looks like you&lsquo;re ready to share your application with the world.
 			</Text>
 		</Notice>
 
-		<Notice variant="success" sx={{ mb: 4 }}>
+		<Notice variant="success" sx={ { mb: 4 } }>
 			It looks like you&lsquo;re ready to share your <a href="#">application with the world.</a>
 		</Notice>
 
-		<Notice sx={{ mb: 4 }} title="This notice has only the title prop passed" />
+		<Notice sx={ { mb: 4 } } title="This notice has only the title prop passed" />
 
-		<Notice variant="success" sx={{ mb: 4 }} title="You made it!">
-			<Text sx={{ mb: 0 }}>
-				This notice has a title and children
-			</Text>
+		<Notice variant="success" sx={ { mb: 4 } } title="You made it!">
+			<Text sx={ { mb: 0 } }>This notice has a title and children</Text>
 		</Notice>
 	</React.Fragment>
 );

package/src/system/Notice/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Notification/Notification.js

@@ -9,38 +9,43 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Box, Button, Card, Flex, Heading, Text } from '../';
+import { Box, Card, Flex, Text, Button } from '../';
+import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
 
 const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card
+		role="alert"
 		className="vip-notification-component"
-		sx={{
+		sx={ {
 			boxShadow: 'medium',
 			width: 320,
 			position: 'relative',
 			variant: `notification.${ status }`,
-		}}
+		} }
 	>
-		<Button
-			onClick={onClose}
-			variant="icon"
-			sx={{ color: 'muted', position: 'absolute', top: 2, right: 2 }}
-		>
-			<MdClose />
-		</Button>
-		<Flex sx={{ alignItems: 'center' }}>
-			{status === 'error' ? (
-				<MdError sx={{ color: 'error', flex: '0 0 auto' }} />
+		<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' }} />
-			)}
-			<Box sx={{ flex: '1 1 auto', ml: 3 }}>
-				<Heading variant="h4" sx={{ mb: 0 }}>
-					{title}
-				</Heading>
-				{body && <Text sx={{ mb: 0, mt: 1 }}>{body}</Text>}
+				<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>
+		) }
 	</Card>
 );
 

package/src/system/Notification/Notification.stories.jsx

@@ -9,8 +9,8 @@ export default {
 };
 
 export const Default = () => (
-	<Notification
-		title="My first notification"
-		subTitle="Use when providing success or error feedback on global action"
-	/>
+	<Notification title="Awesome!" body="Your message has been sent successfully." />
+);
+export const Error = () => (
+	<Notification status="error" title="Snag!" body="Your message could not be sent." />
 );

package/src/system/Notification/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/OptionRow/OptionRow.js

@@ -13,6 +13,27 @@ import PropTypes from 'prop-types';
 import { Badge, Box, Grid, Heading, Text } from '..';
 import classNames from 'classnames';
 
+const disabledStyles = {
+	border: '1px solid',
+	borderColor: 'border',
+	background: 'none',
+	boxShadow: 'none',
+	color: 'grey.70',
+};
+
+const gridInlineStyle = {
+	py: 2,
+	px: 2,
+	mx: -2,
+};
+
+const regularGridStyle = small => ( {
+	py: 3,
+	px: [ 3, 3, small ? 3 : 5 ],
+	borderBottom: '1px solid',
+	borderColor: 'border',
+} );
+
 const OptionRow = ( {
 	image,
 	icon,
@@ -29,37 +50,18 @@ const OptionRow = ( {
 	className = null,
 	...props
 } ) => {
-	const mergedCard = disabled
-		? {
-			border: '1px solid',
-			borderColor: 'border',
-			background: 'none',
-			boxShadow: 'none',
-			color: 'grey.70',
-		}
-		: {};
+	const mergedCard = disabled ? disabledStyles : {};
+	const inlineStyles = inline ? gridInlineStyle : regularGridStyle( small );
 
-	const inlineStyles = inline
-		? {
-			py: 2,
-			px: 2,
-			mx: -2,
-		}
-		: {
-			py: 3,
-			px: [ 3, 3, small ? 3 : 5 ],
-			borderBottom: '1px solid',
-			borderColor: 'border',
-		};
 	return (
 		<Grid
-			to={to}
-			columns={[ 1, 1, 'auto 1fr auto' ]}
-			gap={[ 3, 3, `${ small ? 3 : 4 }` ]}
+			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={{
+			{ ...props }
+			sx={ {
 				alignItems: 'center',
 				cursor: disabled ? 'auto' : 'pointer',
 				textDecoration: 'none',
@@ -68,12 +70,12 @@ const OptionRow = ( {
 					backgroundColor: 'hover',
 				},
 				...inlineStyles,
-			}}
+			} }
 		>
 			<Box>
-				{image ? (
+				{ image ? (
 					<Box
-						sx={{
+						sx={ {
 							display: [ 'inline-block', 'inline-block', 'block' ],
 							p: small ? 12 : 20,
 							flex: '0 0 auto',
@@ -81,34 +83,34 @@ const OptionRow = ( {
 							color: 'brand.10',
 							borderRadius: 1,
 							...mergedCard,
-						}}
+						} }
 					>
-						{React.isValidElement( image ) ? (
+						{ React.isValidElement( image ) ? (
 							image
 						) : (
 							<img
-								src={image}
-								width={small ? 32 : 48}
-								sx={{ display: 'block' }}
+								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>}
+			<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>}
+				{ 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>
+			{ false !== meta && '' !== meta && (
+				<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={ 24 } /> }</Box>
 			) }
 		</Grid>
 	);

package/src/system/OptionRow/OptionRow.stories.jsx

@@ -8,28 +8,30 @@ export default {
 	component: OptionRow,
 };
 
-// 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";
-// eslint-disable-next-line max-len
-const image2 = "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='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+const image1 =
+	// eslint-disable-next-line max-len
+	"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 image2 =
+	// eslint-disable-next-line max-len
+	"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='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
 
 export const Default = () => (
-	<Box sx={{ mx: -5 }}>
+	<Box sx={ { mx: -5 } }>
 		<OptionRow
-			image={image1}
+			image={ image1 }
 			label="Option Row"
 			subTitle="Mostly used to link off to other pages."
 			as="a"
 		/>
 		<OptionRow
-			image={image2}
+			image={ image2 }
 			label="Option Row"
 			subTitle="Mostly used to link off to other pages."
 			as="a"
 			order={ 2 }
 		/>
 		<OptionRow
-			image={image2}
+			image={ image2 }
 			label="Option Row – Disabled"
 			subTitle="Mostly used to link off to other pages."
 			as={ Box }

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

@@ -5,18 +5,14 @@ import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
-* Internal dependencies
-*/
+ * 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"
-			/>
+			<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();
@@ -26,12 +22,13 @@ describe( '<OptionRow />', () => {
 	} );
 
 	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 image1 =
+			// eslint-disable-next-line max-len
+			"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}
+				image={ image1 }
 				label="Option Row"
 				subTitle="Mostly used to link off to other pages."
 				as="a"
@@ -40,7 +37,11 @@ describe( '<OptionRow />', () => {
 			/>
 		);
 
-		expect( screen.getByAltText( 'Image representing the list item' ).closest( 'div' ) ).toHaveStyle( { background: 'none' } );
+		expect(
+			screen.getByAltText( 'Image representing the list item' ).closest( 'div' )
+		).toHaveStyle( {
+			background: 'none',
+		} );
 		expect( screen.queryByTestId( 'meta' ) ).not.toBeInTheDocument();
 
 		// Check for accessibility issues

package/src/system/OptionRow/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Progress/Progress.js

@@ -30,7 +30,9 @@ const Progress = ( { steps, activeStep, sx, className, ...props } ) => (
 				<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>
+					<Text as="span" sx={ { color: 'muted' } }>
+						{ steps[ activeStep ] }
+					</Text>
 				</Heading>
 			</Flex>
 		) }

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

@@ -10,9 +10,9 @@ export default {
 
 export const Default = () => (
 	<Progress
-		max={1}
-		value={1 / 2}
-		steps={[ 'Downloading Data', 'Importing Data...', 'Finalizing' ]}
-		activeStep={1}
+		max={ 1 }
+		value={ 1 / 2 }
+		steps={ [ 'Downloading Data', 'Importing Data...', 'Finalizing' ] }
+		activeStep={ 1 }
 	/>
 );

package/src/system/Progress/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */