@automattic/vip-design-system 0.11.0 → 0.13.0

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/index.js

@@ -42,6 +42,10 @@ exports.DialogMenuItem = _Dialog.DialogMenuItem;
 exports.DialogTrigger = _Dialog.DialogTrigger;
 exports.DialogContent = _Dialog.DialogContent;
 
+var _NewDialog = require("./NewDialog");
+
+exports.NewDialog = _NewDialog.NewDialog;
+
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;
@@ -117,6 +121,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.13.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -17,9 +17,12 @@
 		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
-		"@radix-ui/react-checkbox": "^0.1.0",
-		"@radix-ui/react-radio-group": "^0.1.0",
-		"@radix-ui/react-tooltip": "^0.1.0",
+		"@radix-ui/react-checkbox": "^0.1.5",
+		"@radix-ui/react-dialog": "^0.1.7",
+		"@radix-ui/react-radio-group": "^0.1.5",
+		"@radix-ui/react-switch": "^0.1.5",
+		"@radix-ui/react-tooltip": "^0.1.7",
+		"@radix-ui/react-visually-hidden": "^0.1.4",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",
@@ -83,6 +86,7 @@
 		"@mdx-js/react": "^2.1.1",
 		"@storybook/addon-a11y": "^6.5.9",
 		"@storybook/addon-actions": "^6.5.9",
+		"@storybook/addon-controls": "^6.5.9",
 		"@storybook/addon-essentials": "^6.5.9",
 		"@storybook/addon-links": "^6.5.9",
 		"@storybook/react": "^6.5.9",

package/src/system/Form/Toggle.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /** @jsxImportSource theme-ui */
 
 /**
@@ -6,73 +7,64 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const Toggle = ( { name = 'toggle', className = null, ...props } ) => (
-	<CheckBoxWrapper className={ classNames( 'vip-checkbox-component', className ) }>
-		<CheckBox name={ name } id={ name } type="checkbox" { ...props } />
-		<CheckBoxLabel htmlFor={ name } />
-	</CheckBoxWrapper>
-);
-
-Toggle.propTypes = {
-	name: PropTypes.string,
-	className: PropTypes.any,
-};
-
-export { Toggle };
+import * as Switch from '@radix-ui/react-switch';
 
-const CheckBoxWrapper = props => <div sx={ { position: 'relative' } } { ...props } />;
+// Documentation for Radix Switch component
+// https://www.radix-ui.com/docs/primitives/components/switch
 
-const CheckBoxLabel = props => (
-	<label
+export const Toggle = ( {
+	name = 'toggle',
+	onChange,
+	className = null,
+	variant = 'primary',
+	...rest
+} ) => (
+	<Switch.Root
+		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
-			position: 'absolute',
-			top: '0',
-			left: '0',
-			width: '42px',
-			height: '24px',
-			borderRadius: '15px',
+			all: 'unset',
+			position: 'relative',
+			width: 40,
+			height: 20,
+			borderRadius: '32px',
 			backgroundColor: 'muted',
-			cursor: 'pointer',
-			'&::after': {
-				content: "''",
-				display: 'block',
-				borderRadius: '50%',
-				width: '18px',
-				height: '18px',
-				margin: '3px',
-				backgroundColor: 'card',
-				boxShadow: 'low',
-				transition: '0.2s',
-			},
-		} }
-		{ ...props }
-	/>
-);
+			backgroundRepeat: 'no-repeat',
+			backgroundPosition: 'right 2px top 2px',
+			backgroundImage: `url(
+				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
+			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
 
-const CheckBox = props => (
-	<input
-		sx={ {
-			opacity: '0',
-			zIndex: '1',
-			borderRadius: '15px',
-			width: '42px',
-			height: '24px',
-			padding: 0,
-			margin: 0,
-			display: 'block',
-			'&:checked + label': {
-				backgroundColor: 'success',
-				'&::after': {
-					content: "''",
-					display: 'block',
-					borderRadius: '50%',
-					width: '18px',
-					height: '18px',
-					marginLeft: '21px',
-					transition: '0.2s',
-				},
+			'&[data-state="checked"]': {
+				backgroundColor: variant,
+				backgroundPosition: 'left 2px top 2px',
+				backgroundImage: `url(
+					'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
 			},
 		} }
-		{ ...props }
-	/>
+		name={ name }
+		onCheckedChange={ onChange || undefined }
+		{ ...rest }
+	>
+		<Switch.Thumb
+			sx={ {
+				display: 'block',
+				width: 16,
+				height: 16,
+				backgroundColor: 'white',
+				borderRadius: '50%',
+				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+				transition: 'transform 100ms',
+				transform: 'translateX(2px)',
+				willChange: 'transform',
+				'&[data-state="checked"]': { transform: 'translateX(22px)' },
+			} }
+		/>
+	</Switch.Root>
 );
+
+Toggle.propTypes = {
+	name: PropTypes.string,
+	className: PropTypes.any,
+	onChange: PropTypes.func,
+	variant: PropTypes.string,
+};

package/src/system/Form/Toggle.stories.jsx

@@ -0,0 +1,84 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Toggle, Label } from '..';
+
+export default {
+	title: 'Toggle',
+	component: Toggle,
+	argTypes: {
+		checked: {
+			options: [ true, false ],
+			default: true,
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Default = args => (
+	<form>
+		<Toggle
+			checked={ args.checked }
+			defaultChecked
+			color={ args.color }
+			aria-label="Feature flag"
+		/>
+
+		<br />
+		<br />
+
+		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
+	</form>
+);
+
+const WithLabel = args => (
+	<form>
+		<Label htmlFor="custom-label-input">Custom Label here</Label>
+
+		<Toggle
+			id="custom-label-input"
+			defaultChecked
+			checked={ args.checked }
+			aria-label="Feature flag"
+		/>
+	</form>
+);
+
+const CustomStyling = args => (
+	<form>
+		<Label htmlFor="custom-label-input">Custom Styling</Label>
+
+		<div>
+			<Toggle
+				id="custom-label-input"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Feature flag"
+				variant="success"
+			/>{ ' ' }
+			<Toggle
+				id="custom-label-input-error"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Error flag"
+				variant="error"
+			/>{ ' ' }
+			<Toggle
+				id="custom-label-input-warning"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Warning flag"
+				variant="warning"
+			/>
+		</div>
+	</form>
+);
+
+export const Primary = Default.bind( { checked: true } );
+export const ExternalLabel = WithLabel.bind( { checked: true } );
+export const CustomStyle = CustomStyling.bind( { checked: true } );

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Toggle } from './Toggle';
+
+describe( '<Toggle />', () => {
+	it( 'renders the Toggle component', async () => {
+		const { container } = render(
+			<Toggle aria-label="Dinner room Light" defaultChecked name="my-toggle" />
+		);
+
+		expect( screen.getByRole( 'switch' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewDialog/DialogClose.js

@@ -0,0 +1,45 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { IoClose } from 'react-icons/io5';
+
+/**
+ * Internal dependencies
+ */
+export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
+	<DialogPrimitive.Close asChild { ...props } ref={ forwardedRef }>
+		<button
+			aria-label="Close"
+			sx={ {
+				all: 'unset',
+				fontFamily: 'inherit',
+				borderRadius: '100%',
+				height: 25,
+				width: 25,
+				display: 'inline-flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: theme => `${ theme?.colors?.text }`,
+				position: 'absolute',
+				top: 10,
+				right: 10,
+
+				'&:hover': {
+					backgroundColor: 'border',
+					outlineStyle: 'solid',
+					outlineColor: 'primary',
+					outlineWidth: '2px',
+				},
+				'&:focus': { outlineStyle: 'solid', outlineColor: 'primary', outlineWidth: '2px' },
+			} }
+		>
+			<IoClose aria-hidden="true" />
+		</button>
+	</DialogPrimitive.Close>
+) );
+
+DialogClose.displayName = 'DialogClose';

