@automattic/vip-design-system 0.21.0 → 0.22.0

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.22.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

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' } }>