@automattic/vip-design-system 0.9.4 → 0.9.5

package/build/system/Avatar/Avatar.stories.js

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

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

package/build/system/BlankState/BlankState.stories.js

@@ -1,25 +1,41 @@
+"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, BlankState } from '..';
-export default {
+var _default = {
   title: 'BlankState',
-  component: BlankState
+  component: _.BlankState
 }; // eslint-disable-next-line max-len
 
+exports["default"] = _default;
 var image2 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(BlankState, {
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.BlankState, {
     image: image2,
     title: "Power up your application",
     body: "Add-ons give you the ability to bolt on extra capabilities to\nyour application, including logging, analytics and performance\nmonitoring.",
-    cta: /*#__PURE__*/React.createElement(Link, {
-      as: "a"
-    }, "Explore add-ons \u2192")
+    cta: (0, _jsxRuntime.jsx)(_.Link, {
+      as: "a",
+      children: "Explore add-ons \u2192"
+    })
   });
-};
+};
+
+exports.Default = Default;

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

package/build/system/Button/Button.stories.js

@@ -1,31 +1,44 @@
+"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 { Button } from '..';
-export default {
+var _default = {
   title: 'Button',
-  component: Button
+  component: _.Button
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    sx: {
-      mr: 2
-    }
-  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
-    sx: {
-      ml: 2
-    }
-  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
-    isLoading: true,
-    sx: {
-      ml: 2
-    }
-  }, "Secondary"));
-};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Button, {
+      sx: {
+        mr: 2
+      },
+      children: "Primary"
+    }), (0, _jsxRuntime.jsx)(_.Button, {
+      variant: "secondary",
+      sx: {
+        ml: 2
+      },
+      children: "Secondary"
+    })]
+  });
+};
+
+exports.Default = Default;

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

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

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,32 +1,55 @@
+"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, ConfirmationDialog, Button, Heading, Text, Flex } from '..';
-export default {
+var _default = {
   title: 'ConfirmationDialog',
-  component: ConfirmationDialog
+  component: _.ConfirmationDialog
 };
-var ConfirmationTrigger = /*#__PURE__*/React.createElement(Button, {
+exports["default"] = _default;
+var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
   sx: {
     mr: 3
-  }
-}, "Dangerous Action");
-var ConfirmationContent = /*#__PURE__*/React.createElement(Box, {
-  p: 5
-}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
-  sx: {
-    fontSize: 3
-  }
-}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
-    trigger: ConfirmationTrigger,
-    title: "Are you sure you want to continue?",
-    body: "Your site will no longer be accessible via the old domain. Please make sure to test this change before moving forward."
-  })));
-};
+  },
+  children: "Dangerous Action"
+});
+var ConfirmationContent = (0, _jsxRuntime.jsxs)(_.Box, {
+  p: 5,
+  children: [(0, _jsxRuntime.jsx)(_.Heading, {
+    children: "This is a Modal"
+  }), (0, _jsxRuntime.jsx)(_.Text, {
+    sx: {
+      fontSize: 3
+    },
+    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
+  })]
+});
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Flex, {
+    children: (0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsx)(_.ConfirmationDialog, {
+        trigger: ConfirmationTrigger,
+        content: ConfirmationContent
+      })
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Dialog/Dialog.stories.js

@@ -1,43 +1,83 @@
+"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, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Button, Heading, Text, Flex } from '..';
-export default {
+var _default = {
   title: 'Dialog',
-  component: Dialog
+  component: _.Dialog
 };
-var DropdownTrigger = /*#__PURE__*/React.createElement(Button, null, "Trigger Dropdown");
-var ModalTrigger = /*#__PURE__*/React.createElement(Button, {
+exports["default"] = _default;
+var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  children: "Trigger Dropdown"
+});
+var ModalTrigger = (0, _jsxRuntime.jsx)(_.Button, {
   sx: {
     mr: 3
-  }
-}, "Trigger Modal");
-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 ModalContent = /*#__PURE__*/React.createElement(Box, {
-  p: 5
-}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
-  sx: {
-    fontSize: 3
-  }
-}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dialog, {
-    trigger: ModalTrigger,
-    content: ModalContent,
+  },
+  children: "Trigger Modal"
+});
+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 ModalContent = (0, _jsxRuntime.jsxs)(_.Box, {
+  p: 5,
+  children: [(0, _jsxRuntime.jsx)(_.Heading, {
+    children: "This is a Modal"
+  }), (0, _jsxRuntime.jsx)(_.Text, {
     sx: {
-      width: 480
+      fontSize: 3
     },
-    variant: "modal"
-  })), /*#__PURE__*/React.createElement(Dialog, {
-    trigger: DropdownTrigger,
-    content: DropdownContent,
-    sx: {
-      width: 200
-    }
-  }));
-};
+    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
+  })]
+});
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Flex, {
+    children: [(0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsx)(_.Dialog, {
+        trigger: ModalTrigger,
+        content: ModalContent,
+        sx: {
+          width: 480
+        },
+        variant: "modal"
+      })
+    }), (0, _jsxRuntime.jsx)(_.Dialog, {
+      trigger: DropdownTrigger,
+      content: DropdownContent,
+      sx: {
+        width: 200
+      }
+    })]
+  });
+};
+
+exports.Default = Default;

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

package/build/system/Form/AsyncSearchSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.AsyncSearchSelect = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactSelectAsyncPaginate = require("react-select-async-paginate");
+
+var _SearchSelect = require("./SearchSelect");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["options"];
+
+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; }
+
+// Asynchronous search select to load paginated results asynchronously
+var CustomAsyncPaginate = (0, _reactSelectAsyncPaginate.withAsyncPaginate)(_SearchSelect.SearchSelect);
+
+var AsyncSearchSelect = function AsyncSearchSelect(_ref) {
+  var options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return (0, _jsxRuntime.jsx)(CustomAsyncPaginate, _extends({
+    SelectComponent: _SearchSelect.SearchSelect,
+    loadOptions: options
+  }, props));
+};
+
+exports.AsyncSearchSelect = AsyncSearchSelect;
+AsyncSearchSelect.propTypes = {
+  options: _propTypes["default"].array
+};

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

@@ -1,18 +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 { Input } from '..';
-export default {
+var _default = {
   title: 'Input',
-  component: Input
+  component: _.Input
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Input, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Input, {
     placeholder: "Your input here..."
   });
-};
+};
+
+exports.Default = Default;