@automattic/vip-design-system 0.20.0 → 0.21.0

package/build/system/Wizard/WizardStep.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.WizardStep = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _md = require("react-icons/md");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -22,7 +24,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var WizardStep = function WizardStep(_ref) {
+var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
       subTitle = _ref.subTitle,
       _ref$complete = _ref.complete,
@@ -64,6 +66,7 @@ var WizardStep = function WizardStep(_ref) {
     },
     "data-step": order,
     "data-active": active || undefined,
+    ref: forwardRef,
     children: [typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
       variant: "h4",
       sx: {
@@ -96,9 +99,10 @@ var WizardStep = function WizardStep(_ref) {
       children: subTitle
     }), active && children]
   });
-};
+});
 
 exports.WizardStep = WizardStep;
+WizardStep.displayName = 'WizardStep';
 WizardStep.propTypes = {
   active: _propTypes["default"].bool,
   children: _propTypes["default"].node,

package/build/system/Wizard/WizardStepHorizontal.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.WizardStepHorizontal = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _md = require("react-icons/md");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -22,7 +24,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
+var WizardStepHorizontal = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
       active = _ref.active,
       order = _ref.order;
@@ -37,6 +39,7 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
     },
     "data-step": order,
     "data-active": active || undefined,
+    ref: forwardRef,
     children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
       "aria-hidden": "true",
       sx: {
@@ -55,9 +58,10 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
       }
     }), title]
   });
-};
+});
 
 exports.WizardStepHorizontal = WizardStepHorizontal;
