@automattic/vip-design-system 0.27.4 → 0.27.6

package/build/system/Form/Input.js

@@ -20,19 +20,6 @@ var _themeUi = require("theme-ui");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "label", "forLabel", "hasError", "required", "sx", "errorMessage"];
-
-var RequiredLabel = function RequiredLabel() {
-  return (0, _jsxRuntime.jsx)("span", {
-    sx: {
-      color: 'error',
-      display: 'inline-block',
-      ml: 2,
-      fontSize: 1
-    },
-    children: "(Required)"
-  });
-};
-
 var inputStyles = {
   unset: 'all',
   border: '1px solid',
@@ -72,9 +59,10 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       errorMessage = _ref.errorMessage,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
+    children: [label && (0, _jsxRuntime.jsx)(_.Label, {
+      required: required,
       htmlFor: forLabel,
-      children: [label, required && (0, _jsxRuntime.jsx)(RequiredLabel, {})]
+      children: label
     }), (0, _jsxRuntime.jsx)(_themeUi.Input, (0, _extends2["default"])({
       ref: ref,
       id: forLabel,

package/build/system/Form/Label.js

@@ -13,17 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _RequiredLabel = require("./RequiredLabel");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "children", "required"];
 
-/**
- * Internal dependencies
- */
 var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
+      children = _ref.children,
+      required = _ref.required,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
+  return (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       fontWeight: 500,
       fontSize: 2,
@@ -33,11 +34,15 @@ var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
       color: 'muted'
     }, sx),
     ref: forwardRef
-  }, rest));
+  }, rest, {
+    children: [children, required && (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {})]
+  }));
 });
 
 exports.Label = Label;
 Label.propTypes = {
+  children: _propTypes["default"].object,
+  required: _propTypes["default"].bool,
   sx: _propTypes["default"].object
 };
 Label.displayName = 'Label';

package/build/system/Form/Label.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Required = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Form/Label'
+};
+exports["default"] = _default;
+
+var DefaultComponent = function DefaultComponent(props) {
+  return (0, _jsxRuntime.jsx)(_.Form.Root, {
+    children: (0, _jsxRuntime.jsx)(_.Label, (0, _extends2["default"])({}, props, {
+      children: "Label"
+    }))
+  });
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, {})
+  });
+};
+
+exports.Default = Default;
+
+var Required = function Required() {
+  var args = {
+    required: true
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, args))
+  });
+};
+
+exports.Required = Required;

package/build/system/Form/RequiredLabel.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.RequiredLabel = void 0;
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var RequiredLabel = function RequiredLabel() {
+  return (0, _jsxRuntime.jsx)("span", {
+    sx: {
+      color: 'error',
+      display: 'inline-block',
+      ml: 2,
+      fontSize: 1
+    },
+    children: "(Required)"
+  });
+};
+
+exports.RequiredLabel = RequiredLabel;

package/build/system/NewForm/FormAutocomplete.js

@@ -29,9 +29,11 @@ var _Label = require("../Form/Label");
 
 var _FormSelectSearch = require("./FormSelectSearch");
 
+var _FormSelectLoading = require("./FormSelectLoading");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "onInputChange", "value", "showAllValues", "searchIcon", "displayMenu", "noOptionsMessage", "id", "className"];
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "onInputChange", "value", "showAllValues", "searchIcon", "minLength", "debounce", "loading", "required", "displayMenu", "noOptionsMessage", "id", "className"];
 
 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); }
 
@@ -134,7 +136,8 @@ var searchIconStyles = {
 var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var isInline = _ref.isInline,
       forLabel = _ref.forLabel,
-      options = _ref.options,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       label = _ref.label,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
@@ -144,8 +147,13 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       value = _ref.value,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
-      _ref$searchIcon = _ref.searchIcon,
-      searchIcon = _ref$searchIcon === void 0 ? false : _ref$searchIcon,
+      searchIcon = _ref.searchIcon,
+      _ref$minLength = _ref.minLength,
+      minLength = _ref$minLength === void 0 ? 0 : _ref$minLength,
+      _ref$debounce = _ref.debounce,
+      debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
+      loading = _ref.loading,
+      required = _ref.required,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$noOptionsMessage = _ref.noOptionsMessage,
@@ -161,8 +169,11 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       isDirty = _useState[0],
       setIsDirty = _useState[1];
 
+  var debounceTimeout;
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
+      required: required,
       htmlFor: forLabel || id,
       children: label
     });
