Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
optometrists
/
cache
/
cache
/
cache
/
cache
/
cache
/
.wp-cli
/
wp-content
/
plugins
/
woocommerce
/
packages
/
woocommerce-blocks
/
packages
/
checkout
/
panel
:
index.tsx
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/** * External dependencies */ import { useState } from '@wordpress/element'; import type { ReactNode, ReactElement } from 'react'; import classNames from 'classnames'; import { Icon, chevronUp, chevronDown } from '@woocommerce/icons'; /** * Internal dependencies */ import './style.scss'; interface PanelProps { children?: ReactNode; className?: string; initialOpen?: boolean; hasBorder?: boolean; title?: ReactNode; titleTag?: keyof JSX.IntrinsicElements; } const Panel = ( { children, className, initialOpen = false, hasBorder = false, title, titleTag: TitleTag = 'div', }: PanelProps ): ReactElement => { const [ isOpen, setIsOpen ] = useState< boolean >( initialOpen ); return ( <div className={ classNames( className, 'wc-block-components-panel', { 'has-border': hasBorder, } ) } > <TitleTag> <button aria-expanded={ isOpen } className="wc-block-components-panel__button" onClick={ () => setIsOpen( ! isOpen ) } > <Icon aria-hidden="true" className="wc-block-components-panel__button-icon" srcElement={ isOpen ? chevronUp : chevronDown } /> { title } </button> </TitleTag> <div className="wc-block-components-panel__content" hidden={ ! isOpen } > { children } </div> </div> ); }; export default Panel;