PanelBody refactored into functional component

[jccit]

Description

Related to #22890

How has this been tested?

I've tested the panels in the editor and in storybook and it seems to work fine. However the unit tests are failing. From what I can tell this seems to be because the test can't check the state if we're using React hooks

Types of changes

Refactored PanelBody into a functional component and used React hooks.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[jccit]

I've got 2 more tests to fix before this passes. Not sure how I can get the state from a functional component

[torounit]

expect( panelBody.state( 'opened' ) ).toBe( true );

This line is a test of the variables inside the function.

@youknowriad I'd be happy to give me your idea.

[youknowriad]

Ideally, we avoid testing the internal state, we can test the DOM output instead maybe?

[jccit]

I've added a new DOM attribute to expose the open state of the panel.

In the original tests we can test if the panel is open by seeing if the is-opened class has been applied. However 2 of the tests will check to see if the internal open state and the is-opened class are in sync or not, since you can override the opened state by using an opened prop.

Here's an example of a test where the internal state is false, but the component is forced open via a prop.

expect( panelBody.state( 'opened' ) ).toBe( false );
expect( panelBody.hasClass( 'is-opened' ) ).toBe( true );

panelBody now has data-openstate attached to it so I can test for it by using

panelBody.prop( 'data-openstate' )

I had to update some snapshots but this passes the tests now. I'd like some feedback on this approach since I'm not sure if this is the best way to do this

[jccit]

In hindsight a simpler approach is to remove the state check from the "opened" prop tests since the final state of the panel depends on the opened prop and not the state

[ZebulanStanphill]

Some minor stylistic nitpicks, but otherwise this looks good to go.

[ZebulanStanphill]

This can be simplified using a default parameter.

Suggested change

	initialOpen,
	onToggle,
	} ) {
	const [ isOpenedState, setOpenedState ] = useState(
	initialOpen === undefined ? true : initialOpen
	);
	initialOpen = true,
	onToggle,
	} ) {
	const [ isOpenedState, setOpenedState ] = useState( initialOpen );

[ZebulanStanphill]

This can be simplified using nullish coalescing:

Suggested change

	const isOpened = opened === undefined ? isOpenedState : opened;
	const isOpened = opened ?? isOpenedState;

[ZebulanStanphill]

This can be simplified using optional chaining:

Suggested change

	if ( onToggle ) {
	onToggle();
	}
	onToggle?.();

[ZebulanStanphill]

(Also, it needs a rebase.)

[jccit]

Closing this, seems to have been superseded by #23327