Accordion column block

[Gonzalo-CG]

Description

A new Accordion Block (Accordion Column) will be developed to to achieve the design shown on Segment Landing - Figma, this block is used on the Trucks page Trucks - Figma.

This block has 2 variants for the desktop viewport:

• Accordion Column Right (default):

• Accordion Column Left:

Acceptance Criteria

• The new Accordion block is available for authors to use on any page.
• A block variant is available for authors to achieve the reversed (accordion on the left, image on the left) look.
• Content editors can add hyperlink to any accordion section.
• As a user, when I navigate through the different sections, the image changes.
• As a user, when I change from one section to another the previous opened section closes and the new one opens (for all viewports).
• The Design and style follows the figma specifications, for tablet we will be resembling the mobile solution (size to be specified).

Open Questions

• The mobile design seems to imply that every accordion item has its own image (e.g. the image here is inside an accordion element), but on the desktop design, it seems that only one image is present on this component (the image is outside the accordion elements.
• Name of the block. Name of block: Accordion Column Left (text on left)
  Variant: Accordion Column Right (text on right)
• Name for the variation of the reversed look of the block.

[BeckyMedlin]

@WendyKruger Please see Open Questions above.

[BeckyMedlin]

Per @WendyKruger, the image should change based on the accordion that's opened. Ex: When you click on Bulk Haul, the image needs to change to an image of a Bulk Haul.
Name of block: Accordion Column Left (text on left)
Variant: Accordion Column Right (text on right)

[BeckyMedlin]

@Gonzalo-CG See Wendy's input above. Name of block = Accordion Column Left (text on left).
Please confirm if images can be added to existing accordion. If not, priority needs to be increased.

[WendyKruger]

@BeckyMedlin why is this assigned to me?

[BeckyMedlin]

@WendyKruger I believe I assigned it to you because the Design Question label was still present. I am not aware of any other needs for this one. @DanielaPedrochevd @cogniSyb Can you confirm that this one is ready for refinement? Is anything missing?

[DanielaPedrochevd]

@WendyKruger can you please let us know what the tablet pixels are? Thank you!

[WendyKruger]

@DanielaPedrochevd checking with Matt G., will comment on the Figma file and tag both of you.

[DanielaPedrochevd]

After testing, we will wait until syb comes back to merge so he can review it code wise and branch test.

[girishdigrajkar]

Observations are shared and awaiting fix/resolution/cross comments from Dev team

[girishdigrajkar]

Outstanding issues are fixed and able to get the correct results and hence, marking this ticket to done status.