Skip to content

Commit

Permalink
Panel: Remove knobs from stories (#46958)
Browse files Browse the repository at this point in the history
* Panel: Remove knobs from stories

* PanelRow: Tweak export to fix displayName
  • Loading branch information
mirka authored Jan 10, 2023
1 parent 9f6e003 commit 94e06b2
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 83 deletions.
6 changes: 3 additions & 3 deletions packages/components/src/panel/row.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import classnames from 'classnames';
*/
import { forwardRef } from '@wordpress/element';

const PanelRow = forwardRef( ( { className, children }, ref ) => (
const PanelRow = ( { className, children }, ref ) => (
<div
className={ classnames( 'components-panel__row', className ) }
ref={ ref }
>
{ children }
</div>
) );
);

export default PanelRow;
export default forwardRef( PanelRow );
142 changes: 62 additions & 80 deletions packages/components/src/panel/stories/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { boolean, text } from '@storybook/addon-knobs';

/**
* Internal dependencies
*/
Expand All @@ -18,88 +13,75 @@ import { wordpress } from '@wordpress/icons';
export default {
title: 'Components/Panel',
component: Panel,
subcomponents: { PanelRow, PanelBody },
argTypes: {
children: { control: { type: null } },
},
parameters: {
knobs: { disable: false },
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};

export const _default = () => {
const bodyTitle = text( 'Body Title', 'My Block Settings' );
const opened = boolean( 'Opened', true );
const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
return (
<Panel header="My Panel">
<PanelBody title={ bodyTitle } opened={ opened }>
<PanelRow>{ rowText }</PanelRow>
const Template = ( props ) => <Panel { ...props } />;

export const Default = Template.bind( {} );
Default.args = {
header: 'My panel',
children: (
<>
<PanelBody title="First section">
<PanelRow>
<div
style={ {
background: '#ddd',
height: 100,
width: '100%',
} }
/>
</PanelRow>
</PanelBody>
<PanelBody title="Second section" initialOpen={ false }>
<PanelRow>
<div
style={ {
background: '#ddd',
height: 100,
width: '100%',
} }
/>
</PanelRow>
</PanelBody>
</Panel>
);
</>
),
};

export const multipleBodies = () => {
return (
<ScrollableContainer>
<Panel header="My Panel">
<PanelBody title="First Settings">
<PanelRow>
<Placeholder height={ 250 } />
</PanelRow>
</PanelBody>
<PanelBody title="Second Settings" initialOpen={ false }>
<PanelRow>
<Placeholder height={ 400 } />
</PanelRow>
</PanelBody>
<PanelBody title="Third Settings" initialOpen={ false }>
<PanelRow>
<Placeholder height={ 600 } />
</PanelRow>
</PanelBody>
<PanelBody title="Fourth Settings" initialOpen={ false }>
<PanelRow>
<Placeholder />
</PanelRow>
</PanelBody>
<PanelBody
title="Disabled Settings"
initialOpen={ false }
buttonProps={ { disabled: true } }
/>
</Panel>
</ScrollableContainer>
);
export const DisabledSection = Template.bind( {} );
DisabledSection.args = {
...Default.args,
children: (
<PanelBody
title="Disabled section"
initialOpen={ false }
buttonProps={ { disabled: true } }
/>
),
};

export const withIcon = () => {
const bodyTitle = text( 'Body Title', 'My Block Settings' );
const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
const icon = boolean( 'Icon', true ) ? wordpress : undefined;
const opened = boolean( 'Opened', true );
return (
<Panel header="My Panel">
<PanelBody title={ bodyTitle } opened={ opened } icon={ icon }>
<PanelRow>{ rowText }</PanelRow>
</PanelBody>
</Panel>
);
export const WithIcon = Template.bind( {} );
WithIcon.args = {
...Default.args,
children: (
<PanelBody title="Section title" icon={ wordpress }>
<PanelRow>
<div
style={ {
background: '#ddd',
height: 100,
width: '100%',
} }
/>
</PanelRow>
</PanelBody>
),
};

function ScrollableContainer( { children } ) {
return (
<div
style={ {
width: 300,
height: '100vh',
overflowY: 'auto',
margin: 'auto',
boxShadow: '0 0 0 1px #ddd inset',
} }
>
{ children }
</div>
);
}

function Placeholder( { height = 200 } ) {
return <div style={ { background: '#ddd', height, width: '100%' } } />;
}

1 comment on commit 94e06b2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 94e06b2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3881475378
📝 Reported issues:

Please sign in to comment.