@automattic/vip-design-system 0.23.7 → 0.25.0

package/src/system/NewForm/FormAutocomplete.css

@@ -0,0 +1,166 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid #0b0c0c;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #b1b4b6;
+  position: absolute;
+}
+
+.autocomplete__input--default {
+  padding: 5px;
+}
+.autocomplete__input--focused {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #0B0C0C;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: white;
+  outline: none;
+}
+
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .autocomplete__option {
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .autocomplete__option--focused,
+  .autocomplete__option:hover {
+    forced-color-adjust: none; /* prevent backplate from obscuring text */
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+
+    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
+  }
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

package/src/system/NewForm/FormAutocomplete.js

@@ -0,0 +1,182 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '../Form/Label';
+import Autocomplete from 'accessible-autocomplete/react';
+
+/**
+ * Internal dependencies
+ */
+import css from './FormAutocomplete.css';
+import { FormSelectContent } from './FormSelectContent';
+import { FormSelectArrow } from './FormSelectArrow';
+
+const defaultStyles = {
+	width: '100%',
+	py: 0,
+	borderWidth: '1px',
+	borderStyle: 'solid',
+	borderColor: 'border',
+	borderRadius: 1,
+	backgroundColor: 'background',
+	color: 'text',
+	minHeight: '36px',
+	lineHeight: '36px',
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+	'&:focus-within': theme => theme.outline,
+	'&.autocomplete__input--focused': theme => theme.outline,
+	'& .autocomplete__input': {
+		width: '100%',
+		paddingLeft: 3,
+		py: 0,
+		borderWidth: 0,
+		color: 'text',
+		minHeight: '36px',
+		lineHeight: '36px',
+		'&:focus': { outlineWidth: 0, boxShadow: 'none' },
+		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
+		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
+		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
+	},
+	'& .autocomplete__menu': {
+		borderWidth: '1px',
+		borderStyle: 'solid',
+		borderColor: 'border',
+		borderRadius: 1,
+		backgroundColor: 'background',
+		color: 'text',
+	},
+	'& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+		fontSize: 'inherit',
+	},
+	'& .autocomplete__wrapper': {
+		width: '100%',
+		paddingRight: '40px',
+	},
+	'& .autocomplete__input--show-all-values': {
+		paddingRight: 0,
+	},
+};
+
+const inlineStyles = {
+	borderWidth: 0,
+};
+
+const FormAutocomplete = React.forwardRef(
+	(
+		{
+			isInline,
+			forLabel,
+			options,
+			label,
+			getOptionValue,
+			onChange,
+			value,
+			showAllValues = true,
+			displayMenu = 'overlay',
+			id = 'vip-autocomplete',
+		},
+		forwardRef
+	) => {
+		const SelectLabel = () => <Label htmlFor={ forLabel || id }>{ label }</Label>;
+
+		const inlineLabel = !! ( isInline && label );
+
+		const optionValue = useCallback(
+			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
+			[ getOptionValue ]
+		);
+
+		const getAllOptions = useMemo(
+			() =>
+				[
+					...options.filter( option => ! option.options ),
+					...options.filter( option => option.options ).map( option => option.options ),
+				].reduce( ( a, b ) => a.concat( b ), [] ),
+			[ options ]
+		);
+
+		const getOptionByValue = useCallback(
+			inputValue =>
+				getAllOptions.find( option => `${ optionValue( option ) }` === `${ inputValue }` ),
+			[ getAllOptions, optionValue ]
+		);
+
+		const onValueChange = useCallback(
+			inputValue => {
+				if ( onChange ) {
+					onChange( getOptionByValue( inputValue ) );
+				}
+			},
+			[ onChange, getOptionByValue ]
+		);
+
+		const suggest = useCallback(
+			( query, populateResults ) => {
+				const data = options.filter(
+					option => option.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0
+				);
+				populateResults( data.map( option => option.label ) );
+			},
+			[ options ]
+		);
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__input' )
+				.setAttribute( 'aria-activedescendant', '' );
+		}, [] );
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__menu' )
+				.setAttribute( 'aria-label', `${ label } list` );
+		}, [ label ] );
+
+		return (
+			<>
+				{ label && ! isInline && <SelectLabel /> }
+
+				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
+					<FormSelectContent
+						isInline={ inlineLabel }
+						label={ inlineLabel ? <SelectLabel /> : null }
+					>
+						<Autocomplete
+							id={ id }
+							showAllValues={ showAllValues }
+							ref={ forwardRef }
+							source={ suggest }
+							defaultValue={ value }
+							displayMenu={ displayMenu }
+							onConfirm={ onValueChange }
+						/>
+						<FormSelectArrow />
+					</FormSelectContent>
+				</div>
+			</>
+		);
+	}
+);
+
+FormAutocomplete.propTypes = {
+	id: PropTypes.string,
+	showAllValues: PropTypes.bool,
+	isInline: PropTypes.bool,
+	forLabel: PropTypes.string,
+	value: PropTypes.string,
+	displayMenu: PropTypes.string,
+	label: PropTypes.string,
+	options: PropTypes.array,
+	getOptionValue: PropTypes.func,
+	onChange: PropTypes.func,
+};
+
+FormAutocomplete.displayName = 'FormAutocomplete';
+
+export { FormAutocomplete, css };

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

