@automattic/vip-design-system 0.10.3 → 0.11.0

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

package/src/system/Form/InlineSelect.js

@@ -32,7 +32,14 @@ const selectStyles = {
 	menu: () => ( { boxShadow: 'none', borderTop: '1px solid' } ),
 };
 
-const InlineSelect = ( { label, value, options, noneLabel = 'All', position = 'left', ...props } ) => {
+const InlineSelect = ( {
+	label,
+	value,
+	options,
+	noneLabel = 'All',
+	position = 'left',
+	...props
+} ) => {
 	let valueLabel = noneLabel;
 
 	if ( Array.isArray( value ) && value.length ) {
@@ -49,18 +56,18 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', position = 'l
 		<Box>
 			<Select
 				autoFocus
-				backspaceRemovesValue={false}
-				components={{ Option, DropdownIndicator: null, IndicatorSeparator: null }}
-				controlShouldRenderValue={false}
-				hideSelectedOptions={false}
-				isClearable={false}
+				backspaceRemovesValue={ false }
+				components={ { Option, DropdownIndicator: null, IndicatorSeparator: null } }
+				controlShouldRenderValue={ false }
+				hideSelectedOptions={ false }
+				isClearable={ false }
 				menuIsOpen
-				styles={selectStyles}
+				styles={ selectStyles }
 				classNamePrefix={ 'select' }
-				options={options}
+				options={ options }
 				placeholder="Search..."
-				tabSelectsValue={false}
-				value={value}
+				tabSelectsValue={ false }
+				value={ value }
 				sx={ {
 					'.select__control': {
 						background: 'none',
@@ -83,16 +90,16 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', position = 'l
 						borderColor: 'border',
 					},
 				} }
-				{...props}
+				{ ...props }
 			/>
 		</Box>
 	);
 
 	return (
 		<Dialog
-			content={Content}
+			content={ Content }
 			position={ position }
-			trigger={<DialogButton sx={{ width: '100%' }} label={label} value={valueLabel} />}
+			trigger={ <DialogButton sx={ { width: '100%' } } label={ label } value={ valueLabel } /> }
 		/>
 	);
 };
@@ -100,10 +107,7 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', position = 'l
 InlineSelect.propTypes = {
 	label: PropTypes.string,
 	// https://react-select.com/props
-	value: PropTypes.oneOfType( [
-		PropTypes.array,
-		PropTypes.object,
-	] ),
+	value: PropTypes.oneOfType( [ PropTypes.array, PropTypes.object ] ),
 	options: PropTypes.array,
 	position: PropTypes.string,
 	noneLabel: PropTypes.string,