@automattic/vip-design-system 0.10.3 → 0.11.0

package/build/system/OptionRow/OptionRow.js

@@ -22,6 +22,27 @@ 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", "order", "className"];
+var disabledStyles = {
+  border: '1px solid',
+  borderColor: 'border',
+  background: 'none',
+  boxShadow: 'none',
+  color: 'grey.70'
+};
+var gridInlineStyle = {
+  py: 2,
+  px: 2,
+  mx: -2
+};
+
+var regularGridStyle = function regularGridStyle(small) {
+  return {
+    py: 3,
+    px: [3, 3, small ? 3 : 5],
+    borderBottom: '1px solid',
+    borderColor: 'border'
+  };
+};
 
 var OptionRow = function OptionRow(_ref) {
   var image = _ref.image,
@@ -43,23 +64,8 @@ var OptionRow = function OptionRow(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var mergedCard = disabled ? {
-    border: '1px solid',
-    borderColor: 'border',
-    background: 'none',
-    boxShadow: 'none',
-    color: 'grey.70'
-  } : {};
-  var inlineStyles = inline ? {
-    py: 2,
-    px: 2,
-    mx: -2
-  } : {
-    py: 3,
-    px: [3, 3, small ? 3 : 5],
-    borderBottom: '1px solid',
-    borderColor: 'border'
-  };
+  var mergedCard = disabled ? disabledStyles : {};
+  var inlineStyles = inline ? gridInlineStyle : regularGridStyle(small);
   return (0, _jsxRuntime.jsxs)(_.Grid, (0, _extends2["default"])({
     to: to,
     columns: [1, 1, 'auto 1fr auto'],

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

@@ -13,12 +13,12 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _default = {
   title: '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 image1 = // eslint-disable-next-line max-len
+"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";
+var image2 = // eslint-disable-next-line max-len
+"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, {

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

@@ -19,8 +19,8 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 describe('<OptionRow />', function () {
   it('renders the OptionRow', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
@@ -59,8 +59,8 @@ describe('<OptionRow />', function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            // eslint-disable-next-line max-len
-            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";
+            image1 = // eslint-disable-next-line max-len
+            "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";
             _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
               image: image1,
               label: "Option Row",

package/build/system/ResourceList/ResourceList.js

@@ -9,6 +9,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = require("react");
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -85,6 +87,37 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          children: [(0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            as: "h4",
+            sx: {
+              mb: 3
+            },
+            children: groupName
+          }), (0, _jsxRuntime.jsx)(_.Box, {
+            as: "ul",
+            sx: {
+              listStyleType: 'none',
+              m: 0,
+              p: 0,
+              borderTop: '1px solid',
+              borderColor: 'border'
+            },
+            children: renderItemList(groupedItems[groupName])
+          })]
+        }, index);
+      });
+    }, [groupedItems]);
+  };
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     as: "ul",
     sx: {
@@ -93,31 +126,7 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
-      return (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          mb: 4
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "h4",
-          sx: {
-            mb: 3
-          },
-          children: groupName
-        }), (0, _jsxRuntime.jsx)(_.Box, {
-          as: "ul",
-          sx: {
-            listStyleType: 'none',
-            m: 0,
-            p: 0,
-            borderTop: '1px solid',
-            borderColor: 'border'
-          },
-          children: renderItemList(groupedItems[groupName])
-        })]
-      }, index);
-    }) : renderItemList(items)
+    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,6 +129,7 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -337,6 +338,7 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/build/system/ScreenReaderText/ScreenReader.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ScreenReaderText = _interopRequireDefault(require("./ScreenReaderText"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+describe('<ScreenReaderText />', function () {
+  it('should render correctly', function () {
+    var props = {};
+    var text = 'Hello there';
+
+    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_ScreenReaderText["default"], (0, _extends2["default"])({}, props, {
+      children: text
+    }))),
+        container = _render.container; // we're using the querySelector to ensure the class is rendered since it affects the A11Y
+    // in case it's removed it could compromise the A11Y of the components using it.
+
+
+    expect(container.querySelector('.screen-reader-text')).toBeInTheDocument();
+    expect(_react.screen.queryByText(text)).toBeInTheDocument();
+  });
+});

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ScreenReaderText;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenReaderText(props) {
+  return (0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
+    className: "screen-reader-text",
+    sx: {
+      border: 'none',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      clipPath: 'inset(50%)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: '0',
+      position: 'absolute',
+      width: '1px',
+      wordWrap: 'normal !important'
+    }
+  }, props, {
+    children: props.children
+  }));
+}
+/**
+ * propTypes
+ */
+
+
+ScreenReaderText.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};

