✨ Develop the Accordion Block Component

[bettybondoc]

cc @wicksipedia @isaaclombardssw @UlyssesMaclaren @adamcogan @miichaelsmedley @louisroa8189

Description
Create the Accordion Block component for the Consulting Pages. This component should allow users to present information in an accordion format with customization options for layout, styling, and content. The component should support multiple or single accordion item behavior and prioritize usability, flexibility, and accessibility.

Acceptance Criteria:

• The Accordion Block component includes the following customization options:

• Layout Selector:
  • No Image
  • Image-Accordion
  • Accordion-Image
  • Background Selector:
    • Transparent
    • Grey-700
    • Gradient 1/2/3/4
  • Image File Uploader
  • Heading Text Field
  • Description Text Field
  • Button 1 & Button 2:
    • Before Icon Selector
    • Text Field
    • After Icon Selector
    • Style Selector (Primary, Secondary)
  • Accordion Item (Repeatable):
    • Item Heading Text Field
    • Item Body WYSIWYG
    • Behavior:
      • Multiple Open
      • Single Open

• Fully responsive across desktop, tablet, and mobile
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge)
• Fields and sections can be enabled or disabled for flexibility
• The UI for customization options is grouped logically for ease of use (e.g., button settings grouped together)
• Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: ✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300)
• Tested and approved by Wicksy, Louis, and Betty

Tasks:

• TODO - Developer to update

Figure: Component - Desktop

Figure: Component - Mobile

Figure: Use Case - FAQ

Figure: Use Case - Steps