@W-17526051 - Add a "Back" button for Standard Login

[jeremy-jung1]

Description

Add back button to standard login modal/page after password login prompt

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1) Added back button to standard login modal

How to Test-Drive This PR

Passwordless enabled

• (step1) Go to https://aaa-jeremy-chicken-soup.mobify-storefront-staging.com/
• (step2) Click on the person icon on the top right for the login modal
• (step3) Type in a random email address and click "Password"
• (step4) See that pressing the 'Back' button brings the user back to the modal with the different login options
• (step5) Go to https://aaa-jeremy-chicken-soup.mobify-storefront-staging.com/login
• (step6) Type in an email and press "Password". See that pressing the back button brings the user back to the page with different login options

Passwordless disabled

• (step1) Go to https://aaa-jeremy-new-environment.mobify-storefront-staging.com
• (step2) See that the 'Back to Sign In Options' button is not visible
• (step3) Check this is the case too for https://aaa-jeremy-new-environment.mobify-storefront-staging.com/login

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[hajinsuha1]

sorry @jeremy-jung1 can we change this to Back to Sign In Options to be consistent with the checkout login page? This is also something we agreed with Trevor on here

[hajinsuha1]

Sorry testing this again and I realized that this StandardLogin component is rendered differently for each of the 4 passwordless/social combination.

In the case where passwordless is disabled, the password field is shown so there's no need to display the back button.

I think we can simply make this button display when hideEmail is true

[hajinsuha1]

I think this might affect the spacing for when social is enabled and passwordless is disabled and makes the Or Login With text + buttons closer than the figma design

spacing={2}:

I also actually think there's a bug in the spacing where spacing={6} makes the buttons too far:

Would you be able sneak in a spacing fix to ensure the buttons have a spacing of 4 but the "or Login With" keeps a spacing of 6

[alexvuong]

@jeremy-jung1 I followed the steps listed into the PR description. I can't find option for passwordless listed. Is the deployed successful? the nav can't be loaded.