@payfit/unity-components
Version:
58 lines (57 loc) • 2.27 kB
TypeScript
import { ReactNode } from 'react';
import { SpacingToken } from '../../../utils/spacing.js';
import { ResponsiveValue } from '../../../hooks/use-responsive-value.js';
/**
* @description
* The CollapsibleContent component renders the content that is shown or hidden
* when the parent Collapsible component is expanded or collapsed.
*/
export interface CollapsibleContentProps {
/**
* The content to be shown or hidden.
*/
children: ReactNode;
/**
* Sets the left indentation of the panel content with a Unity spacing token.
* Accepts responsive values such as `{ base: '$400', md: '$800' }`.
* @default '$400'
*/
leftMargin?: SpacingToken | ResponsiveValue<SpacingToken>;
}
/**
* The content component for a Collapsible.
*
* This component renders a DisclosurePanel that shows or hides its content
* based on the expanded state of the parent Collapsible component.
* @example
* ```tsx
* import {
* Collapsible,
* CollapsibleContent,
* CollapsibleTitle,
* } from '@payfit/unity-components'
*
* function Example() {
* return (
* <Collapsible>
* <CollapsibleTitle>Section Title</CollapsibleTitle>
* <CollapsibleContent leftMargin={{ initial: '$400', md: '$800' }}>
* This content will be shown or hidden based on the expanded state.
* </CollapsibleContent>
* </Collapsible>
* )
* }
* ```
* @remarks
* - The content is visible only when the parent Collapsible is expanded.
* - The default `leftMargin` is `$400`, matching the standard title indentation.
* - Pass a responsive `leftMargin` value to adapt indentation across breakpoints.
* @see {@link Collapsible} - The parent component
* @see {@link CollapsibleTitle} - The title component that toggles the expanded state
* @param {CollapsibleContentProps} props - The component props
* @param {ReactNode} props.children - The content to be shown or hidden
* @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
* @returns {JSX.Element} The rendered CollapsibleContent component
*/
declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
export { CollapsibleContent };