@automattic/vip-design-system 0.20.1 → 0.22.0

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -10,24 +10,21 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 
+export const screenReaderTextClass = {
+	border: 'none',
+	clip: 'rect(1px, 1px, 1px, 1px)',
+	clipPath: 'inset(50%)',
+	height: '1px',
+	margin: '-1px',
+	overflow: 'hidden',
+	padding: '0',
+	position: 'absolute',
+	width: '1px',
+	wordWrap: 'normal !important',
+};
+
 export const ScreenReaderText = React.forwardRef( ( props, forwardRef ) => (
-	<span
-		className="screen-reader-text"
-		sx={ {
-			border: 'none',
-			clip: 'rect(1px, 1px, 1px, 1px)',
-			clipPath: 'inset(50%)',
-			height: '1px',
-			margin: '-1px',
-			overflow: 'hidden',
-			padding: '0',
-			position: 'absolute',
-			width: '1px',
-			wordWrap: 'normal !important',
-		} }
-		{ ...props }
-		ref={ forwardRef }
-	>
+	<span className="screen-reader-text" sx={ screenReaderTextClass } { ...props } ref={ forwardRef }>
 		{ props.children }
 	</span>
 ) );

package/src/system/Spinner/Spinner.js

@@ -3,11 +3,12 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Spinner as ThemeSpinner } from 'theme-ui';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Spinner = ( { sx, className = null, ...props } ) => (
+const Spinner = React.forwardRef( ( { sx, className = null, ...props }, forwardRef ) => (
 	<ThemeSpinner
 		strokeWidth={ 2 }
 		sx={ {
@@ -15,9 +16,12 @@ const Spinner = ( { sx, className = null, ...props } ) => (
 			color: 'primary',
 		} }
 		className={ classNames( 'vip-spinner-component', className ) }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Spinner.displayName = 'Spinner';
 
 Spinner.propTypes = {
 	sx: PropTypes.object,

package/src/system/Table/Table.js

@@ -6,23 +6,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
 
-const Table = React.forwardRef( ( { sx, className, ...props }, forwardRef ) => (
-	<table
-		sx={ { width: '100%', minWidth: 1024, ...sx } }
-		cellPadding={ 0 }
-		cellSpacing={ 0 }
-		className={ classNames( 'vip-table-component', className ) }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
+const Table = React.forwardRef(
+	( { sx, className, children, caption = null, ...props }, forwardRef ) => {
+		if ( ! caption ) {
+			// eslint-disable-next-line no-console
+			console.warn( '[A11Y] Please, add a caption to your table.' );
+		}
+
+		return (
+			<table
+				sx={ { width: '100%', minWidth: 1024, ...sx } }
+				cellPadding={ 0 }
+				cellSpacing={ 0 }
+				className={ classNames( 'vip-table-component', className ) }
+				ref={ forwardRef }
+				{ ...props }
+			>
+				{ caption && <caption sx={ screenReaderTextClass }>{ caption }</caption> }
+				{ children }
+			</table>
+		);
+	}
+);
 
 Table.displayName = 'Table';
 
 Table.propTypes = {
 	sx: PropTypes.object,
 	className: PropTypes.any,
+	children: PropTypes.any,
+	caption: PropTypes.string.isRequired,
 };
 
 export { Table };

package/src/system/Table/Table.stories.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * Internal dependencies
  */
@@ -9,7 +11,7 @@ export default {
 };
 
 export const Default = () => (
-	<Table>
+	<Table caption="Storybook Example">
 		<thead>
 			<TableRow head cells={ [ 'User', 'Command', 'Duration', 'Time' ] } />
 		</thead>
@@ -35,6 +37,7 @@ export const Default = () => (
 						11th Mar 2020, 16:49:22
 					</Text>,
 				] }
+				gbc
 			/>
 			<TableRow>
 				<TableCell sx={ { backgroundColor: 'lightgray' } }>

package/src/system/Tabs/Tabs.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -11,7 +12,7 @@ import PropTypes from 'prop-types';
  */
 import { Flex } from '..';
 
-const Tabs = ( { className = null, sx, ...props } ) => (
+const Tabs = React.forwardRef( ( { className = null, sx, ...props }, forwardRef ) => (
 	<Flex
 		className={ classNames( 'vip-tabs-component', className ) }
 		sx={ {
@@ -22,9 +23,12 @@ const Tabs = ( { className = null, sx, ...props } ) => (
 			padding: 0,
 			...sx,
 		} }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Tabs.displayName = 'Tabs';
 
 Tabs.propTypes = {
 	className: PropTypes.any,

package/src/system/Text/Text.js

@@ -3,11 +3,12 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Text as ThemeText } from 'theme-ui';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Text = ( { sx, className = null, ...props } ) => (
+const Text = React.forwardRef( ( { sx, className = null, ...props }, forwardRef ) => (
 	<ThemeText
 		as="p"
 		sx={ {
@@ -16,9 +17,12 @@ const Text = ( { sx, className = null, ...props } ) => (
 			...sx,
 		} }
 		className={ classNames( 'vip-text-component', className ) }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Text.displayName = 'Text';
 
 Text.propTypes = {
 	sx: PropTypes.object,

package/src/system/Wizard/Wizard.js

@@ -13,51 +13,55 @@ import { MdArrowForward } from 'react-icons/md';
  */
 import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 
-const Wizard = ( { steps, activeStep, variant, completed = [], className = null, ...props } ) => {
-	return (
-		<Box className={ classNames( 'vip-wizard-component', className ) }>
-			{ variant === 'horizontal' ? (
-				<Box>
-					<Flex
-						sx={ {
-							flex: '0 0 auto',
-						} }
-						{ ...props }
-					>
-						{ steps.map( ( { title, subTitle, titleVariant }, index ) => (
-							<React.Fragment key={ index }>
-								<WizardStepHorizontal
-									active={ index === activeStep }
-									order={ index + 1 }
-									subTitle={ subTitle }
-									title={ title }
-									titleVariant={ titleVariant }
-								/>
-								{ index < steps.length - 1 && (
-									<MdArrowForward sx={ { mx: 2, color: 'grey.80' } } />
-								) }
-							</React.Fragment>
-						) ) }
-					</Flex>
-					{ steps[ activeStep ].children }
-				</Box>
-			) : (
-				steps.map( ( { title, subTitle, children }, index ) => (
-					<WizardStep
-						active={ index === activeStep }
-						complete={ completed.includes( index ) }
-						key={ index }
-						order={ index + 1 }
-						subTitle={ subTitle }
-						title={ title }
-					>
-						{ children }
-					</WizardStep>
-				) )
-			) }
-		</Box>
-	);
-};
+const Wizard = React.forwardRef(
+	( { steps, activeStep, variant, completed = [], className = null, ...props }, forwardRef ) => {
+		return (
+			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
+				{ variant === 'horizontal' ? (
+					<Box>
+						<Flex
+							sx={ {
+								flex: '0 0 auto',
+							} }
+							{ ...props }
+						>
+							{ steps.map( ( { title, subTitle, titleVariant }, index ) => (
+								<React.Fragment key={ index }>
+									<WizardStepHorizontal
+										active={ index === activeStep }
+										order={ index + 1 }
+										subTitle={ subTitle }
+										title={ title }
+										titleVariant={ titleVariant }
+									/>
+									{ index < steps.length - 1 && (
+										<MdArrowForward sx={ { mx: 2, color: 'grey.80' } } />
+									) }
+								</React.Fragment>
+							) ) }
+						</Flex>
+						{ steps[ activeStep ].children }
+					</Box>
+				) : (
+					steps.map( ( { title, subTitle, children }, index ) => (
+						<WizardStep
+							active={ index === activeStep }
+							complete={ completed.includes( index ) }
+							key={ index }
+							order={ index + 1 }
+							subTitle={ subTitle }
+							title={ title }
+						>
+							{ children }
+						</WizardStep>
+					) )
+				) }
+			</Box>
+		);
+	}
+);
+
+Wizard.displayName = 'Wizard';
 
 Wizard.propTypes = {
 	steps: PropTypes.array,

package/src/system/Wizard/WizardStep.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { MdCheckCircle } from 'react-icons/md';
 import PropTypes from 'prop-types';
 
@@ -11,69 +12,74 @@ import PropTypes from 'prop-types';
  */
 import { Card, Heading, Text, Flex } from '..';
 
-const WizardStep = ( { title, subTitle, complete = false, children, active, order } ) => {
-	let borderLeftColor = 'border';
+const WizardStep = React.forwardRef(
+	( { title, subTitle, complete = false, children, active, order }, forwardRef ) => {
+		let borderLeftColor = 'border';
 
-	if ( complete ) {
-		borderLeftColor = 'success';
-	} else if ( active ) {
-		borderLeftColor = 'primary';
-	}
+		if ( complete ) {
+			borderLeftColor = 'success';
+		} else if ( active ) {
+			borderLeftColor = 'primary';
+		}
 
-	let color = 'muted';
+		let color = 'muted';
 
-	if ( complete ) {
-		color = 'success';
-	} else if ( active ) {
-		color = 'heading';
-	}
+		if ( complete ) {
+			color = 'success';
+		} else if ( active ) {
+			color = 'heading';
+		}
 
-	return (
-		<Card
-			sx={ {
-				boxShadow: active ? 'low' : 'none',
-				borderLeft: '2px solid',
-				p: 4,
-				backgroundColor: active ? 'card' : 'transparent',
-				borderRadius: 0,
-				borderBottom: active ? 'none' : '1px solid',
-				'&:first-of-type': {
-					borderTopWidth: '1px',
-					borderTopStyle: 'solid',
-					borderTopColor: 'borders.2',
-				},
-				borderColor: active ? 'primary' : 'borders.2',
-				borderLeftColor: borderLeftColor,
-			} }
-			data-step={ order }
-			data-active={ active || undefined }
-		>
-			{ typeof title === 'string' ? (
-				<Heading
-					variant="h4"
-					sx={ {
-						mb: 0,
-						display: 'flex',
-						alignItems: 'center',
-						color: color,
-					} }
-				>
-					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-					{ title }
-				</Heading>
-			) : (
-				<Flex sx={ { alignItems: 'center', color } }>
-					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-					{ title }
-				</Flex>
-			) }
+		return (
+			<Card
+				sx={ {
+					boxShadow: active ? 'low' : 'none',
+					borderLeft: '2px solid',
+					p: 4,
+					backgroundColor: active ? 'card' : 'transparent',
+					borderRadius: 0,
+					borderBottom: active ? 'none' : '1px solid',
+					'&:first-of-type': {
+						borderTopWidth: '1px',
+						borderTopStyle: 'solid',
+						borderTopColor: 'borders.2',
+					},
+					borderColor: active ? 'primary' : 'borders.2',
+					borderLeftColor: borderLeftColor,
+				} }
+				data-step={ order }
+				data-active={ active || undefined }
+				ref={ forwardRef }
+			>
+				{ typeof title === 'string' ? (
+					<Heading
+						variant="h4"
+						sx={ {
+							mb: 0,
+							display: 'flex',
+							alignItems: 'center',
+							color: color,
+						} }
+					>
+						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+						{ title }
+					</Heading>
+				) : (
+					<Flex sx={ { alignItems: 'center', color } }>
+						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+						{ title }
+					</Flex>
+				) }
 
-			{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
+				{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
 
-			{ active && children }
-		</Card>
-	);
-};
+				{ active && children }
+			</Card>
+		);
+	}
+);
+
+WizardStep.displayName = 'WizardStep';
 
 WizardStep.propTypes = {
 	active: PropTypes.bool,

package/src/system/Wizard/WizardStepHorizontal.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { MdCheckCircle } from 'react-icons/md';
 import PropTypes from 'prop-types';
 
@@ -11,7 +12,7 @@ import PropTypes from 'prop-types';
  */
 import { Heading, Flex } from '..';
 
-const WizardStepHorizontal = ( { title, active, order } ) => {
+const WizardStepHorizontal = React.forwardRef( ( { title, active, order }, forwardRef ) => {
 	const color = active ? 'heading' : 'muted';
 
 	return typeof title === 'string' ? (
@@ -25,6 +26,7 @@ const WizardStepHorizontal = ( { title, active, order } ) => {
 			} }
 			data-step={ order }
 			data-active={ active || undefined }
+			ref={ forwardRef }
 		>
 			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
 			{ title }
@@ -35,7 +37,9 @@ const WizardStepHorizontal = ( { title, active, order } ) => {
 			{ title }
 		</Flex>
 	);
-};
+} );
+
+WizardStepHorizontal.displayName = 'WizardStepHorizontal';
 
 WizardStepHorizontal.propTypes = {
 	active: PropTypes.bool,