Add material dialog

Author: ravichdev

package-lock.json

@@ -33,6 +33,7 @@
     "@material/checkbox": "5.1.0",
     "@material/circular-progress": "7.0.0",
     "@material/data-table": "5.1.0",
+    "@material/dialog": "10.0.0",
     "@material/drawer": "5.1.0",
     "@material/floating-label": "5.1.0",
     "@material/form-field": "5.1.0",

package.json

@@ -79,4 +79,8 @@
 		font-weight: 500;
 		margin-left: 10px;
 	}
+
+	.mdc-dialog .mdc-dialog__title {
+		margin-top: 0;
+	}
 }

plugin/assets/css/src/settings/base.css

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { MDCDialog } from '@material/dialog';
+import '@material/dialog/dist/mdc.dialog.css';
+
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+
+const Dialog = withInstanceId(
+	( { open = false, title, content, actions, instanceId } ) => {
+		const ref = useRef();
+
+		useEffect( () => {
+			if ( ! ref.current ) {
+				return;
+			}
+
+			const dialog = new MDCDialog( ref.current );
+
+			return () => {
+				dialog.destroy();
+			};
+		}, [] );
+
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				className={ classNames( 'mdc-dialog', { 'mdc-dialog--open': open } ) }
+				ref={ ref }
+			>
+				<div className="mdc-dialog__container">
+					<div
+						className="mdc-dialog__surface"
+						role="alertdialog"
+						aria-modal="true"
+						aria-labelledby={ `dialog-title-${ instanceId }` }
+						aria-describedby={ `dialog-content-${ instanceId }` }
+					>
+						{ title && (
+							<h2
+								className="mdc-dialog__title"
+								id={ `dialog-title-${ instanceId }` }
+							>
+								{ title }
+							</h2>
+						) }
+
+						{ content && (
+							<div
+								className="mdc-dialog__content"
+								id={ `dialog-content-${ instanceId }` }
+							>
+								{ content }
+							</div>
+						) }
+
+						{ actions && (
+							<div className="mdc-dialog__actions">{ actions }</div>
+						) }
+					</div>
+				</div>
+				<div className="mdc-dialog__scrim"></div>
+			</div>
+		);
+	}
+);
+
+export default Dialog;

plugin/assets/src/common/components/dialog/index.js

@@ -28,11 +28,13 @@ import SettingsContext from '../../context';
 import { ACTIONS, KEY_PLACEHOLDER } from '../../constants';
 import Button from '../../../wizard/components/navigation/button';
 import { setApiKey } from '../../utils';
+import Dialog from '../../../common/components/dialog';
 
 const Api = () => {
 	const { state, dispatch } = useContext( SettingsContext );
 	const [ api, setApi ] = useState( null );
 	const [ isLoading, setIsLoading ] = useState( false );
+	const [ confirm, setConfirm ] = useState( false );
 	const isApiOk = 'ok' === state.apiStatus;
 
 	const dispatchError = error =>
@@ -44,16 +46,17 @@ const Api = () => {
 	const removeApiKey = () => {
 		setIsLoading( true );
 		setApi( '' );
-
 		setApiKey( api )
 			.then( () => {
 				setIsLoading( false );
 				dispatch( { type: ACTIONS.REMOVE_API_KEY } );
+				setConfirm( false );
 			} )
 			.catch( error => {
 				dispatchError( error.message );
 				console.error( error );
 				setIsLoading( false );
+				setConfirm( false );
 			} );
 	};
 
@@ -86,6 +89,39 @@ const Api = () => {
 
 	return (
 		<div className="material-settings__api mdc-layout-grid">
+			<Dialog
+				open={ confirm }
+				title={ __( 'Remove Google API Key?', 'material-design' ) }
+				content={ __(
+					'This action is permanent and cannot be undone',
+					'material-design'
+				) }
+				actions={
+					<>
+						<button
+							type="button"
+							className="mdc-button mdc-dialog__button"
+							onClick={ () => setConfirm( false ) }
+						>
+							<div className="mdc-button__ripple"></div>
+							<span className="mdc-button__label">
+								{ __( 'Cancel', 'material-design' ) }
+							</span>
+						</button>
+						<button
+							type="button"
+							className="mdc-button mdc-dialog__button"
+							onClick={ removeApiKey }
+						>
+							<div className="mdc-button__ripple"></div>
+							<span className="mdc-button__label">
+								{ __( 'Remove', 'material-design' ) }
+							</span>
+						</button>
+					</>
+				}
+			/>
+
 			<div className="mdc-layout-grid__inner">
 				{ ! isApiOk && (
 					<TextControl
@@ -122,7 +158,7 @@ const Api = () => {
 						<Button
 							text={ __( 'Remove', 'material-design' ) }
 							leadingIcon="delete"
-							onClick={ removeApiKey }
+							onClick={ () => setConfirm( true ) }
 							loading={ isLoading }
 						/>
 					) }