-
Notifications
You must be signed in to change notification settings - Fork 4k
/
default.story.tsx
143 lines (135 loc) · 3.3 KB
/
default.story.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import CustomSelectControlV2 from '..';
const meta: Meta< typeof CustomSelectControlV2 > = {
title: 'Components (Experimental)/CustomSelectControl v2/Default',
component: CustomSelectControlV2,
subcomponents: {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
'CustomSelectControlV2.Item': CustomSelectControlV2.Item,
},
argTypes: {
children: { control: { type: null } },
value: { control: { type: null } },
},
tags: [ 'status-wip' ],
parameters: {
badges: [ 'wip' ],
actions: { argTypesRegex: '^on.*' },
controls: { expanded: true },
docs: {
source: { excludeDecorators: true },
},
},
decorators: [
( Story ) => (
<div
style={ {
minHeight: '150px',
} }
>
<Story />
</div>
),
],
};
export default meta;
const Template: StoryFn< typeof CustomSelectControlV2 > = ( props ) => {
const [ value, setValue ] = useState< string | string[] >();
return (
<CustomSelectControlV2
{ ...props }
onChange={ ( nextValue: string | string[] ) => {
setValue( nextValue );
props.onChange?.( nextValue );
} }
value={ value }
/>
);
};
export const Default = Template.bind( {} );
Default.args = {
label: 'Label text',
defaultValue: 'Select a color...',
children: (
<>
<CustomSelectControlV2.Item value="Blue">
<span style={ { color: 'blue' } }>Blue</span>
</CustomSelectControlV2.Item>
<CustomSelectControlV2.Item value="Purple">
<span style={ { color: 'purple' } }>Purple</span>
</CustomSelectControlV2.Item>
<CustomSelectControlV2.Item value="Pink">
<span style={ { color: 'deeppink' } }>Pink</span>
</CustomSelectControlV2.Item>
</>
),
};
/**
* Multiple selection can be enabled by using an array for the `value` and
* `defaultValue` props. The argument type of the `onChange` function will also
* change accordingly.
*/
export const MultipleSelection = Template.bind( {} );
MultipleSelection.args = {
label: 'Select Colors',
defaultValue: [ 'lavender', 'tangerine' ],
children: (
<>
{ [
'amber',
'aquamarine',
'flamingo pink',
'lavender',
'maroon',
'tangerine',
].map( ( item ) => (
<CustomSelectControlV2.Item key={ item } value={ item }>
{ item }
</CustomSelectControlV2.Item>
) ) }
</>
),
};
const renderItem = ( gravatar: string | string[] ) => {
const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
return (
<div style={ { display: 'flex', alignItems: 'center' } }>
<img
style={ { maxHeight: '75px', marginRight: '10px' } }
src={ avatar }
alt=""
/>
<span>{ gravatar }</span>
</div>
);
};
/**
* The `renderSelectedValue` prop can be used to customize how the selected value
* is rendered in the dropdown trigger.
*/
export const CustomSelectedValue = Template.bind( {} );
CustomSelectedValue.args = {
label: 'Default Gravatars',
renderSelectedValue: renderItem,
children: (
<>
{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
( option ) => (
<CustomSelectControlV2.Item key={ option } value={ option }>
{ renderItem( option ) }
</CustomSelectControlV2.Item>
)
) }
</>
),
};