@automattic/vip-design-system 0.9.2 → 0.9.5

package/build/system/Card/Card.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _md = require("react-icons/md");
+
+var _Card = require("./Card");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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 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); }); }; }
+
+var defaultProps = {};
+describe('<Card />', function () {
+  it('renders the Card component', /*#__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)(_Card.Card, _extends({}, defaultProps, {
+              children: "This is a Card"
+            }))), container = _render.container;
+            expect(_react.screen.getByText('This is a Card')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the Card component with a different variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, {
+              variant: "primary",
+              children: "Card text"
+            })), container = _render2.container;
+            expect(_react.screen.getByText('Card text')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Code/Code.js

@@ -61,18 +61,21 @@ var Code = function Code(_ref) {
     sx: {
       position: 'relative'
     },
-    children: [codeDom, (0, _jsxRuntime.jsx)("span", {
+    children: [codeDom, (0, _jsxRuntime.jsx)("button", {
+      "aria-label": "Copy",
       sx: {
-        position: 'absolute',
-        top: 0,
         bg: 'grey.10',
-        right: 0,
-        paddingRight: 2,
-        paddingLeft: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
         borderTopRightRadius: 1,
+        borderWidth: 0,
+        color: 'muted',
         opacity: 0.8,
+        paddingBottom: 1,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        position: 'absolute',
+        right: 0,
+        top: '-1px',
         '&:hover': {
           opacity: 1,
           cursor: 'pointer'

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/Code/Code.test.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _md = require("react-icons/md");
+
+var _Code = require("./Code");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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 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); }); }; }
+
+var defaultProps = {
+  showCopy: false
+}; // Mock navigator.clipboard because jsdom doesn't support it
+
+Object.defineProperty(window.navigator, 'clipboard', {
+  value: {
+    writeText: function writeText() {}
+  }
+});
+describe('<Code />', function () {
+  it('renders the Code component', /*#__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)(_Code.Code, _extends({}, defaultProps, {
+              children: "This is a code"
+            }))), container = _render.container;
+            expect(_react.screen.getByText('This is a code')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }))); // jsdom currently doesn't support pseudo-elements with getComputedStyle
+
+  it.skip('renders "$" in front of the code when in prompt mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var props, _render2, container, codeElement;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              prompt: true
+            });
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render2.container;
+            codeElement = _react.screen.getByText('This is a code');
+            expect(window.getComputedStyle(codeElement, ':before').content).toEqual('$'); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders the Code component with a copy button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var props, _render3, container;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              showCopy: true
+            });
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render3.container;
+            expect(_react.screen.getByRole('button', {
+              name: 'Copy'
+            })).toBeInTheDocument(); // Check for accessibility issues
+
+            _context3.t0 = expect;
+            _context3.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context3.t1 = _context3.sent;
+            _context3.next = 9;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var props, _render4, container;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              showCopy: true
+            });
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render4.container;
+
+            _react.fireEvent.click(_react.screen.getByRole('button', {
+              name: 'Copy'
+            }));
+
+            _context4.next = 5;
+            return (0, _react.waitFor)(function () {
+              return new Promise(function (res) {
+                return setTimeout(res, 0);
+              });
+            });
+
+          case 5:
+            expect(_react.screen.getByText('Copied!')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context4.t0 = expect;
+            _context4.next = 9;
+            return (0, _jestAxe.axe)(container);
+
+          case 9:
+            _context4.t1 = _context4.sent;
+            _context4.next = 12;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 12:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});

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/Dialog/DialogContent.js

@@ -147,7 +147,9 @@ var DialogMotion = function DialogMotion(_ref2) {
       right: position === 'left' ? 'auto' : 0,
       padding: 0,
       display: 'inline-block',
-      variant: "dialog." + variant
+      variant: "dialog." + variant,
+      overflow: 'auto',
+      maxHeight: variant === 'modal' ? '90%' : ''
     }
   }));
 };

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.js

@@ -38,7 +38,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       required: required,
       sx: {
         border: '1px solid',
-        borderColor: 'grey.60',
+        borderColor: 'border',
         backgroundColor: 'card',
         borderRadius: 1,
         lineHeight: 'inherit',
@@ -57,7 +57,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
           bg: 'backgroundSecondary'
         },
         '&::placeholder': {
-          color: 'grey.30'
+          color: 'placeholder'
         }
       }
     })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {

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;