Introduce UpsellButton component

IreneStr commented 5 years ago

Summary

This PR can be summarized in the following changelog entry:

Introduce UpsellButton component

Relevant technical choices:

I introduced this button to fix https://github.com/Yoast/wordpress-seo/issues/10980. In the end, styling via the stylesheets in wordpress-seo turned out a better way. However, this button will most likely be needed for https://github.com/Yoast/wordpress-seo-premium/issues/1877, so please get it through the process.

Test instructions

This PR can be tested by following these steps:

I've implemented an example on the Buttons page in the standalone app.

Dieterrr commented 5 years ago

CR done 👍

Dieterrr commented 5 years ago

Acceptance done 🚧

Button works as expected in chrome, but not in firefox and safari. Here the focus style is not applied (the blue box). The active and hover styles are applied correctly though.

Also the offset seems a bit off (in all browsers): it's not completely centered. The middle is 0,78 cm from the bottom and 0,90 cm from the top. Is this intended?

See image. upsell-button

Note: Not tested in IE/Edge.

Dieterrr commented 5 years ago

I am merging this issue because the styling issues are minor. Created a new issue to fix these in the near future: #751

Yoast / yoast-components