@automattic/vip-design-system 0.28.5 → 0.28.6

package/build/system/NewForm/FormSelect.js

@@ -21,9 +21,11 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _Input = require("../Form/Input.styles");
 
+var _Form = require("../Form");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange"],
+var _excluded = ["isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage"],
     _excluded2 = ["options"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -70,6 +72,8 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       getOptionLabel = _ref2.getOptionLabel,
       getOptionValue = _ref2.getOptionValue,
       onChange = _ref2.onChange,
+      hasError = _ref2.hasError,
+      errorMessage = _ref2.errorMessage,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
@@ -129,6 +133,10 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
           return groupOptions ? renderGroup(optionLabel(option), groupOptions) : renderOption(optionLabel(option), optionValue(option));
         })]
       })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+    }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
+      isValid: false,
+      describedId: forLabel,
+      children: errorMessage
     })]
   });
 });
@@ -144,6 +152,8 @@ FormSelect.propTypes = {
   options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
+  hasError: _propTypes["default"].bool,
+  errorMessage: _propTypes["default"].string,
   onChange: _propTypes["default"].func
 };
 FormSelect.displayName = 'FormSelect';

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

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithOptionLabelAndValue = exports.WithOnChange = exports.WithGroup = exports.IsInline = exports.Default = void 0;
+exports["default"] = exports.WithOptionLabelAndValue = exports.WithOnChange = exports.WithGroup = exports.WithErrors = exports.IsInline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -106,6 +106,15 @@ Default.args = {
   required: true,
   options: options
 };
+var WithErrors = DefaultComponent.bind({});
+exports.WithErrors = WithErrors;
+WithErrors.args = {
+  placeholder: '- Select -',
+  required: true,
+  hasError: true,
+  errorMessage: 'This is an error message',
+  options: options
+};
 var WithGroup = DefaultComponent.bind({});
 exports.WithGroup = WithGroup;
 WithGroup.args = {

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

@@ -79,38 +79,42 @@ describe('<FormSelect />', function () {
       }
     }, _callee);
   })));
-  it('renders the FormSelect component with optgroup when options are grouped', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var _render2, container;
+  it('renders the FormSelect component with an error if hasError=true', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var errorMessage, _render2, container;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            errorMessage = 'This is an error message';
             _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
-              id: "my_desert_list"
-            }, groupedProps))), container = _render2.container;
+              id: "my_desert_list",
+              hasError: true,
+              errorMessage: errorMessage
+            }, defaultProps))), container = _render2.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
             expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
             expect(_react.screen.getAllByRole('option')).toHaveLength(3);
-            expect(_react.screen.getAllByRole('group')).toHaveLength(2); // Check for accessibility issues
+            expect(_react.screen.queryByRole('group')).not.toBeInTheDocument();
+            expect(_react.screen.getByText(errorMessage)).toBeInTheDocument(); // Check for accessibility issues
 
             _context2.t0 = expect;
-            _context2.next = 8;
+            _context2.next = 10;
             return (0, _jestAxe.axe)(container);
 
-          case 8:
+          case 10:
             _context2.t1 = _context2.sent;
-            _context2.next = 11;
+            _context2.next = 13;
             return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
 
-          case 11:
+          case 13:
           case "end":
             return _context2.stop();
         }
       }
     }, _callee2);
   })));
-  it('renders the FormSelect component when isInline is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  it('renders the FormSelect component with optgroup when options are grouped', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
     var _render3, container;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
@@ -118,74 +122,105 @@ describe('<FormSelect />', function () {
         switch (_context3.prev = _context3.next) {
           case 0:
             _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
-              id: "my_desert_list",
-              isInline: true
-            }, defaultProps))), container = _render3.container;
+              id: "my_desert_list"
+            }, groupedProps))), container = _render3.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
-            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.getAllByRole('group')).toHaveLength(2); // Check for accessibility issues
 
             _context3.t0 = expect;
-            _context3.next = 6;
+            _context3.next = 8;
             return (0, _jestAxe.axe)(container);
 
-          case 6:
+          case 8:
             _context3.t1 = _context3.sent;
-            _context3.next = 9;
+            _context3.next = 11;
             return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
 
-          case 9:
+          case 11:
           case "end":
             return _context3.stop();
         }
       }
     }, _callee3);
   })));
-  it('renders the FormSelect with nullish options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var nullishOptions, _render4, container;
+  it('renders the FormSelect component when isInline is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, container;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
+          case 0:
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list",
+              isInline: true
+            }, defaultProps))), 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 = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context4.t1 = _context4.sent;
+            _context4.next = 9;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('renders the FormSelect with nullish options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var nullishOptions, _render5, container;
+
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
           case 0:
             nullishOptions = [].concat(options, [{
               value: null,
               label: 'Empty'
             }]);
-            _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"
             }, defaultProps, {
               options: nullishOptions
-            }))), container = _render4.container;
+            }))), container = _render5.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
             expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
 
