@automattic/vip-design-system 0.21.0 → 0.23.0

package/build/system/Dropdown/DropdownSeparator.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var styles = {
   height: '1px',
-  backgroundColor: 'border',
+  backgroundColor: 'borders.2',
   my: '5px'
 };
 exports.styles = styles;

package/build/system/NewForm/FormSelect.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,7 +21,13 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "label"];
+var _excluded = ["isInline", "placeholder", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange"],
+    _excluded2 = ["options"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var MAX_SUGGESTED_OPTIONS = 15;
 var isDev = process.env.NODE_ENV !== 'production';
 var defaultStyles = {
@@ -69,6 +75,9 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       forLabel = _ref2.forLabel,
       options = _ref2.options,
       label = _ref2.label,
+      getOptionLabel = _ref2.getOptionLabel,
+      getOptionValue = _ref2.getOptionValue,
+      onChange = _ref2.onChange,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
@@ -76,6 +85,21 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
     console.info('For 16 or more items, consider using another component with a typeahead capability.');
   }
 
+  var optionLabel = (0, _react.useCallback)(function (option) {
+    return getOptionLabel ? getOptionLabel(option) : option.label;
+  }, [getOptionLabel]);
+  var optionValue = (0, _react.useCallback)(function (option) {
+    return getOptionValue ? getOptionValue(option) : option.value;
+  }, [getOptionValue]);
+  var getOptionByValue = (0, _react.useCallback)(function (value) {
+    return options.find(function (option) {
+      return optionValue(option) === value;
+    });
+  }, [options, optionValue]);
+  var onValueChange = (0, _react.useCallback)(function (event) {
+    return onChange ? onChange(getOptionByValue(event.target.value), event) : getOptionByValue(event.target.value);
+  }, [onChange, getOptionByValue]);
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: forLabel || props.id,
@@ -89,16 +113,17 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       isInline: inlineLabel,
       label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
       children: [(0, _jsxRuntime.jsxs)("select", (0, _extends2["default"])({
+        onChange: onValueChange,
         ref: forwardRef,
         sx: defaultStyles
       }, props, {
         children: [placeholder && (0, _jsxRuntime.jsx)("option", {
           children: placeholder
         }), options.map(function (_ref3) {
-          var optionLabel = _ref3.label,
-              value = _ref3.value,
-              groupOptions = _ref3.options;
-          return value ? renderOption(optionLabel, value) : renderGroup(optionLabel, groupOptions);
+          var groupOptions = _ref3.options,
+              option = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+          var value = optionValue(option);
+          return value ? renderOption(optionLabel(option), value) : renderGroup(optionLabel(option), groupOptions);
         })]
       })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
     })]
@@ -112,6 +137,9 @@ FormSelect.propTypes = {
   forLabel: _propTypes["default"].string,
   placeholder: _propTypes["default"].string,
   label: _propTypes["default"].string,
-  options: _propTypes["default"].array
+  options: _propTypes["default"].array,
+  getOptionLabel: _propTypes["default"].func,
+  getOptionValue: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
 };
 FormSelect.displayName = 'FormSelect';

package/build/system/NewForm/FormSelect.stories.js

@@ -3,17 +3,19 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithGroup = exports.IsInline = exports.Default = void 0;
+exports["default"] = exports.WithOptionLabelAndValue = exports.WithOnChange = exports.WithGroup = exports.IsInline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = require("react");
+
 var Form = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["label", "width"];
+var _excluded = ["label", "width", "onChange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,6 +61,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
       label = _ref$label === void 0 ? 'Label' : _ref$label,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 250 : _ref$width,
+      onChange = _ref.onChange,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("p", {
@@ -79,7 +82,8 @@ var DefaultComponent = function DefaultComponent(_ref) {
         },
         children: (0, _jsxRuntime.jsx)(Form.Select, (0, _extends2["default"])({
           id: "form-select",
-          label: label
+          label: label,
+          onChange: onChange
         }, rest))
       })
     })]
@@ -117,4 +121,55 @@ IsInline.args = {
     label: 'Another Group name',
     options: options
   }]
