Enhancement/9336 siwg setup page

[zutigrm]

Summary

Addresses issue:

• Create setup page/flow for Sign in With Google #9336

Relevant technical choices

PR Author Checklist

• My code is tested and passes existing unit tests.
• My code has an appropriate set of unit tests which all pass.
• My code is backward-compatible with WordPress 5.2 and PHP 7.4.
• My code follows the WordPress coding standards.
• My code has proper inline documentation.
• I have added a QA Brief on the issue linked above.
• I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Code Reviewer Checklist

• Run the code.
• Ensure the acceptance criteria are satisfied.
• Reassess the implementation with the IB.
• Ensure no unrelated changes are included.
• Ensure CI checks pass.
• Check Storybook where applicable.
• Ensure there is a QA Brief.
• Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

• Ensure the PR has the correct target branch.
• Double-check that the PR is okay to be merged.
• Ensure the corresponding issue has a ZenHub release assigned.
• Add a changelog message to the issue.

[github-actions]

Build files for 64c878d have been deleted.

[benbowler]

Hey @zutigrm this was a good read and test, a couple of points:

1. I noticed two issues with the SVG in different responsive sizes:

   1. At the smaller breakpoints there is a small ~1px white gap between the graphic and the footer:
   
   2. On larger screens the SVG is cropped or cut at the bottom cutting off the drop shadow of the graphic harshly:
   

One other note, this SetupFrom does not implement any error handling, should we implement something like the assets/js/components/StoreErrorNotices.js component in this setup form?

[benbowler]

Nice one for considering lazy loading here, that's something Evan has mentioned a few times recently and it something that should be considered in each ticket that adds new media.

[zutigrm]

@benbowler Thanks, good catch!

On larger screens the SVG is cropped or cut at the bottom cutting off the drop shadow of the graphic harshly

Updated, thanks.

One other note, this SetupFrom does not implement any error handling, should we implement something like the assets/js/components/StoreErrorNotices.js component in this setup form?

StoreErrorNotices is already implemented in the form component:

site-kit-wp/assets/js/modules/sign-in-with-google/components/setup/SetupForm.js

Lines 43 to 46 in dd45c14

	<StoreErrorNotices
	moduleSlug={ MODULES_SIGN_IN_WITH_GOOGLE }
	storeName={ MODULES_SIGN_IN_WITH_GOOGLE }
	/>

At the smaller breakpoints there is a small ~1px white gap between the graphic and the footer:

There isn't a space there, might be visual trick due to the grey border, since since there is no spacing between border and graphic:

[benbowler]

Thanks @zutigrm, there was a 1px gap here, I pushed a quick fix. All other points look good, moving through to MR.

[eugene-manuilov]

Thanks, @zutigrm. This is a good start. Added some feedback for you. Please, take a look.

[eugene-manuilov]

Thanks, @zutigrm. Almost looks good to me. Just added two last comments and it should be good to go.

[eugene-manuilov]

I think we can omit finishSetup for this component because we don't need it in the form component.

Suggested change

	export default function SetupMain( { finishSetup = () => {} } ) {
	export default function SetupMain() {