Panel: Convert to TypeScript

packages/components/CHANGELOG.md

@@ -18,6 +18,7 @@
 
 -   `Toolbar`: unify Storybook examples under one file, migrate from knobs to controls ([47117](https://github.com/WordPress/gutenberg/pull/47117)).
 -   `DropdownMenu`: migrate Storybook to controls ([47149](https://github.com/WordPress/gutenberg/pull/47149)).
+-   `Panel`, `PanelHeader`, `PanelRow`: Convert to TypeScript ([#47259](https://github.com/WordPress/gutenberg/pull/47259)).
 -   Removed deprecated `@storybook/addon-knobs` dependency from the package ([47152](https://github.com/WordPress/gutenberg/pull/47152)).
 -   `ColorListPicker`: Convert to TypeScript ([#46358](https://github.com/WordPress/gutenberg/pull/46358)).
 -   `KeyboardShortcuts`: Convert to TypeScript ([#47429](https://github.com/WordPress/gutenberg/pull/47429)).

packages/components/src/panel/README.md

@@ -161,7 +161,7 @@ Props that are passed to the `Button` component in the `PanelBodyTitle` within t
 
 #### PanelRow
 
-The `PanelRow` is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
+`PanelRow` is a generic container for rows within a `PanelBody`. It is a flex container with a top margin for spacing.
 
 ##### Props
 
@@ -182,7 +182,7 @@ PanelRow accepts a forwarded ref that will be added to the wrapper div. Usage:
 
 #### PanelHeader
 
-This is a simple container for a header component. This is used by the `Panel` component under the hood, so it does not typically need to be used.
+`PanelHeader` renders the header for the `Panel`. This is used by the `Panel` component under the hood, so it does not typically need to be used.
 
 ##### Props
 

packages/components/src/panel/header.tsx

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { PanelHeaderProps } from './types';
+
+/**
+ * `PanelHeader` renders the header for the `Panel`.
+ * This is used by the `Panel` component under the hood,
+ * so it does not typically need to be used.
+ */
+function PanelHeader( { label, children }: PanelHeaderProps ) {
+	return (
+		<div className="components-panel__header">
+			{ label && <h2>{ label }</h2> }
+			{ children }
+		</div>
+	);
+}
+
+export default PanelHeader;

packages/components/src/panel/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PanelHeader from './header';
+import type { PanelProps } from './types';
+
+function UnforwardedPanel(
+	{ header, className, children }: PanelProps,
+	ref: React.ForwardedRef< HTMLDivElement >
+) {
+	const classNames = classnames( className, 'components-panel' );
+	return (
+		<div className={ classNames } ref={ ref }>
+			{ header && <PanelHeader label={ header } /> }
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * `Panel` expands and collapses multiple sections of content.
+ *
+ * ```jsx
+ * import { Panel, PanelBody, PanelRow } from '@wordpress/components';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MyPanel = () => (
+ * 	<Panel header="My Panel">
+ * 		<PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
+ * 			<PanelRow>My Panel Inputs and Labels</PanelRow>
+ * 		</PanelBody>
+ * 	</Panel>
+ * );
+ * ```
+ */
+export const Panel = forwardRef( UnforwardedPanel );
+
+export default Panel;

packages/components/src/panel/row.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { PanelRowProps } from './types';
+
+function UnforwardedPanelRow(
+	{ className, children }: PanelRowProps,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	return (
+		<div
+			className={ classnames( 'components-panel__row', className ) }
+			ref={ ref }
+		>
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * `PanelRow` is a generic container for rows within a `PanelBody`.
+ * It is a flex container with a top margin for spacing.
+ */
+export const PanelRow = forwardRef( UnforwardedPanelRow );
+
+export default PanelRow;

packages/components/src/panel/stories/index.js

@@ -4,6 +4,7 @@
 import Panel from '../';
 import PanelRow from '../row';
 import PanelBody from '../body';
+import InputControl from '../../input-control';
 
 /**
  * WordPress dependencies
@@ -56,6 +57,27 @@ Default.args = {
 	),
 };
 
+/**
+ * `PanelRow` is a generic container for rows within a `PanelBody`.
+ * It is a flex container with a top margin for spacing.
+ */
+export const _PanelRow = Template.bind( {} );
+_PanelRow.args = {
+	children: (
+		<PanelBody title="My Profile">
+			<PanelRow>
+				<InputControl label="First name" />
+				<InputControl label="Last name" />
+			</PanelRow>
+			<PanelRow>
+				<div style={ { flex: 1 } }>
+					<InputControl label="Email" />
+				</div>
+			</PanelRow>
+		</PanelBody>
+	),
+};
+
 export const DisabledSection = Template.bind( {} );
 DisabledSection.args = {
 	...Default.args,

packages/components/src/panel/test/header.js → packages/components/src/panel/test/header.tsx

@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import PanelHeader from '../header.js';
+import PanelHeader from '../header';
 
 describe( 'PanelHeader', () => {
 	describe( 'basic rendering', () => {

packages/components/src/panel/test/index.js → packages/components/src/panel/test/index.tsx

@@ -6,26 +6,28 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Panel from '../';
+import Panel from '..';
 
 describe( 'Panel', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div without any provided props', () => {
-			const { container } = render( <Panel /> );
+			const { container } = render( <Panel children={ null } /> );
 
 			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render a heading when provided text in the header prop', () => {
-			render( <Panel header="Header Label" /> );
+			render( <Panel header="Header Label" children={ null } /> );
 
 			const heading = screen.getByRole( 'heading' );
 			expect( heading ).toBeVisible();
 			expect( heading ).toHaveTextContent( 'Header Label' );
 		} );
 
 		it( 'should render an additional className', () => {
-			const { container } = render( <Panel className="the-panel" /> );
+			const { container } = render(
+				<Panel className="the-panel" children={ null } />
+			);
 
 			expect( container ).toMatchSnapshot();
 		} );

packages/components/src/panel/test/row.js → packages/components/src/panel/test/row.tsx

@@ -10,13 +10,15 @@ import PanelRow from '../row';
 
 describe( 'PanelRow', () => {
 	it( 'should render with the default class name', () => {
-		const { container } = render( <PanelRow /> );
+		const { container } = render( <PanelRow children={ null } /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render with the custom class name', () => {
-		const { container } = render( <PanelRow className="custom" /> );
+		const { container } = render(
+			<PanelRow className="custom" children={ null } />
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );

packages/components/src/panel/types.ts

@@ -0,0 +1,38 @@
+export type PanelProps = {
+	/**
+	 * The text that will be rendered as the title of the panel.
+	 * Text will be rendered inside an `<h2>` tag.
+	 */
+	header?: PanelHeaderProps[ 'label' ];
+	/**
+	 * The CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The content to display within the panel.
+	 */
+	children: React.ReactNode;
+};
+
+export type PanelHeaderProps = {
+	/**
+	 * The text that will be rendered as the title of the panel.
+	 * Will be rendered in an `<h2>` tag.
+	 */
+	label?: string;
+	/**
+	 * The content to display within the panel header.
+	 */
+	children?: React.ReactNode;
+};
+
+export type PanelRowProps = {
+	/**
+	 * The CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The content to display within the panel row.
+	 */
+	children: React.ReactNode;
+};

packages/components/tsconfig.json

@@ -58,7 +58,7 @@
 		"src/menu-items-choice",
 		"src/navigation",
 		"src/palette-edit",
-		"src/panel",
+		"src/panel/body.js",
 		"src/toolbar",
 		"src/tree-grid"
 	]