Address feedback

toptal · Feb 24, 2025 · 1946527 · 1946527
1 parent 24a08a4
commit 1946527
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/.changeset/tall-boxes-matter.md b/.changeset/tall-boxes-matter.md
@@ -2,4 +2,6 @@
 '@toptal/picasso-section': minor
 ---
 
-- make Section component controlled
+### Section
+
+- add controlled component behavior support
diff --git a/packages/base/Section/src/Section/story/Controlled.example.tsx b/packages/base/Section/src/Section/story/Controlled.example.tsx
@@ -2,33 +2,40 @@ 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(0)
+  const [expandedSection, setExpandedSection] = useState(FIRST_SECTION_ID)
 
   return (
     <>
       <Section
         collapsible
-        onToggle={collapsed => setExpandedSection(collapsed ? 1 : 0)}
+        onToggle={collapsed =>
+          setExpandedSection(collapsed ? SECOND_SECTION_ID : FIRST_SECTION_ID)
+        }
         variant='bordered'
         title='First section'
-        collapsed={expandedSection !== 0}
+        collapsed={expandedSection !== FIRST_SECTION_ID}
       >
         <p>First section content</p>
-        <Button onClick={() => setExpandedSection(1)}>
+        <Button onClick={() => setExpandedSection(SECOND_SECTION_ID)}>
           Go to second section
         </Button>
       </Section>
       <Container top={SPACING_4}>
         <Section
           collapsible
-          onToggle={collapsed => setExpandedSection(collapsed ? 0 : 1)}
+          onToggle={collapsed =>
+            setExpandedSection(collapsed ? FIRST_SECTION_ID : SECOND_SECTION_ID)
+          }
           variant='bordered'
           title='Second section'
-          collapsed={expandedSection !== 1}
+          collapsed={expandedSection !== SECOND_SECTION_ID}
         >
           <p>Second section content</p>
-          <Button onClick={() => setExpandedSection(0)}>
+          <Button onClick={() => setExpandedSection(FIRST_SECTION_ID)}>
             Go to first section
           </Button>
         </Section>