@@ -0,0 +1,89 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { useCallback, useState } from 'react';
+import * as Form from '.';
+
+export default {
+	title: 'Form/Autocomplete',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const defaultOptions = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+// eslint-disable-next-line react/prop-types
+const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
+	<>
+		<Form.Root>
+			<div sx={ { width } }>
+				<Form.Autocomplete
+					id="form-autocomplete"
+					label={ label }
+					onChange={ onChange }
+					{ ...rest }
+				/>
+			</div>
+		</Form.Root>
+	</>
+);
+
+export const Default = () => {
+	const [ options, setOptions ] = useState( defaultOptions );
+
+	const onChange = useCallback( value => {
+		setOptions(
+			defaultOptions.filter(
+				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
+			)
+		);
+	} );
+
+	const args = {
+		label: 'Label',
+		options,
+	};
+
+	return (
+		<>
+			<DefaultComponent onChange={ onChange } { ...args } />
+		</>
+	);
+};
+
+export const Inline = () => {
+	const [ options, setOptions ] = useState( defaultOptions );
+
+	const onChange = useCallback( value => {
+		setOptions(
+			defaultOptions.filter(
+				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
+			)
+		);
+	} );
+
+	const args = {
+		label: 'Label',
+		options,
+	};
+
+	return (
+		<>
+			<DefaultComponent isInline={ true } onChange={ onChange } { ...args } />
+		</>
+	);
+};

package/src/system/NewForm/FormAutocomplete.test.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { FormAutocomplete } from './FormAutocomplete';
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+const defaultProps = {
+	label: 'This is a label',
+	options,
+};
+
+describe( '<FormAutocomplete />', () => {
+	it( 'renders the FormAutocomplete component', async () => {
+		const { container } = render( <FormAutocomplete id="my_desert_list" { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

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

@@ -70,7 +70,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } )
 export const Default = DefaultComponent.bind( {} );
 Default.args = {
 	placeholder: '- Select -',
-	options: options,
+	options,
 };
 
 export const WithGroup = DefaultComponent.bind( {} );

package/src/system/NewForm/index.js

@@ -3,11 +3,13 @@
  */
 
 import { FormSelect } from './FormSelect';
+import { FormAutocomplete } from './FormAutocomplete';
 import { Form } from './Form';
 
 const Select = FormSelect;
+const Autocomplete = FormAutocomplete;
 const Root = Form;
 
-export { Root, Select };
+export { Root, Select, Autocomplete };
 
 export default Root;

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,

package/test/fileMock.js

@@ -0,0 +1 @@
+module.exports = {};