@automattic/vip-design-system 0.14.2 → 0.17.0

package/build/system/theme/getColor.js

@@ -5,39 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.getColor = void 0;
 
-var _valetColor = _interopRequireDefault(require("../../../tokens/valet-color.json"));
+var _valetTheme = _interopRequireDefault(require("./generated/valet-theme.json"));
 
 /**
  * Internal dependencies
  */
-var ThemeColors = _valetColor["default"]['productive-color-wpvip'];
-var CoreColors = _valetColor["default"]['valet-core'];
-
 var getColor = function getColor(color, variant) {
   if (variant === void 0) {
     variant = 'default';
   }
 
-  if (!ThemeColors[color]) {
+  if (!_valetTheme["default"][color]) {
     return '#000000';
   }
 
-  var colorValue = ThemeColors[color][variant].value;
-
-  if (colorValue.startsWith('{')) {
-    var _colorValue$replace$s = colorValue.replace(/[{}]/g, '').split('.'),
-        name = _colorValue$replace$s[0],
-        number = _colorValue$replace$s[1]; // Some colors are flat, there is no sub values.
-
-
-    if (CoreColors[name][number]) {
-      return CoreColors[name][number].value;
-    }
-
-    return CoreColors[name].value;
-  }
-
-  return colorValue;
+  return _valetTheme["default"][color][variant].value;
 };
 
 exports.getColor = getColor;

package/build/system/theme/index.js

@@ -65,7 +65,7 @@ var outline = {
   outlineStyle: 'solid',
   outlineColor: '#ffffff',
   outlineWidth: '1px',
-  boxShadow: "0 0 0 1px #fff, 0 0 0 3px " + (0, _getColor.getColor)('focus')
+  boxShadow: "0 0 0 1px " + (0, _getColor.getColor)('focus', 'inset') + ", 0 0 0 3px " + (0, _getColor.getColor)('focus')
 };
 var _default = {
   outline: outline,

package/package.json

@@ -1,15 +1,17 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.14.2",
+	"version": "0.17.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
-		"build": "cross-env NODE_ENV=production babel src --out-dir build",
+		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build && npm run theme-builder-copy",
 		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
-		"format:check": "prettier --list-different -- \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
+		"format:check": "prettier --list-different -- \"src/system/**/*.{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",
+		"theme-builder-copy": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme.json build/system/theme/generated/valet-theme.json",
+		"theme-update": "token-transformer tokens/valet-core.json src/system/theme/generated/valet-theme.json valet-core,productive-color-wpvip",
 		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",
@@ -18,7 +20,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^0.1.5",
-		"@radix-ui/react-dialog": "^0.1.7",
+		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-radio-group": "^0.1.5",
 		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.7",
@@ -121,6 +123,7 @@
 		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",
 		"react-refresh": "^0.9.0",
-		"theme-ui": "0.10.0"
+		"theme-ui": "0.10.0",
+		"token-transformer": "^0.0.24"
 	}
 }

package/src/system/Button/Button.js

@@ -3,11 +3,12 @@
 /**
  * External dependencies
  */
-import { Button as ThemeButton } from 'theme-ui';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Button as ThemeButton } from 'theme-ui';
 
-const Button = ( { sx, ...props } ) => (
+const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
 	<ThemeButton
 		sx={ {
 			verticalAlign: 'middle',
@@ -27,8 +28,11 @@ const Button = ( { sx, ...props } ) => (
 		} }
 		className={ classNames( 'vip-button-component', props.className ) }
 		{ ...props }
+		ref={ forwardRef }
 	/>
-);
+) );
+
+Button.displayName = 'Button';
 
 Button.propTypes = {
 	sx: PropTypes.object,

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -0,0 +1,93 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { NewDialog, Box, Flex, Button } from '..';
+
+const NewConfirmationDialogContent = ( {
+	label = 'Confirm',
+	onConfirm,
+	onClose,
+	className = null,
+} ) => (
+	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
+		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
+			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+				Cancel
+			</Button>
+			<NewDialog.Close>
+				<Button
+					variant="danger"
+					onClick={ () => {
+						onConfirm();
+						onClose();
+					} }
+				>
+					{ label }
+				</Button>
+			</NewDialog.Close>
+		</Flex>
+	</Box>
+);
+
+NewConfirmationDialogContent.propTypes = {
+	body: PropTypes.node,
+	label: PropTypes.string,
+	onClose: PropTypes.func,
+	onConfirm: PropTypes.func,
+	className: PropTypes.any,
+};
+
+const NewConfirmationDialog = ( {
+	trigger,
+	onConfirm,
+	needsConfirm = true,
+	label,
+	title,
+	body = '',
+} ) => {
+	const [ open, setOpen ] = React.useState( false );
+	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
+
+	if ( ! needsConfirm ) {
+		return directTrigger;
+	}
+
+	return (
+		<NewDialog.Root
+			open={ open }
+			onOpenChange={ setOpen }
+			sx={ { maxWidth: 680 } }
+			title={ title }
+			description={ body }
+			content={
+				<NewConfirmationDialogContent
+					onClose={ () => setOpen( false ) }
+					onConfirm={ onConfirm }
+					body={ body }
+					label={ label }
+				/>
+			}
+			trigger={ trigger }
+		/>
+	);
+};
+
+NewConfirmationDialog.propTypes = {
+	needsConfirm: PropTypes.bool,
+	trigger: PropTypes.node,
+	onConfirm: PropTypes.func,
+	title: PropTypes.node,
+	body: PropTypes.node,
+	label: PropTypes.node,
+};
+
+export { NewConfirmationDialog };

package/src/system/NewConfirmationDialog/NewConfirmationDialog.stories.jsx

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import React from 'react';
+import { Box, NewConfirmationDialog, Button } from '..';
+
+export default {
+	title: 'NewConfirmationDialog',
+	component: NewConfirmationDialog,
+};
+
+const ConfirmationTrigger = <Button sx={ { mr: 3 } }>Click to answer</Button>;
+
+export const Default = () => {
+	const [ answer, setAnswer ] = React.useState( '🤔' );
+	return (
+		<Box>
+			<p>Confirm that your name is John doe?</p>
+			<NewConfirmationDialog
+				title={ 'Are you John Doe?' }
+				description={ 'Please confirm that your name is John Doe.' }
+				trigger={ ConfirmationTrigger }
+				body="A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+					behind."
+				onConfirm={ () => setAnswer( '👍' ) }
+				needsConfirm={ true }
+			/>
+
+			<p>Answer: { answer }</p>
+		</Box>
+	);
+};

package/src/system/NewConfirmationDialog/NewConfirmationDialog.test.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+
+const defaultProps = {
+	needsConfirm: true,
+	title: 'My Custom Title',
+	body: 'My Custom Text',
+	label: 'Submit this!',
+	trigger: <button>Trigger</button>,
+};
+
+const getButton = () => screen.getByText( 'Trigger' );
+const getConfirmButton = () => screen.getByText( defaultProps.label );
+const getTitle = () => screen.getByRole( 'heading', { level: 2 } );
+
+describe( '<NewConfirmationDialog />', () => {
+	it( 'renders the NewConfirmationDialog component', async () => {
+		const { container } = render( <NewConfirmationDialog { ...defaultProps } /> );
+
+		expect( getButton() ).toBeInTheDocument();
+
+		fireEvent.click( getButton() );
+
+		expect( getTitle() ).toHaveTextContent( defaultProps.title );
+
+		expect( getConfirmButton() ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewConfirmationDialog/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+
+export { NewConfirmationDialog };

package/src/system/NewDialog/DialogClose.js

@@ -4,14 +4,28 @@
  * External dependencies
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 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 }>
+
+export const DialogClose = React.forwardRef( ( { children, ...rest }, forwardedRef ) => (
+	<DialogPrimitive.Close asChild { ...rest } ref={ forwardedRef }>
+		{ children }
+	</DialogPrimitive.Close>
+) );
+
+DialogClose.propTypes = {
+	children: PropTypes.node,
+};
+
+DialogClose.displayName = 'DialogClose';
+
+export const DialogCloseDefault = React.forwardRef( ( props, forwardedRef ) => (
+	<DialogClose { ...props } ref={ forwardedRef }>
 		<button
 			aria-label="Close"
 			sx={ {
@@ -40,7 +54,7 @@ export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
 		>
 			<IoClose aria-hidden="true" />
 		</button>
-	</DialogPrimitive.Close>
+	</DialogClose>
 ) );
 
-DialogClose.displayName = 'DialogClose';
+DialogCloseDefault.displayName = 'DialogCloseDefault';

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

@@ -8,7 +8,7 @@ import { axe } from 'jest-axe';
 /**
  * Internal dependencies
  */
-import { DialogClose } from './DialogClose';
+import { DialogCloseDefault as 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 } />;

package/src/system/NewDialog/DialogDescription.js

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 /**
  * Internal dependencies

package/src/system/NewDialog/DialogTitle.js

@@ -5,7 +5,7 @@
  */
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 /**
  * Internal dependencies

package/src/system/NewDialog/NewDialog.js

@@ -9,7 +9,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
  * Internal dependencies
  */
 import { DialogOverlay } from './DialogOverlay';
-import { DialogClose } from './DialogClose';
+import { DialogCloseDefault as DialogClose } from './DialogClose';
 import { DialogTitle } from './DialogTitle';
 import { DialogDescription } from './DialogDescription';
 import { contentStyles } from './DialogContent';
@@ -26,18 +26,22 @@ export const NewDialog = ( {
 	// Radix Specific Properties
 	defaultOpen = false,
 	allowPinchZoom = false,
-	onOpenAutoFocus = null,
-	onCloseAutoFocus = null,
-	onEscapeKeyDown = null,
-	onPointerDownOutside = null,
-	onInteractOutside = null,
+	onOpenChange = undefined,
+	open = undefined,
+	id = undefined,
 } ) => {
 	if ( disabled ) {
 		return;
 	}
 
 	return (
-		<DialogPrimitive.Root defaultOpen={ defaultOpen } allowPinchZoom={ allowPinchZoom }>
+		<DialogPrimitive.Root
+			id={ id }
+			open={ open }
+			onOpenChange={ onOpenChange }
+			defaultOpen={ defaultOpen }
+			allowPinchZoom={ allowPinchZoom }
+		>
 			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
 
 			<DialogPrimitive.Portal>
@@ -46,11 +50,6 @@ export const NewDialog = ( {
 				<DialogPrimitive.Content
 					className="vip-dialog-component"
 					sx={ { ...contentStyles, ...extraStyles } }
-					onOpenAutoFocus={ onOpenAutoFocus }
-					onCloseAutoFocus={ onCloseAutoFocus }
-					onEscapeKeyDown={ onEscapeKeyDown }
-					onPointerDownOutside={ onPointerDownOutside }
-					onInteractOutside={ onInteractOutside }
 				>
 					<DialogClose />
 					<DialogTitle title={ title } hidden={ ! showHeading } />
@@ -74,14 +73,9 @@ NewDialog.propTypes = {
 
 	// Radix DialogPrimitive.Root properties
 	// https://www.radix-ui.com/docs/primitives/components/dialog#root
+	id: PropTypes.string,
+	open: PropTypes.bool,
 	defaultOpen: PropTypes.bool,
 	allowPinchZoom: PropTypes.bool,
-
-	// Radix DialogPrimitive.Content properties
-	// https://www.radix-ui.com/docs/primitives/components/dialog#content
-	onOpenAutoFocus: PropTypes.func,
-	onCloseAutoFocus: PropTypes.func,
-	onEscapeKeyDown: PropTypes.func,
-	onPointerDownOutside: PropTypes.func,
-	onInteractOutside: PropTypes.func,
+	onOpenChange: PropTypes.func,
 };

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -1,16 +1,21 @@
 /** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
 /**
 /**
  * Internal dependencies
  */
 import { Button, Text, Input, Label } from '../../system';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
-import { NewDialog } from './NewDialog';
+import ScreenReaderText from '../ScreenReaderText';
+import * as NewDialog from '.';
 
 export default {
 	title: 'NewDialog',
-	component: NewDialog,
+	component: NewDialog.Root,
 };
 
 const defaultProps = {
@@ -24,14 +29,14 @@ export const Default = () => (
 			Regular Dialog where the title and description are built-in and the content is provided by the
 			user.
 		</Text>
-		<NewDialog { ...defaultProps } trigger={ <Button>Trigger Dialog</Button> } />
+		<NewDialog.Root { ...defaultProps } trigger={ <Button>Trigger Dialog</Button> } />
 	</>
 );
 
 export const AutoOpen = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Auto Opens when rendered. Press escape to close it.</Text>
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			defaultOpen={ true }
 			content={
@@ -61,7 +66,7 @@ export const HiddenHeadings = () => (
 			dialog content.
 		</Text>
 
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			trigger={ <Button>Trigger Dialog</Button> }
 			title="Custom dialog title"
@@ -88,7 +93,7 @@ export const CustomStyling = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
 
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			defaultOpen
 			trigger={ <Button>Trigger Dialog</Button> }
@@ -112,3 +117,46 @@ export const CustomStyling = () => (
 		/>
 	</>
 );
+
+export const CustomClose = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>
+			This example shows how you can create a custom Close trigger to your dialog
+		</Text>
+		<NewDialog.Root
+			{ ...defaultProps }
+			trigger={ <Button>Trigger Dialog</Button> }
+			content={
+				<div>
+					<NewDialog.Close>
+						<Button>Close here instead</Button>
+					</NewDialog.Close>
+				</div>
+			}
+		/>
+	</>
+);
+export const CustomStateManagement = () => {
+	const [ open, setOpen ] = useState( false );
+	return (
+		<>
+			<Text sx={ { fontSize: 3, mb: 3 } }>
+				This example shows how you can create a custom state management. To achieve accessibility,
+				you need to control the <strong>open</strong> state, but also keep consistency using the{ ' ' }
+				<strong>onOpenChange</strong> attribute.
+			</Text>
+
+			<NewDialog.Root
+				{ ...defaultProps }
+				open={ open }
+				onOpenChange={ setOpen }
+				trigger={ <Button>Trigger Dialog</Button> }
+				content={
+					<div>
+						<Button onClick={ () => setOpen( false ) }>Close here instead</Button>
+					</div>
+				}
+			/>
+		</>
+	);
+};

package/src/system/NewDialog/index.js

@@ -2,6 +2,12 @@
  * Internal dependencies
  */
 
+import { DialogClose } from './DialogClose';
 import { NewDialog } from './NewDialog';
 
-export { NewDialog };
+const Root = NewDialog;
+const Close = DialogClose;
+
+export { NewDialog, Root, Close };
+
+export default NewDialog;

package/src/system/Notification/Notification.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Box, Card, Flex, Text, Button } from '../';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card

package/src/system/ScreenReaderText/ScreenReader.test.js

@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 /**
  * Internal dependencies
  */
-import ScreenReaderText from './ScreenReaderText';
+import ScreenReaderText from '.';
 
 describe( '<ScreenReaderText />', () => {
 	it( 'should render correctly', () => {

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -3,34 +3,36 @@
  * External dependencies
  */
 
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 
-export default function ScreenReaderText( props ) {
-	return (
-		<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 }
-		>
-			{ props.children }
-		</span>
-	);
-}
+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 }
+	>
+		{ props.children }
+	</span>
+) );
+
+ScreenReaderText.displayName = 'ScreenReaderText';
 
 /**
  * propTypes

package/src/system/ScreenReaderText/index.js

@@ -5,3 +5,5 @@
 import { ScreenReaderText } from './ScreenReaderText';
 
 export { ScreenReaderText };
+
+export default ScreenReaderText;

package/src/system/index.js

@@ -18,8 +18,9 @@ import {
 	DialogContent,
 } from './Dialog';
 
-import { NewDialog } from './NewDialog';
+import * as NewDialog from './NewDialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { NewConfirmationDialog } from './NewConfirmationDialog';
 import { Flex } from './Flex';
 import {
 	Input,
@@ -70,6 +71,7 @@ export {
 	DialogContent,
 	DialogTrigger,
 	ConfirmationDialog,
+	NewConfirmationDialog,
 	Grid,
 	Flex,
 	Notice,