@automattic/vip-design-system 0.9.4 → 0.9.5

package/build/system/Timeline/Timeline.stories.js

@@ -1,29 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Timeline, Grid, Box } from '..';
-export default {
+var _default = {
   title: 'Timeline',
-  component: Timeline
+  component: _.Timeline
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
-    gap: 2,
-    columns: [2, '100px 300px'],
-    sx: {
-      mb: '20px'
-    }
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    time: "7pm"
-  }), /*#__PURE__*/React.createElement(Box, null, "It looks like everything is recovered now. You can forget about the last event.")), /*#__PURE__*/React.createElement(Grid, {
-    gap: 2,
-    columns: [2, '100px 200px']
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    time: "6pm"
-  }), /*#__PURE__*/React.createElement(Box, null, "At this particular moment in the day, something happened with your environment.")));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_.Grid, {
+      gap: 2,
+      columns: [2, '100px 300px'],
+      sx: {
+        mb: '20px'
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
+        time: "7pm"
+      }), (0, _jsxRuntime.jsx)(_.Box, {
+        children: "It looks like everything is recovered now. You can forget about the last event."
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Grid, {
+      gap: 2,
+      columns: [2, '100px 200px'],
+      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
+        time: "6pm"
+      }), (0, _jsxRuntime.jsx)(_.Box, {
+        children: "At this particular moment in the day, something happened with your environment."
+      })]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Timeline/index.js

@@ -1,71 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Timeline = void 0;
 
-var _themeUi = require("theme-ui");
+var _Timeline = require("./Timeline");
 
-var _md = require("react-icons/md");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["time", "first", "last"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var VerticalLine = function VerticalLine() {
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      borderLeft: '2px solid',
-      borderColor: 'border',
-      height: 'calc( 50% - 16px )',
-      borderRadius: '2px'
-    }
-  });
-};
-
-var Timeline = function Timeline(_ref) {
-  var time = _ref.time,
-      _ref$first = _ref.first,
-      first = _ref$first === void 0 ? false : _ref$first,
-      _ref$last = _ref.last,
-      last = _ref$last === void 0 ? false : _ref$last,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({}, props, {
-    children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
-      sx: {
-        flexDirection: 'column',
-        justifyContent: 'space-evenly',
-        alignItems: 'center'
-      },
-      children: [!first && (0, _jsxRuntime.jsx)(VerticalLine, {}), (0, _jsxRuntime.jsx)(_md.MdWatchLater, {
-        sx: {
-          color: 'border'
-        },
-        size: 18
-      }), !last && (0, _jsxRuntime.jsx)(VerticalLine, {})]
-    }), (0, _jsxRuntime.jsx)(_themeUi.Flex, {
-      sx: {
-        alignItems: 'center',
-        ml: 2
-      },
-      children: (0, _jsxRuntime.jsx)("span", {
-        children: time
-      })
-    })]
-  }));
-};
-
-exports.Timeline = Timeline;
-Timeline.propTypes = {
-  first: _propTypes["default"].bool,
-  time: _propTypes["default"].string,
-  last: _propTypes["default"].bool
-};
+exports.Timeline = _Timeline.Timeline;

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,29 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Flex, Heading, Tooltip, Text, Link } from '..';
-export default {
+var _default = {
   title: 'Tooltip',
-  component: Tooltip
+  component: _.Tooltip
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Flex, {
     sx: {
       alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    sx: {
-      mb: 0,
-      mr: 2
-    }
-  }, "My Section Heading"), /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 1
-    }
-  }, "This is a tooltip that can be used to describe various pieces of functionality.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, null, "Find out more \u2192"))));
-};
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 0,
+        mr: 2
+      },
+      children: "My Section Heading"
+    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        sx: {
+          fontSize: 1
+        },
+        children: ["This is a tooltip that can be used to describe various pieces of functionality.", (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
+          children: "Find out more \u2192"
+        })]
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

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

@@ -1,24 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /**
  * External dependencies
  */
