@automattic/vip-design-system 0.10.2 → 0.11.1

package/src/system/BlankState/BlankState.test.js

@@ -11,8 +11,8 @@ import { MdContentCopy } from 'react-icons/md';
 import { BlankState } from './BlankState';
 import { Link } from '../Link';
 
-// eslint-disable-next-line max-len
 const image =
+	// 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";
 
 const defaultProps = {
@@ -23,37 +23,37 @@ const defaultProps = {
 	title: 'Power up your application',
 };
 
-describe('<BlankState />', () => {
-	it('renders the BlankState component', async () => {
-		const { container } = render(<BlankState {...defaultProps} />);
+describe( '<BlankState />', () => {
+	it( 'renders the BlankState component', async () => {
+		const { container } = render( <BlankState { ...defaultProps } /> );
 
-		expect(screen.getByText(defaultProps.body)).toBeInTheDocument();
-		expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
-		expect(screen.getByText('Explore add-ons →')).toBeInTheDocument();
-		expect(screen.getByAltText(defaultProps.imageAlt)).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.body ) ).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.title ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Explore add-ons →' ) ).toBeInTheDocument();
+		expect( screen.getByAltText( defaultProps.imageAlt ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with default alt text for the given image', async () => {
+	it( 'renders the BlankState component with default alt text for the given image', async () => {
 		const props = { ...defaultProps, imageAlt: undefined };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByAltText('Image representing the blank state')).toBeInTheDocument();
+		expect( screen.getByAltText( 'Image representing the blank state' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with an icon', async () => {
+	it( 'renders the BlankState component with an icon', async () => {
 		const icon = <MdContentCopy title="this is an icon" />;
 		const props = { ...defaultProps, icon };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByTitle('this is an icon')).toBeInTheDocument();
+		expect( screen.getByTitle( 'this is an icon' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
-});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/BlankState/index.js

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

package/src/system/Box/Box.js

@@ -8,7 +8,13 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Box as ThemeBox } from 'theme-ui';
 
-const Box = forwardRef( ( props, ref ) => <ThemeBox ref={ref} className={ classNames( 'vip-box-component', props.className ) } {...props} /> );
+const Box = forwardRef( ( props, ref ) => (
+	<ThemeBox
+		ref={ ref }
+		className={ classNames( 'vip-box-component', props.className ) }
+		{ ...props }
+	/>
+) );
 
 Box.displayName = 'Box';
 Box.propTypes = {

package/src/system/Box/index.js

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

package/src/system/Button/Button.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 
 const Button = ( { sx, ...props } ) => (
 	<ThemeButton
-		sx={{
+		sx={ {
 			verticalAlign: 'middle',
 			display: 'inline-flex',
 			alignItems: 'center',
@@ -22,9 +22,9 @@ const Button = ( { sx, ...props } ) => (
 				pointerEvents: 'all',
 			},
 			...sx,
-		}}
+		} }
 		className={ classNames( 'vip-button-component', props.className ) }
-		{...props}
+		{ ...props }
 	/>
 );
 

package/src/system/Button/Button.stories.jsx

@@ -15,8 +15,8 @@ export default {
 
 export const Default = () => (
 	<React.Fragment>
-		<Button sx={{ mr: 2 }}>Primary</Button>
-		<Button variant="secondary" sx={{ ml: 2 }}>
+		<Button sx={ { mr: 2 } }>Primary</Button>
+		<Button variant="secondary" sx={ { ml: 2 } }>
 			Secondary
 		</Button>
 	</React.Fragment>

package/src/system/Button/index.js

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

package/src/system/Card/Card.js

@@ -15,15 +15,15 @@ import classNames from 'classnames';
 const Card = React.forwardRef( ( { variant = 'primary', sx = {}, className, ...props }, ref ) => {
 	return (
 		<Box
-			ref={ref}
-			sx={{
+			ref={ ref }
+			sx={ {
 				// pass variant prop to sx
 				variant: `cards.${ variant }`,
 				overflow: 'hidden',
 				...sx,
-			}}
+			} }
 			className={ classNames( 'vip-card-component', className ) }
-			{...props}
+			{ ...props }
 		/>
 	);
 } );

package/src/system/Card/Card.test.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
-import { MdContentCopy } from 'react-icons/md';
 
 /**
  * Internal dependencies

package/src/system/Card/index.js

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

package/src/system/Code/Code.js

@@ -50,7 +50,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 			{ codeDom }
 			{
 				<button
-					aria-label="Copy"
+					aria-label="Copy code"
 					sx={ {
 						bg: 'grey.10',
 						borderTopRightRadius: 1,
@@ -79,7 +79,11 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 						}
 					} }
 				>
-					{ copied ? 'Copied!' : <MdContentCopy /> }
+					{ copied ? (
+						<span role="alert">Code copied to clipboard</span>
+					) : (
+						<MdContentCopy aria-hidden="true" />
+					) }
 				</button>
 			}
 		</div>

package/src/system/Code/Code.stories.jsx

@@ -17,11 +17,16 @@ export const Default = () => (
 	<React.Fragment>
 		<Code>Code</Code>
 		<br />
-		<Code showCopy={true}>Code with Icon</Code>
+		<Code showCopy={ true }>Code with Icon</Code>
 		<br />
-		<Code showCopy={true} onCopy={
-			// eslint-disable-next-line no-console
-			() => console.info( 'Hello world' )
-		}>Code with Icon and Click callback — console.info</Code>
+		<Code
+			showCopy={ true }
+			onCopy={
+				// eslint-disable-next-line no-console
+				() => console.info( 'Hello world' )
+			}
+		>
+			Code with Icon and Click callback — console.info
+		</Code>
 	</React.Fragment>
 );

package/src/system/Code/Code.test.js

@@ -3,7 +3,6 @@
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { axe } from 'jest-axe';
-import { MdContentCopy } from 'react-icons/md';
 
 /**
  * Internal dependencies
@@ -31,23 +30,11 @@ describe( '<Code />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
-	// jsdom currently doesn't support pseudo-elements with getComputedStyle
-	it.skip( 'renders "$" in front of the code when in prompt mode', async () => {
-		const props = { ...defaultProps, prompt: true };
-		const { container } = render( <Code { ...props }>This is a code</Code> );
-		const codeElement = screen.getByText( 'This is a code' );
-
-		expect( window.getComputedStyle( codeElement, ':before' ).content ).toEqual( '$' );
-
-		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
-
 	it( 'renders the Code component with a copy button', async () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		expect( screen.getByRole( 'button', { name: 'Copy' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Copy code' } ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
@@ -57,11 +44,11 @@ describe( '<Code />', () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Copy' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Copy code' } ) );
 
 		await waitFor( () => new Promise( res => setTimeout( res, 0 ) ) );
 
-		expect( screen.getByText( 'Copied!' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Code copied to clipboard' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();

package/src/system/ConfirmationDialog/ConfirmationDialog.js

@@ -12,7 +12,14 @@ import React from 'react';
  */
 import { Dialog, Box, Heading, Text, Flex, Button } from '../';
 
-const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', onConfirm, className = null } ) => (
+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 }

package/src/system/Dialog/Dialog.js

@@ -8,11 +8,18 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 import { DialogContent, DialogTrigger } from '.';
 
-const Dialog = ( { trigger, position = 'left', startOpen = false, content, disabled = false, ...props } ) => {
+const Dialog = ( {
+	trigger,
+	position = 'left',
+	startOpen = false,
+	content,
+	disabled = false,
+	...props
+} ) => {
 	const [ isOpen, setIsOpen ] = useState( startOpen );
 	const dialogRef = useRef( null );
 
@@ -46,7 +53,12 @@ const Dialog = ( { trigger, position = 'left', startOpen = false, content, disab
 	};
 
 	return (
-		<div onClick={ e => e.stopPropagation() } sx={ { position: 'relative' } } ref={ dialogRef } className="vip-dialog-component">
+		<div
+			onClick={ e => e.stopPropagation() }
+			sx={ { position: 'relative' } }
+			ref={ dialogRef }
+			className="vip-dialog-component"
+		>
 			<DialogTrigger
 				tabIndex="0"
 				sx={ { display: 'inline' } }
@@ -73,10 +85,7 @@ Dialog.propTypes = {
 	disabled: PropTypes.bool,
 	position: PropTypes.string,
 	startOpen: PropTypes.bool,
-	content: PropTypes.oneOfType( [
-		PropTypes.node,
-		PropTypes.func,
-	] ),
+	content: PropTypes.oneOfType( [ PropTypes.node, PropTypes.func ] ),
 };
 
 export { Dialog };

package/src/system/Dialog/Dialog.stories.jsx

@@ -19,7 +19,7 @@ export default {
 };
 
 const DropdownTrigger = <Button>Trigger Dropdown</Button>;
-const ModalTrigger = <Button sx={{ mr: 3 }}>Trigger Modal</Button>;
+const ModalTrigger = <Button sx={ { mr: 3 } }>Trigger Modal</Button>;
 
 const DropdownContent = (
 	<div>
@@ -36,11 +36,11 @@ const DropdownContent = (
 );
 
 const ModalContent = (
-	<Box p={5}>
+	<Box p={ 5 }>
 		<Heading>This is a Modal</Heading>
-		<Text sx={{ fontSize: 3 }}>
-			A modal is used to perform more detailed actions that don&lsquo;t
-			necessarily need the context behind.
+		<Text sx={ { fontSize: 3 } }>
+			A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+			behind.
 		</Text>
 	</Box>
 );
@@ -49,16 +49,12 @@ export const Default = () => (
 	<Flex>
 		<Box>
 			<Dialog
-				trigger={ModalTrigger}
-				content={ModalContent}
-				sx={{ width: 480 }}
+				trigger={ ModalTrigger }
+				content={ ModalContent }
+				sx={ { width: 480 } }
 				variant="modal"
 			/>
 		</Box>
-		<Dialog
-			trigger={DropdownTrigger}
-			content={DropdownContent}
-			sx={{ width: 200 }}
-		/>
+		<Dialog trigger={ DropdownTrigger } content={ DropdownContent } sx={ { width: 200 } } />
 	</Flex>
 );

package/src/system/Dialog/DialogButton.js

@@ -7,26 +7,30 @@ import PropTypes from 'prop-types';
 import { MdExpandMore } from 'react-icons/md';
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 import { Button, Text } from '../';
 
 const DialogButton = ( { label, variant = 'secondary', value, children, ...props } ) => (
-	<Button variant={ variant } sx={ {
-		textAlign: 'left',
-		display: 'inline-flex',
-		py: 2,
-		pl: 3,
-		pr: 2,
-		alignItems: 'center' } } { ...props }
+	<Button
+		variant={ variant }
+		sx={ {
+			textAlign: 'left',
+			display: 'inline-flex',
+			py: 2,
+			pl: 3,
+			pr: 2,
+			alignItems: 'center',
+		} }
+		{ ...props }
 	>
 		{ children }
-		{ label &&
-			<Text as="span" sx={{ mb: 0, color: 'muted', mr: 2, flex: '0 0 auto' }}>
+		{ label && (
+			<Text as="span" sx={ { mb: 0, color: 'muted', mr: 2, flex: '0 0 auto' } }>
 				{ label }:
 			</Text>
-		}
-		{ value &&
+		) }
+		{ value && (
 			<Text
 				as="span"
 				sx={ {
@@ -40,7 +44,7 @@ const DialogButton = ( { label, variant = 'secondary', value, children, ...props
 			>
 				{ value }
 			</Text>
-		}
+		) }
 		<MdExpandMore sx={ { ml: 2, top: 0, display: 'block', flex: '0 0 auto' } } />
 	</Button>
 );

package/src/system/Dialog/DialogDivider.js

@@ -5,7 +5,7 @@
  */
 
 const DialogDivider = props => (
-	<div sx={{ height: 1, backgroundColor: 'border', my: 1 }} { ...props } />
+	<div sx={ { height: 1, backgroundColor: 'border', my: 1 } } { ...props } />
 );
 
 export { DialogDivider };

package/src/system/Dialog/DialogMenu.js

@@ -5,11 +5,7 @@
  */
 
 const DialogMenu = props => (
-	<ul
-		role="menu"
-		sx={{ listStyleType: 'none', m: 0, px: 0, py: 1 }}
-		{...props}
-	/>
+	<ul role="menu" sx={ { listStyleType: 'none', m: 0, px: 0, py: 1 } } { ...props } />
 );
 
 export { DialogMenu };

package/src/system/Dialog/DialogMenuItem.js

@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef } from 'react';
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 import { Box, Spinner } from '../';
 
 const DialogMenuItem = ( { loading = false, children, ...props } ) => {
@@ -57,12 +57,8 @@ const DialogMenuItem = ( { loading = false, children, ...props } ) => {
 				} }
 				{ ...props }
 			>
-				<Box sx={ { flex: '1 1 auto' } }>
-					{ children }
-				</Box>
-				{ loading &&
-					<Spinner sx={ { width: 12 } } />
-				}
+				<Box sx={ { flex: '1 1 auto' } }>{ children }</Box>
+				{ loading && <Spinner sx={ { width: 12 } } /> }
 			</Box>
 		</li>
 	);

package/src/system/Dialog/DialogTrigger.js

@@ -6,6 +6,6 @@
 
 import { Box } from '../';
 
-const DialogTrigger = props => <Box sx={{ display: 'inline' }} {...props} />;
+const DialogTrigger = props => <Box sx={ { display: 'inline' } } { ...props } />;
 
 export { DialogTrigger };

package/src/system/Dialog/index.js

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

package/src/system/Flex/Flex.js

@@ -5,6 +5,6 @@
  */
 import { Flex as ThemeFlex } from 'theme-ui';
 
-const Flex = props => <ThemeFlex {...props} />;
+const Flex = props => <ThemeFlex { ...props } />;
 
 export { Flex };

package/src/system/Flex/index.js

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

package/src/system/Form/AsyncSearchSelect.js

@@ -7,19 +7,15 @@ import PropTypes from 'prop-types';
 import { withAsyncPaginate } from 'react-select-async-paginate';
 
 /**
-  * Internal dependencies
-  */
+ * 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 }
-	/>
+	<CustomAsyncPaginate SelectComponent={ SearchSelect } loadOptions={ options } { ...props } />
 );
 
 AsyncSearchSelect.propTypes = {

package/src/system/Form/Checkbox.js

@@ -7,35 +7,39 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import PropTypes from 'prop-types';
 import { MdDone } from 'react-icons/md';
 
-const StyledCheckbox = props => <CheckboxPrimitive.Root
-	sx={ {
-		all: 'unset',
-		backgroundColor: 'grey.10',
-		width: 16,
-		height: 16,
-		borderRadius: 1,
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'center',
-		'&:hover': { backgroundColor: 'grey.20' },
-		'&:focus': { boxShadow: '0 0 0 2px black' },
-		'&[data-state=checked]': {
-			backgroundColor: 'primary',
-			color: 'brand.0',
-		},
-		svg: {
-			display: 'block',
-		},
-	} }
-	{ ...props }
-/>;
+const StyledCheckbox = props => (
+	<CheckboxPrimitive.Root
+		sx={ {
+			all: 'unset',
+			backgroundColor: 'grey.10',
+			width: 16,
+			height: 16,
+			borderRadius: 1,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			'&:hover': { backgroundColor: 'grey.20' },
+			'&:focus': { boxShadow: '0 0 0 2px black' },
+			'&[data-state=checked]': {
+				backgroundColor: 'primary',
+				color: 'brand.0',
+			},
+			svg: {
+				display: 'block',
+			},
+		} }
+		{ ...props }
+	/>
+);
 
-const StyledIndicator = props => <CheckboxPrimitive.Indicator
-	sx={ {
-		color: 'brand.0',
-	} }
-	{ ...props }
-/>;
+const StyledIndicator = props => (
+	<CheckboxPrimitive.Indicator
+		sx={ {
+			color: 'brand.0',
+		} }
+		{ ...props }
+	/>
+);
 
 const Checkbox = ( { disabled, ...props } ) => (
 	<StyledCheckbox