-};
+};
+var WithOptionLabelAndValue = DefaultComponent.bind({});
+exports.WithOptionLabelAndValue = WithOptionLabelAndValue;
+WithOptionLabelAndValue.args = {
+  label: 'Select with getOptionLabel / getOptionValue',
+  width: '100%',
+  options: options.map(function (_ref2) {
+    var label = _ref2.label,
+        value = _ref2.value;
+    return {
+      name: label,
+      id: value
+    };
+  }),
+  getOptionLabel: function getOptionLabel(option) {
+    return option.name;
+  },
+  getOptionValue: function getOptionValue(option) {
+    return option.id;
+  }
+};
+
+var WithOnChange = function WithOnChange() {
+  var _useState = (0, _react.useState)(null),
+      option = _useState[0],
+      setOption = _useState[1];
+
+  var onChange = (0, _react.useCallback)(function (val, event) {
+    return setOption({
+      obj: val,
+      eventValue: event.target.value
+    });
+  });
+  var args = {
+    label: 'Select with onChange',
+    placeholder: '- Select -',
+    width: '100%',
+    onChange: onChange,
+    options: options
+  };
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      onChange: onChange
+    }, args)), option && (0, _jsxRuntime.jsxs)("p", {
+      children: ["Object to JSON: ", JSON.stringify(option.obj)]
+    }), option && (0, _jsxRuntime.jsxs)("p", {
+      children: ["Original Event Value: ", option.eventValue]
+    })]
+  });
+};
+
+exports.WithOnChange = WithOnChange;

package/build/system/NewForm/FormSelect.test.js

@@ -140,4 +140,54 @@ describe('<FormSelect />', function () {
       }
     }, _callee3);
   })));
+  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var props, _render4, container;
+
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            props = (0, _extends2["default"])({}, defaultProps, {
+              options: options.map(function (_ref5) {
+                var label = _ref5.label,
+                    value = _ref5.value;
+                return {
+                  name: label,
+                  id: value
+                };
+              }),
+              getOptionLabel: function getOptionLabel(option) {
+                return option.name;
+              },
+              getOptionValue: function getOptionValue(option) {
+                return option.id;
+              }
+            });
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, props))), container = _render4.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.getByText(options[0].label)).toBeInTheDocument();
+            expect(_react.screen.getByText(options[1].label)).toBeInTheDocument();
+            expect(_react.screen.getByText(options[2].label)).toBeInTheDocument();
+            expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
+
+            _context4.t0 = expect;
+            _context4.next = 12;
+            return (0, _jestAxe.axe)(container);
+
+          case 12:
+            _context4.t1 = _context4.sent;
+            _context4.next = 15;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 15:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.ScreenReaderText = void 0;
+exports.screenReaderTextClass = exports.ScreenReaderText = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -22,21 +22,24 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
+var screenReaderTextClass = {
+  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'
+};
+exports.screenReaderTextClass = screenReaderTextClass;
+
 var ScreenReaderText = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
   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'
-    }
+    sx: screenReaderTextClass
   }, props, {
     ref: forwardRef,
     children: props.children

package/build/system/Table/Table.js

@@ -15,15 +15,26 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx", "className"];
+var _excluded = ["sx", "className", "children", "caption"];
 
 var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       className = _ref.className,
+      children = _ref.children,
+      _ref$caption = _ref.caption,
+      caption = _ref$caption === void 0 ? null : _ref$caption,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
+
+  if (!caption) {
+    // eslint-disable-next-line no-console
+    console.warn('[A11Y] Please, add a caption to your table.');
+  }
+
+  return (0, _jsxRuntime.jsxs)("table", (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       width: '100%',
       minWidth: 1024
@@ -32,12 +43,19 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
     cellSpacing: 0,
     className: (0, _classnames["default"])('vip-table-component', className),
     ref: forwardRef
-  }, props));
+  }, props, {
+    children: [caption && (0, _jsxRuntime.jsx)("caption", {
+      sx: _ScreenReaderText.screenReaderTextClass,
+      children: caption
+    }), children]
+  }));
 });
 
 exports.Table = Table;
 Table.displayName = 'Table';
 Table.propTypes = {
   sx: _propTypes["default"].object,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  children: _propTypes["default"].any,
+  caption: _propTypes["default"].string.isRequired
 };

package/build/system/Table/Table.stories.js

@@ -7,6 +7,8 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * Internal dependencies
  */
