@automattic/vip-design-system 0.10.3 → 0.12.0

package/src/system/ResourceList/ResourceList.stories.jsx

@@ -56,62 +56,65 @@ const logs = [
 ];
 
 export const Grouped = () => (
-	<Box sx={{ p: 5, pt: 2 }}>
-		<Heading sx={{ mb: 2 }}>Audit Log</Heading>
-		<Text sx={{ mb: 4 }}>A live trail of system and human events.</Text>
+	<Box sx={ { p: 5, pt: 2 } }>
+		<Heading sx={ { mb: 2 } }>Audit Log</Heading>
+		<Text sx={ { mb: 4 } }>A live trail of system and human events.</Text>
 		<ResourceList
-			items={logs}
+			items={ logs }
 			dateKey="date"
-			groupedByDay={true}
-			renderItem={item => (
+			groupedByDay={ true }
+			renderItem={ item => (
 				<ResourceItem
-					item={item}
-					icon={<BiGlobe sx={{ color: 'red' }} />}
-					dateKey={'date'}
-					relativeTime={true}
-					timeOnly={true}
+					item={ item }
+					icon={ <BiGlobe sx={ { color: 'red' } } /> }
+					dateKey={ 'date' }
+					relativeTime={ true }
+					timeOnly={ true }
 				>
-					<Flex sx={{ alignItems: 'center', gap: 3 }}>
+					<Flex sx={ { alignItems: 'center', gap: 3 } }>
 						<Avatar
-							name={item.actor}
+							name={ item.actor }
 							src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg"
-							size={16}
+							size={ 16 }
 						/>
-						<Heading variant="h4" as="p" sx={{ mb: 0, fontWeight: 'normal' }}>
-							{item.actor}{' '}
-							<Text as="span" sx={{ color: 'muted', mb: 0 }}>
-								{item.action}
-							</Text>{' '}
-							{item.object}
+						<Heading variant="h4" as="p" sx={ { mb: 0, fontWeight: 'normal' } }>
+							{ item.actor }{ ' ' }
+							<Text as="span" sx={ { color: 'muted', mb: 0 } }>
+								{ item.action }
+							</Text>{ ' ' }
+							{ item.object }
 						</Heading>
 					</Flex>
-					{item.showObject && (
+					{ item.showObject && (
 						<Box
 							variant="indent"
-							sx={{ mt: 2, display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }}
+							sx={ { mt: 2, display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' } }
 						>
-							<Heading variant="h5" as="div" sx={{ mb: 0 }}>
-								Merge pull request{' '}
-								<Text as="span" sx={{ color: 'muted' }}>
+							<Heading variant="h5" as="div" sx={ { mb: 0 } }>
+								Merge pull request{ ' ' }
+								<Text as="span" sx={ { color: 'muted' } }>
 									#443
 								</Text>
 							</Heading>
-							<Text sx={{ mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+							<Text
+								as="div"
+								sx={ { mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 } }
+							>
 								<Avatar
-									name={item.actor}
+									name={ item.actor }
 									src="https://uifaces.co/our-content/donated/n4Ngwvi7.jpg"
-									size={16}
+									size={ 16 }
 								/>
-								{item.actor}
+								{ item.actor }
 							</Text>
-							<Text sx={{ mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
-								<BiCheckCircle size={16} />
+							<Text sx={ { mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 } }>
+								<BiCheckCircle size={ 16 } />
 								Deployed in 31s
 							</Text>
 						</Box>
-					)}
+					) }
 				</ResourceItem>
-			)}
+			) }
 		/>
 	</Box>
 );
@@ -218,83 +221,86 @@ const deploys = [
 ];
 
 export const Relative = () => (
-	<Box sx={{ p: 5, pt: 2 }}>
-		<Heading sx={{ mb: 2 }}>Deploys</Heading>
-		<Text sx={{ mb: 4 }}>View and manage application deployments.</Text>
-		<Card variant="indent" sx={{ mb: 4, display: 'flex', flexDirection: 'row-reverse', gap: 1 }}>
-			{deploys.map( ( deploy, index ) => (
+	<Box sx={ { p: 5, pt: 2 } }>
+		<Heading sx={ { mb: 2 } }>Deploys</Heading>
+		<Text sx={ { mb: 4 } }>View and manage application deployments.</Text>
+		<Card variant="indent" sx={ { mb: 4, display: 'flex', flexDirection: 'row-reverse', gap: 1 } }>
+			{ deploys.map( ( deploy, index ) => (
 				<Box
-					key={index}
-					sx={{
+					key={ index }
+					sx={ {
 						flex: '1 1 auto',
 						width: 10,
 						height: 4,
 						backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
 						borderRadius: 1,
-					}}
+					} }
 				></Box>
-			) )}
+			) ) }
 		</Card>
 		<ResourceList
-			items={deploys}
+			items={ deploys }
 			dateKey="date"
-			groupedByDay={false}
-			renderItem={item => (
+			groupedByDay={ false }
+			renderItem={ item => (
 				<ResourceItem
-					item={item}
-					dateKey={'date'}
-					relativeTime={true}
-					timeOnly={true}
-					renderActions={() => (
-						<Flex sx={{ alignItems: 'center' }}>
-							<Button variant="secondary" sx={{ fontSize: 1 }}>
+					item={ item }
+					dateKey={ 'date' }
+					relativeTime={ true }
+					timeOnly={ true }
+					renderActions={ () => (
+						<Flex sx={ { alignItems: 'center' } }>
+							<Button variant="secondary" sx={ { fontSize: 1 } }>
 								Rollback
 							</Button>
 						</Flex>
-					)}
+					) }
 				>
-					<Flex sx={{ alignItems: 'center', gap: 4 }}>
-						<Flex sx={{ alignItems: 'center', gap: 3, minWidth: 300 }}>
-							<Heading variant="h4" as="p" sx={{ mb: 0, fontWeight: 'normal' }}>
-								{item.title}{' '}
-								<Text as="span" sx={{ color: 'muted', mb: 0 }}>
-									{item.id}
+					<Flex sx={ { alignItems: 'center', gap: 4 } }>
+						<Flex sx={ { alignItems: 'center', gap: 3, minWidth: 300 } }>
+							<Heading variant="h4" as="p" sx={ { mb: 0, fontWeight: 'normal' } }>
+								{ item.title }{ ' ' }
+								<Text as="span" sx={ { color: 'muted', mb: 0 } }>
+									{ item.id }
 								</Text>
 							</Heading>
-							{item.status === 'running' && <Badge sx={{ mb: 0 }}>Running</Badge>}
+							{ item.status === 'running' && <Badge sx={ { mb: 0 } }>Running</Badge> }
 						</Flex>
-						<Text sx={{ mb: 0, color: 'muted', display: 'flex', alignItems: 'center', gap: 2 }}>
+						<Text
+							as="div"
+							sx={ { mb: 0, color: 'muted', display: 'flex', alignItems: 'center', gap: 2 } }
+						>
 							<Avatar
-								name={item.author}
-								size={16}
+								name={ item.author }
+								size={ 16 }
 								src="https://randomuser.me/api/portraits/men/46.jpg"
 							/>
-							{item.author}
+							{ item.author }
 						</Text>
 						<Text
-							sx={{
+							sx={ {
 								mb: 0,
 								color: item.status === 'running' ? 'blue.60' : 'muted',
 								display: 'flex',
 								alignItems: 'center',
 								gap: 1,
-							}}
+							} }
 						>
-							{item.status === 'running' ? (
+							{ item.status === 'running' ? (
 								<React.Fragment>
-									<BiRevision size={16} />
+									<BiRevision size={ 16 } />
 									Running for 31s
 								</React.Fragment>
 							) : (
 								<React.Fragment>
-									<BiCheckCircle size={16} />
+									<BiCheckCircle size={ 16 } />
 									Deployed in 31s
 								</React.Fragment>
-							)}
+							) }
 						</Text>
 					</Flex>
 				</ResourceItem>
-			)}
+			) }
 		/>
 	</Box>
 );

package/src/system/ScreenReaderText/ScreenReader.test.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+/**
+ * Internal dependencies
+ */
+import ScreenReaderText from './ScreenReaderText';
+
+describe( '<ScreenReaderText />', () => {
+	it( 'should render correctly', () => {
+		const props = {};
+		const text = 'Hello there';
+		const { container } = render( <ScreenReaderText { ...props }>{ text }</ScreenReaderText> );
+		// we're using the querySelector to ensure the class is rendered since it affects the A11Y
+		// in case it's removed it could compromise the A11Y of the components using it.
+		expect( container.querySelector( '.screen-reader-text' ) ).toBeInTheDocument();
+
+		expect( screen.queryByText( text ) ).toBeInTheDocument();
+	} );
+} );

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+
+export default function ScreenReaderText( props ) {
+	return (
+		<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 }
+		>
+			{ props.children }
+		</span>
+	);
+}
+
+/**
+ * propTypes
+ */
+ScreenReaderText.propTypes = {
+	children: PropTypes.node.isRequired,
+};

package/src/system/ScreenReaderText/index.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+
+import { ScreenReaderText } from './ScreenReaderText';
+
+export { ScreenReaderText };

package/src/system/Spinner/Spinner.js

@@ -9,13 +9,13 @@ import classNames from 'classnames';
 
 const Spinner = ( { sx, className = null, ...props } ) => (
 	<ThemeSpinner
-		strokeWidth={2}
-		sx={{
+		strokeWidth={ 2 }
+		sx={ {
 			fill: 'none',
 			color: 'primary',
-		}}
+		} }
 		className={ classNames( 'vip-spinner-component', className ) }
-		{...props}
+		{ ...props }
 	/>
 );
 

package/src/system/Spinner/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Table/Table.js

@@ -8,11 +8,11 @@ import classNames from 'classnames';
 
 const Table = ( { sx, className, ...props } ) => (
 	<table
-		sx={{ width: '100%', minWidth: 1024, ...sx }}
-		cellPadding={0}
-		cellSpacing={0}
-		className={classNames( 'vip-table-component', className )}
-		{...props}
+		sx={ { width: '100%', minWidth: 1024, ...sx } }
+		cellPadding={ 0 }
+		cellSpacing={ 0 }
+		className={ classNames( 'vip-table-component', className ) }
+		{ ...props }
 	/>
 );
 

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Table, TableRow, Flex, Heading, Text } from '..';
+import { Table, TableRow, Flex, Heading, Text, TableCell } from '..';
 
 export default {
 	title: 'Table',
@@ -11,29 +11,59 @@ export default {
 export const Default = () => (
 	<Table>
 		<thead>
-			<TableRow head cells={[ 'User', 'Command', 'Duration', 'Time' ]} />
+			<TableRow head cells={ [ 'User', 'Command', 'Duration', 'Time' ] } />
 		</thead>
 		<tbody>
 			<TableRow
-				cells={[
-					<Flex sx={{ alignItems: 'center' }} key="user">
-						<Heading variant="h4" sx={{ mb: 0 }}>
+				cells={ [
+					<Flex sx={ { alignItems: 'center' } } key="user">
+						<Heading variant="h4" sx={ { mb: 0 } }>
 							kwaves
 						</Heading>
 					</Flex>,
 					<Heading
 						variant="h4"
 						key="command"
-						sx={{ mb: 0, display: 'flex', alignItems: 'center' }}
+						sx={ { mb: 0, display: 'flex', alignItems: 'center' } }
 					>
 						wp rewrite flush
 					</Heading>,
-					<Text sx={{ mb: 0 }} key="duration">2s</Text>,
-					<Text sx={{ mb: 0, color: 'muted' }} key="time">
+					<Text sx={ { mb: 0 } } key="duration">
+						2s
+					</Text>,
+					<Text sx={ { mb: 0, color: 'muted' } } key="time">
 						11th Mar 2020, 16:49:22
 					</Text>,
-				]}
+				] }
 			/>
+			<TableRow>
+				<TableCell sx={ { backgroundColor: 'lightgray' } }>
+					<Flex sx={ { alignItems: 'center' } } key="user">
+						<Heading variant="h4" sx={ { mb: 0 } }>
+							simon
+						</Heading>
+					</Flex>
+				</TableCell>
+				<TableCell>
+					<Heading
+						variant="h4"
+						key="command"
+						sx={ { mb: 0, display: 'flex', alignItems: 'center' } }
+					>
+						wp posts list
+					</Heading>
+				</TableCell>
+				<TableCell>
+					<Text sx={ { mb: 0 } } key="duration">
+						3s
+					</Text>
+				</TableCell>
+				<TableCell>
+					<Text sx={ { mb: 0, color: 'muted' } } key="time">
+						3rd May 2021, 13:22:13
+					</Text>
+				</TableCell>
+			</TableRow>
 		</tbody>
 	</Table>
 );

package/src/system/Table/TableCell.js

@@ -0,0 +1,48 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Heading, Box } from '../';
+
+const TableCell = ( { head, children, ...rest } ) => {
+	const sx = {
+		borderBottom: '1px solid',
+		borderTop: head ? '1px solid' : 'none',
+		// borderColor should come after borderTop so it can override it
+		borderColor: 'border',
+		fontWeight: 'body',
+		px: 3,
+		py: 2,
+		textAlign: 'left',
+		'&:first-of-type': {
+			pl: 5,
+		},
+		...rest.sx,
+	};
+
+	return (
+		<Box as={ head ? 'th' : 'td' } { ...{ ...rest, sx } }>
+			{ head ? (
+				<Heading variant="caps" as="div" sx={ { mb: 0 } }>
+					{ children }
+				</Heading>
+			) : (
+				children
+			) }
+		</Box>
+	);
+};
+
+TableCell.propTypes = {
+	children: PropTypes.node,
+	head: PropTypes.bool,
+};
+
+export { TableCell };

package/src/system/Table/TableRow.js

@@ -9,9 +9,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading, Box } from '../';
+import { TableCell } from './TableCell';
 
-const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
+const TableRow = ( { onClick, head = false, cells = [], children } ) => {
 	const hoverStyles = onClick
 		? { cursor: 'pointer', '&:hover': { bg: 'hover', borderRadius: 2 } }
 		: {};
@@ -30,58 +30,21 @@ const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
 			onKeyDown={ handleKeyPress }
 		>
 			{ cells.map( ( cell, index ) => (
-				<TableCell key={ index } cell={ cell } head={ head } isRowHead={ index === 0 && rowHead } />
+				<TableCell key={ index } head={ head }>
+					{ cell }
+				</TableCell>
 			) ) }
-		</tr>
-	);
-};
 
-const TableCell = ( { head, isRowHead, cell } ) => {
-	let scope = null;
-	if ( head ) {
-		scope = 'col';
-	} else if ( isRowHead ) {
-		scope = 'row';
-	}
-	return (
-		<Box
-			as={ isRowHead || head ? 'th' : 'td' }
-			scope={ scope }
-			sx={ {
-				px: 3,
-				py: 2,
-				textAlign: 'left',
-				borderBottom: '1px solid',
-				fontWeight: 'body',
-				borderTop: head ? '1px solid' : 'none',
-				borderColor: 'border',
-				'&:first-of-type': {
-					pl: 5,
-				},
-			} }
-		>
-			{ head ? (
-				<Heading variant="caps" as="div" sx={ { mb: 0 } }>
-					{ cell }
-				</Heading>
-			) : (
-				cell
-			) }
-		</Box>
+			{ children }
+		</tr>
 	);
 };
 
-TableCell.propTypes = {
-	head: PropTypes.bool,
-	isRowHead: PropTypes.bool,
-	cell: PropTypes.node,
-};
-
 TableRow.propTypes = {
-	onClick: PropTypes.func,
-	head: PropTypes.bool,
 	cells: PropTypes.array,
-	rowHead: PropTypes.bool,
+	children: PropTypes.node,
+	head: PropTypes.bool,
+	onClick: PropTypes.func,
 };
 
 export { TableRow };

package/src/system/Table/index.js

@@ -1,8 +1,8 @@
-
 /**
  * Internal dependencies
  */
 import { Table } from './Table';
 import { TableRow } from './TableRow';
+import { TableCell } from './TableCell';
 
-export { Table, TableRow };
+export { Table, TableRow, TableCell };

package/src/system/Tabs/Tabs.js

@@ -14,15 +14,15 @@ import { Flex } from '..';
 const Tabs = ( { className = null, sx, ...props } ) => (
 	<Flex
 		className={ classNames( 'vip-tabs-component', className ) }
-		sx={{
+		sx={ {
 			borderBottom: '1px solid',
 			borderColor: 'border',
 			listStyleType: 'none',
 			margin: 0,
 			padding: 0,
 			...sx,
-		}}
-		{...props}
+		} }
+		{ ...props }
 	/>
 );
 

package/src/system/Tabs/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Text/Text.js

@@ -10,13 +10,13 @@ import classNames from 'classnames';
 const Text = ( { sx, className = null, ...props } ) => (
 	<ThemeText
 		as="p"
-		sx={{
+		sx={ {
 			lineHeight: 1.5,
 			marginBottom: 2,
 			...sx,
-		}}
+		} }
 		className={ classNames( 'vip-text-component', className ) }
-		{...props}
+		{ ...props }
 	/>
 );
 

package/src/system/Text/Text.stories.jsx

@@ -10,11 +10,9 @@ export default {
 
 export const Default = () => (
 	<Text>
-		Apparently we had reached a great height in the atmosphere, for the sky
-		was a dead black, and the stars had ceased to twinkle. By the same
-		illusion which lifts the horizon of the sea to the level of the
-		spectator on a hillside, the sable cloud beneath was dished out, and the
-		car seemed to float in the middle of an immense dark sphere, whose upper
-		half was strewn with silver.{' '}
+		Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and
+		the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the
+		level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed
+		to float in the middle of an immense dark sphere, whose upper half was strewn with silver.{ ' ' }
 	</Text>
 );

package/src/system/Text/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Time/Time.stories.jsx

@@ -17,16 +17,12 @@ export const Default = () => (
 	<React.Fragment>
 		<Grid gap={ 2 } columns={ [ 2, '100px 300px' ] } sx={ { mb: '20px' } }>
 			<Time time="7pm" />
-			<Box>
-				It looks like everything is recovered now. You can forget about the last event.
-			</Box>
+			<Box>It looks like everything is recovered now. You can forget about the last event.</Box>
 		</Grid>
 
 		<Grid gap={ 2 } columns={ [ 2, '100px 200px' ] }>
 			<Time time="6pm" />
-			<Box>
-				At this particular moment in the day, something happened with your environment.
-			</Box>
+			<Box>At this particular moment in the day, something happened with your environment.</Box>
 		</Grid>
 	</React.Fragment>
 );

package/src/system/Time/index.js

@@ -44,19 +44,19 @@ const Time = ( { time, relativeTime = false, timeOnly = false, className = null,
 
 	return (
 		<Text
-			title={time.toLocaleString( 'sv', { timeZoneName: 'short' } )}
-			datetime={time}
+			title={ time.toLocaleString( 'sv', { timeZoneName: 'short' } ) }
+			datetime={ time }
 			as="time"
 			className={ classNames( 'vip-time-component', className ) }
-			{...props}
+			{ ...props }
 		>
-			{formattedTime}
+			{ formattedTime }
 		</Text>
 	);
 };
 
 Time.propTypes = {
-	time: PropTypes.string,
+	time: PropTypes.oneOfType( [ PropTypes.string, PropTypes.instanceOf( Date ) ] ),
 	timeOnly: PropTypes.bool,
 	relativeTime: PropTypes.bool,
 	className: PropTypes.any,