Update Download sidebar, add new alert (#1587)

* Update Download sidebar, add new alert

- Fixes #1567
- Cleaned up styles related to buttons.
- Refactored buttons a little to make easier to maintain.
- Updated test snapshots/translation files

* Fixes

* More text fixes
This commit is contained in:
TomNUSDS 2022-04-27 07:43:34 -07:00 committed by GitHub
commit 6ab7d76fdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 525 additions and 124 deletions

View file

@ -3,6 +3,7 @@ import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
import {boldFn, linkFn, simpleLink} from './common';
import * as styles from '../../components/DownloadPacket/downloadPacket.module.scss';
export const PAGE = defineMessages({
TILE: {
@ -72,11 +73,11 @@ export const FORMULA = {
};
// Download Package
export const DOWNLOAD_FILE_SIZE = 52;
export const DOWNLOAD_FILE_SIZE = 53;
export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
export const DOWNLOAD_TSD_FILE_SIZE = 913; // in KB
export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/6/2022').getTime();
export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/6/2022').getTime();
export const DOWNLOAD_TSD_FILE_SIZE = 2.5;
export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/26/2022').getTime();
export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/26/2022').getTime();
export const DOWNLOAD_TSD_LAST_UPDATED = new Date('4/19/2022').getTime();
export const VERSION_NUMBER = 0.1;
@ -99,17 +100,23 @@ export const DOWNLOAD_TSD_URL = [
process.env.GATSBY_TSD_DOWNLOAD_FILE_PATH,
].join('/');
const newCalloutFontColorFn = (str:string) => <span className={styles.newCalloutFontColor}>{str}</span>;
export const DOWNLOAD_PACKAGE = {
TITLE: <FormattedMessage
id={'methodology.page.downloadPacket.header.text'}
defaultMessage={`Files available for download`}
defaultMessage={`<callout>NEW</callout> files available for download`}
description={'Navigate to the methodology page. This is the download packet header text'}
values= {{
callout: newCalloutFontColorFn,
}}
/>,
DESCRIPTION1: <FormattedMessage
id={ 'methodology.page.downloadPacket.info.text1'}
defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped), the shapefile, along with a codebook (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize}).`}
defaultMessage= {`Download the data sources used in the CEJST (.csv, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a <callout>codebook</callout> (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize} unzipped).`}
description= {'Navigate to the methodology page. This is the download packet info text'}
values= {{
callout: newCalloutFontColorFn,
downloadFileSize: <FormattedNumber
value={DOWNLOAD_FILE_SIZE}
style="unit"
@ -125,7 +132,7 @@ export const DOWNLOAD_PACKAGE = {
tsdFileSize: <FormattedNumber
value={DOWNLOAD_TSD_FILE_SIZE}
style="unit"
unit="kilobyte"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
@ -192,6 +199,14 @@ export const DOWNLOAD_PACKAGE = {
boldtag: boldFn,
}}
/>,
UPDATED_TAG: <FormattedMessage
id={ 'methodology.page.downloadPacket.updated.tag.text'}
defaultMessage= {`<boldtag>Updated</boldtag>`}
description= {'Navigate to the methodology page. This is the update callout tag text that overlaps the button'}
values={{
boldtag: boldFn,
}}
/>,
};
export const CATEGORY= {