@automattic/vip-design-system 0.8.1 → 0.9.0

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,18 +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 { Timeline } from './Timeline';
+import { Time } from './Time';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
 import { Table, TableRow } from './Table';
@@ -61,6 +82,8 @@ export {
 	Select,
 	Radio,
 	RadioBoxGroup,
+	ResourceList,
+	ResourceItem,
 	Textarea,
 	Progress,
 	Text,
@@ -69,7 +92,7 @@ export {
 	ToggleRow,
 	ToggleGroup,
 	TabItem,
-	Timeline,
+	Time,
 	Validation,
 	Wizard,
 	WizardStep,

package/src/system/theme/colors.js

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

package/src/system/theme/index.js

@@ -1,23 +1,23 @@
 /**
  * Internal dependencies
  */
- import { light, dark } from './colors';
+import { light, dark } from './colors';
 
- const textStyles = {
+const textStyles = {
 	h1: {
 		fontSize: 5,
 		marginBottom: 3,
 		letterSpacing: '-.02em',
 		fontWeight: 'body',
 		fontFamily: 'serif',
-		color: 'heading'
+		color: 'heading',
 	},
 	h2: {
 		fontSize: 4,
 		marginBottom: 2,
 		letterSpacing: '-.005em',
 		fontWeight: 400,
-		color: 'heading'
+		color: 'heading',
 	},
 	h3: {
 		fontSize: 3,
@@ -25,21 +25,21 @@
 		letterSpacing: '-.005em',
 		lineHeight: 1.4,
 		fontWeight: 'heading',
-		color: 'heading'
+		color: 'heading',
 	},
 	h4: {
 		fontSize: 2,
 		marginBottom: 1,
 		lineHeight: 1.5,
 		fontWeight: 'heading',
-		color: 'heading'
+		color: 'heading',
 	},
 	h5: {
 		fontSize: 1,
 		marginBottom: 1,
 		lineHeight: 1.5,
 		fontWeight: 'heading',
-		color: 'heading'
+		color: 'heading',
 	},
 	caps: {
 		fontSize: 1,
@@ -49,132 +49,132 @@
 		fontWeight: 'bold',
 		letterSpacing: '.05em',
 	},
- }
+};
 
- 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',
-		 heading: 'inherit',
-		 monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
-		 serif: 'recoletaregular, Georgia, serif',
-	 },
-	 fontSizes: [ 10, 12, 14, 19, 32, 40, 56, 64, 96 ],
-	 fontWeights: {
-		 body: 400,
-		 heading: 500,
-		 bold: 600,
-	 },
-	 lineHeights: {
-		 body: 1.6,
-		 heading: 1.125,
-	 },
-	 sizes: {
-		 sidebar: 260,
-	 },
-	 radii: [ 0, 5, 10 ],
-	 config: {
+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',
+		heading: 'inherit',
+		monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+		serif: 'recoletaregular, Georgia, serif',
+	},
+	fontSizes: [ 10, 12, 14, 19, 32, 40, 56, 64, 96 ],
+	fontWeights: {
+		body: 400,
+		heading: 500,
+		bold: 600,
+	},
+	lineHeights: {
+		body: 1.6,
+		heading: 1.125,
+	},
+	sizes: {
+		sidebar: 260,
+	},
+	radii: [ 0, 5, 10 ],
+	config: {
 		useColorSchemeMediaQuery: false,
 	},
-	 initialColorModeName: 'light',
-	 colors: {
-		 text: light.grey[ '90' ],
-		 heading: light.grey[ '100' ],
-		 background: '#fdfdfd',
-		 backgroundSecondary: light.grey[ '10' ],
-		 primary: light.brand[ '70' ],
-		 secondary: '#30c',
-		 muted: light.grey[ '90' ],
-		 link: light.brand[ '90' ],
-		 card: '#fff',
-		 border: light.grey[ '20' ],
-		 hover: 'rgba(0,0,0,.02)',
-		 lightenBackground: 'rgba(255,255,255,.5)',
-		 darken: 'rgba(0,0,0,.05)',
-		 placeholder: light.grey[ '70' ],
-		 midnight: '#13191E',
-		 navigationStart: light.grey[ '5' ],
-		 navigationEnd: light.grey[ '5' ],
-		 success: light.green['90'],
-		 error: light.red['90'],
-		 warning: light.yellow['90'],
-		 dialog: light.grey['0'],
-		 backgroundMuted: light.grey['5'],
-		 ...light,
-		 modes: {
-			 dark: {
-				 text: dark.grey[ '90' ],
-				 heading: dark.grey[ '100' ],
-				 background: dark.grey[ '5' ],
-				 backgroundSecondary: dark.grey[ '10' ],
-		 		 primary: light.brand[ '70' ],
-				 secondary: '#30c',
-				 muted: dark.grey[ '90' ],
-				 link: dark.brand[ '90' ],
-				 card: dark.grey[ '20' ],
-				 placeholder: dark.grey[ '70' ],
-				 border: dark.grey[ '30' ],
-				 hover: 'rgba(255,255,255,.02)',
-				 midnight: dark.grey[ '90' ],
-				 navigationStart: dark.grey[ '5' ],
-				 navigationEnd: dark.grey[ '5' ],
-		 		 success: dark.green['90'],
-		 		 error: dark.red['90'],
-		 		 warning: dark.yellow['90'],
-		 		 dialog: dark.grey['40'],
-				 backgroundMuted: dark.grey['10'],
-				 ...dark,
-			 },
-		 },
-	 },
-	 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
-			  '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
-			  '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: {
-		 primary: {
-			 padding: 3,
-			 borderRadius: 2,
-			 backgroundColor: 'card',
-			 boxShadow: 'low',
-		 },
-		 secondary: {
-			 borderRadius: 2,
-			 p: 3,
-			 boxShadow: 'none',
-			 border: '1px solid',
-			 borderColor: 'border',
-		 },
-		 indent: {
-			 borderRadius: 2,
-			 p: 3,
-			 boxShadow: 'none',
-			 backgroundColor: 'backgroundMuted',
-		 },
-	 },
+	initialColorModeName: 'light',
+	colors: {
+		text: light.grey[ '90' ],
+		heading: light.grey[ '100' ],
+		background: '#fdfdfd',
+		backgroundSecondary: light.grey[ '10' ],
+		primary: light.brand[ '70' ],
+		secondary: '#30c',
+		muted: light.grey[ '90' ],
+		link: light.brand[ '90' ],
+		card: '#fff',
+		border: light.grey[ '20' ],
+		hover: 'rgba(0,0,0,.02)',
+		lightenBackground: 'rgba(255,255,255,.5)',
+		darken: 'rgba(0,0,0,.05)',
+		placeholder: light.grey[ '70' ],
+		midnight: '#13191E',
+		navigationStart: light.grey[ '5' ],
+		navigationEnd: light.grey[ '5' ],
+		success: light.green[ '90' ],
+		error: light.red[ '90' ],
+		warning: light.yellow[ '90' ],
+		dialog: light.grey[ '0' ],
+		backgroundMuted: light.grey[ '5' ],
+		...light,
+		modes: {
+			dark: {
+				text: dark.grey[ '90' ],
+				heading: dark.grey[ '100' ],
+				background: dark.grey[ '5' ],
+				backgroundSecondary: dark.grey[ '10' ],
+				primary: light.brand[ '70' ],
+				secondary: '#30c',
+				muted: dark.grey[ '90' ],
+				link: dark.brand[ '90' ],
+				card: dark.grey[ '20' ],
+				placeholder: dark.grey[ '70' ],
+				border: dark.grey[ '30' ],
+				hover: 'rgba(255,255,255,.02)',
+				midnight: dark.grey[ '90' ],
+				navigationStart: dark.grey[ '5' ],
+				navigationEnd: dark.grey[ '5' ],
+				success: dark.green[ '90' ],
+				error: dark.red[ '90' ],
+				warning: dark.yellow[ '90' ],
+				dialog: dark.grey[ '40' ],
+				backgroundMuted: dark.grey[ '10' ],
+				...dark,
+			},
+		},
+	},
+	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
+			'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
+			'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: {
+		primary: {
+			padding: 3,
+			borderRadius: 2,
+			backgroundColor: 'card',
+			boxShadow: 'low',
+		},
+		secondary: {
+			borderRadius: 2,
+			p: 3,
+			boxShadow: 'none',
+			border: '1px solid',
+			borderColor: 'border',
+		},
+		indent: {
+			borderRadius: 2,
+			p: 3,
+			boxShadow: 'none',
+			backgroundColor: 'backgroundMuted',
+		},
+	},
 
