Create a collapsible header with icon

[IreneStr]

Create a collapsible header with icon. This header will be used both in the sidebar, as well as in the metabox. This means its width should be flexible. We already have a collapsible header without icon, so please use that one as a basis. The color of the icon and the icon itself should be able to be changed based on passed props.

Sidebar

Metabox

SVG icons

Zip with smiley SVGs. The grey icon is a bullet without a face.
Colors:
#008800 (green)
#f5c819 (yellow)
#dc3232 (red)
#a0a5aa (grey)

[hedgefield]

The associated color variables are:
$color_bad
$color_ok
$color_good
$color_score_icon

NOTE that in our colors scss these variables don't have the colors that are specified in the design, they're slightly off:

I've opened a separate issue for this to do another a11y review. So the icons can be implemented now, just with the added context that the colors need some work in parallel to this.

[hedgefield]

After the a1yy review we tweaked the colors a little bit, and I made versions of the icons that have the colors baked in. Here they are.

[afercia]

@hedgefield re:the SVG icons, we'd need to always generate the SVG code in the same way. All the other icons used in the yoast-components have a viewBox="0 0 1792 1792" while these new ones have a viewBox="0 0 496 512".

While, with some code acrobatics, it is possible to pass down viewBox as a prop through a long chain of components, I'd like to avoid that 🙂 The best option would be having all the icons with the same viewBox. It is possible to regenerate them using the same standard viewBox size?

Depending on the intended use, there are also other things to strip out from the SVG code but that can be done manually. Thanks!

[hedgefield]

I'd be down for making all the svgs the same size. Is it possible to generate a list somewhere which those are?

SVG optimization is a weird process and almost no image editor does it right, so I'm not too sure about the rest of the things.

[afercia]

Thanks! The ones we're using right now in the yoast-components are the ones listed in https://github.com/Yoast/yoast-components/blob/develop/composites/Plugin/Shared/components/SvgIcon.js

I'm in the process of adding the new 3 seo-score ones of course.

[hedgefield]

I made an issue for it on our design repo 👍https://github.com/Yoast/design/issues/174

[abotteram]

This issue gets fixed by #653. Closing in favor of that issue.