@automattic/vip-design-system 0.23.0 → 0.23.2

package/build/system/NewForm/FormSelect.js

@@ -38,6 +38,8 @@ var defaultStyles = {
   py: 0,
   borderColor: 'border',
   borderRadius: 1,
+  backgroundColor: 'background',
+  color: 'text',
   appearance: 'none',
   minHeight: '36px',
   '&:focus': function focus(theme) {
@@ -85,6 +87,17 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
     console.info('For 16 or more items, consider using another component with a typeahead capability.');
   }
 
+  var getAllOptions = (0, _react.useMemo)(function () {
+    return [].concat(options.filter(function (option) {
+      return !option.options;
+    }), options.filter(function (option) {
+      return option.options;
+    }).map(function (option) {
+      return option.options;
+    })).reduce(function (a, b) {
+      return a.concat(b);
+    }, []);
+  }, [options]);
   var optionLabel = (0, _react.useCallback)(function (option) {
     return getOptionLabel ? getOptionLabel(option) : option.label;
   }, [getOptionLabel]);
@@ -92,10 +105,10 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
     return getOptionValue ? getOptionValue(option) : option.value;
   }, [getOptionValue]);
   var getOptionByValue = (0, _react.useCallback)(function (value) {
-    return options.find(function (option) {
-      return optionValue(option) === value;
+    return getAllOptions.find(function (option) {
+      return "" + optionValue(option) === "" + value;
     });
-  }, [options, optionValue]);
+  }, [getAllOptions, optionValue]);
   var onValueChange = (0, _react.useCallback)(function (event) {
     return onChange ? onChange(getOptionByValue(event.target.value), event) : getOptionByValue(event.target.value);
   }, [onChange, getOptionByValue]);
@@ -122,8 +135,7 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
         }), options.map(function (_ref3) {
           var groupOptions = _ref3.options,
               option = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
-          var value = optionValue(option);
-          return value ? renderOption(optionLabel(option), value) : renderGroup(optionLabel(option), groupOptions);
+          return groupOptions ? renderGroup(optionLabel(option), groupOptions) : renderOption(optionLabel(option), optionValue(option));
         })]
       })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
     })]

package/build/system/NewForm/FormSelect.stories.js

@@ -54,6 +54,13 @@ var options = [{
 }, {
   value: 'vanilla',
   label: 'Vanilla'
+}];
+var groupedOptions = [{
+  label: 'Group name',
+  options: options
+}, {
+  label: 'Another Group name',
+  options: options
 }]; // eslint-disable-next-line react/prop-types
 
 var DefaultComponent = function DefaultComponent(_ref) {
@@ -100,13 +107,7 @@ var WithGroup = DefaultComponent.bind({});
 exports.WithGroup = WithGroup;
 WithGroup.args = {
   label: 'Group Label',
-  options: [{
-    label: 'Group name',
-    options: options
-  }, {
-    label: 'Another Group name',
-    options: options
-  }]
+  options: [].concat(options, groupedOptions)
 };
 var IsInline = DefaultComponent.bind({});
 exports.IsInline = IsInline;
@@ -114,13 +115,7 @@ IsInline.args = {
   label: 'Inline Select',
   isInline: true,
   width: '100%',
-  options: [{
-    label: 'Group name',
-    options: options
-  }, {
-    label: 'Another Group name',
-    options: options
-  }]
+  options: groupedOptions
 };
 var WithOptionLabelAndValue = DefaultComponent.bind({});
 exports.WithOptionLabelAndValue = WithOptionLabelAndValue;
@@ -159,7 +154,7 @@ var WithOnChange = function WithOnChange() {
     placeholder: '- Select -',
     width: '100%',
     onChange: onChange,
-    options: options
+    options: [].concat(options, groupedOptions)
   };
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({

package/build/system/NewForm/FormSelect.test.js

@@ -140,17 +140,52 @@ describe('<FormSelect />', function () {
       }
     }, _callee3);
   })));
-  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var props, _render4, container;
+  it('renders the FormSelect with nullish options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var nullishOptions, _render4, container;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
+          case 0:
+            nullishOptions = [].concat(options, [{
+              value: null,
+              label: 'Empty'
+            }]);
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, defaultProps, {
+              options: nullishOptions
+            }))), container = _render4.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context4.t0 = expect;
+            _context4.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context4.t1 = _context4.sent;
+            _context4.next = 10;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var props, _render5, container;
+
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
           case 0:
             props = (0, _extends2["default"])({}, defaultProps, {
-              options: options.map(function (_ref5) {
-                var label = _ref5.label,
-                    value = _ref5.value;
+              options: options.map(function (_ref6) {
+                var label = _ref6.label,
+                    value = _ref6.value;
                 return {
                   name: label,
                   id: value
@@ -163,9 +198,9 @@ describe('<FormSelect />', function () {
                 return option.id;
               }
             });
-            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+            _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
               id: "my_desert_list"
-            }, props))), container = _render4.container;
+            }, props))), container = _render5.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
             expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
             expect(_react.screen.getAllByRole('option')).toHaveLength(3);