@@ -198,13 +209,21 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
     });
   }, [options]);
-  var suggest = (0, _react.useCallback)(function (query, populateResults) {
-    var data = options;
+  var handleInputChange = (0, _react.useCallback)(function (query) {
+    clearTimeout(debounceTimeout);
 
-    if (isDirty) {
-      data = onInputChange ? onInputChange(query) : handleTypeChange(query);
+    if (!query.length || query.length >= minLength) {
+      debounceTimeout = setTimeout(function () {
+        onInputChange(query);
+      }, debounce);
+    }
+  }, [onInputChange, debounce, minLength]);
+  var suggest = (0, _react.useCallback)(function (query, populateResults) {
+    if (isDirty && onInputChange) {
+      handleInputChange(query);
     }
 
+    var data = handleTypeChange(query);
     populateResults(data.map(function (option) {
       return optionLabel(option);
     }));
@@ -229,6 +248,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
         children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
           id: id,
+          "aria-busy": loading,
           showAllValues: showAllValues,
           ref: forwardRef,
           source: suggest,
@@ -236,7 +256,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           displayMenu: displayMenu,
           onConfirm: onValueChange,
           tNoResults: noOptionsMessage
-        }, props)), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+        }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {}), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
     })]
   });
@@ -247,6 +267,8 @@ FormAutocomplete.propTypes = {
   id: _propTypes["default"].string,
   showAllValues: _propTypes["default"].bool,
   searchIcon: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -258,6 +280,8 @@ FormAutocomplete.propTypes = {
   onInputChange: _propTypes["default"].func,
   noOptionsMessage: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  minLength: _propTypes["default"].number,
+  debounce: _propTypes["default"].number
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

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

@@ -3,12 +3,14 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithSearchIcon = exports.WithDefaultValue = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = require("react");
+
 var Form = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -81,7 +83,9 @@ var DefaultComponent = function DefaultComponent(_ref) {
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, args))
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      required: true
+    }, args))
   });
 };
 
@@ -120,6 +124,36 @@ var WithSearchIcon = function WithSearchIcon() {
 
 exports.WithSearchIcon = WithSearchIcon;
 
+var WithLoading = function WithLoading() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    loading: true
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithLoading = WithLoading;
+
+var WithDebounce = function WithDebounce() {
+  var _useState = (0, _react.useState)(null),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var customArgs = (0, _extends2["default"])({}, args, {
+    minLength: 3,
+    debounce: 300,
+    onInputChange: function onInputChange(query) {
+      setValue(query);
+    }
+  });
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: ["Filter: ", value, (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))]
+  });
+};
+
+exports.WithDebounce = WithDebounce;
+
 var WithCustomMessages = function WithCustomMessages() {
   var customArgs = (0, _extends2["default"])({}, args, {
     noOptionsMessage: function noOptionsMessage() {

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

@@ -45,25 +45,53 @@ describe('<FormAutocomplete />', function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, (0, _extends2["default"])({
-              id: "my_desert_list"
-            }, defaultProps))), container = _render.container;
-            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument(); // Check for accessibility issues
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, {
+              id: "my_desert_list",
+              label: "This is a label"
+            })), container = _render.container; // Check for accessibility issues
 
             _context.t0 = expect;
-            _context.next = 5;
+            _context.next = 4;
             return (0, _jestAxe.axe)(container);
 
-          case 5:
+          case 4:
             _context.t1 = _context.sent;
-            _context.next = 8;
+            _context.next = 7;
             return (0, _context.t0)(_context.t1).toHaveNoViolations();
 
-          case 8:
+          case 7:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the FormAutocomplete component with options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, defaultProps))), container = _render2.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/build/system/NewForm/FormSelect.js

@@ -21,7 +21,7 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange"],
+var _excluded = ["isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange"],
     _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); }
@@ -79,6 +79,7 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       placeholder = _ref2.placeholder,
       forLabel = _ref2.forLabel,
       options = _ref2.options,
+      required = _ref2.required,
       label = _ref2.label,
       getOptionLabel = _ref2.getOptionLabel,
       getOptionValue = _ref2.getOptionValue,
@@ -118,6 +119,7 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
 
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
+      required: required,
       htmlFor: forLabel || props.id,
       children: label
     });
