@automattic/vip-design-system 0.10.3 → 0.12.0

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

@@ -6,75 +6,47 @@
 import classNames from 'classnames';
 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} />
-	</CheckBoxWrapper>
-);
-
-Toggle.propTypes = {
-	name: PropTypes.string,
-	className: PropTypes.any,
-};
+import * as Switch from '@radix-ui/react-switch';
 
-export { Toggle };
-
-const CheckBoxWrapper = props => (
-	<div sx={{ position: 'relative' }} {...props} />
-);
+// Documentation for Radix Switch component
+// https://www.radix-ui.com/docs/primitives/components/switch
 
-const CheckBoxLabel = props => (
-	<label
-		sx={{
-			position: 'absolute',
-			top: '0',
-			left: '0',
-			width: '42px',
-			height: '24px',
-			borderRadius: '15px',
+export const Toggle = ( { name = 'toggle', onChange, className = null, ...rest } ) => (
+	<Switch.Root
+		className={ classNames( 'vip-toggle-component', className ) }
+		sx={ {
+			all: 'unset',
+			width: 42,
+			height: 24,
 			backgroundColor: 'muted',
-			cursor: 'pointer',
-			'&::after': {
-				content: "''",
+			borderRadius: '15px',
+			position: 'relative',
+			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+			'&[data-state="checked"]': { backgroundColor: 'success' },
+		} }
+		name={ name }
+		onCheckedChange={ onChange || undefined }
+		{ ...rest }
+	>
+		<Switch.Thumb
+			sx={ {
 				display: 'block',
+				width: 18,
+				height: 18,
+				backgroundColor: 'white',
 				borderRadius: '50%',
-				width: '18px',
-				height: '18px',
-				margin: '3px',
-				backgroundColor: 'card',
-				boxShadow: 'low',
-				transition: '0.2s',
-			},
-		}}
-		{...props}
-	/>
+				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+				transition: 'transform 100ms',
+				transform: 'translateX(3px)',
+				willChange: 'transform',
+				'&[data-state="checked"]': { transform: 'translateX(21px)' },
+			} }
+		/>
+	</Switch.Root>
 );
 
-const CheckBox = props => (
-	<input
-		sx={{
-			opacity: '0',
-			zIndex: '1',
-			borderRadius: '15px',
-			width: '42px',
-			height: '24px',
-			padding: 0,
-			margin: 0,
-			display: 'block',
-			'&:checked + label': {
-				backgroundColor: 'success',
-				'&::after': {
-					content: "''",
-					display: 'block',
-					borderRadius: '50%',
-					width: '18px',
-					height: '18px',
-					marginLeft: '21px',
-					transition: '0.2s',
-				},
-			},
-		}}
-		{...props}
-	/>
-);
+Toggle.propTypes = {
+	name: PropTypes.string,
+	className: PropTypes.any,
+	onChange: PropTypes.func,
+};

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Toggle, Label } from '..';
+
+export default {
+	title: 'Toggle',
+	component: Toggle,
+	argTypes: {
+		checked: {
+			options: [ true, false ],
+			default: true,
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Default = args => (
+	<form>
+		<Toggle defaultChecked checked={ args.checked } aria-label="Feature flag" />
+	</form>
+);
+
+const WithLabel = args => (
+	<form>
+		<Label htmlFor="custom-label-input">Custom Label here</Label>
+
+		<Toggle
+			id="custom-label-input"
+			defaultChecked
+			checked={ args.checked }
+			aria-label="Feature flag"
+		/>
+	</form>
+);
+
+export const Primary = Default.bind( { checked: true } );
+export const ExternalLabel = WithLabel.bind( { checked: true } );

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Toggle } from './Toggle';
+
+describe( '<Toggle />', () => {
+	it( 'renders the Toggle component', async () => {
+		const { container } = render(
+			<Toggle aria-label="Dinner room Light" defaultChecked name="my-toggle" />
+		);
+
+		expect( screen.getByRole( 'switch' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

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>