Flexible Compound Components
Summary: create an accordion component (with subcomponents) that has a great API / syntax. The component styles should be fully customizable by those who'll use them.
Create flexible compound components for an "accordion functionality". You should be able to use the components like this:
For simplicity, do not allow any other component as a direct child of the
Accord component other than
AccordItem. Return an error if that happens.
AccordItem must have
AccordPanel as its decendant, but they don't have to be direct descendants. Either you have
AccordBtn or both
You should be able to use this accordion and customize how it looks as you can see in the demonstration of this app.
FIXME: This accordion implementation does not follow all best accessibility practices. It should be motified according to the specifications, read more at w3.org
Here are all the accordion related subcomponents:
Here's the top level
Here's another bare minimum example usage of the component
Here's a stylized version of the above example
Here's a cool way you can use the components, somewhat different than usual.