Skip to content

Commit 74ca48b

Browse files
nfmohitnfmohit
authored
Merge pull request #8201 from google/enhancement/8110-update-modal-dialog
Update modal dialog
2 parents 04a3936 + 8a8acb8 commit 74ca48b

25 files changed

+278
-66
lines changed

‎assets/js/components/ModalDialog.js

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
* External dependencies
2121
*/
2222
import PropTypes from 'prop-types';
23+
import classnames from 'classnames';
2324

2425
/**
2526
* WordPress dependencies
@@ -39,18 +40,22 @@ import {
3940
DialogTitle,
4041
SpinnerButton,
4142
} from 'googlesitekit-components';
43+
import ExclamationIcon from '../../svg/icons/warning.svg';
4244

4345
function ModalDialog( {
44-
dialogActive,
45-
handleDialog,
46-
title,
46+
className = '',
47+
dialogActive = false,
48+
handleDialog = null,
49+
title = null,
4750
provides,
4851
handleConfirm,
4952
subtitle,
50-
confirmButton,
53+
confirmButton = null,
5154
dependentModules,
52-
danger,
55+
danger = false,
5356
inProgress = false,
57+
small = false,
58+
medium = false,
5459
} ) {
5560
const instanceID = useInstanceId( ModalDialog );
5661
const describedByID = `googlesitekit-dialog-description-${ instanceID }`;
@@ -61,8 +66,15 @@ function ModalDialog( {
6166
open={ dialogActive }
6267
aria-describedby={ hasProvides ? describedByID : undefined }
6368
tabIndex="-1"
69+
className={ classnames( className, {
70+
'googlesitekit-dialog-sm': small,
71+
'googlesitekit-dialog-md': medium,
72+
} ) }
6473
>
65-
<DialogTitle>{ title }</DialogTitle>
74+
<DialogTitle>
75+
{ danger && <ExclamationIcon width={ 28 } height={ 28 } /> }
76+
{ title }
77+
</DialogTitle>
6678
{
6779
// 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.
6880
subtitle ? <p className="mdc-dialog__lead">{ subtitle }</p> : []
@@ -103,6 +115,14 @@ function ModalDialog( {
103115
) }
104116
</DialogContent>
105117
<DialogFooter>
118+
<Button
119+
className="mdc-dialog__cancel-button"
120+
tertiary
121+
onClick={ handleDialog }
122+
disabled={ inProgress }
123+
>
124+
{ __( 'Cancel', 'google-site-kit' ) }
125+
</Button>
106126
<SpinnerButton
107127
onClick={ handleConfirm }
108128
danger={ danger }
@@ -111,14 +131,6 @@ function ModalDialog( {
111131
>
112132
{ confirmButton || __( 'Disconnect', 'google-site-kit' ) }
113133
</SpinnerButton>
114-
<Button
115-
className="googlesitekit-margin-left-auto mdc-dialog__cancel-button"
116-
tertiary
117-
onClick={ handleDialog }
118-
disabled={ inProgress }
119-
>
120-
{ __( 'Cancel', 'google-site-kit' ) }
121-
</Button>
122134
</DialogFooter>
123135
</Dialog>
124136
);
@@ -127,22 +139,15 @@ function ModalDialog( {
127139
ModalDialog.displayName = 'Dialog';
128140

129141
ModalDialog.propTypes = {
142+
className: PropTypes.string,
130143
dialogActive: PropTypes.bool,
131144
handleDialog: PropTypes.func,
132145
handleConfirm: PropTypes.func.isRequired,
133146
title: PropTypes.string,
134-
description: PropTypes.string,
135147
confirmButton: PropTypes.string,
136148
danger: PropTypes.bool,
137-
};
138-
139-
ModalDialog.defaultProps = {
140-
dialogActive: false,
141-
handleDialog: null,
142-
title: null,
143-
description: null,
144-
confirmButton: null,
145-
danger: false,
149+
small: PropTypes.bool,
150+
medium: PropTypes.bool,
146151
};
147152

148153
export default ModalDialog;

‎assets/js/components/ModalDialog.stories.js

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,14 @@
2121
*/
2222
import ModalDialog from './ModalDialog';
2323

