gutenberg/packages/components/src/border-control/stories/index.js at 345b49a0c940524c26a6d3166e04900acefc0e24 · WordPress/gutenberg · GitHub

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
/**
 * External dependencies
 */
import styled from '@emotion/styled';

/**
 * WordPress dependencies
 */
import { useState } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { BorderControl } from '../';

export default {
	title: 'Components (Experimental)/BorderControl',
	component: BorderControl,
};

// Available border colors.
const colors = [
	{ name: 'Gray 0', color: '#f6f7f7' },
	{ name: 'Gray 5', color: '#dcdcde' },
	{ name: 'Gray 20', color: '#a7aaad' },
	{ name: 'Gray 70', color: '#3c434a' },
	{ name: 'Gray 100', color: '#101517' },
	{ name: 'Blue 20', color: '#72aee6' },
	{ name: 'Blue 40', color: '#3582c4' },
	{ name: 'Blue 70', color: '#0a4b78' },
	{ name: 'Red 40', color: '#e65054' },
	{ name: 'Red 70', color: '#8a2424' },
	{ name: 'Green 10', color: '#68de7c' },
	{ name: 'Green 40', color: '#00a32a' },
	{ name: 'Green 60', color: '#007017' },
	{ name: 'Yellow 10', color: '#f2d675' },
	{ name: 'Yellow 40', color: '#bd8600' },
];

// Multiple origin colors.
const multipleOriginColors = [
	{
		name: 'Default',
		colors: [
			{ name: 'Gray 0', color: '#f6f7f7' },
			{ name: 'Gray 5', color: '#dcdcde' },
			{ name: 'Gray 20', color: '#a7aaad' },
			{ name: 'Gray 70', color: '#3c434a' },
			{ name: 'Gray 100', color: '#101517' },
		],
	},
	{
		name: 'Theme',
		colors: [
			{ name: 'Blue 20', color: '#72aee6' },
			{ name: 'Blue 40', color: '#3582c4' },
			{ name: 'Blue 70', color: '#0a4b78' },
			{ name: 'Red 40', color: '#e65054' },
			{ name: 'Red 70', color: '#8a2424' },
		],
	},
	{
		name: 'User',
		colors: [
			{ name: 'Green 10', color: '#68de7c' },
			{ name: 'Green 40', color: '#00a32a' },
			{ name: 'Green 60', color: '#007017' },
			{ name: 'Yellow 10', color: '#f2d675' },
			{ name: 'Yellow 40', color: '#bd8600' },
		],
	},
];

const _default = ( props ) => {
	const [ border, setBorder ] = useState();
	const onChange = ( newBorder ) => setBorder( newBorder );
	const { __experimentalHasMultipleOrigins } = props;

	return (
		<WrapperView>
			<BorderControl
				{ ...props }
				colors={
					__experimentalHasMultipleOrigins
						? multipleOriginColors
						: colors
				}
				label="Border"
				onChange={ onChange }
				value={ border }
				width={ ! props.isCompact && props.width }
			/>
		</WrapperView>
	);
};

export const Default = _default.bind( {} );
Default.args = {
	disableCustomColors: false,
	enableAlpha: true,
	enableStyle: true,
	isCompact: true,
	shouldSanitizeBorder: true,
	showDropdownHeader: false,
	width: '110px',
	withSlider: true,
	__experimentalIsRenderedInSidebar: false,
	__experimentalHasMultipleOrigins: false,
};

const WrapperView = styled.div`
	max-width: 280px;
`;