Update download box to include shapefile downloads

- refator download packet scss - add shapefile URL to .env files - update tests - index forwarding pattern - update snapshots
2025-02-23 10:04:18 -08:00 · 2022-04-05 17:52:13 -07:00 · 2022-04-05 17:52:13 -07:00 · 8162226cdc
commit 8162226cdc
parent 5cb265a93c
11 changed files with 332 additions and 107 deletions
--- a/client/.env.development
+++ b/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 
--- a/client/.env.production
+++ b/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
--- a/client/src/components/DownloadPacket/DownloadPacket.tsx
+++ b/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;
--- a/client/src/components/DownloadPacket/snapshots/downloadPacket.test.tsx.snap
+++ b/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>
+`;
--- a/client/src/components/DownloadPacket/downloadPacket.module.scss
+++ b/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 {
-          @include typeset('sans', 'xs', 3);
-          @include u-margin-bottom(4);
-          
-          span {
-            font-style: italic;
+        // Data source text
+        .dataSourceText {
+          @include baseTextStyle();
+        }
+        // Data source button
+        .dataSourceButtonContainer {
+          @include baseButtonContainerStyles();
+
+          .dataSourceButtonText {
+            @include baseButtonTextStyle();
          }
        }
-
-        .downloadBoxButtonContainer {
-          margin-top: 20px 0 0 0;
-          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%);
-          }
+        
+        // Shapefile text
+        .shapeFileText {
+          @include baseTextStyle();
+          @include u-margin-top(7);
        }
+        // Shapefile button
+        .shapefileButtonContainer{
+          @include baseButtonContainerStyles();

-        .downloadBoxButton{
-          @include u-bg('white');
-          @include u-color('blue-80v');
-          display: flex;
-
-          .downloadPacketText {
-            padding-top: 4px;
-            padding-left: 5px;
+          .shapeFileButtonText {
+            @include baseButtonTextStyle();
+            @include u-margin-right(3);
          }
        }

      }
    }
+  }
+
+  .downloadBoxButton{
+    @include u-bg('white');
+    @include u-color('blue-80v');
+    display: flex;
+  }
+
+  .newtag {
+    @include u-text("blue-70v");
+    @include u-bg("yellow-20v");
  }
--- a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts
+++ b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts
@ -4,10 +4,14 @@ declare namespace DownloadPacketModuleScssNamespace {
        downloadBox: string;
        downloadBoxTextBox: string;
        downloadBoxTitle: string;
-        downloadBoxText: string;
-        downloadBoxButtonContainer: string;
+        dataSourceText: string;
+        dataSourceButtonContainer: string;
+        shapefileButtonContainer: string;
        downloadBoxButton: string;
-        downloadPacketText: string;
+        dataSourceButtonText: string;
+        shapeFileText: string;
+        shapeFileButtonText: string;
+        newtag: string;
    }
  }

--- a/client/src/components/DownloadPacket/downloadPacket.test.tsx
+++ b/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', () => {
-  render(
+describe('download packet component defined', () => {
+  const {asFragment} = render(
      <LocalizedComponent>
        <DownloadPacket />
      </LocalizedComponent>,
  );

-  screen.getByRole('button', {name: /download package/i});
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

--- a/client/src/components/DownloadPacket/index.tsx
+++ b/client/src/components/DownloadPacket/index.tsx
@ -1,45 +1,3 @@
-import React from 'react';
-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>
-  );
-};
+import DownloadPacket from './DownloadPacket';

 export default DownloadPacket;
--- a/client/src/data/copy/methodology.tsx
+++ b/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
-    id={ 'methodology.page.downloadPacket.info.text'}
-    defaultMessage= {`
-      The download package includes draft v{version} of the list of disadvantaged communities
-      (.csv and .xlsx).
-    `}
-    description= {'Navigate to the methodology page. This is the download packet info text'}
+  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= {{
-      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
-    id={ 'methodology.page.downloadPacket.button.text'}
-    defaultMessage= {'Download package'}
+  BUTTON_TEXT1: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.button1.text'}
+    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= {
--- a/client/src/intl/en.json
+++ b/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": {
-    "defaultMessage": "Download package",
+  "methodology.page.downloadPacket.button1.text": {
+    "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": {
-    "defaultMessage": "The download package includes draft v{version} of the list of disadvantaged communities (.csv and .xlsx).",
+  "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"
  },
+  "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"
--- a/client/src/pages/tests/snapshots/methodology.test.tsx.snap
+++ b/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>
-                    
-      The download package includes draft v0.1 of the list of disadvantaged communities
-      (.csv and .xlsx).
-     
+                    Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). 
                    <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>