@automattic/vip-design-system 0.7.1 → 0.9.1

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,7 +35,7 @@ const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', o
 );
 
 ConfirmationDialogContent.propTypes = {
-	title: PropTypes.string,
+	title: PropTypes.node,
 	body: PropTypes.node,
 	label: PropTypes.string,
 	onClose: 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.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/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', position = "left", ...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', position = "l
 				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>
 	);
@@ -87,10 +100,10 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', position = "l
 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

@@ -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',
@@ -66,4 +66,6 @@ Input.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
+Input.displayName = 'Input';
+
 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

@@ -3,7 +3,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import PropTypes from 'prop-types';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { MdCheckCircle } from 'react-icons/md';
@@ -21,7 +20,7 @@ const RadioBoxGroup = ( { onChange, groupLabel, value, options, ...props } ) =>
 		sx={ {
 			display: 'flex',
 			gap: 2,
-			
+
 		} }
 		{ ...props }
 	>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 /**
  * Internal dependencies
@@ -32,7 +32,6 @@ const options = [
 ];
 
 export const Default = () => {
-	const [ value, setValue ] = useState('one');
-	return <RadioBoxGroup value={ value } onChange={ newValue => setValue( newValue ) } groupLabel="group" options={ options } />
-
-}
+	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

@@ -14,7 +14,7 @@ import { Validation, Label } from '../';
 const Textarea = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
 	<React.Fragment>
 		{ label &&
-			<Label for={ forLabel }>
+			<Label htmlFor={ forLabel }>
 				{ label }
 				{ required &&
 					'*'
@@ -61,4 +61,6 @@ Textarea.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
+Textarea.displayName = 'Textarea';
+
 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',

package/src/system/Form/ToggleGroup.js

@@ -3,31 +3,29 @@
 /**
  * External dependencies
  */
- import React from 'react';
- import PropTypes from 'prop-types';
- import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
- import { MdCheckCircle } from "react-icons/md";
- 
- const ToggleGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
-	 <RadioGroupPrimitive.Root
-		 onValueChange={ onChange }
-		 value={ value }
-		 aria-label={ groupLabel }
-		 sx={ {
+import PropTypes from 'prop-types';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+const ToggleGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
+	<RadioGroupPrimitive.Root
+		onValueChange={ onChange }
+		value={ value }
+		aria-label={ groupLabel }
+		sx={ {
 			bg: 'backgroundSecondary',
 			p: 1,
 			display: 'flex',
 			alignItems: 'center',
 		} }
-		 { ...props }
-	 >
-		 {
-			 options.map( ( option, index ) => (
-				 <RadioGroupPrimitive.Item
-					 key={ option.value }
-					 value={ option.value }
-					 id={ `o${ index }` }
-					 sx={ {
+		{ ...props }
+	>
+		{
+			options.map( ( option, index ) => (
+				<RadioGroupPrimitive.Item
+					key={ option.value }
+					value={ option.value }
+					id={ `o${ index }` }
+					sx={ {
 						fontSize: 1,
 						color: 'muted',
 						background: 'none',
@@ -47,20 +45,19 @@
 							color: 'heading',
 						},
 					} }
-				 >
-					 { option.label }
-				 </RadioGroupPrimitive.Item>
-			 ) )
-		 }
-	 </RadioGroupPrimitive.Root>
- );
- 
- ToggleGroup.propTypes = {
-	 onChange: PropTypes.func,
-	 options: PropTypes.array,
-	 value: PropTypes.string,
-	 groupLabel: PropTypes.string,
- };
- 
- export { ToggleGroup };
- 
+				>
+					{ option.label }
+				</RadioGroupPrimitive.Item>
+			) )
+		}
+	</RadioGroupPrimitive.Root>
+);
+
+ToggleGroup.propTypes = {
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	value: PropTypes.string,
+	groupLabel: PropTypes.string,
+};
+
+export { ToggleGroup };

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

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

package/src/system/Form/ToggleRow.js

@@ -36,7 +36,7 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 						flex: '0 0 auto',
 					} }
 				>
-					<img src={ image } width={ 32 } sx={ { display: 'block' } } />
+					<img src={ image } width={ 32 } sx={ { display: 'block' } } alt="Icon representing a toggle" />
 				</Card>
 			</Box>
 		) }
@@ -57,10 +57,10 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 );
 
 ToggleRow.propTypes = {
-	image: PropTypes.string,
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	badge: PropTypes.string,
-	title: PropTypes.string,
-	subTitle: PropTypes.string,
+	title: PropTypes.node,
+	subTitle: PropTypes.node,
 	body: PropTypes.node,
 	meta: PropTypes.node,
 	sx: PropTypes.object,

package/src/system/Form/Validation.js

@@ -15,8 +15,8 @@ const Validation = ( { children, isValid, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
 
 	return (
-		<Heading variant="h5" as="p" sx={ { color: isValid ? 'green.50' : 'red.50' } } { ...props }>
-			<Icon sx={ { mr: 1, position: 'relative', top: '0.125em' } } />
+		<Heading variant="h5" as="p" sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } } { ...props }>
+			<Icon sx={ { mr: 1 } } />
 			{ children }
 		</Heading>
 	);

package/src/system/Grid/Grid.stories.js

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

package/src/system/Heading/Heading.stories.js

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