diff --git a/client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss b/client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss new file mode 100644 index 00000000..636fabd7 --- /dev/null +++ b/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; + } + } +} diff --git a/client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss.d.ts b/client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss.d.ts new file mode 100644 index 00000000..dfb22a92 --- /dev/null +++ b/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; diff --git a/client/src/components/ReleaseUpdate/ReleaseUpdate.test.tsx b/client/src/components/ReleaseUpdate/ReleaseUpdate.test.tsx new file mode 100644 index 00000000..122aa752 --- /dev/null +++ b/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( + + + , + ); + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/ReleaseUpdate/ReleaseUpdate.tsx b/client/src/components/ReleaseUpdate/ReleaseUpdate.tsx new file mode 100644 index 00000000..e6631066 --- /dev/null +++ b/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 ( + <> + + {intl.formatMessage(DOWNLOAD_COPY.PAGE_INTRO.VIEW)}{' '} + setIsExpanded(!isExpanded)} + tabIndex={0} + > + {intl.formatMessage(DOWNLOAD_COPY.PAGE_INTRO.CHANGE_LOG)} + + { isExpanded ? + {'collapse setIsExpanded(!isExpanded)} + /> : + {'expand setIsExpanded(!isExpanded)} + /> + } + + + + + ); +}; + +const ReleaseUpdate = ({}: IReleaseUpdateProps) => { + return ( +
+ +
+ +
+ {DOWNLOAD_COPY.RELEASE.UPDATE_1} +
+ +
+ {DOWNLOAD_COPY.RELEASE.SECTION1} +
+ +
+
    +
  • {DOWNLOAD_COPY.RELEASE.SECTION1_P1}
  • +
      +
    • {DOWNLOAD_COPY.RELEASE.SECTION1_P1_1}
    • +
    +
+
+ +
+ {DOWNLOAD_COPY.RELEASE.SECTION2} +
+ +
+
    +
  • {DOWNLOAD_COPY.RELEASE.SECTION2_P1}
  • +
+
+ +
+ {DOWNLOAD_COPY.RELEASE.FOOTER} +
+ +
+
+
+ ); +}; + +export default ReleaseUpdate; diff --git a/client/src/components/ReleaseUpdate/__snapshots__/ReleaseUpdate.test.tsx.snap b/client/src/components/ReleaseUpdate/__snapshots__/ReleaseUpdate.test.tsx.snap new file mode 100644 index 00000000..ec382bcf --- /dev/null +++ b/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`] = ` + +
+ + View + + change log + + expand icon + + +
+
+`; diff --git a/client/src/components/ReleaseUpdate/index.ts b/client/src/components/ReleaseUpdate/index.ts new file mode 100644 index 00000000..78f536b1 --- /dev/null +++ b/client/src/components/ReleaseUpdate/index.ts @@ -0,0 +1,2 @@ +import ReleaseUpdate from './ReleaseUpdate'; +export default ReleaseUpdate; diff --git a/client/src/data/copy/downloads.tsx b/client/src/data/copy/downloads.tsx index 9c3586b0..72e1df53 100644 --- a/client/src/data/copy/downloads.tsx +++ b/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: { - id: 'downloads.page.heading2.text', - defaultMessage: 'File formats', - description: 'Navigate to the Downloads page, this will be the page heading2 text', + VIEW: { + id: 'downloads.page.view.text', + defaultMessage: 'View', + description: 'Navigate to the Downloads page, this will be the view of change log', }, - PAGE_DESCRIPTION1: { - id: 'downloads.page.description1.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:', - description: 'Navigate to the Downloads page, this will be the page description1 text', + CHANGE_LOG: { + id: 'downloads.page.change.log.text', + defaultMessage: 'change log', + 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: , + }} + />, + SECTION1: , + SECTION1_P1: , + SECTION1_P1_1: , + SECTION2: , + SECTION2_P1: , + FOOTER: , +}; + export const DOWNLOAD_LINKS = { + TITLE: , + TEXT: , LINK1: How to use the list of communities (.pdf {howToCommFileSize})", "description": "Navigate to the download page. This is fifth download file link" }, - "downloads.page.description1.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:", - "description": "Navigate to the Downloads page, this will be the page description1 text" + "download.page.files.section.title": { + "defaultMessage": "Version {version} file formats", + "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" diff --git a/client/src/pages/downloads.tsx b/client/src/pages/downloads.tsx index 9182f80e..9bbe532f 100644 --- a/client/src/pages/downloads.tsx +++ b/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) => { -

{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING2)}

+
+ +
+ +

{DOWNLOADS_COPY.DOWNLOAD_LINKS.TITLE}

- {intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)} + {DOWNLOADS_COPY.DOWNLOAD_LINKS.TEXT}

{DOWNLOADS_COPY.DOWNLOAD_LINKS.LINK1} diff --git a/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap b/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap index 888b4ff4..bf31f396 100644 --- a/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap +++ b/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" > +

+
+ + View + + change log + + expand icon + + +
+

- File formats + Version 1.0 file formats

- 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: