852 color widget

[felixboet]

Fixes #852
A basic color widget - it's a version of my color-picker-widget reduced to just use the "chrome" picker, demo here (field 1&2). I could also include more or all color pickers, but I think it's nice to keep it simple as the standard color picker.

It uses react-color for the color picker and validate-color to validate the string for the color swatch and display a "?" if it's not a valid color string.

[erezrokah]

@felixboet this is amazing. Works very well.
Thank you for scoping it down for simplicity.

My changes were mostly about extracting some divs into smaller components to make the render method shorter.

Also, added very small clarifications to the docs.

[felixboet]

thanks @erezrokah ... much cleaner that way :)

I realised one little thing from my code I am not happy with. Clicks outside the color picker are handled by the fullscreen "ClickOutsideDiv" to close the color picker. That means if you opened the color picker and want to edit another field, you have to click twice, once for closing the picker, and then for the other field. That is not consistent with other widgets like "select" or "datetime", where you can click immediately from one field to another.

I guess it's quite easy, but I don't have the experience for a quick solution... Would you like to take care of that?

[erezrokah]

Would you like to take care of that?

Sure, how about opening a new issue for that so we can track it?

[felixboet]

... and I think the widget has to be renamed, because netlify-cms-widget-color already exists ... My proposal: netlify-cms-widget-colorstring / ColorString

[erezrokah]

netlify-cms-widget-color

Damn, forgot about that. Thank you for reminding me.
There are a few already:
https://www.npmjs.com/search?q=netlify-cms-widget-color

so netlify-cms-widget-colorstring makes sense thank you

[felixboet]

Would you like to take care of that?

Sure, how about opening a new issue for that so we can track it?

Ah, you merged already. Awesome :) ... ok, i open an issue