feat(navigation): restyle navigation sizing - I276

src/Navigation/generators.js

@@ -1,9 +1,6 @@
 /* React */
 import React from 'react';
 
-/* Actions */
-import { truncateHeader } from './actions';
-
 /* Styling */
 import * as SC from './styles';
 
@@ -17,9 +14,9 @@ export const headerGenerator = (props) => {
   const headers = props.headers || [];
 
   return headers.map((header) => {
-    const { type, key } = header;
-    const heading = truncateHeader(header);
-    if (!heading) return null;
+    const { type, text, key } = header;
+
+    if (!text) return null;
     switch (type) {
       case 'clause':
         return (
@@ -28,7 +25,7 @@ export const headerGenerator = (props) => {
               onClick={() => navigateHeader(key, type)}
               {...props.styleProps}
           >
-              {truncateHeader(header)}
+              {text}
           </ SC.HeaderClause>
         );
       case 'heading_one':
@@ -38,7 +35,7 @@ export const headerGenerator = (props) => {
               onClick={() => navigateHeader(key, type)}
               {...props.styleProps}
           >
-              {truncateHeader(header)}
+              {text}
           </ SC.HeaderOne>
         );
       case 'heading_two':
@@ -48,7 +45,7 @@ export const headerGenerator = (props) => {
               onClick={() => navigateHeader(key, type)}
               {...props.styleProps}
           >
-              {truncateHeader(header)}
+              {text}
           </ SC.HeaderTwo>
         );
       case 'heading_three':
@@ -58,7 +55,7 @@ export const headerGenerator = (props) => {
               onClick={() => navigateHeader(key, type)}
               {...props.styleProps}
           >
-              {truncateHeader(header)}
+              {text}
           </ SC.HeaderThree>
         );
       default:

src/Navigation/index.test.js

@@ -4,7 +4,7 @@ import toJson from 'enzyme-to-json';
 
 import NavigationComponent from './index';
 import ComponentSwitch from './ComponentSwitch';
-import { truncateHeader } from './actions';
+
 
 describe('<NavigationComponent />', () => {
   const propsFilesTrue = {
@@ -72,58 +72,3 @@ describe('<ComponentSwitch />', () => {
     });
   });
 });
-
-describe('truncateHeader', () => {
-  it('should truncate a clause heading to 20 characters', () => {
-    const clauseHeader = {
-      type: 'clause',
-      text: 'Acceptance of Delivery',
-    };
-    const resultClauseHeader = 'Acceptance of Delive...';
-    expect(truncateHeader(clauseHeader)).toEqual(resultClauseHeader);
-  });
-
-  it('should truncate a heading one to 22 characters', () => {
-    const headingOne = {
-      type: 'heading_one',
-      text: 'Welcome to Template Studio! Edit this text to get started.',
-    };
-    const resultHeadingOne = 'Welcome to Template St...';
-    expect(truncateHeader(headingOne)).toEqual(resultHeadingOne);
-  });
-
-  it('should truncate a heading two to 18 characters', () => {
-    const headingTwo = {
-      type: 'heading_two',
-      text: 'Welcome to Template Studio! Edit this text to get started.',
-    };
-    const resultHeadingTwo = 'Welcome to Templat...';
-    expect(truncateHeader(headingTwo)).toEqual(resultHeadingTwo);
-  });
-
-  it('should truncate a heading three to 14 characters', () => {
-    const headingThree = {
-      type: 'heading_three',
-      text: 'Welcome to Template Studio! Edit this text to get started.',
-    };
-    const resultHeadingThree = 'Welcome to Tem...';
-    expect(truncateHeader(headingThree)).toEqual(resultHeadingThree);
-  });
-
-  it('should return an error for an unknown type', () => {
-    const unknownType = {
-      type: 'unknown',
-      text: 'Welcome to Template Studio! Edit this text to get started.',
-    };
-    const resultUnknownType = 'Error!';
-    expect(truncateHeader(unknownType)).toEqual(resultUnknownType);
-  });
-
-  it('should not truncate heading three if it is less than 14 characters', () => {
-    const headingThree = {
-      type: 'heading_three',
-      text: 'Hello World!',
-    };
-    expect(truncateHeader(headingThree)).toEqual(headingThree.text);
-  });
-});

src/Navigation/styles.js

@@ -7,7 +7,7 @@ export const NavigationWrapper = styled.div`
     position: ${props => props.positionValue || 'static'};
     top: ${props => props.topValue || 'auto'};
     max-height: ${props => props.navMaxHeight || '80vh'};
-    width: ${props => props.navWidth || '180px'};
+    width: ${props => props.navWidth || 'inherit'};
     background-color: ${props => props.backgroundColor || 'inherit'};
     overflow-y: inherit;
 
@@ -20,7 +20,6 @@ export const NavigationWrapper = styled.div`
 /* Navigation Component Switch */
 
 export const Title = styled.a`
-    place-self: center;
     color: #FFFFFF;
     font-size: 1em;
     font-weight: bold;
@@ -50,8 +49,8 @@ export const Files = styled(Title)`
 /* Contract Navigation */
 
 export const ContractHeaders = styled.div`
-    overflow-y: scroll !important;
-    overflow-x: hidden;
+    overflow: hidden;
+    white-space: nowrap;
     padding-top: 10px;
 
     grid-area: body;
@@ -62,10 +61,11 @@ export const ContractHeaders = styled.div`
 `;
 
 export const HeaderOne = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
     margin-top: 2px;
     margin-bottom: 2px;
     height: 24px;
-    width: 185px;
     color: ${props => props.headerColor || '#B9BCC4'};
     font-family: "IBM Plex Sans";
     font-size: 1em;