-	 buttons: {
-		 primary: {
-			 // you can reference other values defined in the theme
-			 color: 'grey.0',
-			 bg: 'grey.100',
-			 cursor: 'pointer',
-			 fontWeight: 'bold',
-			 boxShadow: 'none',
-			 borderRadius: 1,
-			 border: '1px solid transparent',
-			 '&:hover, &:focus': {
-				 backgroundColor: 'grey.90',
-				 color: 'grey.0',
-			 },
-		 },
-		 border: {
+	buttons: {
+		primary: {
+			// you can reference other values defined in the theme
+			color: 'grey.0',
+			bg: 'grey.100',
+			cursor: 'pointer',
+			fontWeight: 'bold',
+			boxShadow: 'none',
+			borderRadius: 1,
+			border: '1px solid transparent',
+			'&:hover, &:focus': {
+				backgroundColor: 'grey.90',
+				color: 'grey.0',
+			},
+		},
+		border: {
 			background: 'none',
 			border: '1px solid',
 			borderColor: 'border',
@@ -183,121 +183,121 @@
 			alignItems: 'center',
 			color: 'text',
 			'&:hover': {
-				bg: 'hover'
-			}
-		 },
-		 danger: {
-			 // you can reference other values defined in the theme
-			 variant: 'buttons.primary',
-			 bg: 'red.70',
-			 '&:hover, &:focus': {
-				 backgroundColor: 'red.80',
-			 },
-		 },
-		 secondary: {
-			 color: 'text',
-			 cursor: 'pointer',
-			 boxShadow: 'none',
-			 fontWeight: 'heading',
-			 borderRadius: 1,
-			 bg: 'grey.10',
-			 '&:hover, &:focus': {
-				 color: 'grey.100',
-				 bg: 'grey.20',
-			 },
-		 },
-		 text: {
-			 background: 'none',
-			 boxShadow: 'none',
-			 color: 'link',
-			 cursor: 'pointer',
-			 fontWeight: 'heading',
-			 '&:hover, &:focus': {
-				 color: 'heading',
-				 backgroundColor: 'hover',
-			 },
-		 },
-		 icon: {
-			 background: 'none',
-			 boxShadow: 'none',
-			 color: 'text',
-			 cursor: 'pointer',
-			 fontWeight: 'heading',
-			 padding: 1,
-			 '&:hover, &:focus': {
-				 backgroundColor: 'border',
-			 },
-		 },
-	 },
-	 links: {
-		 dark: {
-			 color: 'modes.dark.muted',
-			 '&:hover': { color: 'modes.dark.heading' },
-		 },
-		 hover: {
-			 display: 'block',
-			 color: 'inherit',
-			 py: 1,
-			 px: 2,
-			 my: -1,
-			 mx: -2,
-			 borderRadius: 2,
-			 '&:hover': {
-				 backgroundColor: 'hover',
-			 },
-		 },
-	 },
-	 text: textStyles,
-	 dialog: {
-		 modal: {
-			 position: 'fixed',
-			 top: '10vh',
-			 left: '50%',
-			 maxWidth: '90%',
-			 backgroundColor: 'background',
-			 boxShadow: 'high',
-		 },
-		 sidebar: {
-			 position: 'fixed',
-			 top: '0',
-			 height: '100vh',
-			 left: '0',
-			 overflow: 'auto',
-			 margin: 0,
-			 borderRadius: 0,
-			 boxShadow: 'high',
-			 backgroundColor: 'background',
-		 },
-		 cover: {
-			 position: 'fixed',
-			 backgroundColor: 'background',
-			 width: '100%',
-			 left: 0,
-			 top: 0,
-			 height: '100vh',
-			 transform: 'none',
-			 borderRadius: 0,
-			 opacity: 0.97,
-		 },
-	 },
-	 styles: {
-		 root: {
-			 fontFamily: 'body',
-			 lineHeight: 'body',
-			 fontWeight: 'body',
-			 fontSize: 2,
-			 color: 'text',
-			 backgroundColor: 'background',
-			 '-webkit-font-smoothing': 'antialiased',
-			 '-moz-osx-font-smoothing': 'grayscale',
-			 svg: {
-				 fill: 'currentColor',
-				 display: 'block',
-			 },
-			 pre: {
-				 fontFamily: 'body'
-			 },
-			 ...textStyles
-		 },
-	 },
- };
+				bg: 'hover',
+			},
+		},
+		danger: {
+			// you can reference other values defined in the theme
+			variant: 'buttons.primary',
+			bg: 'red.70',
+			'&:hover, &:focus': {
+				backgroundColor: 'red.80',
+			},
+		},
+		secondary: {
+			color: 'text',
+			cursor: 'pointer',
+			boxShadow: 'none',
+			fontWeight: 'heading',
+			borderRadius: 1,
+			bg: 'grey.10',
+			'&:hover, &:focus': {
+				color: 'grey.100',
+				bg: 'grey.20',
+			},
+		},
+		text: {
+			background: 'none',
+			boxShadow: 'none',
+			color: 'link',
+			cursor: 'pointer',
+			fontWeight: 'heading',
+			'&:hover, &:focus': {
+				color: 'heading',
+				backgroundColor: 'hover',
+			},
+		},
+		icon: {
+			background: 'none',
+			boxShadow: 'none',
+			color: 'text',
+			cursor: 'pointer',
+			fontWeight: 'heading',
+			padding: 1,
+			'&:hover, &:focus': {
+				backgroundColor: 'border',
+			},
+		},
+	},
+	links: {
+		dark: {
+			color: 'modes.dark.muted',
+			'&:hover': { color: 'modes.dark.heading' },
+		},
+		hover: {
+			display: 'block',
+			color: 'inherit',
+			py: 1,
+			px: 2,
+			my: -1,
+			mx: -2,
+			borderRadius: 2,
+			'&:hover': {
+				backgroundColor: 'hover',
+			},
+		},
+	},
+	text: textStyles,
+	dialog: {
+		modal: {
+			position: 'fixed',
+			top: '10vh',
+			left: '50%',
+			maxWidth: '90%',
+			backgroundColor: 'background',
+			boxShadow: 'high',
+		},
+		sidebar: {
+			position: 'fixed',
+			top: '0',
+			height: '100vh',
+			left: '0',
+			overflow: 'auto',
+			margin: 0,
+			borderRadius: 0,
+			boxShadow: 'high',
+			backgroundColor: 'background',
+		},
+		cover: {
+			position: 'fixed',
+			backgroundColor: 'background',
+			width: '100%',
+			left: 0,
+			top: 0,
+			height: '100vh',
+			transform: 'none',
+			borderRadius: 0,
+			opacity: 0.97,
+		},
+	},
+	styles: {
+		root: {
+			fontFamily: 'body',
+			lineHeight: 'body',
+			fontWeight: 'body',
+			fontSize: 2,
+			color: 'text',
+			backgroundColor: 'background',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
+			svg: {
+				fill: 'currentColor',
+				display: 'block',
+			},
+			pre: {
+				fontFamily: 'body',
+			},
+			...textStyles,
+		},
+	},
+};

package/test/setupAfterEnv.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import 'jest-axe/extend-expect';
+import '@testing-library/jest-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+if ( process.env.NODE_ENV !== 'production' ) {
+	const axe = require( '@axe-core/react' );
+
+	axe( React, ReactDOM, 1000 );
+}

package/test/setupTests.js

@@ -0,0 +1,4 @@
+/**
+ * External dependencies
+ */
+import 'regenerator-runtime/runtime';