Accordion

The Accordion component is a container where we can insert contents inside it, we can show or hide them.

Usage

Basic

import { flex } from '@gympass/yoga-system';
import { theme, Box, Accordion, Text, List, Button } from '@gympass/yoga';

const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion title="Disabled" disabled>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small disabled" disabled>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion title="Disabled" disabled>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small disabled" disabled>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});

With subtitle

import { theme, Box, Accordion, Text, List, Button } from '@gympass/yoga';
import { flex } from '@gympass/yoga-system';

const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default" subtitle="default with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small" subtitle="small with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion title="Disabled" disabled subtitle="disabled with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small
        title="Small disabled"
        subtitle="small disabled subtitle"
        disabled
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default" subtitle="default with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small" subtitle="small with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion title="Disabled" disabled subtitle="disabled with subtitle">
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small
        title="Small disabled"
        subtitle="small disabled subtitle"
        disabled
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});

Without horizontal padding

import { flex } from '@gympass/yoga-system';
import { theme, Box, Accordion, Text, List, Button } from '@gympass/yoga';

const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default" hasHorizontalPadding={false}>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small" hasHorizontalPadding={false}>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion
        title="Default"
        subtitle="default with subtitle"
        hasHorizontalPadding={false}
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small
        title="Small"
        subtitle="small with subtitle"
        hasHorizontalPadding={false}
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default" hasHorizontalPadding={false}>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small title="Small" hasHorizontalPadding={false}>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>

      <Accordion
        title="Default"
        subtitle="default with subtitle"
        hasHorizontalPadding={false}
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>

      <Accordion.Small
        title="Small"
        subtitle="small with subtitle"
        hasHorizontalPadding={false}
      >
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});

Expanded

import { theme, Box, Accordion, Text, List, Button } from '@gympass/yoga';
import { flex } from '@gympass/yoga-system';

const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="row" gap="8px" width="100%">
      <Accordion title="Default" expanded>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 3</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 4</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 5</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>
      <Accordion.Small title="Small" expanded>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 3</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 4</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 5</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="row" gap="8px" width="100%">
      <Accordion title="Default" expanded>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 3</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 4</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 5</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>
      <Accordion.Small title="Small" expanded>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 3</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 4</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 5</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion.Small>
    </Box>
  );
});

With Summary

import { flex } from '@gympass/yoga-system';
import { theme, Box, Accordion, Text, List, Button } from '@gympass/yoga';

const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default">
        <Accordion.Summary d="flex" flexDirection="row" justifyContent="space-between">
          <Text.Medium>Company</Text.Medium>
          <Text.Medium>R$1000</Text.Medium>
        </Accordion.Summary>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>
    </Box>
  );
});const List = styled.ul`
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 0 ${theme.spacing.xxxsmall}px;
  padding-left: ${theme.spacing.medium}px;
`;

const Item = styled.li`
  font-size: ${theme.spacing.xsmall}px;
`;

render(() => {
  return (
    <Box d="flex" flexDirection="column" width="100%">
      <Accordion title="Default">
        <Accordion.Summary d="flex" flexDirection="row" justifyContent="space-between">
          <Text.Medium>Company</Text.Medium>
          <Text.Medium>R$1000</Text.Medium>
        </Accordion.Summary>
        <Accordion.Content>
          <Box d="flex" flexDirection="column" gap="small">
            <Text.Small color="deep">
              Subtitle with a list of some items:
            </Text.Small>

            <List>
              <Item>
                <Text.Small color="deep">Item 1</Text.Small>
              </Item>

              <Item>
                <Text.Small color="deep">Item 2</Text.Small>
              </Item>
            </List>
          </Box>

          <Button small inverted>
            Small button
          </Button>
        </Accordion.Content>
      </Accordion>
    </Box>
  );
});

Props

Prop	Description	Type	Default	Required