@automattic/vip-design-system 0.23.6 → 0.24.0

package/src/system/Wizard/WizardStep.js

@@ -13,7 +13,10 @@ import PropTypes from 'prop-types';
 import { Card, Heading, Text, Flex } from '..';
 
 const WizardStep = React.forwardRef(
-	( { title, subTitle, complete = false, children, active, order }, forwardRef ) => {
+	(
+		{ title, subTitle, complete = false, children, active, order, titleVariant = 'h3' },
+		forwardRef
+	) => {
 		let borderLeftColor = 'border';
 
 		if ( complete ) {
@@ -32,6 +35,7 @@ const WizardStep = React.forwardRef(
 
 		return (
 			<Card
+				as="section"
 				sx={ {
 					boxShadow: active ? 'low' : 'none',
 					borderLeft: '2px solid',
@@ -53,12 +57,14 @@ const WizardStep = React.forwardRef(
 			>
 				{ typeof title === 'string' ? (
 					<Heading
-						variant="h4"
+						variant={ titleVariant }
 						sx={ {
 							mb: 0,
 							display: 'flex',
 							alignItems: 'center',
-							color: color,
+							color,
+							fontSize: 2,
+							fontWeight: active ? 'bold' : 'normal',
 						} }
 					>
 						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
@@ -88,6 +94,7 @@ WizardStep.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -12,32 +12,35 @@ import PropTypes from 'prop-types';
  */
 import { Heading, Flex } from '..';
 
-const WizardStepHorizontal = React.forwardRef( ( { title, active, order }, forwardRef ) => {
-	const color = active ? 'heading' : 'muted';
+const WizardStepHorizontal = React.forwardRef(
+	( { title, active, order, titleVariant = 'h3' }, forwardRef ) => {
+		const color = active ? 'heading' : 'muted';
 
-	return typeof title === 'string' ? (
-		<Heading
-			variant="h4"
-			sx={ {
-				mb: 0,
-				display: 'flex',
-				alignItems: 'center',
-				color,
-			} }
-			data-step={ order }
-			data-active={ active || undefined }
-			ref={ forwardRef }
-		>
-			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-			{ title }
-		</Heading>
-	) : (
-		<Flex sx={ { alignItems: 'center', color } }>
-			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-			{ title }
-		</Flex>
-	);
-} );
+		return typeof title === 'string' ? (
+			<Heading
+				variant={ titleVariant }
+				sx={ {
+					mb: 0,
+					display: 'flex',
+					alignItems: 'center',
+					fontSize: 2,
+					color,
+				} }
+				data-step={ order }
+				data-active={ active || undefined }
+				ref={ forwardRef }
+			>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Heading>
+		) : (
+			<Flex sx={ { alignItems: 'center', color } }>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Flex>
+		);
+	}
+);
 
 WizardStepHorizontal.displayName = 'WizardStepHorizontal';
 
@@ -46,6 +49,7 @@ WizardStepHorizontal.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStepHorizontal };

package/src/system/index.js

@@ -38,6 +38,7 @@ import {
 	Textarea,
 	Checkbox,
 } from './Form';
+import { Accordion } from './Accordion';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
@@ -56,6 +57,7 @@ import theme from './theme';
 import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
 
 export {
+	Accordion,
 	Avatar,
 	Badge,
 	Box,

package/src/system/theme/getColor.js

@@ -11,3 +11,17 @@ export const getColor = ( color, variant = 'default' ) => {
 
 	return Valet[ color ][ variant ].value;
 };
+
+const resolvePath = ( object, path, defaultValue ) => {
+	return path.split( '.' ).reduce( ( acc, property ) => {
+		return acc ? acc[ property ] : defaultValue;
+	}, object );
+};
+
+export const getVariants = color => {
+	const property = resolvePath( Valet, color, {} );
+
+	return Object.keys( property ).reduce( ( variants, variant ) => {
+		return { ...variants, [ variant ]: property[ variant ].value };
+	}, {} );
+};

package/src/system/theme/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { light, dark } from './colors';
-import { getColor } from './getColor';
+import { getColor, getVariants } from './getColor';
 
 const textStyles = {
 	h1: {
@@ -90,6 +90,8 @@ export default {
 		text: getColor( 'text', 'secondary' ),
 		heading: getColor( 'text', 'primary' ),
 		background: getColor( 'background', 'primary' ),
+		gold: getVariants( 'color.gold' ),
+		gray: getVariants( 'color.gray' ),
 		backgroundSecondary: light.grey[ '10' ],
 		primary: light.brand[ '70' ],
 		secondary: '#30c',
@@ -160,6 +162,10 @@ export default {
 			'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)',
 	},
 
+	tag: {
+		gold: getVariants( 'tag.gold' ),
+	},
+
 	cards: {
 		primary: {
 			padding: 3,