@@ -149,6 +151,7 @@ exports.FormSelect = FormSelect;
 FormSelect.propTypes = {
   id: _propTypes["default"].string,
   isInline: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   placeholder: _propTypes["default"].string,
   label: _propTypes["default"].string,

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

@@ -101,6 +101,7 @@ var Default = DefaultComponent.bind({});
 exports.Default = Default;
 Default.args = {
   placeholder: '- Select -',
+  required: true,
   options: options
 };
 var WithGroup = DefaultComponent.bind({});

package/build/system/NewForm/FormSelectLoading.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelectLoading = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ai = require("react-icons/ai");
+
+var _react2 = require("@emotion/react");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var kf = (0, _react2.keyframes)({
+  from: {
+    transform: 'rotate(0deg)'
+  },
+  to: {
+    transform: 'rotate(360deg) '
+  }
+});
+
+var FormSelectLoading = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(_ai.AiOutlineLoading3Quarters, (0, _extends2["default"])({
+    ref: forwardRef,
+    "aria-hidden": "true",
+    size: 18,
+    sx: {
+      position: 'absolute',
+      right: 40,
+      pointerEvents: 'none',
+      animation: kf + " 1s infinite linear",
+      opacity: 0.5
+    }
+  }, props));
+});
+
+exports.FormSelectLoading = FormSelectLoading;
+FormSelectLoading.displayName = 'FormSelectLoading';

package/build/system/Wizard/Wizard.stories.js

@@ -25,6 +25,19 @@ var _default = {
   component: _.Wizard
 };
 exports["default"] = _default;
+var options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}, {
+  value: 'coffee',
+  label: 'Coffee'
+}];
 
 var Default = function Default() {
   var steps = [{
@@ -37,7 +50,13 @@ var Default = function Default() {
       }), (0, _jsxRuntime.jsx)(_.Input, {
         autoFocus: true,
         placeholder: "yourdomain.com"
+      }), (0, _jsxRuntime.jsx)(_.Form.Autocomplete, {
+        label: "Autocomplete",
+        options: options
       }), (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mt: 3
+        },
         children: "Continue"
       })]
     })

package/build/system/Wizard/WizardStep.js

@@ -65,7 +65,8 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
         borderTopColor: 'borders.2'
       },
       borderColor: active ? 'primary' : 'borders.2',
-      borderLeftColor: borderLeftColor
+      borderLeftColor: borderLeftColor,
+      overflow: 'inherit'
     },
     "data-step": order,
     "data-active": active || undefined,

package/package.json

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

package/src/system/Form/Input.js

@@ -12,10 +12,6 @@ import PropTypes from 'prop-types';
 import { Validation, Label } from '../';
 import { Input as ThemeInput } from 'theme-ui';
 
