C2LC-171: Implement a little node component between steps to insert a command between the steps

Description

Behaviour of the component:

• When selectedAction is not a command type, the component is not interactable
• When selectedAction is a command type, the node changes into a circular plus button onFocus and onDragOver events (Conditional rendering)
• When selectedAction is a command type, the node should be navigable with keyboard interaction (Set tabIndex depends on selectedAction)

Comments

• Simon Bates commented 2020-05-08T14:59:59.824-0400

  Remaining work as of 2020-05-08:

  • Finish the AddNodeButton drop area changes
    • Consistent boundaries for the minimized and expanded version
      • addNodeDropMargin = 1.5rem (some value we pick)
        • Distance above the top and below the bottom of the icon in which we can drop
      • For collapsed:
        • top = -addNodeDropMargin
        • height = 2 * addNodeDropMargin + heightOfCollapsedIcon
      • For expanded:
        • top = -addNodeDropMargin
        • height = 2 * addNodeDropMargin + heightOfExpandedIcon
      • Use SCSS variables to calculate the drop area top and height
    • Make CSS classes for drop areas
  • Rename AddNodeButton class to AddNode
  • Rework CSS class names; sketch of potential names:
    • Expanded
      • AddNode
        • AddNode__expanded-button
        • AddNode__expanded-drop-area
    • Collapsed
      • AddNode
        • AddNode__collapsed-icon
        • AddNode__collapsed-drop-area
  • Do C2LC-172 work as part of C2LC-171
    • Add a toggle switch to enable and disable expanded add node mode
  • Add/fix tests as needed
  • Ask Sepi/Lisa about visual styling for drop target

• Simon Bates commented 2020-05-14T16:17:17.963-0400

  Ask Sepi/Lisa about focus position following insertion of a command with keyboard:

  After adding a command to the end of a program using the keyboard, should focus be on the final add node, or should it be on the newly inserted command?

  And likewise, after adding a command within a program, should focus be on the add node, or should it be on the newly inserted command?