From 1f0122e869d58912005f19e6a415b2b14dcc27da Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Fri, 11 Oct 2024 16:09:04 -0400 Subject: [PATCH 01/13] tweak: add bs icon for copy button --- assets/src/helpers/bsIcons.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx index 782c13e1f..98fd75e2c 100644 --- a/assets/src/helpers/bsIcons.tsx +++ b/assets/src/helpers/bsIcons.tsx @@ -230,6 +230,24 @@ export const ExclamationTriangleFill = (props: SvgProps) => ( ) +/** + * @returns https://icons.getbootstrap.com/icons/files/ + */ +export const Files = (props: SvgProps) => ( + + + +) + /** * @returns https://icons.getbootstrap.com/icons/gear-fill/ */ From 9a97b3f54972667aeb22bad636d199b0fc890c96 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Fri, 11 Oct 2024 16:09:36 -0400 Subject: [PATCH 02/13] tweak: new user group so I can style the copybutton without setting up the logic yet --- assets/src/userInTestGroup.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/src/userInTestGroup.ts b/assets/src/userInTestGroup.ts index eeab87498..762e839ab 100644 --- a/assets/src/userInTestGroup.ts +++ b/assets/src/userInTestGroup.ts @@ -7,6 +7,7 @@ export enum TestGroups { DetoursPilot = "detours-pilot", MinimalLadderPage = "minimal-ladder-page", LateView = "late-view", + CopyButton = "copy-button" } const inTestGroup = (key: TestGroups): boolean => { From 0d6241b5ae904617c82e7f4dd890ab27702a6baf Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Fri, 11 Oct 2024 16:10:26 -0400 Subject: [PATCH 03/13] tweak: move copybutton to detourPanelComponents --- .../detours/detourPanelComponents.tsx | 32 ++++++++++++++++++- .../detourPanels/detourFinishedPanel.tsx | 22 ++----------- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/assets/src/components/detours/detourPanelComponents.tsx b/assets/src/components/detours/detourPanelComponents.tsx index accd3ff45..757d075bb 100644 --- a/assets/src/components/detours/detourPanelComponents.tsx +++ b/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[] @@ -61,3 +68,26 @@ export const AffectedRoute = ({ ) + +export const CopyButton = ({ detourText }: { detourText: string }) => ( + + Copied to clipboard! + + } + > + + +) diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index 112399934..fdaca327f 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/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 @@ -20,6 +21,7 @@ export const DetourFinishedPanel = ({

Share Detour Details

+ @@ -45,24 +47,6 @@ export const DetourFinishedPanel = ({ - - Copied to clipboard! - - } - > - - {onActivateDetour && (
- -
+ />
@@ -1187,6 +1199,25 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke > Share Detour Details +
- -
+ />
From 31bdf2806d7efc1b41de26379eb65b137be5f3fe Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Tue, 15 Oct 2024 15:45:39 -0400 Subject: [PATCH 06/13] tweak: formatting + story updates --- .../detourPanels/activeDetourPanel.tsx | 4 +++- .../detours/detourPanels/pastDetourPanel.tsx | 4 +++- assets/src/userInTestGroup.ts | 2 +- .../detours/activeDetourPanel.stories.tsx | 24 +++++++++++++++++++ .../detours/pastDetourPanel.stories.tsx | 24 +++++++++++++++++++ 5 files changed, 55 insertions(+), 3 deletions(-) diff --git a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx index fce96b50a..94e6de7e6 100644 --- a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx +++ b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx @@ -60,7 +60,9 @@ export const ActiveDetourPanel = ({ {backButton} {/* TODO: temporary test group until I get the copy logic hooked up */} - { inTestGroup(TestGroups.CopyButton) && } + {inTestGroup(TestGroups.CopyButton) && ( + + )} diff --git a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx index 05cab4ddf..8a6df7286 100644 --- a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx +++ b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx @@ -38,7 +38,9 @@ export const PastDetourPanel = ({

View Past Detour

{/* TODO: temporary test group until I get the copy logic hooked up */} - { inTestGroup(TestGroups.CopyButton) && } + {inTestGroup(TestGroups.CopyButton) && ( + + )} diff --git a/assets/src/userInTestGroup.ts b/assets/src/userInTestGroup.ts index 762e839ab..73bbe7e14 100644 --- a/assets/src/userInTestGroup.ts +++ b/assets/src/userInTestGroup.ts @@ -7,7 +7,7 @@ export enum TestGroups { DetoursPilot = "detours-pilot", MinimalLadderPage = "minimal-ladder-page", LateView = "late-view", - CopyButton = "copy-button" + CopyButton = "copy-button", } const inTestGroup = (key: TestGroups): boolean => { diff --git a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx index 996812cf3..c539027e6 100644 --- a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx +++ b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx @@ -4,6 +4,29 @@ 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: { @@ -11,6 +34,7 @@ const meta = { stretch: true, }, args: { + detourText: defaulText, directions: [ { instruction: "Start at Centre St & John St" }, { instruction: "Right on John St" }, diff --git a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx index 3ca77433a..a5954b716 100644 --- a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx +++ b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx @@ -4,6 +4,29 @@ 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: { @@ -11,6 +34,7 @@ const meta = { stretch: true, }, args: { + detourText: defaulText, directions: [ { instruction: "Start at Centre St & John St" }, { instruction: "Right on John St" }, From 07026325fc57ca1f94e976fba5a7c909e336033c Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 16 Oct 2024 09:28:12 -0400 Subject: [PATCH 07/13] tweak: Share Details panel needed styling adjustment --- .../components/detours/detourPanels/detourFinishedPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index fdaca327f..a1b9e4047 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -18,8 +18,8 @@ export const DetourFinishedPanel = ({ onActivateDetour, children, }: DetourFinishedPanelProps) => ( - - + +

Share Detour Details

 From e7431c2f44ea0164c186007a48d739c6672ebfe7 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 16 Oct 2024 12:11:16 -0400 Subject: [PATCH 08/13] tweak: snapshot update --- .../detoursListPage.openDetour.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap index 9fecd0c96..b5ca812a8 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -397,10 +397,10 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on

Date: Wed, 16 Oct 2024 12:31:03 -0400 Subject: [PATCH 09/13] tweak: copy fix --- assets/src/components/detours/detourPanelComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/components/detours/detourPanelComponents.tsx b/assets/src/components/detours/detourPanelComponents.tsx index 757d075bb..e303c9269 100644 --- a/assets/src/components/detours/detourPanelComponents.tsx +++ b/assets/src/components/detours/detourPanelComponents.tsx @@ -87,7 +87,7 @@ export const CopyButton = ({ detourText }: { detourText: string }) => ( onClick={() => window.navigator.clipboard?.writeText(detourText)} > - Copy Details + Copy details ) From 30cd45e8c16771ce4071a8e3768b69620386cd7c Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 16 Oct 2024 12:31:09 -0400 Subject: [PATCH 10/13] tweak: styling fix --- assets/css/_diversion_page.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss index f718f76b9..2af054498 100644 --- a/assets/css/_diversion_page.scss +++ b/assets/css/_diversion_page.scss @@ -169,6 +169,8 @@ .c-diversion-panel__outline-button { height: 2rem; border-radius: 0.2rem; + font-size: 0.875rem; + padding: 0.375rem .5rem; &--copy { margin: 0.78125rem 0; From 63bbf4078c20f363072145166c084905c91127b8 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 16 Oct 2024 12:43:28 -0400 Subject: [PATCH 11/13] tweak: format --- assets/css/_diversion_page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss index 2af054498..0990e19f2 100644 --- a/assets/css/_diversion_page.scss +++ b/assets/css/_diversion_page.scss @@ -170,7 +170,7 @@ height: 2rem; border-radius: 0.2rem; font-size: 0.875rem; - padding: 0.375rem .5rem; + padding: 0.375rem 0.5rem; &--copy { margin: 0.78125rem 0; From 986752b22f72606f1457ac2b3f7d111b6ae1fbd4 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 16 Oct 2024 14:27:46 -0400 Subject: [PATCH 12/13] tweak: snapshot update... another --- .../__snapshots__/detoursListPage.openDetour.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap index b5ca812a8..1b811b5db 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -424,7 +424,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on 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" /> - Copy Details + Copy details

- Copy Details + Copy details

Date: Wed, 16 Oct 2024 14:46:53 -0400 Subject: [PATCH 13/13] tweak: test typo --- assets/tests/components/detours/diversionPage.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx index 986778ce4..92719dd57 100644 --- a/assets/tests/components/detours/diversionPage.test.tsx +++ b/assets/tests/components/detours/diversionPage.test.tsx @@ -1234,7 +1234,7 @@ describe("DiversionPage", () => { await userEvent.click(reviewDetourButton.get()) - expect(screen.getByRole("button", { name: "Copy Details" })).toBeVisible() + expect(screen.getByRole("button", { name: "Copy details" })).toBeVisible() }) test("'Share Detour Details' screen copies text content to clipboard when clicked copy details button", async () => { @@ -1300,7 +1300,7 @@ describe("DiversionPage", () => { await userEvent.click(reviewDetourButton.get()) - await userEvent.click(screen.getByRole("button", { name: "Copy Details" })) + await userEvent.click(screen.getByRole("button", { name: "Copy details" })) await waitFor(() => expect(window.navigator.clipboard.readText()).resolves.toBe(