adding formatting fixes

navapbc · Aug 7, 2024 · 5825024 · 5825024
1 parent b6ba3a1
commit 5825024
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 35 deletions.
diff --git a/frontend/src/components/search/SearchBar.tsx b/frontend/src/components/search/SearchBar.tsx
@@ -3,7 +3,7 @@ import { Icon } from "@trussworks/react-uswds";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
 import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater";
-import { useTranslations } from "next-intl"; 
+import { useTranslations } from "next-intl";
 
 interface SearchBarProps {
   query: string | null | undefined;
@@ -27,7 +27,9 @@ export default function SearchBar({ query }: SearchBarProps) {
       >
         {t.rich("bar.label", {
           strong: (chunks) => <span className="text-bold">{chunks}</span>,
-          small: (chunks) => <small className="display-inline-block">{chunks}</small>,
+          small: (chunks) => (
+            <small className="display-inline-block">{chunks}</small>
+          ),
         })}
       </label>
       <div className="usa-search usa-search--big" role="search">

diff --git a/frontend/src/components/search/SearchCallToAction.tsx b/frontend/src/components/search/SearchCallToAction.tsx
@@ -1,20 +1,20 @@
 import { GridContainer } from "@trussworks/react-uswds";
 import React from "react";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 const SearchCallToAction: React.FC = () => {
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   return (
     <>
       {/* <BetaAlert /> */}
       <GridContainer>
         <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
-        {t("callToAction.title")}
+          {t("callToAction.title")}
         </h1>
         <p className="font-serif-md tablet-lg:font-serif-lg usa-intro margin-top-2">
           {t.rich("callToAction.description", {
-            mail: (chunks) => <a href="mailto:[email protected]">{chunks}</a>
+            mail: (chunks) => <a href="mailto:[email protected]">{chunks}</a>,
           })}
         </p>
       </GridContainer>

diff --git a/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx b/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 interface SearchFilterToggleAllProps {
   isAllSelected: boolean;
@@ -14,7 +14,7 @@ const SearchFilterToggleAll: React.FC<SearchFilterToggleAllProps> = ({
   isAllSelected,
   isNoneSelected,
 }) => {
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   return (
     <div className="grid-row">
@@ -27,7 +27,7 @@ const SearchFilterToggleAll: React.FC<SearchFilterToggleAllProps> = ({
           }}
           disabled={isAllSelected}
         >
-        {t("filterToggleAll.select")}
+          {t("filterToggleAll.select")}
         </button>
       </div>
       <div className="grid-col-fill text-right">

diff --git a/frontend/src/components/search/SearchOpportunityStatus.tsx b/frontend/src/components/search/SearchOpportunityStatus.tsx
@@ -3,7 +3,7 @@ import { Checkbox } from "@trussworks/react-uswds";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
 import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 interface StatusOption {
   id: string;
@@ -15,7 +15,6 @@ interface SearchOpportunityStatusProps {
   query: Set<string>;
 }
 
-
 export default function SearchOpportunityStatus({
   query,
 }: SearchOpportunityStatusProps) {
@@ -28,18 +27,36 @@ export default function SearchOpportunityStatus({
     updateQueryParams(updated, "status", queryTerm);
   };
 
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   const statusOptions: StatusOption[] = [
-    { id: "status-forecasted", label: t("opportunityStatus.label.forecasted"), value: "forecasted" },
-    { id: "status-posted", label: t("opportunityStatus.label.posted"), value: "posted" },
-    { id: "status-closed", label: t("opportunityStatus.label.closed"), value: "closed" },
-    { id: "status-archived", label: t("opportunityStatus.label.archived"), value: "archived" },
+    {
+      id: "status-forecasted",
+      label: t("opportunityStatus.label.forecasted"),
+      value: "forecasted",
+    },
+    {
+      id: "status-posted",
+      label: t("opportunityStatus.label.posted"),
+      value: "posted",
+    },
+    {
+      id: "status-closed",
+      label: t("opportunityStatus.label.closed"),
+      value: "closed",
+    },
+    {
+      id: "status-archived",
+      label: t("opportunityStatus.label.archived"),
+      value: "archived",
+    },
   ];
 
   return (
     <>
-      <h2 className="margin-bottom-1 font-sans-xs">{t("opportunityStatus.title")}</h2>
+      <h2 className="margin-bottom-1 font-sans-xs">
+        {t("opportunityStatus.title")}
+      </h2>
       <div className="grid-row flex-wrap">
         {statusOptions.map((option) => {
           return (

diff --git a/frontend/src/components/search/SearchResultsHeader.tsx b/frontend/src/components/search/SearchResultsHeader.tsx
@@ -2,7 +2,7 @@
 import SearchSortyBy from "./SearchSortBy";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
-import { useTranslations} from "next-intl"
+import { useTranslations } from "next-intl";
 
 export default function SearchResultsHeader({
   sortby,
@@ -25,12 +25,12 @@ export default function SearchResultsHeader({
   ];
   if (loading) gridRowClasses.push("opacity-50");
 
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   return (
     <div className="grid-row">
       <h2 className={gridRowClasses.join(" ")}>
-        {t("resultsHeader.message", {count: total})}
+        {t("resultsHeader.message", { count: total })}
       </h2>
       <div className="tablet-lg:grid-col-auto">
         <SearchSortyBy

diff --git a/frontend/src/components/search/SearchResultsListItem.tsx b/frontend/src/components/search/SearchResultsListItem.tsx
@@ -20,7 +20,7 @@ export default function SearchResultsListItem({
       ? "https://grants.gov"
       : "https://test.grants.gov";
 
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   const metadataBorderClasses = `
     display-block
@@ -123,7 +123,7 @@ export default function SearchResultsListItem({
             {/* TODO: Better way to format as a dollar amounts */}
             <span
               className={`${metadataBorderClasses} desktop:display-block text-right desktop:margin-right-0 desktop:padding-right-0`}
-            > 
+            >
               <strong>{t("resultsListItem.award_ceiling")}</strong>
               <span className="desktop:display-block desktop:font-sans-lg text-ls-neg-3 text-right">
                 ${opportunity?.summary?.award_ceiling?.toLocaleString() || "--"}

diff --git a/frontend/src/components/search/SearchSortBy.tsx b/frontend/src/components/search/SearchSortBy.tsx
@@ -3,15 +3,13 @@ import { Select } from "@trussworks/react-uswds";
 import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
 
 type SortOption = {
   label: string;
   value: string;
 };
 
-
-
 interface SearchSortByProps {
   queryTerm: string | null | undefined;
   sortby: string | null;
@@ -25,19 +23,31 @@ export default function SearchSortBy({
 }: SearchSortByProps) {
   const { updateQueryParams } = useSearchParamUpdater();
   const { updateTotalResults } = useContext(QueryContext);
-  const t = useTranslations("Search")
+  const t = useTranslations("Search");
 
   const SORT_OPTIONS: SortOption[] = [
     { label: t("sortBy.options.posted_date_desc"), value: "postedDateDesc" },
     { label: t("sortBy.options.posted_date_asc"), value: "postedDateAsc" },
     { label: t("sortBy.options.close_date_desc"), value: "closeDateDesc" },
     { label: t("sortBy.options.close_date_asc"), value: "closeDateAsc" },
-    { label: t("sortBy.options.opportunity_title_asc"), value: "opportunityTitleAsc" },
-    { label: t("sortBy.options.opportunity_title_desc"), value: "opportunityTitleDesc" },
+    {
+      label: t("sortBy.options.opportunity_title_asc"),
+      value: "opportunityTitleAsc",
+    },
+    {
+      label: t("sortBy.options.opportunity_title_desc"),
+      value: "opportunityTitleDesc",
+    },
     { label: t("sortBy.options.agency_asc"), value: "agencyAsc" },
     { label: t("sortBy.options.agency_desc"), value: "agencyDesc" },
-    { label: t("sortBy.options.opportunity_number_desc"), value: "opportunityNumberDesc" },
-    { label: t("sortBy.options.opportunity_number_asc"), value: "opportunityNumberAsc" },
+    {
+      label: t("sortBy.options.opportunity_number_desc"),
+      value: "opportunityNumberDesc",
+    },
+    {
+      label: t("sortBy.options.opportunity_number_asc"),
+      value: "opportunityNumberAsc",
+    },
   ];
 
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {

diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts
@@ -394,12 +394,14 @@ export const messages = {
       },
     },
     bar: {
-      label: "<strong>Search terms </strong><small>Enter keywords, opportunity numbers, or assistance listing numbers</small>",
+      label:
+        "<strong>Search terms </strong><small>Enter keywords, opportunity numbers, or assistance listing numbers</small>",
       button: "Search",
     },
     callToAction: {
       title: "Search funding opportunities",
-      description: "We’re incrementally improving this experimental search page. How can we make it easier to discover grants that are right for you? Let us know at <mail>[email protected]</mail>.",
+      description:
+        "We’re incrementally improving this experimental search page. How can we make it easier to discover grants that are right for you? Let us know at <mail>[email protected]</mail>.",
     },
     opportunityStatus: {
       title: "Opportunity status",
@@ -411,12 +413,13 @@ export const messages = {
       },
     },
     resultsHeader: {
-      message: "{count, plural, =1 {1 Opportunity} other {# Opportunities}}" 
+      message: "{count, plural, =1 {1 Opportunity} other {# Opportunities}}",
     },
     resultsListFetch: {
       title: "Your search did not return any results.",
       body: "<li>Check any terms you've entered for typos</li><li>Try different keywords</li><li>Make sure you've selected the right statuses</li><li>Try resetting filters or selecting fewer options</li>",
-      paginationError: "You're trying to access opportunity results that are beyond the last page of data."
+      paginationError:
+        "You're trying to access opportunity results that are beyond the last page of data.",
     },
     resultsListItem: {
       status: {
@@ -450,7 +453,7 @@ export const messages = {
     },
     filterToggleAll: {
       select: "Select All",
-      clear: "Clear All"
+      clear: "Clear All",
     },
   },
 };