Description
Changes proposed in this Pull Request
The current styling & copy for unavailable plans (e.g. free plan with a paid domain) in <PlansTable/>
are unaligned with Design Specs, described in Figma. In this PR, styling and copy changes are proposed to align them.
Technical changes
- Update fill & stroke color for cross-icon.
- Cross through unavailable domain copy.
- Update unavailable domain’s font-weight.
- Update copy for disabled plan’s button.
- Update copy for the unavailable domain (text after cross-icon).
Testing instructions
Focused Launch
- Go to
/page/UNLAUNCHED_SITE_ID_CREATED_WITH_START.wordpress.com/home?flags=create/focused-launch-flow-calypso
.
- Click “Launch” to open the Focused Launch flow.
- Select a paid domain
- Click “View all plans”
- Check that the Free plan’s:
- Button is disabled
- The disabled button’s copy is:
Unavailable with domain
- Cross-icon is
--studio-orange-40
- The orange copy is:
[domain] is not included
Gutenboarding – Regression testing
- Go to
/new
.
- Enter a site name, pick a paid domain (preferably a
.blog
domain)
- Proceed to the step “Select a plan”.
- Expand the free plan and check that:
- Cross-icon is
--studio-orange-40
- The orange copy is:
[domain] is not included
Editing Toolkit Step-by-Step Launch – Regression testing
- Check out this branch and run
yarn dev --sync
from /apps/editing-toolkit
ensuring you’re also logged into your sandbox environment.
- Go to
/new
and go through the process to create a new site, you will land in the editing experience.
- Sandbox your newly created site in your host file.
- Flush your cache & DNS and then refresh your site made in step 1 and ensure that you’re using the
dev
version of the ETK.
- Click “Launch”. This should open the launch modal.
- Select a paid domain at the “Select a domain” step
- Proceed to the step “Select a plan” and confirm that:
- No unexpected changes have appeared.
Fixes #47788
Unfortunately, no screenshots were provided by the developer.