@automattic/vip-design-system 0.8.1 → 0.9.0

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>

package/src/system/Time/index.js

@@ -0,0 +1,62 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { Text } from 'theme-ui';
+import PropTypes from 'prop-types';
+
+const formatter = new Intl.RelativeTimeFormat( undefined, {
+	numeric: 'auto',
+} );
+
+const DIVISIONS = [
+	{ amount: 60, name: 'seconds' },
+	{ amount: 60, name: 'minutes' },
+	{ amount: 24, name: 'hours' },
+	{ amount: 7, name: 'days' },
+	{ amount: 12, name: 'months' },
+	{ amount: Number.POSITIVE_INFINITY, name: 'years' },
+];
+
+function formatTimeAgo( date ) {
+	let duration = ( date - new Date() ) / 1000;
+
+	for ( let i = 0; i <= DIVISIONS.length; i++ ) {
+		const division = DIVISIONS[ i ];
+		if ( Math.abs( duration ) < division.amount ) {
+			return formatter.format( Math.round( duration ), division.name );
+		}
+		duration /= division.amount;
+	}
+}
+
+const Time = ( { time, relativeTime = false, timeOnly = false, ...props } ) => {
+	let formattedTime;
+	if ( relativeTime ) {
+		formattedTime = formatTimeAgo( time );
+	} else if ( timeOnly ) {
+		formattedTime = time.toLocaleTimeString();
+	} else {
+		formattedTime = time.toLocaleString();
+	}
+
+	return (
+		<Text
+			title={time.toLocaleString( 'sv', { timeZoneName: 'short' } )}
+			datetime={time}
+			as="time"
+			{...props}
+		>
+			{formattedTime}
+		</Text>
+	);
+};
+
+Time.propTypes = {
+	time: PropTypes.string,
+	timeOnly: PropTypes.bool,
+	relativeTime: PropTypes.bool,
+};
+
+export { Time };

package/src/system/Tooltip/Tooltip.js

@@ -5,14 +5,14 @@
  */
 import PropTypes from 'prop-types';
 import { MdHelp } from 'react-icons/md';
-import * as TTip from "@radix-ui/react-tooltip";
+import * as TTip from '@radix-ui/react-tooltip';
 
 /**
 * Internal dependencies
 */
 import { Card, Text } from '..';
 
-const StyledArrow = props => <TTip.Arrow sx={{ fill: 'white' }} { ...props } />
+const StyledArrow = props => <TTip.Arrow sx={{ fill: 'white' }} { ...props } />;
 
 const Tooltip = ( {
 	trigger = <MdHelp />,
@@ -70,10 +70,11 @@ const Tooltip = ( {
 };
 
 Tooltip.propTypes = {
+	children: PropTypes.object,
+	text: PropTypes.string,
+	tooltipProps: PropTypes.object,
 	trigger: PropTypes.string,
 	width: PropTypes.number,
-	text: PropTypes.string,
-	children: PropTypes.object,
 };
 
 export { Tooltip };

package/src/system/Tooltip/Tooltip.stories.js

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

package/src/system/Wizard/Wizard.js

@@ -12,7 +12,7 @@ import { MdArrowForward } from 'react-icons/md';
  */
 import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 
-const Wizard = ({ steps, activeStep, variant, completed = [], ...props }) => {
+const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
 	return (
 		<Box>
 			{variant === 'horizontal' ? (
@@ -23,7 +23,7 @@ const Wizard = ({ steps, activeStep, variant, completed = [], ...props }) => {
 						}}
 						{...props}
 					>
-						{steps.map(({ title, subTitle }, index) => (
+						{steps.map( ( { title, subTitle }, index ) => (
 							<React.Fragment key={index}>
 								<WizardStepHorizontal
 									active={index === activeStep}
@@ -32,22 +32,22 @@ const Wizard = ({ steps, activeStep, variant, completed = [], ...props }) => {
 								/>
 								{index < steps.length - 1 && <MdArrowForward sx={{ mx: 2, color: 'grey.80' }} />}
 							</React.Fragment>
-						))}
+						) )}
 					</Flex>
-					{steps[activeStep].children}
+					{steps[ activeStep ].children}
 				</Box>
 			) : (
-				steps.map(({ title, subTitle, children }, index) => (
+				steps.map( ( { title, subTitle, children }, index ) => (
 					<WizardStep
 						active={index === activeStep}
 						title={title}
 						subTitle={subTitle}
-						complete={completed.includes(index)}
+						complete={completed.includes( index )}
 						key={index}
 					>
 						{children}
 					</WizardStep>
-				))
+				) )
 			)}
 		</Box>
 	);