[Home Page Picker] Update the design of the “Choose a Domain” screen

[chipsnyder]

Fixes wordpress-mobile/gutenberg-mobile#2722

To test:

📓 This doesn't include the PR to enable HPP by default so you'll still need to toggle the feature on if not already enabled

To disable or enable the development version of Home Page Picker

• Open the app from the build that allows FeatureFlags such as a PR build or a local development build
  • By default, the modal layout picker will be disabled.
  • From the site page:
    • Click on your Gravatar.
    • Click on App Settings.
    • Click on Debug.
    • Toggle "Site Creation: Home Page Picker" to enable or disable the picker
    • 

When enabled, the first step of the Site Creation flow will be replaced with the Home Page Picker flow.

Initial loading and Navigation

1. Navigate to the Create WordPress.com site
   • My Sites > ➕ > Create WordPress.com site > Select a site design or skip on the Choose a design page
2. Expect
   • The back button to say "Design"
     • This is a change from the initial setting because "Choose Design" was too long that it ended up being shortened to "Back" by the system.
   • The cursor to be on the "Search Domains" text field
   • The title to be updated to "Choose a domain"
   • The prompt to be updated to "This is where people will find you on the internet."
   • You should be able to scroll the header away (before searching)

Searching for a Domain

1. Navigate to the "Choose a Domain" Screen
2. Enter some text into the search box
3. Expect To see some results for a valid search term
   • 📓 The results for this screen uses the default quantity as set by the server which appears to be 5. I didn't change this here but totally think this could be a good enhancement in a follow-up PR.
4. Select the ✖️ in the search field
5. Expect
   • To see the results clear and return to a blank space under the bar
   • The header should maintain its state (open or collapsed)
6. Enter some text into the search box again
7. Expect
   • To see the results return
   • The header should maintain its state (open or collapsed)
8. Select a domain
9. Expect
   • The keyboard to dismiss
   • The "Create Site" button to appear
10. Select the search box to enter a new option
11. Expect
    • The keyboard to appear
    • The "Create Site" button to disappear

Create Site

1. Navigate to the "Choose a Domain" Screen
2. Search for a domain
3. Select a domain
4. Select "Create Site"
5. Expect To have a site created that matches your selected Domain and Design

Searching for a Domain - No Results

1. Navigate to the "Choose a Domain" Screen
2. Search for a domain that won't return any results (I had luck with google and single letters but this seemed server-dependent)
3. Expect To see a label appear that says "No available addresses matching your search"

Searching for a Domain - No Network

1. Navigate to the "Choose a Domain" Screen
2. Disengage your network connection
3. Search for a domain
4. Expect To see a cell added wit No connection and Retry
5. Repair your network connection
6. Select the cell
7. Expect To see the search retry

Analytics

📓 While testing this I noticed that if you navigate away and back to any of the site creation screens then the analytics for views don't fire again. This is consistent with the production versions of these screens though so I didn't change it.

1. Navigate to the "Choose a Domain" Screen
2. Expect to see enhanced_site_creation_domains_accessed fire
3. Search for a domain
4. Select a domain
5. Select "Create Site"
6. Expect to see enhanced_site_creation_domains_selected fire with chosen_domain populated with your selected domain and search_term populated with the term you searched with.

Screenshots:

Initial Load	Search Results	Selected	Scrolled	No Results	No Network

Additional Context:

This is a continuation of the work done in the Home Page Picker Project and is part of the Round 2 requirements.

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 38131. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

	Warnings
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[chipsnyder]

@kyleaparker @iamthomasbishop Here's the UI changes for the Choose a Domain screen. I decided to go forward using the same collapsing header of the other screen. I felt like just making the font and UI changes resulted in a weird feel. I did try and preserve some of the existing behaviors though. When you get a chance I'd love to get your thoughts.

[iamthomasbishop]

@chipsnyder I will reserve final judgement until I can get my hands on a test build, but based on these screenshots, it's looking pretty sharp! The only thing that looks off to me is the spacing between navigation bar and the large title — feels a little cramped. Can't remember off the top of my head what we're using on the other sheets (I think 24?) and it might be too much spacing, but I think adding 8-16pts here might be sufficient.

[chipsnyder]

Thanks @iamthomasbishop!
Yeah looks like the CI build failed. I'll dive into that tomorrow.

As for the spacing there it's actually the exact same on all instances. I'm using a reusable control where we can only modify the title and prompt for that spacing.

[iamthomasbishop]

As for the spacing there it's actually the exact same on all instances. I'm using a reusable control where we can only modify the title and prompt for that spacing.

Ah, fair enough! Perhaps if the spacing is that tight across all instances, we should increase it a tad?

[chipsnyder]

Yup that's easy enough. I'll add a bit of space to the build once it's working and we can tweak it across the board as needed.

[chipsnyder]

Sorry about that build failure @iamthomasbishop and @kyleaparker. A new one with that top spacing is available now.

[antonis]

The code LGTM and the App behaves as expected 🎉
Nice work Chip 👍

[chipsnyder]

Hey @kyleaparker, @SylvesterWilmott, @iamthomasbishop I added that extra spacing mentioned here: #15324 (comment)

To give you all a more comprehensive look I'm going to merge this branch and #15349 This will allow us to provide a more comprehensive build to a call for testing. I'll ping you all there once the build is avaialble