70 lines
1.4 KiB
TypeScript
70 lines
1.4 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useState } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
CardDivider,
|
|
CardHeader,
|
|
CardFooter,
|
|
Button,
|
|
} from '@wordpress/components';
|
|
import { chevronUp, chevronDown } from '@wordpress/icons';
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { CardHeaderTitle } from '~/marketing/components';
|
|
import './CollapsibleCard.scss';
|
|
|
|
type CollapsibleCardProps = {
|
|
header: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
footer?: React.ReactNode;
|
|
initialCollapsed?: boolean;
|
|
};
|
|
|
|
const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
|
|
header,
|
|
children,
|
|
className,
|
|
footer,
|
|
initialCollapsed = false,
|
|
} ) => {
|
|
const [ collapsed, setCollapsed ] = useState( initialCollapsed );
|
|
|
|
const handleClick = () => {
|
|
setCollapsed( ! collapsed );
|
|
};
|
|
|
|
return (
|
|
<Card className={ clsx( 'woocommerce-collapsible-card', className ) }>
|
|
<CardHeader onClick={ handleClick }>
|
|
<CardHeaderTitle>{ header }</CardHeaderTitle>
|
|
<Button
|
|
isSmall
|
|
icon={ collapsed ? chevronDown : chevronUp }
|
|
label={
|
|
collapsed
|
|
? __( 'Expand', 'woocommerce' )
|
|
: __( 'Collapse', 'woocommerce' )
|
|
}
|
|
onClick={ handleClick }
|
|
/>
|
|
</CardHeader>
|
|
{ ! collapsed && (
|
|
<>
|
|
{ children }
|
|
{ !! footer && <CardFooter>{ footer }</CardFooter> }
|
|
</>
|
|
) }
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { CollapsibleCard, CardBody, CardDivider };
|