#3198904 Gutenboarding: New domain picker design

Changes proposed in this Pull Request

• Redesign of domain picker.
• Recommended domain badge is introduced. This is determined by picking domain suggestions with exact-match with highest relevance score. This only appears if there is a domain with exact match. Feel free to discuss change of algorithm.
• (Not from the figma prototype.) A selected domain badge is introduced. I’m only introducing that because I needed to do something with the currentDomain prop that was introduced in the DomainPIcker component which was unused.

Testing instructions

Here are some things you can test:

• Clicking on domain picker dropdown button should display the domain picker.
• When domain picker appears initially, it should display list of suggestion items as placeholders.
• Entering a value on the domain search input should update the suggestion list with new suggestions.
• While new suggestions are being loaded, the suggestion items should display as placeholders.
• Sometimes Recommended badge will appear if there is a domain with exact match with user entered site title.
• Clicking on a free subdomain suggestion item and reopening the domain picker dropdown should show the Selected badge on the free subdomain suggestion item.
• Clicking on Skip for now button should close the dropdown picker.

Known Issues

These issues should be addressed separately in another PR:

• The free subdomain displayed on the domain picker dropdown button does not match the free subdomain on the domain picker free suggestion.
• Clicking on “Connect it now” button does not do anything.
• “More options” button is not added in this PR.

Screenshot

Fixes #40163