feat: Move and style copyButton, add to active and past detour views

assets/css/_diversion_page.scss

@@ -44,10 +44,14 @@
     .l-diversion-page__header {
       border-bottom: none;
     }
+
+    .l-diversion-page-panel__header {
+      align-items: center;
+    }
+
     .c-diversion-panel__header_text,
     .c-detour-panel__subheader,
-    .c-diversion-panel__back-button-container,
-    .c-active-detour__alert-icon {
+    .c-diversion-panel__desktop-buttons {
       display: none !important;
     }
   }
@@ -89,7 +93,7 @@
       }
     }
 
-    .l-diversion-page-panel__header .c-diversion-panel__back-button {
+    .l-diversion-page-panel__header .c-diversion-panel__outline-button--back {
       display: none;
     }
   }
@@ -161,3 +165,14 @@
   height: 1.5rem;
   width: 1.5rem;
 }
+
+.c-diversion-panel__outline-button {
+  height: 2rem;
+  border-radius: 0.2rem;
+  font-size: 0.875rem;
+  padding: 0.375rem 0.5rem;
+
+  &--copy {
+    margin: 0.78125rem 0;
+  }
+}

assets/src/components/detours/detourPanelComponents.tsx

@@ -1,8 +1,15 @@
 import React from "react"
 import { Stop } from "../../schedule"
-import { Badge, ListGroup } from "react-bootstrap"
+import {
+  Badge,
+  Button,
+  ListGroup,
+  OverlayTrigger,
+  Popover,
+} from "react-bootstrap"
 import { uniqBy } from "../../helpers/array"
 import { RoutePill } from "../routePill"
