diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index 604d22ac1..daf544488 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from "react" +import React, { PropsWithChildren, ReactNode } from "react" import { Button, Form } from "react-bootstrap" import * as BsIcons from "../../../helpers/bsIcons" import { Panel } from "../diversionPage" @@ -17,6 +17,7 @@ interface DetourFinishedPanelProps extends PropsWithChildren { missedStops?: Stop[] onChangeDetourText: (value: string) => void onActivateDetour?: () => void + affectedRoute?: ReactNode } export const DetourFinishedPanel = ({ @@ -28,6 +29,7 @@ export const DetourFinishedPanel = ({ onChangeDetourText, onActivateDetour, children, + affectedRoute, }: DetourFinishedPanelProps) => ( @@ -46,14 +48,16 @@ export const DetourFinishedPanel = ({ Edit + {affectedRoute} +

Directions

- {/* + {/* We need a way to let the form area take up exactly the space of its content (to avoid double scrollbars). We used this approach: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas - The result is that the Form.Control has an invisible twin that helps the - wrapper grow to the appropriate size, and then the Form.Control likewise + The result is that the Form.Control has an invisible twin that helps the + wrapper grow to the appropriate size, and then the Form.Control likewise assumes that space. All styles that affect layout must be identical (e.g., `border`, `padding`, `margin`, `font`) between the `` and the `.c-autosized-textarea::after` pseudo-element. diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index 342fb78d8..1f0e736c7 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -30,6 +30,7 @@ import { DeactivateDetourModal } from "./deactivateDetourModal" import useScreenSize from "../../hooks/useScreenSize" import { Drawer } from "../drawer" import { isMobile } from "../../util/screenSize" +import { AffectedRoute } from "./detourPanelComponents" const displayFieldsFromRouteAndPattern = ( route: Route, @@ -270,6 +271,14 @@ export const DiversionPage = ({ } : undefined } + affectedRoute={ + + } > {snapshot.matches({ "Detour Drawing": { diff --git a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx b/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx index 856e43a06..cc47ee111 100644 --- a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx +++ b/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react" import { DetourFinishedPanel } from "../../../src/components/detours/detourPanels/detourFinishedPanel" import React from "react" +import { AffectedRoute } from "../../../src/components/detours/detourPanelComponents" // Copied from Figma const defaultText = [ @@ -41,6 +42,16 @@ const meta = { args: { copyableDetourText: defaultText, editableDirections: turnByTurn, + affectedRoute: ( + <> + + + ), }, // The bootstrap CSS reset is supposed to set box-sizing: border-box by // default, we should be able to remove this after that is added 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 b630c50f1..75670605e 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -456,6 +456,43 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on Edit +
+

+ Affected route +

+
+
+ 2 +
+
+

+ Headsign 2 +

+

+ Route pattern From A2 - To B2 +

+

+ Outbound +

+
+
+

@@ -1270,6 +1307,43 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke Edit +
+

+ Affected route +

+
+
+ 1 +
+
+

+ Headsign 1 +

+

+ Route pattern From A1 - To B1 +

+

+ Outbound +

+
+
+