From 3e061f5068edd08206bccc2db537d4b045add9d4 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Tue, 10 Sep 2024 18:36:06 -0400 Subject: [PATCH] feat: Add icons and visibility descriptions to detour table headers --- assets/css/_detour_list_page.scss | 7 ++ assets/src/components/detourListPage.tsx | 36 ++++++-- assets/src/helpers/bsIcons.tsx | 56 +++++++++++- .../detourListPage.test.tsx.snap | 90 ++++++++++++++++--- 4 files changed, 170 insertions(+), 19 deletions(-) diff --git a/assets/css/_detour_list_page.scss b/assets/css/_detour_list_page.scss index be55053d5..55d328b62 100644 --- 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 index 7a7045ea9..2194e102e 100644 --- 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" + 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 index 623ad55b3..9389fff76 100644 --- 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 index 6edeea2ed..5984e57be 100644 --- 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" >