@automattic/vip-design-system 0.7.0 → 0.9.0

package/src/system/Code/Code.stories.js

@@ -17,6 +17,9 @@ export const Default = () => (
 	<React.Fragment>
 		<Code>Code</Code>
 		<Code showCopy={true}>Code with Icon</Code>
-		<Code showCopy={true} onCopy={ () => 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/ConfirmationDialog/ConfirmationDialog.js

@@ -35,8 +35,8 @@ const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', o
 );
 
 ConfirmationDialogContent.propTypes = {
-	title: PropTypes.string,
-	body: PropTypes.string,
+	title: PropTypes.node,
+	body: PropTypes.node,
 	label: PropTypes.string,
 	onClose: PropTypes.func,
 	onConfirm: PropTypes.func,

package/src/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Dialog/Dialog.js

@@ -46,7 +46,7 @@ const Dialog = ( { trigger, position = 'left', startOpen = false, content, disab
 	};
 
 	return (
-		<div sx={ { position: 'relative' } } ref={ dialogRef }>
+		<div onClick={ e => e.stopPropagation() } sx={ { position: 'relative' } } ref={ dialogRef }>
 			<DialogTrigger
 				tabIndex="0"
 				sx={ { display: 'inline' } }

package/src/system/Dialog/Dialog.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Dialog/DialogButton.js

@@ -4,7 +4,6 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { MdExpandMore } from 'react-icons/md';
 
 /**
@@ -33,10 +32,10 @@ const DialogButton = ( { label, variant = 'secondary', value, children, ...props
 				sx={ {
 					mb: 0,
 					flex: '1 1 auto',
-					'white-space': 'nowrap',
+					whiteSpace: 'nowrap',
 					overflow: 'hidden',
 					color: 'heading',
-					'text-overflow': 'ellipsis',
+					textOverflow: 'ellipsis',
 				} }
 			>
 				{ value }

package/src/system/Dialog/DialogContent.js

@@ -38,8 +38,21 @@ const DialogContent = ( { position = 'left', variant = 'dropdown', onClose, ...p
 						left: 0,
 						right: 0,
 						bottom: 0,
-						backgroundColor: 'grey.50',
 						opacity: 0.7,
+						background: `linear-gradient(
+							198.09deg,
+							#E5F0F6 2.01%,
+							rgba(235, 238, 242, 0) 43.18%,
+							rgba(249, 234, 232, 0) 47.86%,
+							#FFE9D1 94.31%
+						),
+						linear-gradient(
+							98.65deg,
+							#FFE8E6 0.58%,
+							rgba(255, 233, 214, 0) 52.45%,
+							rgba(255, 233, 219, 0) 53.76%,
+							#FFE9D1 105.86%
+						), #F5F2F1`,
 					} }
 				/>
 			) }
@@ -68,8 +81,8 @@ const SidebarMotion = props => (
 		sx={ {
 			marginTop: 2,
 			borderRadius: 2,
-			backgroundColor: 'card',
-			boxShadow: 'low',
+			backgroundColor: 'dialog',
+			boxShadow: 'medium',
 			position: 'absolute',
 			top: '100%',
 			zIndex: 100,
@@ -110,7 +123,7 @@ const DialogMotion = ( { variant, position, ...props } ) => {
 				marginTop: 2,
 				transformOrigin: transformOrigin,
 				borderRadius: 2,
-				backgroundColor: 'card',
+				backgroundColor: 'dialog',
 				boxShadow: 'low',
 				position: 'absolute',
 				top: '100%',

package/src/system/Flex/Flex.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Form/Checkbox.js

@@ -3,11 +3,53 @@
 /**
  * External dependencies
  */
-import { Checkbox as ThemeCheckbox } from 'theme-ui';
+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 StyledIndicator = props => <CheckboxPrimitive.Indicator
+	sx={ {
+		color: 'brand.0',
+	} }
+	{ ...props }
+/>;
 
 const Checkbox = ( { disabled, ...props } ) => (
-	<ThemeCheckbox sx={ { opacity: disabled ? 0.4 : 1 } } disabled={ disabled } { ...props } />
+	<StyledCheckbox
+		sx={ {
+			opacity: disabled ? 0.4 : 1,
+			border: 'none',
+		} }
+		disabled={ disabled }
+		{ ...props }
+	>
+		<StyledIndicator>
+			<MdDone />
+		</StyledIndicator>
+	</StyledCheckbox>
 );
 
 Checkbox.propTypes = {

package/src/system/Form/InlineSelect.js

@@ -20,7 +20,6 @@ const selectStyles = {
 		border: 0,
 		padding: 0,
 		boxShadow: 'none',
-		fontSize: vipTheme.fontSizes[ 2 ],
 	} ),
 	container: provided => ( { ...provided, padding: 0 } ),
 	input: provided => ( { ...provided, padding: 0 } ),
@@ -30,10 +29,10 @@ const selectStyles = {
 		paddingBottom: vipTheme.space[ 1 ],
 		paddingLeft: vipTheme.space[ 2 ],
 	} ),
-	menu: () => ( { boxShadow: 'none', borderTop: `1px solid ${ vipTheme.colors.border }` } ),
+	menu: () => ( { boxShadow: 'none', borderTop: '1px solid' } ),
 };
 
-const InlineSelect = ( { label, value, options, noneLabel = 'All', ...props } ) => {
+const InlineSelect = ( { label, value, options, noneLabel = 'All', position = 'left', ...props } ) => {
 	let valueLabel = noneLabel;
 
 	if ( Array.isArray( value ) && value.length ) {
@@ -56,21 +55,35 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', ...props } )
 				hideSelectedOptions={false}
 				isClearable={false}
 				menuIsOpen
-				options={options}
 				styles={selectStyles}
+				classNamePrefix={ 'select' }
+				options={options}
 				placeholder="Search..."
 				tabSelectsValue={false}
 				value={value}
-				{...props}
-				theme={theme => ( {
-					...theme,
-					colors: {
-						...theme.colors,
-						primary25: vipTheme.colors.hover,
-						primary50: vipTheme.colors.brand[ '7' ],
-						primary: vipTheme.colors.heading,
+				sx={ {
+					'.select__control': {
+						background: 'none',
+						color: 'heading',
+					},
+					'.select__single-value': {
+						color: 'heading',
+						px: 1,
 					},
-				} )}
+					'.react-select__option': {
+						bg: 'grey.10',
+						'&:hover': {
+							bg: 'grey.10',
+						},
+					},
+					'.select__option--is-focused': {
+						bg: 'grey.10',
+					},
+					'.select__menu': {
+						borderColor: 'border',
+					},
+				} }
+				{...props}
 			/>
 		</Box>
 	);
@@ -78,6 +91,7 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', ...props } )
 	return (
 		<Dialog
 			content={Content}
+			position={ position }
 			trigger={<DialogButton sx={{ width: '100%' }} label={label} value={valueLabel} />}
 		/>
 	);
@@ -86,11 +100,12 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', ...props } )
 InlineSelect.propTypes = {
 	label: PropTypes.string,
 	// https://react-select.com/props
-	value: PropTypes.oneOfType([
+	value: PropTypes.oneOfType( [
 		PropTypes.array,
 		PropTypes.object,
-	]),
+	] ),
 	options: PropTypes.array,
+	position: PropTypes.string,
 	noneLabel: PropTypes.string,
 };
 

package/src/system/Form/Input.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+const InputComponent = ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
 	<React.Fragment>
 		{ label &&
 			<Label htmlFor={ forLabel }>
@@ -28,7 +28,7 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 			required={ required }
 			sx={ {
 				border: '1px solid',
-				borderColor: 'border',
+				borderColor: 'grey.60',
 				backgroundColor: 'card',
 				borderRadius: 1,
 				lineHeight: 'inherit',
@@ -55,9 +55,9 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 			<Validation>{ errorMessage }</Validation>
 		}
 	</React.Fragment>
-) );
+);
 
-Input.propTypes = {
+InputComponent.propTypes = {
 	variant: PropTypes.string,
 	label: PropTypes.string,
 	hasError: PropTypes.bool,
@@ -66,4 +66,6 @@ Input.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
+const Input = React.forwardRef( InputComponent );
+
 export { Input };

package/src/system/Form/Input.stories.js

@@ -1,10 +1,5 @@
 /** @jsxImportSource theme-ui */
 
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Form/Label.js

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

package/src/system/Form/RadioBoxGroup.js

@@ -0,0 +1,68 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { MdCheckCircle } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Heading, Text } from '../';
+
+const RadioBoxGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
+	<RadioGroupPrimitive.Root
+		onValueChange={ onChange }
+		value={ value }
+		aria-label={ groupLabel }
+		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>
+			) )
+		}
+	</RadioGroupPrimitive.Root>
+);
+
+RadioBoxGroup.propTypes = {
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	value: PropTypes.string,
+	groupLabel: PropTypes.string,
+};
+
+export { RadioBoxGroup };

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from '..';
+
+export default {
+	title: 'RadioBoxGroup',
+	component: RadioBoxGroup,
+};
+
+const options = [
+	{
+		label: 'One',
+		value: 'one',
+		description: 'This is a description',
+	},
+	{
+		label: 'Two',
+		value: 'two',
+		description: 'This is a description',
+	},
+	{
+		label: 'Three',
+		value: 'three',
+		description: 'This is a description',
+	},
+];
+
+export const Default = () => {
+	const [ value, setValue ] = useState( 'one' );
+	return <RadioBoxGroup value={ value } onChange={ newValue => setValue( newValue ) } groupLabel="group" options={ options } />;
+};

package/src/system/Form/SearchSelect.js

@@ -10,42 +10,13 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { theme as vipTheme, Flex, Text } from '..';
-
-export const selectStyles = {
-	control: provided => ( {
-		...provided,
-		border: `1px solid ${ vipTheme.colors.border }`,
-		margin: 0,
-		padding: 0,
-		boxShadow: 'none',
-		fontSize: vipTheme.fontSizes[ 2 ],
-	} ),
-	option: provided => ( {
-		...provided,
-		paddingTop: vipTheme.space[ 1 ],
-		paddingBottom: vipTheme.space[ 1 ],
-		paddingLeft: vipTheme.space[ 2 ],
-	} ),
-	menu: provided => ( { ...provided, boxShadow: vipTheme.shadows.low } ),
-	indicatorSeparator: () => ( { display: 'none' } ),
-	valueContainer: provided => ( {
-		...provided,
-		paddingLeft: vipTheme.space[ 1 ],
-		paddingRight: vipTheme.space[ 1 ],
-	} ),
-	singleValue: provided => ( {
-		...provided,
-		paddingLeft: vipTheme.space[ 1 ],
-		paddingRight: vipTheme.space[ 1 ],
-	} ),
-};
+import { Flex, Text } from '..';
 
 export const Option = ( { label, isSelected, ...props } ) => (
 	<components.Option {...props}>
 		<Flex sx={{ alignItems: 'center' }}>
 			{isSelected && (
-				<Text as="span" sx={{ mb: 0, mr: 2, color: 'green.60', svg: { display: 'block' } }}>
+				<Text as="span" sx={{ mb: 0, mr: 2, color: 'green.80', svg: { display: 'block' } }}>
 					<MdDone />
 				</Text>
 			)}
@@ -73,19 +44,41 @@ ClearIndicator.propTypes = {
 const SearchSelect = props => (
 	<Select
 		{...props}
+		classNamePrefix={ 'select' }
 		components={{ Option, DropdownIndicator, ClearIndicator }}
-		styles={selectStyles}
-		theme={theme => ( {
-			...theme,
-			colors: {
-				...theme.colors,
-				primary25: vipTheme.colors.hover,
-				primary50: vipTheme.colors.brand[ '7' ],
-				primary: vipTheme.colors.heading,
-				dangerLight: vipTheme.colors.red[ '10' ],
-				danger: vipTheme.colors.red[ '70' ],
+		sx={ {
+			'.select__control': {
+				background: 'none',
+				color: 'heading',
+				border: '1px solid',
+				borderColor: 'border',
+				margin: 0,
+				padding: 0,
+				boxShadow: 'none',
+				fontSize: 2,
+			},
+			'.select__single-value': {
+				color: 'heading',
+				px: 1,
+			},
+			'.select__menu': {
+				bg: 'dialog',
+				boxShadow: 'medium',
+			},
+			'.react-select__option': {
+				color: 'text',
+				paddingTop: 1,
+				paddingBottom: 1,
+				paddingLeft: 2,
+				bg: 'hover',
+				'&:hover': {
+					bg: 'hover',
+				},
+			},
+			'.select__option--is-focused': {
+				bg: 'hover',
 			},
-		} )}
+		} }
 	/>
 );
 

package/src/system/Form/Select.js

@@ -3,27 +3,27 @@
 /**
  * External dependencies
  */
- import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
- /**
+/**
   * Internal dependencies
   */
- import { SearchSelect } from './SearchSelect';
- import { InlineSelect } from './InlineSelect';
+import { SearchSelect } from './SearchSelect';
+import { InlineSelect } from './InlineSelect';
 
- const Select = ( { isMulti = false, isInline, options, label, isSearch, ...props } ) => {
-	 if ( isInline ) {
-		 return <InlineSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
-	 }
-	 return <SearchSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
- };
+const Select = ( { isMulti = false, isInline, options, label, isSearch, ...props } ) => {
+	if ( isInline ) {
+		return <InlineSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+	}
+	return <SearchSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+};
 
- Select.propTypes = {
-	 isMulti: PropTypes.bool,
-	 isInline: PropTypes.bool,
-	 isSearch: PropTypes.bool,
-	 options: PropTypes.array,
-	 label: PropTypes.string,
- };
+Select.propTypes = {
+	isInline: PropTypes.bool,
+	isMulti: PropTypes.bool,
+	isSearch: PropTypes.bool,
+	label: PropTypes.string,
+	options: PropTypes.array,
+};
 
- export { Select };
+export { Select };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 /**
  * Internal dependencies

package/src/system/Form/Textarea.js

@@ -11,10 +11,10 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const Textarea = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+const TextareaComponent = ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
 	<React.Fragment>
 		{ label &&
-			<Label for={ forLabel }>
+			<Label htmlFor={ forLabel }>
 				{ label }
 				{ required &&
 					'*'
@@ -50,9 +50,9 @@ const Textarea = React.forwardRef( ( { variant, label, forLabel, hasError, requi
 			<Validation>{ errorMessage }</Validation>
 		}
 	</React.Fragment>
-) );
+);
 
-Textarea.propTypes = {
+TextareaComponent.propTypes = {
 	variant: PropTypes.string,
 	label: PropTypes.string,
 	hasError: PropTypes.bool,
@@ -61,4 +61,6 @@ Textarea.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
+const Textarea = React.forwardRef( TextareaComponent );
+
 export { Textarea };

package/src/system/Form/Toggle.js

@@ -61,7 +61,7 @@ const CheckBox = props => (
 			margin: 0,
 			display: 'block',
 			'&:checked + label': {
-				backgroundColor: 'green.50',
+				backgroundColor: 'success',
 				'&::after': {
 					content: "''",
 					display: 'block',