@automattic/vip-design-system 0.16.0 → 0.17.0

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewConfirmationDialog = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Confirm' : _ref$label,
+      onConfirm = _ref.onConfirm,
+      onClose = _ref.onClose,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
+    children: (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        justifyContent: 'flex-end',
+        mt: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Button, {
+        variant: "secondary",
+        sx: {
+          mr: 2
+        },
+        onClick: onClose,
+        children: "Cancel"
+      }), (0, _jsxRuntime.jsx)(_.NewDialog.Close, {
+        children: (0, _jsxRuntime.jsx)(_.Button, {
+          variant: "danger",
+          onClick: function onClick() {
+            onConfirm();
+            onClose();
+          },
+          children: label
+        })
+      })]
+    })
+  });
+};
+
+NewConfirmationDialogContent.propTypes = {
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
+};
+
+var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
+  var trigger = _ref2.trigger,
+      onConfirm = _ref2.onConfirm,
+      _ref2$needsConfirm = _ref2.needsConfirm,
+      needsConfirm = _ref2$needsConfirm === void 0 ? true : _ref2$needsConfirm,
+      label = _ref2.label,
+      title = _ref2.title,
+      _ref2$body = _ref2.body,
+      body = _ref2$body === void 0 ? '' : _ref2$body;
+
+  var _React$useState = _react["default"].useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var directTrigger = /*#__PURE__*/_react["default"].cloneElement(trigger, {
+    onClick: onConfirm
+  });
+
+  if (!needsConfirm) {
+    return directTrigger;
+  }
+
+  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, {
+    open: open,
+    onOpenChange: setOpen,
+    sx: {
+      maxWidth: 680
+    },
+    title: title,
+    description: body,
+    content: (0, _jsxRuntime.jsx)(NewConfirmationDialogContent, {
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      onConfirm: onConfirm,
+      body: body,
+      label: label
+    }),
+    trigger: trigger
+  });
+};
+
+exports.NewConfirmationDialog = NewConfirmationDialog;
+NewConfirmationDialog.propTypes = {
+  needsConfirm: _propTypes["default"].bool,
+  trigger: _propTypes["default"].node,
+  onConfirm: _propTypes["default"].func,
+  title: _propTypes["default"].node,
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].node
+};

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewConfirmationDialog',
+  component: _.NewConfirmationDialog
+};
+exports["default"] = _default;
+var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  sx: {
+    mr: 3
+  },
+  children: "Click to answer"
+});
+
+var Default = function Default() {
+  var _React$useState = _react["default"].useState('🤔'),
+      answer = _React$useState[0],
+      setAnswer = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      children: "Confirm that your name is John doe?"
+    }), (0, _jsxRuntime.jsx)(_.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\u2018t necessarily need the context behind.",
+      onConfirm: function onConfirm() {
+        return setAnswer('👍');
+      },
+      needsConfirm: true
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["Answer: ", answer]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/NewConfirmationDialog/NewConfirmationDialog.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultProps = {
+  needsConfirm: true,
+  title: 'My Custom Title',
+  body: 'My Custom Text',
+  label: 'Submit this!',
+  trigger: (0, _jsxRuntime.jsx)("button", {
+    children: "Trigger"
+  })
+};
+
+var getButton = function getButton() {
+  return _react.screen.getByText('Trigger');
+};
+
+var getConfirmButton = function getConfirmButton() {
+  return _react.screen.getByText(defaultProps.label);
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading', {
+    level: 2
+  });
+};
+
+describe('<NewConfirmationDialog />', function () {
+  it('renders the NewConfirmationDialog component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_NewConfirmationDialog.NewConfirmationDialog, (0, _extends2["default"])({}, defaultProps))), container = _render.container;
+            expect(getButton()).toBeInTheDocument();
+
+            _react.fireEvent.click(getButton());
+
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+            expect(getConfirmButton()).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context.t1 = _context.sent;
+            _context.next = 11;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewConfirmationDialog/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;

package/build/system/index.js

@@ -51,6 +51,10 @@ var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;
 
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;
+
 var _Flex = require("./Flex");
 
 exports.Flex = _Flex.Flex;

package/package.json

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

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

@@ -20,6 +20,7 @@ import {
 
 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,