- {/*
+ {/*
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
+
+