package/src/system/NewDialog/DialogClose.test.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { Dialog } from '@radix-ui/react-dialog';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { DialogClose } from './DialogClose';
+
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+const Wrapper = props => <Dialog open={ true } { ...props } />;
+const defaultProps = {
+	title: 'This is a DialogClose',
+};
+
+describe( '<DialogClose />', () => {
+	it( 'renders the DialogClose component', async () => {
+		const { container } = render(
+			<Wrapper>
+				<DialogClose { ...defaultProps } />
+			</Wrapper>
+		);
+
+		expect( screen.getByLabelText( 'Close' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewDialog/DialogContent.js

@@ -0,0 +1,17 @@
+/** @jsxImportSource theme-ui */
+
+export const contentStyles = {
+	background: 'white',
+	borderRadius: 10,
+	boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+	position: 'fixed',
+	top: '50%',
+	left: '50%',
+	transform: 'translate(-50%, -50%)',
+	width: '90vw',
+	maxWidth: '640px',
+	maxHeight: '85vh',
+	padding: 25,
+	'&:focus': { outline: 'none' },
+	'> h1, > h2': { marginTop: '0 !important' },
+};

package/src/system/NewDialog/DialogDescription.js

@@ -0,0 +1,36 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+
+/**
+ * Internal dependencies
+ */
+
+export const DialogDescription = React.forwardRef(
+	( { description, hidden, ...rest }, forwardedRef ) => {
+		let text = description;
+
+		if ( hidden ) {
+			text = <ScreenReaderText>{ text }</ScreenReaderText>;
+		}
+
+		return (
+			<DialogPrimitive.Description { ...rest } ref={ forwardedRef }>
+				{ text }
+			</DialogPrimitive.Description>
+		);
+	}
+);
+
+DialogDescription.displayName = 'DialogDescription';
+
+DialogDescription.propTypes = {
+	description: PropTypes.string,
+	hidden: PropTypes.bool,
+};