+WizardStepHorizontal.displayName = 'WizardStepHorizontal';
 WizardStepHorizontal.propTypes = {
   active: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.20.0",
+	"version": "0.21.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Avatar/Avatar.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from 'theme-ui';
 import classNames from 'classnames';
@@ -12,61 +13,61 @@ import classNames from 'classnames';
  */
 import { Box, Text } from '..';
 
-const Avatar = ( {
-	isVIP = false,
-	name = null,
-	size = 32,
-	src = null,
-	className = null,
-	...props
-} ) => (
-	<Box
-		sx={ {
-			borderRadius: 9999,
-			height: size + 2, // +2 to compensate padding on both sides
-			width: size + 2, // +2 to compensate padding on both sides
-			border: '2px solid',
-			borderColor: isVIP ? 'primary' : 'transparent',
-			overflow: 'hidden',
-			backgroundColor: 'primary',
-			display: 'inline-flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			color: 'white',
-			padding: '1px',
-			textAlign: 'center',
-		} }
-		className={ classNames( 'vip-avatar-component', className ) }
-		aria-hidden="true"
-		{ ...props }
-	>
-		{ src ? (
-			<Image
-				src={ src }
-				alt={ `Avatar image from ${ name }` }
-				sx={ {
-					borderRadius: 9999,
-					width: '100%',
-					display: 'block',
-				} }
-			/>
-		) : (
-			<Text
-				as="span"
-				sx={ {
-					color: 'white',
-					mb: 0,
-					fontWeight: 'bold',
-					fontSize: 0,
-					textTransform: 'uppercase',
-				} }
-			>
-				{ name ? name.charAt( 0 ) : null }
-			</Text>
-		) }
-	</Box>
+const Avatar = React.forwardRef(
+	(
+		{ isVIP = false, name = null, size = 32, src = null, className = null, ...props },
+		forwardRef
+	) => (
+		<Box
+			sx={ {
+				borderRadius: 9999,
+				height: size + 2, // +2 to compensate padding on both sides
+				width: size + 2, // +2 to compensate padding on both sides
+				border: '2px solid',
+				borderColor: isVIP ? 'primary' : 'transparent',
+				overflow: 'hidden',
+				backgroundColor: 'primary',
+				display: 'inline-flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: 'white',
+				padding: '1px',
+				textAlign: 'center',
+			} }
+			className={ classNames( 'vip-avatar-component', className ) }
+			aria-hidden="true"
+			ref={ forwardRef }
+			{ ...props }
+		>
+			{ src ? (
+				<Image
+					src={ src }
+					alt={ `Avatar image from ${ name }` }
+					sx={ {
+						borderRadius: 9999,
+						width: '100%',
+						display: 'block',
+					} }
+				/>
+			) : (
+				<Text
+					as="span"
+					sx={ {
+						color: 'white',
+						mb: 0,
+						fontWeight: 'bold',
+						fontSize: 0,
+						textTransform: 'uppercase',
+					} }
+				>
+					{ name ? name.charAt( 0 ) : null }
+				</Text>
+			) }
+		</Box>
+	)
 );
 
+Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
 	isVIP: PropTypes.bool,
 	size: PropTypes.number,

package/src/system/Badge/Badge.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -11,27 +12,31 @@ import PropTypes from 'prop-types';
  */
 import { Text } from '../';
 
-const Badge = ( { variant = 'blue', sx, className = null, ...props } ) => (
-	<Text
-		as="span"
-		sx={ {
-			fontSize: 0,
-			padding: 0,
-			bg: `${ variant }.20`,
-			color: `${ variant }.100`,
-			py: 1,
-			verticalAlign: 'middle',
-			px: 2,
-			display: 'inline-block',
-			borderRadius: 1,
-			fontWeight: 'heading',
-			...sx,
-		} }
-		className={ classNames( 'vip-badge-component', className ) }
-		{ ...props }
-	/>
+const Badge = React.forwardRef(
+	( { variant = 'blue', sx, className = null, ...props }, forwardRef ) => (
+		<Text
+			as="span"
+			sx={ {
+				fontSize: 0,
+				padding: 0,
+				bg: `${ variant }.20`,
+				color: `${ variant }.100`,
+				py: 1,
+				verticalAlign: 'middle',
+				px: 2,
+				display: 'inline-block',
+				borderRadius: 1,
+				fontWeight: 'heading',
+				...sx,
+			} }
+			className={ classNames( 'vip-badge-component', className ) }
+			ref={ forwardRef }
+			{ ...props }
+		/>
+	)
 );
 
+Badge.displayName = 'Badge';
 Badge.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,

package/src/system/Box/Box.js

@@ -3,12 +3,12 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
 import { Box as ThemeBox } from 'theme-ui';
 
-const Box = forwardRef( ( props, ref ) => (
+const Box = React.forwardRef( ( props, ref ) => (
 	<ThemeBox
 		ref={ ref }
 		className={ classNames( 'vip-box-component', props.className ) }

package/src/system/Code/Code.js

@@ -3,92 +3,97 @@
 /**
  * External dependencies
  */
+import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useRef, useState } from 'react';
 import { MdContentCopy } from 'react-icons/md';
 
-const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...props } ) => {
-	const ref = useRef();
+const Code = React.forwardRef(
+	( { prompt = false, showCopy = false, onCopy = null, className, ...props }, forwardRef ) => {
+		const ref = useRef();
 
-	const codeDom = (
-		<code
-			ref={ ref }
-			sx={ {
-				fontSize: 1,
-				display: 'block',
-				bg: 'grey.90',
-				color: 'grey.10',
-				borderRadius: 1,
-				py: 2,
-				px: 3,
-				verticalAlign: 'middle',
-				fontFamily: 'monospace',
-				'&:before': {
-					content: prompt ? '"$"' : 'none',
-					marginRight: 2,
-					userSelect: 'none',
-				},
-			} }
-			className={ classNames( 'vip-code-component', className ) }
-			{ ...props }
-		/>
-	);
+		const codeDom = (
+			<code
+				ref={ ref }
+				sx={ {
+					fontSize: 1,
+					display: 'block',
+					bg: 'grey.90',
+					color: 'grey.10',
+					borderRadius: 1,
+					py: 2,
+					px: 3,
+					verticalAlign: 'middle',
+					fontFamily: 'monospace',
+					'&:before': {
+						content: prompt ? '"$"' : 'none',
+						marginRight: 2,
+						userSelect: 'none',
+					},
+				} }
+				className={ classNames( 'vip-code-component', className ) }
+				{ ...props }
+			/>
+		);
 
-	if ( ! showCopy ) {
-		return codeDom;
-	}
+		if ( ! showCopy ) {
+			return codeDom;
+		}
 
-	const [ copied, setCopied ] = useState( false );
+		const [ copied, setCopied ] = useState( false );
 
-	return (
-		<div
-			sx={ {
-				position: 'relative',
-			} }
-		>
-			{ codeDom }
-			{
-				<button
-					aria-label="Copy code"
-					sx={ {
-						bg: 'grey.10',
-						borderTopRightRadius: 1,
-						borderWidth: 0,
-						color: 'muted',
-						opacity: 0.8,
-						paddingBottom: 1,
-						paddingLeft: 2,
-						paddingRight: 2,
-						paddingTop: 1,
-						position: 'absolute',
-						right: 0,
-						top: '-1px',
-						'&:hover': {
-							opacity: 1,
-							cursor: 'pointer',
-						},
-					} }
-					onClick={ () => {
-						window.navigator.clipboard.writeText( ref.current?.innerText );
+		return (
+			<div
+				sx={ {
+					position: 'relative',
+				} }
+				ref={ forwardRef }
+			>
+				{ codeDom }
+				{
+					<button
+						aria-label="Copy code"
+						sx={ {
+							bg: 'grey.10',
+							borderTopRightRadius: 1,
+							borderWidth: 0,
+							color: 'muted',
+							opacity: 0.8,
+							paddingBottom: 1,
+							paddingLeft: 2,
+							paddingRight: 2,
+							paddingTop: 1,
+							position: 'absolute',
+							right: 0,
+							top: '-1px',
+							'&:hover': {
+								opacity: 1,
+								cursor: 'pointer',
+							},
+						} }
+						onClick={ () => {
+							window.navigator.clipboard.writeText( ref.current?.innerText );
 
-						setCopied( true );
+							setCopied( true );
 
-						if ( onCopy ) {
-							onCopy();
-						}
-					} }
-				>
-					{ copied ? (
-						<span role="alert">Code copied to clipboard</span>
-					) : (
-						<MdContentCopy aria-hidden="true" />
-					) }
-				</button>
-			}
-		</div>
-	);
-};
+							if ( onCopy ) {
+								onCopy();
+							}
+						} }
+					>
+						{ copied ? (
+							<span role="alert">Code copied to clipboard</span>
+						) : (
+							<MdContentCopy aria-hidden="true" />
+						) }
+					</button>
+				}
+			</div>
+		);
+	}
+);
+
+Code.displayName = 'Code';
 
 Code.propTypes = {
 	prompt: PropTypes.bool,

package/src/system/Flex/Flex.js

@@ -3,8 +3,13 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Flex as ThemeFlex } from 'theme-ui';
 
-const Flex = props => <ThemeFlex { ...props } />;
+const Flex = React.forwardRef( ( props, forwardRef ) => (
+	<ThemeFlex ref={ forwardRef } { ...props } />
+) );
+
+Flex.displayName = 'Flex';
 
 export { Flex };

package/src/system/Form/Label.js

@@ -1,17 +1,25 @@
 /** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
 import { Heading } from '..';
 
-const Label = props => (
+const Label = React.forwardRef( ( props, forwardRef ) => (
 	<Heading
 		variant="h4"
 		as="label"
 		sx={ { display: 'block', mb: 2, color: 'muted' } }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Label.displayName = 'Label';
 
 export { Label };

package/src/system/Form/Radio.js

@@ -3,12 +3,20 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Radio as ThemeRadio } from 'theme-ui';
 import PropTypes from 'prop-types';
 
-const Radio = ( { disabled, ...props } ) => (
-	<ThemeRadio sx={ { opacity: disabled ? 0.4 : 1 } } disabled={ disabled } { ...props } />
-);
+const Radio = React.forwardRef( ( { disabled, ...props }, forwardRef ) => (
+	<ThemeRadio
+		sx={ { opacity: disabled ? 0.4 : 1 } }
+		disabled={ disabled }
+		ref={ forwardRef }
+		{ ...props }
+	/>
+) );
+
+Radio.displayName = 'Radio';
 
 Radio.propTypes = {
 	disabled: PropTypes.bool,

package/src/system/Form/RadioBoxGroup.js

@@ -3,6 +3,7 @@
 /**
  * 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';
@@ -12,54 +13,59 @@ import { MdCheckCircle } from 'react-icons/md';
  */
 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>
+const RadioBoxGroup = React.forwardRef(
+	( { onChange, groupLabel, value, options, ...props }, forwardRef ) => (
+		<RadioGroupPrimitive.Root
+			onValueChange={ onChange }
+			value={ value }
+			aria-label={ groupLabel }
+			sx={ {
+				display: 'flex',
+				gap: 2,
+			} }
+			ref={ forwardRef }
+			{ ...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.displayName = 'RadioBoxGroup';
+
 RadioBoxGroup.propTypes = {
 	onChange: PropTypes.func,
 	options: PropTypes.array,