diff --git a/assets/css/_route_ladder.scss b/assets/css/_route_ladder.scss index e763ebe58..2b5d97ca1 100644 --- a/assets/css/_route_ladder.scss +++ b/assets/css/_route_ladder.scss @@ -49,14 +49,16 @@ .card-body { display: inline-grid; - grid-template-columns: 1fr 1fr auto 1fr 1fr; - padding: 6px 8px; + padding: 0; align-items: center; } - .c-route-ladder__dropdown-button { - height: 2.25rem; - width: 2.25rem; + .c-new-route-ladder__fake-dropdown { + height: 36px; + width: 36px; + border-radius: 4px; + background-color: $color-eggplant-500; + margin: 6px 8px; } .c-route-ladder__alert-icon { @@ -80,7 +82,8 @@ .c-route-ladder__close-button-container { grid-column: 5/6; - margin: 2px 0 2px auto; + margin-right: 8px; + margin-left: auto; } } diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx index abd105f53..9d9ca7de6 100644 --- a/assets/src/components/routeLadder.tsx +++ b/assets/src/components/routeLadder.tsx @@ -29,9 +29,9 @@ import { CloseButton as OldCloseButton } from "./closeButton" import Tippy from "@tippyjs/react" import { tagManagerEvent } from "../helpers/googleTagManager" import inTestGroup, { TestGroups } from "../userInTestGroup" -import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons" +import { ExclamationTriangleFill } from "../helpers/bsIcons" import { RoutePill } from "./routePill" -import { Card, CloseButton, Dropdown } from "react-bootstrap" +import { Card, CloseButton } from "react-bootstrap" interface Props { route: Route @@ -91,17 +91,7 @@ export const NewHeader = ({ return ( - {inTestGroup(TestGroups.DetoursPilot) && ( - - - - - - Add detour - - - - )} +
{hasAlert && ( `; -exports[`routeLadder renders a route ladder with the new header and detour dropdown 1`] = ` +exports[`routeLadder renders a route ladder with the new header format 1`] = `
-
- 28 -
-
-
-
-
-
- -
-
- - - - - - - MATPN - - - - - WELLH - - - - - MORTN - - -
-
-
-`; - -exports[`routeLadder renders a route ladder with the new header format 1`] = ` -
-
-
diff --git a/assets/tests/components/routeLadder.test.tsx b/assets/tests/components/routeLadder.test.tsx index 052f19e2b..c10219b98 100644 --- a/assets/tests/components/routeLadder.test.tsx +++ b/assets/tests/components/routeLadder.test.tsx @@ -27,7 +27,6 @@ import { tagManagerEvent } from "../../src/helpers/googleTagManager" import { routeAlert } from "../testHelpers/selectors/components/routeLadder" import { mockUsePanelState } from "../testHelpers/usePanelStateMocks" import getTestGroups from "../../src/userTestGroups" -import { TestGroups } from "../../src/userInTestGroup" jest.mock("../../src/hooks/usePanelState") @@ -226,42 +225,6 @@ describe("routeLadder", () => { expect(tree).toMatchSnapshot() }) - test("renders a route ladder with the new header and detour dropdown", () => { - jest - .mocked(getTestGroups) - .mockReturnValue([ - TestGroups.RouteLadderHeaderUpdate, - TestGroups.DetoursPilot, - ]) - - const route: Route = routeFactory.build({ - id: "28", - name: "28", - }) - const timepoints = [ - { id: "MATPN", name: "MATPN Name" }, - { id: "WELLH", name: "WELLH Name" }, - { id: "MORTN", name: "MORTN Name" }, - ] - - const { container: tree } = render( - {}} - reverseLadder={() => {}} - toggleCrowding={() => {}} - ladderDirections={{}} - ladderCrowdingToggles={{}} - hasAlert={false} - /> - ) - - expect(tree).toMatchSnapshot() - }) - test("renders a route ladder with vehicles", () => { const route: Route = routeFactory.build({ id: "28",