Accordion: User adds Accordion to the content

[tkacheva]

Story

As a marketer I want to use accordion so that I can organize content on the page in the collapsible sections

Business Value

Accordion support in native Page Builder resulting in less customizations for merchants as this is content type broadly used across many websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled

Acceptance Criteria

• User sees Accordion content type in Layout group in Page Builder Panel after Columns and before Tabs
• User drags Accordion to Stage and drops it in supported containers.
• User sees first accordion section added to stage and opened. Min height is 300px
• User sees accordion section label placeholder Section 1 in editing state: selected and ready for be updated
• User can change the section label by starting typing a new label. Label text updated by clicking outside the section label
• User sees empty container placeholder inside the accordion section with text Drag you content here
• User drags any content types inside Accordion section (except Row).
• User drops content type in Accordion section and sees it same way as if it's added into Row.
• User can add new accordion section from Accordion option panel. User sees new section added after the first one. First section closes and new one becomes open. Section label has Section 2 placeholder.
• User sees that only one Accordion section opened at the same time
• USer can open sections from Stage
• User saves changes and sees accordion on the storefront as designed

Design

[ismetyavuz]

I would like to work on this, but since this will be my first contribution to official repositories, I'm not sure about taking the issue. Instead I'll develop it and will try to accomplish it without taking the issue.

[paras89]

Hello @ismetyavuz, thank you for your contribution! Please reach out if you need any pointers/discussion!