@automattic/vip-design-system 1.2.3 → 1.3.1

package/src/system/NewForm/FormAutocomplete.js

@@ -17,12 +17,12 @@ import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
 import { FormSelectLoading } from './FormSelectLoading';
-import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Validation } from '../Form';
 
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
-	backgroundColor: inputBaseBackground,
+	backgroundColor: 'layer.2',
 	color: inputBaseText,
 	borderRadius: 1,
 };
@@ -51,7 +51,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
-		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
+		'&.autocomplete__input--show-all-values': { paddingRight: 7 },
 	},
 	'& .autocomplete__menu': {
 		...baseBorderTextColors,
@@ -66,11 +66,11 @@ const defaultStyles = {
 		borderColor: baseControlBorderStyle.borderColor,
 	},
 	'& .autocomplete__option--odd': {
-		bg: 'backgroundSecondary',
+		bg: 'layer.1',
 	},
 	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
-		bg: 'midnight',
-		borderColor: 'midnight',
+		bg: 'input.background.primary',
+		borderColor: 'input.background.primary',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
@@ -89,7 +89,7 @@ const inlineStyles = {
 
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
-		paddingLeft: 4,
+		paddingLeft: 6,
 	},
 };
 
@@ -345,7 +345,7 @@ const FormAutocomplete = React.forwardRef(
 							{ ...props }
 						/>
 
-						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 7 : 3 } } /> }
 					</FormSelectContent>
 				</div>
 

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -151,9 +151,7 @@ WithCustomArrow.args = {
 	showAllValues: true,
 	// eslint-disable-next-line react/display-name
 	dropdownArrow: () => (
-		<span sx={ { position: 'absolute', top: '2px', right: '10px', pointerEvents: 'none' } }>
-			👇
-		</span>
+		<span sx={ { position: 'absolute', top: 1, right: 3, pointerEvents: 'none' } }>👇</span>
 	),
 };
 WithCustomArrow.displayName = 'WithCustomArrow';

package/src/system/NewForm/FormAutocompleteMultiselect.js

@@ -16,14 +16,14 @@ import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
 import { FormSelectLoading } from './FormSelectLoading';
-import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Validation } from '../Form';
 import { Button, Flex } from '../';
 import { MdClose } from 'react-icons/md';
 
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
-	backgroundColor: inputBaseBackground,
+	backgroundColor: 'layer.2',
 	color: inputBaseText,
 	borderRadius: 1,
 };
@@ -41,7 +41,7 @@ const defaultStyles = {
 	'&.autocomplete__input--focused': theme => theme.outline,
 	'& .autocomplete__input': {
 		width: '100%',
-		paddingLeft: 3,
+		paddingLeft: 4,
 		py: 0,
 		borderWidth: 0,
 		color: 'text',
@@ -51,7 +51,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
-		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
+		'&.autocomplete__input--show-all-values': { paddingRight: 7 },
 		'&::placeholder': {
 			color: 'input.text.placeholder',
 			opacity: 1,
@@ -70,18 +70,18 @@ const defaultStyles = {
 		borderColor: baseControlBorderStyle.borderColor,
 	},
 	'& .autocomplete__option--odd': {
-		bg: 'backgroundSecondary',
+		bg: 'layer.1',
 	},
 	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
-		bg: 'midnight',
-		borderColor: 'midnight',
+		bg: 'input.background.primary',
+		borderColor: 'input.background.primary',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
 	},
 	'& .autocomplete__hint': {
 		border: 'none',
-		paddingLeft: 3,
+		paddingLeft: 4,
 		minHeight: '27px',
 		lineHeight: '27px',
 	},
@@ -93,7 +93,7 @@ const inlineStyles = {
 
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
-		paddingLeft: 4,
+		paddingLeft: 6,
 	},
 };
 
@@ -407,7 +407,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 							{ ...props }
 						/>
 						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
-						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 7 : 3 } } /> }
 					</FormSelectContent>
 				</div>
 				<Flex sx={ { mt: 2, justifyContent: 'space-between' } }>

package/src/system/NewForm/FormSelect.js

