Guided Tours: Add Jetpack Sign-In Tour

[ockham]

Screenshots:

Success Message:

To test:

• Land at calypso.localhost:3000/checklist/<jpSite>
• Click the 'Do it!' button next to the 'WordPress.com sign in' item.
• Lo and behold the Guided Tour
• Enable WordPress.com sign in, as suggested by the Guided Tour thingy
• Find a gratifying success notice ✔️
• Verify that 'Yes' button takes you back to the checklist, 'No' drops you off where you are.

Original Mockup (from p6TEKc-1UX-p2):

Fixes #25459.

[matticbot]

Test live: https://calypso.live/?branch=add/jetpack-sso-guided-tour

[joanrho]

Thanks @ockham! I'm seeing a bit of wonkiness with the positioning of the guided tour: I haven't set up Backups and Scanning for this particular test site yet, so the guided tour bubble landed on the Spam Filtering card. Would it be possible to change that so that it affixes to the Sign-in card instead? I believe this happened for a previous tour we worked on...did you resolve that by specifying the class name or something?

Also, the guided tour is currently positioned left: 339px;, which positions the caret just to the right of the toggle. Can we center this instead by making it left: 319px;? Before/after: https://cloudup.com/cHD6Eh7VgXp

[tyxla]

Code looks good and this tests as described. Nice work 👍

[tyxla]

This line is too long now - care to split it into 2 lines? There are 2 sentences, so it should make sense.

[ockham]

Weird that eslint didn't complain about this...

[sirreal]

Weird that eslint didn't complain about this...

#24635 added prettier eslint config. Line length is handled by prettier and max-length is no longer enforced.

Prettier doesn't break string and it's still nice to break lines that get too long 👍

[ockham]

Thanks @ockham! I'm seeing a bit of wonkiness with the positioning of the guided tour: I haven't set up Backups and Scanning for this particular test site yet, so the guided tour bubble landed on the Spam Filtering card. Would it be possible to change that so that it affixes to the Sign-in card instead? I believe this happened for a previous tour we worked on...did you resolve that by specifying the class name or something?

Hmm, that's weird. The className should be specific enough (.sso__card .form-toggle__switch).

I remember the other issue, but I'm afraid I essentially forgot to address it 😳 -- I probably let this slip thru the cracks since I couldn't repro it. I can't reproduce this one either in Chromium, so it sounds a bit like this could be a browser specific bug with Guided Tours. What browser are you using to test this @joanrho?

[ockham]

Also, the guided tour is currently positioned left: 339px;, which positions the caret just to the right of the toggle. Can we center this instead by making it left: 319px;? Before/after: https://cloudup.com/cHD6Eh7VgXp

Yeah, this is kinda annoying. Guided Tours positioning is based on element selectors (.sso__card .form-toggle__switch), and some more 'qualitative' args (arrow="top-left", placement="below"). You'd think that'd do a better job:

Maybe I can use the additional style arg to tweak this...

[joanrho]

@ockham I'm using Chrome. Pinging @Automattic/jetpack-design to see if anyone else from the team can repro this bug.

[keoshi]

Same here: using Chrome and seeing the guided tour step slightly nudged to the right, relative to the actual toggle.

[keoshi]

Unfortunately it doesn't seem like an easy problem to fix because as @ockham mentions, its position is calculated from the picked selector, so the left values you're seeing @joanrho are generated dynamically and change depending on the screen resolution you use.

transform: translateX(-16px) would be ideal here but doesn't work because it has a fixed position.

margin-left: -16px seems to do the trick, but it's not pretty at all.

[jeffgolenski]

Just gave this a whirl. Can confirm the guided tour is appearing slightly off.

[ockham]

Thanks all! I've filed #25932 and 25933, respectively, to keep track of the issues found by @joanrho. Going to merge this PR to unblock the Guided Tour.