+import { Files } from "../../helpers/bsIcons"
 
 interface MissedStopsProps {
   missedStops?: Stop[]
@@ -64,3 +71,26 @@ export const AffectedRoute = ({
     </div>
   </section>
 )
+
+export const CopyButton = ({ detourText }: { detourText: string }) => (
+  <OverlayTrigger
+    placement="bottom"
+    trigger="click"
+    rootClose
+    rootCloseEvent="mousedown"
+    overlay={
+      <Popover>
+        <Popover.Body>Copied to clipboard!</Popover.Body>
+      </Popover>
+    }
+  >
+    <Button
+      className="c-diversion-panel__outline-button c-diversion-panel__outline-button--copy icon-link"
+      variant="outline-primary"
+      onClick={() => window.navigator.clipboard?.writeText(detourText)}
+    >
+      <Files />
+      Copy details
+    </Button>
+  </OverlayTrigger>
+)

assets/src/components/detours/detourPanels/activeDetourPanel.tsx

@@ -8,9 +8,15 @@ import {
   ExclamationTriangleFill,
   StopCircle,
 } from "../../../helpers/bsIcons"
-import { AffectedRoute, MissedStops } from "../detourPanelComponents"
+import {
+  AffectedRoute,
+  CopyButton,
+  MissedStops,
+} from "../detourPanelComponents"
+import inTestGroup, { TestGroups } from "../../../userInTestGroup"
 
 export interface ActiveDetourPanelProps extends PropsWithChildren {
+  detourText: string
   directions?: DetourDirection[]
   connectionPoints?: string[]
   missedStops?: Stop[]
@@ -23,6 +29,7 @@ export interface ActiveDetourPanelProps extends PropsWithChildren {
 }
 
 export const ActiveDetourPanel = ({
+  detourText,
   directions,
   connectionPoints,
   missedStops,
@@ -36,7 +43,7 @@ export const ActiveDetourPanel = ({
 }: ActiveDetourPanelProps) => {
   const backButton = (
     <Button
-      className="c-diversion-panel__back-button icon-link my-3"
+      className="c-diversion-panel__outline-button c-diversion-panel__outline-button--back icon-link my-3"
       variant="outline-primary"
       onClick={onNavigateBack}
     >
@@ -52,11 +59,15 @@ export const ActiveDetourPanel = ({
           Active Detour
         </h1>
         {backButton}
+        {/* TODO: temporary test group until I get the copy logic hooked up */}
+        {inTestGroup(TestGroups.CopyButton) && (
+          <CopyButton detourText={detourText} />
+        )}
       </Panel.Header>
 
       <Panel.Body className="d-flex flex-column">
         <Panel.Body.ScrollArea>
-          <div className="d-flex c-diversion-panel__back-button-container justify-content-between align-items-center">
+          <div className="d-flex c-diversion-panel__desktop-buttons justify-content-between align-items-center">
             {backButton}
             <ExclamationTriangleFill className="c-active-detour__alert-icon" />
           </div>

assets/src/components/detours/detourPanels/detourFinishedPanel.tsx

@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from "react"
-import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap"
+import { Button, Form } from "react-bootstrap"
 import * as BsIcons from "../../../helpers/bsIcons"
 import { Panel } from "../diversionPage"
+import { CopyButton } from "../detourPanelComponents"
 
 interface DetourFinishedPanelProps extends PropsWithChildren {
   onNavigateBack: () => void
@@ -17,9 +18,10 @@ export const DetourFinishedPanel = ({
   onActivateDetour,
   children,
 }: DetourFinishedPanelProps) => (
-  <Panel as="article">
-    <Panel.Header className="">
+  <Panel as="article" className="c-diversion-panel">
+    <Panel.Header className="d-inline-flex justify-content-between">
       <h1 className="c-diversion-panel__h1 my-3">View Draft Detour</h1>
+      <CopyButton detourText={detourText} />
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
@@ -45,24 +47,6 @@ export const DetourFinishedPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer className="d-flex flex-column">
-        <OverlayTrigger
-          placement="top"
-          trigger="click"
-          rootClose
-          rootCloseEvent="mousedown"
-          overlay={
-            <Popover>
-              <Popover.Body>Copied to clipboard!</Popover.Body>
-            </Popover>
-          }
-        >
-          <Button
-            className="m-3 flex-grow-1"
-            onClick={() => window.navigator.clipboard?.writeText(detourText)}
-          >
-            Copy Details
-          </Button>
-        </OverlayTrigger>
         {onActivateDetour && (
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"

assets/src/components/detours/detourPanels/pastDetourPanel.tsx

@@ -4,9 +4,15 @@ import { DetourDirection } from "../../../models/detour"
 import { Stop } from "../../../schedule"
 import { ArrowLeft } from "../../../helpers/bsIcons"
 import { Button, ListGroup } from "react-bootstrap"
-import { AffectedRoute, MissedStops } from "../detourPanelComponents"
+import {
+  AffectedRoute,
+  CopyButton,
+  MissedStops,
+} from "../detourPanelComponents"
+import inTestGroup, { TestGroups } from "../../../userInTestGroup"
 
 export interface PastDetourPanelProps {
+  detourText: string
   directions?: DetourDirection[]
   connectionPoints: [string, string]
   missedStops?: Stop[]
@@ -18,6 +24,7 @@ export interface PastDetourPanelProps {
 }
 
 export const PastDetourPanel = ({
+  detourText,
   directions,
   connectionPoints: [connectionPointStart, connectionPointEnd],
   missedStops,
@@ -30,6 +37,10 @@ export const PastDetourPanel = ({
   <Panel as="article">
     <Panel.Header className="">
       <h1 className="c-diversion-panel__h1 my-3">View Past Detour</h1>
+      {/* TODO: temporary test group until I get the copy logic hooked up */}
+      {inTestGroup(TestGroups.CopyButton) && (
+        <CopyButton detourText={detourText} />
+      )}
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">

assets/src/components/detours/diversionPage.tsx

@@ -339,6 +339,7 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Active" })) {
       return (
         <ActiveDetourPanel
+          detourText="Hello World"
           directions={extendedDirections}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",
@@ -379,6 +380,7 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Past" })) {
       return (
         <PastDetourPanel
+          detourText="Hello World"
           directions={extendedDirections}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",

assets/src/helpers/bsIcons.tsx

@@ -267,6 +267,24 @@ export const ExclamationTriangleFill = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/files/
+ */
+export const Files = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-files"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1M3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/gear-fill/
  */

assets/src/userInTestGroup.ts

@@ -8,6 +8,7 @@ export enum TestGroups {
   DetoursPilot = "detours-pilot",
   MinimalLadderPage = "minimal-ladder-page",
   LateView = "late-view",
+  CopyButton = "copy-button",
 }
 
 const inTestGroup = (key: TestGroups): boolean => {

assets/stories/skate-components/detours/activeDetourPanel.stories.tsx

@@ -4,13 +4,37 @@ import React from "react"
 import { ActiveDetourPanel } from "../../../src/components/detours/detourPanels/activeDetourPanel"
 import { stopFactory } from "../../../tests/factories/stop"
 
+const defaulText = [
+  "Detour:",
+  "66 Harvard via Allston from",
+  "Andrew Station",
+  "Outbound",
+  "",
+  "Turn-by-Turn Directions:",
+  "Start at Centre St & John St",
+  "Right on John St",
+  "Left on Abbotsford Rd",
+  "Right on Boston St",
+  "Regular Route",
+  "",
+  "Connection Points:",
+  "Centre St & John St",
+  "Boston St",
+  "",
+  "Missed Stops (3):",
+  "Example St @ Sample Ave",
+  "Example St opp Random Way",
+  "Example St @ Fake Blvd",
+].join("\n")
+
 const meta = {
   component: ActiveDetourPanel,
   parameters: {
     layout: "fullscreen",
     stretch: true,
   },
   args: {
+    detourText: defaulText,
     directions: [
       { instruction: "Start at Centre St & John St" },
       { instruction: "Right on John St" },

assets/stories/skate-components/detours/pastDetourPanel.stories.tsx

@@ -4,13 +4,37 @@ import React from "react"
 import { PastDetourPanel } from "../../../src/components/detours/detourPanels/pastDetourPanel"
 import { stopFactory } from "../../../tests/factories/stop"
 
+const defaulText = [
+  "Detour:",
+  "66 Harvard via Allston from",
+  "Andrew Station",
+  "Outbound",
+  "",
+  "Turn-by-Turn Directions:",
+  "Start at Centre St & John St",
+  "Right on John St",
+  "Left on Abbotsford Rd",
+  "Right on Boston St",
+  "Regular Route",
+  "",
+  "Connection Points:",
+  "Centre St & John St",
+  "Boston St",
+  "",
+  "Missed Stops (3):",
+  "Example St @ Sample Ave",
+  "Example St opp Random Way",
+  "Example St @ Fake Blvd",
+].join("\n")
+
 const meta = {
   component: PastDetourPanel,
   parameters: {
     layout: "fullscreen",
     stretch: true,
   },
   args: {
+    detourText: defaulText,
     directions: [
       { instruction: "Start at Centre St & John St" },
       { instruction: "Right on John St" },