@automattic/vip-design-system 0.11.0 → 0.11.1

package/build/system/Form/MultiSelect.js

@@ -1,58 +1,38 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
 exports.MultiSelect = void 0;
 
-var _reactSelect = _interopRequireDefault( require( 'react-select' ) );
-
-var _jsxRuntime = require( 'theme-ui/jsx-runtime' );
-
-function _interopRequireDefault( obj ) {
-	return obj && obj.__esModule ? obj : { default: obj };
-}
-
-function _extends() {
-	_extends =
-		Object.assign ||
-		function ( target ) {
-			for ( var i = 1; i < arguments.length; i++ ) {
-				var source = arguments[ i ];
-				for ( var key in source ) {
-					if ( Object.prototype.hasOwnProperty.call( source, key ) ) {
-						target[ key ] = source[ key ];
-					}
-				}
-			}
-			return target;
-		};
-	return _extends.apply( this, arguments );
-}
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var vipGold = '#c29c69'; // hardcoding for now
 
 var vipGrey2 = '#d7dee2';
 var customStyles = {
-	control: function control( styles ) {
-		return _extends( {}, styles, {
-			border: '1px solid ' + vipGrey2,
-			boxShadow: 'none',
-			'&:hover': {
-				border: '1px solid ' + vipGold,
-			},
-			'&:focus': {
-				border: '1px solid ' + vipGold,
-			},
-		} );
-	},
+  control: function control(styles) {
+    return _extends({}, styles, {
+      border: "1px solid " + vipGrey2,
+      boxShadow: 'none',
+      '&:hover': {
+        border: "1px solid " + vipGold
+      },
+      '&:focus': {
+        border: "1px solid " + vipGold
+      }
+    });
+  }
 };
 
-var MultiSelect = function MultiSelect( props ) {
-	return ( 0, _jsxRuntime.jsx )(
-		_reactSelect[ 'default' ],
-		_extends( {}, props, {
-			styles: customStyles,
-		} )
-	);
+var MultiSelect = function MultiSelect(props) {
+  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
+    styles: customStyles
+  }));
 };
 
-exports.MultiSelect = MultiSelect;
+exports.MultiSelect = MultiSelect;

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
+};

package/build/system/Table/TableRow.js

