diff --git a/packages/base/Section/src/Section/story/Controlled.example.tsx b/packages/base/Section/src/Section/story/Controlled.example.tsx
index 59aa969acd..68dd9cd5a7 100644
--- 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 (
<>
-
- setExpandedSection(collapsed ? SECOND_SECTION_ID : FIRST_SECTION_ID)
- }
- variant='bordered'
- title='First section'
- collapsed={expandedSection !== FIRST_SECTION_ID}
- >
- First section content
-
+
- 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}
>
- Second section content
- setExpandedSection(FIRST_SECTION_ID)}>
- Go to first section
+ First section content
+ setSectionIsOpened(false)}>
+ Close section