@@ -21,7 +21,7 @@ const isDev = process.env.NODE_ENV !== 'production';
 const defaultStyles = {
 	...baseControlStyle,
 	paddingLeft: 3,
-	paddingRight: 40, // 40px for the icon
+	paddingRight: 7,
 	py: 0,
 	appearance: 'none',
 	minHeight: '36px',

package/src/system/NewForm/FormSelectArrow.js

@@ -22,7 +22,7 @@ export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
 			borderLeftWidth: borderStyle.borderWidth,
 			borderLeftStyle: borderStyle.borderStyle,
 			borderLeftColor: borderStyle.borderColor,
-			right: '10px',
+			right: 3,
 			top: '7px',
 			pointerEvents: 'none',
 			svg: {

package/src/system/NewForm/FormSelectInline.js

@@ -14,7 +14,7 @@ export const inlineStyles = {
 	gridTemplateColumns: 'auto 1fr',
 	position: 'relative',
 	alignItems: 'center',
-	backgroundColor: 'input.background',
+	backgroundColor: 'input.background.default',
 	borderRadius: 1,
 	...baseControlBorderStyle,
 	paddingRight: 0,

package/src/system/NewForm/FormSelectLoading.js

@@ -25,7 +25,7 @@ export const FormSelectLoading = React.forwardRef( ( { sx = {}, ...rest }, forwa
 		size={ 18 }
 		sx={ {
 			position: 'absolute',
-			right: 10,
+			right: 3,
 			pointerEvents: 'none',
 			animation: `${ kf } 1s infinite linear`,
 			opacity: 0.5,

package/src/system/NewForm/FormSelectSearch.js

@@ -13,8 +13,8 @@ export const FormSelectSearch = React.forwardRef( ( props, forwardRef ) => (
 		size={ 24 }
 		sx={ {
 			position: 'absolute',
-			paddingRight: '10px',
-			left: '10px',
+			pr: 2,
+			left: 3,
 			pointerEvents: 'none',
 		} }
 		{ ...props }

package/src/system/NewForm/Legend.tsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+
+import { baseLabelStyle } from '../Form/Label';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+interface LegendProps {
+	children?: React.ReactNode;
+	sx?: ThemeUIStyleObject;
+	className?: string;
+}
+export const Legend = React.forwardRef< HTMLLegendElement, LegendProps >(
+	( { children, className, sx = {}, ...props }, forwardRef ) => (
+		<legend
+			ref={ forwardRef }
+			className={ classNames( 'vip-form-legend-component', className ) }
+			sx={ {
+				all: 'unset',
+				...baseLabelStyle,
+				px: 1,
+				mb: 0,
+				...sx,
+			} }
+			{ ...props }
+		>
+			{ children }
+		</legend>
+	)
+);
+
+Legend.displayName = 'Legend';

package/src/system/OptionRow/OptionRow.js

@@ -77,7 +77,7 @@ const OptionRow = React.forwardRef(
 						<Box
 							sx={ {
 								display: [ 'inline-block', 'inline-block', 'block' ],
-								p: small ? 12 : 20,
+								p: small ? 3 : 5,
 								flex: '0 0 auto',
 								bg: `optionRow.${ variant }.background`,
 								color: `optionRow.${ variant }.icon`,

package/src/system/Progress/Progress.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Progress } from './Progress';
+
+const steps = [ 'Downloading Data', 'Importing Data...', 'Finalizing', 'Done' ];
+describe( '<Progress />', () => {
+	it( 'renders the progress component', async () => {
+		const { container } = render( <Progress steps={ steps } activeStep={ 1 } /> );
+
+		expect( container.getElementsByClassName( 'vip-progress-component' ) ).toBeDefined();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the progress component with different label text', async () => {
+		const { container } = render(
+			<Progress forLabel="My progress bar" steps={ steps } activeStep={ 1 } />
+		);
+
+		expect( screen.getByLabelText( 'My progress bar' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Progress/{Progress.js → Progress.tsx}

@@ -1,11 +1,8 @@
-/** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
-import React from 'react';
-import { Progress as ThemeProgress } from 'theme-ui';
-import PropTypes from 'prop-types';
+import { forwardRef, Ref } from 'react';
+import { ProgressProps, Progress as ThemeProgress } from 'theme-ui';
 import classNames from 'classnames';
 
 /**
@@ -13,13 +10,23 @@ import classNames from 'classnames';
  */
 import { Spinner } from '../Spinner';
 import { MdCheck } from 'react-icons/md';
-import { Box, Text, Flex } from '../';
+import { Box, Text, Flex } from '..';
 
 const prefix = 'vip-progress-component';
 const uniqueID = () => Math.random().toString( 36 ).substring( 7 );
 
-const Progress = React.forwardRef(
-	( { steps, activeStep, sx, forLabel = '', className, ...props }, forwardRef ) => {
+export interface ThemeProgressProps extends ProgressProps {
+	steps: string[];
+	activeStep: number;
+	forLabel?: string;
+	className?: string;
+}
+
+export const Progress = forwardRef< HTMLProgressElement, ThemeProgressProps >(
+	(
+		{ steps, activeStep, sx, forLabel = '', className, ...props }: ThemeProgressProps,
+		ref: Ref< HTMLProgressElement >
+	) => {
 		const stepsTotal = steps.length;
 		const isDone = activeStep === stepsTotal - 1;
 		const instance = uniqueID();
@@ -38,7 +45,7 @@ const Progress = React.forwardRef(
 					value={ currentValue }
 					id={ htmlFor }
 					aria-label={ forLabel }
-					ref={ forwardRef }
+					ref={ ref }
 					{ ...props }
 				/>
 
@@ -66,13 +73,3 @@ const Progress = React.forwardRef(
 );
 
 Progress.displayName = 'Progress';
-
-Progress.propTypes = {
-	steps: PropTypes.array,
-	activeStep: PropTypes.number,
-	forLabel: PropTypes.node,
-	sx: PropTypes.object,
-	className: PropTypes.any,
-};
-
-export { Progress };

package/src/system/Progress/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Progress } from './Progress';

package/src/system/ScreenReaderText/ScreenReaderText.tsx

@@ -36,5 +36,3 @@ export const ScreenReaderText = forwardRef< HTMLSpanElement, ScreenReaderTextPro
 		</span>
 	)
 );
-
-ScreenReaderText.displayName = 'ScreenReaderText';

package/src/system/Tabs/TabsTrigger.js

@@ -25,7 +25,6 @@ const styles = {
 		color: 'link',
 		fontWeight: 'regular',
 		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
-		boxShadowColor: 'borders.accent',
 	},
 	'&:disabled': {
 		color: 'muted',

package/src/system/Text/Text.stories.tsx

@@ -25,6 +25,13 @@ export const Default = () => (
 
 		<Text sx={ { color: 'texts.helper' } }>Text Helper</Text>
 
+		<Text sx={ { color: 'texts.helper', fontWeight: 'body' } }>Text Helper</Text>
+		<Text sx={ { color: 'texts.helper', fontWeight: 'heading' } }>Text Helper</Text>
+		<Text sx={ { color: 'texts.helper', fontWeight: 'regular' } }>Text Helper</Text>
+		<Text sx={ { color: 'texts.helper', fontWeight: 'medium' } }>Text Helper</Text>
+		<Text sx={ { color: 'texts.helper', fontWeight: 'bold' } }>Text Helper</Text>
+		<Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
+
 		<Text sx={ { color: 'texts.secondary' } }>Text Secondary</Text>
 
 		<Text sx={ { color: 'texts.primary' } }>Text Primary</Text>

package/src/system/Text/Text.tsx

@@ -10,7 +10,7 @@ export const Text = forwardRef< HTMLDivElement, ThemeTextProps >(
 		<ThemeText
 			as="p"
 			sx={ {
-				lineHeight: 1.5,
+				lineHeight: 'body',
 				marginBottom: 2,
 				color: 'text',
 				...sx,

package/src/system/Tooltip/Tooltip.css

@@ -22,11 +22,15 @@
   [data-vip-tooltip]::before {
 	content: attr(data-vip-tooltip);
 	z-index: 9999;
-	width: 210px;
+	width: max-content;
+	max-width: 210px;
 	color: #fff;
 	background: rgba(0,0,0, .7);
 	border-radius: 5px;
-	padding: 5px;
+	padding-left: 12px;
+	padding-right: 12px;
+	padding-top: 8px;
+	padding-bottom: 8px;
   }
 
   [data-vip-tooltip]::after {

package/src/system/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Tooltip, Button, Heading, Text, Link } from '..';
+import { Tooltip, Button, Heading, Text, Link, Box } from '..';
 
 export default {
 	title: 'Tooltip',
@@ -52,7 +52,7 @@ elements that appear interactive, like buttons or links.
 events.
 - <strong>Use consistently.</strong> If using tooltips in one context, use in all similar
 contexts.
-- <strong>Don&apos;t block content.</strong> Use the <code>data-position</code> attribute to
+- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to
 prevent the tooltip from covering other page elements.
 
 -------
@@ -109,7 +109,7 @@ export const Container = () => (
 			simply pass <code>data-vip-tooltip</code> as an HTML attribute to your component.
 		</Text>
 
-		<div sx={ { backgroundColor: 'red' } }>
+		<Box sx={ { backgroundColor: 'red' } }>
 			<Tooltip>
 				<Button data-vip-tooltip-position="top" data-vip-tooltip="Test test" sx={ { ml: 3 } }>
 					This is another way
@@ -128,6 +128,6 @@ export const Container = () => (
 					Use with links too
 				</Link>
 			</Tooltip>
-		</div>
+		</Box>
 	</div>
 );

package/{build/system/Wizard/Wizard.stories.jsx → src/system/Wizard/Wizard.stories.tsx}

@@ -8,22 +8,16 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import { Wizard, Box, Label, Input, Button, Form } from '..';
+import { Wizard, Box, Label, Input, Button, Checkbox, Flex } from '..';
+import { WizardStepProps } from './WizardStep';
 
 export default {
 	title: 'Wizard',
 	component: Wizard,
 };
 
-const options = [
-	{ value: 'chocolate', label: 'Chocolate' },
-	{ value: 'strawberry', label: 'Strawberry' },
-	{ value: 'vanilla', label: 'Vanilla' },
-	{ value: 'coffee', label: 'Coffee' },
-];
-
 export const Default = () => {
-	const steps = [
+	const steps: WizardStepProps[] = [
 		{
 			title: 'Choose Domain',
 			titleVariant: 'h2',
@@ -31,8 +25,7 @@ export const Default = () => {
 			children: (
 				<Box>
 					<Label>Domain</Label>
-					<Input autoFocus placeholder="yourdomain.com" />
-					<Form.Autocomplete label="Autocomplete" options={ options } />
+					<Input placeholder="yourdomain.com" />
 					<Button sx={ { mt: 3 } }>Continue</Button>
 				</Box>
 			),
@@ -62,7 +55,7 @@ export const Default = () => {
 export const WithTitleAutoFocus = () => {
 	const [ activeStep, setActiveStep ] = React.useState( 0 );
 	const [ autoFocus, setAutoFocus ] = React.useState( true );
-	const steps = [
+	const steps: WizardStepProps[] = [
 		{
 			title: 'Choose Domain',
 			titleVariant: 'h2',
@@ -128,17 +121,19 @@ export const WithTitleAutoFocus = () => {
 				/>
 			</Box>
 			<Box mt={ 4 }>
-				<Form.Select
-					id="wizard-autofocus"
-					forLabel="wizard-autofocus"
-					label="Autofocus status"
-					value={ autoFocus }
-					onChange={ e => setAutoFocus( e.value ) }
-					options={ [
-						{ value: true, label: 'On' },
-						{ value: false, label: 'Off' },
-					] }
-				/>
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="wizard-autofocus"
+						checked={ autoFocus }
+						aria-labelledby="label-check1"
+						onCheckedChange={ e => {
+							setAutoFocus( e === true );
+						} }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="wizard-autofocus" id="label-check1">
+						Autofocus enabled?
+					</Label>
+				</Flex>
 			</Box>
 		</React.Fragment>
 	);

package/src/system/Wizard/Wizard.tsx

@@ -0,0 +1,62 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useLayoutEffect, useState } from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Box, WizardStep } from '..';
+import { WizardStepProps } from './WizardStep';
+
+export interface WizardProps {
+	steps: WizardStepProps[];
+	activeStep?: number;
+	completed?: number[];
+	skipped?: number[];
+	className?: string;
+	titleAutofocus?: boolean;
+}
+export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
+	(
+		{ steps, activeStep, completed = [], skipped = [], className = null, titleAutofocus = false },
+		forwardRef
+	) => {
+		const [ didMount, setDidMount ] = useState( false );
+		const [ initialStep ] = useState( activeStep );
+		// didMount helps us to track the initial render, so we can focus the title only subsequent renders
+		// to avoid stealing the focus from the page we're in.
+		useLayoutEffect( () => {
+			if ( ! didMount && activeStep !== initialStep ) {
+				setDidMount( true );
+			}
+		}, [ initialStep, activeStep, didMount, setDidMount ] );
+		return (
+			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
+				{ steps.map( ( { title, subTitle, children, titleVariant, summary, onChange }, index ) => (
+					<WizardStep
+						active={ index === activeStep }
+						complete={ completed.includes( index ) }
+						skipped={ skipped.includes( index ) }
+						key={ index }
+						order={ index + 1 }
+						totalSteps={ steps.length }
+						subTitle={ subTitle }
+						title={ title }
+						titleVariant={ titleVariant }
+						summary={ summary }
+						onChange={ onChange }
+						shouldFocusTitle={ titleAutofocus && didMount }
+					>
+						{ children }
+					</WizardStep>
+				) ) }
+			</Box>
+		);
+	}
+);
+
+Wizard.displayName = 'Wizard';