Update links colors

- Language links
- Download links
- Simple links
- External links
- Side panel demographics links
- return to top links
- update snapshots
This commit is contained in:
Vim USDS 2022-09-16 12:53:19 -07:00
parent eeb7d07c40
commit 54c41b02a9
22 changed files with 112 additions and 17 deletions

View file

@ -43,18 +43,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#exp-agr-loss-rate"
>
expected agriculture loss rate
</a>
OR
<a
class="usa-link"
href="#exp-bld-loss-rate"
>
expected building loss rate
</a>
OR
<a
class="usa-link"
href="#exp-pop-loss-rate"
>
expected population loss rate
@ -68,12 +71,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -102,12 +107,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#energy-burden"
>
energy burden
</a>
OR
<a
class="usa-link"
href="#pm-25"
>
PM2.5 in the air
@ -121,12 +128,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -157,12 +166,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#diesel-pm"
>
diesel particulate matter exposure
</a>
or
<a
class="usa-link"
href="#traffic-vol"
>
traffic proximity and volume
@ -178,12 +189,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -212,18 +225,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#lead-paint"
>
lead paint
</a>
AND
<a
class="usa-link"
href="#median-home"
>
median home value
</a>
is at or less than the 90th percentile OR at or above the 90th percentile for the
<a
class="usa-link"
href="#house-burden"
>
housing cost burden
@ -237,12 +253,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -271,18 +289,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#prox-haz"
>
proximity to hazardous waste facilities
</a>
OR
<a
class="usa-link"
href="#prox-npl"
>
proximity to National Priorities List (NPL) sites
</a>
OR
<a
class="usa-link"
href="#prox-rmp"
>
proximity to Risk Management Plan (RMP) facilities
@ -296,12 +317,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -330,6 +353,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#waste-water"
>
wastewater discharge
@ -343,12 +367,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -377,24 +403,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#asthma"
>
asthma
</a>
OR
<a
class="usa-link"
href="#diabetes"
>
diabetes
</a>
OR
<a
class="usa-link"
href="#heart-disease"
>
heart disease
</a>
OR
<a
class="usa-link"
href="#life-exp"
>
low life expectancy
@ -408,12 +438,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -442,24 +474,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#low-med-inc"
>
low median income
</a>
as a percentage of area median income OR
<a
class="usa-link"
href="#ling-iso"
>
linguistic isolation
</a>
OR
<a
class="usa-link"
href="#unemploy"
>
unemployment
</a>
OR percentage of individuals in households at or below 100% Federal
<a
class="usa-link"
href="#poverty"
>
poverty
@ -473,12 +509,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong>
10% or more of adults 25 or older have not attained a
<a
class="usa-link"
href="#high-school"
>
high school degree
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education

View file

@ -21,18 +21,21 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#exp-agr-loss-rate"
>
expected agriculture loss rate
</a>
OR
<a
class="usa-link"
href="#exp-bld-loss-rate"
>
expected building loss rate
</a>
OR
<a
class="usa-link"
href="#exp-pop-loss-rate"
>
expected population loss rate
@ -46,12 +49,14 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education

View file

