mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-27 06:31:40 -07:00
Make priority copy updates
This commit is contained in:
Ryon Coleman
Carlos Felix
parent
7626a2e051
commit
048fec4886
27 changed files with 388 additions and 343 deletions
|
|
@ -1,25 +0,0 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.betaBannerContainer {
|
||||
@include u-bg("gray-cool-2");
|
||||
|
||||
.betaBanner {
|
||||
@include u-height(3);
|
||||
max-width: 70.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(1);
|
||||
padding-bottom: 1.75rem;
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
declare namespace BetaBannerNamespace {
|
||||
export interface IBetaBannerScss {
|
||||
betaBannerContainer: string;
|
||||
betaBanner:string;
|
||||
betaPillIcon:string;
|
||||
betaHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const BetaBannerScssModule: BetaBannerNamespace.IBetaBannerScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: BetaBannerNamespace.IBetaBannerScss;
|
||||
};
|
||||
|
||||
export = BetaBannerScssModule;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import * as styles from './BetaBanner.module.scss';
|
||||
|
||||
const BetaBanner = () => {
|
||||
return (
|
||||
<div className={styles.betaBannerContainer}>
|
||||
<div className={styles.betaBanner}>
|
||||
{COMMON_COPY.BETA_BANNER_CONTENT}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BetaBanner;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the BetaBanner checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
This tool has been updated.
|
||||
</strong>
|
||||
The 1.0 version of the tool was released on Nov 22, 2022.
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import BetaBanner from './BetaBanner';
|
||||
|
||||
export default BetaBanner;
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import {GovBanner} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import React from 'react';
|
||||
|
||||
import Language from '../Language';
|
||||
|
||||
import * as styles from './GovernmentBanner.module.scss';
|
||||
|
||||
|
|
@ -14,7 +13,6 @@ const GovernmentBanner = () => {
|
|||
<div className={styles.bannerContainer}>
|
||||
|
||||
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
|
||||
<Language isDesktop={true}/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,24 +135,6 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<img
|
||||
alt="language icon for selecting language"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
<a
|
||||
class="usa-link"
|
||||
href="#"
|
||||
>
|
||||
English
|
||||
</a>
|
||||
<a
|
||||
class="usa-link"
|
||||
href="#"
|
||||
>
|
||||
Español
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import {Link, useIntl} from 'gatsby-plugin-intl';
|
||||
import {
|
||||
Grid,
|
||||
// Alert,
|
||||
Header,
|
||||
Menu,
|
||||
NavDropDownButton,
|
||||
NavMenuButton,
|
||||
PrimaryNav,
|
||||
Grid,
|
||||
NavDropDownButton,
|
||||
Menu,
|
||||
} from '@trussworks/react-uswds';
|
||||
import BetaBanner from '../BetaBanner';
|
||||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
import GovernmentBanner from '../GovernmentBanner';
|
||||
import Language from '../Language';
|
||||
import {Link, useIntl} from 'gatsby-plugin-intl';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {useWindowSize} from 'react-use';
|
||||
import GovernmentBanner from '../GovernmentBanner';
|
||||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
import Language from '../Language';
|
||||
|
||||
// @ts-ignore
|
||||
import siteLogo from '../../images/j40-logo-v2.png';
|
||||
import * as styles from './J40Header.module.scss';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import {PAGES_ENDPOINTS, USWDS_BREAKPOINTS} from '../../data/constants';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import siteLogo from '../../images/j40-logo-v2.png';
|
||||
import UpdateBanner from '../UpdateBanner';
|
||||
import * as styles from './J40Header.module.scss';
|
||||
|
||||
|
||||
interface IJ40Header {
|
||||
|
|
@ -247,7 +247,7 @@ const J40Header = ({location}:IJ40Header) => {
|
|||
|
||||
{/* Banners */}
|
||||
<GovernmentBanner />
|
||||
<BetaBanner/>
|
||||
<UpdateBanner/>
|
||||
|
||||
{/* Logo and Navigation */}
|
||||
<J40MainGridContainer>
|
||||
|
|
|
|||
|
|
@ -140,32 +140,27 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<img
|
||||
alt="language icon for selecting language"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
<a
|
||||
class="usa-link"
|
||||
href="#"
|
||||
>
|
||||
English
|
||||
</a>
|
||||
<a
|
||||
class="usa-link"
|
||||
href="#"
|
||||
>
|
||||
Español
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
This tool has been updated.
|
||||
</strong>
|
||||
The 1.0 version of the tool was released on Nov 22, 2022.
|
||||
<div
|
||||
class="usa-alert usa-alert--info"
|
||||
data-testid="alert"
|
||||
>
|
||||
<div
|
||||
class="usa-alert__body"
|
||||
>
|
||||
<h1
|
||||
class="usa-alert__heading"
|
||||
>
|
||||
Version 2.0 of the tool is now available
|
||||
</h1>
|
||||
<p
|
||||
class="usa-alert__text"
|
||||
>
|
||||
The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 19, 2024.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ exports[`rendering of ReleaseUpdate Component checks if component renders 1`] =
|
|||
>
|
||||
<div>
|
||||
<div>
|
||||
Version 2.0 Release update - Nov 22, 2022
|
||||
Version 2.0 Release update - Dec 19, 2024
|
||||
</div>
|
||||
<div>
|
||||
New & improved
|
||||
|
|
|
|||
29
client/src/components/UpdateBanner/UpdateBanner.module.scss
Normal file
29
client/src/components/UpdateBanner/UpdateBanner.module.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.updateBannerContainer {
|
||||
@include u-bg("gray-cool-2");
|
||||
@include u-padding-bottom(1);
|
||||
@include u-padding-top(1);
|
||||
}
|
||||
|
||||
.updateBanner {
|
||||
max-width: 70.25rem; // Needs this exact value to align with GovBanner
|
||||
@include u-font("body", "3xs");
|
||||
@include u-line-height('ui', 2);
|
||||
@include u-margin-left(auto);
|
||||
@include u-margin-right(auto);
|
||||
|
||||
@include at-media-max("desktop-lg") {
|
||||
@include u-margin-left(4);
|
||||
@include u-margin-right(4);
|
||||
}
|
||||
|
||||
@include at-media-max("desktop") {
|
||||
@include u-margin-left(2);
|
||||
@include u-margin-right(2);
|
||||
}
|
||||
}
|
||||
|
||||
.updateBannerAlert {
|
||||
@include u-margin-top(2);
|
||||
}
|
||||
16
client/src/components/UpdateBanner/UpdateBanner.module.scss.d.ts
vendored
Normal file
16
client/src/components/UpdateBanner/UpdateBanner.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
declare namespace UpdateBannerNamespace {
|
||||
export interface IUpdateBannerScss {
|
||||
updateBannerAlert: string;
|
||||
updateBannerContainer: string;
|
||||
updateBanner: string;
|
||||
updatePillIcon: string;
|
||||
updateHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const UpdateBannerScssModule: UpdateBannerNamespace.IUpdateBannerScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: UpdateBannerNamespace.IUpdateBannerScss;
|
||||
};
|
||||
|
||||
export = UpdateBannerScssModule;
|
||||
31
client/src/components/UpdateBanner/UpdateBanner.test.tsx
Normal file
31
client/src/components/UpdateBanner/UpdateBanner.test.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import {render} from '@testing-library/react';
|
||||
import * as React from 'react';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
import UpdateBanner, {cutoffDate} from './UpdateBanner';
|
||||
|
||||
describe('rendering of the UpdateBanner', () => {
|
||||
const renderBanner = (mockCurrentDate: Date) => {
|
||||
// make this testable at different dates so we can check large/small versions
|
||||
jest.useFakeTimers()
|
||||
.setSystemTime(mockCurrentDate);
|
||||
|
||||
const result = render(
|
||||
<LocalizedComponent>
|
||||
<UpdateBanner />
|
||||
</LocalizedComponent>,
|
||||
).asFragment();
|
||||
|
||||
jest.useRealTimers();
|
||||
return result;
|
||||
};
|
||||
|
||||
it('renders large version before cutoff date', () => {
|
||||
const beforeCutoff = new Date(cutoffDate);
|
||||
beforeCutoff.setDate(beforeCutoff.getDate() - 7);
|
||||
expect(renderBanner(beforeCutoff)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders small version at cutoff date', () => {
|
||||
expect(renderBanner(cutoffDate)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
35
client/src/components/UpdateBanner/UpdateBanner.tsx
Normal file
35
client/src/components/UpdateBanner/UpdateBanner.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Alert} from '@trussworks/react-uswds';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import * as styles from './UpdateBanner.module.scss';
|
||||
|
||||
export const cutoffDate = new Date(2025, 0, 19); // 2025-01-19
|
||||
|
||||
const UpdateBanner = () => {
|
||||
const currentDate = new Date();
|
||||
|
||||
// show large version before cutoff date
|
||||
const showLarge = currentDate < cutoffDate;
|
||||
|
||||
if (showLarge) {
|
||||
return (
|
||||
<div className={styles.updateBanner}>
|
||||
<Alert type={'info'} headingLevel={'h1'} heading={COMMON_COPY.UPDATE_BANNER_HEADING_LARGE}
|
||||
className={styles.updateBannerAlert}>
|
||||
{COMMON_COPY.UPDATE_BANNER_CONTENT_LARGE}
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={styles.updateBannerContainer}>
|
||||
<div className={styles.updateBanner}>
|
||||
{COMMON_COPY.UPDATE_BANNER_CONTENT_SMALL}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default UpdateBanner;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the UpdateBanner renders large version before cutoff date 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div
|
||||
class="usa-alert usa-alert--info"
|
||||
data-testid="alert"
|
||||
>
|
||||
<div
|
||||
class="usa-alert__body"
|
||||
>
|
||||
<h1
|
||||
class="usa-alert__heading"
|
||||
>
|
||||
Version 2.0 of the tool is now available
|
||||
</h1>
|
||||
<p
|
||||
class="usa-alert__text"
|
||||
>
|
||||
The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 19, 2024.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`rendering of the UpdateBanner renders small version at cutoff date 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
This tool has been updated.
|
||||
</strong>
|
||||
The 2.0 version of the tool was released on Dec 19, 2024.
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
3
client/src/components/UpdateBanner/index.tsx
Normal file
3
client/src/components/UpdateBanner/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import UpdateBanner from './UpdateBanner';
|
||||
|
||||
export default UpdateBanner;
|
||||
Loading…
Add table
Add a link
Reference in a new issue