Accordion

[Ibabalola]

1. We would like to create a basic accordion component like the following template:

<Accordion className="">
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="">
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="">
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>

2. the accordion should allow to disable a specific element for example:

<Accordion className="" disabled={true}>
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="">
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="">
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>

2. the accordion should allow to automatically collapse one element if one is already open:

<Accordion className="" expanded={expanded === 'panel1'}>
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="" expanded={expanded === 'panel2'}>
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>
<Accordion className="" expanded={expanded === 'panel3'}>
    <AccordionTitle expandIcon={genericComponent}  {..extraProps} className="">
          {content}
    </AccordionTitle>
    <AccordionDetails className="">
          {content}
    </AccordionDetails>
</Accordion>

An example of a possible implementation is described: https://material-ui.com/components/accordion/

Important: please use release/0.6 as base branch

git checkout release/0.6
git pull
git checkout -b 'feature/accordion'