@@ -174,20 +209,20 @@ describe('<FormSelect />', function () {
             expect(_react.screen.getByText(options[2].label)).toBeInTheDocument();
             expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
 
-            _context4.t0 = expect;
-            _context4.next = 12;
+            _context5.t0 = expect;
+            _context5.next = 12;
             return (0, _jestAxe.axe)(container);
 
           case 12:
-            _context4.t1 = _context4.sent;
-            _context4.next = 15;
-            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+            _context5.t1 = _context5.sent;
+            _context5.next = 15;
+            return (0, _context5.t0)(_context5.t1).toHaveNoViolations();
 
           case 15:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
       }
-    }, _callee4);
+    }, _callee5);
   })));
 });

package/build/system/NewForm/FormSelectArrow.js

@@ -24,12 +24,12 @@ var FormSelectArrow = /*#__PURE__*/_react["default"].forwardRef(function (props,
     "aria-hidden": "true",
     size: 24,
     sx: {
+      position: 'absolute',
       paddingLeft: 2,
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid',
       borderLeftColor: 'border',
-      position: 'relative',
-      right: 34,
+      right: 2,
       pointerEvents: 'none'
     }
   }, props));

package/build/system/NewForm/FormSelectContent.js

@@ -23,12 +23,14 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var defaultStyles = {
-  '&:hover select': {
-    borderColor: 'border'
-  },
+  position: 'relative',
+  width: '100%',
   display: 'inline-flex',
   flexDirection: 'row',
-  alignItems: 'center'
+  alignItems: 'center',
+  '&:hover select': {
+    borderColor: 'border'
+  }
 };
 
 var FormSelectContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {

package/build/system/NewForm/FormSelectInline.js

@@ -3,8 +3,9 @@
 exports.__esModule = true;
 exports.inlineStyles = void 0;
 var inlineStyles = {
+  display: 'grid',
+  gridTemplateColumns: 'auto 1fr',
   position: 'relative',
-  display: 'inline-flex',
   alignItems: 'center',
   borderColor: 'border',
   borderRadius: 1,

package/build/system/Notice/Notice.stories.js

@@ -66,6 +66,35 @@ var Default = function Default() {
         },
         children: "This notice has a title and children"
       })
+    }), (0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "alert",
+      sx: {
+        mb: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Heading, {
+        variant: "h4",
+        children: "There are errors in your form"
+      }), (0, _jsxRuntime.jsxs)("ul", {
+        sx: {
+          mb: 0
+        },
+        children: [(0, _jsxRuntime.jsx)("li", {
+          children: (0, _jsxRuntime.jsx)("a", {
+            href: "#name",
+            children: "Please enter your name."
+          })
+        }), (0, _jsxRuntime.jsx)("li", {
+          children: (0, _jsxRuntime.jsx)("a", {
+            href: "#email",
+            children: "Please enter your email address."
+          })
+        }), (0, _jsxRuntime.jsx)("li", {
+          children: (0, _jsxRuntime.jsx)("a", {
+            href: "#terms",
+            children: "Please agree to the terms."
+          })
+        })]
+      })]
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.23.0",
+	"version": "0.23.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/NewForm/FormSelect.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Label } from '../Form/Label';
 
@@ -23,6 +23,8 @@ const defaultStyles = {
 	py: 0,
 	borderColor: 'border',
 	borderRadius: 1,
+	backgroundColor: 'background',
+	color: 'text',
 	appearance: 'none',
 	minHeight: '36px',
 	'&:focus': theme => theme.outline,
@@ -68,6 +70,15 @@ const FormSelect = React.forwardRef(
 			);
 		}
 
