refactor(TemplateLibrary): remove style props and replace with classN…

…ames - i320 Signed-off-by: Lenvin Gonsalves <[email protected]>
accordproject · Apr 18, 2020 · 414f5d4 · 414f5d4
1 parent da1b136
commit 414f5d4
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 54 deletions.
diff --git a/src/TemplateLibrary/Buttons/index.js b/src/TemplateLibrary/Buttons/index.js
@@ -55,12 +55,12 @@ const AddClauseBtn = styled(Button).attrs({
 `;
 
 export const ImportComponent = props => (
-    <ImportButton onClick={props.importInput} className="importButton">
+    <ImportButton onClick={props.importInput} className="templateImportButton">
         Import from VS Code
     </ImportButton>);
 
 export const UploadComponent = props => (
-    <UploadButton onClick={props.uploadInput} className="uploadButton">
+    <UploadButton onClick={props.uploadInput} className="templateUploadButton">
         Upload CTA file
     </UploadButton>);
 

diff --git a/src/TemplateLibrary/Components/TemplateActions.js b/src/TemplateLibrary/Components/TemplateActions.js
@@ -5,22 +5,22 @@ import { Icon } from 'semantic-ui-react';
 
 const ActionsContainer = styled.div`
   padding: 0 !important;
-  background-color: ${props => props.color || '#F9F9F9'} !important;
+  background-color: #F9F9F9 !important;
   max-height: 30px;
 `;
 
 const TemplateBtn = styled.a`
   padding: 5px 10px;
   display: inline-block;
-  color: ${props => props.color || '#484848'};
+  color: #484848;
   font-family: "IBM Plex Sans";
   font-size: 0.75em;
   font-weight: bold;
 `;
 
 const AddToContractBtn = styled(TemplateBtn)`
   width: 60%;
-  border-right: 1px solid ${props => props.color || '#E1E5EB'}; 
+  border-right: 1px solid #E1E5EB; 
   cursor: pointer;
   &:hover {
     color: #3087CB;
@@ -40,18 +40,17 @@ const DetailsBtn = styled(TemplateBtn)`
  * with functionality.
  */
 const TemplateActions = props => (
-    <ActionsContainer color={props.libraryProps.ACTION_BUTTON_BG}>
+    <ActionsContainer className={props.className}>
     <div>
       <AddToContractBtn
-        className="adToContractButton"
-        color={props.libraryProps.ACTION_BUTTON_BORDER}
+        className="templateAddToContractButton"
         onClick={() => props.addToCont(props.uriKey)}
       >
         <Icon name="plus" />
         Add to contract
       </AddToContractBtn>
       <DetailsBtn
-        color={props.libraryProps.ACTION_BUTTON}
+        className="templateDetailsButton"
         onClick={() => props.handleViewDetails(props.uriKey)}>
         Details
       </DetailsBtn>
@@ -63,11 +62,6 @@ TemplateActions.propTypes = {
   addToCont: PropTypes.func,
   handleViewDetails: PropTypes.func,
   uriKey: PropTypes.string,
-  libraryProps: PropTypes.shape({
-    ACTION_BUTTON: PropTypes.string,
-    ACTION_BUTTON_BG: PropTypes.string,
-    ACTION_BUTTON_BORDER: PropTypes.string,
-  }),
 };
 
 export default TemplateActions;
diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js
@@ -7,16 +7,15 @@ import TemplateActions from './TemplateActions';
 
 const CardContainer = styled(Card)`
   margin: 10px 0 !important;
-  border: ${props => props.tempborder || 'none'};
+  border: none;
   border-radius: 6px !important;
-  background-color: ${props => props.color || '#fff'} !important;
+  background-color: #fff !important;
   text-align: left;
   box-shadow: 0 1px 9px 0 rgba(0,0,0,0.1) !important;
 `;
 
 const Title = styled.div`
   display: inline;
-  color: ${props => props.color || null};
   font-size: medium;
   font-weight: 600;
   line-height: 16px;
@@ -39,7 +38,6 @@ const DescriptionContainer = styled(Card.Description)`
   max-width: 400px;
   margin: auto;
   font-size: 0.79em;
-  color: ${props => props.color || null} !important;
 `;
 
 /**
@@ -49,25 +47,23 @@ const DescriptionContainer = styled(Card.Description)`
 const TemplateCard = props => (
     <CardContainer fluid
       key={props.template.uri}
-      color={props.libraryProps.TEMPLATE_BACKGROUND}
-      tempborder={props.libraryProps.TEMPLATE_BORDER}
+      className={'templateCard'}
     >
         <Card.Content>
           <TemplateLogo src={props.template.icon} />
-          <Title color={props.libraryProps.TEMPLATE_TITLE}>
+          <Title className={'templateCardTitle'}>
             {
               props.template.displayName
                 ? props.template.displayName
                 : props.template.name
             }
             <Version>v {props.template.version}</Version>
           </Title>
-          <DescriptionContainer color={props.libraryProps.TEMPLATE_DESCRIPTION}>
+          <DescriptionContainer className={'templateCardDesc'}>
             {props.template.description}
           </DescriptionContainer>
         </Card.Content>
         <TemplateActions
-          libraryProps={props.libraryProps}
           addToCont={props.addToCont}
           uriKey={props.template.uri}
           handleViewDetails={props.handleViewTemplate}
@@ -80,16 +76,6 @@ TemplateCard.propTypes = {
   template: PropTypes.object,
   addToCont: PropTypes.func,
   handleViewTemplate: PropTypes.func,
-  libraryProps: PropTypes.shape({
-    ACTION_BUTTON: PropTypes.string,
-    ACTION_BUTTON_BG: PropTypes.string,
-    ACTION_BUTTON_BORDER: PropTypes.string,
-    HEADER_TITLE: PropTypes.string,
-    TEMPLATE_BACKGROUND: PropTypes.string,
-    TEMPLATE_BORDER: PropTypes.string,
-    TEMPLATE_DESCRIPTION: PropTypes.string,
-    TEMPLATE_TITLE: PropTypes.string,
-  }),
 };
 
 export default TemplateCard;
diff --git a/src/TemplateLibrary/customStyles.js b/src/TemplateLibrary/customStyles.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const CustomStylesWrapper = styled.div`
+.templateListTitle{
+};
+.templateSearchInput{
+};
+.templateCardsDiv{
+};
+.templateCard{
+};
+.templateCardTitle{
+};
+.templateCardDesc{
+};
+.templateActions{
+};
+.templateAddToContractButton{
+};
+.templateDetailsButton{
+};
+.templateImportButton{
+};
+.templateUploadButton{
+};
+.addTemplateButton{
+};
+`
diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js
@@ -13,6 +13,9 @@ import isQueryMatch from '../utilities/isQueryMatch';
 import TemplateCard from './Components/TemplateCard';
 import { ImportComponent, UploadComponent, NewClauseComponent } from './Buttons';
 
+/** classNames exposed for user-defined styling */
+import {CustomStylesWrapper} from './customStyles';
+
 const TemplatesWrapper = styled.div`
   font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
@@ -43,7 +46,6 @@ const HeaderTitle = styled.p`
   font-weight: 800;
   font-size: 1em;
   text-align: left;
-  color: ${props => props.color || null};
 `;
 
 const HeaderImports = styled.div`
@@ -73,8 +75,8 @@ const SearchInput = styled(Input)`
   &&& input,
   &&& input::placeholder,
   &&& input:focus {
-    color: ${props => props.searchColor || '#FFFFFF'} !important;
-    caret-color: ${props => props.searchColor || '#FFFFFF'} !important;
+    color: #FFFFFF !important;
+    caret-color: #FFFFFF !important;
     background-color: transparent;
     opacity: 1 !important;
   },
@@ -86,7 +88,7 @@ const SearchInput = styled(Input)`
 const TemplateCards = styled.div`
   margin: 0 !important;
   width: 100%;
-  height: ${props => props.tempsHeight || 'calc(100% - 54px)'};
+  height: calc(100% - 54px);
   display: inherit;
   overflow-y: scroll !important;
 `;
@@ -120,12 +122,12 @@ const TemplateLibraryComponent = (props) => {
    * @return {*} the react component
    */
   const filtered = filterTemplates(props.templates);
-  const libraryProps = props.libraryProps || Object.create(null);
 
   return (
+    <CustomStylesWrapper>
       <TemplatesWrapper>
         <Header>
-          <HeaderTitle color={libraryProps.HEADER_TITLE}>Clause Templates</HeaderTitle>
+          <HeaderTitle className={'templateListTitle'} >Clause Templates</HeaderTitle>
           <HeaderImports>
             {props.import
             && <ImportComponent importInput={props.import} />}
@@ -134,39 +136,27 @@ const TemplateLibraryComponent = (props) => {
           </HeaderImports>
         </Header>
         <Functionality>
-          <SearchInput className="icon" fluid icon="search" placeholder="Search..." onChange={onQueryChange} searchColor={libraryProps.SEARCH_COLOR} />
+          <SearchInput className="icon" fluid icon="search" placeholder="Search..." onChange={onQueryChange} className={'templateSearchInput'} />
           {props.addTemp
           && <NewClauseComponent addTempInput={props.addTemp} />}
         </Functionality>
-        <TemplateCards tempsHeight={libraryProps.TEMPLATES_HEIGHT} >
+        <TemplateCards className={'templateCardsDiv'} >
           {_.sortBy(filtered, ['name']).map(t => (
             <TemplateCard
               key={t.uri}
               addToCont={props.addToCont}
               template={t}
               handleViewTemplate={props.handleViewTemplate}
               className="templateCard"
-              libraryProps={libraryProps}
             />
           ))}
         </TemplateCards>
       </TemplatesWrapper>
+      </CustomStylesWrapper>
   );
 };
 
 TemplateLibraryComponent.propTypes = {
-  libraryProps: PropTypes.shape({
-    ACTION_BUTTON: PropTypes.string,
-    ACTION_BUTTON_BG: PropTypes.string,
-    ACTION_BUTTON_BORDER: PropTypes.string,
-    HEADER_TITLE: PropTypes.string,
-    SEARCH_COLOR: PropTypes.string,
-    TEMPLATE_BACKGROUND: PropTypes.string,
-    TEMPLATE_BORDER: PropTypes.string,
-    TEMPLATE_DESCRIPTION: PropTypes.string,
-    TEMPLATE_TITLE: PropTypes.string,
-    TEMPLATES_HEIGHT: PropTypes.string,
-  }),
   upload: PropTypes.func,
   import: PropTypes.func,
   addTemp: PropTypes.func,