@automattic/vip-design-system 0.7.0 → 0.9.0

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

@@ -55,7 +55,7 @@ const TableCell = ( { head, isRowHead, cell } ) => {
 				fontWeight: 'body',
 				borderTop: head ? '1px solid' : 'none',
 				borderColor: 'border',
-				'&:first-child': {
+				'&:first-of-type': {
 					pl: 5,
 				},
 			} }
@@ -74,7 +74,7 @@ const TableCell = ( { head, isRowHead, cell } ) => {
 TableCell.propTypes = {
 	head: PropTypes.bool,
 	isRowHead: PropTypes.bool,
-	cell: PropTypes.array,
+	cell: PropTypes.node,
 };
 
 TableRow.propTypes = {
@@ -84,4 +84,4 @@ TableRow.propTypes = {
 	rowHead: PropTypes.bool,
 };
 
-export { TableRow };
+export { TableRow };

package/src/system/Tabs/TabItem.js

@@ -27,9 +27,9 @@ const TabItem = ( { active = false, sx, ...props } ) => (
 			borderTop: 'none',
 			borderLeft: 'none',
 			borderRight: 'none',
-			borderBottom: '2px solid',
+			borderBottom: '1px solid',
 			borderColor: active ? 'link' : 'transparent',
-			transform: 'translateY(2px)',
+			transform: 'translateY(1px)',
 			'&:visited': {
 				color: active ? 'heading' : 'muted',
 			},
@@ -45,7 +45,7 @@ const TabItem = ( { active = false, sx, ...props } ) => (
 
 TabItem.propTypes = {
 	active: PropTypes.bool,
-	sx: PropTypes.sx,
+	sx: PropTypes.object,
 	variant: PropTypes.string,
 };
 

package/src/system/Tabs/Tabs.js

@@ -13,7 +13,7 @@ import { Flex } from '..';
 const Tabs = ( { sx, ...props } ) => (
 	<Flex
 		sx={{
-			borderBottom: '2px solid',
+			borderBottom: '1px solid',
 			borderColor: 'border',
 			listStyleType: 'none',
 			margin: 0,

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,31 +5,26 @@
  */
 import PropTypes from 'prop-types';
 import { MdHelp } from 'react-icons/md';
-import { useCallback, useState } from 'react';
+import * as TTip from '@radix-ui/react-tooltip';
 
 /**
- * Internal dependencies
- */
-import { Box, Card, Text } from '..';
-
-const Tooltip = ( { trigger = <MdHelp />, text = '', width = 200, children, ...props } ) => {
-	const [ position, setPosition ] = useState( { left: 0, top: '100%' } );
+* Internal dependencies
+*/
+import { Card, Text } from '..';
 
-	const contentRef = useCallback( node => {
-		if ( node !== null ) {
-			const outerX = window.innerWidth;
-			const outerY = window.innerHeight;
-			const bounds = node.getBoundingClientRect();
-			console.log( 'bounds:', bounds );
-			setPosition( {
-				left: bounds.x + bounds.width > outerX ? -bounds.width : 0,
-				top: bounds.y + bounds.height > outerY ? -bounds.height : '100%',
-			} );
-		}
-	}, [] );
+const StyledArrow = props => <TTip.Arrow sx={{ fill: 'white' }} { ...props } />;
 
+const Tooltip = ( {
+	trigger = <MdHelp />,
+	text = '',
+	width = 200,
+	children,
+	tooltipProps,
+	...props
+} ) => {
 	return (
-		<Box
+		<TTip.Root
+			skipDelayDuration={ 700 }
 			sx={ {
 				display: 'inline-block',
 				position: 'relative',
@@ -45,31 +40,41 @@ const Tooltip = ( { trigger = <MdHelp />, text = '', width = 200, children, ...p
 					},
 				},
 			} }
+			{ ...tooltipProps }
 		>
-			<Box>{ trigger }</Box>
-			<Card
-				ref={ contentRef }
-				className="tooltip-content"
+			<TTip.Trigger
 				sx={ {
-					position: 'absolute',
-					zIndex: 100,
-					left: position.left,
-					top: position.top,
-					width: width,
+					background: 'transparent',
+					border: 'none',
+					display: 'inline-flex',
+					outline: 'none',
+					p: 0,
+					m: 0,
 				} }
-				{ ...props }
 			>
-				{ children ? children : <Text sx={ { fontSize: 1 } }>{ text }</Text> }
-			</Card>
-		</Box>
+				{ trigger }
+
+				<TTip.Content>
+					<Card
+						className="tooltip-content"
+						sx={ { width: width } }
+						{ ...props }
+					>
+						{ children ? children : <Text sx={ { fontSize: 1 } }>{ text }</Text> }
+					</Card>
+					<StyledArrow />
+				</TTip.Content>
+			</TTip.Trigger>
+		</TTip.Root>
 	);
 };
 
 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>
 	);