Storybook: Add Color Palette Component (#17997)

* Add Color Palette to Storybook

* Apply suggestions from code review

Co-Authored-By: Enrique Piqueras <epiqueras@users.noreply.github.com>

* Refactor state out of story components, to own

* Update packages/components/src/color-palette/stories/index.js

packages/components/src/color-palette/stories/index.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { object } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '../';
+
+export default { title: 'ColorPalette', component: ColorPalette };
+
+const ColorPaletteWithState = ( props ) => {
+	const [ color, setColor ] = useState( '#F00' );
+	return (
+		<ColorPalette
+			{ ...props }
+			value={ color }
+			onChange={ setColor }
+		/>
+	);
+};
+
+export const _default = () => {
+	const colors = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+
+	return (
+		<ColorPaletteWithState
+			colors={ colors }
+		/>
+	);
+};
+
+export const withKnobs = () => {
+	const colors = [
+		object( 'Red', { name: 'red', color: '#f00' } ),
+		object( 'White', { name: 'white', color: '#fff' } ),
+		object( 'Blue', { name: 'blue', color: '#00f' } ),
+	];
+
+	return (
+		<ColorPaletteWithState
+			colors={ colors }
+		/>
+	);
+};
+