@automattic/vip-design-system 2.18.1 → 2.20.0

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://use.typekit.net/yym8qzc.css" />

package/build/system/Badge/Badge.js

@@ -25,6 +25,7 @@ export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     as: "span",
     sx: _extends({
       fontSize: 0,
+      letterSpacing: '0.01em',
       padding: 0,
       // do we need padding declared twice here?
       bg: "tag." + variant + ".background",
@@ -34,7 +35,7 @@ export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
       px: 2,
       display: 'inline-block',
       borderRadius: 1,
-      fontWeight: 'heading',
+      fontWeight: 'medium',
       a: {
         color: "tag." + variant + ".text",
         '&:hover, &:focus, &:active': {

package/build/system/DescriptionList/DescriptionList.js

@@ -21,7 +21,6 @@ var TableComponent = function TableComponent(_ref) {
       minWidth: 'auto',
       '> tbody > tr': {
         '> td, > th': {
-          fontWeight: 'heading',
           border: 'none',
           pl: 0,
           '&:first-of-type': {

package/build/system/Form/Label.d.ts

@@ -6,9 +6,7 @@ import React from 'react';
 import { BoxProps } from 'theme-ui';
 export declare const baseLabelColor = "input.label.default";
 export declare const baseLabelStyle: {
-    fontWeight: string;
-    fontSize: number;
-    lineHeight: number;
+    variant: string;
     color: string;
 };
 export interface LabelProps extends BoxProps {

package/build/system/Form/Label.js

@@ -16,9 +16,7 @@ import { RequiredLabel } from './RequiredLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 export var baseLabelColor = 'input.label.default';
 export var baseLabelStyle = {
-  fontWeight: 'heading',
-  fontSize: 2,
-  lineHeight: 1.5,
+  variant: 'forms.label',
   color: baseLabelColor
 };
 /**

package/build/system/Form/RadioBoxGroup.jsx

@@ -72,7 +72,14 @@ const RadioOption = ( {
 				{ ...restOption }
 			/>
 			<div
-				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
+				sx={ {
+					mb: 0,
+					color: 'input.radio-box.label.primary.default',
+					fontWeight: 'semibold',
+					p: 3,
+					pr: 0,
+					flex: 'auto',
+				} }
 			>
 				<label htmlFor={ forLabel } { ...labelProps }>
 					{ label }
@@ -82,7 +89,11 @@ const RadioOption = ( {
 						sx={ {
 							color: 'input.radio-box.label.secondary.default',
 							mb: 0,
+							mt: 1,
 							fontSize: 1,
+							fontWeight: 'regular',
+							letterSpacing: '0.01em',
+							lineHeight: '140%',
 							display: 'block',
 						} }
 						id={ describedById }

package/build/system/Form/RadioBoxGroup.stories.jsx

@@ -60,7 +60,12 @@ export const Primary = {
 	args: {
 		defaultValue: 'one',
 		options: [
-			{ label: 'One', value: 'one', description: 'This is a description' },
+			{
+				label: 'One',
+				value: 'one',
+				description:
+					'This is a longer description that allows us to see the text wrap and determine if the line height is correct',
+			},
 			{ label: 'Two', value: 'two', description: 'This is a description' },
 			{ label: 'Three', value: 'three', description: 'This is a description' },
 		],

package/build/system/Heading/Heading.js

@@ -19,10 +19,9 @@ export var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _jsx(ThemeHeading, _extends({
     as: variant,
+    variant: variant,
     sx: _extends({
-      color: 'heading',
-      // pass variant prop to sx
-      variant: "text." + variant.toString()
+      color: 'heading'
     }, sx),
     className: classNames('vip-heading-component', className),
     ref: ref

package/build/system/Heading/Heading.stories.js

@@ -32,8 +32,21 @@ export var Default = {
         variant: "h5",
         children: "Heading Five"
       }), _jsx(Heading, {
-        variant: "h6",
-        children: "Heading Six"
+        variant: "h3",
+        as: "h1",
+        children: "Heading One with Heading Three Styles"
+      }), _jsx(Heading, {
+        as: "p",
+        sx: {
+          variant: 'text.caps'
+        },
+        children: "Paragraph with Caps Styles"
+      }), _jsx(Heading, {
+        as: "h3",
+        sx: {
+          variant: 'text.caps'
+        },
+        children: "Heading Three with Caps Styles"
       })]
     });
   }

package/build/system/Nav/styles/variants/menu.js

@@ -45,8 +45,7 @@ export var menuItemLinkStyles = (_menuItemLinkStyles = {
   borderRadius: 1,
   color: 'text',
   display: 'inline-flex',
-  fontSize: '0.875rem',
-  fontWeight: 'body',
+  variant: 'text.default',
   height: 38,
   mx: 0,
   mb: 0,

package/build/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
  */
 import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
 import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
+import { FormAutocompleteMultiselectInlineChip } from './FormAutocompleteMultiselectInlineChip';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
@@ -22,6 +23,14 @@ import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
 
+const escapeHtml = str =>
+	String( str )
+		.replace( /&/g, '&' )
+		.replace( /</g, '&lt;' )
+		.replace( />/g, '&gt;' )
+		.replace( /"/g, '&quot;' )
+		.replace( /'/g, '&#039;' );
+
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
 	backgroundColor: 'layer.2',
@@ -96,7 +105,33 @@ const searchIconStyles = {
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+const inlineChipsContainerStyles = {
+	...defaultStyles,
+	display: 'flex',
+	flexWrap: 'wrap',
+	alignItems: 'center',
+	p: 1,
+	pr: 0,
+	position: 'relative',
+	'& .autocomplete__input': {
+		...defaultStyles[ '& .autocomplete__input' ],
+		lineHeight: '24px',
+		minHeight: '24px',
+	},
+	'&:focus-within': theme => theme.outline,
+	'& .autocomplete__wrapper': {
+		position: 'static',
+		width: '100%',
+		lineHeight: '24px',
+		minHeight: '24px',
+		'& .autocomplete__dropdown-arrow-down': {
+			top: 'unset',
+			bottom: '6px',
+		},
+	},
+};
+
+const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -156,10 +191,12 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			listType = 'button',
 			initialValue = [],
 			allowCustom = false,
+			variant,
 			...props
 		},
 		forwardRef
 	) => {
+		const isInlineChips = variant === 'inline-chips';
 		const OPTION_ACTION = {
 			ADD: 'add',
 			REMOVE: 'remove',
@@ -175,6 +212,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			option: null,
 			index: -1,
 		} );
+		const justSelectedRef = React.useRef( false );
 		let debounceTimeout;
 		forwardRef = forwardRef || React.createRef();
 
@@ -283,11 +321,44 @@ const FormAutocompleteMultiselect = React.forwardRef(
 					data = handleTypeChange( query );
 				}
 				const optionForDisplay = data?.map( option => optionLabel( option ) );
-				populateResults(
-					optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
-				);
+				if ( isInlineChips ) {
+					populateResults( optionForDisplay );
+				} else {
+					populateResults(
+						optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
+					);
+				}
+			},
+			[ autoFilter, isDirty, isInlineChips, onInputChange, options, selectedOptions ]
+		);
+
+		const onValueChangeInlineChips = useCallback(
+			inputValue => {
+				if ( ! inputValue ) {
+					return;
+				}
+				justSelectedRef.current = true;
+				if ( selectedOptions.includes( inputValue ) ) {
+					unselectValue( inputValue, selectedOptions.indexOf( inputValue ) );
+				} else {
+					setCurrentOption( { action: OPTION_ACTION.ADD, option: inputValue } );
+					setSelectedOptions( [ ...selectedOptions, inputValue ] );
+				}
 			},
-			[ autoFilter, isDirty, onInputChange, options, selectedOptions ]
+			[ selectedOptions, unselectValue ]
+		);
+
+		const inlineChipsTemplates = useMemo(
+			() => ( {
+				suggestion: suggestion => {
+					const isSelected = selectedOptions.includes( suggestion );
+					const check = isSelected ? '&#10003;' : '';
+					return `<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;flex-shrink:0">${ check }</span>${ escapeHtml(
+						suggestion
+					) }</span>`;
+				},
+			} ),
+			[ selectedOptions ]
 		);
 
 		useEffect( () => {
@@ -332,7 +403,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				selectedOptions,
 				selectedOptions.map( option => option?.label || option )
 			);
-			resetInputState();
+			if ( isInlineChips && justSelectedRef.current && forwardRef?.current ) {
+				justSelectedRef.current = false;
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: '',
+					menuOpen: true,
+				} );
+			} else {
+				resetInputState();
+			}
 		}, [ selectedOptions ] );
 
 		// Update the select status for screen readers
@@ -340,15 +420,65 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			if ( currentOption.action === OPTION_ACTION.ADD ) {
 				setAddStatus( `${ currentOption.option } added to the list.` );
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
-			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
-				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' )?.focus();
-			} else if ( selectedOptions.length === 0 ) {
-				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' )?.focus();
+			} else if ( currentOption.action === OPTION_ACTION.REMOVE ) {
+				setAddStatus( `${ currentOption.option } removed from the list.` );
+				if ( isInlineChips ) {
+					global.document.querySelector( `#${ forLabel }` )?.focus();
+				} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
+					global.document.querySelector( '.vip-button-component' )?.focus();
+				} else if ( selectedOptions.length === 0 ) {
+					global.document.querySelector( '.autocomplete__input' )?.focus();
+				}
+				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			}
 		}, [ currentOption ] );
 
+		if ( isInlineChips ) {
+			return (
+				<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+					{ label && <SelectLabel /> }
+					<div sx={ inlineChipsContainerStyles }>
+						{ selectedOptions.map( ( option, idx ) => (
+							<FormAutocompleteMultiselectInlineChip
+								key={ option }
+								index={ idx }
+								option={ option }
+								unselectValue={ unselectValue }
+							/>
+						) ) }
+						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+							<Autocomplete
+								id={ forLabel }
+								aria-busy={ loading }
+								showAllValues={ true }
+								ref={ forwardRef }
+								source={ source || suggest }
+								defaultValue={ value }
+								displayMenu={ displayMenu }
+								onConfirm={ onValueChangeInlineChips }
+								tNoResults={ noOptionsMessage }
+								required={ required }
+								dropdownArrow={ dropdownArrow }
+								confirmOnBlur={ false }
+								templates={ inlineChipsTemplates }
+								{ ...props }
+								placeholder={ selectedOptions.length > 0 ? '' : props.placeholder || '' }
+							/>
+						</div>
+						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
+						{ loading && <FormSelectLoading sx={ { right: 7 } } /> }
+					</div>
+					{ hasError && errorMessage && (
+						<Flex sx={ { mt: 2 } }>
+							<Validation isValid={ false } describedId={ forLabel }>
+								{ errorMessage }
+							</Validation>
+						</Flex>
+					) }
+				</div>
+			);
+		}
+
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -435,6 +565,7 @@ FormAutocompleteMultiselect.propTypes = {
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
 	allowCustom: PropTypes.bool,
+	variant: PropTypes.string,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/build/system/NewForm/FormAutocompleteMultiselect.stories.d.ts

@@ -92,9 +92,29 @@ export namespace WithStaticData {
     }
     export { args_5 as args };
 }
-export namespace WithDynamicData {
-    export function render_6(): import("react").JSX.Element;
+export namespace InlineChips {
+    export function render_6(props: any): import("react").JSX.Element;
     export { render_6 as render };
+    export namespace args_6 {
+        let label_3: string;
+        export { label_3 as label };
+        export let options: {
+            value: string;
+            label: string;
+        }[];
+        export let variant: string;
+        let showAllValues_2: boolean;
+        export { showAllValues_2 as showAllValues };
+        let placeholder_3: string;
+        export { placeholder_3 as placeholder };
+        let initialValue_1: string[];
+        export { initialValue_1 as initialValue };
+    }
+    export { args_6 as args };
+}
+export namespace WithDynamicData {
+    export function render_7(): import("react").JSX.Element;
+    export { render_7 as render };
 }
 declare const shortOptions: {
     value: string;

package/build/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -134,6 +134,27 @@ export const WithStaticData = {
 	},
 };
 
+export const InlineChips = {
+	render: props => <DefaultComponent { ...props } width={ 500 } />,
+	args: {
+		label: 'Post Categories',
+		options: [
+			{ value: 'breaking-news', label: 'Breaking News' },
+			{ value: 'world-news', label: 'World News' },
+			{ value: 'us-news', label: 'U.S. News' },
+			{ value: 'climate-environment', label: 'Climate & Environment' },
+			{ value: 'obituaries', label: 'Obituaries' },
+			{ value: 'technology', label: 'Technology' },
+			{ value: 'entertainment', label: 'Entertainment' },
+			{ value: 'real-estate', label: 'Real Estate' },
+		],
+		variant: 'inline-chips',
+		showAllValues: true,
+		placeholder: 'Search categories...',
+		initialValue: [ 'Breaking News' ],
+	},
+};
+
 export const WithDynamicData = {
 	render: () => {
 		const [ selectedValues, setSelectedValues ] = useState( [] );

package/build/system/NewForm/FormAutocompleteMultiselect.test.jsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
@@ -37,3 +37,69 @@ describe( '<FormAutocompleteMultiselect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );
+
+describe( '<FormAutocompleteMultiselect variant="inline-chips" />', () => {
+	it( 'renders the inline-chips variant', async () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+			/>
+		);
+		expect( screen.getByLabelText( 'Categories' ) ).toBeInTheDocument();
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders initial values as inline chips', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_init"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Vanilla' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes a chip when the close button is clicked', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_remove"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		expect( screen.queryByText( 'Chocolate' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+	} );
+
+	it( 'announces removal to screen readers', () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_a11y"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		const statusEl = container.querySelector( '#vip-autocompletemultiselect-status' );
+		expect( statusEl ).toHaveTextContent( 'Chocolate removed from the list.' );
+	} );
+} );

package/build/system/NewForm/FormAutocompleteMultiselectInlineChip.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource theme-ui */
+declare const FormAutocompleteMultiselectInlineChip: ({ index, option, unselectValue, }: {
+    index: number;
+    option: string;
+    unselectValue: (option: string, index: number) => void;
+}) => import("react").JSX.Element;
+export { FormAutocompleteMultiselectInlineChip };

package/build/system/NewForm/FormAutocompleteMultiselectInlineChip.js

@@ -0,0 +1,62 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var FormAutocompleteMultiselectInlineChip = function FormAutocompleteMultiselectInlineChip(_ref) {
+  var index = _ref.index,
+    option = _ref.option,
+    unselectValue = _ref.unselectValue;
+  return _jsxs("span", {
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 1,
+      px: 2,
+      py: '2px',
+      m: 1,
+      bg: 'layer.1',
+      borderRadius: 1,
+      fontSize: 1,
+      lineHeight: '16px',
+      whiteSpace: 'nowrap',
+      maxWidth: '100%'
+    },
+    children: [_jsx("span", {
+      sx: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      },
+      children: option
+    }), _jsx("button", {
+      type: "button",
+      "aria-label": "Remove " + option,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        unselectValue(option, index);
+      },
+      sx: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 0,
+        border: 'none',
+        bg: 'transparent',
+        cursor: 'pointer',
+        color: 'text',
+        lineHeight: 0,
+        '&:hover': {
+          opacity: 0.7
+        }
+      },
+      children: _jsx(MdClose, {
+        size: 14
+      })
+    })]
+  });
+};
+export { FormAutocompleteMultiselectInlineChip };

package/build/system/Notice/Notice.js

@@ -236,7 +236,7 @@ export var Notice = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
         as: headingVariant,
         sx: {
           color: textColor,
-          mb: 0,
+          mb: 1,
           fontSize: 2,
           fontWeight: 'bold'
         },

package/build/system/Pagination/styles.js

@@ -23,8 +23,7 @@ export var pageButtonStyles = {
   bg: 'transparent',
   color: 'heading',
   cursor: 'pointer',
-  fontSize: 2,
-  fontFamily: 'body',
+  variant: 'text.default',
   px: 2,
   borderBottom: '3px solid',
   borderColor: 'transparent',
@@ -79,8 +78,6 @@ export var compactTriggerStyles = {
   bg: 'transparent',
   color: 'heading',
   cursor: 'pointer',
-  fontSize: 2,
-  fontFamily: 'body',
   fontWeight: 'bold',
   px: 2,
   borderRadius: 1,

package/build/system/Table/TableCell.js

@@ -27,7 +27,7 @@ export var TableCell = function TableCell(_ref) {
     borderTop: head ? '1px solid' : 'none',
     // borderColor should come after borderTop so it can override it
     borderColor: 'table.border',
-    fontWeight: 'body',
+    variant: 'text.default',
     px: 3,
     py: 2,
     textAlign: 'left'

package/build/system/Text/Text.js

@@ -19,7 +19,6 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return _jsx(ThemeText, _extends({
     as: "p",
     sx: _extends({
-      lineHeight: 'body',
       marginBottom: 2,
       color: 'text'
     }, sx),