@automattic/vip-design-system 0.19.0 → 0.19.1

package/src/system/Tabs/TabItem.js

@@ -13,7 +13,7 @@ import { Link } from '..';
 const TabItem = ( { active = false, sx, ...props } ) => (
 	<Link
 		variant="h4"
-		as="button"
+		// as="button"
 		tabIndex="0"
 		data-active={ active || undefined }
 		sx={ {
@@ -29,6 +29,7 @@ const TabItem = ( { active = false, sx, ...props } ) => (
 			borderLeft: 'none',
 			borderRight: 'none',
 			borderBottom: '1px solid',
+			textDecoration: 'none',
 			borderColor: active ? 'link' : 'transparent',
 			transform: 'translateY(1px)',
 			'&:visited': {

package/src/system/Wizard/Wizard.js

@@ -24,13 +24,14 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 						} }
 						{ ...props }
 					>
-						{ steps.map( ( { title, subTitle }, index ) => (
+						{ steps.map( ( { title, subTitle, titleVariant }, index ) => (
 							<React.Fragment key={ index }>
 								<WizardStepHorizontal
-									order={ index + 1 }
 									active={ index === activeStep }
-									title={ title }
+									order={ index + 1 }
 									subTitle={ subTitle }
+									title={ title }
+									titleVariant={ titleVariant }
 								/>
 								{ index < steps.length - 1 && (
 									<MdArrowForward sx={ { mx: 2, color: 'grey.80' } } />
@@ -41,14 +42,15 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 					{ steps[ activeStep ].children }
 				</Box>
 			) : (
-				steps.map( ( { title, subTitle, children }, index ) => (
+				steps.map( ( { title, subTitle, children, titleVariant }, index ) => (
 					<WizardStep
 						active={ index === activeStep }
-						title={ title }
-						subTitle={ subTitle }
 						complete={ completed.includes( index ) }
 						key={ index }
 						order={ index + 1 }
+						subTitle={ subTitle }
+						title={ title }
+						titleVariant={ titleVariant }
 					>
 						{ children }
 					</WizardStep>

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

@@ -51,3 +51,22 @@ export const Default = () => {
 		</React.Fragment>
 	);
 };
+
+export const CustomHeadingVariant = () => {
+	const steps = [
+		{
+			title: 'Choose Domain',
+			titleVariant: 'h1',
+			subTitle: <h2>You can bring a domain name you already own, or buy a new one.</h2>,
+		},
+		{
+			title: 'Configure DNS',
+			titleVariant: 'h1',
+		},
+	];
+	return (
+		<React.Fragment>
+			<Wizard activeStep={ 0 } steps={ steps } className="vip-wizard-xyz" />
+		</React.Fragment>
+	);
+};

package/src/system/Wizard/WizardStep.js

@@ -11,8 +11,16 @@ import PropTypes from 'prop-types';
  */
 import { Card, Heading, Text } from '..';
 
-const WizardStep = ( { title, subTitle, complete = false, children, active, order } ) => {
-	let borderLeftColor = 'border';
+const WizardStep = ( {
+	title,
+	subTitle,
+	complete = false,
+	children,
+	active,
+	order,
+	titleVariant = 'h4',
+} ) => {
+	let borderLeftColor = 'borders.2';
 
 	if ( complete ) {
 		borderLeftColor = 'success';
@@ -38,25 +46,27 @@ const WizardStep = ( { title, subTitle, complete = false, children, active, orde
 				borderRadius: 0,
 				borderBottom: active ? 'none' : '1px solid',
 				'&:first-of-type': {
-					borderTopWidth: active ? 'none' : '1px',
-					borderTopStyle: active ? 'none' : 'solid',
+					borderTopWidth: '1px',
+					borderTopStyle: 'solid',
+					borderTopColor: 'borders.2',
 				},
-				borderColor: active ? 'primary' : 'border',
+				borderColor: active ? 'primary' : 'borders.2',
 				borderLeftColor: borderLeftColor,
 			} }
 			data-step={ order }
 			data-active={ active || undefined }
 		>
 			<Heading
-				variant="h4"
+				variant={ titleVariant }
 				sx={ {
 					mb: 0,
 					display: 'flex',
 					alignItems: 'center',
-					color: color,
+					color,
+					fontSize: 2,
 				} }
 			>
-				<MdCheckCircle sx={ { mr: 2 } } />
+				<MdCheckCircle sx={ { mr: 2 } } size={ 18 } />
 				{ title }
 			</Heading>
 			{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
@@ -67,12 +77,13 @@ const WizardStep = ( { title, subTitle, complete = false, children, active, orde
 };
 
 WizardStep.propTypes = {
-	title: PropTypes.node,
-	subTitle: PropTypes.node,
-	complete: PropTypes.bool,
 	active: PropTypes.bool,
 	children: PropTypes.node,
+	complete: PropTypes.bool,
 	order: PropTypes.number.isRequired,
+	subTitle: PropTypes.node,
+	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -11,10 +11,10 @@ import PropTypes from 'prop-types';
  */
 import { Heading } from '..';
 
-const WizardStepHorizontal = ( { title, active, order } ) => {
+const WizardStepHorizontal = ( { title, active, order, titleVariant = 'h4' } ) => {
 	return (
 		<Heading
-			variant="h4"
+			variant={ titleVariant }
 			sx={ {
 				mb: 0,
 				display: 'flex',
@@ -31,10 +31,11 @@ const WizardStepHorizontal = ( { title, active, order } ) => {
 };
 
 WizardStepHorizontal.propTypes = {
-	title: PropTypes.node,
-	subTitle: PropTypes.node,
 	active: PropTypes.bool,
 	order: PropTypes.number.isRequired,
+	subTitle: PropTypes.node,
+	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStepHorizontal };

package/src/system/index.js

@@ -20,6 +20,8 @@ import {
 
 import * as NewDialog from './NewDialog';
 import * as Dropdown from './Dropdown';
+import * as Form from './NewForm';
+
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { NewConfirmationDialog } from './NewConfirmationDialog';
 import { Flex } from './Flex';
@@ -65,6 +67,7 @@ export {
 	Code,
 	Dialog,
 	NewDialog,
+	Form,
 	Dropdown,
 	DialogButton,
 	DialogMenu,

package/src/system/theme/index.js

@@ -89,18 +89,32 @@ export default {
 	colors: {
 		text: getColor( 'text', 'secondary' ),
 		heading: getColor( 'text', 'primary' ),
-		background: '#fdfdfd',
+		background: getColor( 'background', 'primary' ),
 		backgroundSecondary: light.grey[ '10' ],
 		primary: light.brand[ '70' ],
 		secondary: '#30c',
 		muted: light.grey[ '90' ],
-		link: light.brand[ '90' ],
+		link: getColor( 'link', 'default' ),
+		links: {
+			default: getColor( 'link', 'default' ),
+			hover: getColor( 'link', 'hover' ),
+			active: getColor( 'link', 'active' ),
+			visited: getColor( 'link', 'visited' ),
+		},
 		card: '#fff',
-		border: light.grey[ '20' ],
+		borders: {
+			1: getColor( 'border', '1' ),
+			2: getColor( 'border', '2' ),
+			3: getColor( 'border', '3' ),
+			4: getColor( 'border', '4' ),
+			accent: getColor( 'border', 'accent' ),
+		},
+
+		border: getColor( 'border', '1' ),
 		hover: 'rgba(0,0,0,.02)',
 		lightenBackground: 'rgba(255,255,255,.5)',
 		darken: 'rgba(0,0,0,.05)',
-		placeholder: light.grey[ '70' ],
+		placeholder: getColor( 'text', 'placeholder' ),
 		midnight: '#13191E',
 		navigationStart: light.grey[ '5' ],
 		navigationEnd: light.grey[ '5' ],
@@ -145,6 +159,7 @@ export default {
 			// 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,
@@ -166,7 +181,6 @@ export default {
 			backgroundColor: 'backgroundMuted',
 		},
 	},
-
 	buttons: {
 		primary: {
 			// you can reference other values defined in the theme
@@ -237,11 +251,13 @@ export default {
 			},
 		},
 	},
+
 	links: {
 		dark: {
 			color: 'modes.dark.muted',
 			'&:hover': { color: 'modes.dark.heading' },
 		},
+
 		hover: {
 			display: 'block',
 			color: 'inherit',