[MP-945] Add controlled Section behavior support

.changeset/tall-boxes-matter.md

@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-section': minor
+---
+
+### Section
+
+- add controlled component behavior support

packages/base/Section/src/Section/Section.tsx

@@ -24,6 +24,10 @@ export interface Props extends BaseProps {
   collapsible?: boolean
   /** Default collapsed value **(applied if `collapsible: true`)** */
   defaultCollapsed?: boolean
+  /** Controlled collapsed state */
+  collapsed?: boolean
+  /** Callback when the collapsed state changes */
+  onToggle?: (collapsed: boolean) => void
   testIds?: {
     header?: string
     title?: string
@@ -80,16 +84,28 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
     testIds,
     collapsible = false,
     defaultCollapsed = true,
+    collapsed,
+    onToggle,
     variant = 'default',
     titleSize = 'medium',
     ...rest
   } = props
 
-  const [collapsed, setCollapsed] = useState(
+  const [internalCollapsed, setInternalCollapsed] = useState(
     collapsible ? defaultCollapsed : false
   )
 
-  const toggleCollapse = () => setCollapsed(!collapsed)
+  const isCollapsed = collapsed !== undefined ? collapsed : internalCollapsed
+
+  const toggleCollapse = () => {
+    const newCollapsed = !isCollapsed
+
+    if (onToggle) {
+      onToggle(newCollapsed)
+    } else {
+      setInternalCollapsed(newCollapsed)
+    }
+  }
 
   const renderTitle = () =>
     title ? (
@@ -124,7 +140,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
         data-testid={testIds?.collapse}
         variant='flat'
         icon={
-          <Rotate180 on={!collapsed}>
+          <Rotate180 on={!isCollapsed}>
             <ArrowDownMinor16 />
           </Rotate180>
         }
@@ -153,7 +169,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
       className={twMerge(
         'pt-8',
         classesByVariant[variant],
-        variant === 'default' && collapsed && 'pb-8',
+        variant === 'default' && isCollapsed && 'pb-8',
         collapsible && variant === 'bordered' && 'p-6',
         className
       )}
@@ -163,15 +179,15 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
           data-testid={testIds?.header}
           className={twJoin(
             classesByHeader[variant],
-            collapsed && classesByCollapsedHeader[variant]
+            isCollapsed && classesByCollapsedHeader[variant]
           )}
         >
           {renderTitle()}
           {renderSubtitle()}
           {renderActions()}
         </Container>
       )}
-      <Collapse in={!collapsed} unmountOnExit>
+      <Collapse in={!isCollapsed} unmountOnExit>
         <Container className={variant === 'withHeaderBar' ? 'p-6' : ''}>
           {children}
         </Container>

packages/base/Section/src/Section/story/Controlled.example.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Button, Container, Section } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+
+const FIRST_SECTION_ID = 0
+const SECOND_SECTION_ID = 1
+
+const Example = () => {
+  const [expandedSection, setExpandedSection] = useState(FIRST_SECTION_ID)
+
+  return (
+    <>
+      <Section
+        collapsible
+        onToggle={collapsed =>
+          setExpandedSection(collapsed ? SECOND_SECTION_ID : FIRST_SECTION_ID)
+        }
+        variant='bordered'
+        title='First section'
+        collapsed={expandedSection !== FIRST_SECTION_ID}
+      >
+        <p>First section content</p>
+        <Button onClick={() => setExpandedSection(SECOND_SECTION_ID)}>
+          Go to second section
+        </Button>
+      </Section>
+      <Container top={SPACING_4}>
+        <Section
+          collapsible
+          onToggle={collapsed =>
+            setExpandedSection(collapsed ? FIRST_SECTION_ID : SECOND_SECTION_ID)
+          }
+          variant='bordered'
+          title='Second section'
+          collapsed={expandedSection !== SECOND_SECTION_ID}
+        >
+          <p>Second section content</p>
+          <Button onClick={() => setExpandedSection(FIRST_SECTION_ID)}>
+            Go to first section
+          </Button>
+        </Section>
+      </Container>
+    </>
+  )
+}
+
+export default Example

packages/base/Section/src/Section/story/index.jsx

@@ -52,3 +52,10 @@ page
     'Title Size',
     'base/Section'
   )
+page
+  .createChapter()
+  .addExample(
+    'Section/story/Controlled.example.tsx',
+    'Controlled Section',
+    'base/Section'
+  )

packages/base/Section/src/Section/test.tsx

@@ -113,4 +113,26 @@ describe('Section', () => {
     fireEvent.click(collapse)
     await waitForElementToBeRemoved(getByTestId(DEFAULT_CONTENT_TEST_ID))
   })
+
+  describe('when component is controlled', () => {
+    describe.each([
+      ['collapsed', true],
+      ['expanded', false],
+    ])('initially %s', (_, collapsed) => {
+      it('reflects controlled collapsed state and calls onToggle', () => {
+        const onToggleMock = jest.fn()
+        const { getByTestId } = renderSection({
+          collapsible: true,
+          collapsed,
+          onToggle: onToggleMock,
+        })
+
+        expect(getByTestId(DEFAULT_COLLAPSE_TEST_ID)).toBeInTheDocument()
+
+        fireEvent.click(getByTestId(DEFAULT_COLLAPSE_TEST_ID))
+
+        expect(onToggleMock).toHaveBeenCalledWith(!collapsed)
+      })
+    })
+  })
 })