@automattic/vip-design-system 0.10.3 → 0.12.0

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Toggle = require("./Toggle");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+describe('<Toggle />', function () {
+  it('renders the Toggle component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Toggle.Toggle, {
+              "aria-label": "Dinner room Light",
+              defaultChecked: true,
+              name: "my-toggle"
+            })), container = _render.container;
+            expect(_react.screen.getByRole('switch')).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/Notification/Notification.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /** @jsxImportSource theme-ui */
@@ -29,6 +31,7 @@ var Notification = function Notification(_ref) {
       status = _ref$status === void 0 ? 'success' : _ref$status,
       onClose = _ref.onClose;
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    role: "alert",
     className: "vip-notification-component",
     sx: {
       boxShadow: 'medium',
@@ -36,16 +39,8 @@ var Notification = function Notification(_ref) {
       position: 'relative',
       variant: "notification." + status
     },
-    children: [(0, _jsxRuntime.jsx)(_.Button, {
-      onClick: onClose,
-      variant: "icon",
-      sx: {
-        color: 'muted',
-        position: 'absolute',
-        top: 2,
-        right: 2
-      },
-      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
+    children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: "Alert,"
     }), (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center'
@@ -54,21 +49,24 @@ var Notification = function Notification(_ref) {
         sx: {
           color: 'error',
           flex: '0 0 auto'
-        }
+        },
+        "aria-hidden": "true"
       }) : (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         sx: {
           color: 'success',
           flex: '0 0 auto'
-        }
+        },
+        "aria-hidden": "true"
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
           flex: '1 1 auto',
           ml: 3
         },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
+        children: [(0, _jsxRuntime.jsx)("p", {
           sx: {
-            mb: 0
+            my: 0,
+            color: 'heading',
+            fontWeight: 'bold'
           },
           children: title
         }), body && (0, _jsxRuntime.jsx)(_.Text, {
@@ -79,6 +77,17 @@ var Notification = function Notification(_ref) {
           children: body
         })]
       })]
+    }), onClose && (0, _jsxRuntime.jsx)(_.Button, {
+      onClick: onClose,
+      variant: "icon",
+      sx: {
+        color: 'muted',
+        position: 'absolute',
+        top: 2,
+        right: 2
+      },
+      "aria-hidden": "true",
+      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
     })]
   });
 };

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Error = exports.Default = void 0;
 
 var _ = require("..");
 
@@ -18,9 +18,19 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.Notification, {
-    title: "My first notification",
-    subTitle: "Use when providing success or error feedback on global action"
+    title: "Awesome!",
+    body: "Your message has been sent successfully."
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var Error = function Error() {
+  return (0, _jsxRuntime.jsx)(_.Notification, {
+    status: "error",
+    title: "Snag!",
+    body: "Your message could not be sent."
+  });
+};
+
+exports.Error = Error;

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/Table/Table.stories.js

@@ -23,8 +23,8 @@ var Default = function Default() {
         head: true,
         cells: ['User', 'Command', 'Duration', 'Time']
       })
-    }), (0, _jsxRuntime.jsx)("tbody", {
-      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+    }), (0, _jsxRuntime.jsxs)("tbody", {
+      children: [(0, _jsxRuntime.jsx)(_.TableRow, {
         cells: [(0, _jsxRuntime.jsx)(_.Flex, {
           sx: {
             alignItems: 'center'
@@ -56,7 +56,50 @@ var Default = function Default() {
           },
           children: "11th Mar 2020, 16:49:22"
         }, "time")]
-      })
+      }), (0, _jsxRuntime.jsxs)(_.TableRow, {
+        children: [(0, _jsxRuntime.jsx)(_.TableCell, {
+          sx: {
+            backgroundColor: 'lightgray'
+          },
+          children: (0, _jsxRuntime.jsx)(_.Flex, {
+            sx: {
+              alignItems: 'center'
+            },
+            children: (0, _jsxRuntime.jsx)(_.Heading, {
+              variant: "h4",
+              sx: {
+                mb: 0
+              },
+              children: "simon"
+            })
+          }, "user")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            sx: {
+              mb: 0,
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: "wp posts list"
+          }, "command")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              mb: 0
+            },
+            children: "3s"
+          }, "duration")
+        }), (0, _jsxRuntime.jsx)(_.TableCell, {
+          children: (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              mb: 0,
+              color: 'muted'
+            },
+            children: "3rd May 2021, 13:22:13"
+          }, "time")
+        })]
+      })]
     })]
   });
 };

package/build/system/Table/TableCell.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TableCell = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["head", "children"];
+
+var TableCell = function TableCell(_ref) {
+  var head = _ref.head,
+      children = _ref.children,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var sx = (0, _extends2["default"])({
+    borderBottom: '1px solid',
+    borderTop: head ? '1px solid' : 'none',
+    // borderColor should come after borderTop so it can override it
+    borderColor: 'border',
+    fontWeight: 'body',
+    px: 3,
+    py: 2,
+    textAlign: 'left',
+    '&:first-of-type': {
+      pl: 5
+    }
+  }, rest.sx);
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
+    as: head ? 'th' : 'td'
+  }, (0, _extends2["default"])({}, rest, {
+    sx: sx
+  }), {
+    children: head ? (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "caps",
+      as: "div",
+      sx: {
+        mb: 0
+      },
+      children: children
+    }) : children
+  }));
+};
+
+exports.TableCell = TableCell;
+TableCell.propTypes = {
+  children: _propTypes["default"].node,
+  head: _propTypes["default"].bool
+};