Add an Alert component

[igorschoester]

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/components] Adds an Alert component.
• [@yoast/style-guide] Adds new status colors: error, info, success, warning.

Relevant technical choices:

• Based on the MyYoast implementation. Should be similar in usage. The cookie and dismiss should now be controlled from outside this component.
• Adds the colors to the style-guide in a hopefully reusable fashion.

Test instructions

This PR can be tested by following these steps:

• Run the components app.
• Check the different type of alerts in the components 'tab'.
• Check the dismissable alert.
• The should look like the design.
• Check in Right To Left: spacing of the icons on the correct sides.

Impact check

• This PR affects the following parts of the plugin, which may require extra testing:
  *

Screenshot

UI changes

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

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Partially fixes: Yoast/wordpress-seo#13173

[hwinne]

CR Done 👍

[afercia]

About the translatable string in the default prop, see for example Yoast/wordpress-seo#11705 (comment)

Seems the default needs to be provided within the render.

[afercia]

I made several changes so I think it's better someone else does final acceptance. Will move back to the proper lane.

Screenshots:

Single line

Multiple lines and focus style for the dismiss button.

This is based on the provided design on https://github.com/Yoast/design/issues/392#issuecomment-515051908

• 2px border #007FFF
• 3px outer border #007FFF with an opacity of 0.25

Note: It is not possible to make the dismiss button alignment have a pixel-perfect alignment because:

• alignment with the single line text matters
• the × character changes depending on the font used and the font internal metrics. See for example in the plugin, where there's a different font-family thus the alignment is different.

Noted on the design issue, pending feedback.

In the plugin:

In the last screenshot you can clearly see the vertical alignment is different. The only reason for this is the font face internal metrics. As noted in the design issue, the only option I can think of to avoid this is to use an SVG icon.

[afercia]

Re the × the decision is to use the current SVG icon, see feedback on https://github.com/Yoast/design/issues/371#issuecomment-529517547

[johannadevos]

Acceptance: 👍