Skip to content

Commit

Permalink
Merge pull request google#5576 from google/enhancement/5525-setup-ui-…
Browse files Browse the repository at this point in the history 
…completed

TwG Setup UI - Completed State
  • Loading branch information
@techanvil
techanvil authored Jul 21, 2022
2 parents d9fb059 + fee4352 commit 6064782
Show file tree
Hide file tree
Showing 7 changed files with 196 additions and 39 deletions.
52 changes: 52 additions & 0 deletions assets/js/modules/thank-with-google/components/common/SetupPublicationScreen.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* Thank with Google Setup Publication Screen component.
*
* Site Kit by Google, Copyright 2022 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.
*/

/**
* External dependencies
*/
import PropTypes from 'prop-types';

/**
*
* WordPress dependencies
*/
import { Fragment } from '@wordpress/element';

export default function SetupPublicationScreen( {
title,
description,
children,
} ) {
return (
<Fragment>
<div className="googlesitekit-setup-module__publication-screen">
<h3 className="googlesitekit-heading-3 googlesitekit-setup-module__title">
{ title }
</h3>
<p>{ description }</p>
</div>
{ children }
</Fragment>
);
}

SetupPublicationScreen.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
children: PropTypes.node,
};
1 change: 1 addition & 0 deletions assets/js/modules/thank-with-google/components/common/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@
*/

export { default as PublicationIDInput } from './PublicationIDInput';
export { default as SetupPublicationScreen } from './SetupPublicationScreen';
61 changes: 44 additions & 17 deletions assets/js/modules/thank-with-google/components/setup/SetupMain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@ import { _x, __ } from '@wordpress/i18n';
*/
import Data from 'googlesitekit-data';
import ThankWithGoogleIcon from '../../../../../svg/graphics/thank-with-google.svg';
import ThankWithGoogleSetup from '../../../../../svg/graphics/thank-with-google-setup.svg';
import ProgressBar from '../../../../components/ProgressBar';
import Badge from '../../../../components/Badge';
import { Grid, Row, Cell } from '../../../../material-components';
import { MODULES_THANK_WITH_GOOGLE } from '../../datastore/constants';
import SetupCreatePublication from './SetupCreatePublication';
import SetupCustomize from './SetupCustomize';
Expand Down Expand Up @@ -83,26 +85,51 @@ export default function SetupMain( { finishSetup } ) {

return (
<div className="googlesitekit-setup-module googlesitekit-setup-module--thank-with-google">
<div className="googlesitekit-setup-module__header">
<div className="googlesitekit-setup-module__heading">
<div className="googlesitekit-setup-module__logo">
<ThankWithGoogleIcon width="33" height="33" />
</div>
<Grid>
<Row className="googlesitekit-setup__content">
<Cell
smSize={ 4 }
mdSize={ 8 }
lgSize={ 6 }
lgOrder={ 2 }
className="googlesitekit-setup__icon"
>
<ThankWithGoogleSetup width={ 360 } height={ 210 } />
</Cell>
<Cell smSize={ 4 } mdSize={ 8 } lgSize={ 6 } lgOrder={ 1 }>
<div className="googlesitekit-setup-module__header">
<div className="googlesitekit-setup-module__heading">
<div className="googlesitekit-setup-module__logo">
<ThankWithGoogleIcon
width="33"
height="33"
/>
</div>

<h2 className="googlesitekit-heading-3 googlesitekit-setup-module__title">
{ _x(
'Thank with Google',
'Service name',
'google-site-kit'
) }
</h2>
</div>
<h2 className="googlesitekit-heading-3 googlesitekit-setup-module__title">
{ _x(
'Thank with Google',
'Service name',
'google-site-kit'
) }
</h2>
</div>

<Badge label={ __( 'Experimental', 'google-site-kit' ) } />
<Badge label={ __( 'US Only', 'google-site-kit' ) } />
</div>
<Badge
label={ __(
'Experimental',
'google-site-kit'
) }
/>
<Badge
label={ __( 'US Only', 'google-site-kit' ) }
/>
</div>

{ viewComponent }
{ viewComponent }
</Cell>
</Row>
</Grid>
</div>
);
}
Expand Down
3 changes: 1 addition & 2 deletions assets/js/modules/thank-with-google/components/setup/SetupMain.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,9 +179,8 @@ describe( 'SetupMain', () => {
registry,
} );

// TODO: Update this assertion to match the new UI.
expect( container ).toHaveTextContent(
'TODO: UI for setup publication active - SetupPublicationActive'
'Your account is now active. To get started, customize the appearance of Thank with Google on your site.'
);
const button = queryByRole( 'button' );
expect( button ).toBeInTheDocument();
Expand Down
24 changes: 17 additions & 7 deletions assets/js/modules/thank-with-google/components/setup/SetupPublicationActive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import PropTypes from 'prop-types';
/**
* WordPress dependencies
*/
import { Fragment, useCallback } from '@wordpress/element';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -33,6 +33,7 @@ import { __ } from '@wordpress/i18n';
import Data from 'googlesitekit-data';
import { MODULES_THANK_WITH_GOOGLE } from '../../datastore/constants';
import Button from '../../../../components/Button';
import { SetupPublicationScreen } from '../common';
const { useDispatch } = Data;

export default function SetupPublicationActive( { currentPublicationID } ) {
Expand All @@ -43,14 +44,23 @@ export default function SetupPublicationActive( { currentPublicationID } ) {
}, [ currentPublicationID, setPublicationID ] );

return (
<Fragment>
<div>
TODO: UI for setup publication active - SetupPublicationActive
</div>
<Button onClick={ handleSetupCustomize }>
<SetupPublicationScreen
title={ __( 'Congratulations!', 'google-site-kit' ) }
description={ __(
'Your account is now active. To get started, customize the appearance of Thank with Google on your site.',
'google-site-kit'
) }
>
<Button
onClick={ handleSetupCustomize }
aria-label={ __(
'Customize Thank with Google',
'google-site-kit'
) }
>
{ __( 'Customize Thank with Google', 'google-site-kit' ) }
</Button>
</Fragment>
</SetupPublicationScreen>
);
}

Expand Down
34 changes: 21 additions & 13 deletions assets/sass/components/setup/_googlesitekit-setup-module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,22 +236,30 @@
margin: ($grid-gap-desktop * 1.5) 0 0 0;
}
}
}

.googlesitekit-setup-module__header {
align-items: center;
display: flex;
flex-wrap: wrap;
grid-gap: 10px 12px;
.googlesitekit-setup-module__header {
align-items: center;
display: flex;
flex-wrap: wrap;
grid-gap: 10px 12px;

.googlesitekit-setup-module__logo,
.googlesitekit-setup-module__title {
margin-bottom: 0;
.googlesitekit-setup-module__logo,
.googlesitekit-setup-module__title {
margin-bottom: 0;
}
}
}

.googlesitekit-setup-module__heading {
align-items: center;
display: flex;
.googlesitekit-setup-module__heading {
align-items: center;
display: flex;
}

.googlesitekit-setup-module__publication-screen {
margin: 25px 0 40px 0;

.googlesitekit-setup-module__title + p {
margin: 0;
}
}
}
}
Loading

0 comments on commit 6064782

Please sign in to comment.