Skip to content
This repository was archived by the owner on Sep 18, 2024. It is now read-only.

Commit 32ba4ee

Browse files
acouchacouch
committed
Move process page to app
1 parent 6bfd75e commit 32ba4ee

20 files changed

+630
-278
lines changed

‎frontend/src/app/[locale]/process/ProcessIntro.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Grid } from "@trussworks/react-uswds";
2+
import { useTranslations, useMessages } from "next-intl";
3+
import ContentLayout from "src/components/ContentLayout";
4+
5+
const ProcessIntro = () => {
6+
const t = useTranslations("Process");
7+
8+
const messages = useMessages() as unknown as IntlMessages;
9+
const keys = Object.keys(messages.Process.intro.boxes);
10+
11+
return (
12+
<ContentLayout
13+
title={t("intro.title")}
14+
data-testid="process-intro-content"
15+
paddingTop={false}
16+
>
17+
<Grid row gap>
18+
<Grid>
19+
<p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
20+
{t("intro.content")}
21+
</p>
22+
</Grid>
23+
</Grid>
24+
25+
<Grid row gap="lg" className="margin-top-2">
26+
{keys.map((key) => {
27+
const title = t(`intro.boxes.${key}.title`);
28+
const content = t.rich(`intro.boxes.${key}.content`, {
29+
italics: (chunks) => <em>{chunks}</em>,
30+
});
31+
return (
32+
<Grid
33+
className="margin-bottom-6"
34+
key={title + "-key"}
35+
tabletLg={{ col: 4 }}
36+
>
37+
<div className="border radius-md border-base-lighter padding-x-205">
38+
<h3 className="tablet-lg:font-serif-lg">{title}</h3>
39+
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
40+
{content}
41+
</p>
42+
</div>
43+
</Grid>
44+
);
45+
})}
46+
</Grid>
47+
</ContentLayout>
48+
);
49+
};
50+
51+
export default ProcessIntro;

‎frontend/src/app/[locale]/process/ProcessInvolved.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { ExternalRoutes } from "src/constants/routes";
2+
3+
import { useTranslations } from "next-intl";
4+
import { Grid } from "@trussworks/react-uswds";
5+
6+
import ContentLayout from "src/components/ContentLayout";
7+
8+
const ProcessInvolved = () => {
9+
const t = useTranslations("Process");
10+
11+
const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV;
12+
const para1 = t.rich("involved.paragraph_1", {
13+
email: (chunks) => (
14+
<a href={`mailto:${email}`} target="_blank" rel="noopener noreferrer">
15+
{chunks}
16+
</a>
17+
),
18+
strong: (chunks) => <strong> {chunks} </strong>,
19+
});
20+
const para2 = t.rich("involved.paragraph_2", {
21+
github: (chunks) => (
22+
<a
23+
className="usa-link--external"
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
href={ExternalRoutes.GITHUB_REPO}
27+
>
28+
{chunks}
29+
</a>
30+
),
31+
wiki: (chunks) => (
32+
<a
33+
className="usa-link--external"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
href={ExternalRoutes.WIKI}
37+
>
38+
{chunks}
39+
</a>
40+
),
41+
strong: (chunks) => <strong> {chunks} </strong>,
42+
});
43+
return (
44+
<ContentLayout data-testid="process-involved-content" bottomBorder="none">
45+
<Grid row gap="lg">
46+
<Grid tabletLg={{ col: 6 }}>
47+
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
48+
{t("involved.title_1")}
49+
</h3>
50+
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
51+
{para1}
52+
</p>
53+
</Grid>
54+
<Grid tabletLg={{ col: 6 }}>
55+
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
56+
{t("involved.title_2")}
57+
</h3>
58+
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
59+
{para2}
60+
</p>
61+
</Grid>
62+
</Grid>
63+
</ContentLayout>
64+
);
65+
};
66+
67+
export default ProcessInvolved;

‎frontend/src/pages/content/ProcessMilestones.tsx renamed to ‎frontend/src/app/[locale]/process/ProcessMilestones.tsx

Lines changed: 62 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
11
import { ExternalRoutes } from "src/constants/routes";
2+
import React from "react";
23

