@automattic/vip-design-system 0.8.0 → 0.9.2

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/Timeline/index.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { Flex, Text } from 'theme-ui';
+import { Flex } from 'theme-ui';
 import { MdWatchLater } from 'react-icons/md';
 import PropTypes from 'prop-types';
 
@@ -20,21 +20,27 @@ const VerticalLine = () => {
 	);
 };
 
-const Timeline = ( { time, ...props } ) => (
+const Timeline = ( { time, first = false, last = false, ...props } ) => (
 	<Flex { ...props }>
 		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
-			<VerticalLine />
+			{ ! first && (
+				<VerticalLine />
+			) }
 			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
-			<VerticalLine />
+			{ ! last && (
+				<VerticalLine />
+			) }
 		</Flex>
 		<Flex sx={ { alignItems: 'center', ml: 2 } }>
-			<Text as="span" sx={ { color: 'muted' } }>{ time }</Text>
+			<span>{ time }</span>
 		</Flex>
 	</Flex>
 );
 
 Timeline.propTypes = {
+	first: PropTypes.bool,
 	time: PropTypes.string,
+	last: PropTypes.bool,
 };
 
 export { Timeline };

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

package/src/system/Wizard/WizardStep.js

@@ -11,20 +11,20 @@ import PropTypes from 'prop-types';
  */
 import { Card, Heading, Text } from '..';
 
-const WizardStep = ({ title, subTitle, complete = false, children, active }) => {
+const WizardStep = ( { title, subTitle, complete = false, children, active } ) => {
 	let borderLeftColor = 'border';
 
-	if (complete) {
+	if ( complete ) {
 		borderLeftColor = 'success';
-	} else if (active) {
+	} else if ( active ) {
 		borderLeftColor = 'primary';
 	}
 
 	let color = 'muted';
 
-	if (complete) {
+	if ( complete ) {
 		color = 'success';
-	} else if (active) {
+	} else if ( active ) {
 		color = 'heading';
 	}
 

package/src/system/Wizard/WizardStepHorizontal.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Heading } from '..';
 
-const WizardStepHorizontal = ({ title, active }) => {
+const WizardStepHorizontal = ( { title, active } ) => {
 	return (
 		<Heading
 			variant="h4"

package/src/system/index.js

@@ -8,17 +8,39 @@ import { Box } from './Box';
 import { Button } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
-import { Dialog, DialogButton, DialogDivider, DialogMenu, DialogMenuItem, DialogTrigger, DialogContent } from './Dialog';
+import {
+	Dialog,
+	DialogButton,
+	DialogDivider,
+	DialogMenu,
+	DialogMenuItem,
+	DialogTrigger,
+	DialogContent,
+} from './Dialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { Flex } from './Flex';
-import { Input, Label, Toggle, ToggleRow, ToggleGroup, Validation, Radio, RadioBoxGroup, Select, Textarea, Checkbox } from './Form';
+import {
+	Input,
+	Label,
+	Toggle,
+	ToggleRow,
+	ToggleGroup,
+	Validation,
+	Radio,
+	RadioBoxGroup,
+	Select,
+	Textarea,
+	Checkbox,
+} from './Form';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
 import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
+import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
+import { Time } from './Time';
 import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
@@ -61,6 +83,8 @@ export {
 	Select,
 	Radio,
 	RadioBoxGroup,
+	ResourceList,
+	ResourceItem,
 	Textarea,
 	Progress,
 	Text,
@@ -69,6 +93,7 @@ export {
 	ToggleRow,
 	ToggleGroup,
 	TabItem,
+	Time,
 	Timeline,
 	Validation,
 	Wizard,

package/src/system/theme/colors.js

@@ -396,4 +396,4 @@ export const dark = {
 	},
 };
 
-export default light;
+export default light;