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

Commit

Permalink
Update process page
Browse files Browse the repository at this point in the history
  • Loading branch information
@acouch
acouch committed May 15, 2024
1 parent 134a00f commit 8b4a6eb
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 98 deletions.
17 changes: 8 additions & 9 deletions frontend/src/app/process/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BetaAlert from "src/components/AppBetaAlert";
import Breadcrumbs from "src/components/Breadcrumbs";
import PageSEO from "src/components/PageSEO";
import { Metadata } from "next";
import ProcessContent from "src/pages/content/ProcessIntro";
import ProcessIntro from "src/pages/content/ProcessIntro";
import ProcessInvolved from "src/pages/content/ProcessInvolved";
import ProcessMilestones from "src/pages/content/ProcessMilestones";
import { getTranslations } from "next-intl/server";
Expand All @@ -21,18 +21,17 @@ export async function generateMetadata() {
}

export default function Process() {
const t = useTranslations("Process");
const t = useTranslations("Process");

return (
<>
<PageSEO
title={t("page_title")}
description={t("meta_description")}
/>
<PageSEO title={t("page_title")} description={t("meta_description")} />
<BetaAlert />
<Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
<ProcessContent />

<ProcessIntro />
<div className="padding-top-4 bg-gray-5">
<ProcessMilestones />
</div>
</>
);
}
}
4 changes: 2 additions & 2 deletions frontend/src/i18n/messages/en/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,12 @@ export const messages = {
{
title: "Find",
content:
"<p>Improve how applicants discover funding opportunities that they’re qualified for and that meet their needs.</p><chevron/>",
"<p>Improve how applicants discover funding opportunities that they’re qualified for and that meet their needs.</p>",
},
{
title: "Advanced reporting",
content:
"<p>Improve stakeholders’ capacity to understand, analyze, and assess grants from application to acceptance.</p><p>Make non-confidential Grants.gov data open for public analysis.</p><chevron/>",
"<p>Improve stakeholders’ capacity to understand, analyze, and assess grants from application to acceptance.</p><p>Make non-confidential Grants.gov data open for public analysis.</p>",
},
{
title: "Apply",
Expand Down
7 changes: 3 additions & 4 deletions frontend/src/pages/content/ProcessIntro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Grid } from "@trussworks/react-uswds";
import { useTranslations, useMessages } from "next-intl";
import ContentLayout from "src/components/ContentLayout";


const ProcessIntro = () => {
const t = useTranslations("Process");

Expand All @@ -27,8 +26,8 @@ const ProcessIntro = () => {
{keys.map((key) => {
const title = t(`intro.boxes.${key}.title`);
const content = t.rich(`intro.boxes.${key}.content`, {
italics: (chunks) => <em>{chunks}</em>
})
italics: (chunks) => <em>{chunks}</em>,
});
return (
<Grid
className="margin-bottom-6"
Expand All @@ -43,7 +42,7 @@ const ProcessIntro = () => {
</div>
</Grid>
);
})}
})}
</Grid>
</ContentLayout>
);
Expand Down
159 changes: 76 additions & 83 deletions frontend/src/pages/content/ProcessMilestones.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,56 @@
import { ExternalRoutes } from "src/constants/routes";
import React from "react";

import { Trans, useTranslation } from "next-i18next";
import { useTranslations, useMessages } from "next-intl";
import Link from "next/link";
import {
Button,
Grid,
Icon,
IconList,
IconListContent,
IconListIcon,
IconListItem,
IconListTitle,
} from "@trussworks/react-uswds";
import Image from "next/image";
import AssessmentSvg from "@uswds/uswds/src/img/usa-icons/assessment.svg";
import ContentCopySvg from "@uswds/uswds/src/img/usa-icons/content_copy.svg";
import LaunchSVG from "@uswds/uswds/src/img/usa-icons/launch.svg";
import NavigationNextSVG from "@uswds/uswds/src/img/usa-icons/navigate_next.svg";
import SearchSvg from "@uswds/uswds/src/img/usa-icons/search.svg";

import ContentLayout from "src/components/ContentLayout";

type Boxes = {
title: string;
content: string;
};

