@automattic/vip-design-system 0.8.0 → 0.9.2

package/src/system/OptionRow/OptionRow.js

@@ -10,9 +10,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Badge, Box, Card, Grid, Heading, Text } from '..';
+import { Badge, Box, Grid, Heading, Text } from '..';
 
-const OptionRow = ({
+const OptionRow = ( {
 	image,
 	icon,
 	badge,
@@ -25,34 +25,34 @@ const OptionRow = ({
 	small = false,
 	disabled = false,
 	...props
-}) => {
+} ) => {
 	const mergedCard = disabled
 		? {
-				border: '1px solid',
-				borderColor: 'border',
-				background: 'none',
-				boxShadow: 'none',
-				color: 'grey.70'
-		  }
+			border: '1px solid',
+			borderColor: 'border',
+			background: 'none',
+			boxShadow: 'none',
+			color: 'grey.70',
+		}
 		: {};
 
 	const inlineStyles = inline
 		? {
-				py: 2,
-				px: 2,
-				mx: -2,
-		  }
+			py: 2,
+			px: 2,
+			mx: -2,
+		}
 		: {
-				py: 3,
-				px: [3, 3, small ? 3 : 5],
-				borderBottom: '1px solid',
-				borderColor: 'border',
-		  };
+			py: 3,
+			px: [ 3, 3, small ? 3 : 5 ],
+			borderBottom: '1px solid',
+			borderColor: 'border',
+		};
 	return (
 		<Grid
 			to={to}
-			columns={[1, 1, 'auto 1fr auto']}
-			gap={[3, 3, `${small ? 3 : 4}`]}
+			columns={[ 1, 1, 'auto 1fr auto' ]}
+			gap={[ 3, 3, `${ small ? 3 : 4 }` ]}
 			{...props}
 			sx={{
 				alignItems: 'center',
@@ -69,7 +69,7 @@ const OptionRow = ({
 				{image ? (
 					<Box
 						sx={{
-							display: ['inline-block', 'inline-block', 'block'],
+							display: [ 'inline-block', 'inline-block', 'block' ],
 							p: small ? 12 : 20,
 							flex: '0 0 auto',
 							bg: 'brand.70',
@@ -78,7 +78,7 @@ const OptionRow = ({
 							...mergedCard,
 						}}
 					>
-						{React.isValidElement(image) ? (
+						{React.isValidElement( image ) ? (
 							image
 						) : (
 							<img
@@ -108,7 +108,7 @@ const OptionRow = ({
 };
 
 OptionRow.propTypes = {
-	image: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]),
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	icon: PropTypes.node,
 	badge: PropTypes.string,
 	label: PropTypes.node,

package/src/system/OptionRow/OptionRow.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Progress/Progress.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/ResourceList/ResourceItem.js

@@ -0,0 +1,66 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Box, Flex, Time } from '..';
+
+const ResourceItem = ( {
+	children,
+	item,
+	renderActions,
+	relativeTime = false,
+	timeOnly = false,
+	dateKey,
+	icon = null,
+} ) => {
+	return (
+		<Flex
+			sx={{
+				alignItems: 'center',
+				gap: 3,
+			}}
+		>
+			{icon}
+			<Box sx={{ flex: '1 1 auto' }}>{children}</Box>
+			<Flex
+				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' }}
+				/>
+				{renderActions && (
+					<Flex className="actions" sx={{ alignItems: 'center', gap: 3 }}>
+						<Box sx={{ width: 4, height: 4, borderRadius: 4, bg: 'border' }} />
+						{renderActions( item )}
+					</Flex>
+				)}
+			</Flex>
+		</Flex>
+	);
+};
+
+ResourceItem.propTypes = {
+	children: PropTypes.node,
+	item: PropTypes.object,
+	icon: PropTypes.node,
+	relativeTime: PropTypes.bool,
+	timeOnly: PropTypes.bool,
+	dateKey: PropTypes.string,
+	renderActions: PropTypes.func,
+};
+
+export { ResourceItem };

package/src/system/ResourceList/ResourceList.js

@@ -0,0 +1,96 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Box, Heading } from '..';
+
+const formatterOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+const formatDate = date => {
+	const today = new Date();
+	if ( date.getFullYear() !== today.getFullYear() ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getMonth() !== today.getMonth() ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getDate() < today.getDate() - 1 ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getDate() === today.getDate() - 1 ) {
+		return 'Yesterday';
+	}
+	return 'Today';
+};
+
+const StyledListItem = props => (
+	<Box
+		as="li"
+		sx={{
+			py: 2,
+			borderBottom: '1px solid',
+			borderColor: 'border',
+			listStyleType: 'none',
+			margin: 0,
+			px: 0,
+		}}
+		{...props}
+	/>
+);
+
+const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) => {
+	let groupedItems = {};
+	if ( groupedByDay ) {
+		groupedItems = items?.reduce( ( itemGroups, item ) => {
+			const formattedDate = formatDate( item[ dateKey ] );
+			const itemsAtDate = itemGroups[ formattedDate ];
+
+			return {
+				...itemGroups,
+				[ formattedDate ]: itemsAtDate ? [ ...itemsAtDate, item ] : [ item ],
+			};
+		}, {} );
+	}
+
+	const renderItemList = itemsList =>
+		itemsList.map( ( item, index ) => <StyledListItem key={index}>{renderItem( item )}</StyledListItem> );
+
+	return (
+		<Box as="ul" sx={{ listStyleType: 'none', m: 0, p: 0 }}>
+			{groupedByDay
+				? Object.keys( groupedItems ).map( ( groupName, index ) => (
+					<Box sx={{ mb: 4 }} key={index}>
+						<Heading variant="h4" as="h4" sx={{ mb: 3 }}>
+							{groupName}
+						</Heading>
+						<Box
+							as="ul"
+							sx={{
+								listStyleType: 'none',
+								m: 0,
+								p: 0,
+								borderTop: '1px solid',
+								borderColor: 'border',
+							}}
+						>
+							{renderItemList( groupedItems[ groupName ] )}
+						</Box>
+					</Box>
+				) )
+				: renderItemList( items )}
+		</Box>
+	);
+};
+
+ResourceList.propTypes = {
+	groupedByDay: PropTypes.bool,
+	items: PropTypes.array,
+	renderItem: PropTypes.func,
+	relativeTime: PropTypes.bool,
+	dateKey: PropTypes.string,
+};
+
+export { ResourceList };

package/src/system/ResourceList/ResourceList.stories.js

@@ -0,0 +1,300 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { BiGlobe, BiCheckCircle, BiRevision } from 'react-icons/bi';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Avatar,
+	Badge,
+	Box,
+	Card,
+	Flex,
+	Button,
+	ResourceList,
+	ResourceItem,
+	Text,
+	Heading,
+} from '..';
+
+export default {
+	title: 'ResourceList',
+	component: ResourceList,
+};
+
+const logs = [
+	{
+		actor: 'Saxon Fletcher',
+		action: 'switched primary domain to',
+		object: 'mydomain.com',
+		date: new Date(),
+	},
+	{
+		actor: 'Saxon Fletcher',
+		action: 'switched primary domain to',
+		object: 'mydomain.com',
+		date: new Date( new Date().setHours( 11 ) ),
+	},
+	{
+		actor: 'Simon Wheatley',
+		action: 'deployed to',
+		object: 'Production',
+		showObject: true,
+		date: new Date( new Date().setDate( 15 ) ),
+	},
+	{
+		actor: 'Saxon Fletcher',
+		action: 'created a backup on',
+		object: 'Production',
+		date: new Date( new Date().setDate( 13 ) ),
+	},
+];
+
+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>
+		<ResourceList
+			items={logs}
+			dateKey="date"
+			groupedByDay={true}
+			renderItem={item => (
+				<ResourceItem
+					item={item}
+					icon={<BiGlobe sx={{ color: 'red' }} />}
+					dateKey={'date'}
+					relativeTime={true}
+					timeOnly={true}
+				>
+					<Flex sx={{ alignItems: 'center', gap: 3 }}>
+						<Avatar
+							name={item.actor}
+							src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg"
+							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>
+					</Flex>
+					{item.showObject && (
+						<Box
+							variant="indent"
+							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' }}>
+									#443
+								</Text>
+							</Heading>
+							<Text sx={{ mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+								<Avatar
+									name={item.actor}
+									src="https://uifaces.co/our-content/donated/n4Ngwvi7.jpg"
+									size={16}
+								/>
+								{item.actor}
+							</Text>
+							<Text sx={{ mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+								<BiCheckCircle size={16} />
+								Deployed in 31s
+							</Text>
+						</Box>
+					)}
+				</ResourceItem>
+			)}
+		/>
+	</Box>
+);
+
+const deploys = [
+	{
+		title: 'Merge pull request',
+		id: '#773',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 11 ) ),
+		status: 'running',
+	},
+	{
+		title: 'Update homepage',
+		id: '#772',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 9 ) ),
+	},
+	{
+		title: 'Improve overall performance',
+		id: '#771',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 8 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#770',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 5 ) ),
+		status: 'failed',
+	},
+	{
+		title: 'Merge pull request',
+		id: '#773',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 11 ) ),
+	},
+	{
+		title: 'Update homepage',
+		id: '#772',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 9 ) ),
+	},
+	{
+		title: 'Improve overall performance',
+		id: '#771',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 8 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#770',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 5 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#773',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 11 ) ),
+	},
+	{
+		title: 'Update homepage',
+		id: '#772',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 9 ) ),
+	},
+	{
+		title: 'Improve overall performance',
+		id: '#771',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 8 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#770',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 5 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#773',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 11 ) ),
+	},
+	{
+		title: 'Update homepage',
+		id: '#772',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 9 ) ),
+	},
+	{
+		title: 'Improve overall performance',
+		id: '#771',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 8 ) ),
+	},
+	{
+		title: 'Merge pull request',
+		id: '#770',
+		author: 'Saxon Fletcher',
+		date: new Date( new Date().setHours( 5 ) ),
+	},
+];
+
+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
+					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}
+			dateKey="date"
+			groupedByDay={false}
+			renderItem={item => (
+				<ResourceItem
+					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}
+								</Text>
+							</Heading>
+							{item.status === 'running' && <Badge sx={{ mb: 0 }}>Running</Badge>}
+						</Flex>
+						<Text sx={{ mb: 0, color: 'muted', display: 'flex', alignItems: 'center', gap: 2 }}>
+							<Avatar
+								name={item.author}
+								size={16}
+								src="https://randomuser.me/api/portraits/men/46.jpg"
+							/>
+							{item.author}
+						</Text>
+						<Text
+							sx={{
+								mb: 0,
+								color: item.status === 'running' ? 'blue.60' : 'muted',
+								display: 'flex',
+								alignItems: 'center',
+								gap: 1,
+							}}
+						>
+							{item.status === 'running' ? (
+								<React.Fragment>
+									<BiRevision size={16} />
+									Running for 31s
+								</React.Fragment>
+							) : (
+								<React.Fragment>
+									<BiCheckCircle size={16} />
+									Deployed in 31s
+								</React.Fragment>
+							)}
+						</Text>
+					</Flex>
+				</ResourceItem>
+			)}
+		/>
+	</Box>
+);

package/src/system/ResourceList/index.js

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

package/src/system/Spinner/Spinner.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Table/Table.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Table/TableRow.js

@@ -84,4 +84,4 @@ TableRow.propTypes = {
 	rowHead: PropTypes.bool,
 };
 
-export { TableRow };
+export { TableRow };

package/src/system/Tabs/Tabs.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Text/Text.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/{Timeline/Timeline.stories.js → Time/Time.stories.js}

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