Initial Download page (#2021)

* Intial version of 1.0 download page

* fix a11y errors

* Update snapshots

client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss

@@ -0,0 +1,45 @@
+@use '../../styles/design-system.scss' as *;
+
+.releaseUpdateComponent{
+
+    .releaseUpdateContainer{
+        @include u-margin-top(2);
+        @include u-padding(3);
+        border: 2px solid #9A9B99;
+        border-radius: 2px;
+
+        .releaseHeader{
+            font-size: x-large;
+            font-weight: 600;
+            @include u-margin-bottom(2);
+        }
+
+        .releaseSectionTitle{
+            font-size: large;
+            border-bottom: 2px solid #9A9B99;
+        }
+    }
+
+    .showHideText {
+        //remove styling of button
+        border: none;
+        background-color: white;
+
+        //emulate a link
+        cursor:pointer;
+        text-decoration:underline;
+
+        min-width: 45px;
+        padding-left: 0;
+    }
+
+    .showHideIcon{
+        vertical-align: middle;
+        height: 1rem;
+        filter: invert(8%) sepia(90%) saturate(7490%) hue-rotate(247deg) brightness(105%) contrast(143%);
+
+        &:hover{
+            cursor: pointer;
+        }
+    }
+}

client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss.d.ts

@@ -0,0 +1,18 @@
+declare namespace ReleaseUpdateNamespace {
+    export interface IReleaseUpdateScss {
+      releaseUpdateComponent: string;
+      releaseUpdateContainer: string;
+      releaseSectionTitle:string;
+      releaseSectionBody:string;
+      releaseHeader: string;
+      showHideText: string;
+      showHideIcon: string;
+    }
+  }
+
+declare const ReleaseUpdateScssModule: ReleaseUpdateNamespace.IReleaseUpdateScss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: ReleaseUpdateNamespace.IReleaseUpdateScss;
+  };
+
+  export = ReleaseUpdateScssModule;

client/src/components/ReleaseUpdate/ReleaseUpdate.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import ReleaseUpdate from './ReleaseUpdate';
+
+describe('rendering of ReleaseUpdate Component', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <ReleaseUpdate />
+      </LocalizedComponent>,
+  );
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/ReleaseUpdate/ReleaseUpdate.tsx

@@ -0,0 +1,116 @@
+import React, {useState} from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as styles from './ReleaseUpdate.module.scss';
+import * as DOWNLOAD_COPY from '../../data/copy/downloads';
+
+// @ts-ignore
+import expandIcon from '/node_modules/uswds/dist/img/usa-icons/expand_more.svg';
+// @ts-ignore
+import collapseIcon from '/node_modules/uswds/dist/img/usa-icons/expand_less.svg';
+
+export interface IReleaseUpdateProps {
+}
+
+interface IJ40AccordionItem {
+  id: string,
+  children: React.ReactElement
+}
+
+
+/**
+ * This function will create the custom Accordion item. This will be used
+ * for the race and age demographic UI elements
+ *
+ * @param {IJ40AccordionItem} props
+ * @return {JSX.Element}
+ */
+const J40AccordionItem = ({id, children}:IJ40AccordionItem) => {
+  const intl = useIntl();
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <>
+      <span>
+        {intl.formatMessage(DOWNLOAD_COPY.PAGE_INTRO.VIEW)}{' '}
+        <a
+          className={styles.showHideText ? `usa-link ${styles.showHideText}` : `usa-link`}
+          href={'javascript:void(0)'}
+          id={`${id}-header`}
+          aria-controls={`${id}-panel`}
+          // aria-expanded={isExpanded}
+          onClick={() => setIsExpanded(!isExpanded)}
+          tabIndex={0}
+        >
+          {intl.formatMessage(DOWNLOAD_COPY.PAGE_INTRO.CHANGE_LOG)}
+        </a>
+        { isExpanded ?
+          <img
+            className={styles.showHideIcon}
+            src={collapseIcon}
+            alt={'collapse icon'}
+            onClick={() => setIsExpanded(!isExpanded)}
+          /> :
+          <img
+            className={styles.showHideIcon}
+            src={expandIcon}
+            alt={'expand icon'}
+            onClick={() => setIsExpanded(!isExpanded)}
+          />
+        }
+      </span>
+
+      <section
+        id={`${id}-panel`}
+        aria-labelledby={`${id}-header`}
+        hidden={!isExpanded}
+        className={styles.releaseUpdateContainer}
+      >{children}
+      </section>
+    </>
+  );
+};
+
+const ReleaseUpdate = ({}: IReleaseUpdateProps) => {
+  return (
+    <div className={styles.releaseUpdateComponent}>
+      <J40AccordionItem id={'releaseUpdate'}>
+        <div>
+
+          <div className={styles.releaseHeader}>
+            {DOWNLOAD_COPY.RELEASE.UPDATE_1}
+          </div>
+
+          <div className={styles.releaseSectionTitle}>
+            {DOWNLOAD_COPY.RELEASE.SECTION1}
+          </div>
+
+          <div className={styles.releaseSectionBody}>
+            <ul>
+              <li>{DOWNLOAD_COPY.RELEASE.SECTION1_P1}</li>
+              <ul>
+                <li>{DOWNLOAD_COPY.RELEASE.SECTION1_P1_1}</li>
+              </ul>
+            </ul>
+          </div>
+
+          <div className={styles.releaseSectionTitle}>
+            {DOWNLOAD_COPY.RELEASE.SECTION2}
+          </div>
+
+          <div className={styles.releaseSectionBody}>
+            <ul>
+              <li>{DOWNLOAD_COPY.RELEASE.SECTION2_P1}</li>
+            </ul>
+          </div>
+
+          <div>
+            {DOWNLOAD_COPY.RELEASE.FOOTER}
+          </div>
+
+        </div>
+      </J40AccordionItem>
+    </div>
+  );
+};
+
+export default ReleaseUpdate;