const ProcessMilestones = () => {
const { t } = useTranslation("common", { keyPrefix: "Process" });
const t = useTranslations("Process");

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

const getIcon = (iconIndex: number) => {
switch (iconIndex) {
case 0:
return <Icon.Search aria-hidden={true} className="text-middle" />;
return (
<Image src={SearchSvg} aria-hidden={true} className="text-middle" />
);
case 1:
return <Icon.Assessment aria-hidden={true} className="text-middle" />;
return (
<Image
src={AssessmentSvg}
aria-hidden={true}
className="text-middle"
alt="Icon that looks like graph"
/>
);
case 2:
return <Icon.ContentCopy aria-hidden={true} className="text-middle" />;
return (
<Image
src={ContentCopySvg}
aria-hidden={true}
className="text-middle"
alt="Content copy icon"
/>
);
default:
return <></>;
}
Expand All @@ -47,51 +65,53 @@ const ProcessMilestones = () => {
bottomBorder="dark"
gridGap={6}
>
{!Array.isArray(iconList)
? ""
: iconList.map((box, index) => {
return (
<Grid key={box.title + "-key"} tabletLg={{ col: 4 }}>
<IconList className="usa-icon-list--size-lg">
<IconListItem className="margin-top-4">
<IconListIcon>{getIcon(index)}</IconListIcon>
<IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
<IconListTitle className="margin-bottom-2" type="h3">
{box.title}
</IconListTitle>
<Trans
t={t}
i18nKey={box.content}
components={{
p: (
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
),
chevron: (
<Icon.NavigateNext
className="display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
size={9}
aria-label="launch"
/>
),
}}
{keys.map((key, index) => {
const title = t(`milestones.icon_list.${key}.title`);
const content = t.rich(`intro.boxes.${key}.content`, {
p: (chunks) => (
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{chunks}
</p>
),
italics: (chunks) => <em>{chunks}</em>,
});

return (
<Grid key={title + "-key"} tabletLg={{ col: 4 }}>
<IconList className="usa-icon-list--size-lg">
<IconListItem className="margin-top-4">
<IconListIcon>{getIcon(index)}</IconListIcon>
<IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
<IconListTitle className="margin-bottom-2" type="h3">
{title}
</IconListTitle>
{content}
{
// Don't show the chevron in the last row item.
index < keys.length - 1 ? (
<Image
src={NavigationNextSVG}
alt="chevron pointing right"
className="display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
aria-label="launch"
/>
</IconListContent>
</IconListItem>
</IconList>
</Grid>
);
})}
) : (
""
)
}
</IconListContent>
</IconListItem>
</IconList>
</Grid>
);
})}
</ContentLayout>
<ContentLayout
title={
<>
<small className="display-block font-sans-lg margin-bottom-105">
{t("milestones.roadmap_1")}
<Icon.NavigateNext
className="text-middle text-base-light"
size={4}
aria-label="launch"
/>

{t("milestones.title_1")}
</small>
{t("milestones.name_1")}
Expand Down Expand Up @@ -120,9 +140,9 @@ const ProcessMilestones = () => {
<Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
<Button className="margin-bottom-4" type="button" size="big">
<span className="margin-right-5">{t("milestones.cta_1")}</span>
<Icon.Launch
<Image
src={LaunchSVG}
className="text-middle margin-left-neg-4"
size={4}
aria-label="launch"
/>
</Button>
Expand All @@ -134,9 +154,9 @@ const ProcessMilestones = () => {
<>
<small className="display-block font-sans-lg margin-bottom-105">
{t("milestones.roadmap_2")}
<Icon.NavigateNext
<Image
src={NavigationNextSVG}
className="text-middle text-base-light"
size={4}
aria-label="launch"
/>
{t("milestones.title_2")}
Expand All @@ -156,38 +176,11 @@ const ProcessMilestones = () => {
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
{t("milestones.sub_title_3")}
</h3>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
<Trans
t={t}
i18nKey="milestones.sub_paragraph_3"
components={{
LinkToGrants: (
<a
target="_blank"
rel="noopener noreferrer"
href={ExternalRoutes.GRANTS_HOME}
/>
),
}}
/>
</p>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
<Trans
t={t}
i18nKey="milestones.sub_paragraph_4"
components={{
LinkToNewsletter: <Link href="/newsletter" />,
}}
/>
</p>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
<Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
<Button className="margin-bottom-4" type="button" size="big">
<span className="margin-right-5">{t("milestones.cta_2")}</span>
<Icon.Launch
className="text-middle margin-left-neg-4"
size={4}
aria-label="launch"
/>
</Button>
</Link>
</Grid>
Expand Down

0 comments on commit 8b4a6eb

Please sign in to comment.