@automattic/vip-design-system 0.10.2 → 0.11.1

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 = {

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

@@ -39,32 +39,32 @@ export const Multi = () => {
 	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={{ mr: 2, width: 400 }}>
+		<Box sx={ { mr: 2, width: 400 } }>
 			<Select
 				label="Type"
-				value={value}
+				value={ value }
 				isMulti
 				placeholder="Select domains..."
-				options={options}
-				onChange={newValue => setValue( newValue )}
+				options={ options }
+				onChange={ newValue => setValue( newValue ) }
 			/>
 		</Box>
 	);
 };
 
-export const usePortal = () => {
+export const UsePortal = () => {
 	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={{ mr: 2, width: 400 }}>
+		<Box sx={ { mr: 2, width: 400 } }>
 			<Select
 				label="Type"
-				value={value}
+				value={ value }
 				isMulti
 				placeholder="Select domains..."
 				usePortal
-				options={options}
-				onChange={newValue => setValue( newValue )}
+				options={ options }
+				onChange={ newValue => setValue( newValue ) }
 			/>
 		</Box>
 	);
@@ -74,13 +74,13 @@ export const Single = () => {
 	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={{ mr: 2, width: 200 }}>
+		<Box sx={ { mr: 2, width: 200 } }>
 			<Select
 				label="User"
-				value={value}
+				value={ value }
 				placeholder="Select a domain..."
-				options={options}
-				onChange={newValue => setValue( newValue )}
+				options={ options }
+				onChange={ newValue => setValue( newValue ) }
 			/>
 		</Box>
 	);
@@ -90,16 +90,16 @@ export const Inline = () => {
 	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={{ mr: 2, width: 200 }}>
+		<Box sx={ { mr: 2, width: 200 } }>
 			<Select
 				label="User"
-				value={value}
+				value={ value }
 				isInline
 				isMulti
 				noneLabel="Everyone"
 				placeholder="Filter by user..."
-				options={options}
-				onChange={newValue => setValue( newValue )}
+				options={ options }
+				onChange={ newValue => setValue( newValue ) }
 			/>
 		</Box>
 	);
@@ -107,29 +107,26 @@ export const Inline = () => {
 
 export const Async = () => {
 	const [ value, setValue ] = useState( [] );
-	const loadOptions = async () => new Promise( resolve => {
-		setTimeout( () => {
-			resolve( {
-				options: [
-					...options,
-					{ value: 'newvanilla', label: 'New Vanilla' },
-				],
-			} );
-		}, 2000 );
-	} );
+	const loadOptions = async () =>
+		new Promise( resolve => {
+			setTimeout( () => {
+				resolve( {
+					options: [ ...options, { value: 'newvanilla', label: 'New Vanilla' } ],
+				} );
+			}, 2000 );
+		} );
 
 	return (
-		<Box sx={{ mr: 2, width: 200 }}>
+		<Box sx={ { mr: 2, width: 200 } }>
 			<Select
 				label="Async Select"
-				value={value}
+				value={ value }
 				isAsync
-				usePortal
 				loadOptions={ loadOptions }
 				noneLabel="Everyone"
 				placeholder="Load async..."
-				options={options}
-				onChange={newValue => setValue( newValue )}
+				options={ options }
+				onChange={ newValue => setValue( newValue ) }
 			/>
 		</Box>
 	);
@@ -137,8 +134,8 @@ export const Async = () => {
 
 export const DropdownMenu = () => {
 	return (
-		<Box sx={{ mr: 2, width: 200 }}>
-			<Dialog trigger={DropdownTrigger} content={DropdownContent} sx={{ width: 200 }} />
+		<Box sx={ { mr: 2, width: 200 } }>
+			<Dialog trigger={ DropdownTrigger } content={ DropdownContent } sx={ { width: 200 } } />
 		</Box>
 	);
 };

package/src/system/Form/Select.test.js

@@ -5,18 +5,13 @@ import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
-  * Internal dependencies
-  */
+ * Internal dependencies
+ */
 import { Select } from './Select';
 
 describe( '<Select />', () => {
 	it( 'renders the Select component with the specified placeholder', () => {
-		render(
-			<Select
-				inputId={ 'search-select' }
-				placeholder={ 'Search...' }
-			/>
-		);
+		render( <Select inputId={ 'search-select' } placeholder={ 'Search...' } /> );
 
 		// Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
 		const placeholder = screen.getByText( 'Search...' );

package/src/system/Form/Textarea.js

@@ -11,46 +11,44 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const Textarea = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
-	<React.Fragment>
-		{ label &&
-			<Label htmlFor={ forLabel }>
-				{ label }
-				{ required &&
-					'*'
-				}
-			</Label>
-		}
-		<textarea
-			{ ...props }
-			ref={ ref }
-			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': {
-					backgroundColor: 'background',
-				},
-			} }
-		/>
-		{ hasError && errorMessage &&
-			<Validation>{ errorMessage }</Validation>
-		}
-	</React.Fragment>
-) );
+const Textarea = React.forwardRef(
+	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+		<React.Fragment>
+			{ label && (
+				<Label htmlFor={ forLabel }>
+					{ label }
+					{ required && '*' }
+				</Label>
+			) }
+			<textarea
+				{ ...props }
+				ref={ ref }
+				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': {
+						backgroundColor: 'background',
+					},
+				} }
+			/>
+			{ hasError && errorMessage && <Validation>{ errorMessage }</Validation> }
+		</React.Fragment>
+	)
+);
 
 Textarea.propTypes = {
 	variant: PropTypes.string,

package/src/system/Form/Toggle.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 
 const Toggle = ( { name = 'toggle', className = null, ...props } ) => (
 	<CheckBoxWrapper className={ classNames( 'vip-checkbox-component', className ) }>
-		<CheckBox name={name} id={name} type="checkbox" {...props} />
-		<CheckBoxLabel htmlFor={name} />
+		<CheckBox name={ name } id={ name } type="checkbox" { ...props } />
+		<CheckBoxLabel htmlFor={ name } />
 	</CheckBoxWrapper>
 );
 
@@ -20,13 +20,11 @@ Toggle.propTypes = {
 
 export { Toggle };
 
-const CheckBoxWrapper = props => (
-	<div sx={{ position: 'relative' }} {...props} />
-);
+const CheckBoxWrapper = props => <div sx={ { position: 'relative' } } { ...props } />;
 
 const CheckBoxLabel = props => (
 	<label
-		sx={{
+		sx={ {
 			position: 'absolute',
 			top: '0',
 			left: '0',
@@ -46,14 +44,14 @@ const CheckBoxLabel = props => (
 				boxShadow: 'low',
 				transition: '0.2s',
 			},
-		}}
-		{...props}
+		} }
+		{ ...props }
 	/>
 );
 
 const CheckBox = props => (
 	<input
-		sx={{
+		sx={ {
 			opacity: '0',
 			zIndex: '1',
 			borderRadius: '15px',
@@ -74,7 +72,7 @@ const CheckBox = props => (
 					transition: '0.2s',
 				},
 			},
-		}}
-		{...props}
+		} }
+		{ ...props }
 	/>
 );