diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx index 5102580de711e..39f768818e44f 100644 --- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx @@ -1,3 +1,4 @@ +import { IconInfo } from '@posthog/icons' import { Meta, StoryFn, StoryObj } from '@storybook/react' import { LemonCollapse as LemonCollapseComponent } from './LemonCollapse' @@ -36,3 +37,32 @@ Multiple.args = { defaultActiveKeys: ['1', '2'], multiple: true } export const Small: Story = Template.bind({}) Small.args = { size: 'small', multiple: true } + +export const Large: Story = Template.bind({}) +Large.args = { size: 'large', multiple: true } + +export const CustomizedHeaders: Story = Template.bind({}) +CustomizedHeaders.args = { + panels: [ + { + key: '1', + header: { + sideAction: { + onClick: () => alert('You clicked me!'), + icon: , + }, + children: ( + + I am customized... + + ), + }, + content: Panel 1 content, + }, + { + key: '2', + header: 'I am not :(', + content: Panel 2 content, + }, + ], +} diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx index 7972baa4bb421..6064980d633b9 100644 --- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx +++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx @@ -11,7 +11,7 @@ import { LemonButton, LemonButtonProps } from '../LemonButton' export interface LemonCollapsePanel { key: K - header: ReactNode + header: string | LemonButtonProps content: ReactNode dataAttr?: string className?: string @@ -120,21 +120,28 @@ function LemonCollapsePanel({ }: LemonCollapsePanelProps): JSX.Element { const { height: contentHeight, ref: contentRef } = useResizeObserver({ box: 'border-box' }) + const headerProps: LemonButtonProps = React.isValidElement(header) + ? { children: header } + : typeof header === 'string' + ? { children: header } + : header ?? {} + return (
{content ? ( { + {...headerProps} + fullWidth + className="LemonCollapsePanel__header" + onClick={(e) => { onHeaderClick && onHeaderClick() onChange(!isExpanded) + headerProps.onClick?.(e) }} icon={isExpanded ? : } - className="LemonCollapsePanel__header" {...(dataAttr ? { 'data-attr': dataAttr } : {})} size={size} - > - {header} - + /> ) : ( Product features breakdown: ({ header: (