DO NOT MERGE Match Component Prototype

[achandrabalan]

Notion ticket link

Matching Element Authoring

What's Next?

• Developing a 'Picture' Component, but I think this should be a separate ticket / PR.
• Add a 'Clear all edges button', if wanted.
• Give user choice if they want the node to have a border or not.
• Try to find a solution to the bug where you select two nodes but nothing happens, from my testing it seems to be a race condition issue? If you go slower, you don't run into it...
• There are a LOT of linter issues .. :(

Implementation description

• Developed matching component and corresponding edit panel

Steps to test

1. Navigate to 'Create Module' Page.
2. Drag a 'Match' component into your grid.
3. Add X rows and Y columns, this will populate your match component with blank nodes.
4. Click on a node, then click on another. This should draw a blue line between them
   a. Nodes cannot be connected vertically, only horizontally.
   b. Sometimes you will run into a bug where nothing happens, try clicking the second node of the sequence again.
5. Touch two nodes that have an existing connection in a sequence. This should remove the edge.
6. Click on any node, then go to the edit panel and play around with its width or height, this should adjust the size of the particular node.
7. Click on any node, make it a text box and try to edit it.

It may help to switch from edit mode to view mode when playing with the component.

What should reviewers focus on?

• How does playing around with the component feel? If you did not have instructions would it be intuitive? What changes would you make?

Checklist

• [X ] My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR