@automattic/vip-design-system 0.10.3 → 0.12.0

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,

package/src/system/Form/Input.js

@@ -11,51 +11,49 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
-	<React.Fragment>
-		{ label &&
-			<Label htmlFor={ forLabel }>
-				{ label }
-				{ required &&
-					'*'
-				}
-			</Label>
-		}
-		<input
-			{ ...props }
-			ref={ ref }
-			id={ forLabel }
-			required={ required }
-			sx={ {
-				border: '1px solid',
-				borderColor: 'border',
-				backgroundColor: 'card',
-				borderRadius: 1,
-				lineHeight: 'inherit',
-				px: 3,
-				py: 2,
-				fontSize: 2,
-				mb: 2,
-				color: 'text',
-				display: 'block',
-				width: '100%',
-				'&:focus': {
-					borderColor: 'brand.60',
-					outline: 'none',
-				},
-				'&:disabled': {
-					bg: 'backgroundSecondary',
-				},
-				'&::placeholder': {
-					color: 'placeholder',
-				},
-			} }
-		/>
-		{ hasError && errorMessage &&
-			<Validation>{ errorMessage }</Validation>
-		}
-	</React.Fragment>
-) );
+const Input = React.forwardRef(
+	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+		<React.Fragment>
+			{ label && (
+				<Label htmlFor={ forLabel }>
+					{ label }
+					{ required && '*' }
+				</Label>
+			) }
+			<input
+				{ ...props }
+				ref={ ref }
+				id={ forLabel }
+				required={ required }
+				sx={ {
+					border: '1px solid',
+					borderColor: 'border',
+					backgroundColor: 'card',
+					borderRadius: 1,
+					lineHeight: 'inherit',
+					px: 3,
+					py: 2,
+					fontSize: 2,
+					mb: 2,
+					color: 'text',
+					display: 'block',
+					width: '100%',
+					'&:focus': {
+						borderColor: 'brand.60',
+						outline: 'none',
+					},
+					'&:disabled': {
+						bg: 'backgroundSecondary',
+					},
+					'&::placeholder': {
+						color: 'placeholder',
+					},
+				} }
+			/>
+			{ hasError && errorMessage && <Validation>{ errorMessage }</Validation> }
+		</React.Fragment>
+	)
+);
 
 Input.propTypes = {
 	variant: PropTypes.string,

package/src/system/Form/Label.js

@@ -9,8 +9,8 @@ const Label = props => (
 	<Heading
 		variant="h4"
 		as="label"
-		sx={{ display: 'block', mb: 2, color: 'muted' }}
-		{...props}
+		sx={ { display: 'block', mb: 2, color: 'muted' } }
+		{ ...props }
 	/>
 );
 

package/src/system/Form/RadioBoxGroup.js

@@ -20,41 +20,43 @@ const RadioBoxGroup = ( { onChange, groupLabel, value, options, ...props } ) =>
 		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>
-			) )
-		}
+		{ 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>
 );
 

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

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

package/src/system/Form/SearchSelect.js

@@ -14,14 +14,14 @@ import { Flex, Text } from '..';
 
 // Option component
 export const Option = ( { label, isSelected, ...props } ) => (
-	<components.Option {...props}>
-		<Flex sx={{ alignItems: 'center' }}>
-			{isSelected && (
-				<Text as="span" sx={{ mb: 0, mr: 2, color: 'green.80', svg: { display: 'block' } }}>
+	<components.Option { ...props }>
+		<Flex sx={ { alignItems: 'center' } }>
+			{ isSelected && (
+				<Text as="span" sx={ { mb: 0, mr: 2, color: 'green.80', svg: { display: 'block' } } }>
 					<MdDone />
 				</Text>
-			)}
-			<Text as="span" sx={{ mb: 0, flex: '1 1 auto', color: 'heading' }}>
+			) }
+			<Text as="span" sx={ { mb: 0, flex: '1 1 auto', color: 'heading' } }>
 				{ label }
 			</Text>
 		</Flex>
@@ -73,7 +73,7 @@ DropdownIndicator.propTypes = {
 
 // ClearIndicator component
 const ClearIndicator = ( { innerProps: { ref, ...restInnerProps }, ...props } ) => (
-	<MdClose ref={ref} {...restInnerProps} {...props} sx={{ color: 'text', mr: 2 }} />
+	<MdClose ref={ ref } { ...restInnerProps } { ...props } sx={ { color: 'text', mr: 2 } } />
 );
 
 ClearIndicator.propTypes = {

package/src/system/Form/Select.js

@@ -13,7 +13,16 @@ import { SearchSelect } from './SearchSelect';
 import { InlineSelect } from './InlineSelect';
 import { AsyncSearchSelect } from './AsyncSearchSelect';
 
-const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch, usePortal, ...props } ) => {
+const Select = ( {
+	isMulti = false,
+	isInline,
+	isAsync,
+	options,
+	label,
+	isSearch,
+	usePortal,
+	...props
+} ) => {
 	let Component;
 	const selectRef = React.useRef();
 	const portalProps = {};
@@ -36,7 +45,17 @@ const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch,
 			break;
 	}
 
-	return <div ref={selectRef} className="vip-select-component"><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
+	return (
+		<div ref={ selectRef } className="vip-select-component">
+			<Component
+				isMulti={ isMulti }
+				label={ label }
+				options={ options }
+				{ ...portalProps }
+				{ ...props }
+			/>
+		</div>
+	);
 };
 
 Select.propTypes = {