+		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 optionLabel = useCallback(
 			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
 			[ getOptionLabel ]
@@ -79,8 +90,8 @@ const FormSelect = React.forwardRef(
 		);
 
 		const getOptionByValue = useCallback(
-			value => options.find( option => optionValue( option ) === value ),
-			[ options, optionValue ]
+			value => getAllOptions.find( option => `${ optionValue( option ) }` === `${ value }` ),
+			[ getAllOptions, optionValue ]
 		);
 
 		const onValueChange = useCallback(
@@ -102,13 +113,11 @@ const FormSelect = React.forwardRef(
 				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
 					<select onChange={ onValueChange } ref={ forwardRef } sx={ defaultStyles } { ...props }>
 						{ placeholder && <option>{ placeholder }</option> }
-						{ options.map( ( { options: groupOptions, ...option } ) => {
-							const value = optionValue( option );
-
-							return value
-								? renderOption( optionLabel( option ), value )
-								: renderGroup( optionLabel( option ), groupOptions );
-						} ) }
+						{ options.map( ( { options: groupOptions, ...option } ) =>
+							groupOptions
+								? renderGroup( optionLabel( option ), groupOptions )
+								: renderOption( optionLabel( option ), optionValue( option ) )
+						) }
 					</select>
 
 					<FormSelectArrow />

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

@@ -26,6 +26,17 @@ const options = [
 	{ value: 'vanilla', label: 'Vanilla' },
 ];
 
+const groupedOptions = [
+	{
+		label: 'Group name',
+		options: options,
+	},
+	{
+		label: 'Another Group name',
+		options: options,
+	},
+];
+
 // eslint-disable-next-line react/prop-types
 const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
 	<>
@@ -66,16 +77,7 @@ export const WithGroup = DefaultComponent.bind( {} );
 
 WithGroup.args = {
 	label: 'Group Label',
-	options: [
-		{
-			label: 'Group name',
-			options: options,
-		},
-		{
-			label: 'Another Group name',
-			options: options,
-		},
-	],
+	options: [ ...options, ...groupedOptions ],
 };
 
 export const IsInline = DefaultComponent.bind( {} );
@@ -84,16 +86,7 @@ IsInline.args = {
 	label: 'Inline Select',
 	isInline: true,
 	width: '100%',
-	options: [
-		{
-			label: 'Group name',
-			options: options,
-		},
-		{
-			label: 'Another Group name',
-			options: options,
-		},
-	],
+	options: groupedOptions,
 };
 
 export const WithOptionLabelAndValue = DefaultComponent.bind( {} );
@@ -121,7 +114,7 @@ export const WithOnChange = () => {
 		placeholder: '- Select -',
 		width: '100%',
 		onChange,
-		options,
+		options: [ ...options, ...groupedOptions ],
 	};
 
 	return (

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

@@ -70,6 +70,20 @@ describe( '<FormSelect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
+	it( 'renders the FormSelect with nullish options', async () => {
+		const nullishOptions = [ ...options, { value: null, label: 'Empty' } ];
+
+		const { container } = render(
+			<FormSelect id="my_desert_list" { ...defaultProps } options={ nullishOptions } />
+		);
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
 	it( 'renders the FormSelect component when getOptionLabel and getOptionValue', async () => {
 		const props = {
 			...defaultProps,

package/src/system/NewForm/FormSelectArrow.js

@@ -12,12 +12,12 @@ export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
 		aria-hidden="true"
 		size={ 24 }
 		sx={ {
+			position: 'absolute',
 			paddingLeft: 2,
 			borderLeftWidth: '1px',
 			borderLeftStyle: 'solid',
 			borderLeftColor: 'border',
-			position: 'relative',
-			right: 34,
+			right: 2,
 			pointerEvents: 'none',
 		} }
 		{ ...props }

package/src/system/NewForm/FormSelectContent.js

@@ -12,10 +12,12 @@ import { inlineStyles } from './FormSelectInline';
  */
 
 const defaultStyles = {
-	'&:hover select': { borderColor: 'border' },
+	position: 'relative',
+	width: '100%',
 	display: 'inline-flex',
 	flexDirection: 'row',
 	alignItems: 'center',
+	'&:hover select': { borderColor: 'border' },
 };
 
 const FormSelectContent = React.forwardRef( ( { isInline, label, children }, forwardRef ) => (

package/src/system/NewForm/FormSelectInline.js

@@ -1,6 +1,7 @@
 export const inlineStyles = {
+	display: 'grid',
+	gridTemplateColumns: 'auto 1fr',
 	position: 'relative',
-	display: 'inline-flex',
 	alignItems: 'center',
 	borderColor: 'border',
 	borderRadius: 1,

package/src/system/Notice/Notice.stories.jsx

@@ -31,5 +31,20 @@ export const Default = () => (
 		<Notice variant="success" sx={ { mb: 4 } } title="You made it!">
 			<Text sx={ { mb: 0 } }>This notice has a title and children</Text>
 		</Notice>
+
+		<Notice variant="alert" sx={ { mb: 4 } }>
+			<Heading variant="h4">There are errors in your form</Heading>
+			<ul sx={ { mb: 0 } }>
+				<li>
+					<a href="#name">Please enter your name.</a>
+				</li>
+				<li>
+					<a href="#email">Please enter your email address.</a>
+				</li>
+				<li>
+					<a href="#terms">Please agree to the terms.</a>
+				</li>
+			</ul>
+		</Notice>
 	</React.Fragment>
 );