Add beta site banner (#802)

* Add new BetaBanner and remove legacy Alerts

- add BetaBanner component and test
- update AboutCard test
- remove AlertWrapper component, copy and tests
- remove AlertWrapper from all pages
- add BetaBanner copy and intl
- update logo and color
- add styles using USWDS tokens to globals.scss

* Add Beta pill to header

- refactor Header to use Grid and USWDS
- refactor global.scss to use Grid and USWDS
- updates snapshots

* Move styles from global to modules

- move BetaBanner styles from global to modules
- move J40Header to a folder component and module styles
- add J40Header unit test
- add a design-system.scss file that allows USWDS styles in modules
- updates snapshots

* Update en.json file

* Trigger Build

* Add initial Spanish content

- add README for translation team
- add createSpanishJson script
- add initial version of es.json
- add a spanish string variable to test translation

* Add retry and timeout config to stalled test

* Remove redundant test cases for AboutCard

- update snapshot

* Update BetaBanner description
This commit is contained in:
Vim 2021-10-21 14:56:32 -07:00 committed by GitHub
parent e64e7fda60
commit b1adc1f69f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 2122 additions and 925 deletions

View file

@ -1,26 +1,44 @@
{
"alert.alertBetaBody": [
"about.page.sub.header.1.text.1": [
{
"type": 0,
"value": "This website may be continuously updated"
"value": "On January 27, 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to help Federal agencies identify disadvantaged communities and provide socioeconomic, environmental, and climate information and data to inform decisions that may affect these communities. The tool identifies disadvantaged communities as communities of focus through publicly available, nationally consistent, high-quality data."
}
],
"alert.alertBetaTitle": [
"about.page.sub.header.1.text.2": [
{
"type": 0,
"value": "Public beta"
"value": "The current version of the tool is in a public beta form and will be updated based on feedback from the public."
}
],
"alert.alertDataLimitedBody": [
"about.page.sub.header.2.text.1": [
{
"type": 0,
"value": "Datasets may be added, updated, or removed."
"value": "The tool will provide important information for the Justice40 Initiative. The goal of the Justice40 Initiative is to provide 40-percent of the overall benefits of certain federal programs in seven key areas to disadvantaged communities. These seven key areas are: climate change, clean energy and energy efficiency, clean transit, affordable and sustainable housing, training and workforce development, the remediation and reduction of legacy pollution, and the development of critical clean water infrastructure."
}
],
"alert.alertDataLimitedTitle": [
"about.page.sub.header.2.text.2": [
{
"type": 0,
"value": "Limited data sources"
"value": "Read more about the Justice40 Initiative in President Bidens"
}
],
"about.page.title.text": [
{
"type": 0,
"value": "About"
}
],
"areaDetail.categorization.community.of.focus": [
{
"type": 0,
"value": "Community of focus"
}
],
"areaDetail.categorization.not.community.of.focus": [
{
"type": 0,
"value": "Not a community of focus"
}
],
"areaDetail.geographicInfo.censusBlockGroup": [
@ -47,22 +65,166 @@
"value": "State:"
}
],
"areaDetail.indicator.areaMedianIncome": [
{
"type": 0,
"value": "Area Median Income"
}
],
"areaDetail.indicator.asthma": [
{
"type": 0,
"value": "Asthma"
}
],
"areaDetail.indicator.description.area_median_income": [
{
"type": 0,
"value": "Median income of the census block group calculated as a percent of the metropolitan areas or state's median income"
}
],
"areaDetail.indicator.description.asthma": [
{
"type": 0,
"value": "People who answer “yes” to both of the questions: “Have you ever been told by a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?\""
}
],
"areaDetail.indicator.description.diabetes": [
{
"type": 0,
"value": "People ages 18 and up who report having been told by a doctor, nurse, or other health professionals that they have diabetes other than diabetes during pregnancy"
}
],
"areaDetail.indicator.description.dieselPartMatter": [
{
"type": 0,
"value": "Mixture of particles that is part of diesel exhaust in the air"
}
],
"areaDetail.indicator.description.education": [
{
"type": 0,
"value": "Percent of people age 25 or older that didnt get a high school diploma"
}
],
"areaDetail.indicator.description.energyBurden": [
{
"type": 0,
"value": "Average annual energy cost ($) divided by household income"
}
],
"areaDetail.indicator.description.femaRisk": [
{
"type": 0,
"value": "Expected Annual Loss Score, which is the average economic loss in dollars resulting from natural hazards each year."
}
],
"areaDetail.indicator.description.heartDisease": [
{
"type": 0,
"value": "People ages 18 and up who report ever having been told by a doctor, nurse, or other health professionals that they had angina or coronary heart disease"
}
],
"areaDetail.indicator.description.houseBurden": [
{
"type": 0,
"value": "Households that are low income and spend more than 30% of their income on housing costs"
}
],
"areaDetail.indicator.description.leadPaint": [
{
"type": 0,
"value": "Housing units built pre-1960, used as an indicator of potential lead paint exposure in homes"
}
],
"areaDetail.indicator.description.lifeExpect": [
{
"type": 0,
"value": "Estimated years of life expectancy"
}
],
"areaDetail.indicator.description.pm25": [
{
"type": 0,
"value": "Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller"
}
],
"areaDetail.indicator.description.poverty": [
{
"type": 0,
"value": "Percent of a block group's population in households where the household income is at or below 100% of the federal poverty level"
}
],
"areaDetail.indicator.description.trafficVolume": [
{
"type": 0,
"value": "Count of vehicles (average annual daily traffic) at major roads within 500 meters, divided by distance in meters"
}
],
"areaDetail.indicator.description.wasteWater": [
{
"type": 0,
"value": "Toxic concentrations at stream segments within 500 meters divided by distance in kilometers"
}
],
"areaDetail.indicator.diabetes": [
{
"type": 0,
"value": "Diabetes"
}
],
"areaDetail.indicator.dieselPartMatter": [
{
"type": 0,
"value": "Diesel particulate matter"
}
],
"areaDetail.indicator.education": [
{
"type": 0,
"value": "Education"
"value": "Education, less than high school"
}
],
"areaDetail.indicator.energyBurden": [
{
"type": 0,
"value": "Energy burden"
}
],
"areaDetail.indicator.femaRisk": [
{
"type": 0,
"value": "FEMA Risk Index"
}
],
"areaDetail.indicator.heartDisease": [
{
"type": 0,
"value": "Heart disease"
}
],
"areaDetail.indicator.houseBurden": [
{
"type": 0,
"value": "Housing Burden"
"value": "Housing cost burden"
}
],
"areaDetail.indicator.linguisticIsolation": [
"areaDetail.indicator.leadPaint": [
{
"type": 0,
"value": "Linguistic isolation"
"value": "Lead paint"
}
],
"areaDetail.indicator.lifeExpect": [
{
"type": 0,
"value": "Life expectancy"
}
],
"areaDetail.indicator.pm25": [
{
"type": 0,
"value": "PM2.5"
}
],
"areaDetail.indicator.poverty": [
@ -71,64 +233,78 @@
"value": "Poverty"
}
],
"areaDetail.indicator.unemployment": [
"areaDetail.indicator.trafficVolume": [
{
"type": 0,
"value": "Unemployment rate"
"value": "Traffic proximity and volume"
}
],
"areaDetail.indicator.wasteWater": [
{
"type": 0,
"value": "Wastewater discharge"
}
],
"areaDetail.indicators.indicatorColumnHeader": [
{
"type": 0,
"value": "INDICATORS"
"value": "Indicator"
}
],
"areaDetail.indicators.percentileColumnHeader": [
{
"type": 0,
"value": "PERCENTILE (0-100)"
"value": "Percentile (0-100)"
}
],
"areaDetail.priorityInfo.categorization": [
"banner.beta.info": [
{
"type": 0,
"value": "Categorization"
"value": "It is an early, in-progress version of the tool with limited data sets that will be continuously updated."
}
],
"areaDetail.priorityInfo.cumulativeIndexScore": [
"banner.beta.title": [
{
"type": 0,
"value": "Cumulative Index Score"
"value": "This is a Beta site."
}
],
"areaDetail.priorityInfo.percentile": [
"community.members.heading": [
{
"type": 0,
"value": "percentile"
"value": "Community members"
}
],
"contact.general": [
"community.members.info": [
{
"type": 0,
"value": "For general feedback, email "
},
{
"type": 1,
"value": "general_email_address"
"value": "Explore data about communities of focus in your area, and help provide feedback on the tool."
}
],
"contact.pageheader": [
"community.members.link": [
{
"type": 0,
"value": "Explore the tool"
}
],
"contact.page.header.text": [
{
"type": 0,
"value": "Contact"
}
],
"contact.sectionheader": [
"contact.page.sub.header.text": [
{
"type": 0,
"value": "Email us"
}
],
"contact.page.title.text": [
{
"type": 0,
"value": "Contact"
}
],
"datasetCard.dataDateRange": [
{
"type": 0,
@ -147,22 +323,156 @@
"value": "Data source:"
}
],
"datasetCard.whatIsIt": [
"datasetContainer.additional.heading": [
{
"type": 0,
"value": "What is it?"
"value": "Additional Indicators"
}
],
"datasetContainer.header.cumulativeScore": [
"datasetContainer.additional.info": [
{
"type": 0,
"value": "Datasets used in cumulative score"
"value": "These datasets provide additional information about each community."
}
],
"datasetContainer.subTitle": [
"datasetContainer.heading": [
{
"type": 0,
"value": "The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality."
"value": "Datasets used in methodology"
}
],
"datasetContainer.info": [
{
"type": 0,
"value": "The datasets come from a variety of sources and were selected based on relevance, availability, recency, and quality. The datasets seek to identify a range of human health, environmental, climate-related, and other cumulative impacts on communities."
}
],
"download.draft.ptag.1": [
{
"type": 1,
"value": "downloadDraft"
},
{
"type": 0,
"value": " of communities of focus and datasets used. Last updated: "
},
{
"type": 1,
"value": "dateUpdated"
},
{
"type": 0,
"value": "."
}
],
"download.draft.ptag.2": [
{
"type": 0,
"value": "ZIP file will contain one .xlsx, one .csv, and one .pdf ("
},
{
"type": 1,
"value": "downloadFileSize"
},
{
"type": 0,
"value": ")."
}
],
"downloadPacket.button.text": [
{
"type": 0,
"value": "Download package"
}
],
"downloadPacket.header.text": [
{
"type": 0,
"value": "Draft communities list v"
},
{
"type": 1,
"value": "versionNumber"
},
{
"type": 0,
"value": " ("
},
{
"type": 1,
"value": "downloadFileSize"
},
{
"type": 0,
"value": ")"
}
],
"downloadPacket.info.last.updated": [
{
"type": 0,
"value": "Last updated: "
},
{
"type": 1,
"value": "downloadLastUpdated"
}
],
"downloadPacket.info.text": [
{
"type": 0,
"value": "The package includes draft v"
},
{
"type": 1,
"value": "versionNumber"
},
{
"type": 0,
"value": " of the list of communities of focus (.csv and .xlsx) and information about how to use the list (.pdf)."
}
],
"exploreTool.heading.text": [
{
"type": 0,
"value": "Explore the tool"
}
],
"exploreTool.page.description": [
{
"type": 0,
"value": "Zoom into the map to see communities of focus that can help Federal agencies identify disadvantaged communities and to provide socioeconomic, environmental, and climate information and data. Learn more about the methodology and datasets that were used to determine these communities of focus on the "
},
{
"type": 1,
"value": "methodologyLink"
},
{
"type": 0,
"value": " page."
}
],
"exploreTool.title.text": [
{
"type": 0,
"value": "Explore the tool"
}
],
"federal.pm.heading": [
{
"type": 0,
"value": "Federal program managers"
}
],
"federal.pm.info": [
{
"type": 0,
"value": "Download the screening tools draft list of communities of focus. Explore data that may be useful to your program, and provide feedback on the tool."
}
],
"federal.pm.link": [
{
"type": 0,
"value": "Go to data & methodology"
}
],
"footer.arialabel": [
@ -171,6 +481,12 @@
"value": "Footer navigation"
}
],
"footer.contactheader": [
{
"type": 0,
"value": "Contact"
}
],
"footer.findcontactlink": [
{
"type": 0,
@ -207,12 +523,24 @@
"value": "Have a question about government services?"
}
],
"footer.whitehouselink": [
{
"type": 0,
"value": "Whitehouse.gov"
}
],
"footer.whitehouselogoalt": [
{
"type": 0,
"value": "Whitehouse logo"
}
],
"getInvolved.title": [
{
"type": 0,
"value": "Get involved"
}
],
"header.about": [
{
"type": 0,
@ -249,92 +577,64 @@
"value": "Screening Tool"
}
],
"howYouCanHelp.header.text": [
"howToGetStarted.title": [
{
"type": 0,
"value": "How You Can Help Improve the Tool"
"value": "How to get started"
}
],
"index.aboutContent.p1": [
"index.heading.about.us": [
{
"type": 0,
"value": "On January 27, 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to provide socioeconomic, environmental, and climate information and data to help inform decisions that may affect disadvantaged communities. The tool is designed to assist Federal agencies in identifying disadvantaged communities for the purposes of the Justice40 Initiative."
}
],
"index.aboutContent.p2": [
{
"type": 0,
"value": "The goal of the Justice40 Initiative is for 40 percent of benefits of Federal programs in seven key areas to flow to disadvantaged communities. These seven key areas are: climate change, clean energy and energy efficiency, clean transit, affordable and sustainable housing, training and workforce development, remediation of legacy pollution, and clean water infrastructure."
}
],
"index.aboutContent.p3": [
{
"type": 0,
"value": "Read more about the Justice40 Initiative in President Bidens "
},
{
"type": 1,
"value": "presidentLink"
"value": "About us"
}
],
"index.heading.justice40": [
{
"type": 0,
"value": "About the Justice40 Initiative"
"value": "The Justice40 Initiative"
}
],
"index.heading.screentool": [
{
"type": 0,
"value": "About the screening tool"
"value": "The screening tool"
}
],
"index.presidentalLinkLabel": [
{
"type": 0,
"value": "Executive Order on Tackling the Climate Crisis at Home and Abroad."
"value": "Executive Order 14008 on Tackling the Climate Crisis at Home and Abroad."
}
],
"index.presidentalLinkUri": [
"join.open.source.info": [
{
"type": 0,
"value": "https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/27/executive-order-on-tackling-the-climate-crisis-at-home-and-abroad/"
"value": "The screening tools code is open source, which means it is available for the public to view and contribute to. Anyone can view and contribute on GitHub."
}
],
"index.section3.inclusiveLabel": [
"join.open.source.link": [
{
"type": 0,
"value": "Inclusive:"
"value": "Check it out on GitHub"
}
],
"index.section3.iterativeLabel": [
"join.opensource.heading": [
{
"type": 0,
"value": "Iterative:"
}
],
"index.section3.transparentLabel": [
{
"type": 0,
"value": "Transparent:"
}
],
"legend.colorkey.label": [
{
"type": 0,
"value": "COLOR KEY"
"value": "Join the open source community"
}
],
"legend.info.priority.label": [
{
"type": 0,
"value": "Prioritized community"
"value": "Draft community of focus"
}
],
"legend.info.threshold.label": [
{
"type": 0,
"value": "Threshold community"
"value": "A community identified as experiencing disadvantages that merits the focus of certain Federal investments, including through the Justice40 Initiative"
}
],
"map.territoryFocus.alaska.long": [
@ -395,6 +695,12 @@
"value": "PR"
}
],
"map.zoom.warning": [
{
"type": 0,
"value": "Zoom in to the state or regional level to see prioritized communities on the map."
}
],
"mapIntro.censusBlockGroupDefinition": [
{
"type": 0,
@ -413,58 +719,248 @@
"value": "Zoom and select a census block group to view data"
}
],
"mapwrapper.download.contents": [
"methodology.page.header.text": [
{
"type": 0,
"value": "ZIP file will contain one .xlsx, one .csv and one .pdf (30 MB)."
"value": "Methodology"
}
],
"mapwrapper.download.link": [
"methodology.page.paragraph.first": [
{
"type": 0,
"value": "Download the draft list of prioritized communities (pre-decisional) and datasets used"
"value": "The methodology for identifying communities of focus is currently in a draft, pre-decisional form that may change over time as more datasets become available."
}
],
"youCanHelpDataMethLinkText.link.text": [
"methodology.page.title.text": [
{
"type": 0,
"value": "Data & methodology"
"value": "Data and Methodology"
}
],
"youCanHelpDataMethPrefixText.link.prefix.text": [
"methodology.step.1.a.heading": [
{
"type": 0,
"value": "Percent of Area Median Income"
}
],
"methodology.step.1.a.info.1": [
{
"type": 0,
"value": "If a census block group is in a metropolitan area, this value is the median income of the census block group calculated as a percent of the metropolitan areas median income."
}
],
"methodology.step.1.a.info.2": [
{
"type": 0,
"value": "If a census block group is not in a metropolitan area, this value is the median income of the census block group calculated as a percent of the states median income."
}
],
"methodology.step.1.b.heading": [
{
"type": 0,
"value": "Percent of households below or at 100% of the federal poverty line"
}
],
"methodology.step.1.c.heading": [
{
"type": 0,
"value": "The high school degree achievement rate for adults 25 years and older"
}
],
"methodology.step.1.c.info": [
{
"type": 0,
"value": "The percent of individuals who are 25 or older who have received a high school degree."
}
],
"methodology.step.1.heading": [
{
"type": 0,
"value": "Gather datasets"
}
],
"methodology.step.1.info": [
{
"type": 0,
"value": "The methodology includes the following inputs that are equally weighted."
}
],
"methodology.step.2.heading": [
{
"type": 0,
"value": "Determine communites of focus"
}
],
"methodology.step.2.info": [
{
"type": 0,
"value": "Under the existing formula, a census block group will be considered a community of focus if:"
}
],
"methodology.steps.2.b.info": [
{
"type": 0,
"value": "This is the percent of households in a state with a household income below or at 100% of the "
},
{
"type": 1,
"value": "federalPovertyLine"
},
{
"type": 0,
"value": ". This federal poverty line is calculated based on the composition of each household (e.g., based on household size), but it does not vary geographically."
}
],
"methodology.steps.2.formula": [
{
"type": 1,
"value": "medianIncome"
},
{
"type": 0,
"value": " "
},
{
"type": 1,
"value": "or"
},
{
"type": 0,
"value": " "
},
{
"type": 1,
"value": "livingAtPovery"
},
{
"type": 0,
"value": " "
},
{
"type": 1,
"value": "and"
},
{
"type": 0,
"value": " "
},
{
"type": 1,
"value": "education"
}
],
"methodology.steps.description.1": [
{
"type": 0,
"value": "The methodology for identifying communities of focus is calculated at the census block group level. Census block geographical boundaries are determined by the U.S. Census Bureau once every ten years. This tool utilizes the census block boundaries from 2010."
}
],
"methodology.steps.description.2": [
{
"type": 0,
"value": "The following describes the process for identifying communities of focus."
}
],
"methodology.steps.heading": [
{
"type": 0,
"value": "Methodology"
}
],
"pageNotFound.Guidance.text": [
{
"type": 0,
"value": "Try creating a page in"
}
],
"pageNotFound.apology.description.text": [
{
"type": 0,
"value": "we couldnt find what you were looking for."
}
],
"pageNotFound.apology.text": [
{
"type": 0,
"value": "Sorry"
}
],
"pageNotFound.heading.text": [
{
"type": 0,
"value": "Page not found"
}
],
"pageNotFound.link.to.go.home.text": [
{
"type": 0,
"value": "Go home"
}
],
"pageNotFound.title.text": [
{
"type": 0,
"value": "Page not found"
}
],
"send.feedback.heading": [
{
"type": 0,
"value": "Send feedback"
}
],
"send.feedback.info": [
{
"type": 0,
"value": "Have ideas about how this tool can be improved to better reflect the on-the-ground experiences of your community?"
}
],
"youCanHelpInfoText.heading": [
{
"type": 0,
"value": "How you can help improve the tool"
}
],
"youCanHelpInfoText.list.item.1": [
{
"type": 0,
"value": "If you have helpful information, we would love to "
},
{
"type": 1,
"value": "rxEmailFromYou"
},
{
"type": 0,
"value": "."
}
],
"youCanHelpInfoText.list.item.2": [
{
"type": 0,
"value": "View our "
}
],
"youCanHelpDataMethSuffixText.link.suffix.text": [
},
{
"type": 1,
"value": "dataMeth"
},
{
"type": 0,
"value": "and send us feedback"
"value": " page and send us feedback."
}
],
"youCanHelpInfoLink.link.text": [
"youCanHelpInfoText.list.item.3": [
{
"type": 0,
"value": "get an email from you"
}
],
"youCanHelpInfoText.list.element.prefix": [
"value": "Find your community of interest and "
},
{
"type": 1,
"value": "shareFeedback"
},
{
"type": 0,
"value": "If you have helpful information, wed love to"
}
],
"youCanHelpSharingLinkText.link.text": [
{
"type": 0,
"value": "share your feedback"
}
],
"youCanHelpSharingPrefixText.link.prefix.text": [
{
"type": 0,
"value": "Find your community and"
"value": "."
}
]
}

View file

@ -15,7 +15,20 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => {
cy.url().should('include', '#4/35.04/-77.9');
});
});
it('allows user to specify alternative starting URL', () => {
it('allows user to specify alternative starting URL',
{
retries: {
runMode: 3,
openMode: 3,
},
defaultCommandTimeout: 4000,
execTimeout: 10000,
taskTimeout: 10000,
pageLoadTimeout: 10000,
requestTimeout: 5000,
responseTimeout: 10000,
},
() => {
const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978];
const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`;
cy.visit(expectedURL);

View file

@ -4,19 +4,35 @@ import {LocalizedComponent} from '../../test/testHelpers';
import AboutCard from './AboutCard';
describe('rendering of the AboutCard', () => {
it('checks if small cards component renders', () => {
const {asFragment} = render(
<LocalizedComponent>
<AboutCard
imgSrc={'about:blank'}
header={'Test Header'}
actionText={'Test Action'}
actionUrl={'#'}>
size={'small'}
linkText={'Test Action'}
url={'#'}>
Content body of the action card.
</AboutCard>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if component renders', () => {
it('checks if large cards component renders', () => {
const {asFragment} = render(
<LocalizedComponent>
<AboutCard
imgSrc={'about:blank'}
header={'Test Header'}
size={'large'}
linkText={'Test Action'}
url={'#'}>
Content body of the action card.
</AboutCard>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
});

View file

@ -1,6 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the AboutCard checks if component renders 1`] = `
exports[`rendering of the AboutCard checks if large cards component renders 1`] = `
<DocumentFragment>
<div
class="grid-gap-lg tablet:grid-col"
data-testid="grid"
>
<div
class="grid-row j40-aboutcard-lg-card"
data-testid="grid"
>
<div
class="tablet:grid-col-3 j40-aboutpage-image-container"
data-testid="grid"
>
<img
alt="Test Header"
class="j40-aboutcard-image"
src="about:blank"
/>
</div>
<div
class="tablet:grid-col-9"
data-cy="test-header-block"
data-testid="grid"
>
<div
class="grid-row"
data-testid="grid"
>
<h2>
Test Header
</h2>
Content body of the action card.
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`rendering of the AboutCard checks if small cards component renders 1`] = `
<DocumentFragment>
<div
class="grid-gap-lg tablet:grid-col"
@ -38,7 +78,10 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
>
<a
class="j40-aboutcard-link"
/>
href="#"
>
Test Action
</a>
</div>
</div>
</div>

View file

@ -1,11 +0,0 @@
.alertWrapper {
margin-bottom: 0;
}
.alertHide {
display: none;
}
.alertWarning {
margin-top: 0;
}

View file

@ -1,14 +0,0 @@
declare namespace AlertWrapperScssNamespace {
export interface IAlertWrapperScss {
alertWrapper: string;
alertHide: string;
alertWarning: string;
}
}
declare const AlertWrapperScssModule: AlertWrapperScssNamespace.IAlertWrapperScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: AlertWrapperScssNamespace.IAlertWrapperScss;
};
export = AlertWrapperScssModule;

View file

@ -1,41 +0,0 @@
import React from 'react';
import {Alert} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import * as styles from './alertWrapper.module.scss';
import * as COMMON_COPY from '../../data/copy/common';
interface IAlertWrapperProps {
showBetaAlert?: boolean, // defaults to false
showLimitedDataAlert?: boolean, // defaults to false
}
const AlertWrapper = ({
showBetaAlert = false,
showLimitedDataAlert = false,
}: IAlertWrapperProps) => {
const intl = useIntl();
return (
<div className={styles.alertWrapper}>
{showBetaAlert && (
<Alert className={'j40-sitealert'} type="info">
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.BETA_TITLE)}</span>
<span className={'j40-sitealert-body'}> {intl.formatMessage(COMMON_COPY.ALERTS.BETA_BODY)}</span>
<br/>
</Alert>
)}
{showLimitedDataAlert && (
<Alert className={'j40-sitealert'} type="warning">
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_TITLE)}</span>
<span className={'j40-sitealert-body'}> {intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_BODY)}</span>
<br/>
</Alert>
)}
</div>
);
};
export default AlertWrapper;

View file

@ -1,52 +0,0 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../../test/testHelpers';
import AlertWrapper from '../../AlertWrapper';
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
const PUBLIC_BETA_REGEX = /Public beta/;
const LIMITED_DATA_REGEX = /Limited data sources/;
describe('rendering full the AlertWrapper', () => {
it('checks if component renders both alerts', () => {
const component = render(
<LocalizedComponent>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={true}/>
</LocalizedComponent>,
);
expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX);
expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX);
});
});
describe('rendering showBetaAlert the AlertWrapper', () => {
it('checks if component renders only beta alert', () => {
const component = render(
<LocalizedComponent>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</LocalizedComponent>,
);
expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX);
expect(component.container).not.toHaveTextContent(LIMITED_DATA_REGEX);
});
});
describe('rendering showLimitedDataAlert the AlertWrapper', () => {
it('checks if component renders only limited data alert', () => {
const component = render(
<LocalizedComponent>
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
</LocalizedComponent>,
);
expect(component.container).not.toHaveTextContent(PUBLIC_BETA_REGEX);
expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX);
});
});

View file

@ -0,0 +1,38 @@
@use '../../styles/design-system.scss' as *;
.betaBannerContainer {
@include u-bg("gray-cool-2");
.betaBanner {
@include u-display("flex");
@include u-height(3);
max-width: 60.25rem; // Needs this exact value to align with GovBanner
@include u-font("body", "3xs");
@include u-margin-left(auto);
@include u-margin-right(auto);
@include u-padding-top("05");
@include u-padding-bottom(3);
@include at-media-max("desktop") {
@include u-margin-left(2);
@include u-margin-right(0);
}
@include at-media-max("tablet-lg") {
@include u-height(6);
}
.betaPillIcon {
@include u-bg("yellow-20v");
@include u-height(1);
@include u-width(2);
@include u-radius("2px");
@include u-margin-right(1);
margin-top: 0.4rem; //Needs this exact value for vertical alignment
}
.betaHeading {
@include u-text("bold");
}
}
}

View file

@ -0,0 +1,15 @@
declare namespace BetaBannerNamespace {
export interface IDatasetCardScss {
betaBannerContainer: string;
betaBanner:string;
betaPillIcon:string;
betaHeading: string;
}
}
declare const DatasetCardScssModule: BetaBannerNamespace.IDatasetCardScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: BetaBannerNamespace.IDatasetCardScss;
};
export = DatasetCardScssModule;

View file

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

View file

@ -0,0 +1,27 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import * as COMMON_COPY from '../../data/copy/common';
import * as styles from './BetaBanner.module.scss';
const BetaBanner = () => {
const intl = useIntl();
return (
<div className={styles.betaBannerContainer}>
<div className={styles.betaBanner}>
<div className={styles.betaPillIcon}></div>
<div>
<span className={styles.betaHeading}>
{intl.formatMessage(COMMON_COPY.BETA_BANNER.TITLE)}{' '}
</span>
<span>
{intl.formatMessage(COMMON_COPY.BETA_BANNER.INFO)}
</span>
</div>
</div>
</div>
);
};
export default BetaBanner;

View file

@ -0,0 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the BetaBanner checks if component renders 1`] = `
<DocumentFragment>
<div>
<div>
<div />
<div>
<span>
This is a Beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.
</span>
</div>
</div>
</div>
</DocumentFragment>
`;

View file

@ -0,0 +1,3 @@
import BetaBanner from './BetaBanner';
export default BetaBanner;

View file

@ -2,7 +2,6 @@ import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
import AlertWrapper from '../AlertWrapper';
import DatasetCard from '../DatasetCard';
import J40MainGridContainer from '../J40MainGridContainer';
import {hyphenizeString} from '../../../cypress/integration/common/helpers';
@ -22,7 +21,6 @@ const DatasetContainer = () => {
<Grid row>
<Grid col={12}>
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
<h2>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.HEADING)}</h2>
</Grid>
</Grid>

View file

@ -18,32 +18,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="grid-col-12"
data-testid="grid"
>
<div>
<div
class="usa-alert usa-alert--warning j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Limited data sources
</span>
<span
class="j40-sitealert-body"
>
— Datasets may be added, updated, or removed.
</span>
<br />
</p>
</div>
</div>
</div>
<h2>
Datasets used in methodology
</h2>

View file

@ -0,0 +1,67 @@
@use '../../styles/design-system.scss' as *;
// Set nav links color to primary color (1b1b1b)
.usa-nav__primary > .usa-nav__primary-item > a {
@include u-text("gray-90");
}
.logoNavRow {
@include u-margin-top(4);
.logo {
@include u-width(10);
@include u-padding("05");
}
// The logoTitle declaration is enabled for widths > 1200px
.logoTitle {
@include u-display("flex");
@include u-flex-direction("column");
@include typeset("sans", 8, 3);
}
.title2BetaPill {
@include u-display("flex");
}
.betaPill {
@include u-display("inline-block");
@include u-bg("yellow-20v");
@include u-radius(1);
@include u-padding-left(2);
@include u-padding-right(2);
@include u-padding-top('05');
@include u-margin-left(1);
@include u-font("body", "2xs");
}
.navLinks {
@include u-display("flex");
justify-content: end;
}
// This media query limits this declaration to 1024 < width < 1200px
@include at-media-max("desktop-lg") {
.logoTitle {
@include typeset("sans", 7, 3);
}
}
// This media query limits this declaration to 880 < width < 1024px
@include at-media-max("tablet-lg") {
.logoTitle {
@include typeset("sans", 7, 2);
}
}
// This media query limits this declaration to 640 < width < 880px
@include at-media-max("tablet") {
.logoTitle {
@include typeset("sans", 5, 2);
}
.betaPill {
@include u-font("body", "3xs");
}
}
}

View file

@ -0,0 +1,17 @@
declare namespace J40HeaderNamespace {
export interface IDatasetCardScss {
logoNavRow: string;
logo: string;
logoTitle: string;
title2BetaPill: string;
betaPill: string;
navLinks: string;
}
}
declare const DatasetCardScssModule: J40HeaderNamespace.IDatasetCardScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: J40HeaderNamespace.IDatasetCardScss;
};
export = DatasetCardScssModule;

View file

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

View file

@ -5,12 +5,15 @@ import {
NavMenuButton,
PrimaryNav,
GovBanner,
Tag,
Grid,
} from '@trussworks/react-uswds';
import BetaBanner from '../BetaBanner';
import J40MainGridContainer from '../J40MainGridContainer';
// @ts-ignore
import siteLogo from '../../src/images/icon.png';
import * as COMMON_COPY from '../data/copy/common';
import siteLogo from '../../images/j40-logo-v2.png';
import * as styles from './J40Header.module.scss';
import * as COMMON_COPY from '../../data/copy/common';
const J40Header = () => {
const intl = useIntl();
@ -31,7 +34,6 @@ const J40Header = () => {
to={'/'}
key={'about'}
activeClassName="usa-current"
className={'j40-header'}
data-cy={'nav-link-about'}>
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
</Link>,
@ -41,7 +43,6 @@ const J40Header = () => {
to={'/cejst'}
key={'cejst'}
activeClassName="usa-current"
className={'j40-header'}
data-cy={'nav-link-explore-the-tool'}>
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
</Link>,
@ -51,7 +52,6 @@ const J40Header = () => {
to={'/methodology'}
key={'methodology'}
activeClassName="usa-current"
className={'j40-header'}
data-cy={'nav-link-methodology'}>
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
</Link>,
@ -61,7 +61,6 @@ const J40Header = () => {
to={'/contact'}
key={'contact'}
activeClassName="usa-current"
className={'j40-header'}
data-cy={'nav-link-contact'}>
{intl.formatMessage(COMMON_COPY.HEADER.CONTACT)}
</Link>,
@ -73,38 +72,49 @@ const J40Header = () => {
};
return (
<>
<Header
basic={true} role={'banner'}
className={'usa-header j40-header'}>
<Header basic={true} role={'banner'}>
{/* Banners */}
<GovBanner/>
<div className="usa-nav-container">
<div className="usa-navbar">
{/* Removing h1 from logo ease transition to USWDS tokens in headers */}
{/* https://wehavezeal.com/blog/web-development/2016/01/12/should-i-use-the-h1-tag-for-my-website-logo */}
<div className="usa-logo">
<img className="j40-sitelogo" src={siteLogo} alt={`${titleL1} ${titleL2}`} />
<span className={'usa-logo__text j40-title'}>
<span className={'j40-title-line1'}>{titleL1}</span><br/>
<span className={'j40-title-line2'}>{titleL2}</span>
<Tag className={'j40'}>Beta</Tag>
</span>
<BetaBanner/>
{/* Logo and Navigation */}
<J40MainGridContainer>
<Grid className={styles.logoNavRow} row>
{/* Logo */}
<Grid col={1}>
<img className={styles.logo} src={siteLogo} alt={`${titleL1} ${titleL2}`} />
</Grid>
{/* Logo Title */}
<Grid col={6}>
<div className={styles.logoTitle}>
<div>{titleL1}</div>
<div className={styles.title2BetaPill}>
<div> {titleL2} </div>
<div className={styles.betaPill}>BETA</div>
</div>
</div>
</Grid>
{/* Nav links */}
<Grid col={'fill'} className={styles.navLinks}>
<NavMenuButton
key={'mobileMenuButton'}
onClick={toggleMobileNav}
label="Menu"/>
</div>
<PrimaryNav
items={headerLinks()}
mobileExpanded={mobileNavOpen}
onToggleMobileNav={toggleMobileNav}
className={'j40-header'}
>
</PrimaryNav>
</div>
/>
</Grid>
</Grid>
</J40MainGridContainer>
</Header>
</>
);
};

View file

@ -0,0 +1,264 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the J40Header checks if component renders 1`] = `
<DocumentFragment>
<header
class="usa-header usa-header--basic"
data-testid="header"
role="banner"
>
<section
class="usa-banner"
data-testid="govBanner"
>
<div
class="usa-accordion"
>
<header
class="usa-banner__header"
>
<div
class="usa-banner__inner"
>
<div
class="grid-col-auto"
>
<img
alt="U.S. flag"
class="usa-banner__header-flag"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
/>
</div>
<div
class="grid-col-fill tablet:grid-col-auto"
>
<p
class="usa-banner__header-text"
>
An official website of the United States government
</p>
<p
aria-hidden="true"
class="usa-banner__header-action"
>
Heres how you know
</p>
</div>
<button
aria-controls="gov-banner"
aria-expanded="false"
class="usa-accordion__button usa-banner__button"
type="button"
>
<span
class="usa-banner__button-text"
>
Heres how you know
</span>
</button>
</div>
</header>
<div
class="usa-banner__content usa-accordion__content"
hidden=""
id="gov-banner"
>
<div
class="grid-row grid-gap-lg"
>
<div
class="usa-banner__guidance tablet:grid-col-6"
>
<img
alt=""
aria-hidden="true"
class="usa-banner__icon usa-media-block__img"
role="img"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
/>
<div
class="usa-media-block__body"
>
<p>
<strong>
Official websites use .gov
</strong>
<br />
A
<strong>
.gov
</strong>
website belongs to an official government organization in the United States.
</p>
</div>
</div>
<div
class="usa-banner__guidance tablet:grid-col-6"
>
<img
alt=""
aria-hidden="true"
class="usa-banner__icon usa-media-block__img"
role="img"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
/>
<div
class="usa-media-block__body"
>
<p>
<strong>
Secure .gov websites use HTTPS
</strong>
<br />
A
<strong>
lock (
<span
class="icon-lock"
>
<img
alt="lock"
class="usa-banner__lock-image"
role="img"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
title="Lock"
/>
</span>
)
</strong>
or
<strong>
https://
</strong>
means youve safely connected to the .gov website. Share sensitive information only on official, secure websites.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div>
<div>
<div />
<div>
<span>
This is a Beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.
</span>
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
class="grid-row"
data-testid="grid"
>
<div
class="grid-col-1"
data-testid="grid"
>
<img
alt="Climate and Economic Justice Screening Tool"
src="test-file-stub"
/>
</div>
<div
class="grid-col-6"
data-testid="grid"
>
<div>
<div>
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div>
</div>
<div
class="grid-col-fill"
data-testid="grid"
>
<button
class="usa-menu-btn"
data-testid="navMenuButton"
type="button"
>
Menu
</button>
<nav
class="usa-nav"
>
<button
class="usa-nav__close"
data-testid="navCloseButton"
type="button"
>
<img
alt="close"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5jbG9zZTwvdGl0bGU+PHBhdGggZmlsbD0iIzU2NUM2NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTcuMDQyIDEuMTVsNS44MDkgNS44MDhhNCA0IDAgMCAxIDAgNS42NTdMNDMuNDY1IDMybDE5LjM4NiAxOS4zODVhNCA0IDAgMCAxIDAgNS42NTdsLTUuODA5IDUuODA5YTQgNCAwIDAgMS01LjY1NyAwTDMyIDQzLjQ2NSAxMi42MTUgNjIuODUxYTQgNCAwIDAgMS01LjY1NyAwbC01LjgwOS01LjgwOWE0IDQgMCAwIDEgMC01LjY1N0wyMC41MzUgMzIgMS4xNDkgMTIuNjE1YTQgNCAwIDAgMSAwLTUuNjU3bDUuODA5LTUuODA5YTQgNCAwIDAgMSA1LjY1NyAwTDMyIDIwLjUzNSA1MS4zODUgMS4xNDlhNCA0IDAgMCAxIDUuNjU3IDB6Ii8+PC9zdmc+"
/>
</button>
<ul
class="usa-nav__primary usa-accordion"
>
<li
class="usa-nav__primary-item"
>
<a
data-cy="nav-link-about"
href="/en/"
>
About
</a>
</li>
<li
class="usa-nav__primary-item"
>
<a
data-cy="nav-link-explore-the-tool"
href="/en/cejst"
>
Explore the tool
</a>
</li>
<li
class="usa-nav__primary-item"
>
<a
data-cy="nav-link-methodology"
href="/en/methodology"
>
Data & methodology
</a>
</li>
<li
class="usa-nav__primary-item"
>
<a
data-cy="nav-link-contact"
href="/en/contact"
>
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</DocumentFragment>
`;

View file

@ -0,0 +1,3 @@
import J40Header from './J40Header';
export default J40Header;

View file

@ -1,7 +1,6 @@
import * as React from 'react';
import {Grid} from '@trussworks/react-uswds';
import AlertWrapper from '../AlertWrapper';
import J40Map from '../J40Map';
import * as styles from './mapWrapper.module.scss';
@ -14,12 +13,6 @@ interface IMapWrapperProps {
const MapWrapper = ({location}: IMapWrapperProps) => {
return (
<>
<Grid row>
<Grid col={12}>
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
</Grid>
</Grid>
<Grid row>
<J40Map location={location}/>
</Grid>

View file

@ -1,30 +1,17 @@
import {defineMessages} from 'react-intl';
// Alerts
export const ALERTS = defineMessages({
BETA_TITLE: {
id: 'alert.alertBetaTitle',
defaultMessage:
'Public beta',
description: 'Title for an alert inform users that datasets may change',
// Beta Banner
export const BETA_BANNER = defineMessages({
TITLE: {
id: 'banner.beta.title',
defaultMessage: 'This is a Beta site.',
description: 'the main title of the beta banner',
},
BETA_BODY: {
id: 'alert.alertBetaBody',
defaultMessage:
'This website may be continuously updated',
description: 'Body for an alert inform users that datasets may change',
},
LIMITED_TITLE: {
id: 'alert.alertDataLimitedTitle',
defaultMessage:
'Limited data sources',
description: 'Title for an alert inform users that datasets may change',
},
LIMITED_BODY: {
id: 'alert.alertDataLimitedBody',
defaultMessage:
'Datasets may be added, updated, or removed.',
description: 'Body for an alert inform users that datasets may change',
INFO: {
id: 'banner.beta.info',
defaultMessage: `It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.`,
description: 'the main info of the beta banner',
},
});

View file

@ -31,6 +31,7 @@ export const PAGE_DESCRIPTION = <FormattedMessage
description={'page description'}
values={{
methodologyLink: <Link to={'/methodology'}>Data & methodology</Link>,
methodologyLinkEs: <Link to={'/methodology'}>Datos y metodología</Link>,
}}
/>;

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

47
client/src/intl/README.md Normal file
View file

@ -0,0 +1,47 @@
# Translating content to Spanish
## Keys without curly brackets
Navigate to the `es.json` file. This JSON file is grouped into pairs of keys. Namely an english key and regular key. Below we can see the first two keys of the `es.json` file.
```json
{
"about.page.sub.header.1.text.1_english" : "On January 27, 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to help Federal agencies identify disadvantaged communities and provide socioeconomic, environmental, and climate information and data to inform decisions that may affect these communities. The tool identifies disadvantaged communities as communities of focus through publicly available, nationally consistent, high-quality data.",
"about.page.sub.header.1.text.1" : "El 27 de enero de 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to help Federal agencies identify disadvantaged communities and provide socioeconomic, environmental, and climate information and data to inform decisions that may affect these communities. The tool identifies disadvantaged communities as communities of focus through publicly available, nationally consistent, high-quality data.",
}
```
The first key is the english key suffixed with `_english`. The second key has no suffix and is meant to hold the Spanish translation. These translations are WYSIWYG.
## Keys with curly brackets
There are some keys with curly brackets, for example, line 176 of `es.json`:
```json
{
"download.draft.ptag.1_english" : "{downloadDraft} of communities of focus and datasets used. Last updated: {dateUpdated}.",
"download.draft.ptag.1" : "",
}
```
In this case, this first step is find out what the English sentence is:
![image info](/client/src/images/downloadDraftLink.png)
The reason the `{downloadDraft}` and `{dateUpdated}` are in curly brackets is because something special happens with that text. In the former it's a link in the latter it's a variable that being used in multiple places.
Let's assume that this sentence translates to Spanish as
_Descargue la lista preliminar de comunidades de interés y conjuntos de datos utilizados. Última actualización: 01/10/21._
And let's say we want `Descargue la lista preliminar` to be a link. Then, we would place the following as the translated content:
```json
{
"download.draft.ptag.1_english" : "{downloadDraft} of communities of focus and datasets used. Last updated: {dateUpdated}.",
"download.draft.ptag.1" : "`{downloadDraftEs} de comunidades de interés y conjuntos de datos utilizados. Última actualización: {dateUpdatedEs}.`",
}
```
Where `downloadDraftEs` = _Descargue la lista preliminar_ and `dateUpdatedEs`= _01/10/21_
TBD: How should these curly bracket variables be communicated to the dev team?

View file

@ -0,0 +1,75 @@
/**
* The purpose of this file is to create the es.json file. This file will read in en.json
* keys and place all keys in es.json. It will also add English copy for easy translation.
* It will add spaces between each key for ease of reading.
*
* TODO: Modify this file to use the existing es.json so that we don't overwrite
* existing translations.
*/
const fs = require('fs');
const englishJson = require('./en.json');
// Get keys and message for each entry:
const englishKeys = Object.keys(englishJson);
const englishMessage = Object.values(englishJson).map((m) => m.defaultMessage);
const logger = fs.createWriteStream('es-out.json', {
flags: 'a', // 'a' means appending (old data will be preserved)
});
// Only create the file if keys and message length are the same
if (englishKeys.length === englishMessage.length) {
// Write the opening curly bracket of JSON
logger.write('{\n');
// Loop through all keys adding english and spanish content:
for (i=0; i<englishKeys.length; i++ ) {
logger.write(`\t"${englishKeys[i]}_english" : "${englishMessage[i]}",\n`);
logger.write(`\t"${englishKeys[i]}" : ""`);
// if the last entry, don't place trailing comma:
i === englishKeys.length - 1 ? logger.write('\n\n') : logger.write(',\n\n');
}
// Write the closing curly bracket:
logger.write('}');
} else {
// throw error if lengths do not match
throw Error(`The number of English keys do not match the number of English messages.
Please run test testIntlExtraction`);
}
// Legacy method using writeFile()
// // Initialize object for spanish
// const spanishObj = {};
// // Ensure the number of keys and messages are the same
// if (englishKeys.length === englishMessage.length) {
// // Add key.english to spanish object
// englishKeys.forEach((key, index) => spanishObj[`${key}.english`] = englishMessage[index]);
// // Add key (spanish) to spanish object
// englishKeys.forEach((key, index) => spanishObj[key] = 'Please fill in Spanish here.');
// } else {
// // throw error if lengths do not match
// throw Error(`The number of English keys do not match the number of English messages.
// Please run test testIntlExtraction`);
// }
// // Alphabetize the spanish object by keys:
// const spanishObjAlphabetized = Object.keys(spanishObj).sort().reduce(
// (obj, key) => {
// obj[key] = spanishObj[key];
// return obj;
// },
// {},
// );
// console.log(spanishObjAlphabetized);
// // Write to file:
// const esJson = JSON.stringify(spanishObjAlphabetized, null, 2);
// fs.writeFileSync('es-out.json', esJson);

View file

@ -19,22 +19,6 @@
"defaultMessage": "About",
"description": "about page title text"
},
"alert.alertBetaBody": {
"defaultMessage": "This website may be continuously updated",
"description": "Body for an alert inform users that datasets may change"
},
"alert.alertBetaTitle": {
"defaultMessage": "Public beta",
"description": "Title for an alert inform users that datasets may change"
},
"alert.alertDataLimitedBody": {
"defaultMessage": "Datasets may be added, updated, or removed.",
"description": "Body for an alert inform users that datasets may change"
},
"alert.alertDataLimitedTitle": {
"defaultMessage": "Limited data sources",
"description": "Title for an alert inform users that datasets may change"
},
"areaDetail.categorization.community.of.focus": {
"defaultMessage": "Community of focus",
"description": "the communities the score currently is focused on"
@ -187,6 +171,14 @@
"defaultMessage": "Percentile (0-100)",
"description": "the population of the feature selected"
},
"banner.beta.info": {
"defaultMessage": "It is an early, in-progress version of the tool with limited data sets that will be continuously updated.",
"description": "the main info of the beta banner"
},
"banner.beta.title": {
"defaultMessage": "This is a Beta site.",
"description": "the main title of the beta banner"
},
"community.members.heading": {
"defaultMessage": "Community members",
"description": "sub heading of page"
@ -319,6 +311,10 @@
"defaultMessage": "Have a question about government services?",
"description": "Footer column header"
},
"footer.whitehouselink": {
"defaultMessage": "Whitehouse.gov",
"description": "Footer Whitehouse.gov link text"
},
"footer.whitehouselogoalt": {
"defaultMessage": "Whitehouse logo",
"description": "Footer Whitehouse logo alt text"

View file

@ -1,30 +1,422 @@
{
"areasOfInterest.climate": "Cambio climático",
"areasOfInterest.energy": "Energía limpia y eficiencia energética",
"areasOfInterest.housing": "Vivienda asequible y sostenible",
"areasOfInterest.pollution": "Remediación de la contaminación heredada",
"areasOfInterest.training": "Capacitación y desarrollo de la fuerza laboral",
"areasOfInterest.transit": "Transporte limpio",
"areasOfInterest.water": "Infraestructura de agua limpia",
"header.about": "Sobre nosotras",
"header.contact": "Contacto",
"header.explore": "Explore el trabajo",
"header.methodology": "Metodología",
"header.timeline": "Cronología",
"header.title": "Justice40",
"index.aboutContent.header": "Acerca de Justice40",
"index.aboutContent.p1": "En un esfuerzo por abordar las injusticias ambientales históricas, el presidente Biden creó la Iniciativa Justice40 el 27 de enero de 2021. La Iniciativa Justice40 dirige el 40% de los beneficios de las inversiones federales en siete áreas clave a comunidades sobrecargadas y desatendidas.",
"index.aboutContent.p2": "Las agencias federales darán prioridad a los beneficios utilizando una nueva herramienta de evaluación de la justicia económica y climática. Esta herramienta de selección será un mapa que visualiza datos para comparar los impactos acumulativos de factores ambientales, climáticos y económicos. Está siendo desarrollado por el Consejo de Calidad Ambiental (Council on Environmental Quality - CEQ) con la orientación de líderes de justicia ambiental y comunidades afectadas por injusticias ambientales. La primera versión de la herramienta de detección se lanzará en julio de 2021. Sin embargo, la herramienta de detección y los datos que se utilizan se actualizarán continuamente para reflejar mejor las experiencias vividas por los miembros de la comunidad.",
"index.aboutContent.p3": "Lea más sobre la Iniciativa Justice40 en {presidentLink} del presidente Biden.",
"index.presidentalLinkLabel": "Orden ejecutiva sobre la lucha contra la crisis climática en el país y en el extranjero.",
"index.presidentalLinkUri": "https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/27/executive-order-on-tackling-the-climate-crisis-at-home-and-abroad/",
"index.section2.header": "Áreas de enfoque",
"index.section3.header": "Un enfoque transparente, centrado en la comunidad",
"index.section3.inclusive": "{inlineHeader} Muchas áreas que carecen de inversiones también carecen de datos ambientales y se pasarían por alto utilizando los datos ambientales disponibles. CEQ se está acercando activamente a grupos que históricamente han sido excluidos de la toma de decisiones, como grupos en áreas rurales y tribales, para comprender sus necesidades y solicitar su opinión.",
"index.section3.inclusiveLabel": "Inclusivo:",
"index.section3.intro": "Las iniciativas exitosas están guiadas por aportes directos de las comunidades a las que sirven. CEQ se compromete con la transparencia, la inclusión y la iteración en la construcción de esta herramienta de evaluación.",
"index.section3.iterative": "{inlineHeader} La lista de priorización de la comunidad inicial proporcionada por la herramienta de evaluación es el comienzo de un proceso de colaboración en el refinamiento de la puntuación, en lugar de una respuesta final. CEQ ha recibido recomendaciones sobre conjuntos de datos de entrevistas comunitarias, el Consejo Asesor de Justicia Ambiental de la Casa Blanca y mediante comentarios públicos, pero establecer una puntuación que sea verdaderamente representativa será un proceso continuo a largo plazo. A medida que las comunidades envíen comentarios y recomendaciones, CEQ continuará mejorando las herramientas que se están construyendo y los procesos para la participación pública y de las partes interesadas.",
"index.section3.iterativeLabel": "Iterativo:",
"index.section3.transparent": "{inlineHeader} El código y los datos detrás de la herramienta de detección son de código abierto, lo que significa que está disponible para que el público los revise y contribuya. Esta herramienta se está desarrollando públicamente para que las comunidades, los expertos académicos y cualquier persona interesada puedan participar en el proceso de creación de herramientas.",
"index.section3.transparentLabel": "Transparencia:"
"about.page.sub.header.1.text.1_english" : "On January 27, 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to help Federal agencies identify disadvantaged communities and provide socioeconomic, environmental, and climate information and data to inform decisions that may affect these communities. The tool identifies disadvantaged communities as communities of focus through publicly available, nationally consistent, high-quality data.",
"about.page.sub.header.1.text.1" : "El 27 de enero de 2021, President Biden directed the Council on Environmental Quality (CEQ) to create a climate and economic justice screening tool. The purpose of the tool is to help Federal agencies identify disadvantaged communities and provide socioeconomic, environmental, and climate information and data to inform decisions that may affect these communities. The tool identifies disadvantaged communities as communities of focus through publicly available, nationally consistent, high-quality data.",
"about.page.sub.header.1.text.2_english" : "The current version of the tool is in a public beta form and will be updated based on feedback from the public.",
"about.page.sub.header.1.text.2" : "La versión actual de la herramienta se encuentra en una versión beta pública y se actualizará en función de los comentarios del público.",
"about.page.sub.header.2.text.1_english" : "The tool will provide important information for the Justice40 Initiative. The goal of the Justice40 Initiative is to provide 40-percent of the overall benefits of certain federal programs in seven key areas to disadvantaged communities. These seven key areas are: climate change, clean energy and energy efficiency, clean transit, affordable and sustainable housing, training and workforce development, the remediation and reduction of legacy pollution, and the development of critical clean water infrastructure.",
"about.page.sub.header.2.text.1" : "La herramienta proporcionará información importante para la iniciativa Justice40. The goal of the Justice40 initiative is to provide 40-percent of the overall benefits of certain federal programs in seven key areas to disadvantaged communities. These seven key areas are: climate change, clean energy and energy efficiency, clean transit, affordable and sustainable housing, training and workforce development, the remediation and reduction of legacy pollution, and the development of critical clean water infrastructure.",
"about.page.sub.header.2.text.2_english" : "Read more about the Justice40 Initiative in President Bidens",
"about.page.sub.header.2.text.2" : "Leer más sobre la iniciativa Justice40",
"about.page.title.text_english" : "About",
"about.page.title.text" : "Sobre nosotras",
"areaDetail.categorization.community.of.focus_english" : "Community of focus",
"areaDetail.categorization.community.of.focus" : "",
"areaDetail.categorization.not.community.of.focus_english" : "Not a community of focus",
"areaDetail.categorization.not.community.of.focus" : "",
"areaDetail.geographicInfo.censusBlockGroup_english" : "Census block group:",
"areaDetail.geographicInfo.censusBlockGroup" : "",
"areaDetail.geographicInfo.county_english" : "County:",
"areaDetail.geographicInfo.county" : "",
"areaDetail.geographicInfo.population_english" : "Population:",
"areaDetail.geographicInfo.population" : "",
"areaDetail.geographicInfo.state_english" : "State:",
"areaDetail.geographicInfo.state" : "",
"areaDetail.indicator.areaMedianIncome_english" : "Area Median Income",
"areaDetail.indicator.areaMedianIncome" : "",
"areaDetail.indicator.asthma_english" : "Asthma",
"areaDetail.indicator.asthma" : "",
"areaDetail.indicator.description.area_median_income_english" : "Median income of the census block group calculated as a percent of the metropolitan areas or state's median income",
"areaDetail.indicator.description.area_median_income" : "",
"areaDetail.indicator.description.asthma_english" : "People who answer “yes” to both of the questions: “Have you ever been told by a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?\"",
"areaDetail.indicator.description.asthma" : "",
"areaDetail.indicator.description.diabetes_english" : "People ages 18 and up who report having been told by a doctor, nurse, or other health professionals that they have diabetes other than diabetes during pregnancy",
"areaDetail.indicator.description.diabetes" : "",
"areaDetail.indicator.description.dieselPartMatter_english" : "Mixture of particles that is part of diesel exhaust in the air",
"areaDetail.indicator.description.dieselPartMatter" : "",
"areaDetail.indicator.description.education_english" : "Percent of people age 25 or older that didnt get a high school diploma",
"areaDetail.indicator.description.education" : "",
"areaDetail.indicator.description.energyBurden_english" : "Average annual energy cost ($) divided by household income",
"areaDetail.indicator.description.energyBurden" : "",
"areaDetail.indicator.description.femaRisk_english" : "Expected Annual Loss Score, which is the average economic loss in dollars resulting from natural hazards each year.",
"areaDetail.indicator.description.femaRisk" : "",
"areaDetail.indicator.description.heartDisease_english" : "People ages 18 and up who report ever having been told by a doctor, nurse, or other health professionals that they had angina or coronary heart disease",
"areaDetail.indicator.description.heartDisease" : "",
"areaDetail.indicator.description.houseBurden_english" : "Households that are low income and spend more than 30% of their income on housing costs",
"areaDetail.indicator.description.houseBurden" : "",
"areaDetail.indicator.description.leadPaint_english" : "Housing units built pre-1960, used as an indicator of potential lead paint exposure in homes",
"areaDetail.indicator.description.leadPaint" : "",
"areaDetail.indicator.description.lifeExpect_english" : "Estimated years of life expectancy",
"areaDetail.indicator.description.lifeExpect" : "",
"areaDetail.indicator.description.pm25_english" : "Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller",
"areaDetail.indicator.description.pm25" : "",
"areaDetail.indicator.description.poverty_english" : "Percent of a block group's population in households where the household income is at or below 100% of the federal poverty level",
"areaDetail.indicator.description.poverty" : "",
"areaDetail.indicator.description.trafficVolume_english" : "Count of vehicles (average annual daily traffic) at major roads within 500 meters, divided by distance in meters",
"areaDetail.indicator.description.trafficVolume" : "",
"areaDetail.indicator.description.wasteWater_english" : "Toxic concentrations at stream segments within 500 meters divided by distance in kilometers",
"areaDetail.indicator.description.wasteWater" : "",
"areaDetail.indicator.diabetes_english" : "Diabetes",
"areaDetail.indicator.diabetes" : "",
"areaDetail.indicator.dieselPartMatter_english" : "Diesel particulate matter",
"areaDetail.indicator.dieselPartMatter" : "",
"areaDetail.indicator.education_english" : "Education, less than high school",
"areaDetail.indicator.education" : "",
"areaDetail.indicator.energyBurden_english" : "Energy burden",
"areaDetail.indicator.energyBurden" : "",
"areaDetail.indicator.femaRisk_english" : "FEMA Risk Index",
"areaDetail.indicator.femaRisk" : "",
"areaDetail.indicator.heartDisease_english" : "Heart disease",
"areaDetail.indicator.heartDisease" : "",
"areaDetail.indicator.houseBurden_english" : "Housing cost burden",
"areaDetail.indicator.houseBurden" : "",
"areaDetail.indicator.leadPaint_english" : "Lead paint",
"areaDetail.indicator.leadPaint" : "",
"areaDetail.indicator.lifeExpect_english" : "Life expectancy",
"areaDetail.indicator.lifeExpect" : "",
"areaDetail.indicator.pm25_english" : "PM2.5",
"areaDetail.indicator.pm25" : "",
"areaDetail.indicator.poverty_english" : "Poverty",
"areaDetail.indicator.poverty" : "",
"areaDetail.indicator.trafficVolume_english" : "Traffic proximity and volume",
"areaDetail.indicator.trafficVolume" : "",
"areaDetail.indicator.wasteWater_english" : "Wastewater discharge",
"areaDetail.indicator.wasteWater" : "",
"areaDetail.indicators.indicatorColumnHeader_english" : "Indicator",
"areaDetail.indicators.indicatorColumnHeader" : "",
"areaDetail.indicators.percentileColumnHeader_english" : "Percentile (0-100)",
"areaDetail.indicators.percentileColumnHeader" : "",
"banner.beta.info_english" : "It is an early, in-progress version of the tool with limited data sets that will be continuously updated.",
"banner.beta.info" : "",
"banner.beta.title_english" : "This is a Beta site.",
"banner.beta.title" : "",
"community.members.heading_english" : "Community members",
"community.members.heading" : "",
"community.members.info_english" : "Explore data about communities of focus in your area, and help provide feedback on the tool.",
"community.members.info" : "",
"community.members.link_english" : "Explore the tool",
"community.members.link" : "",
"contact.page.header.text_english" : "Contact",
"contact.page.header.text" : "",
"contact.page.sub.header.text_english" : "Email us",
"contact.page.sub.header.text" : "",
"contact.page.title.text_english" : "Contact",
"contact.page.title.text" : "",
"datasetCard.dataDateRange_english" : "Data date range:",
"datasetCard.dataDateRange" : "",
"datasetCard.dataResolution_english" : "Data resolution:",
"datasetCard.dataResolution" : "",
"datasetCard.dataSource_english" : "Data source:",
"datasetCard.dataSource" : "",
"datasetContainer.additional.heading_english" : "Additional Indicators",
"datasetContainer.additional.heading" : "",
"datasetContainer.additional.info_english" : "These datasets provide additional information about each community.",
"datasetContainer.additional.info" : "",
"datasetContainer.heading_english" : "Datasets used in methodology",
"datasetContainer.heading" : "",
"datasetContainer.info_english" : "The datasets come from a variety of sources and were selected based on relevance, availability, recency, and quality. The datasets seek to identify a range of human health, environmental, climate-related, and other cumulative impacts on communities.",
"datasetContainer.info" : "",
"download.draft.ptag.1_english" : "{downloadDraft} of communities of focus and datasets used. Last updated: {dateUpdated}.",
"download.draft.ptag.1" : "",
"download.draft.ptag.2_english" : "ZIP file will contain one .xlsx, one .csv, and one .pdf ({downloadFileSize}).",
"download.draft.ptag.2" : "",
"downloadPacket.button.text_english" : "Download package",
"downloadPacket.button.text" : "",
"downloadPacket.header.text_english" : "Draft communities list v{versionNumber} ({downloadFileSize})",
"downloadPacket.header.text" : "",
"downloadPacket.info.last.updated_english" : "Last updated: {downloadLastUpdated}",
"downloadPacket.info.last.updated" : "",
"downloadPacket.info.text_english" : "The package includes draft v{versionNumber} of the list of communities of focus (.csv and .xlsx) and information about how to use the list (.pdf).",
"downloadPacket.info.text" : "",
"exploreTool.heading.text_english" : "Explore the tool",
"exploreTool.heading.text" : "",
"exploreTool.page.description_english" : "Zoom into the map to see communities of focus that can help Federal agencies identify disadvantaged communities and to provide socioeconomic, environmental, and climate information and data. Learn more about the methodology and datasets that were used to determine these communities of focus on the {methodologyLink} page.",
"exploreTool.page.description" : "",
"exploreTool.title.text_english" : "Explore the tool",
"exploreTool.title.text" : "",
"federal.pm.heading_english" : "Federal program managers",
"federal.pm.heading" : "",
"federal.pm.info_english" : "Download the screening tools draft list of communities of focus. Explore data that may be useful to your program, and provide feedback on the tool.",
"federal.pm.info" : "",
"federal.pm.link_english" : "Go to data & methodology",
"federal.pm.link" : "",
"footer.arialabel_english" : "Footer navigation",
"footer.arialabel" : "",
"footer.contactheader_english" : "Contact",
"footer.contactheader" : "",
"footer.findcontactlink_english" : "Find a contact at USA.gov",
"footer.findcontactlink" : "",
"footer.foialink_english" : "Freedom of Information Act (FOIA)",
"footer.foialink" : "",
"footer.logo.title_english" : "Council on Environmental Quality",
"footer.logo.title" : "",
"footer.moreinfoheader_english" : "More information",
"footer.moreinfoheader" : "",
"footer.privacylink_english" : "Privacy Policy",
"footer.privacylink" : "",
"footer.questionsheader_english" : "Have a question about government services?",
"footer.questionsheader" : "",
"footer.whitehouselink_english" : "Whitehouse.gov",
"footer.whitehouselink" : "",
"footer.whitehouselogoalt_english" : "Whitehouse logo",
"footer.whitehouselogoalt" : "",
"getInvolved.title_english" : "Get involved",
"getInvolved.title" : "",
"header.about_english" : "About",
"header.about" : "",
"header.contact_english" : "Contact",
"header.contact" : "",
"header.explore_english" : "Explore the tool",
"header.explore" : "",
"header.methodology_english" : "Data & methodology",
"header.methodology" : "",
"header.title.line1_english" : "Climate and Economic Justice",
"header.title.line1" : "",
"header.title.line2_english" : "Screening Tool",
"header.title.line2" : "",
"howToGetStarted.title_english" : "How to get started",
"howToGetStarted.title" : "",
"index.heading.about.us_english" : "About us",
"index.heading.about.us" : "",
"index.heading.justice40_english" : "The Justice40 Initiative",
"index.heading.justice40" : "",
"index.heading.screentool_english" : "The screening tool",
"index.heading.screentool" : "",
"index.presidentalLinkLabel_english" : "Executive Order 14008 on Tackling the Climate Crisis at Home and Abroad.",
"index.presidentalLinkLabel" : "",
"join.open.source.info_english" : "The screening tools code is open source, which means it is available for the public to view and contribute to. Anyone can view and contribute on GitHub.",
"join.open.source.info" : "",
"join.open.source.link_english" : "Check it out on GitHub",
"join.open.source.link" : "",
"join.opensource.heading_english" : "Join the open source community",
"join.opensource.heading" : "",
"legend.info.priority.label_english" : "Draft community of focus",
"legend.info.priority.label" : "",
"legend.info.threshold.label_english" : "A community identified as experiencing disadvantages that merits the focus of certain Federal investments, including through the Justice40 Initiative",
"legend.info.threshold.label" : "",
"map.territoryFocus.alaska.long_english" : "Alaska",
"map.territoryFocus.alaska.long" : "",
"map.territoryFocus.alaska.short_english" : "AK",
"map.territoryFocus.alaska.short" : "",
"map.territoryFocus.focusOn_english" : "Focus on {territory}",
"map.territoryFocus.focusOn" : "",
"map.territoryFocus.hawaii.long_english" : "Hawaii",
"map.territoryFocus.hawaii.long" : "",
"map.territoryFocus.hawaii.short_english" : "HI",
"map.territoryFocus.hawaii.short" : "",
"map.territoryFocus.lower48.long_english" : "Lower 48",
"map.territoryFocus.lower48.long" : "",
"map.territoryFocus.lower48.short_english" : "48",
"map.territoryFocus.lower48.short" : "",
"map.territoryFocus.puerto_rico.long_english" : "Puerto Rico",
"map.territoryFocus.puerto_rico.long" : "",
"map.territoryFocus.puerto_rico.short_english" : "PR",
"map.territoryFocus.puerto_rico.short" : "",
"map.zoom.warning_english" : "Zoom in to the state or regional level to see prioritized communities on the map.",
"map.zoom.warning" : "",
"mapIntro.censusBlockGroupDefinition_english" : "A census block group is generally between 600 and 3,000 people. It is the smallest geographical unit for which the U.S. Census Bureau publishes sample data.",
"mapIntro.censusBlockGroupDefinition" : "",
"mapIntro.didYouKnow_english" : "Did you know?",
"mapIntro.didYouKnow" : "",
"mapIntro.mapIntroHeader_english" : "Zoom and select a census block group to view data",
"mapIntro.mapIntroHeader" : "",
"methodology.page.header.text_english" : "Methodology",
"methodology.page.header.text" : "",
"methodology.page.paragraph.first_english" : "The methodology for identifying communities of focus is currently in a draft, pre-decisional form that may change over time as more datasets become available.",
"methodology.page.paragraph.first" : "",
"methodology.page.title.text_english" : "Data and Methodology",
"methodology.page.title.text" : "",
"methodology.step.1.a.heading_english" : "Percent of Area Median Income",
"methodology.step.1.a.heading" : "",
"methodology.step.1.a.info.1_english" : "If a census block group is in a metropolitan area, this value is the median income of the census block group calculated as a percent of the metropolitan areas median income.",
"methodology.step.1.a.info.1" : "",
"methodology.step.1.a.info.2_english" : "If a census block group is not in a metropolitan area, this value is the median income of the census block group calculated as a percent of the states median income.",
"methodology.step.1.a.info.2" : "",
"methodology.step.1.b.heading_english" : "Percent of households below or at 100% of the federal poverty line",
"methodology.step.1.b.heading" : "",
"methodology.step.1.c.heading_english" : "The high school degree achievement rate for adults 25 years and older",
"methodology.step.1.c.heading" : "",
"methodology.step.1.c.info_english" : "The percent of individuals who are 25 or older who have received a high school degree.",
"methodology.step.1.c.info" : "",
"methodology.step.1.heading_english" : "Gather datasets",
"methodology.step.1.heading" : "",
"methodology.step.1.info_english" : "The methodology includes the following inputs that are equally weighted.",
"methodology.step.1.info" : "",
"methodology.step.2.heading_english" : "Determine communites of focus",
"methodology.step.2.heading" : "",
"methodology.step.2.info_english" : "Under the existing formula, a census block group will be considered a community of focus if:",
"methodology.step.2.info" : "",
"methodology.steps.2.b.info_english" : "This is the percent of households in a state with a household income below or at 100% of the {federalPovertyLine}. This federal poverty line is calculated based on the composition of each household (e.g., based on household size), but it does not vary geographically.",
"methodology.steps.2.b.info" : "",
"methodology.steps.2.formula_english" : "{medianIncome} {or} {livingAtPovery} {and} {education}",
"methodology.steps.2.formula" : "",
"methodology.steps.description.1_english" : "The methodology for identifying communities of focus is calculated at the census block group level. Census block geographical boundaries are determined by the U.S. Census Bureau once every ten years. This tool utilizes the census block boundaries from 2010.",
"methodology.steps.description.1" : "",
"methodology.steps.description.2_english" : "The following describes the process for identifying communities of focus.",
"methodology.steps.description.2" : "",
"methodology.steps.heading_english" : "Methodology",
"methodology.steps.heading" : "",
"pageNotFound.Guidance.text_english" : "Try creating a page in",
"pageNotFound.Guidance.text" : "",
"pageNotFound.apology.description.text_english" : "we couldnt find what you were looking for.",
"pageNotFound.apology.description.text" : "",
"pageNotFound.apology.text_english" : "Sorry",
"pageNotFound.apology.text" : "",
"pageNotFound.heading.text_english" : "Page not found",
"pageNotFound.heading.text" : "",
"pageNotFound.link.to.go.home.text_english" : "Go home",
"pageNotFound.link.to.go.home.text" : "",
"pageNotFound.title.text_english" : "Page not found",
"pageNotFound.title.text" : "",
"send.feedback.heading_english" : "Send feedback",
"send.feedback.heading" : "",
"send.feedback.info_english" : "Have ideas about how this tool can be improved to better reflect the on-the-ground experiences of your community?",
"send.feedback.info" : "",
"youCanHelpInfoText.heading_english" : "How you can help improve the tool",
"youCanHelpInfoText.heading" : "",
"youCanHelpInfoText.list.item.1_english" : "If you have helpful information, we would love to {rxEmailFromYou}.",
"youCanHelpInfoText.list.item.1" : "",
"youCanHelpInfoText.list.item.2_english" : "View our {dataMeth} page and send us feedback.",
"youCanHelpInfoText.list.item.2" : "",
"youCanHelpInfoText.list.item.3_english" : "Find your community of interest and {shareFeedback}.",
"youCanHelpInfoText.list.item.3" : ""
}

View file

@ -3,7 +3,7 @@
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
<DocumentFragment>
<header
class="usa-header usa-header--basic usa-header j40-header"
class="usa-header usa-header--basic"
data-testid="header"
role="banner"
>
@ -138,42 +138,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</section>
<div>
<div>
<div />
<div>
<span>
This is a Beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.
</span>
</div>
</div>
</div>
<div
class="usa-nav-container"
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
class="usa-navbar"
class="grid-row"
data-testid="grid"
>
<div
class="usa-logo"
class="grid-col-1"
data-testid="grid"
>
<img
alt="Climate and Economic Justice Screening Tool"
class="j40-sitelogo"
src="test-file-stub"
/>
<span
class="usa-logo__text j40-title"
>
<span
class="j40-title-line1"
>
Climate and Economic Justice
</span>
<br />
<span
class="j40-title-line2"
>
Screening Tool
</span>
<span
class="usa-tag j40"
data-testid="tag"
>
Beta
</span>
</span>
</div>
<div
class="grid-col-6"
data-testid="grid"
>
<div>
<div>
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div>
</div>
<div
class="grid-col-fill"
data-testid="grid"
>
<button
class="usa-menu-btn"
data-testid="navMenuButton"
@ -181,9 +198,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
Menu
</button>
</div>
<nav
class="usa-nav j40-header"
class="usa-nav"
>
<button
class="usa-nav__close"
@ -202,7 +218,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-about"
href="/en/"
>
@ -213,7 +228,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-explore-the-tool"
href="/en/cejst"
>
@ -224,7 +238,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-methodology"
href="/en/methodology"
>
@ -235,7 +248,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-contact"
href="/en/contact"
>
@ -245,41 +257,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</ul>
</nav>
</div>
</div>
</div>
</header>
<main
id="main-content"
>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div>
<div
class="usa-alert usa-alert--info j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Public beta
</span>
<span
class="j40-sitealert-body"
>
— This website may be continuously updated
</span>
<br />
</p>
</div>
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"

View file

@ -3,7 +3,7 @@
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
<DocumentFragment>
<header
class="usa-header usa-header--basic usa-header j40-header"
class="usa-header usa-header--basic"
data-testid="header"
role="banner"
>
@ -138,42 +138,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</section>
<div>
<div>
<div />
<div>
<span>
This is a Beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.
</span>
</div>
</div>
</div>
<div
class="usa-nav-container"
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
class="usa-navbar"
class="grid-row"
data-testid="grid"
>
<div
class="usa-logo"
class="grid-col-1"
data-testid="grid"
>
<img
alt="Climate and Economic Justice Screening Tool"
class="j40-sitelogo"
src="test-file-stub"
/>
<span
class="usa-logo__text j40-title"
>
<span
class="j40-title-line1"
>
Climate and Economic Justice
</span>
<br />
<span
class="j40-title-line2"
>
Screening Tool
</span>
<span
class="usa-tag j40"
data-testid="tag"
>
Beta
</span>
</span>
</div>
<div
class="grid-col-6"
data-testid="grid"
>
<div>
<div>
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div>
</div>
<div
class="grid-col-fill"
data-testid="grid"
>
<button
class="usa-menu-btn"
data-testid="navMenuButton"
@ -181,9 +198,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
Menu
</button>
</div>
<nav
class="usa-nav j40-header"
class="usa-nav"
>
<button
class="usa-nav__close"
@ -202,7 +218,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-about"
href="/en/"
>
@ -213,7 +228,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-explore-the-tool"
href="/en/cejst"
>
@ -224,7 +238,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-methodology"
href="/en/methodology"
>
@ -235,7 +248,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-contact"
href="/en/contact"
>
@ -245,41 +257,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</ul>
</nav>
</div>
</div>
</div>
</header>
<main
id="main-content"
>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div>
<div
class="usa-alert usa-alert--info j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Public beta
</span>
<span
class="j40-sitealert-body"
>
— This website may be continuously updated
</span>
<br />
</p>
</div>
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"

View file

@ -3,7 +3,7 @@
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
<DocumentFragment>
<header
class="usa-header usa-header--basic usa-header j40-header"
class="usa-header usa-header--basic"
data-testid="header"
role="banner"
>
@ -138,42 +138,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</section>
<div>
<div>
<div />
<div>
<span>
This is a Beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited data
sets that will be continuously updated.
</span>
</div>
</div>
</div>
<div
class="usa-nav-container"
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
class="usa-navbar"
class="grid-row"
data-testid="grid"
>
<div
class="usa-logo"
class="grid-col-1"
data-testid="grid"
>
<img
alt="Climate and Economic Justice Screening Tool"
class="j40-sitelogo"
src="test-file-stub"
/>
<span
class="usa-logo__text j40-title"
>
<span
class="j40-title-line1"
>
Climate and Economic Justice
</span>
<br />
<span
class="j40-title-line2"
>
Screening Tool
</span>
<span
class="usa-tag j40"
data-testid="tag"
>
Beta
</span>
</span>
</div>
<div
class="grid-col-6"
data-testid="grid"
>
<div>
<div>
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div>
</div>
<div
class="grid-col-fill"
data-testid="grid"
>
<button
class="usa-menu-btn"
data-testid="navMenuButton"
@ -181,9 +198,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
Menu
</button>
</div>
<nav
class="usa-nav j40-header"
class="usa-nav"
>
<button
class="usa-nav__close"
@ -202,7 +218,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-about"
href="/en/"
>
@ -213,7 +228,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-explore-the-tool"
href="/en/cejst"
>
@ -224,7 +238,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-methodology"
href="/en/methodology"
>
@ -235,7 +248,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-nav__primary-item"
>
<a
class="j40-header"
data-cy="nav-link-contact"
href="/en/contact"
>
@ -245,41 +257,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</ul>
</nav>
</div>
</div>
</div>
</header>
<main
id="main-content"
>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div>
<div
class="usa-alert usa-alert--info j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Public beta
</span>
<span
class="j40-sitealert-body"
>
— This website may be continuously updated
</span>
<br />
</p>
</div>
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
@ -366,32 +349,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="grid-col-12"
data-testid="grid"
>
<div>
<div
class="usa-alert usa-alert--warning j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Limited data sources
</span>
<span
class="j40-sitealert-body"
>
— Datasets may be added, updated, or removed.
</span>
<br />
</p>
</div>
</div>
</div>
<h2>
Datasets used in methodology
</h2>

View file

@ -2,7 +2,6 @@ import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
import AlertWrapper from '../components/AlertWrapper';
import HowYouCanHelp from '../components/HowYouCanHelp';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
@ -22,9 +21,6 @@ const CEJSTPage = ({location}: IMapPageProps) => {
return (<Layout location={location} title={intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_TILE)}>
<J40MainGridContainer>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer>
<h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>

View file

@ -2,7 +2,6 @@ import * as React from 'react';
import {Grid} from '@trussworks/react-uswds';
import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
import AlertWrapper from '../components/AlertWrapper';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
@ -18,10 +17,6 @@ const ContactPage = ({location}: IContactPageProps) => {
return (
<Layout location={location} title={intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_TILE)}>
<J40MainGridContainer>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer>
<Grid row>
<Grid col>

View file

@ -3,7 +3,6 @@ import {useIntl} from 'gatsby-plugin-intl';
import AboutCard from '../components/AboutCard/AboutCard';
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
import AlertWrapper from '../components/AlertWrapper';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
@ -36,9 +35,6 @@ const IndexPage = ({location}: IndexPageProps) => {
return (
<Layout location={location} title={intl.formatMessage(ABOUT_COPY.PAGE.TILE)}>
<J40MainGridContainer>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer>
<h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>

View file

@ -2,7 +2,6 @@ import * as React from 'react';
import {Grid} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import AlertWrapper from '../components/AlertWrapper';
import DatasetContainer from '../components/DatasetContainer';
import DownloadPacket from '../components/DownloadPacket';
import J40MainGridContainer from '../components/J40MainGridContainer';
@ -22,10 +21,6 @@ const IndexPage = ({location}: MethodPageProps) => {
return (
<Layout location={location} title={intl.formatMessage(METHODOLOGY_COPY.PAGE.TILE)}>
<J40MainGridContainer>
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer>
<h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
<Grid row gap className={'j40-mb-5'}>

View file

@ -0,0 +1,9 @@
@import '../styles/theme/_uswds-theme-general.scss';
@import '../styles/theme/_uswds-theme-typography.scss';
@import '../styles/theme/_uswds-theme-spacing.scss';
@import '../styles/theme/_uswds-theme-color.scss';
@import '../styles/theme/_uswds-theme-utilities.scss';
@import '../styles/uswds-settings.scss';
@import '../../node_modules/uswds/src/stylesheets/packages/_required.scss';

View file

@ -20,11 +20,9 @@ There are 3 things that should be included in this file:
Instead of having a separate file for these styles, all styles are being placed here.
- Global styles
- Layout styles
-- Header styles
-- Main content styles
-- Footer styles
- Component styles
-- Alert styles
-- Map styles
-- Timeline/process list styles
-- About styles
@ -101,93 +99,9 @@ p.flush {
This section will outline styles for components that are on each page. These
components include:
- header styles
- main content styles
- footer styles
******************************
* HEADER STYLES
******************************
*/
.j40-header,
.j40-primary-nav,
.j40-header > li > a {
// Todo color: remove this global
// May be able to place importance like this: u-bg('red-warm-50v', !important)
color: $primary-color !important;
z-index: 5;
.usa-nav-container {
max-width: 76rem;
}
span {
// make sure the open close chevron is colored correctly
color: $primary-color; // Todo color: remove this global
}
// this is the title
@include at-media("desktop") {
.j40-title {
font-size: 0.9em;
padding-bottom: 0; // allows vertical centering on logo and text
font-weight: normal;
}
.usa-navbar {
width: 100%;
}
// this actual site logo
.sitelogo {
float: left; // allows vertical centering on logo and text
margin-right: 0.5rem; // space between logo and text
width: 4rem;
padding: 0.5rem; // this will change the size of the logo too
}
// nav menu item font
.usa-nav__primary {
.usa-nav__primary-item {
a {
margin-bottom: 0.5em; // how far menu is from bottom edge of nav
font-weight: 600;
}
}
}
// this is forcing the whole toolbar much taller
.usa-logo {
margin-top: 1.2rem;
margin-bottom: 1.2rem;
}
}
@include at-media("mobile") {
.usa-logo__text {
padding-top: 3px; // allows vertical centering on logo and text
padding-bottom: 0; // allows vertical centering on logo and text
font-weight: normal;
}
.usa-navbar {
width: 100%;
}
.j40-sitelogo {
float: left; // allows vertical centering on logo and text
margin-right: 0.5em; // space between logo and text
width: 3em;
padding: 0.4em; // this will change the size of the logo too
}
}
}
.usa-tag.j40 {
background: orange;
margin-left: 1rem;
}
/*
******************************
@ -242,49 +156,9 @@ components include:
/***************** COMPONENT STYLES **************************************************************
This section will outline styles that are component specific
- alert
- map
- timeline
- about
- accordion
/*
******************************
* ALERT STYLES
******************************
*/
.j40-sitealert {
p {
margin: 0;
}
min-height: 2.5em;
margin: 0;
.j40-sitealert-title {
font-weight: bold;
}
.usa-alert {
margin: 0;
padding-bottom: 0;
padding-top: 0;
}
.usa-alert__body {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.usa-alert__text {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
}
/*
******************************