-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.tsx
86 lines (79 loc) · 1.88 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
* External dependencies
*/
import type { ComponentMeta, ComponentStory } from '@storybook/react';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import PaletteEdit from '..';
import type { Color, Gradient } from '../types';
const meta: ComponentMeta< typeof PaletteEdit > = {
title: 'Components/PaletteEdit',
component: PaletteEdit,
parameters: {
actions: { argTypesRegex: '^on.*' },
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};
export default meta;
const Template: ComponentStory< typeof PaletteEdit > = ( args ) => {
const { colors, gradients, onChange, ...props } = args;
const [ value, setValue ] = useState( gradients || colors );
return (
<PaletteEdit
{ ...( gradients
? {
gradients: value as Gradient[],
onChange: ( newValue?: Gradient[] ) => {
setValue( newValue );
onChange( newValue );
},
}
: {
colors: value as Color[],
onChange: ( newValue?: Color[] ) => {
setValue( newValue );
onChange( newValue );
},
} ) }
{ ...props }
/>
);
};
export const Default = Template.bind( {} );
Default.args = {
colors: [
{ color: '#1a4548', name: 'Primary', slug: 'primary' },
{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
],
paletteLabel: 'Colors',
emptyMessage: 'Colors are empty',
popoverProps: {
placement: 'bottom-start',
offset: 8,
},
};
export const Gradients = Template.bind( {} );
Gradients.args = {
gradients: [
{
gradient:
'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
name: 'Pale ocean',
slug: 'pale-ocean',
},
{
gradient:
'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
name: 'Midnight',
slug: 'midnight',
},
],
paletteLabel: 'Gradients',
emptyMessage: 'Gradients are empty',
};