3-
import { Trans, useTranslation } from "next-i18next";
4+
import { useTranslations, useMessages } from "next-intl";
45
import Link from "next/link";
56
import {
67
Button,
78
Grid,
8-
Icon,
99
IconList,
1010
IconListContent,
1111
IconListIcon,
1212
IconListItem,
1313
IconListTitle,
1414
} from "@trussworks/react-uswds";
15+
import { USWDSIcon } from "src/components/USWDSIcon";
1516

1617
import ContentLayout from "src/components/ContentLayout";
1718

18-
type Boxes = {
19-
title: string;
20-
content: string;
21-
};
22-
2319
const ProcessMilestones = () => {
24-
const { t } = useTranslation("common", { keyPrefix: "Process" });
20+
const t = useTranslations("Process");
2521

26-
const iconList: Boxes[] = t("milestones.icon_list", { returnObjects: true });
22+
const messages = useMessages() as unknown as IntlMessages;
23+
const keys = Object.keys(messages.Process.milestones.icon_list);
2724

2825
const getIcon = (iconIndex: number) => {
2926
switch (iconIndex) {
3027
case 0:
31-
return <Icon.Search aria-hidden={true} className="text-middle" />;
28+
return <USWDSIcon className="usa-icon" name="search" />;
3229
case 1:
33-
return <Icon.Assessment aria-hidden={true} className="text-middle" />;
30+
return <USWDSIcon className="usa-icon" name="assessment" />;
3431
case 2:
35-
return <Icon.ContentCopy aria-hidden={true} className="text-middle" />;
32+
return <USWDSIcon className="usa-icon" name="content_copy" />;
3633
default:
3734
return <></>;
3835
}
@@ -47,50 +44,55 @@ const ProcessMilestones = () => {
4744
bottomBorder="dark"
4845
gridGap={6}
4946
>
50-
{!Array.isArray(iconList)
51-
? ""
52-
: iconList.map((box, index) => {
53-
return (
54-
<Grid key={box.title + "-key"} tabletLg={{ col: 4 }}>
55-
<IconList className="usa-icon-list--size-lg">
56-
<IconListItem className="margin-top-4">
57-
<IconListIcon>{getIcon(index)}</IconListIcon>
58-
<IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
59-
<IconListTitle className="margin-bottom-2" type="h3">
60-
{box.title}
61-
</IconListTitle>
62-
<Trans
63-
t={t}
64-
i18nKey={box.content}
65-
components={{
66-
p: (
67-
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
68-
),
69-
chevron: (
70-
<Icon.NavigateNext
71-
className="display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
72-
size={9}
73-
aria-label="launch"
74-
/>
75-
),
76-
}}
47+
{keys.map((key, index) => {
48+
const title = t(`milestones.icon_list.${key}.title`);
49+
const content = t.rich(`milestones.icon_list.${key}.content`, {
50+
p: (chunks) => (
51+
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
52+
{chunks}
53+
</p>
54+
),
55+
italics: (chunks) => <em>{chunks}</em>,
56+
});
57+
58+
return (
59+
<Grid key={title + "-key"} tabletLg={{ col: 4 }}>
60+
<IconList className="usa-icon-list--size-lg">
61+
<IconListItem className="margin-top-4">
62+
<IconListIcon>{getIcon(index)}</IconListIcon>
63+
<IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
64+
<IconListTitle className="margin-bottom-2" type="h3">
65+
{title}
66+
</IconListTitle>
67+
<div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
68+
{content}
69+
</div>
70+
{
71+
// Don't show the chevron in the last row item.
72+
index < keys.length - 1 ? (
73+
<USWDSIcon
74+
className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
75+
name="navigate_next"
7776
/>
78-
</IconListContent>
79-
</IconListItem>
80-
</IconList>
81-
</Grid>
82-
);
83-
})}
77+
) : (
78+
""
79+
)
80+
}
81+
</IconListContent>
82+
</IconListItem>
83+
</IconList>
84+
</Grid>
85+
);
86+
})}
8487
</ContentLayout>
8588
<ContentLayout
8689
title={
8790
<>
8891
<small className="display-block font-sans-lg margin-bottom-105">
8992
{t("milestones.roadmap_1")}
90-
<Icon.NavigateNext
91-
className="text-middle text-base-light"
92-
size={4}
93-
aria-label="launch"
93+
<USWDSIcon
94+
className="usa-icon usa-icon--size-4 text-middle text-base-light"
95+
name="navigate_next"
9496
/>
9597
{t("milestones.title_1")}
9698
</small>
@@ -120,10 +122,9 @@ const ProcessMilestones = () => {
120122
<Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
121123
<Button className="margin-bottom-4" type="button" size="big">
122124
<span className="margin-right-5">{t("milestones.cta_1")}</span>
123-
<Icon.Launch
124-
className="text-middle margin-left-neg-4"
125-
size={4}
126-
aria-label="launch"
125+
<USWDSIcon
126+
name="launch"
127+
className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
127128
/>
128129
</Button>
129130
</Link>
@@ -134,10 +135,9 @@ const ProcessMilestones = () => {
134135
<>
135136
<small className="display-block font-sans-lg margin-bottom-105">
136137
{t("milestones.roadmap_2")}
137-
<Icon.NavigateNext
138-
className="text-middle text-base-light"
139-
size={4}
140-
aria-label="launch"
138+
<USWDSIcon
139+
className="usa-icon usa-icon--size-4 text-middle text-base-light"
140+
name="navigate_next"
141141
/>
142142
{t("milestones.title_2")}
143143
</small>
@@ -156,37 +156,14 @@ const ProcessMilestones = () => {
156156
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
157157
{t("milestones.sub_title_3")}
158158
</h3>
159-
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
160-
<Trans
161-
t={t}
162-
i18nKey="milestones.sub_paragraph_3"
163-
components={{
164-
LinkToGrants: (
165-
<a
166-
target="_blank"
167-
rel="noopener noreferrer"
168-
href={ExternalRoutes.GRANTS_HOME}
169-
/>
170-
),
171-
}}
172-
/>
173-
</p>
174-
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
175-
<Trans
176-
t={t}
177-
i18nKey="milestones.sub_paragraph_4"
178-
components={{
179-
LinkToNewsletter: <Link href="/newsletter" />,
180-
}}
181-
/>
182-
</p>
159+
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
160+
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
183161
<Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
184162
<Button className="margin-bottom-4" type="button" size="big">
185163
<span className="margin-right-5">{t("milestones.cta_2")}</span>
186-
<Icon.Launch
187-
className="text-middle margin-left-neg-4"
188-
size={4}
189-
aria-label="launch"
164+
<USWDSIcon
165+
name="launch"
166+
className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
190167
/>
191168
</Button>
192169
</Link>

‎frontend/src/app/[locale]/process/page.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
2+
3+
import BetaAlert from "src/components/BetaAlert";
4+
5+
import Breadcrumbs from "src/components/Breadcrumbs";
6+
import PageSEO from "src/components/PageSEO";
7+
import { Metadata } from "next";
8+
import ProcessIntro from "src/app/[locale]/process/ProcessIntro";
9+
import ProcessInvolved from "src/app/[locale]/process/ProcessInvolved";
10+
import ProcessMilestones from "src/app/[locale]/process/ProcessMilestones";
11+
import { useTranslations } from "next-intl";
12+
import { getTranslations } from "next-intl/server";
13+
14+
export async function generateMetadata() {
15+
const t = await getTranslations({ locale: "en" });
16+
const meta: Metadata = {
17+
title: t("Process.page_title"),
18+
description: t("Process.meta_description"),
19+
};
20+
return meta;
21+
}
22+
23+
export default function Process() {
24+
const t = useTranslations("Process");
25+
26+
return (
27+
<>
28+
<PageSEO title={t("page_title")} description={t("meta_description")} />
29+
<BetaAlert />
30+
<Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
31+
<ProcessIntro />
32+
<div className="padding-top-4 bg-gray-5">
33+
<ProcessMilestones />
34+
</div>
35+
<ProcessInvolved />
36+
</>
37+
);
38+
}

0 commit comments

Comments
 (0)