-            _context4.t0 = expect;
-            _context4.next = 7;
+            _context5.t0 = expect;
+            _context5.next = 7;
             return (0, _jestAxe.axe)(container);
 
           case 7:
-            _context4.t1 = _context4.sent;
-            _context4.next = 10;
-            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+            _context5.t1 = _context5.sent;
+            _context5.next = 10;
+            return (0, _context5.t0)(_context5.t1).toHaveNoViolations();
 
           case 10:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
       }
-    }, _callee4);
+    }, _callee5);
   })));
-  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var props, _render5, container;
+  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var props, _render6, container;
 
-    return _regenerator["default"].wrap(function _callee5$(_context5) {
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
-        switch (_context5.prev = _context5.next) {
+        switch (_context6.prev = _context6.next) {
           case 0:
             props = (0, _extends2["default"])({}, defaultProps, {
-              options: options.map(function (_ref6) {
-                var label = _ref6.label,
-                    value = _ref6.value;
+              options: options.map(function (_ref7) {
+                var label = _ref7.label,
+                    value = _ref7.value;
                 return {
                   name: label,
                   id: value
@@ -198,9 +233,9 @@ describe('<FormSelect />', function () {
                 return option.id;
               }
             });
-            _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+            _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
               id: "my_desert_list"
-            }, props))), container = _render5.container;
+            }, props))), container = _render6.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
             expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
             expect(_react.screen.getAllByRole('option')).toHaveLength(3);
@@ -209,20 +244,20 @@ describe('<FormSelect />', function () {
             expect(_react.screen.getByText(options[2].label)).toBeInTheDocument();
             expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
 
-            _context5.t0 = expect;
-            _context5.next = 12;
+            _context6.t0 = expect;
+            _context6.next = 12;
             return (0, _jestAxe.axe)(container);
 
           case 12:
-            _context5.t1 = _context5.sent;
-            _context5.next = 15;
-            return (0, _context5.t0)(_context5.t1).toHaveNoViolations();
+            _context6.t1 = _context6.sent;
+            _context6.next = 15;
+            return (0, _context6.t0)(_context6.t1).toHaveNoViolations();
 
           case 15:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
       }
-    }, _callee5);
+    }, _callee6);
   })));
 });

package/build/system/Spinner/Spinner.js

@@ -30,7 +30,7 @@ var Spinner = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardR
     strokeWidth: 2,
     sx: {
       fill: 'none',
-      color: 'icon.primary'
+      color: 'link'
     },
     className: (0, _classnames["default"])('vip-spinner-component', className),
     ref: forwardRef

package/package.json

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

package/src/system/NewForm/FormSelect.js

@@ -13,6 +13,7 @@ import { Label } from '../Form/Label';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { baseControlStyle } from '../Form/Input.styles';
+import { Validation } from '../Form';
 
 const MAX_SUGGESTED_OPTIONS = 15;
 const isDev = process.env.NODE_ENV !== 'production';
@@ -55,6 +56,8 @@ const FormSelect = React.forwardRef(
 			getOptionLabel,
 			getOptionValue,
 			onChange,
+			hasError,
+			errorMessage,
 			...props
 		},
 		forwardRef
@@ -119,9 +122,14 @@ const FormSelect = React.forwardRef(
 								: renderOption( optionLabel( option ), optionValue( option ) )
 						) }
 					</select>
-
 					<FormSelectArrow />
 				</FormSelectContent>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ forLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
 			</>
 		);
 	}
@@ -137,6 +145,8 @@ FormSelect.propTypes = {
 	options: PropTypes.array,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
+	hasError: PropTypes.bool,
+	errorMessage: PropTypes.string,
 	onChange: PropTypes.func,
 };
 

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

@@ -75,6 +75,15 @@ Default.args = {
 	options,
 };
 
+export const WithErrors = DefaultComponent.bind( {} );
+WithErrors.args = {
+	placeholder: '- Select -',
+	required: true,
+	hasError: true,
+	errorMessage: 'This is an error message',
+	options,
+};
+
 export const WithGroup = DefaultComponent.bind( {} );
 
 WithGroup.args = {

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

@@ -48,6 +48,27 @@ describe( '<FormSelect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
+	it( 'renders the FormSelect component with an error if hasError=true', async () => {
+		const errorMessage = 'This is an error message';
+		const { container } = render(
+			<FormSelect
+				id="my_desert_list"
+				hasError={ true }
+				errorMessage={ errorMessage }
+				{ ...defaultProps }
+			/>
+		);
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( errorMessage ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
 	it( 'renders the FormSelect component with optgroup when options are grouped', async () => {
 		const { container } = render( <FormSelect id="my_desert_list" { ...groupedProps } /> );
 

package/src/system/Spinner/Spinner.js

@@ -13,7 +13,7 @@ const Spinner = React.forwardRef( ( { sx, className = null, ...props }, forwardR
 		strokeWidth={ 2 }
 		sx={ {
 			fill: 'none',
-			color: 'icon.primary',
+			color: 'link',
 		} }
 		className={ classNames( 'vip-spinner-component', className ) }
 		ref={ forwardRef }