-import React from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Wizard, Flex, Box, Heading, Label, Input, Button } from '..';
-export default {
+var _default = {
   title: 'Wizard',
-  component: Wizard
+  component: _.Wizard
 };
-export var Default = function Default() {
+exports["default"] = _default;
+
+var Default = function Default() {
   var steps = [{
     title: 'Choose Domain',
     subTitle: 'You can bring a domain name you already own, or buy a new one.',
-    children: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Domain"), /*#__PURE__*/React.createElement(Input, {
-      autoFocus: true,
-      placeholder: "yourdomain.com"
-    }), /*#__PURE__*/React.createElement(Button, null, "Continue"))
+    children: (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [(0, _jsxRuntime.jsx)(_.Label, {
+        children: "Domain"
+      }), (0, _jsxRuntime.jsx)(_.Input, {
+        autoFocus: true,
+        placeholder: "yourdomain.com"
+      }), (0, _jsxRuntime.jsx)(_.Button, {
+        children: "Continue"
+      })]
+    })
   }, {
     title: 'Configure DNS'
   }, {
@@ -26,30 +45,39 @@ export var Default = function Default() {
   }, {
     title: 'Verify Domain'
   }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      flex: '1 1 auto'
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    variant: "h1",
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      mb: 1
-    }
-  }, "Add Domain:", ' ', /*#__PURE__*/React.createElement("span", {
-    sx: {
-      color: 'muted',
-      ml: 2
-    }
-  }, "Production")))), /*#__PURE__*/React.createElement(Box, {
-    mt: 4
-  }, /*#__PURE__*/React.createElement(Wizard, {
-    activeStep: 0,
-    steps: steps
-  })));
-};
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Flex, {
+      sx: {
+        alignItems: 'center'
+      },
+      children: (0, _jsxRuntime.jsx)(_.Box, {
+        sx: {
+          flex: '1 1 auto'
+        },
+        children: (0, _jsxRuntime.jsxs)(_.Heading, {
+          variant: "h1",
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            mb: 1
+          },
+          children: ["Add Domain:", ' ', (0, _jsxRuntime.jsx)("span", {
+            sx: {
+              color: 'muted',
+              ml: 2
+            },
+            children: "Production"
+          })]
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(_.Box, {
+      mt: 4,
+      children: (0, _jsxRuntime.jsx)(_.Wizard, {
+        activeStep: 0,
+        steps: steps
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.9.4",
+	"version": "0.9.5",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -21,7 +21,8 @@
 		"babel-loader": "^8.2.2",
 		"framer-motion": "^3.9.1",
 		"react-icons": "^4.2.0",
-		"react-select": "^4.3.1"
+		"react-select": "^4.3.1",
+		"react-select-async-paginate": "^0.6.1"
 	},
 	"peerDependencies": {
 		"react": "*",

package/src/system/Form/AsyncSearchSelect.js

@@ -0,0 +1,29 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { withAsyncPaginate } from 'react-select-async-paginate';
+
+/**
+  * Internal dependencies
+  */
+import { SearchSelect } from './SearchSelect';
+
+// Asynchronous search select to load paginated results asynchronously
+const CustomAsyncPaginate = withAsyncPaginate( SearchSelect );
+
+const AsyncSearchSelect = ( { options, ...props } ) => (
+	<CustomAsyncPaginate
+		SelectComponent={ SearchSelect }
+		loadOptions={ options }
+		{ ...props }
+	/>
+);
+
+AsyncSearchSelect.propTypes = {
+	options: PropTypes.array,
+};
+
+export { AsyncSearchSelect };

package/src/system/Form/SearchSelect.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
  */
 import { Flex, Text } from '..';
 
+// Option component
 export const Option = ( { label, isSelected, ...props } ) => (
 	<components.Option {...props}>
 		<Flex sx={{ alignItems: 'center' }}>
@@ -32,7 +33,45 @@ Option.propTypes = {
 	isSelected: PropTypes.bool,
 };
 
-export const DropdownIndicator = props => <MdExpandMore {...props} sx={{ color: 'text', mr: 2 }} />;
+// DropdownIndicator component
+export const DropdownIndicator = ( {
+	innerProps,
+	isFocused,
+	isDisabled,
+	clearValue,
+	cx,
+	getStyles,
+	getValue,
+	hasValue,
+	isMulti,
+	isRtl,
+	options,
+	selectProps,
+	setValue,
+	selectOption,
+	theme,
+	...props
+} ) => <MdExpandMore { ...props } sx={ { color: 'text', mr: 2 } } />;
+
+DropdownIndicator.propTypes = {
+	innerProps: PropTypes.object,
+	isFocused: PropTypes.bool,
+	isDisabled: PropTypes.bool,
+	clearValue: PropTypes.func,
+	cx: PropTypes.func,
+	getStyles: PropTypes.func,
+	getValue: PropTypes.func,
+	hasValue: PropTypes.bool,
+	isMulti: PropTypes.bool,
+	isRtl: PropTypes.bool,
+	options: PropTypes.array,
+	selectProps: PropTypes.object,
+	setValue: PropTypes.func,
+	selectOption: PropTypes.func,
+	theme: PropTypes.object,
+};
+
+// ClearIndicator component
 const ClearIndicator = ( { innerProps: { ref, ...restInnerProps }, ...props } ) => (
 	<MdClose ref={ref} {...restInnerProps} {...props} sx={{ color: 'text', mr: 2 }} />
 );
@@ -41,11 +80,12 @@ ClearIndicator.propTypes = {
 	innerProps: PropTypes.object,
 };
 
+// Parent SearchSelect component
 const SearchSelect = props => (
 	<Select
-		{...props}
+		{ ...props }
 		classNamePrefix={ 'select' }
-		components={{ Option, DropdownIndicator, ClearIndicator }}
+		components={ { Option, DropdownIndicator, ClearIndicator } }
 		sx={ {
 			'.select__control': {
 				background: 'none',

package/src/system/Form/Select.js

@@ -11,8 +11,10 @@ import PropTypes from 'prop-types';
  */
 import { SearchSelect } from './SearchSelect';
 import { InlineSelect } from './InlineSelect';
+import { AsyncSearchSelect } from './AsyncSearchSelect';
 
-const Select = ( { isMulti = false, isInline, options, label, isSearch, usePortal, ...props } ) => {
+const Select = ( { isMulti = false, isInline, isAsync, options, label, isSearch, usePortal, ...props } ) => {
+	let Component;
 	const selectRef = React.useRef();
 	const portalProps = {};
 
@@ -22,7 +24,17 @@ const Select = ( { isMulti = false, isInline, options, label, isSearch, usePorta
 		portalProps.styles = { menuPortal: base => ( { ...base, position: 'fixed' } ) };
 	}
 
-	const Component = isInline ? InlineSelect : SearchSelect;
+	switch ( true ) {
+		case isInline:
+			Component = InlineSelect;
+			break;
+		case isAsync:
+			Component = AsyncSearchSelect;
+			break;
+		default:
+			Component = SearchSelect;
+			break;
+	}
 
 	return <div ref={selectRef}><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
 };
@@ -30,6 +42,7 @@ const Select = ( { isMulti = false, isInline, options, label, isSearch, usePorta
 Select.propTypes = {
 	isInline: PropTypes.bool,
 	isMulti: PropTypes.bool,
+	isAsync: PropTypes.bool,
 	isSearch: PropTypes.bool,
 	label: PropTypes.string,
 	options: PropTypes.array,

package/src/system/Form/Select.stories.js

@@ -105,6 +105,36 @@ export const Inline = () => {
 	);
 };
 
+export const Async = () => {
+	const [ value, setValue ] = useState( [] );
+	const loadOptions = async () => new Promise( resolve => {
+		setTimeout( () => {
+			resolve( {
+				options: [
+					...options,
+					{ value: 'newvanilla', label: 'New Vanilla' },
+				],
+			} );
+		}, 2000 );
+	} );
+
+	return (
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="Async Select"
+				value={value}
+				isAsync
+				usePortal
+				loadOptions={ loadOptions }
+				noneLabel="Everyone"
+				placeholder="Load async..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
+		</Box>
+	);
+};
+
 export const DropdownMenu = () => {
 	return (
 		<Box sx={{ mr: 2, width: 200 }}>

package/src/system/Form/Select.test.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+  * Internal dependencies
+  */
+import { Select } from './Select';
+
+describe( '<Select />', () => {
+	it( 'renders the Select component with the specified placeholder', () => {
+		render(
+			<Select
+				inputId={ 'search-select' }
+				placeholder={ 'Search...' }
+			/>
+		);
+
+		// Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
+		const placeholder = screen.getByText( 'Search...' );
+
+		expect( placeholder ).toBeInTheDocument();
+	} );
+
+	it( 'renders the Select component with accessibility props', async () => {
+		const { container } = render(
+			<Select
+				inputId={ 'search-select' }
+				aria-label={ 'Search or select from the dropdown list' }
+			/>
+		);
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Timeline/Timeline.js

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { Flex } from 'theme-ui';
+import { MdWatchLater } from 'react-icons/md';
+import PropTypes from 'prop-types';
+
+const VerticalLine = () => {
+	return (
+		<div
+			sx={ {
+				borderLeft: '2px solid',
+				borderColor: 'border',
+				height: 'calc( 50% - 16px )',
+				borderRadius: '2px',
+			} }>
+		</div>
+	);
+};
+
+const Timeline = ( { time, first = false, last = false, ...props } ) => (
+	<Flex { ...props }>
+		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
+			{ ! first && (
+				<VerticalLine />
+			) }
+			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
+			{ ! last && (
+				<VerticalLine />
+			) }
+		</Flex>
+		<Flex sx={ { alignItems: 'center', ml: 2 } }>
+			{ time }
+		</Flex>
+	</Flex>
+);
+
+Timeline.propTypes = {
+	first: PropTypes.bool,
+	time: PropTypes.node,
+	last: PropTypes.bool,
+};
+
+export { Timeline };

package/src/system/Timeline/Timeline.stories.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Timeline } from '..';
+import { Link } from '../Link';
+
+export default {
+	title: 'Timeline',
+	component: Timeline,
+};
+
+export const Default = () => {
+	return (
+		<React.Fragment>
+			<Timeline
+				time="13:00"
+				title="21:00 UTC"
+			/>
+			<Timeline
+				time={ <Link>14:00</Link> }
+				title="22:00 UTC"
+			/>
+			<Timeline
+				time="15:00"
+				title="23:00 UTC"
+			/>
+		</React.Fragment>
+	);
+};