@automattic/vip-design-system 0.9.3 → 0.9.6

package/build/system/Form/SearchSelect.js

@@ -14,8 +14,9 @@ var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["label", "isSelected"],
-    _excluded2 = ["ref"],
-    _excluded3 = ["innerProps"];
+    _excluded2 = ["innerProps", "isFocused", "isDisabled", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectProps", "setValue", "selectOption", "theme"],
+    _excluded3 = ["ref"],
+    _excluded4 = ["innerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,6 +28,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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; }
 
+// Option component
 var Option = function Option(_ref) {
   var label = _ref.label,
       isSelected = _ref.isSelected,
@@ -65,9 +67,26 @@ exports.Option = Option;
 Option.propTypes = {
   label: _propTypes["default"].string,
   isSelected: _propTypes["default"].bool
-};
+}; // DropdownIndicator component
+
+var DropdownIndicator = function DropdownIndicator(_ref2) {
+  var innerProps = _ref2.innerProps,
+      isFocused = _ref2.isFocused,
+      isDisabled = _ref2.isDisabled,
+      clearValue = _ref2.clearValue,
+      cx = _ref2.cx,
+      getStyles = _ref2.getStyles,
+      getValue = _ref2.getValue,
+      hasValue = _ref2.hasValue,
+      isMulti = _ref2.isMulti,
+      isRtl = _ref2.isRtl,
+      options = _ref2.options,
+      selectProps = _ref2.selectProps,
+      setValue = _ref2.setValue,
+      selectOption = _ref2.selectOption,
+      theme = _ref2.theme,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
-var DropdownIndicator = function DropdownIndicator(props) {
   return (0, _jsxRuntime.jsx)(_md.MdExpandMore, _extends({}, props, {
     sx: {
       color: 'text',
@@ -77,12 +96,29 @@ var DropdownIndicator = function DropdownIndicator(props) {
 };
 
 exports.DropdownIndicator = DropdownIndicator;
-
-var ClearIndicator = function ClearIndicator(_ref2) {
-  var _ref2$innerProps = _ref2.innerProps,
-      ref = _ref2$innerProps.ref,
-      restInnerProps = _objectWithoutPropertiesLoose(_ref2$innerProps, _excluded2),
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+DropdownIndicator.propTypes = {
+  innerProps: _propTypes["default"].object,
+  isFocused: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  clearValue: _propTypes["default"].func,
+  cx: _propTypes["default"].func,
+  getStyles: _propTypes["default"].func,
+  getValue: _propTypes["default"].func,
+  hasValue: _propTypes["default"].bool,
+  isMulti: _propTypes["default"].bool,
+  isRtl: _propTypes["default"].bool,
+  options: _propTypes["default"].array,
+  selectProps: _propTypes["default"].object,
+  setValue: _propTypes["default"].func,
+  selectOption: _propTypes["default"].func,
+  theme: _propTypes["default"].object
+}; // ClearIndicator component
+
+var ClearIndicator = function ClearIndicator(_ref3) {
+  var _ref3$innerProps = _ref3.innerProps,
+      ref = _ref3$innerProps.ref,
+      restInnerProps = _objectWithoutPropertiesLoose(_ref3$innerProps, _excluded3),
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
 
   return (0, _jsxRuntime.jsx)(_md.MdClose, _extends({
     ref: ref
@@ -96,7 +132,7 @@ var ClearIndicator = function ClearIndicator(_ref2) {
 
 ClearIndicator.propTypes = {
   innerProps: _propTypes["default"].object
-};
+}; // Parent SearchSelect component
 
 var SearchSelect = function SearchSelect(props) {
   return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {

package/build/system/Form/Select.js

@@ -11,9 +11,11 @@ var _SearchSelect = require("./SearchSelect");
 
 var _InlineSelect = require("./InlineSelect");
 
+var _AsyncSearchSelect = require("./AsyncSearchSelect");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isMulti", "isInline", "options", "label", "isSearch", "usePortal"];
+var _excluded = ["isMulti", "isInline", "isAsync", "options", "label", "isSearch", "usePortal"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,12 +27,15 @@ var Select = function Select(_ref) {
   var _ref$isMulti = _ref.isMulti,
       isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
       isInline = _ref.isInline,
+      isAsync = _ref.isAsync,
       options = _ref.options,
       label = _ref.label,
       isSearch = _ref.isSearch,
       usePortal = _ref.usePortal,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var Component;
+
   var selectRef = _react["default"].useRef();
 
   var portalProps = {};
@@ -48,7 +53,20 @@ var Select = function Select(_ref) {
     };
   }
 
-  var Component = isInline ? _InlineSelect.InlineSelect : _SearchSelect.SearchSelect;
+  switch (true) {
+    case isInline:
+      Component = _InlineSelect.InlineSelect;
+      break;
+
+    case isAsync:
+      Component = _AsyncSearchSelect.AsyncSearchSelect;
+      break;
+
+    default:
+      Component = _SearchSelect.SearchSelect;
+      break;
+  }
+
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
     children: (0, _jsxRuntime.jsx)(Component, _extends({
@@ -63,6 +81,7 @@ exports.Select = Select;
 Select.propTypes = {
   isInline: _propTypes["default"].bool,
   isMulti: _propTypes["default"].bool,
+  isAsync: _propTypes["default"].bool,
   isSearch: _propTypes["default"].bool,
   label: _propTypes["default"].string,
   options: _propTypes["default"].array,

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

@@ -1,28 +1,30 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+"use strict";
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+exports.__esModule = true;
+exports.DropdownMenu = exports.Inline = exports.Single = exports.Multi = exports["default"] = void 0;
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+var _react = _interopRequireWildcard(require("react"));
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+var _ = require("..");
 
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
-export default {
+var _default = {
   title: 'Select',
-  component: Dialog
+  component: _.Dialog
 };
+exports["default"] = _default;
 var options = [{
   value: 'chocolate',
   label: 'Chocolate'
@@ -33,88 +35,116 @@ var options = [{
   value: 'vanilla',
   label: 'Vanilla'
 }];
-var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
-var DropdownTrigger = /*#__PURE__*/React.createElement(Button, {
-  variant: "secondary"
-}, "Trigger Dropdown");
-export var Multi = function Multi() {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
+  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
+    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Profile"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Account"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Dark Mode"
+    })]
+  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
+    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Logout"
+    })
+  })]
+});
+var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  variant: "secondary",
+  children: "Trigger Dropdown"
+});
 
-  return /*#__PURE__*/React.createElement(Box, {
+var Multi = function Multi() {
+  var _useState = (0, _react.useState)([]),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 400
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "Type",
-    value: value,
-    isMulti: true,
-    placeholder: "Select domains...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Type",
+      value: value,
+      isMulti: true,
+      placeholder: "Select domains...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var Single = function Single() {
-  var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
 
-  return /*#__PURE__*/React.createElement(Box, {
+exports.Multi = Multi;
+
+var Single = function Single() {
+  var _useState2 = (0, _react.useState)([]),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    placeholder: "Select a domain...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "User",
+      value: value,
+      placeholder: "Select a domain...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var Inline = function Inline() {
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
 
-  return /*#__PURE__*/React.createElement(Box, {
+exports.Single = Single;
+
+var Inline = function Inline() {
+  var _useState3 = (0, _react.useState)([]),
+      value = _useState3[0],
+      setValue = _useState3[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    isInline: true,
-    isMulti: true,
-    noneLabel: "Everyone",
-    placeholder: "Filter by user...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "User",
+      value: value,
+      isInline: true,
+      isMulti: true,
+      noneLabel: "Everyone",
+      placeholder: "Filter by user...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var DropdownMenu = function DropdownMenu() {
-  return /*#__PURE__*/React.createElement(Box, {
+
+exports.Inline = Inline;
+
+var DropdownMenu = function DropdownMenu() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Dialog, {
-    trigger: DropdownTrigger,
-    content: DropdownContent,
-    sx: {
-      width: 200
-    }
-  }));
-};
+    },
+    children: (0, _jsxRuntime.jsx)(_.Dialog, {
+      trigger: DropdownTrigger,
+      content: DropdownContent,
+      sx: {
+        width: 200
+      }
+    })
+  });
+};
+
+exports.DropdownMenu = DropdownMenu;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Select = require("./Select");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<Select />', function () {
+  it('renders the Select component with the specified placeholder', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {
+      inputId: 'search-select',
+      placeholder: 'Search...'
+    })); // Can't use `getByPlaceholderText` here since it's not actually being rendered as a placeholder element
+
+    var placeholder = _react.screen.getByText('Search...');
+
+    expect(placeholder).toBeInTheDocument();
+  });
+  it('renders the Select component with accessibility props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {
+              inputId: 'search-select',
+              "aria-label": 'Search or select from the dropdown list'
+            })), container = _render.container;
+            _context.t0 = expect;
+            _context.next = 4;
+            return (0, _jestAxe.axe)(container);
+
+          case 4:
+            _context.t1 = _context.sent;
+            (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/Grid/Grid.stories.js

@@ -1,16 +1,33 @@
+"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 { Grid } from '..';
-export default {
+var _default = {
   title: 'Grid',
-  component: Grid
+  component: _.Grid
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid, null, "Hello");
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Grid, {
+    children: "Hello"
+  });
+};
+
+exports.Default = Default;

package/build/system/Heading/Heading.stories.js

@@ -1,28 +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 { Box, Heading } from '..';
-export default {
+var _default = {
   title: 'Heading',
-  component: Heading
+  component: _.Heading
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading, {
-    variant: "h1"
-  }, "Your Applications"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h2"
-  }, "Heading Two"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h3"
-  }, "Heading Three"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h4"
-  }, "Heading Four"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "h5"
-  }, "Heading Five"), /*#__PURE__*/React.createElement(Heading, {
-    variant: "caps"
-  }, "Heading Caps"));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h1",
+      children: "Your Applications"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h2",
+      children: "Heading Two"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h3",
+      children: "Heading Three"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h4",
+      children: "Heading Four"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h5",
+      children: "Heading Five"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "caps",
+      children: "Heading Caps"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Link/Link.stories.js

@@ -1,19 +1,35 @@
+"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 { Link } from '..';
-export default {
+var _default = {
   title: 'Link',
-  component: Link
+  component: _.Link
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Link, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Link, {
     as: "a",
-    href: "#!"
-  }, "Hello");
-};
+    href: "#!",
+    children: "Hello"
+  });
+};
+
+exports.Default = Default;