Update download Box to match design sync

- update FAQ link copy

client/src/components/DownloadPacket/DownloadPacket.tsx

@@ -22,10 +22,6 @@ const DownloadPacket = () => {
             {/* Download box description 1 */}
             <div className={styles.dataSourceText}>
               {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
-              {' '}
-              <span>
-                {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
-              </span>
             </div>
 
             {/* Download box button 1 */}
@@ -41,19 +37,16 @@ const DownloadPacket = () => {
                 </Button>
               </a>
             </div>
-
+            <div className={styles.lastUpdated}>
-            {/* Download box description 2 */}
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
-            <div className={styles.shapeFileText}>
-              <Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
-              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION2}
-              {' '}
-              <span>
-                {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
-              </span>
             </div>
 
+
             {/* Download box button 2 */}
             <div className={styles.shapefileButtonContainer}>
+              <div className={styles.newTagContainer}>
+                <Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
+              </div>
               <a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
                 <Button className={styles.downloadBoxButton} type="button">
                   <div>
@@ -65,6 +58,10 @@ const DownloadPacket = () => {
                 </Button>
               </a>
             </div>
+            <div className={styles.lastUpdated}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
+            </div>
+
 
           </div>
         </div>

client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap

@@ -13,10 +13,7 @@ exports[`download packet component defined checks if component renders 1`] = `
             Files available for download
           </div>
           <div>
-            Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). 
+            Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
-            <span>
-              Last updated: 04/06/22 
-            </span>
           </div>
           <div>
             <a
@@ -42,18 +39,19 @@ exports[`download packet component defined checks if component renders 1`] = `
             </a>
           </div>
           <div>
-            <span
+            Last updated: 04/06/22 
-              class="usa-tag"
-              data-testid="tag"
-            >
-              NEW
-            </span>
-            Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, 740MB unzipped). 
-            <span>
-              Last updated: 04/06/22 
-            </span>
           </div>
           <div>
+            <div>
+              <span
+                class="usa-tag"
+                data-testid="tag"
+              >
+                <strong>
+                  NEW
+                </strong>
+              </span>
+            </div>
             <a
               data-cy="shapefile-link"
               download=""
@@ -71,11 +69,14 @@ exports[`download packet component defined checks if component renders 1`] = `
                   />
                 </div>
                 <div>
-                  Download shapefiles
+                  Download shapefile
                 </div>
               </button>
             </a>
           </div>
+          <div>
+            Last updated: 04/06/22 
+          </div>
         </div>
       </div>
     </div>

client/src/components/DownloadPacket/downloadPacket.module.scss

@@ -2,6 +2,7 @@
 
 @mixin baseButtonContainerStyles {
   align-self: center;
+  @include u-margin-top(2);
 
   a {
     text-decoration: none;
@@ -19,9 +20,6 @@
   @include u-margin-top(2);
   @include u-margin-bottom(2);
   
-  span {
-    font-style: italic;
-  }
 };
 
 @mixin baseButtonTextStyle {
@@ -53,6 +51,14 @@
         .dataSourceText {
           @include baseTextStyle();
         }
+
+        // Last updated
+        .lastUpdated {
+          font-style: italic;
+          align-self: center;
+          @include u-margin-top(1);
+        }
+
         // Data source button
         .dataSourceButtonContainer {
           @include baseButtonContainerStyles();
@@ -69,6 +75,8 @@
         }
         // Shapefile button
         .shapefileButtonContainer{
+          display: flex;
+          flex-direction: column;
           @include baseButtonContainerStyles();
 
           .shapeFileButtonText {
@@ -87,6 +95,12 @@
     display: flex;
   }
 
+  .newTagContainer {
+    align-self: end;
+    @include u-margin-bottom(-1);
+    z-index: 2;
+  }
+
   .newtag {
     @include u-text("blue-70v");
     @include u-bg("yellow-20v");

client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts

@@ -11,7 +11,9 @@ declare namespace DownloadPacketModuleScssNamespace {
         dataSourceButtonText: string;
         shapeFileText: string;
         shapeFileButtonText: string;
+        newTagContainer: string;
         newtag: string;
+        lastUpdated:string;
     }
   }
 

client/src/data/copy/about.tsx

@@ -77,7 +77,7 @@ export const HEADING_3 = {
   DESCRIPTION_1:
   <FormattedMessage
     id={'about.page.sub.header.3.text.1'}
-    defaultMessage={`Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for.
+    defaultMessage={`Find answers on the Climate and Economic Justice Screening Tool's <link1>Frequently Asked Questions</link1>.
     `}
     description={'Navigate to the About page. This is the second heading description'}
     values={{

client/src/data/copy/methodology.tsx

@@ -73,7 +73,7 @@ export const FORMULA = {
 
 // Download Package
 export const DOWNLOAD_FILE_SIZE = 52;
-export const DOWNLOAD_SHAPE_FILE_SIZE = 740;
+export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
 export const DOWNLOAD_LAST_UPDATED = 1649287951000;
 export const VERSION_NUMBER = 0.1;
 
@@ -97,7 +97,7 @@ export const DOWNLOAD_PACKAGE = {
   />,
   DESCRIPTION1: <FormattedMessage
     id={ 'methodology.page.downloadPacket.info.text1'}
-    defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped).`}
+    defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped) or the shapefile, along with a codebook (.zip, {shapefileSize} unzipped).`}
     description= {'Navigate to the methodology page. This is the download packet info text'}
     values= {{
       downloadFileSize: <FormattedNumber
@@ -106,13 +106,6 @@ export const DOWNLOAD_PACKAGE = {
         unit="megabyte"
         unitDisplay="narrow"
       />,
-    }}
-  />,
-  DESCRIPTION2: <FormattedMessage
-    id={ 'methodology.page.downloadPacket.info.text2'}
-    defaultMessage= {`Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, {shapefileSize} unzipped).`}
-    description= {'Navigate to the methodology page. This is the shapefile info text'}
-    values= {{
       shapefileSize: <FormattedNumber
         value={DOWNLOAD_SHAPE_FILE_SIZE}
         style="unit"
@@ -141,13 +134,16 @@ export const DOWNLOAD_PACKAGE = {
   />,
   BUTTON_TEXT2: <FormattedMessage
     id={ 'methodology.page.downloadPacket.button2.text'}
-    defaultMessage= {'Download shapefiles'}
+    defaultMessage= {'Download shapefile'}
     description= {'Navigate to the methodology page. This is the download shapefiles text'}
   />,
   NEW_TAG: <FormattedMessage
     id={ 'methodology.page.downloadPacket.new.tag.text'}
-    defaultMessage= {'NEW'}
+    defaultMessage= {`<boldtag>NEW</boldtag>`}
     description= {'Navigate to the methodology page. This is the new tag text'}
+    values={{
+      boldtag: boldFn,
+    }}
   />,
 };
 

client/src/intl/en.json

@@ -84,7 +84,7 @@
     "description": "Navigate to the About page. This is the fourth heading"
   },
   "about.page.sub.header.3.text.1": {
-    "defaultMessage": "Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for.",
+    "defaultMessage": "Find answers on the Climate and Economic Justice Screening Tool's <link1>Frequently Asked Questions</link1>.",
     "description": "Navigate to the About page. This is the second heading description"
   },
   "about.page.title.text": {
@@ -1187,7 +1187,7 @@
     "description": "Navigate to the methodology page. This is the download packet button text"
   },
   "methodology.page.downloadPacket.button2.text": {
-    "defaultMessage": "Download shapefiles",
+    "defaultMessage": "Download shapefile",
     "description": "Navigate to the methodology page. This is the download shapefiles text"
   },
   "methodology.page.downloadPacket.header.text": {
@@ -1199,15 +1199,11 @@
     "description": "Navigate to the methodology page. This is the download packet info last updated"
   },
   "methodology.page.downloadPacket.info.text1": {
-    "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped).",
+    "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped) or the shapefile, along with a codebook (.zip, {shapefileSize} unzipped).",
     "description": "Navigate to the methodology page. This is the download packet info text"
   },
-  "methodology.page.downloadPacket.info.text2": {
-    "defaultMessage": "Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, {shapefileSize} unzipped).",
-    "description": "Navigate to the methodology page. This is the shapefile info text"
-  },
   "methodology.page.downloadPacket.new.tag.text": {
-    "defaultMessage": "NEW",
+    "defaultMessage": "<boldtag>NEW</boldtag>",
     "description": "Navigate to the methodology page. This is the new tag text"
   },
   "methodology.page.formula.first": {

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -512,7 +512,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   Still have questions?
                 </h2>
                 <p>
-                  Please navigate to to our 
+                  Find answers on the Climate and Economic Justice Screening Tool's 
                   <a
                     class="usa-link usa-link--external"
                     data-cy=""
@@ -520,9 +520,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     rel="noreferrer"
                     target="_blank"
                   >
-                    frequently asked questions
+                    Frequently Asked Questions
                   </a>
-                   to find the answers you are looking for.
+                  .
     
                 </p>
               </div>

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -417,10 +417,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     Files available for download
                   </div>
                   <div>
-                    Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). 
+                    Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
-                    <span>
-                      Last updated: 04/06/22 
-                    </span>
                   </div>
                   <div>
                     <a
@@ -446,18 +443,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     </a>
                   </div>
                   <div>
-                    <span
+                    Last updated: 04/06/22 
-                      class="usa-tag"
-                      data-testid="tag"
-                    >
-                      NEW
-                    </span>
-                    Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, 740MB unzipped). 
-                    <span>
-                      Last updated: 04/06/22 
-                    </span>
                   </div>
                   <div>
+                    <div>
+                      <span
+                        class="usa-tag"
+                        data-testid="tag"
+                      >
+                        <strong>
+                          NEW
+                        </strong>
+                      </span>
+                    </div>
                     <a
                       data-cy="shapefile-link"
                       download=""
@@ -475,11 +473,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                           />
                         </div>
                         <div>
-                          Download shapefiles
+                          Download shapefile
                         </div>
                       </button>
                     </a>
                   </div>
+                  <div>
+                    Last updated: 04/06/22 
+                  </div>
                 </div>
               </div>
             </div>