feat: Add properly-formatted headers to the detours list page

mbta · Sep 11, 2024 · 1e8a28e · 1e8a28e
1 parent 7e77b05
commit 1e8a28e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -29,8 +29,19 @@ export const DetourListPage = () => {
       )}
       {detours && (
         <>
-          <DetoursTable data={detours.active} status="active" />
-          <DetoursTable data={detours.draft} status="draft" />
+          <Title title="Active detours" />
+          <DetoursTable
+            data={detours.active}
+            status="active"
+            classNames={["mb-5"]}
+          />
+          <Title title="Draft detours" />
+          <DetoursTable
+            data={detours.draft}
+            status="draft"
+            classNames={["mb-5"]}
+          />
+          <Title title="Closed detours" />
           <DetoursTable data={detours.past} status="closed" />
         </>
       )}
@@ -45,3 +56,7 @@ export const DetourListPage = () => {
     </div>
   )
 }
+
+const Title = ({ title }: { title: string }) => (
+  <h2 className="fw-semibold fs-1 mt-3 mt-md-0 mb-3 mx-3 mx-md-0">{title}</h2>
+)
diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
@@ -4,16 +4,25 @@ import { RoutePill } from "./routePill"
 import { useCurrentTimeSeconds } from "../hooks/useCurrentTime"
 import { timeAgoLabel } from "../util/dateTime"
 import { SimpleDetour } from "../models/detour"
+import { joinClasses } from "../helpers/dom"
 
 type DetoursTableStatus = "draft" | "active" | "closed"
 
 interface DetoursTableProps {
   data: SimpleDetour[] | null
   status: DetoursTableStatus
+  classNames?: string[]
 }
 
-export const DetoursTable = ({ data, status }: DetoursTableProps) => (
-  <Table hover={data !== null} className="c-detours-table">
+export const DetoursTable = ({
+  data,
+  status,
+  classNames = [],
+}: DetoursTableProps) => (
+  <Table
+    hover={data !== null}
+    className={joinClasses([...classNames, "c-detours-table"])}
+  >
     <thead className="u-hide-for-mobile">
       <tr>
         <th className="px-3 py-4">Route and direction</th>

diff --git a/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap
@@ -6,8 +6,13 @@ exports[`DetourListPage renders detour list page 1`] = `
     <div
       class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
     >
+      <h2
+        class="fw-semibold fs-1 mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        Active detours
+      </h2>
       <table
-        class="c-detours-table table table-hover"
+        class="mb-5 c-detours-table table table-hover"
       >
         <thead
           class="u-hide-for-mobile"
@@ -111,8 +116,13 @@ exports[`DetourListPage renders detour list page 1`] = `
           </tr>
         </tbody>
       </table>
+      <h2
+        class="fw-semibold fs-1 mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        Draft detours
+      </h2>
       <table
-        class="c-detours-table table"
+        class="mb-5 c-detours-table table"
       >
         <thead
           class="u-hide-for-mobile"
@@ -177,6 +187,11 @@ exports[`DetourListPage renders detour list page 1`] = `
           </tr>
         </tbody>
       </table>
+      <h2
+        class="fw-semibold fs-1 mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        Closed detours
+      </h2>
       <table
         class="c-detours-table table table-hover"
       >