Conditional variables UI

[Michael-Grover]

Is your feature request related to a problem? Please describe.
As a user I would like to enable and disable conditional variables, and to switch between two options in conditional variables.

Describe the solution you'd like
See this Loom video explaining the UI:
https://www.loom.com/share/694e7927a744475a98b1cf81154c3673

Smart Clause with three conditional variables, marked with red text
https://projects.invisionapp.com/d/main#/console/16741009/394631841/preview

User hovers over Smart Clause to see there is an additional conditional variable that can be enabled. Signified by a plus icon.
https://projects.invisionapp.com/d/main#/console/16741009/394631840/preview

User hovers over icon to see what text will appear when they click on it.
https://projects.invisionapp.com/d/main#/console/16741009/394631839/preview

The user clicked on the text, making the conditional variable text appear.
https://projects.invisionapp.com/d/main#/console/16741009/394631838/preview

The user is hovering over conditional variable text. A tooltip tells the user the text will be hidden if they click
https://projects.invisionapp.com/d/main#/console/16741009/394631837/preview

The user has clicked to hide the text and it is hidden again
https://projects.invisionapp.com/d/main#/console/16741009/394631840/preview

If the user hovers on a conditional variable that switches between two text options, they will see a message like this. When they click, the text will change to the other option.
https://projects.invisionapp.com/d/main#/console/16741009/394633329/preview

[jeromesimeon]

Currently, there is not enough information in the SlateDOM to know what the alternative text of a variable is. One possibility to address that is to change the MD representation for conditional variables to always have the alternative text.

Proposed format is as follows:

Late Delivery and Penalty.
----

In case of delayed delivery<if id="forceMajeure" whenTrue=" except for Force Majeure cases," whenFalse=" even when there is a Force Majeure," value="true"/>
<variable id="seller" value="%22Dan%22"/> (the Seller) shall pay to <variable id="buyer" value="%22Steve%22"/> (the Buyer) for every <variable id="penaltyDuration" value="2%20days"/>
of delay penalty amounting to <variable id="penaltyPercentage" value="10.5"/>% of the total value of the Equipment
whose delivery has been delayed. Any fractional part of a <variable id="fractionalPart" value="days"/> is to be
considered a full <variable id="fractionalPart" value="days"/>. The total amount of penalty shall not however,
exceed <variable id="capPercentage" value="55.0"/>% of the total value of the Equipment involved in late delivery.
If the delay is more than <variable id="termination" value="15%20days"/>, the Buyer is entitled to terminate this Contract.

This should be translated to Slate with the corresponding information. For instance:

          {
            "object": "inline",
            "type": "conditional",
            "data": {
              "id": "forceMajeure",
              "whenTrue": " except for Force Majeure cases,",
              "whenFalse": " even when there is a Force Majeure,",
              "value": false
            },
            "nodes": [
              {
                "object": "text",
                "text": " even when there is a Force Majeure,",
                "marks": []
              }
            ]
          }, 

[jolanglinais]

Reopening for the tooltip feature.