accordion

import { Accordion } from "woly";

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing. However, it does hide content from users, and it’s important to account for a user not noticing or reading all of the included content.

As ussually accordions are used to organize related information. In another case, they should be used when space is at a premium and long content cannot be displayed all at once, eg in a side panel.

Example

Accordion`s content and title can be manadged for our own.

Short recomendation when to use accordion 

  • To organize related information 

  • To shorten pages and reduce scrolling when content is not crucial to read in full. 

  • When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel. 

Short recomendation when to use accordion 

  • To organize related information 

  • To shorten pages and reduce scrolling when content is not crucial to read in full. 

  • When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel. 

<Playground direction="vertical">
  <>
    <Accordion
      priority="primary"
      isOpen={false}
      title={<Text type="L">Short recomendation when to use accordion&nbsp;</Text>}
    >
      <BoxVertical>
        <ul style={{ paddingLeft: '20px' }}>
          <li>
            <Text type="S">To organize related information&nbsp;</Text>
          </li>
          <li>
            <Text type="S">
              To shorten pages and reduce scrolling when content is not crucial to read in
              full.&nbsp;
            </Text>
          </li>
          <li>
            <Text type="S">
              When space is at a premium and long content cannot be displayed all at once, like on a
              mobile interface or in a side panel.&nbsp;
            </Text>
          </li>
        </ul>
        <TextArea
          name="name"
          placeholder="TextArea"
          onChange={() => console.info('On textarea change')}
          priority="primary"
          overflow="hidden"
        />
      </BoxVertical>
    </Accordion>
    <Accordion
      priority="primary"
      isOpen={false}
      title={<Text type="L">Short recomendation when to use accordion&nbsp;</Text>}
    >
      <BoxVertical>
        <ul style={{ paddingLeft: '20px' }}>
          <li>
            <Text type="S">To organize related information&nbsp;</Text>
          </li>
          <li>
            <Text type="S">
              To shorten pages and reduce scrolling when content is not crucial to read in
              full.&nbsp;
            </Text>
          </li>
          <li>
            <Text type="S">
              When space is at a premium and long content cannot be displayed all at once, like on a
              mobile interface or in a side panel.&nbsp;
            </Text>
          </li>
        </ul>
        <TextArea
          name="name"
          placeholder="TextArea"
          onChange={() => console.info('On textarea change')}
          priority="primary"
          overflow="hidden"
        />
      </BoxVertical>
    </Accordion>
  </>
</Playground>

Accordion can be closed for default

Some text

IdFirst nameLast nameEmail
1MichaelSmith[email protected]
2JonathanKearney[email protected]
3DonaldMorrison[email protected]
4TaraRichardson[email protected]
<Playground size="L">
  <Accordion priority="primary" isOpen={false} title={<Text>Some text</Text>}>
    <Table columns={tableHead.length} priority="primary">
      <Thead>
        <Tr>
          {tableHead.map(({ id, name }) => (
            <Th key={id}>{name}</Th>
          ))}
        </Tr>
      </Thead>
      <Tbody>
        {tableRows.map((row) => (
          <Tr>
            {tableHead.map(({ id }) => (
              <Td key={id}>{row[id]}</Td>
            ))}
          </Tr>
        ))}
      </Tbody>
    </Table>
  </Accordion>
</Playground>

or open

Some text

IdFirst nameLast nameEmail
1MichaelSmith[email protected]
2JonathanKearney[email protected]
3DonaldMorrison[email protected]
4TaraRichardson[email protected]

Some text

IdFirst nameLast nameEmail
1MichaelSmith[email protected]
2JonathanKearney[email protected]
3DonaldMorrison[email protected]
4TaraRichardson[email protected]
<Playground>
  <>
    <Accordion priority="primary" isOpen={true} title={<Text>Some text</Text>}>
      <Table columns={tableHead.length} priority="primary">
        <Thead>
          <Tr>
            {tableHead.map(({ id, name }) => (
              <Th key={id}>{name}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {tableRows.map((row) => (
            <Tr>
              {tableHead.map(({ id }) => (
                <Td key={id}>{row[id]}</Td>
              ))}
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Accordion>
    <Accordion priority="primary" isOpen={true} title={<Text>Some text</Text>}>
      <Table columns={tableHead.length} priority="primary">
        <Thead>
          <Tr>
            {tableHead.map(({ id, name }) => (
              <Th key={id}>{name}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {tableRows.map((row) => (
            <Tr>
              {tableHead.map(({ id }) => (
                <Td key={id}>{row[id]}</Td>
              ))}
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Accordion>
  </>
</Playground>

Props

NameTypeDefaultDescription
childrenReact.ReactNodeContent of accordion
isOpenboolean'false'Whether the component is visible or not
prioritystring'secondary'Priority prop to style accordion component
titleReact.ReactNodeTitle of accordion, that triggers element of accordion