@automattic/vip-design-system 0.23.1 → 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) {
@@ -133,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.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.1",
+	"version": "0.23.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/NewForm/FormSelect.js

@@ -23,6 +23,8 @@ const defaultStyles = {
 	py: 0,
 	borderColor: 'border',
 	borderRadius: 1,
+	backgroundColor: 'background',
+	color: 'text',
 	appearance: 'none',
 	minHeight: '36px',
 	'&:focus': theme => theme.outline,
@@ -111,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.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>
 );