client/src/components/ReleaseUpdate/__snapshots__/ReleaseUpdate.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of ReleaseUpdate Component checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <span>
+      View 
+      <a
+        aria-controls="releaseUpdate-panel"
+        class="usa-link"
+        href="javascript:void(0)"
+        id="releaseUpdate-header"
+        tabindex="0"
+      >
+        change log
+      </a>
+      <img
+        alt="expand icon"
+        src="test-file-stub"
+      />
+    </span>
+    <section
+      aria-labelledby="releaseUpdate-header"
+      hidden=""
+      id="releaseUpdate-panel"
+    >
+      <div>
+        <div>
+          Release update - Oct 25, 2022
+        </div>
+        <div>
+          New & improved
+        </div>
+        <div>
+          <ul>
+            <li>
+              Updates to the methodology based on feedback recieved during the beta period.
+            </li>
+            <ul>
+              <li>
+                Additional data sources now available for Puerto Rico. Linguistic isolation as removed from the methodology for Puerto Rico.
+              </li>
+            </ul>
+          </ul>
+        </div>
+        <div>
+          Fixes
+        </div>
+        <div>
+          <ul>
+            <li>
+              Fixed an issue with zoom and select to show census boundaries at a higher zoom level.
+            </li>
+          </ul>
+        </div>
+        <div>
+          release version 1.0
+        </div>
+      </div>
+    </section>
+  </div>
+</DocumentFragment>
+`;

client/src/components/ReleaseUpdate/index.ts

@@ -0,0 +1,2 @@
+import ReleaseUpdate from './ReleaseUpdate';
+export default ReleaseUpdate;

client/src/data/copy/downloads.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable max-len */
 import React from 'react';
 import {defineMessages} from 'react-intl';
-import {FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
+import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
 import * as COMMON_COPY from './common';
+import {VERSION_NUMBER} from './methodology';
 
 export const PAGE_INTRO = defineMessages({
   PAGE_TILE: {
@@ -15,15 +16,15 @@ export const PAGE_INTRO = defineMessages({
     defaultMessage: 'Downloads',
     description: 'Navigate to the Downloads page, this will be the page heading1 text',
   },
-  PAGE_HEADING2: {
+  VIEW: {
-    id: 'downloads.page.heading2.text',
+    id: 'downloads.page.view.text',
-    defaultMessage: 'File formats',
+    defaultMessage: 'View',
-    description: 'Navigate to the Downloads page, this will be the page heading2 text',
+    description: 'Navigate to the Downloads page, this will be the view of change log',
   },
-  PAGE_DESCRIPTION1: {
+  CHANGE_LOG: {
-    id: 'downloads.page.description1.text',
+    id: 'downloads.page.change.log.text',
-    defaultMessage: 'The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:',
+    defaultMessage: 'change log',
-    description: 'Navigate to the Downloads page, this will be the page description1 text',
+    description: 'Navigate to the Downloads page, this will be the view of change log',
   },
 });
 
@@ -83,7 +84,72 @@ export const getDownloadIconAltTag = () => defineMessages({
   },
 });
 
+export const RELEASE = {
+  UPDATE_1: <FormattedMessage
+    id={'download.page.release.update.title.1'}
+    defaultMessage={`Release update - {date}`}
+    description={'Navigate to the download page. This is first download file link'}
+    values={{
+      date: <FormattedDate
+        value={COMMON_COPY.METH_1_0_RELEASE_DATE}
+        year="numeric"
+        month="short"
+        day="numeric"
+      />,
+    }}
+  />,
+  SECTION1: <FormattedMessage
+    id={'download.page.release.update.section.1'}
+    defaultMessage={`New & improved`}
+    description={'Navigate to the download page. This is first section of the release update section'}
+  />,
+  SECTION1_P1: <FormattedMessage
+    id={'download.page.release.update.section.1.p.1'}
+    defaultMessage={`Updates to the methodology based on feedback recieved during the beta period.`}
+    description={'Navigate to the download page. This is first section of the release update section'}
+  />,
+  SECTION1_P1_1: <FormattedMessage
+    id={'download.page.release.update.section.1.p.1.1'}
+    defaultMessage={`Additional data sources now available for Puerto Rico. Linguistic isolation as removed from the methodology for Puerto Rico.`}
+    description={'Navigate to the download page. This is first section of the release update section'}
+  />,
+  SECTION2: <FormattedMessage
+    id={'download.page.release.update.section.2'}
+    defaultMessage={`Fixes`}
+    description={'Navigate to the download page. This is second section of the release update section'}
+  />,
+  SECTION2_P1: <FormattedMessage
+    id={'download.page.release.update.section.2.p1'}
+    defaultMessage={`Fixed an issue with zoom and select to show census boundaries at a higher zoom level.`}
+    description={'Navigate to the download page. This is second section of the release update section'}
+  />,
+  FOOTER: <FormattedMessage
+    id={'download.page.release.update.footer'}
+    defaultMessage={`release version {version}`}
+    description={'Navigate to the download page. This is second section of the release update section'}
+    values={{
+      version: VERSION_NUMBER,
+    }}
+  />,
+};
+
 export const DOWNLOAD_LINKS = {
+  TITLE: <FormattedMessage
+    id={'download.page.files.section.title'}
+    defaultMessage={`Version {version} file formats`}
+    description={'Navigate to the download page. This is first download file link'}
+    values={{
+      version: VERSION_NUMBER,
+    }}
+  />,
+  TEXT: <FormattedMessage
+    id={'downloads.page.files.section.text'}
+    defaultMessage={ 'The dataset used in the {version} version of the tool, along with a codebook, and information about how to use the list of communities (.pdf) are available for download:'}
+    description={ 'Navigate to the Downloads page, this will be the page description1 text'}
+    values={{
+      version: VERSION_NUMBER,
+    }}
+  />,
   LINK1: <FormattedMessage
     id={'download.page.download.file.1'}
     defaultMessage={`

