Make previous and next buttons look like links

IreneStr commented 5 years ago

Summary

This PR can be summarized in the following changelog entry:

Makes the previous and next buttons in the onboarding wizard look like links.

Relevant technical choices:

As discussed with @luckickken and @afercia (see comment on issue), I've used buttons and styled them as links.
The space between the underlining and the links is not 100% consistent with the design. This discrepancy has already been approved by @luckickken.
I've added **/coverage/** to .eslintignore to make sure that files in this folder are ignored when running grunt eslint.
After discussing with @moorscode, I've added $palette_blue_link to _colors.scss. If I would have used an existing blue color for the navigation buttons, there would be situations where there would be two slightly different blues (for navigation buttons and text links) within one config wizard step, which would be ugly.

Test instructions

This PR can be tested by following these steps:

On trunk: go to Yoast SEO > General and open the configuration wizard. See a pink and white next and previous button on the right-hand side.
Link this branch to trunk of wordpress-seo (in yoast-components: yarn link, in wordpress-seo:yarn link yoast-components).
Build everything (in yoast-components: yarn install && grunt build, in wordpress-seo:composer install && yarn install && grunt build && yarn start)
Go to Yoast SEO > General and open the configuration wizard. See blue next and previous buttons (styled as links) aligned to the left and right. Compare what you see to the design in the issue (but see Relevant technical choices above).
Click through all steps to make sure all buttons have been changed.
If you have multiple browsers, test in all of them.
Run yarn start in yoast-components and go to localhost:3333 in your browser. Click the Wizard button, and see the changed navigation there as well.
I'll ask @dariaknl to test in Edge and IE11.

UI changes

[x] This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Fixes Yoast/wordpress-seo/issues/12276

andizer commented 5 years ago

CR done

abotteram commented 5 years ago

Acceptance 👍

afercia commented 5 years ago

Noticed in Firefox these buttons-links have no focus style. They rely on the browsers native outline, and in Firefox the outline doesn't work when unsetting the borders. Will create a separate issue.

dariaknl commented 5 years ago

Tested "Previous" and "Next" buttons in Conf Wizard in IE11 and Edge - looks good 👍!

Yoast / yoast-components