v5 component refactor: Accordion

[willmcvay]

Abstract

As part of the v5 Elements release, each component will be reviewed and refactored to ensure best practice and design system alignment

Specification

• Is new component or existing? Existing - called Accordion in Elements
• Is the component being re-named? No, but the DS calls the main component AccordionGroup and each AccordionItem it calls an Accordion - we should align with this naming convention
• Is the component design signed off by product and design?
• Guide to component structure & documentation in storybook
• Link to DS in Figma
• Additional behavioural specification: Simple smooth 0.5s transition on open close would be a nice addition but not essential.
• Accessibility requirements
• Link to Design Guidelines

Developer Checklist

• Styles alignment between Design System and Elements
• Check design tokens in Figma and implement CSS variable tokens if available for relevant component
• Align with accessibility standards / spec as per above
• If relevant, break down component into Styles Only and React component structures
• Ensure all variants of components are documented as appropriate
• Ensure unit test coverage is adequate for component
• Update documentation in MDX file as per guidelines
• Changelog updated to reflect a single beta version per component ideally

Release Checklist

• Approved PR merged to main
• Design & product review and feedback addressed by developer
• Beta release by product / engineering lead to next beta version

Additional Context or Information

[kurtdoherty]

suggestion: I think it would be great to see us use the native HTML details element for the Accordion, particularly because it will provide all the correct a11y out-of-the-box for us, but also because it can handle groups of accordions at the DOM level, which provides CSS-only consumers a comparable experience to React users.

suggestion: I also think it would be great to move away from the items prop and towards a more JSX-centric API. As a very rough draft, I mean something like...

<Accordion.Group>
  <Accordion>
    <Accordion.Header>Foo</Accordion.Header>
    <Accordion.Body>Bar</Accordion.Body>
  </Accordion>
  ...
</Accordion.Group>

note: a quick and dirty POC of the above two suggestions is available here

[rpt-rfoxy]

Document Design Solution for Accordion Component

hi @kurtdoherty @ksolanki7

1. Overview

The Accordion component is a collapsible UI element designed to group related content within an expandable and collapsible structure. It consists of multiple child elements such as Accordion.Group, Accordion.Header, Accordion.Body, and Accordion.Legend, which provide enhanced flexibility for content organization.

---

2. Component Structure

✅ Accordion.Group

• Acts as a container for multiple Accordion elements.
• Ensures that multiple accordions within the group maintain state consistency.

✅ Accordion

• Represents an individual collapsible section.
• Wraps around Accordion.Header, Accordion.Body, and optionally Accordion.Legend for additional metadata.

✅ Accordion.Header

• Defines the clickable area that triggers the expansion or collapse of the accordion.
• Can contain text elements (LabelText) and optional icons wrapped in Accordion.Legend.

✅ Accordion.Legend

• Supports additional visual elements such as numeric indicators or icons.
• Utilized for displaying metadata, such as count indicators, feature icons, etc.

✅ Accordion.Body

• Houses the main content that gets displayed when the accordion is expanded.

---

3. Usage Example

<Accordion.Group>
  <Accordion>
    <Accordion.Header>
      <LabelText variant="strong">Section Title</LabelText>
      <Accordion.Legend>
        <LabelText>3</LabelText>
      </Accordion.Legend>
    </Accordion.Header>
    <Accordion.Body>
      <p>Collapsible content goes here.</p>
    </Accordion.Body>
  </Accordion>
  
  <Accordion>
    <Accordion.Header>
      <LabelText variant="strong">Section Title</LabelText>
      <Accordion.Legend>
        <ElFeature>
          <svg className={elIcon} xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
            <path d="M..." fill="#9FAEBC" />
          </svg>
          <LabelText>3</LabelText>
        </ElFeature>
      </Accordion.Legend>
    </Accordion.Header>
    <Accordion.Body>
      <p>Collapsible content goes here.</p>
    </Accordion.Body>
  </Accordion>
</Accordion.Group>

---

Code Concept

To see the detailed implementation, you can check it here (POC). Please let me know if the link doesn't work.

---

Screen Shoot

[ksolanki7]

@rpt-rfoxy I am not sure, why this ticket is in to do column as Accordion Design is not ready in Figma yet.
Ref: https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=2330-2973&m=dev
This invalidates your POC as design guidelines have not been directed so far.

[kurtdoherty]

Yeah, appreciate the work @rpt-rfoxy, but I don't have time to review work that doesn't have a "ready for dev" design spec 😬

[HollyJoyPhillips]

I am unable to edit the ticket but the design now marked as ready for Dev: https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=2330-2973&m=dev