@automattic/vip-design-system 0.9.6 → 0.10.0

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

@@ -1,51 +1,28 @@
-"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
  */
-var _default = {
-  title: 'Heading',
-  component: _.Heading
-};
-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"
-    })]
-  });
+import { Box, Heading } from '..';
+export default {
+  title: 'Heading',
+  component: Heading
 };
-
-exports.Default = Default;
+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"));
+};

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

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

package/build/system/Notice/Notice.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.Notice = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -11,7 +13,7 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "inline", "children", "title", "sx"];
+var _excluded = ["variant", "inline", "children", "title", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -61,6 +63,8 @@ var Notice = function Notice(_ref2) {
       title = _ref2.title,
       _ref2$sx = _ref2.sx,
       sx = _ref2$sx === void 0 ? {} : _ref2$sx,
+      _ref2$className = _ref2.className,
+      className = _ref2$className === void 0 ? null : _ref2$className,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   var color = 'yellow';
@@ -91,7 +95,8 @@ var Notice = function Notice(_ref2) {
         textDecoration: 'underline',
         border: 'none'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-notice-component', className)
   }, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
@@ -130,5 +135,6 @@ Notice.propTypes = {
   inline: _propTypes["default"].bool,
   sx: _propTypes["default"].object,
   title: _propTypes["default"].node,
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Notice/Notice.stories.js

@@ -1,56 +1,90 @@
-"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 }; }
+/** @jsx jsx */
 
 /**
  * External dependencies
  */
-
+import { jsx } from 'theme-ui';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Notice',
-  component: _.Notice
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_.Notice, {
-      variant: "alert",
-      sx: {
-        mb: 4
-      },
-      children: [(0, _jsxRuntime.jsx)(_.Heading, {
-        variant: "h4",
-        children: "Your site is ready to launch!"
-      }), (0, _jsxRuntime.jsx)(_.Text, {
-        sx: {
-          mb: 0
-        },
-        children: "It looks like you\u2018re ready to share your application with the world."
-      })]
-    }), (0, _jsxRuntime.jsxs)(_.Notice, {
-      variant: "success",
-      sx: {
-        mb: 4
-      },
-      children: ["It looks like you\u2018re ready to share your ", (0, _jsxRuntime.jsx)("a", {
-        href: "#",
-        children: "application with the world."
-      })]
-    })]
-  });
+import { Card, Heading, Notice, Text } from '..';
+export default {
+  title: 'Notice',
+  component: Notice
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return jsx(Card, {
+    sx: {
+      p: 4
+    }
+  }, jsx(Notice, {
+    variant: "alert",
+    title: "This is an alert notice",
+    sx: {
+      mb: 3
+    }
+  }, jsx(Text, {
+    sx: {
+      mb: 0
+    }
+  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
+    variant: "info",
+    title: "This is an info heading",
+    sx: {
+      mb: 3
+    }
+  }, jsx(Text, {
+    sx: {
+      mb: 0
+    }
+  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
+    variant: "success",
+    title: "This is a success heading",
+    sx: {
+      mb: 3
+    }
+  }, jsx(Text, {
+    sx: {
+      mb: 0
+    }
+  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
+    variant: "warning",
+    title: "This is a warning heading",
+    sx: {
+      mb: 3
+    }
+  }, jsx(Text, {
+    sx: {
+      mb: 0
+    }
+  }, "It looks like you\u2018re ready to share your application with the world.")), jsx(Notice, {
+    inline: true,
+    variant: "alert",
+    title: "This is an inline notice",
+    sx: {
+      mb: 3
+    }
+  }), jsx(Notice, {
+    inline: true,
+    variant: "info",
+    title: "This is an inline notice",
+    sx: {
+      mb: 3
+    }
+  }), jsx(Notice, {
+    inline: true,
+    variant: "success",
+    title: "This is an inline notice",
+    sx: {
+      mb: 3
+    }
+  }), jsx(Notice, {
+    inline: true,
+    variant: "warning",
+    title: "This is an inline notice",
+    sx: {
+      mb: 3
+    }
+  }));
+};

package/build/system/Notification/Notification.js

@@ -29,6 +29,7 @@ var Notification = function Notification(_ref) {
       status = _ref$status === void 0 ? 'success' : _ref$status,
       onClose = _ref.onClose;
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    className: "vip-notification-component",
     sx: {
       boxShadow: 'medium',
       width: 320,

package/build/system/Notification/Notification.stories.js

@@ -1,34 +1,19 @@
-"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
  */
-var _default = {
+
+import { Notification } from '..';
+export default {
   title: 'Notification',
-  component: _.Notification
+  component: Notification
 };
-exports["default"] = _default;
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Notification, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Notification, {
     title: "My first notification",
     subTitle: "Use when providing success or error feedback on global action"
   });
-};
-
-exports.Default = Default;
+};

package/build/system/OptionRow/OptionRow.js

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled"];
+var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -36,6 +38,10 @@ var OptionRow = function OptionRow(_ref) {
       small = _ref$small === void 0 ? false : _ref$small,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? null : _ref$order,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var mergedCard = disabled ? {
@@ -58,7 +64,9 @@ var OptionRow = function OptionRow(_ref) {
   return (0, _jsxRuntime.jsxs)(_.Grid, _extends({
     to: to,
     columns: [1, 1, 'auto 1fr auto'],
-    gap: [3, 3, "" + (small ? 3 : 4)]
+    gap: [3, 3, "" + (small ? 3 : 4)],
+    "data-order": order || undefined,
+    className: (0, _classnames["default"])('vip-option-row-component', className)
   }, props, {
     sx: _extends({
       alignItems: 'center',
@@ -135,5 +143,7 @@ OptionRow.propTypes = {
   meta: _propTypes["default"].node,
   to: _propTypes["default"].string,
   small: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  order: _propTypes["default"].number,
+  className: _propTypes["default"].any
 };

package/build/system/OptionRow/OptionRow.stories.js

@@ -1,50 +1,34 @@
-"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
  */
-var _default = {
+
+import { Box, OptionRow } from '..';
+export default {
   title: 'OptionRow',
-  component: _.OptionRow
+  component: OptionRow
 }; // eslint-disable-next-line max-len
 
-exports["default"] = _default;
 var image1 = "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='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E"; // eslint-disable-next-line max-len
 
 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";
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Box, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
       mx: -5
-    },
-    children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: image1,
-      title: "Option Row",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a"
-    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: image2,
-      title: "Option Row",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a"
-    })]
-  });
-};
-
-exports.Default = Default;
+    }
+  }, /*#__PURE__*/React.createElement(OptionRow, {
+    image: image1,
+    title: "Option Row",
+    subTitle: "Mostly used to link off to other pages.",
+    as: "a"
+  }), /*#__PURE__*/React.createElement(OptionRow, {
+    image: image2,
+    title: "Option Row",
+    subTitle: "Mostly used to link off to other pages.",
+    as: "a"
+  }));
+};

package/build/system/OptionRow/OptionRow.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _OptionRow = require("./OptionRow");
+
+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('<OptionRow />', function () {
+  it('renders the OptionRow', /*#__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)(_OptionRow.OptionRow, {
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a"
+            })), container = _render.container;
+            expect(_react.screen.getByText('Mostly used to link off to other pages.')).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);
+  })));
+});

package/build/system/Progress/Progress.js

@@ -11,9 +11,11 @@ var _Spinner = require("../Spinner");
 
 var _ = require("../");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "sx"];
+var _excluded = ["steps", "activeStep", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,10 +27,13 @@ var Progress = function Progress(_ref) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       sx = _ref.sx,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({}, props, {
+    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({
+      className: (0, _classnames["default"])('vip-progress-component', className)
+    }, props, {
       sx: _extends({
         color: 'primary'
       }, sx),
@@ -63,5 +68,6 @@ exports.Progress = Progress;
 Progress.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Progress/Progress.stories.js

@@ -1,36 +1,21 @@
-"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
  */
-var _default = {
+
+import { Progress } from '..';
+export default {
   title: 'Progress',
-  component: _.Progress
+  component: Progress
 };
-exports["default"] = _default;
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Progress, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Progress, {
     max: 1,
     value: 1 / 2,
     steps: ['Downloading Data', 'Importing Data...', 'Finalizing'],
     activeStep: 1
   });
-};
-
-exports.Default = Default;
+};

package/build/system/ResourceList/ResourceList.js

@@ -83,6 +83,7 @@ var ResourceList = function ResourceList(_ref) {
       m: 0,
       p: 0
     },
+    className: "vip-resource-list-component",
     children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
       return (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {

package/build/system/Spinner/Spinner.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,6 +21,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Spinner = function Spinner(_ref) {
   var sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Spinner, _extends({
@@ -26,11 +30,13 @@ var Spinner = function Spinner(_ref) {
     sx: {
       fill: 'none',
       color: 'primary'
-    }
+    },
+    className: (0, _classnames["default"])('vip-spinner-component', className)
   }, props));
 };
 
 exports.Spinner = Spinner;
 Spinner.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };