accordproject/cicero-ui

A library of React components for Accord Project templates

cicero-ui's Issues

Support editable variables

We need to support a variable serialisation that allows us to lock the documents against edits, except for variable sections.

When a variable is being edited we need to be able to relate the Slate block to the contract model property, so we know the type and how the contract instance (JSON) should be updated.

I think variables in Slate should be represented as "marks" because they apply to a range of the document and must have their positions updated as the document is edited.

Proposal below.

====

## Testing

You can declare a variable in a template using [{name}].

Or we could use <variable id="name"/> to declare a variable, 
which is more common mark parser friendly.

This is an inline variable 
<variable id="name" value="with a value"/> too.

This is a variable with complex content.

``` <variable id="name">
this is a

multi-line value.
</variable>

The variable tag will be handled by a Variable plugin into the markdown editor. The plugin will create text blocks with the variable mark set and metadata on the mark that indicates the FQN of the model element for the variable.

Clicking on a variable should open a type-specific editor (such as a calendar editor for a DataTime variable).

Broken link in CONTRIBUTING.md

Code of Conduct URL is broken in CONTRIBUTING.md

It is redirecting to https://github.com/accordproject/docs/blob/master/Accord%20Project%20Code%20of%20Conduct.pdf

I am sending a PR with this URL https://lfprojects.org/policies/code-of-conduct/

Cursor Disappear at the Top of Clause Component

Describe the bug
When navigating with a keyboard through the ContractEditor, the cursor disappears and cannot be gained back without alt-tabbing or using the mouse

To Reproduce
Steps to reproduce the behavior:

1. Go to Template Studio v2
2. Create multiple lines or paragraphs
3. Add a clause template in the middle of these lines
4. Navigate from below the clause template up into it using the keyboard
5. Now navigate from in the clause template up out of it using the keyboard
6. Now navigate from above the clause template down into it using the keyboard

Expected behavior
Navigating through the top of a clause template should not cause the cursor to disappear

Screenshots
A Loom recording of the bug is here.

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Additional context
This may have something to do with how we implement the clause template header (the one that appears when you hover over the clause template with a mouse)

Contract Editor Import

Current Behavior

• Handles markdown and rich text editing.

Tasks

• Ensure connection to a redux store works in a third party environment.

Related Issues:

• #1
• #62

`toMarkdown` not working as expected for nodes with type `variable`

Describe the bug
toMarkdown.recursive() not working when node contains child node of type variable

To Reproduce
Steps to reproduce the behavior:

1. Instantiate ToMarkdown with VariablePlugin

const clausePlugin = ClausePlugin(null, null);
const pluginManager = new PluginManager([List(), clausePlugin, VariablePlugin()]);
const toMarkdown = new ToMarkdown(pluginManager);

2. Call toMarkdown.recursive on a clause node that contains child nodes of type variable
   For example...

{
   "object":"block",
   "type":"clause",
   "data":{
      "tag":"clause",
      "attributes":{
         "src":"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085",
         "clauseid":"d3cdb02e-6982-47a1-9ba3-350d46212b63"
      },
      "attributeString":"src = \"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085\"clauseid = \"d3cdb02e-6982-47a1-9ba3-350d46212b63\"",
      "content":"",
      "closed":false
   },
   "nodes":[
      {
         "object":"block",
         "type":"paragraph",
         "data":{

         },
         "nodes":[
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Acceptance of Delivery. ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" will be deemed to have completed its delivery obligations if in ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":"'s opinion, the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" satisfies the Acceptance Criteria, and ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" notifies ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" in writing that it is accepting the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":".",
                     "marks":[

                     ]
                  }
               ]
            },
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Inspection and Notice. ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" will have ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"businessDays",
                           "value":"10"
                        },
                        "attributeString":"id = \"businessDays\"value = \"10\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"10",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" Business Days' to inspect and evaluate the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" on the delivery date before notifying ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" that it is either accepting or rejecting the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":".",
                     "marks":[

                     ]
                  }
               ]
            },
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Acceptance Criteria. The \"Acceptance Criteria\" are the specifications the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" must meet for the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" to comply with its requirements and obligations under this agreement, detailed in ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"attachment",
                           "value":"%22Attachment%20X%22"
                        },
                        "attributeString":"id = \"attachment\"value = \"%22Attachment%20X%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Attachment X\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":", attached to this agreement.",
                     "marks":[

                     ]
                  }
               ]
            }
         ]
      }
   ]
}

3. Note the output:

Acceptance of Delivery.  will be deemed to have completed its delivery obligations if in 's opinion, the  satisfies the Acceptance Criteria, and  notifies  in writing that it is accepting the .

Inspection and Notice.  will have  Business Days' to inspect and evaluate the  on the delivery date before notifying  that it is either accepting or rejecting the .

Acceptance Criteria. The "Acceptance Criteria" are the specifications the  must meet for the  to comply with its requirements and obligations under this agreement, detailed in , attached to this agreement.

Expected behavior
Expect the output to contain the variables.
For example...

Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.

Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.

Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.
historian.ts:245 clause text Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.

Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.

Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.

ErrorLogger Testing

Is your feature request related to a problem? Please describe.
There are no existing tests for ErrorLogger, and there is a recent change to make it accept an object rather than array

Describe the solution you'd like
Implement unit tests

Describe alternatives you've considered
N/A

Additional context
Related Issues:

• #137
• TSv2 #86

Brought up by @flagoon

Component: Error Logger

Error Log

• Shows all the errors (validation errors, compilation errors, parsing errors, testing errors).
• Lets a user filter errors

Cicero peerDependency

This is to track the discussion on the possibility of making cicero into a peerDepencency.

Conversation points so far from @mttrbrts, @DianaLease, and @jeromesimeon:

• Reference material as guidance
• This would meet the guideline "The dependency is visible in your interface” because using templates, parsing, etc is a large part of the UI
• Being a peerDependency may allow for better tracking dependency versions for synchronization
• Benefit of switching to peerDependency is that cicero is used both as a direct dependency in services and an indirect dependency in the same services as well as cicero-ui
• Maybe have as a peerDependency in cicero-ui only? It will affect third parties importing cicero-ui
• Third party services could be using different cicero versions, so this will make a difference

Button styling

Change the button styling to match this mockup. Click "inspect" in the lower right corner to view the CSS. You may need to request access. You can ignore everything about the mockup except the button styling

On hover, the button background color should turn white. The text should remain the same color.

ID Attribute Accessibility

WCAG 2.0 Level A 4.1.1 (Parsing)

Tasks

• All id attributes should only be used once.

Related Issues:

• Issue #41 in Template Studio v2

Update Action Testing

Most components require testing for their functionality - typically found in the actions.js folders.

A lot of features have been added lately and the tests need to be keeping up.

Refer to #122 for a starting point.

Align Clause Text with Contract Text

Currently clause template text is narrower than contract text. They should be the same width so that all text is flush on the left and right sides. It will be more noticeable on the left side since all of the text is left aligned.

Example of proper alignment:

https://projects.invisionapp.com/d/main#/console/16741009/380387451/preview

@irmerk

Parse Clause on Paste

Linked Isues:

- #134

- MDE 88

- TSv2 82

---

Is your feature request related to a problem? Please describe.
Currently a newly pasted clause template from a copied clause template which has parse errors will not be parsed until further editing occurs

Describe the solution you'd like
During the new onPaste method in ClausePlugin, we should be parsing a clause after calling the customPasteClause function

Describe alternatives you've considered
N/A

Additional context
N/A

Template Library Import

Current Behavior

• Renders within the Template Studio v2 environment, but lacks details and import functionality.

Tasks

• Ensure all three buttons work in a third party environment:
  • Details button serving up template information (through Redux)
  • Import button handles functionality passed to it properly when connected to Redux
  • Add to contract button interacts successfully with ContractEditor
• Adjust button rendering
  • Add View advanced templates check box
  • Make Add new clause conditional
• Adjust styling
  • Narrow the styling
  • Possibly style primarily through props

Related Issues:

• #6
• #36

Test TemplateLibrary prop methods execution

Related Issues

• Issue #6

Tasks

• Implement unit tests for all prop functions passed in to this component.

Component: Contract Navigation Menu

Navigation Menu for scrolling to headings and smart clauses with in a contract

AP Documentation Sync

Tasks

• Implement updated Accord Project documentation.

Related Issues:

• Issue #37

Typo in DEVELOPERS.md

Describe the bug
In DEVELOPERS.md (here), URL of the main repository to be added as upstream has a typo in it. acccordproject should be accordproject

To Reproduce
Steps to reproduce the behavior:

1. Go to DEVELOPERS.md
2. Check 'Add the main repository as an upstream remote to your repository'
3. Notice the typo in URL

Expected behavior
Instead of acccordproject, it should be accordproject

Component Styling Sync

Is your feature request related to a problem? Please describe.
The UI is ready to be linked together with a common theme for cohesiveness, based on props

Describe the solution you'd like
All components should accept AP theme props for the correct color scheme.

Describe alternatives you've considered
N/A

Additional context
Additional work will be done in Template Studio v2 and Markdown-Editor

Related
Issue #63

Security Vulnerabilities

I have yet to be able to fix these vulnerabilities. There may be a case for removing the yarn.lock file, as I'm unsure why it exists in the first place. As far as I know, yarn should not be used in this repo.

Link ContractEditor to Redux store

Related Issues

• Issue #1
• Issue #23 in TSv2

Tasks:

• Debug and refactor ContractEditor code to ensure it is working.

TemplateLibrary should use Hooks

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
For consistency, the TemplateLibrary component should be migrated to using React Hooks.

Describe the solution you'd like
Swap from using a PureComponent to utilize React Hooks, using other components in this repository as a guide.

Describe alternatives you've considered
N/A

Additional context
N/A

ClausePlugin README

ClausePlugin

This should have developer documentation associated with it to showcase how it can be used and its purpose.

ClausePlugin: A custom Slate plugin for embedding a clause node within a document

Table Accessibility

WCAG 2.0 Level A 1.3.1 (Info and Relationships)

Tasks

• Ensure table elements are accessible through proper usage of:
  • <thead> and <tbody> for better navigation through a table
  • Column and Row header <th> elements need a scope attribute
    • (<th scope="col"> and <th scope="row">)
  • Tables should contain a <caption> (for the title) to help describe the table
    • Switch the header used prior to the table element with a caption element inside the table
    • Add a visually hidden description to the <caption>

Related Issues:

• Issue #39 in Template Studio v2

Remove styled-components from Bundle

As described in the styled-components official FAQ, we should remove this package from our bundle.

Component: Template Library Component

• https://github.com/accordproject/react-components
• Configurable component to view the contents of an AP format template library

Expandable and collapsible pane UI

Expand button default and hover
https://projects.invisionapp.com/d/main#/console/16741009/370418065/preview

Cursor hovered on pane revealing a subtle border and the collapse button, which is otherwise not visible.
https://projects.invisionapp.com/d/main#/console/16741009/380412036/preview

Cursor hovered over collapse button
https://projects.invisionapp.com/d/main#/console/16741009/380412037/preview

Test ContractEditor functionality

Related Issues

• Issue #1
• Issue #23 in TSv2
• Issue #33

Tasks:

• Contingent upon Issue #33, implement tests for this component.

ClauseComponent Header Background

The linear gradient color behind a ClauseComponent header needs to be based off of clauseProps.CLAUSE_BACKGROUND

See the declaration of the color here.

Responsive Font Size Accessibility

WCAG 2.0 Level AA 1.4.4 (Resize Text)

Tasks

• All fonts should be sized relatively, which will be more responsive and allow better accessibility to those who magnify or zoom on their devices. Move away from px and instead favor rem, em, or %.

Related Issues:

• Issue #43 in Template Studio v2

Utilize Cicero v0.20

Is your feature request related to a problem? Please describe.
Once alpha1 is out for Cicero, update the UI to use the markdown transform stack

Describe the solution you'd like
N/A

Additional context

• N/A

Contract Editor Clause Styling

Is your feature request related to a problem? Please describe.
Current clauses within the contract render as style-less blocks.

Describe the solution you'd like
Contract Editor clauses need clause styling along with optional props for styling to users' specs

Describe alternatives you've considered
N/A

Additional context
Invision Design from @Michael-Grover

Use the Template Library as a guide

Related Issues:

• #1
• #5
• #63
• #86
• TSv2 59

Rendering issue filtering templates

Filtering of templates in the template library component introduces spaces between each card used for the templates.

To Reproduce
Steps to reproduce the behavior:

1. Start typing "acceptance" into the filter box

Expected behavior
Templates are filtered and laid out correctly.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: Both Chrome and Safari
• Version: Latest

Clause Template Hover Effect

When the user hovers on a Clause Template, the template name and buttons appear. When the user hovers over a button, it changes color.

@irmerk

https://projects.invisionapp.com/d/main#/console/16741009/380387451/preview

Image Description Accessibility

WCAG 2.0 Level A 1.1.1 (Non-text Content)

Tasks

• Use unique and descriptive alt="..." tags in images. Ensure all images used for decoration only contain an empty string for alt. Describe purpose or meaning of image, and include any text which exists in the image.

Related Issues:

• Issue #38 in Template Studio v2

Documentation for this repository

Tasks

• Create information files for contributors and developers.
• Clarify instructions for components and repo as a whole.
• Add license.

Contrast Minimum Accessibility

WCAG 2.0 Level AA 1.4.3 (Contrast (Minimum))

Tasks

• Contrast ratio should be at least 4.5:1.

Related Issues:

• Issue #42 in Template Studio v2

User can backspace last character of variable and edit locked text

Describe the bug
A user can edit locked text around a variable by removing the last character of the variable and continuing to type. If a user clicks somewhere else, they can no longer edit the new text added to the locked text and the clause will be broken with no way to fix it.

To Reproduce
Steps to reproduce the behavior:

1. Add a clause while lockText is true
2. Remove the last character of a variable by using the backspace key
3. Continue to type after hitting backspace
4. See your text be added to the locked text area instead of inside of the highlighted variable

Expected behavior
A user should not be able to add text to the locked text area of a clause. If the user removes the last character of a variable and continues to type, they should still be inside of the variable.

Component: README.md Editor

• Based on markdown-editor

Clause Template Header Tooltip

Is your feature request related to a problem? Please describe.
IFF the header is truncated, hovering over the text should pop up a tooltip with the full header

Describe the solution you'd like
Expound on the hover effect and create a tooltip which will display the full header.

Describe alternatives you've considered
Semantic UI React may not be the best route, we may want to create our own component.

Additional context

• Related to #118
• A good start for context is where Popup is used from Semantic UI React in the Markdown Editor
• @Michael-Grover could you provide a mockup of this?

VariablePlugin README

VariablePlugin

This should have developer documentation associated with it to showcase how it can be used and its purpose.

VariablePlugin: A custom Slate plugin for using editable, highlighted variables within a clause

Handle Duplicate clauseId from Copy/Paste

Linked Isues:

- MDE 88

- TSv2 82

---

Is your feature request related to a problem? Please describe.
Incorporate any clause specific logic here from markdown-editor Issue 88

Currently, a uuidv4 is assigned to each clause template added into the markdown of the contract. Copying and pasting should recognize that as already existing and create a new uuidv4

Describe the solution you'd like
Possibly register multiple onPaste handlers on the underlying Slate editor. These are likely chained by the call to next(). Test what happens on paste of HTML which contains an existing clause <div>.

When a clause template is pasted, TSv2 should check to see if a clause template exists in the pasted text. If so, check if that clause template is already in the contract. If so, assign a new uuidv4 to this clause template.

Describe alternatives you've considered
A good starting point should be SlateJS's onPaste plugin
Already in the code here

Additional context
N/A

ErrorLogger Accepts Objects

Is your feature request related to a problem? Please describe.
Revisit ErrorLogger logic. Right now, it expects an array of errors every time a clause is parsed. This means if multiple changes cause a clause to be parsed multiple times, the same error will be added to the array multiple times and we end up with multiple of the same error.

Describe the solution you'd like
It makes more sense to use an object instead of an array, where the clauseId are keys and we update the error by clauseId, so we only ever have one error per clause.

Describe alternatives you've considered
Any alternatives are welcome.

Additional context
Related issue in TSv2

Navigation Scrollbar Fix

Related to issue #91

Remove the shadow of a scrollbar when the component is short enough to not need scrolling.

---

Button Description Accessibility

WCAG 2.0 Level A 2.4.4 (Link Purpose)

Tasks

• Ambiguous buttons should be more descriptive for screen readers. This can be achieved by creating a visually hidden span with a description in it.

Related Issues:

• Issue #40 in Template Studio v2

Whitespace Handling

Loading text with whitespace does not always round-trip in the Clause Editor. For instance the bit of sample text from the volume discount:

a) Settlement Amount. Our agent will pay you according to your payment plan, as described below, in US dollars for the face amount of Charges submitted from your Establishments less all applicable deductions, rejections, and withholdings, which include: 
    (i) the Discount, 
    (ii) any amounts you owe us or our Affiliates, 
    (iii) any amounts for which we have Chargebacks, and (iv) any Credits you submit. Our agent will subtract the full amount of all applicable deductions, rejections, and withholdings, from this payment to you (or debit your Bank Account), but if it cannot, then you must pay it promptly upon demand.

Becomes the following in the markdown window:

a) Settlement Amount. Our agent will pay you according to your payment plan, as described below, in US dollars for the face amount of Charges submitted from your Establishments less all applicable deductions, rejections, and withholdings, which include: 
(i) the Discount, 
(ii) any amounts you owe us or our Affiliates, 
(iii) any amounts for which we have Chargebacks, and (iv) any Credits you submit. Our agent will subtract the full amount of all applicable deductions, rejections, and withholdings, from this payment to you (or debit your Bank Account), but if it cannot, then you must pay it promptly upon demand. 

Which leads to parsing issues.

Variable Background Colors

Is your feature request related to a problem? Please describe.
Variables should have customizable background colors, as well as only having colors in lockText mode.

Describe the solution you'd like
Allow for props to dictate the color of the variables, and only display this when lockText is true.

Describe alternatives you've considered
Open to input.

Additional context
Referenced in accordproject/markdown-editor#124

Component: Contract Editor

• https://github.com/accordproject/contract-editor
• In Edit mode can supply values for variables and edit the text of the contract
• In Design mode new variables can be inserted and can drag-drop Clauses into the contract

Search bar styling

Change the search bar styling to match this mockup. Click "inspect" in the lower right corner to view the CSS. You may need to request access. You can ignore everything about the mockup except the search bar.

Additionally, if you zoom in on the search bar as it currently stands, there appears to be an extra border around it. Remove this extra border.

ErrorLogger Displaying of "Error" When Single Error Exists

Describe the bug
The ErrorLogger is displaying "Errors" when only one error exists.

To Reproduce
Steps to reproduce the behavior:

1. Open Template Studio v2 on Netlify
2. Click on + Add to contract for Copyright License
3. See the error component display incorrectly at the bottom of the screen

Expected behavior
If only one error exists, display "1 Error", if more than one exists, display "# Errors"

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome & Safari

Additional context
N/A