Merge pull request #231 from accordproject/dl-variable-colors

feat(ClauseComponent): allow user to dictate color of variables or default to teal

package.json

@@ -109,4 +109,4 @@
       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
     ]
   }
-}
+}

src/ContractEditor/README.md

@@ -15,8 +15,10 @@ const clausePropsObject = {
     CLAUSE_BORDER (string),
     CLAUSE_DELETE (string),
     CLAUSE_DELETE_FUNCTION (function),
+    COMPUTED_COLOR (string),
     HEADER_FONT (string),
     HEADER_TITLE (string),
+    VARIABLE_COLOR (string),
 }
 
 const editorPropsObject = {
@@ -124,7 +126,9 @@ clauseProps = {
     CLAUSE_BORDER,           // (String)
     CLAUSE_DELETE,           // (String)
     CLAUSE_DELETE_FUNCTION,  // (Function)
+    COMPUTED_COLOR,          // (String)
     HEADER_FONT,             // (String)
     HEADER_TITLE,            // (String)
+    VARIABLE_COLOR,          // (String)
 }
 ```

src/components/ClauseComponent.js

@@ -79,7 +79,11 @@ function ClauseComponent(props) {
         {deleteIcon.icon()}
       </ S.ClauseDelete>
       </S.DeleteWrapper>
-      <S.ClauseBody bodyfont={clauseProps.BODY_FONT} >
+      <S.ClauseBody
+        bodyfont={clauseProps.BODY_FONT}
+        variablecolor={clauseProps.VARIABLE_COLOR}
+        computedcolor={clauseProps.COMPUTED_COLOR}
+      >
         {props.children}
       </S.ClauseBody>
     {errorsComponent}
@@ -102,9 +106,11 @@ ClauseComponent.propTypes = {
     CLAUSE_BORDER: PropTypes.string,
     CLAUSE_DELETE: PropTypes.string,
     CLAUSE_DELETE_FUNCTION: PropTypes.func,
+    COMPUTED_COLOR: PropTypes.string,
     HEADER_COLOR: PropTypes.string,
     HEADER_FONT: PropTypes.string,
     HEADER_TITLE: PropTypes.string,
+    VARIABLE_COLOR: PropTypes.string,
   }),
 };
 

src/components/styles.js

@@ -36,6 +36,12 @@ export const ClauseHeader = styled.div`
 `;
 
 export const ClauseBody = styled.div`
+  .variable {
+    color: ${props => props.variablecolor || '#009593'};
+  }
+  .computed {
+    color: ${props => props.computedcolor || '#f1baff'};
+  }
   font-family: ${props => props.bodyfont || 'Graphik'};
   grid-area: sixteen / sixteen / twenty / twenty;
   margin: 2px 0 10px;

src/styles.css

@@ -2,14 +2,6 @@
     background-color: #e98181;
 }
 
-.variable {
-    background-color: #ffeeba;
-}
-
-.computed {
-    background-color: #f1baff;
-}
-
 button.ui.button {
     opacity: 1 !important;
 }