@automattic/vip-design-system 0.10.2 → 0.11.1

package/src/system/Table/TableRow.js

@@ -9,9 +9,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading, Box } from '../';
+import { TableCell } from './TableCell';
 
-const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
+const TableRow = ( { onClick, head = false, cells = [], children } ) => {
 	const hoverStyles = onClick
 		? { cursor: 'pointer', '&:hover': { bg: 'hover', borderRadius: 2 } }
 		: {};
@@ -30,58 +30,21 @@ const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
 			onKeyDown={ handleKeyPress }
 		>
 			{ cells.map( ( cell, index ) => (
-				<TableCell key={ index } cell={ cell } head={ head } isRowHead={ index === 0 && rowHead } />
+				<TableCell key={ index } head={ head }>
+					{ cell }
+				</TableCell>
 			) ) }
-		</tr>
-	);
-};
 
-const TableCell = ( { head, isRowHead, cell } ) => {
-	let scope = null;
-	if ( head ) {
-		scope = 'col';
-	} else if ( isRowHead ) {
-		scope = 'row';
-	}
-	return (
-		<Box
-			as={ isRowHead || head ? 'th' : 'td' }
-			scope={ scope }
-			sx={ {
-				px: 3,
-				py: 2,
-				textAlign: 'left',
-				borderBottom: '1px solid',
-				fontWeight: 'body',
-				borderTop: head ? '1px solid' : 'none',
-				borderColor: 'border',
-				'&:first-of-type': {
-					pl: 5,
-				},
-			} }
-		>
-			{ head ? (
-				<Heading variant="caps" as="div" sx={ { mb: 0 } }>
-					{ cell }
-				</Heading>
-			) : (
-				cell
-			) }
-		</Box>
+			{ children }
+		</tr>
 	);
 };
 
-TableCell.propTypes = {
-	head: PropTypes.bool,
-	isRowHead: PropTypes.bool,
-	cell: PropTypes.node,
-};
-
 TableRow.propTypes = {
-	onClick: PropTypes.func,
-	head: PropTypes.bool,
 	cells: PropTypes.array,
-	rowHead: PropTypes.bool,
+	children: PropTypes.node,
+	head: PropTypes.bool,
+	onClick: PropTypes.func,
 };
 
 export { TableRow };

package/src/system/Table/index.js

@@ -1,8 +1,8 @@
-
 /**
  * Internal dependencies
  */
 import { Table } from './Table';
 import { TableRow } from './TableRow';
+import { TableCell } from './TableCell';
 
