@automattic/vip-design-system 0.27.4 → 0.27.5

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", "loading", "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); }
 
@@ -146,6 +148,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
       _ref$searchIcon = _ref.searchIcon,
       searchIcon = _ref$searchIcon === void 0 ? false : _ref$searchIcon,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$noOptionsMessage = _ref.noOptionsMessage,
@@ -229,6 +233,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 +241,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 +252,7 @@ FormAutocomplete.propTypes = {
   id: _propTypes["default"].string,
   showAllValues: _propTypes["default"].bool,
   searchIcon: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   value: _propTypes["default"].string,

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

@@ -3,7 +3,7 @@
 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.WithCustomMessages = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -120,6 +120,17 @@ 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 WithCustomMessages = function WithCustomMessages() {
   var customArgs = (0, _extends2["default"])({}, args, {
     noOptionsMessage: function noOptionsMessage() {

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/package.json

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

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%',
@@ -105,6 +106,7 @@ const FormAutocomplete = React.forwardRef(
 			value,
 			showAllValues = true,
 			searchIcon = false,
+			loading = false,
 			displayMenu = 'overlay',
 			noOptionsMessage = () => 'No results found.',
 			id = 'vip-autocomplete',
@@ -203,6 +205,7 @@ const FormAutocomplete = React.forwardRef(
 						{ searchIcon && <FormSelectSearch /> }
 						<Autocomplete
 							id={ id }
+							aria-busy={ loading }
 							showAllValues={ showAllValues }
 							ref={ forwardRef }
 							source={ suggest }
@@ -212,6 +215,7 @@ const FormAutocomplete = React.forwardRef(
 							tNoResults={ noOptionsMessage }
 							{ ...props }
 						/>
+						{ loading && <FormSelectLoading /> }
 						<FormSelectArrow />
 					</FormSelectContent>
 				</div>
@@ -224,6 +228,7 @@ FormAutocomplete.propTypes = {
 	id: PropTypes.string,
 	showAllValues: PropTypes.bool,
 	searchIcon: PropTypes.bool,
+	loading: PropTypes.bool,
 	isInline: PropTypes.bool,
 	forLabel: PropTypes.string,
 	value: PropTypes.string,

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

@@ -88,6 +88,19 @@ export const WithSearchIcon = () => {
 	);
 };
 
+export const WithLoading = () => {
+	const customArgs = {
+		...args,
+		loading: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
 export const WithCustomMessages = () => {
 	const customArgs = {
 		...args,

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';