Update modal dialog

assets/js/components/ModalDialog.js

@@ -20,6 +20,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -39,18 +40,22 @@ import {
 	DialogTitle,
 	SpinnerButton,
 } from 'googlesitekit-components';
+import ExclamationIcon from '../../svg/icons/warning.svg';
 
 function ModalDialog( {
-	dialogActive,
-	handleDialog,
-	title,
+	className = '',
+	dialogActive = false,
+	handleDialog = null,
+	title = null,
 	provides,
 	handleConfirm,
 	subtitle,
-	confirmButton,
+	confirmButton = null,
 	dependentModules,
-	danger,
+	danger = false,
 	inProgress = false,
+	small = false,
+	medium = false,
 } ) {
 	const instanceID = useInstanceId( ModalDialog );
 	const describedByID = `googlesitekit-dialog-description-${ instanceID }`;
@@ -61,8 +66,15 @@ function ModalDialog( {
 			open={ dialogActive }
 			aria-describedby={ hasProvides ? describedByID : undefined }
 			tabIndex="-1"
+			className={ classnames( className, {
+				'googlesitekit-dialog-sm': small,
+				'googlesitekit-dialog-md': medium,
+			} ) }
 		>
-			<DialogTitle>{ title }</DialogTitle>
+			<DialogTitle>
+				{ danger && <ExclamationIcon width={ 28 } height={ 28 } /> }
+				{ title }
+			</DialogTitle>
 			{
 				// Ensure we don't render anything at all if subtitle is falsy, as Dialog expects all its children to be elements and a falsy value will result in an error.
 				subtitle ? <p className="mdc-dialog__lead">{ subtitle }</p> : []
@@ -103,6 +115,14 @@ function ModalDialog( {
 				) }
 			</DialogContent>
 			<DialogFooter>
+				<Button
+					className="mdc-dialog__cancel-button"
+					tertiary
+					onClick={ handleDialog }
+					disabled={ inProgress }
+				>
+					{ __( 'Cancel', 'google-site-kit' ) }
+				</Button>
 				<SpinnerButton
 					onClick={ handleConfirm }
 					danger={ danger }
@@ -111,14 +131,6 @@ function ModalDialog( {
 				>
 					{ confirmButton || __( 'Disconnect', 'google-site-kit' ) }
 				</SpinnerButton>
-				<Button
-					className="googlesitekit-margin-left-auto mdc-dialog__cancel-button"
-					tertiary
-					onClick={ handleDialog }
-					disabled={ inProgress }
-				>
-					{ __( 'Cancel', 'google-site-kit' ) }
-				</Button>
 			</DialogFooter>
 		</Dialog>
 	);
@@ -127,22 +139,15 @@ function ModalDialog( {
 ModalDialog.displayName = 'Dialog';
 
 ModalDialog.propTypes = {
+	className: PropTypes.string,
 	dialogActive: PropTypes.bool,
 	handleDialog: PropTypes.func,
 	handleConfirm: PropTypes.func.isRequired,
 	title: PropTypes.string,
-	description: PropTypes.string,
 	confirmButton: PropTypes.string,
 	danger: PropTypes.bool,
-};
-
-ModalDialog.defaultProps = {
-	dialogActive: false,
-	handleDialog: null,
-	title: null,
-	description: null,
-	confirmButton: null,
-	danger: false,
+	small: PropTypes.bool,
+	medium: PropTypes.bool,
 };
 
 export default ModalDialog;

assets/js/components/ModalDialog.stories.js

@@ -21,32 +21,76 @@
  */
 import ModalDialog from './ModalDialog';
 
-function Template() {
-	return (
-		<ModalDialog
-			dialogActive
-			title="Modal Dialog Title"
-			subtitle="Modal Dialog Subtitle"
-			provides={ [
-				'Audience overview',
-				'Top pages',
-				'Top acquisition channels',
-			] }
-			handleConfirm={ global.console.log.bind(
-				null,
-				'Dialog::handleConfirm'
-			) }
-			danger
-		/>
-	);
+const defaultArgs = {
+	dialogActive: true,
+	title: 'Modal Dialog Title',
+	subtitle:
+		'Modal Dialog Subtitle. It will adjust the width based on default value.',
+	handleConfirm: () =>
+		global.console.log.bind( null, 'Dialog::handleConfirm' ),
+};
+
+function Template( args ) {
+	return <ModalDialog { ...args } />;
 }
 
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
+Default.args = defaultArgs;
 Default.scenario = {
 	label: 'Global/ModalDialog',
 };
 
+export const Danger = Template.bind( {} );
+Danger.storyName = 'Danger';
+Danger.args = {
+	...defaultArgs,
+	title: 'Danger/Error Modal Dialog Title',
+	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
+	danger: true,
+};
+Danger.scenario = {
+	label: 'Global/ModalDialog/Danger',
+};
+
+export const DependentModules = Template.bind( {} );
+DependentModules.storyName = 'Danger With DependentModules Text';
+DependentModules.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	dependentModules: 'Depend modules text',
+	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
+	danger: true,
+};
+DependentModules.scenario = {
+	label: 'Global/ModalDialog/DangerWithDependentModules',
+};
+
+export const SmallModal = Template.bind( {} );
+SmallModal.storyName = 'Small Width Modal';
+SmallModal.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	small: true,
+};
+SmallModal.scenario = {
+	label: 'Global/ModalDialog/Small',
+};
+
+export const MediumModal = Template.bind( {} );
+MediumModal.storyName = 'Medium Width Modal';
+MediumModal.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	medium: true,
+};
+MediumModal.scenario = {
+	label: 'Global/ModalDialog/Medium',
+};
+
 export default {
 	title: 'Global/Modal Dialog',
 	component: ModalDialog,

assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js

@@ -127,6 +127,7 @@ function AuthenticatedPermissionsModal() {
 				dialogActive
 				handleConfirm={ onConfirm }
 				handleDialog={ onCancel }
+				medium
 			/>
 		</Portal>
 	);

assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.stories.js

@@ -0,0 +1,61 @@
+/**
+ * AuthenticatedPermissionsModal Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 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
+ *
+ *     https://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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import AuthenticatedPermissionsModal from './AuthenticatedPermissionsModal';
+import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { provideUserAuthentication } from '../../../../tests/js/utils';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+
+function Template() {
+	return <AuthenticatedPermissionsModal />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'AuthenticatedPermissionsModal';
+Default.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			registry.dispatch( CORE_USER ).receiveConnectURL( 'test-url' );
+			registry.dispatch( CORE_USER ).setPermissionScopeError( {
+				status: 500,
+				message:
+					'You’ll need to contact your administrator. Trouble getting access?',
+				data: {
+					scopes: [
+						'https://www.googleapis.com/auth/analytics.readonly',
+					],
+				},
+			} );
+			provideUserAuthentication( registry );
+		};
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+
+export default {
+	title: 'Components/AuthenticatedPermissionsModal',
+	component: AuthenticatedPermissionsModal,
+};

assets/js/components/ResetButton.js

@@ -138,6 +138,7 @@ function ResetButton( { children } ) {
 					) }
 					confirmButton={ __( 'Reset', 'google-site-kit' ) }
 					danger
+					small
 					inProgress={ inProgress }
 				/>
 			</Portal>

stories/reset-button.stories.js → assets/js/components/ResetButton.stories.js

@@ -1,7 +1,7 @@
 /**
  * Reset Button stories.
  *
- * Site Kit by Google, Copyright 2021 Google LLC
+ * Site Kit by Google, Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,24 +16,37 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import { storiesOf } from '@storybook/react';
-
 /**
  * Internal dependencies
  */
-import ResetButton from '../assets/js/components/ResetButton';
-import { provideSiteInfo, WithTestRegistry } from '../tests/js/utils';
+import ResetButton from './ResetButton';
+import {
+	WithTestRegistry,
+	createTestRegistry,
+	provideSiteInfo,
+} from '../../../tests/js/utils';
+
+function Template() {
+	return <ResetButton>Reset Site Kit Button</ResetButton>;
+}
 
-storiesOf( 'Global', module ).add( 'Reset Button', () => {
-	const setupRegistry = ( registry ) => {
+export const Default = Template.bind( {} );
+Default.storyName = 'ResetButton';
+
+Default.decorators = [
+	( Story ) => {
+		const registry = createTestRegistry();
 		provideSiteInfo( registry );
-	};
-	return (
-		<WithTestRegistry callback={ setupRegistry }>
-			<ResetButton>Reset Site Kit Button</ResetButton>
-		</WithTestRegistry>
-	);
-} );
+
+		return (
+			<WithTestRegistry registry={ registry }>
+				<Story />
+			</WithTestRegistry>
+		);
+	},
+];
+
+export default {
+	title: 'Components/ResetButton',
+	component: ResetButton,
+};

assets/js/components/ResetButton.test.js

@@ -133,7 +133,7 @@ describe( 'ResetButton', () => {
 			// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
 			expect(
 				document.querySelector( '.mdc-dialog' ).classList.length
-			).toBe( 1 );
+			).toBe( 2 );
 		} );
 
 		it( 'should close the modal on pressing escape key', async () => {
@@ -152,7 +152,7 @@ describe( 'ResetButton', () => {
 			// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
 			expect(
 				document.querySelector( '.mdc-dialog' ).classList.length
-			).toBe( 1 );
+			).toBe( 2 );
 		} );
 
 		it( 'should reset the plugin, delete local and session storage', async () => {

assets/js/components/UserMenu/index.js

@@ -289,6 +289,7 @@ export default function UserMenu() {
 					) }
 					confirmButton={ __( 'Disconnect', 'google-site-kit' ) }
 					danger
+					small
 				/>
 			</Portal>
 		</Fragment>

assets/js/components/UserMenu/index.test.js

@@ -137,7 +137,7 @@ describe( 'UserMenu', () => {
 				// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are appied to the .mdc-dialog element.
 				expect(
 					document.querySelector( '.mdc-dialog' ).classList.length
-				).toBe( 1 );
+				).toBe( 2 );
 			} );
 
 			it( 'should redirect user to Site Kit splash screen and clear storage', async () => {