Fixes

PostHog · Jan 2, 2025 · 8d0f9c2 · 8d0f9c2
1 parent c9e989d
commit 8d0f9c2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git 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: <IconInfo />,
+                },
+                children: (
+                    <span className="text-sm">
+                        I am <span className="italic">customized...</span>
+                    </span>
+                ),
+            },
+            content: <span>Panel 1 content</span>,
+        },
+        {
+            key: '2',
+            header: 'I am not :(',
+            content: <span>Panel 2 content</span>,
+        },
+    ],
+}
diff --git 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<K extends React.Key> {
     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 (
         <div className="LemonCollapsePanel" aria-expanded={isExpanded}>
             {content ? (
                 <LemonButton
-                    onClick={() => {
+                    {...headerProps}
+                    fullWidth
+                    className="LemonCollapsePanel__header"
+                    onClick={(e) => {
                         onHeaderClick && onHeaderClick()
                         onChange(!isExpanded)
+                        headerProps.onClick?.(e)
                     }}
                     icon={isExpanded ? <IconCollapse /> : <IconExpand />}
-                    className="LemonCollapsePanel__header"
                     {...(dataAttr ? { 'data-attr': dataAttr } : {})}
                     size={size}
-                >
-                    {header}
-                </LemonButton>
+                />
             ) : (
                 <LemonButton
                     className="LemonCollapsePanel__header LemonCollapsePanel__header--disabled"

diff --git a/frontend/src/scenes/billing/AllProductsPlanComparison.tsx b/frontend/src/scenes/billing/AllProductsPlanComparison.tsx
@@ -331,6 +331,7 @@ export const AllProductsPlanComparison = ({
             <h3>Product features breakdown:</h3>
             <LemonCollapse
                 defaultActiveKey={product.type}
+                size="large"
                 panels={
                     sortedProducts.map((currentProduct) => ({
                         header: (