-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add the storybook story for the GradientPicker component
- Loading branch information
1 parent
527e7f1
commit 9d99753
Showing
2 changed files
with
469 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { text, boolean, object } from '@storybook/addon-knobs'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useState } from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import GradientPicker from '../'; | ||
|
||
export default { | ||
title: 'Components/GradientPicker', | ||
component: GradientPicker, | ||
}; | ||
|
||
const GradientPickerWithState = ( props ) => { | ||
const [ gradient, setGradient ] = useState(); | ||
return ( | ||
<GradientPicker | ||
{ ...props } | ||
value={ gradient } | ||
onChange={ setGradient } | ||
/> | ||
); | ||
}; | ||
|
||
export const _default = () => { | ||
const disableCustomGradients = boolean( 'Disable Custom Gradients', false ); | ||
const clearable = boolean( 'Clearable', true ); | ||
const className = text( 'Class Name', '' ); | ||
const gradients = object( 'Gradients', [ | ||
{ | ||
name: 'Vivid cyan blue to vivid purple', | ||
gradient: | ||
'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', | ||
slug: 'vivid-cyan-blue-to-vivid-purple', | ||
}, | ||
{ | ||
name: 'Light green cyan to vivid green cyan', | ||
gradient: | ||
'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)', | ||
slug: 'light-green-cyan-to-vivid-green-cyan', | ||
}, | ||
{ | ||
name: 'Luminous vivid amber to luminous vivid orange', | ||
gradient: | ||
'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)', | ||
slug: 'luminous-vivid-amber-to-luminous-vivid-orange', | ||
}, | ||
{ | ||
name: 'Luminous vivid orange to vivid red', | ||
gradient: | ||
'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)', | ||
slug: 'luminous-vivid-orange-to-vivid-red', | ||
}, | ||
{ | ||
name: 'Very light gray to cyan bluish gray', | ||
gradient: | ||
'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)', | ||
slug: 'very-light-gray-to-cyan-bluish-gray', | ||
}, | ||
{ | ||
name: 'Cool to warm spectrum', | ||
gradient: | ||
'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)', | ||
slug: 'cool-to-warm-spectrum', | ||
}, | ||
] ); | ||
|
||
return ( | ||
<GradientPickerWithState | ||
disableCustomGradients={ disableCustomGradients } | ||
gradients={ gradients } | ||
clearable={ clearable } | ||
className={ className } | ||
/> | ||
); | ||
}; |
Oops, something went wrong.