@automattic/vip-design-system 0.10.3 → 0.12.0

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"].string,
+  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/Wizard/Wizard.stories.js

@@ -61,7 +61,7 @@ var Default = function Default() {
             alignItems: 'center',
             mb: 1
           },
-          children: ["Add Domain:", ' ', (0, _jsxRuntime.jsx)("span", {
+          children: ["Add Domain: ", (0, _jsxRuntime.jsx)("span", {
             sx: {
               color: 'muted',
               ml: 2

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,15 +1,16 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.10.3",
+	"version": "0.12.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
-		"format": "eslint . --fix",
+		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
+		"format:check": "prettier --list-different -- \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
-		"lint": "eslint . -f json | eslines --quiet",
+		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",
 		"test": "npm run lint && npm run jest",
@@ -18,6 +19,7 @@
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^0.1.0",
 		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.0",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
@@ -82,6 +84,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",
@@ -92,12 +95,14 @@
 		"cross-env": "^7.0.3",
 		"eslines": "2.1.0",
 		"eslint": "7.32.0",
+		"eslint-config-prettier": "^8.5.0",
 		"eslint-config-react-app": "6.0.0",
-		"eslint-config-wpvip": "automattic/eslint-config-wpvip#c6605d1c3a545d43ac2149cd464ec3c38ebc58d5",
+		"eslint-config-wpvip": "github:automattic/eslint-config-wpvip#b73cd84",
 		"eslint-plugin-jest": "24.4.2",
 		"eslint-plugin-json": "3.1.0",
 		"eslint-plugin-jsx-a11y": "6.4.1",
 		"eslint-plugin-no-async-foreach": "0.1.1",
+		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "7.25.3",
 		"eslint-plugin-storybook": "^0.5.12",
 		"eslint-plugin-wpcalypso": "4.1.0",
@@ -109,6 +114,7 @@
 		"jsdom-global": "3.0.2",
 		"open-cli": "^7.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
+		"prettier": "npm:wp-prettier@^2.6.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",

package/src/system/Avatar/Avatar.js

@@ -37,6 +37,7 @@ const Avatar = ( {
 			textAlign: 'center',
 		} }
 		className={ classNames( 'vip-avatar-component', className ) }
+		aria-hidden="true"
 		{ ...props }
 	>
 		{ src ? (

package/src/system/Avatar/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Badge/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/BlankState/BlankState.js

@@ -21,11 +21,14 @@ const BlankState = ( {
 	className = null,
 } ) => {
 	return (
-		<Box sx={{ textAlign: 'center', padding: 5 }} className={ classNames( 'vip-blank-state-component', className ) }>
-			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt={imageAlt} />}
-			<Heading variant="h4">{title}</Heading>
-			<Text>{body}</Text>
-			<Box sx={{ mt: 3 }}>{cta}</Box>
+		<Box
+			sx={ { textAlign: 'center', padding: 5 } }
+			className={ classNames( 'vip-blank-state-component', className ) }
+		>
+			{ icon ? icon : <img src={ image } sx={ { mb: 3 } } alt={ imageAlt } /> }
+			<Heading variant="h4">{ title }</Heading>
+			<Text>{ body }</Text>
+			<Box sx={ { mt: 3 } }>{ cta }</Box>
 		</Box>
 	);
 };

package/src/system/BlankState/BlankState.stories.jsx

@@ -8,16 +8,17 @@ export default {
 	component: BlankState,
 };
 
-// eslint-disable-next-line max-len
-const 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";
+const 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";
 
 export const Default = () => (
 	<BlankState
-		image={image2}
+		image={ image2 }
 		title="Power up your application"
 		body="Add-ons give you the ability to bolt on extra capabilities to
 your application, including logging, analytics and performance
 monitoring."
-		cta={<Link as="a">Explore add-ons →</Link>}
+		cta={ <Link as="a">Explore add-ons →</Link> }
 	/>
 );

package/src/system/BlankState/BlankState.test.js

@@ -11,8 +11,8 @@ import { MdContentCopy } from 'react-icons/md';
 import { BlankState } from './BlankState';
 import { Link } from '../Link';
 
-// eslint-disable-next-line max-len
 const image =
+	// 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";
 
 const defaultProps = {
@@ -23,37 +23,37 @@ const defaultProps = {
 	title: 'Power up your application',
 };
 
-describe('<BlankState />', () => {
-	it('renders the BlankState component', async () => {
-		const { container } = render(<BlankState {...defaultProps} />);
+describe( '<BlankState />', () => {
+	it( 'renders the BlankState component', async () => {
+		const { container } = render( <BlankState { ...defaultProps } /> );
 
-		expect(screen.getByText(defaultProps.body)).toBeInTheDocument();
-		expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
-		expect(screen.getByText('Explore add-ons →')).toBeInTheDocument();
-		expect(screen.getByAltText(defaultProps.imageAlt)).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.body ) ).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.title ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Explore add-ons →' ) ).toBeInTheDocument();
+		expect( screen.getByAltText( defaultProps.imageAlt ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with default alt text for the given image', async () => {
+	it( 'renders the BlankState component with default alt text for the given image', async () => {
 		const props = { ...defaultProps, imageAlt: undefined };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByAltText('Image representing the blank state')).toBeInTheDocument();
+		expect( screen.getByAltText( 'Image representing the blank state' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 
-	it('renders the BlankState component with an icon', async () => {
+	it( 'renders the BlankState component with an icon', async () => {
 		const icon = <MdContentCopy title="this is an icon" />;
 		const props = { ...defaultProps, icon };
-		const { container } = render(<BlankState {...props} />);
+		const { container } = render( <BlankState { ...props } /> );
 
-		expect(screen.getByTitle('this is an icon')).toBeInTheDocument();
+		expect( screen.getByTitle( 'this is an icon' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect(await axe(container)).toHaveNoViolations();
-	});
-});
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/BlankState/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Box/Box.js

@@ -8,7 +8,13 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Box as ThemeBox } from 'theme-ui';
 
-const Box = forwardRef( ( props, ref ) => <ThemeBox ref={ref} className={ classNames( 'vip-box-component', props.className ) } {...props} /> );
+const Box = forwardRef( ( props, ref ) => (
+	<ThemeBox
+		ref={ ref }
+		className={ classNames( 'vip-box-component', props.className ) }
+		{ ...props }
+	/>
+) );
 
 Box.displayName = 'Box';
 Box.propTypes = {

package/src/system/Box/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Button/Button.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 
 const Button = ( { sx, ...props } ) => (
 	<ThemeButton
-		sx={{
+		sx={ {
 			verticalAlign: 'middle',
 			display: 'inline-flex',
 			alignItems: 'center',
@@ -22,9 +22,9 @@ const Button = ( { sx, ...props } ) => (
 				pointerEvents: 'all',
 			},
 			...sx,
-		}}
+		} }
 		className={ classNames( 'vip-button-component', props.className ) }
-		{...props}
+		{ ...props }
 	/>
 );
 

package/src/system/Button/Button.stories.jsx

@@ -15,8 +15,8 @@ export default {
 
 export const Default = () => (
 	<React.Fragment>
-		<Button sx={{ mr: 2 }}>Primary</Button>
-		<Button variant="secondary" sx={{ ml: 2 }}>
+		<Button sx={ { mr: 2 } }>Primary</Button>
+		<Button variant="secondary" sx={ { ml: 2 } }>
 			Secondary
 		</Button>
 	</React.Fragment>

package/src/system/Button/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Card/Card.js

@@ -15,15 +15,15 @@ import classNames from 'classnames';
 const Card = React.forwardRef( ( { variant = 'primary', sx = {}, className, ...props }, ref ) => {
 	return (
 		<Box
-			ref={ref}
-			sx={{
+			ref={ ref }
+			sx={ {
 				// pass variant prop to sx
 				variant: `cards.${ variant }`,
 				overflow: 'hidden',
 				...sx,
-			}}
+			} }
 			className={ classNames( 'vip-card-component', className ) }
-			{...props}
+			{ ...props }
 		/>
 	);
 } );

package/src/system/Card/Card.test.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
-import { MdContentCopy } from 'react-icons/md';
 
 /**
  * Internal dependencies

package/src/system/Card/index.js

@@ -1,4 +1,3 @@
-
 /**
  * Internal dependencies
  */

package/src/system/Code/Code.js

@@ -50,7 +50,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 			{ codeDom }
 			{
 				<button
-					aria-label="Copy"
+					aria-label="Copy code"
 					sx={ {
 						bg: 'grey.10',
 						borderTopRightRadius: 1,
@@ -79,7 +79,11 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 						}
 					} }
 				>
-					{ copied ? 'Copied!' : <MdContentCopy /> }
+					{ copied ? (
+						<span role="alert">Code copied to clipboard</span>
+					) : (
+						<MdContentCopy aria-hidden="true" />
+					) }
 				</button>
 			}
 		</div>

package/src/system/Code/Code.stories.jsx

@@ -17,11 +17,16 @@ export const Default = () => (
 	<React.Fragment>
 		<Code>Code</Code>
 		<br />
-		<Code showCopy={true}>Code with Icon</Code>
+		<Code showCopy={ true }>Code with Icon</Code>
 		<br />
-		<Code showCopy={true} onCopy={
-			// eslint-disable-next-line no-console
-			() => console.info( 'Hello world' )
-		}>Code with Icon and Click callback — console.info</Code>
+		<Code
+			showCopy={ true }
+			onCopy={
+				// eslint-disable-next-line no-console
+				() => console.info( 'Hello world' )
+			}
+		>
+			Code with Icon and Click callback — console.info
+		</Code>
 	</React.Fragment>
 );

package/src/system/Code/Code.test.js

@@ -3,7 +3,6 @@
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { axe } from 'jest-axe';
-import { MdContentCopy } from 'react-icons/md';
 
 /**
  * Internal dependencies
@@ -31,23 +30,11 @@ describe( '<Code />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
-	// jsdom currently doesn't support pseudo-elements with getComputedStyle
-	it.skip( 'renders "$" in front of the code when in prompt mode', async () => {
-		const props = { ...defaultProps, prompt: true };
-		const { container } = render( <Code { ...props }>This is a code</Code> );
-		const codeElement = screen.getByText( 'This is a code' );
-
-		expect( window.getComputedStyle( codeElement, ':before' ).content ).toEqual( '$' );
-
-		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
-
 	it( 'renders the Code component with a copy button', async () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		expect( screen.getByRole( 'button', { name: 'Copy' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Copy code' } ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
@@ -57,11 +44,11 @@ describe( '<Code />', () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Copy' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Copy code' } ) );
 
 		await waitFor( () => new Promise( res => setTimeout( res, 0 ) ) );
 
-		expect( screen.getByText( 'Copied!' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Code copied to clipboard' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();

package/src/system/ConfirmationDialog/ConfirmationDialog.js

@@ -12,7 +12,14 @@ import React from 'react';
  */
 import { Dialog, Box, Heading, Text, Flex, Button } from '../';
 
-const ConfirmationDialogContent = ( { title, body, onClose, label = 'Confirm', onConfirm, className = null } ) => (
+const ConfirmationDialogContent = ( {
+	title,
+	body,
+	onClose,
+	label = 'Confirm',
+	onConfirm,
+	className = null,
+} ) => (
 	<Box p={ 4 } className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Heading variant="h3" sx={ { mb: 2 } }>
 			{ title }

package/src/system/Dialog/Dialog.js

@@ -8,11 +8,18 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 
 /**
-* Internal dependencies
-*/
+ * Internal dependencies
+ */
 import { DialogContent, DialogTrigger } from '.';
 
-const Dialog = ( { trigger, position = 'left', startOpen = false, content, disabled = false, ...props } ) => {
+const Dialog = ( {
+	trigger,
+	position = 'left',
+	startOpen = false,
+	content,
+	disabled = false,
+	...props
+} ) => {
 	const [ isOpen, setIsOpen ] = useState( startOpen );
 	const dialogRef = useRef( null );
 
@@ -46,7 +53,12 @@ const Dialog = ( { trigger, position = 'left', startOpen = false, content, disab
 	};
 
 	return (
-		<div onClick={ e => e.stopPropagation() } sx={ { position: 'relative' } } ref={ dialogRef } className="vip-dialog-component">
+		<div
+			onClick={ e => e.stopPropagation() }
+			sx={ { position: 'relative' } }
+			ref={ dialogRef }
+			className="vip-dialog-component"
+		>
 			<DialogTrigger
 				tabIndex="0"
 				sx={ { display: 'inline' } }
@@ -73,10 +85,7 @@ Dialog.propTypes = {
 	disabled: PropTypes.bool,
 	position: PropTypes.string,
 	startOpen: PropTypes.bool,
-	content: PropTypes.oneOfType( [
-		PropTypes.node,
-		PropTypes.func,
-	] ),
+	content: PropTypes.oneOfType( [ PropTypes.node, PropTypes.func ] ),
 };
 
 export { Dialog };

package/src/system/Dialog/Dialog.stories.jsx

@@ -19,7 +19,7 @@ export default {
 };
 
 const DropdownTrigger = <Button>Trigger Dropdown</Button>;
-const ModalTrigger = <Button sx={{ mr: 3 }}>Trigger Modal</Button>;
+const ModalTrigger = <Button sx={ { mr: 3 } }>Trigger Modal</Button>;
 
 const DropdownContent = (
 	<div>
@@ -36,11 +36,11 @@ const DropdownContent = (
 );
 
 const ModalContent = (
-	<Box p={5}>
+	<Box p={ 5 }>
 		<Heading>This is a Modal</Heading>
-		<Text sx={{ fontSize: 3 }}>
-			A modal is used to perform more detailed actions that don&lsquo;t
-			necessarily need the context behind.
+		<Text sx={ { fontSize: 3 } }>
+			A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+			behind.
 		</Text>
 	</Box>
 );
@@ -49,16 +49,12 @@ export const Default = () => (
 	<Flex>
 		<Box>
 			<Dialog
-				trigger={ModalTrigger}
-				content={ModalContent}
-				sx={{ width: 480 }}
+				trigger={ ModalTrigger }
+				content={ ModalContent }
+				sx={ { width: 480 } }
 				variant="modal"
 			/>
 		</Box>
-		<Dialog
-			trigger={DropdownTrigger}
-			content={DropdownContent}
-			sx={{ width: 200 }}
-		/>
+		<Dialog trigger={ DropdownTrigger } content={ DropdownContent } sx={ { width: 200 } } />
 	</Flex>
 );