Update download box to include shapefile downloads

- refator download packet scss
- add shapefile URL to .env files
- update tests
- index forwarding pattern
- update snapshots

client/.env.development

@@ -10,6 +10,8 @@ GATSBY_DATA_PIPELINE_SCORE_PATH_LOCAL=data_pipeline/data/score
 GATSBY_DATA_PIPELINE_SCORE_PATH=data-pipeline/data/score
 
 GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening_Tool_Data.zip
+GATSBY_SHAPE_FILE_PATH=shapefile/usa.zip
+
 GATSBY_MAP_TILES_PATH=tiles
 
 # If you want the map to render a MapBox base map (as opposed to the 

client/.env.production

@@ -7,4 +7,5 @@ GATSBY_CDN_TILES_BASE_URL=https://static-data-screeningtool.geoplatform.gov
 
 GATSBY_DATA_PIPELINE_SCORE_PATH=data-pipeline/data/score
 GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening_Tool_Data.zip
+GATSBY_SHAPE_FILE_PATH=shapefile/usa.zip
 GATSBY_MAP_TILES_PATH=tiles

client/src/components/DownloadPacket/DownloadPacket.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {Button, Grid, Tag} from '@trussworks/react-uswds';
+
+import * as styles from './downloadPacket.module.scss';
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+
+// @ts-ignore
+import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
+
+const DownloadPacket = () => {
+  return (
+    <Grid>
+      <div className={styles.downloadBoxContainer}>
+        <div className={styles.downloadBox}>
+          <div className={styles.downloadBoxTextBox}>
+
+            {/* Download box title */}
+            <div className={styles.downloadBoxTitle}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
+            </div>
+
+            {/* 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 */}
+            <div className={styles.dataSourceButtonContainer}>
+              <a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
+                <Button className={styles.downloadBoxButton} type="button">
+                  <div>
+                    <img src={downloadIcon} alt={'download icon for download package'}/>
+                  </div>
+                  <div className={styles.dataSourceButtonText}>
+                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}
+                  </div>
+                </Button>
+              </a>
+            </div>
+
+            {/* Download box description 2 */}
+            <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}>
+              <a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
+                <Button className={styles.downloadBoxButton} type="button">
+                  <div>
+                    <img src={downloadIcon} alt={'download icon for download package'}/>
+                  </div>
+                  <div className={styles.shapeFileButtonText}>
+                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}
+                  </div>
+                </Button>
+              </a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </Grid>
+  );
+};
+
+export default DownloadPacket;

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

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`download packet component defined checks if component renders 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-testid="grid"
+  >
+    <div>
+      <div>
+        <div>
+          <div>
+            Files available for download
+          </div>
+          <div>
+            Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). 
+            <span>
+              Last updated: 04/06/22 
+            </span>
+          </div>
+          <div>
+            <a
+              data-cy="download-link"
+              download=""
+              href="//"
+            >
+              <button
+                class="usa-button"
+                data-testid="button"
+                type="button"
+              >
+                <div>
+                  <img
+                    alt="download icon for download package"
+                    src="test-file-stub"
+                  />
+                </div>
+                <div>
+                  Download data sources
+                </div>
+              </button>
+            </a>
+          </div>
+          <div>
+            <span
+              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>
+            <a
+              data-cy="shapefile-link"
+              download=""
+              href="//"
+            >
+              <button
+                class="usa-button"
+                data-testid="button"
+                type="button"
+              >
+                <div>
+                  <img
+                    alt="download icon for download package"
+                    src="test-file-stub"
+                  />
+                </div>
+                <div>
+                  Download shapefiles
+                </div>
+              </button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,7 +1,35 @@
 @use '../../styles/design-system.scss' as *;
 
-.downloadBoxContainer {
+@mixin baseButtonContainerStyles {
+  align-self: center;
 
+  a {
+    text-decoration: none;
+  }
+
+  img {
+    // This should be a global css-filter value as it's generated
+    // from the primary color.
+    filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
+  }
+}
+
+@mixin baseTextStyle {
+  @include typeset('sans', 'xs', 3);
+  @include u-margin-top(2);
+  @include u-margin-bottom(2);
+  
+  span {
+    font-style: italic;
+  }
+};
+
+@mixin baseButtonTextStyle {
+  padding-top: 4px;
+  padding-left: 5px;
+}
+
+.downloadBoxContainer {
     color: whitesmoke;
     margin: auto;
     @include u-margin-top(2.5);
@@ -19,44 +47,47 @@
         .downloadBoxTitle {
           @include typeset('sans', 'xs', 3);
           @include u-text('semibold');
-          @include u-margin-bottom(2);
         }
         
-        .downloadBoxText {
+        // Data source text
-          @include typeset('sans', 'xs', 3);
+        .dataSourceText {
-          @include u-margin-bottom(4);
+          @include baseTextStyle();
-          
+        }
-          span {
+        // Data source button
-            font-style: italic;
+        .dataSourceButtonContainer {
+          @include baseButtonContainerStyles();
+
+          .dataSourceButtonText {
+            @include baseButtonTextStyle();
           }
         }
-
+        
-        .downloadBoxButtonContainer {
+        // Shapefile text
-          margin-top: 20px 0 0 0;
+        .shapeFileText {
-          align-self: center;
+          @include baseTextStyle();
-
+          @include u-margin-top(7);
-          a {
-            text-decoration: none;
-          }
-
-          img {
-            // This should be a global css-filter value as it's generated
-            // from the primary color.
-            filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
-          }
         }
+        // Shapefile button
+        .shapefileButtonContainer{
+          @include baseButtonContainerStyles();
 
-        .downloadBoxButton{
+          .shapeFileButtonText {
-          @include u-bg('white');
+            @include baseButtonTextStyle();
-          @include u-color('blue-80v');
+            @include u-margin-right(3);
-          display: flex;
-
-          .downloadPacketText {
-            padding-top: 4px;
-            padding-left: 5px;
           }
         }
 
       }
     }
+  }
+
+  .downloadBoxButton{
+    @include u-bg('white');
+    @include u-color('blue-80v');
+    display: flex;
+  }
+
+  .newtag {
+    @include u-text("blue-70v");
+    @include u-bg("yellow-20v");
   }

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

@@ -4,10 +4,14 @@ declare namespace DownloadPacketModuleScssNamespace {
         downloadBox: string;
         downloadBoxTextBox: string;
         downloadBoxTitle: string;
-        downloadBoxText: string;
+        dataSourceText: string;
-        downloadBoxButtonContainer: string;
+        dataSourceButtonContainer: string;
+        shapefileButtonContainer: string;
         downloadBoxButton: string;
-        downloadPacketText: string;
+        dataSourceButtonText: string;
+        shapeFileText: string;
+        shapeFileButtonText: string;
+        newtag: string;
     }
   }
 

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import {render, screen} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
-import DownloadPacket from '.';
+import DownloadPacket from './DownloadPacket';
 
-test('download packet component defined', () => {
+describe('download packet component defined', () => {
-  render(
+  const {asFragment} = render(
       <LocalizedComponent>
         <DownloadPacket />
       </LocalizedComponent>,
   );
 
-  screen.getByRole('button', {name: /download package/i});
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 

client/src/components/DownloadPacket/index.tsx

@@ -1,45 +1,3 @@
-import React from 'react';
+import DownloadPacket from './DownloadPacket';
-import {Button, Grid} from '@trussworks/react-uswds';
-
-import * as styles from './downloadPacket.module.scss';
-import * as METHODOLOGY_COPY from '../../data/copy/methodology';
-
-// @ts-ignore
-import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
-
-const DownloadPacket = () => {
-  return (
-    <Grid>
-      <div className={styles.downloadBoxContainer}>
-        <div className={styles.downloadBox}>
-          <div className={styles.downloadBoxTextBox}>
-            <div className={styles.downloadBoxTitle}>
-              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
-            </div>
-            <div className={styles.downloadBoxText}>
-              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION}
-              {' '}
-              <span>
-                {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
-              </span>
-            </div>
-            <div className={styles.downloadBoxButtonContainer}>
-              <a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
-                <Button className={styles.downloadBoxButton} type="button">
-                  <div>
-                    <img src={downloadIcon} alt={'download icon for download package'}/>
-                  </div>
-                  <div className={styles.downloadPacketText}>
-                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT}
-                  </div>
-                </Button>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Grid>
-  );
-};
 
 export default DownloadPacket;

client/src/data/copy/methodology.tsx

@@ -73,7 +73,8 @@ export const FORMULA = {
 
 // Download Package
 export const DOWNLOAD_FILE_SIZE = 52;
-export const DOWNLOAD_LAST_UPDATED = 1645180697000;
+export const DOWNLOAD_SHAPE_FILE_SIZE = 740;
+export const DOWNLOAD_LAST_UPDATED = 1649287951000;
 export const VERSION_NUMBER = 0.1;
 
 export const DOWNLOAD_ZIP_URL = [
@@ -82,13 +83,23 @@ export const DOWNLOAD_ZIP_URL = [
   process.env.GATSBY_SCORE_DOWNLOAD_FILE_PATH,
 ].join('/');
 
+export const DOWNLOAD_SHAPEFILE_URL = [
+  process.env.GATSBY_CDN_TILES_BASE_URL,
+  process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
+  process.env.GATSBY_SHAPE_FILE_PATH,
+].join('/');
+
 export const DOWNLOAD_PACKAGE = {
   TITLE: <FormattedMessage
     id={'methodology.page.downloadPacket.header.text'}
-    defaultMessage={`Draft communities list v{version} ({downloadFileSize} unzipped)`}
+    defaultMessage={`Files available for download`}
     description={'Navigate to the methodology page. This is the download packet header text'}
+  />,
+  DESCRIPTION1: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.info.text1'}
+    defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped).`}
+    description= {'Navigate to the methodology page. This is the download packet info text'}
     values= {{
-      version: <FormattedNumber value={VERSION_NUMBER}/>,
       downloadFileSize: <FormattedNumber
         value={DOWNLOAD_FILE_SIZE}
         style="unit"
@@ -97,15 +108,17 @@ export const DOWNLOAD_PACKAGE = {
       />,
     }}
   />,
-  DESCRIPTION: <FormattedMessage
+  DESCRIPTION2: <FormattedMessage
-    id={ 'methodology.page.downloadPacket.info.text'}
+    id={ 'methodology.page.downloadPacket.info.text2'}
-    defaultMessage= {`
+    defaultMessage= {`Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, {shapefileSize} unzipped).`}
-      The download package includes draft v{version} of the list of disadvantaged communities
+    description= {'Navigate to the methodology page. This is the shapefile info text'}
-      (.csv and .xlsx).
-    `}
-    description= {'Navigate to the methodology page. This is the download packet info text'}
     values= {{
-      version: <FormattedNumber value={VERSION_NUMBER}/>,
+      shapefileSize: <FormattedNumber
+        value={DOWNLOAD_SHAPE_FILE_SIZE}
+        style="unit"
+        unit="megabyte"
+        unitDisplay="narrow"
+      />,
     }}
   />,
   LAST_UPDATED: <FormattedMessage
