feat(components): display header on hover - I118

src/ContractEditor/index.js

@@ -120,6 +120,7 @@ ContractEditor.propTypes = {
     CLAUSE_DELETE: PropTypes.string,
     CLAUSE_DELETE_FUNCTION: PropTypes.func,
     HEADER_FONT: PropTypes.string,
+    HEADER_TITLE: PropTypes.string,
   }),
 
   /**

src/components/ClauseComponent.js

@@ -1,5 +1,5 @@
 /* React */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 
@@ -10,12 +10,12 @@ import * as S from './styles';
 import * as deleteIcon from '../icons/trash';
 
 /* Actions */
-import titleGenerator from './actions';
+import headerGenerator from './actions';
 
 const deleteIconProps = {
   'aria-label': deleteIcon.type,
-  width: '12px',
-  height: '15px',
+  width: '15px',
+  height: '19px',
   viewBox: '0 0 12 15'
 };
 
@@ -26,27 +26,40 @@ const deleteIconProps = {
  */
 function ClauseComponent(props) {
   const clauseProps = props.clauseProps || Object.create(null);
+  const [hovering, setHovering] = useState(false);
 
   const errorsComponent = props.errors
     ? <Segment contentEditable={false} attached raised>{props.errors}</Segment>
     : null;
 
   return (
     <S.ClauseWrapper
-      clauseborder={clauseProps.CLAUSE_BORDER}
-      clausebg={clauseProps.CLAUSE_BACKGROUND}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
       id={props.clauseId}
     >
-      <S.ClauseHeader headerfont={clauseProps.HEADER_FONT} >
-        {titleGenerator(props.templateUri)} — SMART CLAUSE
+      <S.ClauseBackground
+        clauseborder={clauseProps.CLAUSE_BORDER}
+        clausebg={clauseProps.CLAUSE_BACKGROUND}
+      />
+
+      <S.ClauseHeader
+        currentHover={hovering}
+        headerfont={clauseProps.HEADER_FONT}
+      >
+        {headerGenerator(props.templateUri, clauseProps.HEADER_TITLE)}
       </S.ClauseHeader>
+      <S.DeleteWrapper
+        currentHover={hovering}
+      >
       <S.ClauseDelete
         {...deleteIconProps}
         clausedelete={clauseProps.CLAUSE_DELETE}
         onClick={() => clauseProps.CLAUSE_DELETE_FUNCTION(props)}
       >
         {deleteIcon.icon()}
       </ S.ClauseDelete>
+      </S.DeleteWrapper>
       <S.ClauseBody bodyfont={clauseProps.BODY_FONT} >
         {props.children}
       </S.ClauseBody>
@@ -71,6 +84,7 @@ ClauseComponent.propTypes = {
     CLAUSE_DELETE: PropTypes.string,
     CLAUSE_DELETE_FUNCTION: PropTypes.func,
     HEADER_FONT: PropTypes.string,
+    HEADER_TITLE: PropTypes.string,
   }),
 };
 

src/components/actions.js

@@ -8,8 +8,14 @@ const titleGenerator = (input) => {
   const reducedTitle = titleReducer(input);
   const spacedTitle = titleSpacer(reducedTitle);
   const finalTitle = titleCaps(spacedTitle);
-
   return finalTitle;
 };
 
-export default titleGenerator;
+const headerGenerator = (templateTitle, inputTitle) => {
+  const title = titleGenerator(templateTitle);
+  const header = (title + inputTitle);
+  const truncatedTitle = ((header.length > 54) ? (`${header.slice(0, 54)}...`) : header);
+  return truncatedTitle;
+};
+
+export default headerGenerator;

src/components/styles.js

@@ -2,49 +2,59 @@ import styled from 'styled-components';
 import './index.css';
 
 export const ClauseWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 10px 375px 1fr 25px 25px 25px 10px;
+  grid-template-rows: 11px 11px 1fr;
+  grid-template-areas: "one two three four five six seven"
+                       "eight nine ten eleven twelve thirteen fourteen"
+                       "fifteen sixteen seventeen eighteen nineteen twenty twentyone";
+`;
+
+export const ClauseBackground = styled.div`
+  background-color: ${props => props.clausebg || '#ECF0FA'};
   border: 1px solid ${props => props.clauseborder || '#19C6C7'};
   border-radius: 3px;
-  background-color: ${props => props.clausebg || '#ECF0FA'};
-
-  display: grid;
-  grid-template-columns: 1fr 20px 20px 20px 20px 1px;
-  grid-template-rows: auto 1fr;
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-  grid-template-areas: "titleArea testIcon codeIcon editIcon deleteIcon endSpace"
-                       "bodyArea bodyArea bodyArea bodyArea bodyArea bodyArea";
+  grid-area: eight / eight / twentyone / twentyone;
 `;
 
 export const ClauseHeader = styled.div`
-  margin: 12px 10px;
-
-  color: #939EBA;
+  visibility: ${props => (props.currentHover ? 'visible' : 'hidden')};
   font-family: ${props => props.headerfont || 'Graphik'};
+  grid-area: two / two / ten / ten;
+  transition-duration: 0.5s;
+  background: linear-gradient(180deg, #FFFFFF 0%, #ECF0FA 100%);
+  align-self: center;
+  justify-self: start;
+  margin: 12px 0;
+  padding: 3px;
+  color: #939EBA;
+  line-height: 14px;
   font-size: 14px;
   font-weight: 600;
-  line-height: 14px;
-
-  grid-area: titleArea;
 `;
 
 export const ClauseBody = styled.div`
-  margin: 10px 10px 15px;
-
-  color: #141F3C;
   font-family: ${props => props.bodyfont || 'Graphik'};
+  grid-area: sixteen / sixteen / twenty / twenty;
+  margin: 10px 0;
+  color: #141F3C;
   font-size: 15px;
   line-height: 22px;
+`;
 
-  grid-area: bodyArea;
+export const DeleteWrapper = styled.div`
+  visibility: ${props => (props.currentHover ? 'visible' : 'hidden')};
+  background: linear-gradient(180deg, #FFFFFF 0%, #ECF0FA 100%);
+  grid-area: six / six / thirteen / thirteen;
+  padding: 2px;
+  place-self: center;
+  transition-duration: 0.5s;
 `;
 
 export const ClauseDelete = styled.svg`
   fill: #939EBA;
   cursor: pointer;
 
-  grid-area: deleteIcon;
-  place-self: center;
-
   &:hover {
     fill: ${props => props.clausedelete || '#19C6C7'};
   }
@@ -53,7 +63,6 @@ export const ClauseDelete = styled.svg`
 export const ClauseAdd = styled.svg`
   fill: #46608E;
   cursor: pointer;
-
   grid-area: editIcon;
   place-self: center;