Refactor accordion component

[SeamusLeonardHPE]

Refactor the existing accordion component.

The existing component is in such a state that it will be deprecated so there is no need to build out form the existing component.

• [x] Create in new figma file until reviewed & ready for branch from main.
• [ ] Create anatomy & write rules for control & content (states etc)
• [x] Build using atomic composition
• [x] Separate control from content
• [x] Content area for text & slot variants
• [x] Component control & contents reflow with auto-layout

[ashifalinadaf]

Under research - WIP file

[ashifalinadaf]

Building the component with different possibilities. Iterations

Raised an issue on border overlap seen on accordion component. #3866

---

Conclusions from D&D discussion.

• Difference between various accordion examples in storybook, simple, multiple, header?

  • Concentrating on one component now with the one in DS site, including the possibilities of expanding the accordion panel.

• What is the width of accordion? DS 768px fixed width assuming it will expand to the container/page width.

  • Accordion will expands to the container

• How is semantic heading is followed in accordion?

  • Long term guidelines is being explored, we can use it

• Right and left padding on old component.

  • Not sure why it was used, but will be removed in the new component.

• Border overlap?

  • Raised an issue. #3866

Need to discuss and clarify on below queries.

• Character limit for content within accordion panel?

• Can we have only one accordion panel?

• Total number of accordion panels that can be used.

• Have icon before header to increase the visibility of accordion? Cillian’s work - it is achievable in code

  • can be achieved but need a justification on including this in the component raise a separate ticket?