feat: Add icons and visibility descriptions to detour table headers

mbta · Sep 19, 2024 · 3e061f5 · 3e061f5
1 parent 64f21bd
commit 3e061f5
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 19 deletions.
diff --git a/assets/css/_detour_list_page.scss b/assets/css/_detour_list_page.scss
@@ -1,3 +1,5 @@
+@use "./color/tokens_2021" as old_tokens;
+
 .c-detour-list-page {
   box-sizing: border-box;
 
@@ -9,3 +11,8 @@
 .c-detour-list-page__button-text {
   font-size: 1.25rem;
 }
+
+.c-detour-list-page__header-visibility,
+.c-detour-list-page__header-icon {
+  color: old_tokens.$gray-500;
+}
diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -2,7 +2,13 @@ import React, { useCallback, useState } from "react"
 import { DetoursTable, DetourStatus } from "./detoursTable"
 import userInTestGroup, { TestGroups } from "../userInTestGroup"
 import { Button } from "react-bootstrap"
-import { PlusSquare } from "../helpers/bsIcons"
+import {
+  GlobeAmericas,
+  LockFill,
+  PeopleFill,
+  PlusSquare,
+  SvgProps,
+} from "../helpers/bsIcons"
 import { DetourModal } from "./detours/detourModal"
 import { fetchDetours } from "../api"
 import { useApiCall } from "../hooks/useApiCall"
@@ -29,19 +35,27 @@ export const DetourListPage = () => {
       )}
       {detours && (
         <>
-          <Title title="Active detours" />
+          <Title
+            title="Active detours"
+            icon={GlobeAmericas}
+            visibility="All Skate users"
+          />
           <DetoursTable
             data={detours.active}
             status={DetourStatus.Active}
             classNames={["mb-5"]}
           />
-          <Title title="Draft detours" />
+          <Title title="Draft detours" icon={LockFill} visibility="Only you" />
           <DetoursTable
             data={detours.draft}
             status={DetourStatus.Draft}
             classNames={["mb-5"]}
           />
-          <Title title="Closed detours" />
+          <Title
+            title="Closed detours"
+            icon={PeopleFill}
+            visibility="Dispatchers and supervisors"
+          />
           <DetoursTable data={detours.past} status={DetourStatus.Closed} />
         </>
       )}
@@ -57,6 +71,16 @@ export const DetourListPage = () => {
   )
 }
 
-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>
+const Title = (args: {
+  title: string
+  icon: (props: SvgProps) => React.JSX.Element
+  visibility: string
+}) => (
+  <div className="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0">
+    <h2 className="my-auto fw-semibold fs-1 me-3 text-nowrap">{args.title}</h2>
+    <args.icon className="c-detour-list-page__header-icon my-auto me-1" />
+    <span className="c-detour-list-page__header-visibility my-auto">
+      {args.visibility}
+    </span>
+  </div>
 )
diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
@@ -17,7 +17,7 @@ import React, { ComponentPropsWithoutRef } from "react"
  *  6. Add a doc comment with a link to the icon
  */
 
-type SvgProps = ComponentPropsWithoutRef<"svg">
+export type SvgProps = ComponentPropsWithoutRef<"svg">
 
 /**
  * @returns https://icons.getbootstrap.com/icons/arrow-clockwise/
@@ -248,6 +248,60 @@ export const GearFill = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/globe-americas/
+ */
+export const GlobeAmericas = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-globe-americas"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z" />
+  </svg>
+)
+
+/**
+ * @returns https://icons.getbootstrap.com/icons/lock-fill/
+ */
+export const LockFill = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-lock-fill"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2" />
+  </svg>
+)
+
+/**
+ * @returns https://icons.getbootstrap.com/icons/people-fill/
+ */
+export const PeopleFill = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-people-fill"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/plus-square/
  */

diff --git a/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap
@@ -6,11 +6,33 @@ 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"
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
       >
-        Active detours
-      </h2>
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Active detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          All Skate users
+        </span>
+      </div>
       <table
         class="mb-5 c-detours-table table table-hover"
       >
@@ -116,11 +138,33 @@ 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"
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
       >
-        Draft detours
-      </h2>
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Draft detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Only you
+        </span>
+      </div>
       <table
         class="mb-5 c-detours-table table"
       >
@@ -187,11 +231,33 @@ 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"
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
       >
-        Closed detours
-      </h2>
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Closed detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Dispatchers and supervisors
+        </span>
+      </div>
       <table
         class="c-detours-table table table-hover"
       >