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

-