@@ -7,7 +7,7 @@ exports.TableRow = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ = require("../");
+var _TableCell = require("./TableCell");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -24,9 +24,9 @@ var TableRow = function TableRow(_ref) {
   var onClick = _ref.onClick,
       _ref$head = _ref.head,
       head = _ref$head === void 0 ? false : _ref$head,
-      _ref$rowHead = _ref.rowHead,
-      rowHead = _ref$rowHead === void 0 ? false : _ref$rowHead,
-      cells = _ref.cells;
+      _ref$cells = _ref.cells,
+      cells = _ref$cells === void 0 ? [] : _ref$cells,
+      children = _ref.children;
   var hoverStyles = onClick ? {
     cursor: 'pointer',
     '&:hover': {
@@ -41,69 +41,24 @@ var TableRow = function TableRow(_ref) {
     }
   };
 
-  return (0, _jsxRuntime.jsx)("tr", {
+  return (0, _jsxRuntime.jsxs)("tr", {
     sx: hoverStyles,
     onClick: onClick,
     tabIndex: onClick ? 0 : null,
     onKeyDown: handleKeyPress,
-    children: cells.map(function (cell, index) {
-      return (0, _jsxRuntime.jsx)(TableCell, {
-        cell: cell,
+    children: [cells.map(function (cell, index) {
+      return (0, _jsxRuntime.jsx)(_TableCell.TableCell, {
         head: head,
-        isRowHead: index === 0 && rowHead
+        children: cell
       }, index);
-    })
+    }), children]
   });
 };
 
 exports.TableRow = TableRow;
-
-var TableCell = function TableCell(_ref2) {
-  var head = _ref2.head,
-      isRowHead = _ref2.isRowHead,
-      cell = _ref2.cell;
-  var scope = null;
-
-  if (head) {
-    scope = 'col';
-  } else if (isRowHead) {
-    scope = 'row';
-  }
-
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    as: isRowHead || head ? 'th' : 'td',
-    scope: scope,
-    sx: {
-      px: 3,
-      py: 2,
-      textAlign: 'left',
-      borderBottom: '1px solid',
-      fontWeight: 'body',
-      borderTop: head ? '1px solid' : 'none',
-      borderColor: 'border',
-      '&:first-of-type': {
-        pl: 5
-      }
-    },
-    children: head ? (0, _jsxRuntime.jsx)(_.Heading, {
-      variant: "caps",
-      as: "div",
-      sx: {
-        mb: 0
-      },
-      children: cell
-    }) : cell
-  });
-};
-
-TableCell.propTypes = {
-  head: _propTypes["default"].bool,
-  isRowHead: _propTypes["default"].bool,
-  cell: _propTypes["default"].node
-};
 TableRow.propTypes = {
-  onClick: _propTypes["default"].func,
-  head: _propTypes["default"].bool,
   cells: _propTypes["default"].array,
-  rowHead: _propTypes["default"].bool
+  children: _propTypes["default"].node,
+  head: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
 };

package/build/system/Table/index.js

@@ -8,4 +8,8 @@ exports.Table = _Table.Table;
 
 var _TableRow = require("./TableRow");
 
-exports.TableRow = _TableRow.TableRow;
+exports.TableRow = _TableRow.TableRow;
+
+var _TableCell = require("./TableCell");
+
+exports.TableCell = _TableCell.TableCell;

package/build/system/Time/index.js

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

package/build/system/UsageChart/UsageChart.js

@@ -1,62 +1,60 @@
-'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/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/index.js

@@ -117,6 +117,7 @@ var _Table = require("./Table");
 
 exports.Table = _Table.Table;
 exports.TableRow = _Table.TableRow;
+exports.TableCell = _Table.TableCell;
 
 var _Tabs = require("./Tabs");
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.11.0",
+	"version": "0.11.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Table, TableRow, Flex, Heading, Text } from '..';
+import { Table, TableRow, Flex, Heading, Text, TableCell } from '..';
 
 export default {
 	title: 'Table',
@@ -36,6 +36,34 @@ export const Default = () => (
 					</Text>,
 				] }
 			/>
+			<TableRow>
+				<TableCell sx={ { backgroundColor: 'lightgray' } }>
+					<Flex sx={ { alignItems: 'center' } } key="user">
+						<Heading variant="h4" sx={ { mb: 0 } }>
+							simon
+						</Heading>
+					</Flex>
+				</TableCell>
+				<TableCell>
+					<Heading
+						variant="h4"
+						key="command"
+						sx={ { mb: 0, display: 'flex', alignItems: 'center' } }
+					>
+						wp posts list
+					</Heading>
+				</TableCell>
+				<TableCell>
+					<Text sx={ { mb: 0 } } key="duration">
+						3s
+					</Text>
+				</TableCell>
+				<TableCell>
+					<Text sx={ { mb: 0, color: 'muted' } } key="time">
+						3rd May 2021, 13:22:13
+					</Text>
+				</TableCell>
+			</TableRow>
 		</tbody>
 	</Table>
 );

package/src/system/Table/TableCell.js

@@ -0,0 +1,48 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Heading, Box } from '../';
+
+const TableCell = ( { head, children, ...rest } ) => {
+	const sx = {
+		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 (
+		<Box as={ head ? 'th' : 'td' } { ...{ ...rest, sx } }>
+			{ head ? (
+				<Heading variant="caps" as="div" sx={ { mb: 0 } }>
+					{ children }
+				</Heading>
+			) : (
+				children
+			) }
+		</Box>
+	);
+};
+
+TableCell.propTypes = {
+	children: PropTypes.node,
+	head: PropTypes.bool,
+};
+
+export { TableCell };

package/src/system/Table/TableRow.js

@@ -9,9 +9,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading, Box } from '../';
+import { TableCell } from './TableCell';
 
-const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
+const TableRow = ( { onClick, head = false, cells = [], children } ) => {
 	const hoverStyles = onClick
 		? { cursor: 'pointer', '&:hover': { bg: 'hover', borderRadius: 2 } }
 		: {};
@@ -30,58 +30,21 @@ const TableRow = ( { onClick, head = false, rowHead = false, cells } ) => {
 			onKeyDown={ handleKeyPress }
 		>
 			{ cells.map( ( cell, index ) => (
-				<TableCell key={ index } cell={ cell } head={ head } isRowHead={ index === 0 && rowHead } />
+				<TableCell key={ index } head={ head }>
+					{ cell }
+				</TableCell>
 			) ) }
-		</tr>
-	);
-};
 
-const TableCell = ( { head, isRowHead, cell } ) => {
-	let scope = null;
-	if ( head ) {
-		scope = 'col';
-	} else if ( isRowHead ) {
-		scope = 'row';
-	}
-	return (
-		<Box
-			as={ isRowHead || head ? 'th' : 'td' }
-			scope={ scope }
-			sx={ {
-				px: 3,
-				py: 2,
-				textAlign: 'left',
-				borderBottom: '1px solid',
-				fontWeight: 'body',
-				borderTop: head ? '1px solid' : 'none',
-				borderColor: 'border',
-				'&:first-of-type': {
-					pl: 5,
-				},
-			} }
-		>
-			{ head ? (
-				<Heading variant="caps" as="div" sx={ { mb: 0 } }>
-					{ cell }
-				</Heading>
-			) : (
-				cell
-			) }
-		</Box>
+			{ children }
+		</tr>
 	);
 };
 
-TableCell.propTypes = {
-	head: PropTypes.bool,
-	isRowHead: PropTypes.bool,
-	cell: PropTypes.node,
-};
-
 TableRow.propTypes = {
-	onClick: PropTypes.func,
-	head: PropTypes.bool,
 	cells: PropTypes.array,
-	rowHead: PropTypes.bool,
+	children: PropTypes.node,
+	head: PropTypes.bool,
+	onClick: PropTypes.func,
 };
 
 export { TableRow };

package/src/system/Table/index.js

@@ -3,5 +3,6 @@
  */
 import { Table } from './Table';
 import { TableRow } from './TableRow';
+import { TableCell } from './TableCell';
 
-export { Table, TableRow };
+export { Table, TableRow, TableCell };

package/src/system/Time/index.js

@@ -56,7 +56,7 @@ const Time = ( { time, relativeTime = false, timeOnly = false, className = null,
 };
 
 Time.propTypes = {
-	time: PropTypes.oneOfType( [ PropTypes.string, PropTypes.date ] ),
+	time: PropTypes.oneOfType( [ PropTypes.string, PropTypes.instanceOf( Date ) ] ),
 	timeOnly: PropTypes.bool,
 	relativeTime: PropTypes.bool,
 	className: PropTypes.any,

package/src/system/index.js

@@ -44,7 +44,7 @@ import { Time } from './Time';
 import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
-import { Table, TableRow } from './Table';
+import { Table, TableRow, TableCell } from './Table';
 import { TabItem, Tabs } from './Tabs';
 import { Text } from './Text';
 import theme from './theme';
@@ -77,6 +77,7 @@ export {
 	Spinner,
 	Table,
 	TableRow,
+	TableCell,
 	Tooltip,
 	Notification,
 	Link,

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

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