Feat: Accordian/collapse

[MildTomato]

options could include:

• expandIconPosition prop - , for left or right chevron position
• ability to show 1, or multiple items (see Vercel for singular examples)
• bordered prop - to show border/background version, if false then show no background/border
•expandIcon prop - ReactNode prop to use your own chevron icon

example of in use:

<Accordian
  defaultActiveId={['1']}
  onChange={callback}
  expandIconPosition="left"
>
  <Accordian.Item label="This is panel header 1" id="1">
    <div>{text}</div>
  </Accordian.Item>
  <Accordian.Item label="This is panel header 2" id="2">
    <div>{text}</div>
  </Accordian.Item>
  <Accordian.Item label="This is panel header 3" id="3">
    <div>{text}</div>
  </Accordian.Item>
</Accordian>

vercel example
https://user-images.githubusercontent.com/8291514/105789085-c051aa80-5fbc-11eb-85da-013549f5cd33.mov

antd example
https://ant.design/components/collapse/

materializeUI example
https://material-ui.com/components/accordion/

[angelmtztrc]

I was about to create an issue, but you had already anticipated me haha. Another good example of this could be the "Disclosure" component of Handless UI.

Disclosure Component

[MildTomato]

@angelmtztrc 👍 😂

I think using either HeadlessUI or RadixUI for anything in this library is fine.

I'm just implementing the Select now with headlessui Listbox - see #173
It's pretty good - and having all the keyboard controls for free is awesome 💯

[MildTomato]

@angelmtztrc did you want to work on this?

[jonthomp]

@MildTomato @angelmtztrc I'll give this a go if it is available?

[angelmtztrc]

@jonthomp I have not a problem with that! I'm a little busy with other things, so go on!

[MildTomato]

@jonthomp go for it!