@automattic/vip-design-system 0.10.2 → 0.11.1

package/src/system/ResourceList/ResourceItem.js

@@ -21,33 +21,33 @@ const ResourceItem = ( {
 } ) => {
 	return (
 		<Flex
-			sx={{
+			sx={ {
 				alignItems: 'center',
 				gap: 3,
-			}}
+			} }
 		>
-			{icon}
-			<Box sx={{ flex: '1 1 auto' }}>{children}</Box>
+			{ icon }
+			<Box sx={ { flex: '1 1 auto' } }>{ children }</Box>
 			<Flex
-				sx={{
+				sx={ {
 					flex: '0 0 auto',
 					alignItems: 'center',
 					gap: 3,
-				}}
+				} }
 			>
 				<Time
 					className="time"
-					relativeTime={relativeTime}
-					timeOnly={timeOnly}
-					time={item[ dateKey ]}
-					sx={{ color: 'muted', mb: 0, textAlign: 'right', flex: '0 0 auto' }}
+					relativeTime={ relativeTime }
+					timeOnly={ timeOnly }
+					time={ item[ dateKey ] }
+					sx={ { color: 'muted', mb: 0, textAlign: 'right', flex: '0 0 auto' } }
 				/>
-				{renderActions && (
-					<Flex className="actions" sx={{ alignItems: 'center', gap: 3 }}>
-						<Box sx={{ width: 4, height: 4, borderRadius: 4, bg: 'border' }} />
-						{renderActions( item )}
+				{ renderActions && (
+					<Flex className="actions" sx={ { alignItems: 'center', gap: 3 } }>
+						<Box sx={ { width: 4, height: 4, borderRadius: 4, bg: 'border' } } />
+						{ renderActions( item ) }
 					</Flex>
-				)}
+				) }
 			</Flex>
 		</Flex>
 	);

package/src/system/ResourceList/ResourceList.js

@@ -4,6 +4,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 
 /**
  * Internal dependencies
@@ -29,15 +30,15 @@ const formatDate = date => {
 const StyledListItem = props => (
 	<Box
 		as="li"
-		sx={{
+		sx={ {
 			py: 2,
 			borderBottom: '1px solid',
 			borderColor: 'border',
 			listStyleType: 'none',
 			margin: 0,
 			px: 0,
-		}}
-		{...props}
+		} }
+		{ ...props }
 	/>
 );
 
@@ -56,31 +57,42 @@ const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) =>
 	}
 
 	const renderItemList = itemsList =>
-		itemsList.map( ( item, index ) => <StyledListItem key={index}>{renderItem( item )}</StyledListItem> );
+		itemsList.map( ( item, index ) => (
+			<StyledListItem key={ index }>{ renderItem( item ) }</StyledListItem>
+		) );
 
-	return (
-		<Box as="ul" sx={{ listStyleType: 'none', m: 0, p: 0 }} className="vip-resource-list-component">
-			{groupedByDay
-				? Object.keys( groupedItems ).map( ( groupName, index ) => (
-					<Box sx={{ mb: 4 }} key={index}>
-						<Heading variant="h4" as="h4" sx={{ mb: 3 }}>
-							{groupName}
+	const renderGoupedItems = () =>
+		useMemo(
+			() =>
+				Object.keys( groupedItems ).map( ( groupName, index ) => (
+					<Box sx={ { mb: 4 } } key={ index } as="li">
+						<Heading variant="h4" as="h4" sx={ { mb: 3 } }>
+							{ groupName }
 						</Heading>
 						<Box
 							as="ul"
-							sx={{
+							sx={ {
 								listStyleType: 'none',
 								m: 0,
 								p: 0,
 								borderTop: '1px solid',
 								borderColor: 'border',
-							}}
+							} }
 						>
-							{renderItemList( groupedItems[ groupName ] )}
+							{ renderItemList( groupedItems[ groupName ] ) }
 						</Box>
 					</Box>
-				) )
-				: renderItemList( items )}
+				) ),
+			[ groupedItems ]
+		);
+
+	return (
+		<Box
+			as="ul"
+			sx={ { listStyleType: 'none', m: 0, p: 0 } }
+			className="vip-resource-list-component"
+		>
+			{ groupedByDay ? renderGoupedItems( groupedItems ) : renderItemList( items ) }
 		</Box>
 	);
 };

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

@@ -4,20 +4,21 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Table = ( { sx, ...props } ) => (
-	<div sx={ { overflowX: 'auto' } }>
-		<table
-			sx={ { width: '100%', minWidth: 1024, ...sx } }
-			cellPadding={ 0 }
-			cellSpacing={ 0 }
-			{ ...props }
-		/>
-	</div>
+const Table = ( { sx, className, ...props } ) => (
+	<table
+		sx={ { width: '100%', minWidth: 1024, ...sx } }
+		cellPadding={ 0 }
+		cellSpacing={ 0 }
+		className={ classNames( 'vip-table-component', className ) }
+		{ ...props }
+	/>
 );
 
 Table.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Table };

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 };