@automattic/vip-design-system 0.9.2 → 0.9.5

package/src/system/Code/Code.test.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { MdContentCopy } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Code } from './Code';
+
+const defaultProps = {
+	showCopy: false,
+};
+
+// Mock navigator.clipboard because jsdom doesn't support it
+Object.defineProperty( window.navigator, 'clipboard', {
+	value: {
+		writeText: () => {},
+	},
+} );
+
+describe( '<Code />', () => {
+	it( 'renders the Code component', async () => {
+		const { container } = render( <Code { ...defaultProps }>This is a code</Code> );
+
+		expect( screen.getByText( 'This is a code' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	// jsdom currently doesn't support pseudo-elements with getComputedStyle
+	it.skip( 'renders "$" in front of the code when in prompt mode', async () => {
+		const props = { ...defaultProps, prompt: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+		const codeElement = screen.getByText( 'This is a code' );
+
+		expect( window.getComputedStyle( codeElement, ':before' ).content ).toEqual( '$' );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Code component with a copy button', async () => {
+		const props = { ...defaultProps, showCopy: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+
+		expect( screen.getByRole( 'button', { name: 'Copy' } ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'updates the the UI after clicking on "Copy"', async () => {
+		const props = { ...defaultProps, showCopy: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Copy' } ) );
+
+		await waitFor( () => new Promise( res => setTimeout( res, 0 ) ) );
+
+		expect( screen.getByText( 'Copied!' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Dialog/DialogContent.js

@@ -133,6 +133,8 @@ const DialogMotion = ( { variant, position, ...props } ) => {
 				padding: 0,
 				display: 'inline-block',
 				variant: `dialog.${ variant }`,
+				overflow: 'auto',
+				maxHeight: variant === 'modal' ? '90%' : '',
 			} }
 		/>
 	);

package/src/system/Form/AsyncSearchSelect.js

@@ -0,0 +1,29 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { withAsyncPaginate } from 'react-select-async-paginate';
+
+/**
+  * Internal dependencies
+  */
+import { SearchSelect } from './SearchSelect';
+
+// Asynchronous search select to load paginated results asynchronously
+const CustomAsyncPaginate = withAsyncPaginate( SearchSelect );
+
+const AsyncSearchSelect = ( { options, ...props } ) => (
+	<CustomAsyncPaginate
+		SelectComponent={ SearchSelect }
+		loadOptions={ options }
+		{ ...props }
+	/>
+);
+
+AsyncSearchSelect.propTypes = {
+	options: PropTypes.array,
+};
+
+export { AsyncSearchSelect };

package/src/system/Form/Input.js

@@ -28,7 +28,7 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 			required={ required }
 			sx={ {
 				border: '1px solid',
-				borderColor: 'grey.60',
+				borderColor: 'border',
 				backgroundColor: 'card',
 				borderRadius: 1,
 				lineHeight: 'inherit',
@@ -47,7 +47,7 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 					bg: 'backgroundSecondary',
 				},
 				'&::placeholder': {
-					color: 'grey.30',
+					color: 'placeholder',
 				},
 			} }
 		/>

package/src/system/Form/SearchSelect.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
  */
 import { Flex, Text } from '..';
 
+// Option component
 export const Option = ( { label, isSelected, ...props } ) => (
 	<components.Option {...props}>
 		<Flex sx={{ alignItems: 'center' }}>
@@ -32,7 +33,45 @@ Option.propTypes = {
 	isSelected: PropTypes.bool,
 };
 
-export const DropdownIndicator = props => <MdExpandMore {...props} sx={{ color: 'text', mr: 2 }} />;
+// DropdownIndicator component
+export const DropdownIndicator = ( {
+	innerProps,
+	isFocused,
+	isDisabled,
+	clearValue,
+	cx,
+	getStyles,
+	getValue,
+	hasValue,
+	isMulti,
+	isRtl,
+	options,
+	selectProps,
+	setValue,
+	selectOption,
+	theme,
+	...props
+} ) => <MdExpandMore { ...props } sx={ { color: 'text', mr: 2 } } />;
+
+DropdownIndicator.propTypes = {
+	innerProps: PropTypes.object,
+	isFocused: PropTypes.bool,
+	isDisabled: PropTypes.bool,
+	clearValue: PropTypes.func,
+	cx: PropTypes.func,
+	getStyles: PropTypes.func,
+	getValue: PropTypes.func,
+	hasValue: PropTypes.bool,
+	isMulti: PropTypes.bool,
+	isRtl: PropTypes.bool,
+	options: PropTypes.array,
+	selectProps: PropTypes.object,
+	setValue: PropTypes.func,
+	selectOption: PropTypes.func,
+	theme: PropTypes.object,
+};
+
+// ClearIndicator component
 const ClearIndicator = ( { innerProps: { ref, ...restInnerProps }, ...props } ) => (
 	<MdClose ref={ref} {...restInnerProps} {...props} sx={{ color: 'text', mr: 2 }} />
 );
@@ -41,11 +80,12 @@ ClearIndicator.propTypes = {
 	innerProps: PropTypes.object,
 };
 
+// Parent SearchSelect component
 const SearchSelect = props => (
 	<Select
-		{...props}
+		{ ...props }
 		classNamePrefix={ 'select' }
-		components={{ Option, DropdownIndicator, ClearIndicator }}
+		components={ { Option, DropdownIndicator, ClearIndicator } }
 		sx={ {
 			'.select__control': {
 				background: 'none',

package/src/system/Form/Select.js

@@ -3,27 +3,50 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
-  * Internal dependencies
-  */
+ * Internal dependencies
+ */
 import { SearchSelect } from './SearchSelect';
 import { InlineSelect } from './InlineSelect';
+import { AsyncSearchSelect } from './AsyncSearchSelect';
+
+const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch, usePortal, ...props } ) => {
+	let Component;
+	const selectRef = React.useRef();
+	const portalProps = {};
 
-const Select = ( { isMulti = false, isInline, options, label, isSearch, ...props } ) => {
-	if ( isInline ) {
-		return <InlineSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+	if ( usePortal !== undefined ) {
+		portalProps.menuPortalTarget =
+			selectRef?.current?.querySelector( '.select__control' ).parentElement;
+		portalProps.styles = { menuPortal: base => ( { ...base, position: 'fixed' } ) };
 	}
-	return <SearchSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+
+	switch ( true ) {
+		case isInline:
+			Component = InlineSelect;
+			break;
+		case isAsync:
+			Component = AsyncSearchSelect;
+			break;
+		default:
+			Component = SearchSelect;
+			break;
+	}
+
+	return <div ref={selectRef}><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
 };
 
 Select.propTypes = {
 	isInline: PropTypes.bool,
 	isMulti: PropTypes.bool,
+	isAsync: PropTypes.bool,
 	isSearch: PropTypes.bool,
 	label: PropTypes.string,
 	options: PropTypes.array,
+	usePortal: PropTypes.bool,
 };
 
 export { Select };

package/src/system/Form/Select.stories.js

@@ -6,15 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	Box,
-	Dialog,
-	DialogMenu,
-	DialogMenuItem,
-	DialogDivider,
-	Select,
-	Button,
-} from '..';
+import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
 
 export default {
 	title: 'Select',
@@ -44,43 +36,109 @@ const DropdownContent = (
 const DropdownTrigger = <Button variant="secondary">Trigger Dropdown</Button>;
 
 export const Multi = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 400 } }>
-			<Select label="Type" value={ value } isMulti placeholder="Select domains..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
+		</Box>
+	);
+};
+
+export const usePortal = () => {
+	const [ value, setValue ] = useState( [] );
+
+	return (
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				usePortal
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Single = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } placeholder="Select a domain..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				placeholder="Select a domain..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Inline = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } isInline isMulti noneLabel="Everyone" placeholder="Filter by user..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				isInline
+				isMulti
+				noneLabel="Everyone"
+				placeholder="Filter by user..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
-export const DropdownMenu = () => {
+export const Async = () => {
+	const [ value, setValue ] = useState( [] );
+	const loadOptions = async () => new Promise( resolve => {
+		setTimeout( () => {
+			resolve( {
+				options: [
+					...options,
+					{ value: 'newvanilla', label: 'New Vanilla' },
+				],
+			} );
+		}, 2000 );
+	} );
+
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Dialog
-				trigger={DropdownTrigger}
-				content={DropdownContent}
-				sx={{ width: 200 }}
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="Async Select"
+				value={value}
+				isAsync
+				usePortal
+				loadOptions={ loadOptions }
+				noneLabel="Everyone"
+				placeholder="Load async..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
 			/>
 		</Box>
 	);
 };
+
+export const DropdownMenu = () => {
+	return (
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Dialog trigger={DropdownTrigger} content={DropdownContent} sx={{ width: 200 }} />
+		</Box>
+	);
+};

package/src/system/Form/Select.test.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+  * Internal dependencies
+  */
+import { Select } from './Select';
+
+describe( '<Select />', () => {
+	it( 'renders the Select component with the specified placeholder', () => {
+		render(
+			<Select
+				inputId={ 'search-select' }
+				placeholder={ 'Search...' }
+			/>
+		);
+
+		// Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
+		const placeholder = screen.getByText( 'Search...' );
+
+		expect( placeholder ).toBeInTheDocument();
+	} );
+
+	it( 'renders the Select component with accessibility props', async () => {
+		const { container } = render(
+			<Select
+				inputId={ 'search-select' }
+				aria-label={ 'Search or select from the dropdown list' }
+			/>
+		);
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Timeline/Timeline.js

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External 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 } }>
+			{ time }
+		</Flex>
+	</Flex>
+);
+
+Timeline.propTypes = {
+	first: PropTypes.bool,
+	time: PropTypes.node,
+	last: PropTypes.bool,
+};
+
+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/build/system/UsageChart/UsageChart.stories.js

@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { UsageChart } from '..';
-export default {
-  title: 'UsageChart',
-  component: UsageChart
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(UsageChart, {
-    total: 50,
-    max: 75,
-    variant: "primary"
-  });
-};