Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5466

Implement new Accordion block

XMLWordPrintable

    • 2
    • Gutenberg
    • Sprint #150, Sprint #151
    • phoebe

      As a follow-up of the idea https://planet4.greenpeace.org/idea/show-hide-plugin-for-qas/ a new P4 block, codename "Accordion" has been designed.

      The idea is to have a block that allows collapsible menus, behaving exactly like the "Column" blocks > Tasks Style on mobile (see screencast attachement).

      Tasks

      • Implement the block based on the mock up provided (see below)
      • The block should be WYSIWYG in the backend editor
      • There should be two extra fields (Title & Description) similar to other blocks
      • The block template should use jsx for both frontend and backend
      • Add the block in beta group

      Design specs:

      Sketch file for design specs. 

      New things to add ideally, otherwise for a second iteration:

      • Add a standalone link (should be set in the side bar of the backend)
      • Add the possibility to choose between a dark or a light theme
      • Implement the chevron from the Sketch file as a SVG icon.

      Chevron animation:

      • Remove the animation at mouse hover. The animation should play only on click.

        1. Cheveron.jpg
          222 kB
          William Morris-Julien
        2. Screen Recording 2020-06-17 at 18.02.56.mov
          2.93 MB
          Luca Tiralongo

            mleray Maud Leray
            ltiralon Luca Tiralongo
            Magali Fatome Magali Fatome (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: