@automattic/vip-design-system 0.10.3 → 0.11.0

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

@@ -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

@@ -11,28 +11,30 @@ 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>,
-				]}
+				] }
 			/>
 		</tbody>
 	</Table>

package/src/system/Table/index.js

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

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.date ] ),
 	timeOnly: PropTypes.bool,
 	relativeTime: PropTypes.bool,
 	className: PropTypes.any,

package/src/system/Timeline/Timeline.js

@@ -16,25 +16,19 @@ const VerticalLine = () => {
 				borderColor: 'border',
 				height: 'calc( 50% - 16px )',
 				borderRadius: '2px',
-			} }>
-		</div>
+			} }
+		></div>
 	);
 };
 
 const Timeline = ( { time, first = false, last = false, className = null, ...props } ) => (
 	<Flex className={ classNames( 'vip-timeline-component', className ) } { ...props }>
 		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
-			{ ! first && (
-				<VerticalLine />
-			) }
-			<MdWatchLater aria-hidden sx={ { color: 'border' } } size={ 18 }/>
-			{ ! last && (
-				<VerticalLine />
-			) }
-		</Flex>
-		<Flex sx={ { alignItems: 'center', ml: 2 } }>
-			{ time }
+			{ ! first && <VerticalLine /> }
+			<MdWatchLater aria-hidden sx={ { color: 'border' } } size={ 18 } />
+			{ ! last && <VerticalLine /> }
 		</Flex>
+		<Flex sx={ { alignItems: 'center', ml: 2 } }>{ time }</Flex>
 	</Flex>
 );
 

package/src/system/Timeline/Timeline.stories.jsx

@@ -17,18 +17,9 @@ export default {
 export const Default = () => {
 	return (
 		<React.Fragment>
-			<Timeline
-				time="13:00"
-				title="21:00 UTC"
-			/>
-			<Timeline
-				time={ <Link>14:00</Link> }
-				title="22:00 UTC"
-			/>
-			<Timeline
-				time="15:00"
-				title="23:00 UTC"
-			/>
+			<Timeline time="13:00" title="21:00 UTC" />
+			<Timeline time={ <Link>14:00</Link> } title="22:00 UTC" />
+			<Timeline time="15:00" title="23:00 UTC" />
 		</React.Fragment>
 	);
 };

package/src/system/Timeline/index.js

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