Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FontSizePicker: Refactor stories to use Controls #38727

Merged
merged 7 commits into from
Mar 2, 2022
Merged

FontSizePicker: Refactor stories to use Controls #38727

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fdce407
FontSizePicker: Refactor stories to use Controls
mirka Feb 11, 2022
b3928bb
Fix docs for `withReset`
mirka Feb 18, 2022
7daac71
Expand code snippets and show descriptions in Controls
mirka Feb 18, 2022
06bfa77
Tweak `withReset` setup for better code snippets
mirka Feb 18, 2022
71130fa
Add manual descriptions for confusing props
mirka Feb 18, 2022
ad5a988
Add descriptions to confusing stories
mirka Feb 18, 2022
a2b660e
Improve story description
mirka Mar 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 58 additions & 109 deletions packages/components/src/font-size-picker/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { number, object, boolean } from '@storybook/addon-knobs';

/**
* WordPress dependencies
*/
Expand All @@ -16,14 +11,13 @@ import FontSizePicker from '../';
export default {
title: 'Components/FontSizePicker',
component: FontSizePicker,
parameters: {
knobs: { disable: false },
argTypes: {
initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
},
};

const FontSizePickerWithState = ( { initialValue, ...props } ) => {
const [ fontSize, setFontSize ] = useState( initialValue || 16 );

const [ fontSize, setFontSize ] = useState( initialValue );
return (
<FontSizePicker
{ ...props }
Expand All @@ -33,57 +27,25 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
);
};

export const _default = () => {
const fontSizes = object( 'Font Sizes', [
{
name: 'Small',
slug: 'small',
size: 12,
},
{
name: 'Normal',
slug: 'normal',
size: 16,
},
{
name: 'Big',
slug: 'big',
size: 26,
},
] );
return <FontSizePickerWithState fontSizes={ fontSizes } />;
};

export const withSlider = () => {
const fontSizes = object( 'Font Sizes', [
{
name: 'Small',
slug: 'small',
size: 12,
},
{
name: 'Normal',
slug: 'normal',
size: 16,
},
{
name: 'Big',
slug: 'big',
size: 26,
},
] );
const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
return (
<FontSizePickerWithState
fontSizes={ fontSizes }
fallbackFontSize={ fallbackFontSize }
withSlider
/>
<>
<h2>Fewer font sizes</h2>
<FontSizePickerWithState
{ ...props }
fontSizes={ fontSizes.slice( 0, 4 ) }
/>

<h2>More font sizes</h2>
<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
</>
);
};

export const withoutCustomSizes = () => {
const fontSizes = object( 'Font Sizes', [
export const Default = FontSizePickerWithState.bind( {} );
Default.args = {
disableCustomFontSizes: false,
fontSizes: [
{
name: 'Small',
slug: 'small',
Expand All @@ -99,17 +61,30 @@ export const withoutCustomSizes = () => {
slug: 'big',
size: 26,
},
] );
return (
<FontSizePickerWithState
fontSizes={ fontSizes }
disableCustomFontSizes
/>
);
],
initialValue: 16,
withSlider: false,
withReset: true,
};

export const WithSlider = FontSizePickerWithState.bind( {} );
WithSlider.args = {
...Default.args,
fallbackFontSize: 16,
initialValue: undefined,
withSlider: true,
};

export const differentControlBySize = () => {
const options = [
export const WithoutCustomSizes = FontSizePickerWithState.bind( {} );
WithoutCustomSizes.args = {
...Default.args,
disableCustomFontSizes: true,
};

export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
WithMoreFontSizes.args = {
...Default.args,
fontSizes: [
{
name: 'Tiny',
slug: 'tiny',
Expand Down Expand Up @@ -140,29 +115,29 @@ export const differentControlBySize = () => {
slug: 'huge',
size: 36,
},
];
const optionsWithUnits = options.map( ( option ) => ( {
],
initialValue: 8,
};

export const WithUnits = TwoFontSizePickersWithState.bind( {} );
WithUnits.args = {
...WithMoreFontSizes.args,
fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
...option,
size: `${ option.size }px`,
} ) );
const showMoreFontSizes = boolean( 'Add more font sizes', false );
const addUnitsToSizes = boolean( 'Add units to font sizes', false );
const _options = addUnitsToSizes ? optionsWithUnits : options;
const fontSizes = _options.slice(
0,
showMoreFontSizes ? _options.length : 4
);
return (
<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
);
} ) ),
initialValue: '8px',
};

export const withComplexCSSValues = () => {
const options = [
export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
WithComplexCSSValues.args = {
...Default.args,
fontSizes: [
{
name: 'Small',
slug: 'small',
size: '0.65rem',
// Adding just one complex css value is enough
size: 'clamp(1.75rem, 3vw, 2.25rem)',
},
{
name: 'Medium',
Expand All @@ -189,32 +164,6 @@ export const withComplexCSSValues = () => {
slug: 'huge',
size: '2.8rem',
},
];
const showMoreFontSizes = boolean( 'Add more font sizes', false );
const addComplexCssValues = boolean(
'Add some complex css values(calc, var, etc..)',
true
);

const _options = options.map( ( option, index ) => {
const _option = { ...option };
// Adding just one complex css value is enough (first element);
if ( addComplexCssValues && ! index ) {
_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
}
return _option;
} );

const fontSizes = _options.slice(
0,
showMoreFontSizes ? _options.length : 5
);
return (
<div style={ { maxWidth: '248px' } }>
<FontSizePickerWithState
fontSizes={ fontSizes }
initialValue={ '1.125rem' }
/>
</div>
);
],
initialValue: '1.125rem',
};