@@ -121,11 +134,21 @@ export const DOWNLOAD_PACKAGE = {
       />,
     }}
   />,
-  BUTTON_TEXT: <FormattedMessage
+  BUTTON_TEXT1: <FormattedMessage
-    id={ 'methodology.page.downloadPacket.button.text'}
+    id={ 'methodology.page.downloadPacket.button1.text'}
-    defaultMessage= {'Download package'}
+    defaultMessage= {'Download data sources'}
     description= {'Navigate to the methodology page. This is the download packet button text'}
   />,
+  BUTTON_TEXT2: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.button2.text'}
+    defaultMessage= {'Download shapefiles'}
+    description= {'Navigate to the methodology page. This is the download shapefiles text'}
+  />,
+  NEW_TAG: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.new.tag.text'}
+    defaultMessage= {'NEW'}
+    description= {'Navigate to the methodology page. This is the new tag text'}
+  />,
 };
 
 export const CATEGORY= {

client/src/intl/en.json

@@ -1159,22 +1159,34 @@
     "defaultMessage": "All categories",
     "description": "Navigate to the methodology page. Navigate to the dataset section. This is the portion of the dataset card Used In text for all methodologies"
   },
-  "methodology.page.downloadPacket.button.text": {
+  "methodology.page.downloadPacket.button1.text": {
-    "defaultMessage": "Download package",
+    "defaultMessage": "Download data sources",
     "description": "Navigate to the methodology page. This is the download packet button text"
   },
+  "methodology.page.downloadPacket.button2.text": {
+    "defaultMessage": "Download shapefiles",
+    "description": "Navigate to the methodology page. This is the download shapefiles text"
+  },
   "methodology.page.downloadPacket.header.text": {
-    "defaultMessage": "Draft communities list v{version} ({downloadFileSize} unzipped)",
+    "defaultMessage": "Files available for download",
     "description": "Navigate to the methodology page. This is the download packet header text"
   },
   "methodology.page.downloadPacket.info.last.updated": {
     "defaultMessage": "Last updated: {downloadLastUpdated}",
     "description": "Navigate to the methodology page. This is the download packet info last updated"
   },
-  "methodology.page.downloadPacket.info.text": {
+  "methodology.page.downloadPacket.info.text1": {
-    "defaultMessage": "The download package includes draft v{version} of the list of disadvantaged communities (.csv and .xlsx).",
+    "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} 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",
+    "description": "Navigate to the methodology page. This is the new tag text"
+  },
   "methodology.page.formula.first": {
     "defaultMessage": "<boldtag>IF</boldtag> the census tract is above the threshold for one or more environmental or climate indicators",
     "description": "Navigate to the methodology page. This is the first part of the formula used in the methodology"

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

@@ -414,15 +414,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               <div>
                 <div>
                   <div>
-                    Draft communities list v0.1 (52MB unzipped)
+                    Files available for download
                   </div>
                   <div>
-                    
+                    Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). 
-      The download package includes draft v0.1 of the list of disadvantaged communities
-      (.csv and .xlsx).
-     
                     <span>
-                      Last updated: 02/18/22 
+                      Last updated: 04/06/22 
                     </span>
                   </div>
                   <div>
@@ -443,7 +440,42 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                           />
                         </div>
                         <div>
-                          Download package
+                          Download data sources
+                        </div>
+                      </button>
+                    </a>
+                  </div>
+                  <div>
+                    <span
+                      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>
+                    <a
+                      data-cy="shapefile-link"
+                      download=""
+                      href="//"
+                    >
+                      <button
+                        class="usa-button"
+                        data-testid="button"
+                        type="button"
+                      >
+                        <div>
+                          <img
+                            alt="download icon for download package"
+                            src="test-file-stub"
+                          />
+                        </div>
+                        <div>
+                          Download shapefiles
                         </div>
                       </button>
                     </a>