{"size": 990, "ext": "js", "max_stars_repo_path": "scripts/components/color-palette-custom/docs/story.js", "max_stars_repo_name": "dmnyk/eightshift-frontend-libs", "max_stars_repo_stars_event_min_datetime": "2019-07-25T08:00:50.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-19T03:43:07.000Z", "max_issues_repo_path": "scripts/components/color-palette-custom/docs/story.js", "max_issues_repo_name": "dmnyk/eightshift-frontend-libs", "max_issues_repo_issues_event_min_datetime": "2019-10-29T05:34:20.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T09:12:19.000Z", "max_forks_repo_path": "scripts/components/color-palette-custom/docs/story.js", "max_forks_repo_name": "dmnyk/eightshift-frontend-libs", "max_forks_repo_forks_event_min_datetime": "2021-01-15T22:51:24.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-07T14:58:46.000Z"}
{"max_stars_count": 73, "max_issues_count": 326, "max_forks_count": 9, "avg_line_length": 16.5, "max_line_length": 61, "alphanum_fraction": 0.6363636364}
import React from 'react';
import readme from './readme.mdx';
import { ColorPaletteCustom } from '../color-palette-custom';
import { getPaletteColors } from '../../../editor';

export default {
	title: 'Options/Color Palette',
	parameters: {
		docs: {
			page: readme
		}
	},
};

const defaultProps = {
	label: 'Color Selector',
	help: 'Change color.',
	onChange: () => {},
	value: 'Color',
};

export const ColorsFromColorPalette = () => (
	<ColorPaletteCustom
		{...defaultProps}
	/>
);

export const SelectedColorsFromColorPalette = () => {

	const {
		primary,
	} = getPaletteColors();

	return (
		<ColorPaletteCustom
			{...defaultProps}
			label={'Selected colors from color palette'}
			colors={[primary]}
		/>

	);
};

export const CustomSpecificColor = () => {
	const specificColor = {
		name: 'Specific',
		slug: 'specific',
		color: '#FF11BB',
	};

	return (
		<ColorPaletteCustom
			{...defaultProps}
			label={'Custom specific color'}
			colors={[specificColor]}
		/>
	);
};