-const RequiredLabel = () => (
-	<span sx={ { color: 'error', display: 'inline-block', ml: 2, fontSize: 1 } }>(Required)</span>
-);
-
 const inputStyles = {
 	unset: 'all',
 	border: '1px solid',
@@ -44,9 +40,8 @@ const Input = React.forwardRef(
 	( { variant, label, forLabel, hasError, required, sx = {}, errorMessage, ...props }, ref ) => (
 		<React.Fragment>
 			{ label && (
-				<Label htmlFor={ forLabel }>
+				<Label required={ required } htmlFor={ forLabel }>
 					{ label }
-					{ required && <RequiredLabel /> }
 				</Label>
 			) }
 

package/src/system/Form/Label.js

@@ -9,8 +9,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import { RequiredLabel } from './RequiredLabel';
 
-const Label = React.forwardRef( ( { sx, ...rest }, forwardRef ) => (
+const Label = React.forwardRef( ( { sx, children, required, ...rest }, forwardRef ) => (
 	<label
 		sx={ {
 			fontWeight: 500,
@@ -23,10 +24,15 @@ const Label = React.forwardRef( ( { sx, ...rest }, forwardRef ) => (
 		} }
 		ref={ forwardRef }
 		{ ...rest }
-	/>
+	>
+		{ children }
+		{ required && <RequiredLabel /> }
+	</label>
 ) );
 
 Label.propTypes = {
+	children: PropTypes.object,
+	required: PropTypes.bool,
 	sx: PropTypes.object,
 };
 

package/src/system/Form/Label.stories.jsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { Form, Label } from '..';
+
+export default {
+	title: 'Form/Label',
+};
+
+const DefaultComponent = props => (
+	<Form.Root>
+		<Label { ...props }>Label</Label>
+	</Form.Root>
+);
+
+export const Default = () => {
+	return (
+		<>
+			<DefaultComponent />
+		</>
+	);
+};
+
+export const Required = () => {
+	const args = {
+		required: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...args } />
+		</>
+	);
+};

package/src/system/Form/RequiredLabel.js

@@ -0,0 +1,15 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const RequiredLabel = () => (
+	<span sx={ { color: 'error', display: 'inline-block', ml: 2, fontSize: 1 } }>(Required)</span>
+);
+
+export { RequiredLabel };

package/src/system/NewForm/FormAutocomplete.js

@@ -16,6 +16,7 @@ import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
+import { FormSelectLoading } from './FormSelectLoading';
 
 const defaultStyles = {
 	width: '100%',
@@ -96,7 +97,7 @@ const FormAutocomplete = React.forwardRef(
 		{
 			isInline,
 			forLabel,
-			options,
+			options = [],
 			label,
 			getOptionLabel,
 			getOptionValue,
@@ -104,7 +105,11 @@ const FormAutocomplete = React.forwardRef(
 			onInputChange,
 			value,
 			showAllValues = true,
-			searchIcon = false,
+			searchIcon,
+			minLength = 0,
+			debounce = 0,
+			loading,
+			required,
 			displayMenu = 'overlay',
 			noOptionsMessage = () => 'No results found.',
 			id = 'vip-autocomplete',
@@ -114,8 +119,13 @@ const FormAutocomplete = React.forwardRef(
 		forwardRef
 	) => {
 		const [ isDirty, setIsDirty ] = useState( false );
+		let debounceTimeout;
 
-		const SelectLabel = () => <Label htmlFor={ forLabel || id }>{ label }</Label>;
+		const SelectLabel = () => (
+			<Label required={ required } htmlFor={ forLabel || id }>
+				{ label }
+			</Label>
+		);
 
 		const inlineLabel = !! ( isInline && label );
 
@@ -156,12 +166,24 @@ const FormAutocomplete = React.forwardRef(
 			[ options ]
 		);
 
+		const handleInputChange = useCallback(
+			query => {
+				clearTimeout( debounceTimeout );
+				if ( ! query.length || query.length >= minLength ) {
+					debounceTimeout = setTimeout( () => {
+						onInputChange( query );
+					}, debounce );
+				}
+			},
+			[ onInputChange, debounce, minLength ]
+		);
+
 		const suggest = useCallback(
 			( query, populateResults ) => {
-				let data = options;
-				if ( isDirty ) {
-					data = onInputChange ? onInputChange( query ) : handleTypeChange( query );
+				if ( isDirty && onInputChange ) {
+					handleInputChange( query );
 				}
+				const data = handleTypeChange( query );
 				populateResults( data.map( option => optionLabel( option ) ) );
 			},
 			[ options, isDirty ]
@@ -203,6 +225,7 @@ const FormAutocomplete = React.forwardRef(
 						{ searchIcon && <FormSelectSearch /> }
 						<Autocomplete
 							id={ id }
+							aria-busy={ loading }
 							showAllValues={ showAllValues }
 							ref={ forwardRef }
 							source={ suggest }
@@ -212,6 +235,7 @@ const FormAutocomplete = React.forwardRef(
 							tNoResults={ noOptionsMessage }
 							{ ...props }
 						/>
+						{ loading && <FormSelectLoading /> }
 						<FormSelectArrow />
 					</FormSelectContent>
 				</div>
@@ -224,6 +248,8 @@ FormAutocomplete.propTypes = {
 	id: PropTypes.string,
 	showAllValues: PropTypes.bool,
 	searchIcon: PropTypes.bool,
+	loading: PropTypes.bool,
+	required: PropTypes.bool,
 	isInline: PropTypes.bool,
 	forLabel: PropTypes.string,
 	value: PropTypes.string,
@@ -236,6 +262,8 @@ FormAutocomplete.propTypes = {
 	noOptionsMessage: PropTypes.func,
 	onChange: PropTypes.func,
 	className: PropTypes.any,
+	minLength: PropTypes.number,
+	debounce: PropTypes.number,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

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

@@ -3,6 +3,7 @@
 /**
  * Internal dependencies
  */
+import { useState } from 'react';
 import * as Form from '.';
 
 export default {
@@ -44,7 +45,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
 export const Default = () => {
 	return (
 		<>
-			<DefaultComponent { ...args } />
+			<DefaultComponent required { ...args } />
 		</>
 	);
 };
@@ -88,6 +89,38 @@ export const WithSearchIcon = () => {
 	);
 };
 
+export const WithLoading = () => {
+	const customArgs = {
+		...args,
+		loading: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
+export const WithDebounce = () => {
+	const [ value, setValue ] = useState( null );
+	const customArgs = {
+		...args,
+		minLength: 3,
+		debounce: 300,
+		onInputChange: query => {
+			setValue( query );
+		},
+	};
+
+	return (
+		<>
+			Filter: { value }
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
 export const WithCustomMessages = () => {
 	const customArgs = {
 		...args,

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

@@ -22,6 +22,15 @@ const defaultProps = {
 
 describe( '<FormAutocomplete />', () => {
 	it( 'renders the FormAutocomplete component', async () => {
+		const { container } = render(
+			<FormAutocomplete id="my_desert_list" label="This is a label" />
+		);
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the FormAutocomplete component with options', async () => {
 		const { container } = render( <FormAutocomplete id="my_desert_list" { ...defaultProps } /> );
 
 		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();

package/src/system/NewForm/FormSelect.js

@@ -58,6 +58,7 @@ const FormSelect = React.forwardRef(
 			placeholder,
 			forLabel,
 			options,
+			required,
 			label,
 			getOptionLabel,
 			getOptionValue,
@@ -105,7 +106,11 @@ const FormSelect = React.forwardRef(
 			[ onChange, getOptionByValue ]
 		);
 
-		const SelectLabel = () => <Label htmlFor={ forLabel || props.id }>{ label }</Label>;
+		const SelectLabel = () => (
+			<Label required={ required } htmlFor={ forLabel || props.id }>
+				{ label }
+			</Label>
+		);
 
 		const inlineLabel = !! ( isInline && label );
 
@@ -133,6 +138,7 @@ const FormSelect = React.forwardRef(
 FormSelect.propTypes = {
 	id: PropTypes.string,
 	isInline: PropTypes.bool,
+	required: PropTypes.bool,
 	forLabel: PropTypes.string,
 	placeholder: PropTypes.string,
 	label: PropTypes.string,

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

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

package/src/system/NewForm/FormSelectLoading.js

@@ -0,0 +1,31 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { AiOutlineLoading3Quarters } from 'react-icons/ai';
+import { keyframes } from '@emotion/react';
+
+const kf = keyframes( {
+	from: { transform: 'rotate(0deg)' },
+	to: { transform: 'rotate(360deg) ' },
+} );
+
+export const FormSelectLoading = React.forwardRef( ( props, forwardRef ) => (
+	<AiOutlineLoading3Quarters
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 18 }
+		sx={ {
+			position: 'absolute',
+			right: 40,
+			pointerEvents: 'none',
+			animation: `${ kf } 1s infinite linear`,
+			opacity: 0.5,
+		} }
+		{ ...props }
+	/>
+) );
+
+FormSelectLoading.displayName = 'FormSelectLoading';

package/src/system/Wizard/Wizard.stories.jsx

@@ -8,13 +8,20 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import { Wizard, Box, Label, Input, Button } from '..';
+import { Wizard, Box, Label, Input, Button, Form } from '..';
 
 export default {
 	title: 'Wizard',
 	component: Wizard,
 };
 
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry' },
+	{ value: 'vanilla', label: 'Vanilla' },
+	{ value: 'coffee', label: 'Coffee' },
+];
+
 export const Default = () => {
 	const steps = [
 		{
@@ -25,7 +32,8 @@ export const Default = () => {
 				<Box>
 					<Label>Domain</Label>
 					<Input autoFocus placeholder="yourdomain.com" />
-					<Button>Continue</Button>
+					<Form.Autocomplete label="Autocomplete" options={ options } />
+					<Button sx={ { mt: 3 } }>Continue</Button>
 				</Box>
 			),
 		},

package/src/system/Wizard/WizardStep.js

@@ -50,6 +50,7 @@ const WizardStep = React.forwardRef(
 					},
 					borderColor: active ? 'primary' : 'borders.2',
 					borderLeftColor: borderLeftColor,
+					overflow: 'inherit',
 				} }
 				data-step={ order }
 				data-active={ active || undefined }