client/src/intl/en.json

@@ -303,26 +303,62 @@
     "defaultMessage": "<link5>How to use the list of communities</link5> (.pdf {howToCommFileSize})",
     "description": "Navigate to the download page. This is fifth download file link"
   },
-  "downloads.page.description1.text": {
+  "download.page.files.section.title": {
-    "defaultMessage": "The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:",
+    "defaultMessage": "Version {version} file formats",
-    "description": "Navigate to the Downloads page, this will be the page description1 text"
+    "description": "Navigate to the download page. This is first download file link"
+  },
+  "download.page.release.update.footer": {
+    "defaultMessage": "release version {version}",
+    "description": "Navigate to the download page. This is second section of the release update section"
+  },
+  "download.page.release.update.section.1": {
+    "defaultMessage": "New & improved",
+    "description": "Navigate to the download page. This is first section of the release update section"
+  },
+  "download.page.release.update.section.1.p.1": {
+    "defaultMessage": "Updates to the methodology based on feedback recieved during the beta period.",
+    "description": "Navigate to the download page. This is first section of the release update section"
+  },
+  "download.page.release.update.section.1.p.1.1": {
+    "defaultMessage": "Additional data sources now available for Puerto Rico. Linguistic isolation as removed from the methodology for Puerto Rico.",
+    "description": "Navigate to the download page. This is first section of the release update section"
+  },
+  "download.page.release.update.section.2": {
+    "defaultMessage": "Fixes",
+    "description": "Navigate to the download page. This is second section of the release update section"
+  },
+  "download.page.release.update.section.2.p1": {
+    "defaultMessage": "Fixed an issue with zoom and select to show census boundaries at a higher zoom level.",
+    "description": "Navigate to the download page. This is second section of the release update section"
+  },
+  "download.page.release.update.title.1": {
+    "defaultMessage": "Release update - {date}",
+    "description": "Navigate to the download page. This is first download file link"
+  },
+  "downloads.page.change.log.text": {
+    "defaultMessage": "change log",
+    "description": "Navigate to the Downloads page, this will be the view of change log"
   },
   "downloads.page.download.icon.alt.tag": {
     "defaultMessage": "The icon used to indicate that the file is downloadable",
     "description": "Navigate to the Downloads page, this is the icon used to indicate that the file is downloadable"
   },
+  "downloads.page.files.section.text": {
+    "defaultMessage": "The dataset used in the {version} version of the tool, along with a codebook, and information about how to use the list of communities (.pdf) are available for download:",
+    "description": "Navigate to the Downloads page, this will be the page description1 text"
+  },
   "downloads.page.heading1.text": {
     "defaultMessage": "Downloads",
     "description": "Navigate to the Downloads page, this will be the page heading1 text"
   },
-  "downloads.page.heading2.text": {
-    "defaultMessage": "File formats",
-    "description": "Navigate to the Downloads page, this will be the page heading2 text"
-  },
   "downloads.page.title.text": {
     "defaultMessage": "Downloads",
     "description": "Navigate to the Downloads page, this will be the page title text"
   },
+  "downloads.page.view.text": {
+    "defaultMessage": "View",
+    "description": "Navigate to the Downloads page, this will be the view of change log"
+  },
   "explore.map.page.description.1": {
     "defaultMessage": "Census tracts that are overburdened and underserved census tracts are highlighted as being disadvantaged on the map. These include Federally-Recognized Tribal lands, including Alaska Native Villages.",
     "description": "On the explore the map page, the first description of the page"

client/src/pages/downloads.tsx

@@ -6,6 +6,7 @@ import {useWindowSize} from 'react-use';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import PublicEngageButton from '../components/PublicEngageButton';
+import ReleaseUpdate from '../components/ReleaseUpdate';
 import SubPageNav from '../components/SubPageNav';
 
 import * as DOWNLOADS_COPY from '../data/copy/downloads';
@@ -31,9 +32,13 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {
         <Grid row gap className={'j40-mb5-mt3'}>
 
           <Grid col={12} tablet={{col: 8}}>
-            <h2>{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING2)}</h2>
+            <section>
+              <ReleaseUpdate />
+            </section>
+
+            <h2>{DOWNLOADS_COPY.DOWNLOAD_LINKS.TITLE}</h2>
             <p>
-              {intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)}
+              {DOWNLOADS_COPY.DOWNLOAD_LINKS.TEXT}
             </p>
             <p>
               {DOWNLOADS_COPY.DOWNLOAD_LINKS.LINK1}

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

@@ -417,11 +417,70 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           class="grid-col-12 tablet:grid-col-8"
           data-testid="grid"
         >
+          <section>
+            <div>
+              <span>
+                View 
+                <a
+                  aria-controls="releaseUpdate-panel"
+                  class="usa-link"
+                  href="javascript:void(0)"
+                  id="releaseUpdate-header"
+                  tabindex="0"
+                >
+                  change log
+                </a>
+                <img
+                  alt="expand icon"
+                  src="test-file-stub"
+                />
+              </span>
+              <section
+                aria-labelledby="releaseUpdate-header"
+                hidden=""
+                id="releaseUpdate-panel"
+              >
+                <div>
+                  <div>
+                    Release update - Oct 25, 2022
+                  </div>
+                  <div>
+                    New & improved
+                  </div>
+                  <div>
+                    <ul>
+                      <li>
+                        Updates to the methodology based on feedback recieved during the beta period.
+                      </li>
+                      <ul>
+                        <li>
+                          Additional data sources now available for Puerto Rico. Linguistic isolation as removed from the methodology for Puerto Rico.
+                        </li>
+                      </ul>
+                    </ul>
+                  </div>
+                  <div>
+                    Fixes
+                  </div>
+                  <div>
+                    <ul>
+                      <li>
+                        Fixed an issue with zoom and select to show census boundaries at a higher zoom level.
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    release version 1.0
+                  </div>
+                </div>
+              </section>
+            </div>
+          </section>
           <h2>
-            File formats
+            Version 1.0 file formats
           </h2>
           <p>
-            The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:
+            The dataset used in the 1.0 version of the tool, along with a codebook, and information about how to use the list of communities (.pdf) are available for download:
           </p>
           <p>