diff --git a/frontend/src/app/[locale]/process/ProcessNext.tsx b/frontend/src/app/[locale]/process/ProcessNext.tsx index 5ca5c5170..3471545cc 100644 --- a/frontend/src/app/[locale]/process/ProcessNext.tsx +++ b/frontend/src/app/[locale]/process/ProcessNext.tsx @@ -2,7 +2,6 @@ import { ExternalRoutes } from "src/constants/routes"; import { useMessages, useTranslations } from "next-intl"; import Link from "next/link"; -import { ReactNode } from "react"; import { Grid, GridContainer, @@ -12,34 +11,9 @@ import { IconListItem, } from "@trussworks/react-uswds"; +import { gitHubLinkForIssue } from "src/components/GithubLink"; import { USWDSIcon } from "src/components/USWDSIcon"; -export const GithubIssueLink = ({ - issueNumber, - chunks, - extraClasses = "", -}: { - issueNumber?: number; - chunks: ReactNode; - extraClasses?: string; -}) => ( - - {chunks} - -); - -export const gitHubLinkForIssue = (issueNumber: number) => { - const PartialIssueLink = (chunks: ReactNode) => ( - - ); - PartialIssueLink.displayName = "GithubIssueLink"; - return PartialIssueLink; -}; - const ProcessNext = () => { const t = useTranslations("Process.next"); const messages = useMessages() as unknown as IntlMessages; diff --git a/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx b/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx index 17e1b9cc5..4c0340f2a 100644 --- a/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx +++ b/frontend/src/app/[locale]/roadmap/RoadmapProcess.tsx @@ -15,7 +15,7 @@ export default function RoadmapProcess() {

{t("sectionSummary")}

{Object.keys(contentItems).map((key) => { return ( -
+

{t(`contentItems.${key}.title`)}

{t(`contentItems.${key}.content`)}

diff --git a/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx b/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx index ab0f09c47..cd15d96cd 100644 --- a/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx +++ b/frontend/src/app/[locale]/roadmap/RoadmapWhatWereWorkingOn.tsx @@ -1,7 +1,7 @@ import { useMessages, useTranslations } from "next-intl"; import { Grid, GridContainer } from "@trussworks/react-uswds"; -import { GithubIssueLink, gitHubLinkForIssue } from "../process/ProcessNext"; +import GithubIssueLink, { gitHubLinkForIssue } from "src/components/GithubLink"; import RoadmapPageSection from "./RoadmapPageSection"; export default function RoadmapWhatWereWorkingOn() { @@ -15,9 +15,12 @@ export default function RoadmapWhatWereWorkingOn() { sectionContent={ {contentItems.map((i, j) => ( - + {i.map((k, l) => ( - +

{t(`contentItems.${j}.${l}.title`)}

diff --git a/frontend/src/components/GithubLink.tsx b/frontend/src/components/GithubLink.tsx new file mode 100644 index 000000000..e5fca10b0 --- /dev/null +++ b/frontend/src/components/GithubLink.tsx @@ -0,0 +1,32 @@ +import { ExternalRoutes } from "src/constants/routes"; + +import Link from "next/link"; +import { ReactNode } from "react"; + +export default function GithubIssueLink({ + issueNumber, + chunks, + extraClasses = "", +}: { + issueNumber?: number; + chunks: ReactNode; + extraClasses?: string; +}) { + return ( + + {chunks} + + ); +} + +export const gitHubLinkForIssue = (issueNumber: number) => { + const PartialIssueLink = (chunks: ReactNode) => ( + + ); + PartialIssueLink.displayName = "GithubIssueLink"; + return PartialIssueLink; +}; diff --git a/frontend/tests/components/ProcessNext.test.tsx b/frontend/tests/components/ProcessNext.test.tsx index 648345b50..4dfa8870e 100644 --- a/frontend/tests/components/ProcessNext.test.tsx +++ b/frontend/tests/components/ProcessNext.test.tsx @@ -1,8 +1,8 @@ -import ProcessNext, { - gitHubLinkForIssue, -} from "src/app/[locale]/process/ProcessNext"; +import ProcessNext from "src/app/[locale]/process/ProcessNext"; import { render, screen } from "tests/react-utils"; +import { gitHubLinkForIssue } from "src/components/GithubLink"; + describe("Process Content", () => { it("Renders without errors", () => { render();