@automattic/vip-design-system 0.27.3 → 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/build/system/NewTabs/Tabs.js

@@ -36,12 +36,15 @@ var NewTabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onValueChange = _ref$onValueChange === void 0 ? undefined : _ref$onValueChange,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? undefined : _ref$defaultValue,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? undefined : _ref$value,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx;
   return (0, _jsxRuntime.jsx)(TabsPrimitive.Root, {
     ref: ref,
+    value: value,
     defaultValue: defaultValue,
     onValueChange: onValueChange,
     className: (0, _classnames["default"])('vip-tabs-component', className),
@@ -55,6 +58,7 @@ NewTabs.propTypes = {
   className: _propTypes["default"].any,
   sx: _propTypes["default"].object,
   defaultValue: _propTypes["default"].node,
+  value: _propTypes["default"].node,
   onValueChange: _propTypes["default"].func,
   children: _propTypes["default"].node.isRequired
 };

package/build/system/NewTabs/Tabs.stories.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.SetActiveTab = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -58,4 +66,58 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var SetActiveTab = function SetActiveTab() {
+  var _React$useState = _react["default"].useState('all'),
+      activeTab = _React$useState[0],
+      setActiveTab = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.NewTabs, {
+    value: activeTab,
+    onValueChange: function onValueChange(val) {
+      return setActiveTab(val);
+    },
+    children: [(0, _jsxRuntime.jsxs)(_.TabsList, {
+      title: "See all the content",
+      children: [(0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "all",
+        children: "All (5)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "live",
+        children: "Live (2)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "dev",
+        children: "In Development (3)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "protect",
+        disabled: true,
+        children: "Not accessible"
+      })]
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "all",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
+        children: (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveTab('live');
+          },
+          children: "Switch to live tab"
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "live",
+      children: "Live content"
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "dev",
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "Hey I am a button"
+        }), ' ']
+      })
+    })]
+  });
+};
+
+exports.SetActiveTab = SetActiveTab;

package/package.json

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

package/src/system/Form/Radio.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
 import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
-import theme from '../theme';
+import mainTheme from '../theme';
 
 const prefix = 'vip-radio-component-';
 
@@ -19,7 +19,7 @@ const itemStyle = {
 	my: 2,
 };
 
-const radioPosition = theme.space[ 4 ] - theme.space[ 1 ];
+const radioPosition = mainTheme.space[ 4 ] - mainTheme.space[ 1 ];
 
 const inputStyle = {
 	...screenReaderTextClass,

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

package/src/system/NewTabs/Tabs.js

@@ -14,12 +14,20 @@ import React from 'react';
 
 const NewTabs = React.forwardRef(
 	(
-		{ children, onValueChange = undefined, defaultValue = undefined, className = null, sx = {} },
+		{
+			children,
+			onValueChange = undefined,
+			defaultValue = undefined,
+			value = undefined,
+			className = null,
+			sx = {},
+		},
 		ref
 	) => {
 		return (
 			<TabsPrimitive.Root
 				ref={ ref }
+				value={ value }
 				defaultValue={ defaultValue }
 				onValueChange={ onValueChange }
 				className={ classNames( 'vip-tabs-component', className ) }
@@ -35,6 +43,7 @@ NewTabs.propTypes = {
 	className: PropTypes.any,
 	sx: PropTypes.object,
 	defaultValue: PropTypes.node,
+	value: PropTypes.node,
 	onValueChange: PropTypes.func,
 	children: PropTypes.node.isRequired,
 };

package/src/system/NewTabs/Tabs.stories.jsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
@@ -31,3 +36,32 @@ export const Default = () => (
 		</TabsContent>
 	</NewTabs>
 );
+export const SetActiveTab = () => {
+	const [ activeTab, setActiveTab ] = React.useState( 'all' );
+
+	return (
+		<NewTabs value={ activeTab } onValueChange={ val => setActiveTab( val ) }>
+			<TabsList title="See all the content">
+				<TabsTrigger value="all">All (5)</TabsTrigger>
+				<TabsTrigger value="live">Live (2)</TabsTrigger>
+				<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+				<TabsTrigger value="protect" disabled={ true }>
+					Not accessible
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="all">
+				<Text>
+					<button type="button" onClick={ () => setActiveTab( 'live' ) }>
+						Switch to live tab
+					</button>
+				</Text>
+			</TabsContent>
+			<TabsContent value="live">Live content</TabsContent>
+			<TabsContent value="dev">
+				<Text>
+					In Development content <button type="button">Hey I am a button</button>{ ' ' }
+				</Text>
+			</TabsContent>
+		</NewTabs>
+	);
+};