@automattic/vip-design-system 0.10.3 → 0.12.0

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: {