[MP-NULL] Update Section example (#4680)

toptal · Feb 25, 2025 · 73ebf46 · 73ebf46
1 parent a6c8f43
commit 73ebf46
Showing 1 changed file with 12 additions and 26 deletions.
diff --git a/packages/base/Section/src/Section/story/Controlled.example.tsx b/packages/base/Section/src/Section/story/Controlled.example.tsx
@@ -1,42 +1,28 @@
 import React, { useState } from 'react'
-import { Button, Container, Section } from '@toptal/picasso'
+import { Button, Container, Section, Typography } 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)
+  const [sectionIsOpened, setSectionIsOpened] = useState(false)
 
   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
+      <Container>
+        <Button onClick={() => setSectionIsOpened(!sectionIsOpened)}>
+          Toggle section
         </Button>
-      </Section>
+      </Container>
       <Container top={SPACING_4}>
         <Section
           collapsible
-          onToggle={collapsed =>
-            setExpandedSection(collapsed ? FIRST_SECTION_ID : SECOND_SECTION_ID)
-          }
+          onToggle={collapsed => setSectionIsOpened(collapsed ? false : true)}
           variant='bordered'
-          title='Second section'
-          collapsed={expandedSection !== SECOND_SECTION_ID}
+          title='First section'
+          collapsed={!sectionIsOpened}
         >
-          <p>Second section content</p>
-          <Button onClick={() => setExpandedSection(FIRST_SECTION_ID)}>
-            Go to first section
+          <Typography>First section content</Typography>
+          <Button onClick={() => setSectionIsOpened(false)}>
+            Close section
           </Button>
         </Section>
       </Container>