Skip to content

Commit

Permalink
Add FontSizePicker component to Storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
brentswisher committed Oct 30, 2019
1 parent 5eb2f23 commit 89c1d02
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions packages/components/src/font-size-picker/stories/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import FontSizePicker from '../';

export default { title: 'FontSizePicker', component: FontSizePicker };

const FontSizePickerWithState = ( { ...props } ) => {
const [ fontSize, setFontSize ] = useState( 16 );
const fontSizes = [
{
name: 'Small',
slug: 'small',
size: 12,
},
{
name: 'Normal',
slug: 'normal',
size: 16,
},
{
name: 'Big',
slug: 'big',
size: 26,
},
];
const fallbackFontSize = 16;

return (
<FontSizePicker
{ ...props }
fontSizes={ fontSizes }
fallbackFontSize={ fallbackFontSize }
value={ fontSize }
onChange={ setFontSize }
/>
);
};

export const _default = () => {
return (
<FontSizePickerWithState />
);
};

export const withSlider = () => {
return (
<FontSizePickerWithState
withSlider={ true }
/>
);
};

export const withoutCustomSizes = () => {
return (
<FontSizePickerWithState
disableCustomFontSizes={ true }
/>
);
};

0 comments on commit 89c1d02

Please sign in to comment.