@gechiui/components/src/color-palette/stories/index.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { object } from '@storybook/addon-knobs';

/**
 * GeChiUI dependencies
 */
import { useState } from '@gechiui/element';

/**
 * Internal dependencies
 */
import ColorPalette from '../';

export default {
	title: 'Components/ColorPalette',
	component: ColorPalette,
	parameters: {
		knobs: { disabled: false },
	},
};

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 } />;
};