package/build/system/ScreenReaderText/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _ScreenReaderText = require("./ScreenReaderText");
+
+exports.ScreenReaderText = _ScreenReaderText.ScreenReaderText;

package/build/system/Time/index.js

@@ -88,7 +88,7 @@ var Time = function Time(_ref) {
 
 exports.Time = Time;
 Time.propTypes = {
-  time: _propTypes["default"].string,
+  time: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].date]),
   timeOnly: _propTypes["default"].bool,
   relativeTime: _propTypes["default"].bool,
   className: _propTypes["default"].any

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +1,62 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
 exports.UsageChart = void 0;
 
-var _framerMotion = require("framer-motion");
+var _framerMotion = require( 'framer-motion' );
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = _interopRequireDefault( require( 'prop-types' ) );
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _jsxRuntime = require( 'theme-ui/jsx-runtime' );
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault( obj ) {
+	return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * External dependencies
  */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
+var UsageChart = function UsageChart( _ref ) {
+	var total = _ref.total,
+		max = _ref.max,
+		_ref$variant = _ref.variant,
+		variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
+	var width = ( total / max ) * 100 + '%';
+	var formattedTotal = total;
+
+	if ( total > 1000000 ) {
+		formattedTotal = ( total / 1000000 ).toFixed( 2 ) + 'M';
+	} else if ( total > 1000 ) {
+		formattedTotal = ( total / 1000 ).toFixed( 2 ) + 'K';
+	}
+
+	return ( 0, _jsxRuntime.jsx )( 'div', {
+		sx: {
+			height: variant === 'primary' ? 32 : 8,
+			overflow: 'hidden',
+			backgroundColor: variant === 'primary' ? 'border' : 'transparent',
+		},
+		children: ( 0, _jsxRuntime.jsx )( _framerMotion.motion.div, {
+			initial: {
+				width: 0,
+			},
+			animate: {
+				width: width,
+			},
+			transition: {
+				duration: 0.7,
+			},
+			sx: {
+				height: '100%',
+				backgroundColor: variant === 'primary' ? 'primary' : 'grey.40',
+			},
+		} ),
+	} );
 };
 
 exports.UsageChart = UsageChart;
 UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};
+	total: _propTypes[ 'default' ].number,
+	max: _propTypes[ 'default' ].number,
+	variant: _propTypes[ 'default' ].string,
+};

package/build/system/UsageChart/UsageChart.stories.js

@@ -8,13 +8,13 @@ import React from 'react';
 
 import { UsageChart } from '..';
 export default {
-  title: 'UsageChart',
-  component: UsageChart
+	title: 'UsageChart',
+	component: UsageChart,
 };
 export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(UsageChart, {
-    total: 50,
-    max: 75,
-    variant: "primary"
-  });
-};
+	return /*#__PURE__*/ React.createElement( UsageChart, {
+		total: 50,
+		max: 75,
+		variant: 'primary',
+	} );
+};

package/build/system/UsageChart/index.js

@@ -1,7 +1,7 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
 
-var _UsageChart = require("./UsageChart");
+var _UsageChart = require( './UsageChart' );
 
-exports.UsageChart = _UsageChart.UsageChart;
+exports.UsageChart = _UsageChart.UsageChart;

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

@@ -61,7 +61,7 @@ var Default = function Default() {
             alignItems: 'center',
             mb: 1
           },