-export { Table, TableRow };
+export { Table, TableRow, TableCell };

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.instanceOf( 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
  */

package/src/system/Tooltip/Tooltip.js

@@ -8,11 +8,11 @@ import { MdHelp } from 'react-icons/md';
 import * as TTip from '@radix-ui/react-tooltip';
 
 /**
-* Internal dependencies
-*/
+ * 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 />,
@@ -55,11 +55,7 @@ const Tooltip = ( {
 				{ trigger }
 
 				<TTip.Content>
-					<Card
-						className="tooltip-content"
-						sx={ { width: width } }
-						{ ...props }
-					>
+					<Card className="tooltip-content" sx={ { width: width } } { ...props }>
 						{ children ? children : <Text sx={ { fontSize: 1 } }>{ text }</Text> }
 					</Card>
 					<StyledArrow />

package/src/system/Wizard/Wizard.js

@@ -16,42 +16,44 @@ import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 const Wizard = ( { steps, activeStep, variant, completed = [], className = null, ...props } ) => {
 	return (
 		<Box className={ classNames( 'vip-wizard-component', className ) }>
-			{variant === 'horizontal' ? (
+			{ variant === 'horizontal' ? (
 				<Box>
 					<Flex
-						sx={{
+						sx={ {
 							flex: '0 0 auto',
-						}}
-						{...props}
+						} }
+						{ ...props }
 					>
-						{steps.map( ( { title, subTitle }, index ) => (
-							<React.Fragment key={index}>
+						{ steps.map( ( { title, subTitle }, index ) => (
+							<React.Fragment key={ index }>
 								<WizardStepHorizontal
-									order={index + 1}
-									active={index === activeStep}
-									title={title}
-									subTitle={subTitle}
+									order={ index + 1 }
+									active={ index === activeStep }
+									title={ title }
+									subTitle={ subTitle }
 								/>
-								{index < steps.length - 1 && <MdArrowForward sx={{ mx: 2, color: 'grey.80' }} />}
+								{ 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 ) => (
 					<WizardStep
-						active={index === activeStep}
-						title={title}
-						subTitle={subTitle}
-						complete={completed.includes( index )}
-						key={index}
-						order={index + 1}
+						active={ index === activeStep }
+						title={ title }
+						subTitle={ subTitle }
+						complete={ completed.includes( index ) }
+						key={ index }
+						order={ index + 1 }
 					>
-						{children}
+						{ children }
 					</WizardStep>
 				) )
-			)}
+			) }
 		</Box>
 	);
 };

package/src/system/Wizard/Wizard.stories.jsx

@@ -17,8 +17,7 @@ export const Default = () => {
 	const steps = [
 		{
 			title: 'Choose Domain',
-			subTitle:
-				'You can bring a domain name you already own, or buy a new one.',
+			subTitle: 'You can bring a domain name you already own, or buy a new one.',
 			children: (
 				<Box>
 					<Label>Domain</Label>
@@ -39,19 +38,15 @@ export const Default = () => {
 	];
 	return (
 		<React.Fragment>
-			<Flex sx={{ alignItems: 'center' }}>
-				<Box sx={{ flex: '1 1 auto' }}>
-					<Heading
-						variant="h1"
-						sx={{ display: 'flex', alignItems: 'center', mb: 1 }}
-					>
-						Add Domain:{' '}
-						<span sx={{ color: 'muted', ml: 2 }}>Production</span>
+			<Flex sx={ { alignItems: 'center' } }>
+				<Box sx={ { flex: '1 1 auto' } }>
+					<Heading variant="h1" sx={ { display: 'flex', alignItems: 'center', mb: 1 } }>
+						Add Domain: <span sx={ { color: 'muted', ml: 2 } }>Production</span>
 					</Heading>
 				</Box>
 			</Flex>
-			<Box mt={4}>
-				<Wizard activeStep={0} steps={steps} className="vip-wizard-xyz" />
+			<Box mt={ 4 }>
+				<Wizard activeStep={ 0 } steps={ steps } className="vip-wizard-xyz" />
 			</Box>
 		</React.Fragment>
 	);

package/src/system/Wizard/WizardStep.js

@@ -30,7 +30,7 @@ const WizardStep = ( { title, subTitle, complete = false, children, active, orde
 
 	return (
 		<Card
-			sx={{
+			sx={ {
 				boxShadow: active ? 'low' : 'none',
 				borderLeft: '2px solid',
 				p: 4,
@@ -43,25 +43,25 @@ const WizardStep = ( { title, subTitle, complete = false, children, active, orde
 				},
 				borderColor: active ? 'primary' : 'border',
 				borderLeftColor: borderLeftColor,
-			}}
+			} }
 			data-step={ order }
 			data-active={ active || undefined }
 		>
 			<Heading
 				variant="h4"
-				sx={{
+				sx={ {
 					mb: 0,
 					display: 'flex',
 					alignItems: 'center',
 					color: color,
-				}}
+				} }
 			>
-				<MdCheckCircle sx={{ mr: 2 }} />
-				{title}
+				<MdCheckCircle sx={ { mr: 2 } } />
+				{ title }
 			</Heading>
-			{subTitle && active && <Text sx={{ mb: 3 }}>{subTitle}</Text>}
+			{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
 
-			{active && children}
+			{ active && children }
 		</Card>
 	);
 };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -15,17 +15,17 @@ const WizardStepHorizontal = ( { title, active, order } ) => {
 	return (
 		<Heading
 			variant="h4"
-			sx={{
+			sx={ {
 				mb: 0,
 				display: 'flex',
 				alignItems: 'center',
 				color: active ? 'heading' : 'muted',
-			}}
+			} }
 			data-step={ order }
 			data-active={ active || undefined }
 		>
-			<MdCheckCircle sx={{ mr: 2 }} />
-			{title}
+			<MdCheckCircle sx={ { mr: 2 } } />
+			{ title }
 		</Heading>
 	);
 };

package/src/system/Wizard/index.js

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

package/src/system/index.js

@@ -44,7 +44,7 @@ import { Time } from './Time';
 import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
-import { Table, TableRow } from './Table';
+import { Table, TableRow, TableCell } from './Table';
 import { TabItem, Tabs } from './Tabs';
 import { Text } from './Text';
 import theme from './theme';
@@ -77,6 +77,7 @@ export {
 	Spinner,
 	Table,
 	TableRow,
+	TableCell,
 	Tooltip,
 	Notification,
 	Link,

package/src/system/theme/index.js

@@ -54,8 +54,7 @@ const textStyles = {
 export default {
 	space: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ],
 	fonts: {
-		body:
-			'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+		body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
 		heading: 'inherit',
 		monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
 		serif: 'recoletaregular, Georgia, serif',
@@ -131,10 +130,10 @@ export default {
 	shadows: {
 		low: '0px 1px 5px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.15)',
 		medium:
-		// eslint-disable-next-line max-len
+			// eslint-disable-next-line max-len
 			'0px 15px 30px rgba(0, 0, 0, 0.07), 0px 1px 2px rgba(0, 0, 0, 0.03)',
 		high:
-		// eslint-disable-next-line max-len
+			// eslint-disable-next-line max-len
 			'0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)',
 	},
 	cards: {