24-
function Template() {
24+
function Template( args ) {
2525
return (
2626
<ModalDialog
2727
dialogActive
2828
title="Modal Dialog Title"
29-
subtitle="Modal Dialog Subtitle"
30-
provides={ [
31-
'Audience overview',
32-
'Top pages',
33-
'Top acquisition channels',
34-
] }
35-
handleConfirm={ global.console.log.bind(
36-
null,
37-
'Dialog::handleConfirm'
38-
) }
39-
danger
29+
subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo urna vitae commodo sollicitudin."
30+
handleConfirm={ () => {} }
31+
{ ...args }
4032
/>
4133
);
4234
}
@@ -47,6 +39,47 @@ Default.scenario = {
4739
label: 'Global/ModalDialog',
4840
};
4941

42+
export const Danger = Template.bind( {} );
43+
Danger.storyName = 'Danger';
44+
Danger.args = {
45+
title: 'Danger Modal Dialog Title',
46+
provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
47+
danger: true,
48+
};
49+
Danger.scenario = {
50+
label: 'Global/ModalDialog/Danger',
51+
};
52+
53+
export const DependentModules = Template.bind( {} );
54+
DependentModules.storyName = 'Danger With Dependent Modules';
55+
DependentModules.args = {
56+
dependentModules:
57+
'Fusce sit amet tellus neque. Praesent egestas dapibus ipsum vel vulputate.',
58+
provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
59+
danger: true,
60+
};
61+
DependentModules.scenario = {
62+
label: 'Global/ModalDialog/DangerWithDependentModules',
63+
};
64+
65+
export const SmallModal = Template.bind( {} );
66+
SmallModal.storyName = 'Small';
67+
SmallModal.args = {
68+
small: true,
69+
};
70+
SmallModal.scenario = {
71+
label: 'Global/ModalDialog/Small',
72+
};
73+
74+
export const MediumModal = Template.bind( {} );
75+
MediumModal.storyName = 'Medium';
76+
MediumModal.args = {
77+
medium: true,
78+
};
79+
MediumModal.scenario = {
80+
label: 'Global/ModalDialog/Medium',
81+
};
82+
5083
export default {
5184
title: 'Global/Modal Dialog',
5285
component: ModalDialog,

‎assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ function AuthenticatedPermissionsModal() {
127127
dialogActive
128128
handleConfirm={ onConfirm }
129129
handleDialog={ onCancel }
130+
medium
130131
/>
131132
</Portal>
132133
);

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* AuthenticatedPermissionsModal Component Stories.
3+
*
4+
* Site Kit by Google, Copyright 2024 Google LLC
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* https://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
/**
20+
* Internal dependencies
21+
*/
22+
import AuthenticatedPermissionsModal from './AuthenticatedPermissionsModal';
23+
import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
24+
import { provideUserAuthentication } from '../../../../tests/js/utils';
25+
import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
26+
27+
function Template() {
28+
return <AuthenticatedPermissionsModal />;
29+
}
30+
31+
export const Default = Template.bind( {} );
32+
Default.storyName = 'AuthenticatedPermissionsModal';
33+
Default.decorators = [
34+
( Story ) => {
35+
const setupRegistry = ( registry ) => {
36+
registry.dispatch( CORE_USER ).receiveConnectURL( 'test-url' );
37+
registry.dispatch( CORE_USER ).setPermissionScopeError( {
38+
status: 500,
39+
message:
40+
'You’ll need to contact your administrator. Trouble getting access?',
41+
data: {
42+
scopes: [
43+
'https://www.googleapis.com/auth/analytics.readonly',
44+
],
45+
},
46+
} );
47+
provideUserAuthentication( registry );
48+
};
49+
50+
return (
51+
<WithRegistrySetup func={ setupRegistry }>
52+
<Story />
53+
</WithRegistrySetup>
54+
);
55+
},
56+
];
57+
58+
export default {
59+
title: 'Components/AuthenticatedPermissionsModal',
60+
component: AuthenticatedPermissionsModal,
61+
};

‎assets/js/components/ResetButton.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ function ResetButton( { children } ) {
138138
) }
139139
confirmButton={ __( 'Reset', 'google-site-kit' ) }
140140
danger
141+
small
141142
inProgress={ inProgress }
142143
/>
143144
</Portal>

‎stories/reset-button.stories.js renamed to ‎assets/js/components/ResetButton.stories.js

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Reset Button stories.
33
*
4-
* Site Kit by Google, Copyright 2021 Google LLC
4+
* Site Kit by Google, Copyright 2024 Google LLC
55
*
66
* Licensed under the Apache License, Version 2.0 (the "License");
77
* you may not use this file except in compliance with the License.
@@ -16,24 +16,37 @@
1616
* limitations under the License.
1717
*/
1818

19-
/**
20-
* External dependencies
21-
*/
22-
import { storiesOf } from '@storybook/react';
23-
2419
/**
2520
* Internal dependencies
2621
*/
27-
import ResetButton from '../assets/js/components/ResetButton';
28-
import { provideSiteInfo, WithTestRegistry } from '../tests/js/utils';
22+
import ResetButton from './ResetButton';
23+
import {
24+
WithTestRegistry,
25+
createTestRegistry,
26+
provideSiteInfo,
27+
} from '../../../tests/js/utils';
28+
29+
function Template() {
30+
return <ResetButton>Reset Site Kit Button</ResetButton>;
31+
}
2932

30-
storiesOf( 'Global', module ).add( 'Reset Button', () => {
31-
const setupRegistry = ( registry ) => {
33+
export const Default = Template.bind( {} );
34+
Default.storyName = 'ResetButton';
35+
36+
Default.decorators = [
37+
( Story ) => {
38+
const registry = createTestRegistry();
3239
provideSiteInfo( registry );
33-
};
34-
return (
35-
<WithTestRegistry callback={ setupRegistry }>
36-
<ResetButton>Reset Site Kit Button</ResetButton>
37-
</WithTestRegistry>
38-
);
39-
} );
40+
41+
return (
42+
<WithTestRegistry registry={ registry }>
43+
<Story />
44+
</WithTestRegistry>
45+
);
46+
},
47+
];
48+
49+
export default {
50+
title: 'Components/ResetButton',
51+
component: ResetButton,
52+
};

‎assets/js/components/ResetButton.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ describe( 'ResetButton', () => {
133133
// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
134134
expect(
135135
document.querySelector( '.mdc-dialog' ).classList.length
136-
).toBe( 1 );
136+
).toBe( 2 );
137137
} );
138138

139139
it( 'should close the modal on pressing escape key', async () => {
@@ -152,7 +152,7 @@ describe( 'ResetButton', () => {
152152
// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
153153
expect(
154154
document.querySelector( '.mdc-dialog' ).classList.length
155-
).toBe( 1 );
155+
).toBe( 2 );
156156
} );
157157

158158
it( 'should reset the plugin, delete local and session storage', async () => {

‎assets/js/components/UserMenu/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@ export default function UserMenu() {
289289
) }
290290
confirmButton={ __( 'Disconnect', 'google-site-kit' ) }
291291
danger
292+
small
292293
/>
293294
</Portal>
294295
</Fragment>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ describe( 'UserMenu', () => {
137137
// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are appied to the .mdc-dialog element.
138138
expect(
139139
document.querySelector( '.mdc-dialog' ).classList.length
140-
).toBe( 1 );
140+
).toBe( 2 );
141141
} );
142142

143143
it( 'should redirect user to Site Kit splash screen and clear storage', async () => {

0 commit comments

Comments
 (0)