-          children: ["Add Domain:", ' ', (0, _jsxRuntime.jsx)("span", {
+          children: ["Add Domain: ", (0, _jsxRuntime.jsx)("span", {
             sx: {
               color: 'muted',
               ml: 2

package/package.json

@@ -1,15 +1,16 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.10.3",
+	"version": "0.11.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
-		"format": "eslint . --fix",
+		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
+		"format:check": "prettier --list-different -- \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
-		"lint": "eslint . -f json | eslines --quiet",
+		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",
 		"test": "npm run lint && npm run jest",
@@ -92,12 +93,14 @@
 		"cross-env": "^7.0.3",
 		"eslines": "2.1.0",
 		"eslint": "7.32.0",
+		"eslint-config-prettier": "^8.5.0",
 		"eslint-config-react-app": "6.0.0",
-		"eslint-config-wpvip": "automattic/eslint-config-wpvip#c6605d1c3a545d43ac2149cd464ec3c38ebc58d5",
+		"eslint-config-wpvip": "github:automattic/eslint-config-wpvip#b73cd84",
 		"eslint-plugin-jest": "24.4.2",
 		"eslint-plugin-json": "3.1.0",
 		"eslint-plugin-jsx-a11y": "6.4.1",
 		"eslint-plugin-no-async-foreach": "0.1.1",
+		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "7.25.3",
 		"eslint-plugin-storybook": "^0.5.12",
 		"eslint-plugin-wpcalypso": "4.1.0",
@@ -109,6 +112,7 @@
 		"jsdom-global": "3.0.2",
 		"open-cli": "^7.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
+		"prettier": "npm:wp-prettier@^2.6.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",

package/src/system/Avatar/Avatar.js

@@ -37,6 +37,7 @@ const Avatar = ( {
 			textAlign: 'center',
 		} }
 		className={ classNames( 'vip-avatar-component', className ) }
+		aria-hidden="true"
 		{ ...props }
 	>
 		{ src ? (

package/src/system/Avatar/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Badge/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/BlankState/BlankState.js

@@ -21,11 +21,14 @@ const BlankState = ( {
 	className = null,
 } ) => {
 	return (
-		<Box sx={{ textAlign: 'center', padding: 5 }} className={ classNames( 'vip-blank-state-component', className ) }>
-			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt={imageAlt} />}
-			<Heading variant="h4">{title}</Heading>
-			<Text>{body}</Text>
-			<Box sx={{ mt: 3 }}>{cta}</Box>
+		<Box
+			sx={ { textAlign: 'center', padding: 5 } }
+			className={ classNames( 'vip-blank-state-component', className ) }
+		>
+			{ icon ? icon : <img src={ image } sx={ { mb: 3 } } alt={ imageAlt } /> }
+			<Heading variant="h4">{ title }</Heading>
+			<Text>{ body }</Text>
+			<Box sx={ { mt: 3 } }>{ cta }</Box>
 		</Box>
 	);
 };

package/src/system/BlankState/BlankState.stories.jsx

@@ -8,16 +8,17 @@ export default {
 	component: BlankState,
 };
 
-// eslint-disable-next-line max-len
-const 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";
+const image2 =
+	// eslint-disable-next-line max-len
+	"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 const Default = () => (
 	<BlankState
-		image={image2}
+		image={ image2 }
 		title="Power up your application"
 		body="Add-ons give you the ability to bolt on extra capabilities to
 your application, including logging, analytics and performance
 monitoring."
-		cta={<Link as="a">Explore add-ons →</Link>}
+		cta={ <Link as="a">Explore add-ons →</Link> }
 	/>
 );

package/src/system/BlankState/BlankState.test.js

@@ -11,8 +11,8 @@ import { MdContentCopy } from 'react-icons/md';
 import { BlankState } from './BlankState';
 import { Link } from '../Link';
 
-// eslint-disable-next-line max-len
 const image =
+	// eslint-disable-next-line max-len
 	"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";
 
 const defaultProps = {
@@ -23,37 +23,37 @@ const defaultProps = {
 	title: 'Power up your application',
 };
 
-describe('<BlankState />', () => {
-	it('renders the BlankState component', async () => {
-		const { container } = render(<BlankState {...defaultProps} />);
+describe( '<BlankState />', () => {
+	it( 'renders the BlankState component', async () => {
+		const { container } = render( <BlankState { ...defaultProps } /> );
 
-		expect(screen.getByText(defaultProps.body)).toBeInTheDocument();
-		expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
-		expect(screen.getByText('Explore add-ons →')).toBeInTheDocument();
-		expect(screen.getByAltText(defaultProps.imageAlt)).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.body ) ).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.title ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Explore add-ons →' ) ).toBeInTheDocument();
+		expect( screen.getByAltText( defaultProps.imageAlt ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with default alt text for the given image', async () => {
+	it( 'renders the BlankState component with default alt text for the given image', async () => {
 		const props = { ...defaultProps, imageAlt: undefined };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByAltText('Image representing the blank state')).toBeInTheDocument();
+		expect( screen.getByAltText( 'Image representing the blank state' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with an icon', async () => {
+	it( 'renders the BlankState component with an icon', async () => {
 		const icon = <MdContentCopy title="this is an icon" />;
 		const props = { ...defaultProps, icon };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByTitle('this is an icon')).toBeInTheDocument();
+		expect( screen.getByTitle( 'this is an icon' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
-});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/BlankState/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */