@automattic/vip-design-system 0.12.0 → 0.13.0

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

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { Dialog } from '@radix-ui/react-dialog';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { DialogDescription } from './DialogDescription';
+
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+const Wrapper = props => <Dialog open={ true } { ...props } />;
+const defaultProps = {
+	description: 'My Custom Text',
+};
+
+const getParagraph = () => screen.getByText( defaultProps.description );
+
+describe( '<DialogDescription />', () => {
+	it( 'renders the DialogDescription component', async () => {
+		const { container } = render(
+			<Wrapper>
+				<DialogDescription { ...defaultProps } />
+			</Wrapper>
+		);
+
+		expect( getParagraph() ).toHaveTextContent( defaultProps.description );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders text visually hidden for a11y purposes', async () => {
+		const { container } = render(
+			<Wrapper>
+				<DialogDescription { ...defaultProps } hidden={ true } />
+			</Wrapper>
+		);
+
+		// Small check to make sure we are hiding with the css class
+		expect( container.innerHTML ).toContain( 'screen-reader-text' );
+
+		expect( getParagraph() ).toHaveTextContent( defaultProps.description );
+	} );
+} );

package/src/system/NewDialog/DialogOverlay.js

@@ -0,0 +1,31 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import * as Dialog from '@radix-ui/react-dialog';
+
+export const DialogOverlay = React.forwardRef( ( props, forwardedRef ) => (
+	<Dialog.Overlay
+		sx={ {
+			position: 'fixed',
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			inset: 0,
+			opacity: 0.7,
+			background:
+				// eslint-disable-next-line max-len
+				'linear-gradient(198.09deg,#E5F0F6 2.01%, rgba(235, 238, 242, 0) 43.18%,rgba(249, 234, 232, 0) 47.86%, #FFE9D1 94.31%), linear-gradient(98.65deg, #FFE8E6 0.58%, rgba(255, 233, 214, 0) 52.45%, rgba(255, 233, 219, 0) 53.76%,#FFE9D1 105.86%), #F5F2F1',
+		} }
+		{ ...props }
+		ref={ forwardedRef }
+	/>
+) );
+
+DialogOverlay.displayName = 'DialogOverlay';

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

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

package/src/system/NewDialog/DialogTitle.js

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+
+/**
+ * Internal dependencies
+ */
+
+export const DialogTitle = ( { title, hidden = false } ) => {
+	let titleNode = title;
+
+	if ( hidden ) {
+		titleNode = <ScreenReaderText>{ titleNode }</ScreenReaderText>;
+	}
+
+	return <DialogPrimitive.Title>{ titleNode }</DialogPrimitive.Title>;
+};
+
+DialogTitle.propTypes = {
+	title: PropTypes.string,
+	hidden: PropTypes.bool,
+};

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { Dialog } from '@radix-ui/react-dialog';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { DialogTitle } from './DialogTitle';
+
+// 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 DialogTitle',
+};
+
+const getTitle = () => screen.getByRole( 'heading' );
+
+describe( '<DialogTitle />', () => {
+	it( 'renders the DialogTitle component', async () => {
+		const { container } = render(
+			<Wrapper>
+				<DialogTitle { ...defaultProps } />
+			</Wrapper>
+		);
+
+		expect( getTitle() ).toHaveTextContent( defaultProps.title );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders text visually hidden for a11y purposes', async () => {
+		const { container } = render(
+			<Wrapper>
+				<DialogTitle { ...defaultProps } hidden={ true } />
+			</Wrapper>
+		);
+
+		// Small check to make sure we are hiding with the css class
+		expect( container.innerHTML ).toContain( 'screen-reader-text' );
+
+		expect( getTitle() ).toHaveTextContent( defaultProps.title );
+	} );
+} );

package/src/system/NewDialog/NewDialog.js

@@ -0,0 +1,87 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+/**
+ * Internal dependencies
+ */
+import { DialogOverlay } from './DialogOverlay';
+import { DialogClose } from './DialogClose';
+import { DialogTitle } from './DialogTitle';
+import { DialogDescription } from './DialogDescription';
+import { contentStyles } from './DialogContent';
+
+export const NewDialog = ( {
+	trigger = null,
+	description,
+	title,
+	content = null,
+	showHeading = true,
+	disabled = false,
+	style: extraStyles,
+
+	// Radix Specific Properties
+	defaultOpen = false,
+	allowPinchZoom = false,
+	onOpenAutoFocus = null,
+	onCloseAutoFocus = null,
+	onEscapeKeyDown = null,
+	onPointerDownOutside = null,
+	onInteractOutside = null,
+} ) => {
+	if ( disabled ) {
+		return;
+	}
+
+	return (
+		<DialogPrimitive.Root defaultOpen={ defaultOpen } allowPinchZoom={ allowPinchZoom }>
+			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
+
+			<DialogPrimitive.Portal>
+				<DialogOverlay />
+
+				<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 } />
+					<DialogDescription description={ description } hidden={ ! showHeading } />
+
+					{ content }
+				</DialogPrimitive.Content>
+			</DialogPrimitive.Portal>
+		</DialogPrimitive.Root>
+	);
+};
+
+NewDialog.propTypes = {
+	trigger: PropTypes.node.isRequired,
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	content: PropTypes.node,
+	showHeading: PropTypes.bool,
+	disabled: PropTypes.bool,
+	style: PropTypes.oneOfType( [ PropTypes.object, PropTypes.func ] ),
+
+	// Radix DialogPrimitive.Root properties
+	// https://www.radix-ui.com/docs/primitives/components/dialog#root
+	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,
+};

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

@@ -0,0 +1,96 @@
+/** @jsxImportSource theme-ui */
+
+/**
+/**
+ * Internal dependencies
+ */
+import { Button, Text, Input, Label } from '../../system';
+import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import { NewDialog } from './NewDialog';
+
+export default {
+	title: 'NewDialog',
+	component: NewDialog,
+};
+
+const defaultProps = {
+	title: 'User settings',
+	description: 'Use this form to manage your settings',
+};
+
+export const Default = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>
+			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> } />
+	</>
+);
+
+export const AutoOpen = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>Auto Opens when rendered. Press escape to close it.</Text>
+		<NewDialog
+			{ ...defaultProps }
+			defaultOpen={ true }
+			trigger={ <ScreenReaderText>hey</ScreenReaderText> }
+		/>
+	</>
+);
+
+export const HiddenHeadings = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>
+			Title and description are hidden, but still announced using a screen reader. Activate
+			VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the
+			dialog content.
+		</Text>
+
+		<NewDialog
+			{ ...defaultProps }
+			trigger={ <Button>Trigger Dialog</Button> }
+			title="Custom dialog title"
+			showHeading={ false }
+			content={
+				<div>
+					<h3>My Custom Content</h3>
+
+					<form>
+						<Label htmlFor="username">User name</Label>
+						<Input type="text" name="username" id="username" />
+						<Button type="submit">Submit</Button>
+					</form>
+				</div>
+			}
+		/>
+	</>
+);
+export const CustomStyling = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
+
+		<NewDialog
+			{ ...defaultProps }
+			defaultOpen
+			trigger={ <Button>Trigger Dialog</Button> }
+			title="Custom dialog title"
+			style={ {
+				background: theme => `${ theme.colors.primary }`,
+				padding: 5,
+				borderRadius: 20,
+				h2: { fontSize: 4, color: theme => `${ theme.colors.text }` },
+				h3: { fontSize: 3, color: theme => `${ theme.colors.heading }` },
+				p: { color: 'white' },
+				'button[type="button"]:focus': { outlineColor: 'white', color: 'white' },
+			} }
+			content={
+				<div>
+					<h3>This is Read because it is Custom</h3>
+
+					<p>This Dialog is styled using the `sx` property.</p>
+				</div>
+			}
+		/>
+	</>
+);

package/src/system/NewDialog/index.js

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

package/src/system/Notice/Notice.js

@@ -27,7 +27,7 @@ const NoticeIcon = ( { color, variant } ) => {
 			break;
 	}
 
-	return <Icon sx={ { marginRight: 2, color, flex: '0 0 auto' } } />;
+	return <Icon sx={ { color, flex: '0 0 auto' } } size={ 21 } />;
 };
 
 NoticeIcon.propTypes = {
@@ -86,10 +86,10 @@ const Notice = ( {
 						alignItems: 'center',
 					} }
 				>
-					<NoticeIcon color={ `${ color }.100` } variant={ variant } />
+					<NoticeIcon color={ `${ color }.200` } variant={ variant } />
 				</Flex>
 
-				<Box sx={ { ml: 23 } }>
+				<Box sx={ { ml: 3 } }>
 					{ title && (
 						<Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>
 							{ title }

package/src/system/index.js

@@ -17,6 +17,8 @@ import {
 	DialogTrigger,
 	DialogContent,
 } from './Dialog';
+
+import { NewDialog } from './NewDialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { Flex } from './Flex';
 import {
@@ -60,6 +62,7 @@ export {
 	Checkbox,
 	Code,
 	Dialog,
+	NewDialog,
 	DialogButton,
 	DialogMenu,
 	DialogMenuItem,