@automattic/vip-design-system 0.8.1 → 0.9.0

package/src/system/Form/InlineSelect.js

@@ -29,10 +29,10 @@ const selectStyles = {
 		paddingBottom: vipTheme.space[ 1 ],
 		paddingLeft: vipTheme.space[ 2 ],
 	} ),
-	menu: () => ( { boxShadow: 'none', borderTop: `1px solid` } ),
+	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 ) {
@@ -74,14 +74,14 @@ const InlineSelect = ( { label, value, options, noneLabel = 'All', position = "l
 						bg: 'grey.10',
 						'&:hover': {
 							bg: 'grey.10',
-						}
+						},
 					},
 					'.select__option--is-focused': {
 						bg: 'grey.10',
 					},
 					'.select__menu': {
 						borderColor: 'border',
-					}
+					},
 				} }
 				{...props}
 			/>
@@ -100,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

@@ -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 }>
@@ -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/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,7 +10,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { theme as vipTheme, Flex, Text } from '..';
+import { Flex, Text } from '..';
 
 export const Option = ( { label, isSelected, ...props } ) => (
 	<components.Option {...props}>
@@ -50,7 +50,7 @@ const SearchSelect = props => (
 			'.select__control': {
 				background: 'none',
 				color: 'heading',
-				border: `1px solid`,
+				border: '1px solid',
 				borderColor: 'border',
 				margin: 0,
 				padding: 0,
@@ -73,11 +73,11 @@ const SearchSelect = props => (
 				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/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

@@ -57,7 +57,7 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 );
 
 ToggleRow.propTypes = {
-	image: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]),
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	badge: PropTypes.string,
 	title: PropTypes.node,
 	subTitle: PropTypes.node,

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
  */

package/src/system/Link/Link.stories.js

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

package/src/system/Notice/Notice.js

@@ -11,28 +11,45 @@ import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 */
 import { Box, Flex, Heading, Card } from '../';
 
-const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, ...props } ) => {
-	let color = 'yellow';
+const NoticeIcon = ( { color, variant } ) => {
 	let Icon = MdWarning;
 
 	switch ( variant ) {
 		case 'info':
-			color = 'blue';
 			Icon = MdInfo;
 			break;
 		case 'alert':
-			color = 'red';
 			Icon = MdError;
 			break;
 		case 'success':
-			color = 'green';
 			Icon = MdCheckCircle;
 			break;
 	}
 
-	const NoticeIcon = ({ color }) => (
+	return (
 		<Icon sx={ { marginRight: 2, color, flex: '0 0 auto' } }/>
 	);
+};
+
+NoticeIcon.propTypes = {
+	color: PropTypes.string,
+	variant: PropTypes.string,
+};
+
+const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, ...props } ) => {
+	let color = 'yellow';
+
+	switch ( variant ) {
+		case 'info':
+			color = 'blue';
+			break;
+		case 'alert':
+			color = 'red';
+			break;
+		case 'success':
+			color = 'green';
+			break;
+	}
 
 	return (
 		<Card
@@ -41,7 +58,7 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 				borderRadius: 2,
 				bg: inline ? 'transparent' : `${ color }.10`,
 				p: inline ? 0 : 3,
-				color: `${color}.90`,
+				color: `${ color }.90`,
 				a: {
 					color: `${ color }.90`,
 					textDecoration: 'underline',
@@ -57,7 +74,7 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 				<Flex sx={ {
 					alignItems: 'center',
 				} }>
-					<NoticeIcon color={`${ color }.100`} />
+					<NoticeIcon color={`${ color }.100`} variant={ variant } />
 				</Flex>
 
 				<Box sx={ { ml: 23 } }>
@@ -70,10 +87,12 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 };
 
 Notice.propTypes = {
-	variant: PropTypes.string,
-	title: PropTypes.node,
-	inline: PropTypes.bool,
 	children: PropTypes.node,
+	color: PropTypes.string,
+	inline: PropTypes.bool,
+	sx: PropTypes.object,
+	title: PropTypes.node,
+	variant: PropTypes.string,
 };
 
 export { Notice };

package/src/system/Notification/Notification.js

@@ -11,13 +11,13 @@ import PropTypes from 'prop-types';
  */
 import { Box, Button, Card, Flex, Heading, Text } from '../';
 
-const Notification = ({ title, body, status = 'success', onClose }) => (
+const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card
 		sx={{
 			boxShadow: 'medium',
 			width: 320,
 			position: 'relative',
-			variant: `notification.${status}`,
+			variant: `notification.${ status }`,
 		}}
 	>
 		<Button

package/src/system/Notification/Notification.stories.js

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

package/src/system/OptionRow/OptionRow.js

@@ -10,9 +10,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Badge, Box, Card, Grid, Heading, Text } from '..';
+import { Badge, Box, Grid, Heading, Text } from '..';
 
-const OptionRow = ({
+const OptionRow = ( {
 	image,
 	icon,
 	badge,
@@ -25,34 +25,34 @@ const OptionRow = ({
 	small = false,
 	disabled = false,
 	...props
-}) => {
+} ) => {
 	const mergedCard = disabled
 		? {
-				border: '1px solid',
-				borderColor: 'border',
-				background: 'none',
-				boxShadow: 'none',
-				color: 'grey.70'
-		  }
+			border: '1px solid',
+			borderColor: 'border',
+			background: 'none',
+			boxShadow: 'none',
+			color: 'grey.70',
+		}
 		: {};
 
 	const inlineStyles = inline
 		? {
-				py: 2,
-				px: 2,
-				mx: -2,
-		  }
+			py: 2,
+			px: 2,
+			mx: -2,
+		}
 		: {
-				py: 3,
-				px: [3, 3, small ? 3 : 5],
-				borderBottom: '1px solid',
-				borderColor: 'border',
-		  };
+			py: 3,
+			px: [ 3, 3, small ? 3 : 5 ],
+			borderBottom: '1px solid',
+			borderColor: 'border',
+		};
 	return (
 		<Grid
 			to={to}
-			columns={[1, 1, 'auto 1fr auto']}
-			gap={[3, 3, `${small ? 3 : 4}`]}
+			columns={[ 1, 1, 'auto 1fr auto' ]}
+			gap={[ 3, 3, `${ small ? 3 : 4 }` ]}
 			{...props}
 			sx={{
 				alignItems: 'center',
@@ -69,7 +69,7 @@ const OptionRow = ({
 				{image ? (
 					<Box
 						sx={{
-							display: ['inline-block', 'inline-block', 'block'],
+							display: [ 'inline-block', 'inline-block', 'block' ],
 							p: small ? 12 : 20,
 							flex: '0 0 auto',
 							bg: 'brand.70',
@@ -78,7 +78,7 @@ const OptionRow = ({
 							...mergedCard,
 						}}
 					>
-						{React.isValidElement(image) ? (
+						{React.isValidElement( image ) ? (
 							image
 						) : (
 							<img
@@ -108,7 +108,7 @@ const OptionRow = ({
 };
 
 OptionRow.propTypes = {
-	image: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]),
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	icon: PropTypes.node,
 	badge: PropTypes.string,
 	label: PropTypes.node,

package/src/system/OptionRow/OptionRow.stories.js

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

package/src/system/Progress/Progress.stories.js

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