AccordionBlock

with text, activeText, renderProps, commonState, and uxui-modules/collapse, the Accordion is useful for all sorts of toggling; from the plp, to pdp, to select dropdown

the accordion has 2 approaches

1. isDefaultVisible - used in refine - this lets the accordion manage it's own state with this.state.handleToggleVisibility 1.1 ^ same approach as above, but since it's common state, if you pass in any compatible commonState, it will replace the commonState used by the molecule, allowing you to override any common state - just see state/common
2. if you pass in isVisible and onToggle then it ignores its own state, and lets you send it the primitives & handle the updating & calls your toggle prop

overview

<Wrap>
  <WrapBox>

    <Title>
      <Text />
      <Icon /> <!-- renderIcon -->
    </Title>

    <Collapse>
      <Box> <!-- renderBox() -->
        children
      </Box>
    </Collapse>

  </WrapBox>
</Wrap>

TODO

1. Styled [p0]

• convert remaining styles into styled components

2. [p2]

• finish splitting AccordionBlock (it has some deps)

2. WCAG [p3]

• https://standards.usa.gov/components/accordions/
• https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
• https://inclusive-components.design/
• how to do controls without id ...

3. Nice To Have Someday [p4]

• should traverse any with click handlers and add mobile touch ada automatically inferred from props types etc? or at least dump and validate?