@@ -18,6 +20,7 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_.Table, {
+    caption: "Storybook Example",
     children: [(0, _jsxRuntime.jsx)("thead", {
       children: (0, _jsxRuntime.jsx)(_.TableRow, {
         head: true,
@@ -55,7 +58,8 @@ var Default = function Default() {
             color: 'muted'
           },
           children: "11th Mar 2020, 16:49:22"
-        }, "time")]
+        }, "time")],
+        gbc: true
       }), (0, _jsxRuntime.jsxs)(_.TableRow, {
         children: [(0, _jsxRuntime.jsx)(_.TableCell, {
           sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.21.0",
+	"version": "0.23.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -22,7 +22,7 @@
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
-		"@radix-ui/react-dropdown-menu": "^1.0.0",
+		"@radix-ui/react-dropdown-menu": "^1.0.1-rc.6",
 		"@radix-ui/react-radio-group": "^1.0.0",
 		"@radix-ui/react-switch": "^1.0.0",
 		"@radix-ui/react-tooltip": "^1.0.0",

package/src/system/Dropdown/DropdownSeparator.js

@@ -8,7 +8,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 export const styles = {
 	height: '1px',
-	backgroundColor: 'border',
+	backgroundColor: 'borders.2',
 	my: '5px',
 };
 

package/src/system/NewForm/FormSelect.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Label } from '../Form/Label';
 
@@ -47,7 +47,20 @@ const renderGroup = ( groupLabel, groupOptions ) => {
 };
 
 const FormSelect = React.forwardRef(
-	( { isInline, placeholder, forLabel, options, label, ...props }, forwardRef ) => {
+	(
+		{
+			isInline,
+			placeholder,
+			forLabel,
+			options,
+			label,
+			getOptionLabel,
+			getOptionValue,
+			onChange,
+			...props
+		},
+		forwardRef
+	) => {
 		if ( isDev && options.length > MAX_SUGGESTED_OPTIONS ) {
 			// eslint-disable-next-line no-console
 			console.info(
@@ -55,7 +68,31 @@ const FormSelect = React.forwardRef(
 			);
 		}
 
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
+		);
+
+		const optionValue = useCallback(
+			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
+			[ getOptionValue ]
+		);
+
+		const getOptionByValue = useCallback(
+			value => options.find( option => optionValue( option ) === value ),
+			[ options, optionValue ]
+		);
+
+		const onValueChange = useCallback(
+			event =>
+				onChange
+					? onChange( getOptionByValue( event.target.value ), event )
+					: getOptionByValue( event.target.value ),
+			[ onChange, getOptionByValue ]
+		);
+
 		const SelectLabel = () => <Label htmlFor={ forLabel || props.id }>{ label }</Label>;
+
 		const inlineLabel = !! ( isInline && label );
 
 		return (
@@ -63,11 +100,15 @@ const FormSelect = React.forwardRef(
 				{ label && ! isInline && <SelectLabel /> }
 
 				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
-					<select ref={ forwardRef } sx={ defaultStyles } { ...props }>
+					<select onChange={ onValueChange } ref={ forwardRef } sx={ defaultStyles } { ...props }>
 						{ placeholder && <option>{ placeholder }</option> }
-						{ options.map( ( { label: optionLabel, value, options: groupOptions } ) =>
-							value ? renderOption( optionLabel, value ) : renderGroup( optionLabel, groupOptions )
-						) }
+						{ options.map( ( { options: groupOptions, ...option } ) => {
+							const value = optionValue( option );
+
+							return value
+								? renderOption( optionLabel( option ), value )
+								: renderGroup( optionLabel( option ), groupOptions );
+						} ) }
 					</select>
 
 					<FormSelectArrow />
@@ -84,6 +125,9 @@ FormSelect.propTypes = {
 	placeholder: PropTypes.string,
 	label: PropTypes.string,
 	options: PropTypes.array,
+	getOptionLabel: PropTypes.func,
+	getOptionValue: PropTypes.func,
+	onChange: PropTypes.func,
 };
 
 FormSelect.displayName = 'FormSelect';

package/src/system/NewForm/FormSelect.stories.jsx

@@ -3,6 +3,7 @@
 /**
  * Internal dependencies
  */
+import { useCallback, useState } from 'react';
 import * as Form from '.';
 
 export default {
@@ -26,7 +27,7 @@ const options = [
 ];
 
 // eslint-disable-next-line react/prop-types
-const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
+const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
 	<>
 		<p>
 			This is a simple wrapper at the top of a browser default select component. This component
@@ -49,7 +50,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
 		</p>
 		<Form.Root>
 			<div sx={ { width } }>
-				<Form.Select id="form-select" label={ label } { ...rest } />
+				<Form.Select id="form-select" label={ label } onChange={ onChange } { ...rest } />
 			</div>
 		</Form.Root>
 	</>
@@ -94,3 +95,40 @@ IsInline.args = {
 		},
 	],
 };
+
+export const WithOptionLabelAndValue = DefaultComponent.bind( {} );
+
+WithOptionLabelAndValue.args = {
+	label: 'Select with getOptionLabel / getOptionValue',
+	width: '100%',
+	options: options.map( ( { label, value } ) => ( {
+		name: label,
+		id: value,
+	} ) ),
+	getOptionLabel: option => option.name,
+	getOptionValue: option => option.id,
+};
+
+export const WithOnChange = () => {
+	const [ option, setOption ] = useState( null );
+
+	const onChange = useCallback( ( val, event ) =>
+		setOption( { obj: val, eventValue: event.target.value } )
+	);
+
+	const args = {
+		label: 'Select with onChange',
+		placeholder: '- Select -',
+		width: '100%',
+		onChange,
+		options,
+	};
+
+	return (
+		<>
+			<DefaultComponent onChange={ onChange } { ...args } />
+			{ option && <p>Object to JSON: { JSON.stringify( option.obj ) }</p> }
+			{ option && <p>Original Event Value: { option.eventValue }</p> }
+		</>
+	);
+};

package/src/system/NewForm/FormSelect.test.js

@@ -69,4 +69,29 @@ describe( '<FormSelect />', () => {
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the FormSelect component when getOptionLabel and getOptionValue', async () => {
+		const props = {
+			...defaultProps,
+			options: options.map( ( { label, value } ) => ( {
+				name: label,
+				id: value,
+			} ) ),
+			getOptionLabel: option => option.name,
+			getOptionValue: option => option.id,
+		};
+
+		const { container } = render( <FormSelect id="my_desert_list" { ...props } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.getByText( options[ 0 ].label ) ).toBeInTheDocument();
+		expect( screen.getByText( options[ 1 ].label ) ).toBeInTheDocument();
+		expect( screen.getByText( options[ 2 ].label ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -10,24 +10,21 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 
+export const screenReaderTextClass = {
+	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',
+};
+
 export const ScreenReaderText = React.forwardRef( ( props, forwardRef ) => (
-	<span
-		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 }
-		ref={ forwardRef }
-	>
+	<span className="screen-reader-text" sx={ screenReaderTextClass } { ...props } ref={ forwardRef }>
 		{ props.children }
 	</span>
 ) );

package/src/system/Table/Table.js

@@ -6,23 +6,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
 
-const Table = React.forwardRef( ( { sx, className, ...props }, forwardRef ) => (
-	<table
-		sx={ { width: '100%', minWidth: 1024, ...sx } }
-		cellPadding={ 0 }
-		cellSpacing={ 0 }
-		className={ classNames( 'vip-table-component', className ) }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
+const Table = React.forwardRef(
+	( { sx, className, children, caption = null, ...props }, forwardRef ) => {
+		if ( ! caption ) {
+			// eslint-disable-next-line no-console
+			console.warn( '[A11Y] Please, add a caption to your table.' );
+		}
+
+		return (
+			<table
+				sx={ { width: '100%', minWidth: 1024, ...sx } }
+				cellPadding={ 0 }
+				cellSpacing={ 0 }
+				className={ classNames( 'vip-table-component', className ) }
+				ref={ forwardRef }
+				{ ...props }
+			>
+				{ caption && <caption sx={ screenReaderTextClass }>{ caption }</caption> }
+				{ children }
+			</table>
+		);
+	}
+);
 
 Table.displayName = 'Table';
 
 Table.propTypes = {
 	sx: PropTypes.object,
 	className: PropTypes.any,
+	children: PropTypes.any,
+	caption: PropTypes.string.isRequired,
 };
 
 export { Table };

package/src/system/Table/Table.stories.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * Internal dependencies
  */
@@ -9,7 +11,7 @@ export default {
 };
 
 export const Default = () => (
-	<Table>
+	<Table caption="Storybook Example">
 		<thead>
 			<TableRow head cells={ [ 'User', 'Command', 'Duration', 'Time' ] } />
 		</thead>
@@ -35,6 +37,7 @@ export const Default = () => (
 						11th Mar 2020, 16:49:22
 					</Text>,
 				] }
+				gbc
 			/>
 			<TableRow>
 				<TableCell sx={ { backgroundColor: 'lightgray' } }>