@ -44,7 +44,7 @@ const DatasetContainer = () => {
</Grid>
<div className={styles.returnToTop}>
<Link to={PAGES_ENDPOINTS.METHODOLOGY}>
<Link className={'usa-link'} to={PAGES_ENDPOINTS.METHODOLOGY}>
{METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
</Link>
</div>

View file

@ -1377,6 +1377,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<a
class="usa-link"
href="/en/methodology"
>
Return to top

View file

@ -4,4 +4,8 @@
height: 1rem;
vertical-align: middle;
filter: invert(57%) sepia(6%) saturate(3932%) hue-rotate(163deg) brightness(86%) contrast(88%);
}
.downloadStyle {
@include u-color('blue-60v');
}

View file

@ -1,6 +1,7 @@
declare namespace DownloadLinkNamespace {
export interface IDownloadLink {
downloadIcon: string;
downloadStyle: string;
}
}

View file

@ -27,7 +27,7 @@ const DownloadLink = ({href, linkText}:IDownloadLink) => {
}
return (
<>
<a href={href} download>{linkText}</a>
<a href={href} className={styles.downloadStyle} download>{linkText}</a>
<img
className={styles.downloadIcon}
src={fileDownloadIcon}

View file

@ -10,6 +10,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
<li>
View the
<a
class="usa-link"
href="/en/methodology"
>
Methodology & data

View file

@ -79,7 +79,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -11,6 +11,8 @@
.languageLink {
@include u-display("inline-block");
@include u-margin-left(1.5);
@include u-color('blue-60v');
cursor: pointer;
font-size: .8rem; // government banner text size not a token
@include u-padding-top('2px');

View file

@ -41,7 +41,7 @@ const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
if (props.internal) {
return (
<Link to={`${url}`}
className={props.className}
className={props.className ? `usa-link ${props.className}` : `usa-link`}
>
{props.linkText}
</Link>

View file

@ -28,6 +28,7 @@ exports[`testing all link types tests external links same tab 1`] = `
exports[`testing all link types tests internal links 1`] = `
<DocumentFragment>
<a
class="usa-link"
href="/en/methodology"
>
test link text

View file

@ -16,8 +16,8 @@ describe('rendering of the SubPageNav', () => {
const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
expect(firstLink?.className).toBe('usa-current');
expect(secondLink?.className).not.toBe('usa-current');
expect(firstLink?.className).toBe('usa-link usa-current');
expect(secondLink?.className).not.toBe('usa-link usa-current');
});
it('checks if the second link is active', () => {
@ -29,7 +29,7 @@ describe('rendering of the SubPageNav', () => {
const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
expect(secondLink?.className).toBe('usa-current');
expect(firstLink?.className).not.toBe('usa-current');
expect(secondLink?.className).toBe('usa-link usa-current');
expect(firstLink?.className).not.toBe('usa-link usa-current');
});
});

View file

@ -37,7 +37,7 @@
//emulate a link
cursor:pointer;
color:blue;
@include u-color('blue-60v');
text-decoration:underline;
min-width: 45px;

View file

@ -20,7 +20,7 @@ export interface IDefineMessage {
* */
export const italicFn = (str:string) => <i>{str}</i>;
export const boldFn = (str:string) => <strong>{str}</strong>;
export const simpleLink = (href:string) => (str:string) => <a href={href}>{str}</a>;
export const simpleLink = (href:string) => (str:string) => <a className={'usa-link'} href={href}>{str}</a>;
// export const downloadLink = (href:string) => (str:string) => <a href={href} download>{str}</a>;
export const downloadLink = (href:string) => (str:string) => <DownloadLink href={href} linkText={str} />;
// eslint-disable-next-line max-len

View file

@ -607,6 +607,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link"
>
<a
class="usa-link"
href="/en/methodology"
>
Methodology & data
@ -661,6 +662,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link"
>
<a
class="usa-link"
href="/en/"
>
Explore the map
@ -888,7 +890,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -400,6 +400,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
To provide feedback about a specific census tract, either select the send feedback button after
selecting a census tract on the
<a
class="usa-link"
href="/en/"
>
Explore the map
@ -535,7 +536,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -533,7 +533,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -428,7 +428,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -471,18 +471,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#exp-agr-loss-rate"
>
expected agriculture loss rate
</a>
OR
<a
class="usa-link"
href="#exp-bld-loss-rate"
>
expected building loss rate
</a>
OR
<a
class="usa-link"
href="#exp-pop-loss-rate"
>
expected population loss rate
@ -496,12 +499,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -530,12 +535,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#energy-burden"
>
energy burden
</a>
OR
<a
class="usa-link"
href="#pm-25"
>
PM2.5 in the air
@ -549,12 +556,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -585,12 +594,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#diesel-pm"
>
diesel particulate matter exposure
</a>
or
<a
class="usa-link"
href="#traffic-vol"
>
traffic proximity and volume
@ -606,12 +617,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -640,18 +653,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#lead-paint"
>
lead paint
</a>
AND
<a
class="usa-link"
href="#median-home"
>
median home value
</a>
is at or less than the 90th percentile OR at or above the 90th percentile for the
<a
class="usa-link"
href="#house-burden"
>
housing cost burden
@ -665,12 +681,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -699,18 +717,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#prox-haz"
>
proximity to hazardous waste facilities
</a>
OR
<a
class="usa-link"
href="#prox-npl"
>
proximity to National Priorities List (NPL) sites
</a>
OR
<a
class="usa-link"
href="#prox-rmp"
>
proximity to Risk Management Plan (RMP) facilities
@ -724,12 +745,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -758,6 +781,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#waste-water"
>
wastewater discharge
@ -771,12 +795,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -805,24 +831,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#asthma"
>
asthma
</a>
OR
<a
class="usa-link"
href="#diabetes"
>
diabetes
</a>
OR
<a
class="usa-link"
href="#heart-disease"
>
heart disease
</a>
OR
<a
class="usa-link"
href="#life-exp"
>
low life expectancy
@ -836,12 +866,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
is at or above the 65th percentile for
<a
class="usa-link"
href="#low-income"
>
low income
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -870,24 +902,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
at or above the 90th percentile for
<a
class="usa-link"
href="#low-med-inc"
>
low median income
</a>
as a percentage of area median income OR
<a
class="usa-link"
href="#ling-iso"
>
linguistic isolation
</a>
OR
<a
class="usa-link"
href="#unemploy"
>
unemployment
</a>
OR percentage of individuals in households at or below 100% Federal
<a
class="usa-link"
href="#poverty"
>
poverty
@ -901,12 +937,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong>
10% or more of adults 25 or older have not attained a
<a
class="usa-link"
href="#high-school"
>
high school degree
</a>
AND 80% or more of individuals 15 or older are not enrolled in
<a
class="usa-link"
href="#high-ed-enroll-rate"
>
higher education
@ -2292,6 +2330,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<a
class="usa-link"
href="/en/methodology"
>
Return to top
@ -2377,7 +2416,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -1026,7 +1026,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar

View file

@ -428,7 +428,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
class="usa-link footer-link-first-child"
href="/en/public-engagement"
>
Engagement calendar