BHBC-2113: Snapshot test fixes; lint fixes

app/src/components/fields/ReadMoreField.tsx

@@ -1,14 +1,14 @@
-import { Typography, TypographyProps } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
+import { Typography, TypographyProps } from '@material-ui/core';
 import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
 import Icon from '@mdi/react';
 import React, { useState } from 'react';
 
 export interface IReadMoreFieldProps {
   text: string;
   maxCharLength: number;
-  TypographyProps?: Partial<TypographyProps>;
+  TypographyProps?: Partial<TypographyProps>
 }
 
 /**
@@ -28,19 +28,19 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
   const willTruncateText = sanitizedText.length > maxCharLength;
 
   if (!willTruncateText) {
-    return <span>{sanitizedText}</span>;
+    return <span>{sanitizedText}</span>
   }
 
   let truncationIndex = sanitizedText.slice(0, maxCharLength).lastIndexOf(' ');
   if (truncationIndex < 0) {
-    truncationIndex = maxCharLength;
+    truncationIndex = maxCharLength
   }
 
   const persistentTextPortion = sanitizedText.slice(0, truncationIndex);
 
   return (
     <Box>
-      <Typography {...TypographyProps}>
+      <Typography {...TypographyProps}>      
         {showTruncated ? (
           <span>{sanitizedText}</span>
         ) : (
@@ -55,11 +55,12 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
           size="small"
           variant="text"
           onClick={() => setShowTruncated(!showTruncated)}
-          style={{ color: '#757575', fontWeight: 600, textTransform: 'uppercase' }}>
+          style={{ color: '#757575', fontWeight: 600, textTransform: 'uppercase' }}
+        >
           <>
             <Icon path={showTruncated ? mdiChevronUp : mdiChevronDown} size={1} />
             <span>{showTruncated ? 'Read Less' : 'Read More'}</span>
-          </>
+         </>
         </Button>
       </Box>
     </Box>

app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap

@@ -31,18 +31,12 @@ exports[`ProjectDetails renders correctly 1`] = `
         <hr
           class="MuiDivider-root"
         />
-        <div
-          class="MuiBox-root MuiBox-root-8"
-        >
-          <p
-            class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-          >
-            Et ad et in culpa si
-          </p>
-        </div>
+        <span>
+          Et ad et in culpa si
+        </span>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-9"
+        class="MuiBox-root MuiBox-root-8"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -53,7 +47,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <dl
-          class="MuiBox-root MuiBox-root-10"
+          class="MuiBox-root MuiBox-root-9"
         >
           <div
             class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -104,7 +98,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </dl>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-11"
+        class="MuiBox-root MuiBox-root-10"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -115,7 +109,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-12"
+          class="MuiBox-root MuiBox-root-11"
         >
           <div
             class="MuiTypography-root MuiTypography-body1"
@@ -140,7 +134,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-13"
+        class="MuiBox-root MuiBox-root-12"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -157,10 +151,10 @@ exports[`ProjectDetails renders correctly 1`] = `
             class="MuiListItem-root MuiListItem-divider"
           >
             <div
-              class="MuiBox-root MuiBox-root-15"
+              class="MuiBox-root MuiBox-root-14"
             >
               <div
-                class="MuiBox-root MuiBox-root-16"
+                class="MuiBox-root MuiBox-root-15"
               >
                 <span
                   class="MuiTypography-root MuiTypography-body1"
@@ -174,7 +168,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <dl
-                class="MuiBox-root MuiBox-root-17 makeStyles-fundingSourceMeta-14"
+                class="MuiBox-root MuiBox-root-16 makeStyles-fundingSourceMeta-13"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -228,7 +222,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </ul>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-18"
+        class="MuiBox-root MuiBox-root-17"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -239,43 +233,43 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-19"
+          class="MuiBox-root MuiBox-root-18"
         >
           <dl
-            class="MuiBox-root MuiBox-root-21"
+            class="MuiBox-root MuiBox-root-20"
           >
             <div
-              class="MuiBox-root MuiBox-root-22"
+              class="MuiBox-root MuiBox-root-21"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
               >
                 Indigenous
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 First nations code
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               />
             </div>
             <div
-              class="MuiBox-root MuiBox-root-23"
+              class="MuiBox-root MuiBox-root-22"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
               >
                 Other Partnerships
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 3
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 4
               </dd>
@@ -284,7 +278,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-24"
+        class="MuiBox-root MuiBox-root-23"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"

app/src/features/projects/view/components/ProjectObjectives.test.tsx

@@ -122,18 +122,18 @@ describe('ProjectObjectives', () => {
 
     // for finding 'project objectives'
     //@ts-ignore
-    expect(getAllByText(container, 'READ MORE...')[0]).toBeInTheDocument();
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
 
     //@ts-ignore
-    fireEvent.click(getAllByText(container, 'READ MORE...')[0]);
+    fireEvent.click(getAllByText(container, 'Read More')[0]);
 
     //@ts-ignore
-    expect(getAllByText(container, 'READ LESS')[0]).toBeInTheDocument();
+    expect(getAllByText(container, 'Read Less')[0]).toBeInTheDocument();
 
     //@ts-ignore
-    fireEvent.click(getAllByText(container, 'READ LESS')[0]);
+    fireEvent.click(getAllByText(container, 'Read Less')[0]);
 
     //@ts-ignore
-    expect(getAllByText(container, 'READ MORE...')[0]).toBeInTheDocument();
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
   });
 });

app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap

@@ -3,26 +3,44 @@
 exports[`ProjectObjectives renders correctly when both objectives and caveats have length is > 850 characters and are in multiple paragraphs 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-4"
+    class="MuiBox-root MuiBox-root-3"
   >
     <p
       class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
     >
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+      <span>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+ Donec
+      </span>
+      <span>
+        …
+      </span>
     </p>
     <div
-      class="MuiBox-root MuiBox-root-5"
+      class="MuiBox-root MuiBox-root-4"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSizeSmall MuiButton-sizeSmall"
-        style="color: rgb(117, 117, 117);"
+        style="color: rgb(117, 117, 117); font-weight: 600; text-transform: uppercase;"
         tabindex="0"
         type="button"
       >
         <span
           class="MuiButton-label"
         >
-          READ MORE...
+          <svg
+            role="presentation"
+            style="width: 1.5rem; height: 1.5rem;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+          <span>
+            Read More
+          </span>
         </span>
         <span
           class="MuiTouchRipple-root"
@@ -35,66 +53,64 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats ha
 
 exports[`ProjectObjectives renders correctly when objectives and caveats are < 850 characters and in multiple paragraphs 1`] = `
 <DocumentFragment>
-  <div
-    class="MuiBox-root MuiBox-root-6"
-  >
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph1
-    </p>
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph2
-    </p>
-    <p />
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph3
-    </p>
-  </div>
+  <span>
+    Paragraph1
+Paragraph2
+
+Paragraph3
+  </span>
 </DocumentFragment>
 `;
 
 exports[`ProjectObjectives renders correctly when objectives length is <= 850 characters 1`] = `
 <DocumentFragment>
-  <div
-    class="MuiBox-root MuiBox-root-1"
-  >
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Et ad et in culpa si
-    </p>
-  </div>
+  <span>
+    Et ad et in culpa si
+  </span>
 </DocumentFragment>
 `;
 
 exports[`ProjectObjectives renders correctly when objectives length is > 850 characters and caveats is empty 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-2"
+    class="MuiBox-root MuiBox-root-1"
   >
     <p
       class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
     >
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+      <span>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+ Donec
+      </span>
+      <span>
+        …
+      </span>
     </p>
     <div
-      class="MuiBox-root MuiBox-root-3"
+      class="MuiBox-root MuiBox-root-2"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSizeSmall MuiButton-sizeSmall"
-        style="color: rgb(117, 117, 117);"
+        style="color: rgb(117, 117, 117); font-weight: 600; text-transform: uppercase;"
         tabindex="0"
         type="button"
       >
         <span
           class="MuiButton-label"
         >
-          READ MORE...
+          <svg
+            role="presentation"
+            style="width: 1.5rem; height: 1.5rem;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+          <span>
+            Read More
+          </span>
         </span>
         <span
           class="MuiTouchRipple-root"