Panel: Remove knobs from stories (#46958)

* Panel: Remove knobs from stories * PanelRow: Tweak export to fix displayName
WordPress · Jan 10, 2023 · 94e06b2 · 94e06b2 · github-actions · Jan 10, 2023
1 parent 9f6e003
commit 94e06b2
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 83 deletions.
diff --git a/packages/components/src/panel/row.js b/packages/components/src/panel/row.js
@@ -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 );
diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
@@ -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%' } } />;
-}