@automattic/vip-design-system 0.9.4 → 0.10.0

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

@@ -0,0 +1,48 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { Flex } from 'theme-ui';
+import { MdWatchLater } from 'react-icons/md';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const VerticalLine = () => {
+	return (
+		<div
+			sx={ {
+				borderLeft: '2px solid',
+				borderColor: 'border',
+				height: 'calc( 50% - 16px )',
+				borderRadius: '2px',
+			} }>
+		</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 }
+		</Flex>
+	</Flex>
+);
+
+Timeline.propTypes = {
+	first: PropTypes.bool,
+	time: PropTypes.node,
+	last: PropTypes.bool,
+	className: PropTypes.any,
+};
+
+export { Timeline };

package/src/system/Timeline/Timeline.stories.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Timeline } from '..';
+import { Link } from '../Link';
+
+export default {
+	title: 'Timeline',
+	component: Timeline,
+};
+
+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"
+			/>
+		</React.Fragment>
+	);
+};

package/src/system/Timeline/index.js

@@ -1,46 +1,7 @@
-/** @jsxImportSource theme-ui */
 
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { Flex } from 'theme-ui';
-import { MdWatchLater } from 'react-icons/md';
-import PropTypes from 'prop-types';
-
-const VerticalLine = () => {
-	return (
-		<div
-			sx={ {
-				borderLeft: '2px solid',
-				borderColor: 'border',
-				height: 'calc( 50% - 16px )',
-				borderRadius: '2px',
-			} }>
-		</div>
-	);
-};
-
-const Timeline = ( { time, first = false, last = false, ...props } ) => (
-	<Flex { ...props }>
-		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
-			{ ! first && (
-				<VerticalLine />
-			) }
-			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
-			{ ! last && (
-				<VerticalLine />
-			) }
-		</Flex>
-		<Flex sx={ { alignItems: 'center', ml: 2 } }>
-			<span>{ time }</span>
-		</Flex>
-	</Flex>
-);
-
-Timeline.propTypes = {
-	first: PropTypes.bool,
-	time: PropTypes.string,
-	last: PropTypes.bool,
-};
+import { Timeline } from './Timeline';
 
 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 };