@automattic/vip-design-system 0.9.6 → 0.10.0

package/src/system/Tabs/Tabs.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
@@ -10,8 +11,9 @@ import PropTypes from 'prop-types';
  */
 import { Flex } from '..';
 
-const Tabs = ( { sx, ...props } ) => (
+const Tabs = ( { className = null, sx, ...props } ) => (
 	<Flex
+		className={ classNames( 'vip-tabs-component', className ) }
 		sx={{
 			borderBottom: '1px solid',
 			borderColor: 'border',
@@ -25,8 +27,9 @@ const Tabs = ( { sx, ...props } ) => (
 );
 
 Tabs.propTypes = {
-	variant: PropTypes.string,
+	className: PropTypes.any,
 	sx: PropTypes.object,
+	variant: PropTypes.string,
 };
 
 export { Tabs };

package/src/system/Text/Text.js

@@ -5,8 +5,9 @@
  */
 import { Text as ThemeText } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Text = ( { sx, ...props } ) => (
+const Text = ( { sx, className = null, ...props } ) => (
 	<ThemeText
 		as="p"
 		sx={{
@@ -14,12 +15,14 @@ const Text = ( { sx, ...props } ) => (
 			marginBottom: 2,
 			...sx,
 		}}
+		className={ classNames( 'vip-text-component', className ) }
 		{...props}
 	/>
 );
 
 Text.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Text };

package/src/system/Time/index.js

@@ -5,6 +5,7 @@
  */
 import { Text } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const formatter = new Intl.RelativeTimeFormat( undefined, {
 	numeric: 'auto',
@@ -31,7 +32,7 @@ function formatTimeAgo( date ) {
 	}
 }
 
-const Time = ( { time, relativeTime = false, timeOnly = false, ...props } ) => {
+const Time = ( { time, relativeTime = false, timeOnly = false, className = null, ...props } ) => {
 	let formattedTime;
 	if ( relativeTime ) {
 		formattedTime = formatTimeAgo( time );
@@ -46,6 +47,7 @@ const Time = ( { time, relativeTime = false, timeOnly = false, ...props } ) => {
 			title={time.toLocaleString( 'sv', { timeZoneName: 'short' } )}
 			datetime={time}
 			as="time"
+			className={ classNames( 'vip-time-component', className ) }
 			{...props}
 		>
 			{formattedTime}
@@ -57,6 +59,7 @@ Time.propTypes = {
 	time: PropTypes.string,
 	timeOnly: PropTypes.bool,
 	relativeTime: PropTypes.bool,
+	className: PropTypes.any,
 };
 
 export { Time };

package/src/system/Timeline/Timeline.js

@@ -6,6 +6,7 @@
 import { Flex } from 'theme-ui';
 import { MdWatchLater } from 'react-icons/md';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const VerticalLine = () => {
 	return (
@@ -20,8 +21,8 @@ const VerticalLine = () => {
 	);
 };
 
-const Timeline = ( { time, first = false, last = false, ...props } ) => (
-	<Flex { ...props }>
+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 />
@@ -41,6 +42,7 @@ Timeline.propTypes = {
 	first: PropTypes.bool,
 	time: PropTypes.node,
 	last: PropTypes.bool,
+	className: PropTypes.any,
 };
 
 export { Timeline };

package/src/system/Wizard/Wizard.js

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { MdArrowForward } from 'react-icons/md';
 
 /**
@@ -12,9 +13,9 @@ import { MdArrowForward } from 'react-icons/md';
  */
 import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 
-const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
+const Wizard = ( { steps, activeStep, variant, completed = [], className = null, ...props } ) => {
 	return (
-		<Box>
+		<Box className={ classNames( 'vip-wizard-component', className ) }>
 			{variant === 'horizontal' ? (
 				<Box>
 					<Flex
@@ -26,6 +27,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
 						{steps.map( ( { title, subTitle }, index ) => (
 							<React.Fragment key={index}>
 								<WizardStepHorizontal
+									order={index + 1}
 									active={index === activeStep}
 									title={title}
 									subTitle={subTitle}
@@ -44,6 +46,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], ...props } ) => {
 						subTitle={subTitle}
 						complete={completed.includes( index )}
 						key={index}
+						order={index + 1}
 					>
 						{children}
 					</WizardStep>
@@ -58,6 +61,7 @@ Wizard.propTypes = {
 	activeStep: PropTypes.number,
 	variant: PropTypes.string,
 	completed: PropTypes.array,
+	className: PropTypes.any,
 };
 
 export { Wizard };

package/src/system/Wizard/Wizard.stories.js

@@ -51,7 +51,7 @@ export const Default = () => {
 				</Box>
 			</Flex>
 			<Box mt={4}>
-				<Wizard activeStep={0} steps={steps} />
+				<Wizard activeStep={0} steps={steps} className="vip-wizard-xyz" />
 			</Box>
 		</React.Fragment>
 	);

package/src/system/Wizard/WizardStep.js

@@ -11,7 +11,7 @@ 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, order } ) => {
 	let borderLeftColor = 'border';
 
 	if ( complete ) {
@@ -44,6 +44,8 @@ const WizardStep = ( { title, subTitle, complete = false, children, active } ) =
 				borderColor: active ? 'primary' : 'border',
 				borderLeftColor: borderLeftColor,
 			}}
+			data-step={ order }
+			data-active={ active || undefined }
 		>
 			<Heading
 				variant="h4"
@@ -69,7 +71,8 @@ WizardStep.propTypes = {
 	subTitle: PropTypes.node,
 	complete: PropTypes.bool,
 	active: PropTypes.bool,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.node,
+	order: PropTypes.number.isRequired,
 };
 
 export { WizardStep };

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, order } ) => {
 	return (
 		<Heading
 			variant="h4"
@@ -21,6 +21,8 @@ const WizardStepHorizontal = ( { title, active } ) => {
 				alignItems: 'center',
 				color: active ? 'heading' : 'muted',
 			}}
+			data-step={ order }
+			data-active={ active || undefined }
 		>
 			<MdCheckCircle sx={{ mr: 2 }} />
 			{title}
@@ -32,6 +34,7 @@ WizardStepHorizontal.propTypes = {
 	title: PropTypes.node,
 	subTitle: PropTypes.node,
 	active: PropTypes.bool,
+	order: PropTypes.number.isRequired,
 };
 
 export { WizardStepHorizontal };