mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 17:44:20 -08:00
Initial Download page (#2021)
* Intial version of 1.0 download page * fix a11y errors * Update snapshots
This commit is contained in:
Vim
GitHub
parent
b321b267fc
commit
7c6555de13
10 changed files with 445 additions and 20 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss.d.ts
vendored
Normal file
18
client/src/components/ReleaseUpdate/ReleaseUpdate.module.scss.d.ts
vendored
Normal file
|
|
@ -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;
|
||||
15
client/src/components/ReleaseUpdate/ReleaseUpdate.test.tsx
Normal file
15
client/src/components/ReleaseUpdate/ReleaseUpdate.test.tsx
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
116
client/src/components/ReleaseUpdate/ReleaseUpdate.tsx
Normal file
116
client/src/components/ReleaseUpdate/ReleaseUpdate.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
`;
|
||||
2
client/src/components/ReleaseUpdate/index.ts
Normal file
2
client/src/components/ReleaseUpdate/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import ReleaseUpdate from './ReleaseUpdate';
|
||||
export default ReleaseUpdate;
|
||||
|
|
@ -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: <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={`
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
"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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue