fix(StopPageHeader): improve mode and accessibility icons (#2164)

assets/ts/stop/__tests__/components/icons/AccessibilityIconTest.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Route, Stop } from "../../../../__v3api";
+import { Stop } from "../../../../__v3api";
 import AccessibilityIcon from "../../../components/icons/AccessibilityIcon";
 
 describe("AccessibilityIcon", () => {
   it("should return an empty element for non accessilbe stops", () => {
-    const stop = { accessibility: ["none"] };
+    const stop = ({ accessibility: [] } as unknown) as Stop;
     render(
       <div data-testid="empty">
-        <AccessibilityIcon stop={stop as Stop} routes={[]} />
+        <AccessibilityIcon stop={stop} />
       </div>
     );
     expect(screen.getByTestId("empty")).toBeEmptyDOMElement();
@@ -18,18 +18,7 @@ describe("AccessibilityIcon", () => {
     const stop = { accessibility: ["accessible"] };
     render(
       <div data-testid="empty">
-        <AccessibilityIcon stop={stop as Stop} routes={[]} />
-      </div>
-    );
-    expect(screen.getByTestId("empty")).not.toBeEmptyDOMElement();
-  });
-
-  it("should return an icon for a bus stop", () => {
-    const stop = { accessibility: ["none"] };
-    const routes = [{ type: 3 }];
-    render(
-      <div data-testid="empty">
-        <AccessibilityIcon stop={stop as Stop} routes={routes as Route[]} />
+        <AccessibilityIcon stop={stop as Stop} />
       </div>
     );
     expect(screen.getByTestId("empty")).not.toBeEmptyDOMElement();

assets/ts/stop/components/icons/AccessibilityIcon.tsx

@@ -1,23 +1,13 @@
 import React, { ReactElement } from "react";
-import { some } from "lodash";
-import { Route, Stop } from "../../../__v3api";
+import { Stop } from "../../../__v3api";
 import { accessibleIcon } from "../../../helpers/icon";
-import { isABusRoute } from "../../../models/route";
 
 const AccessibilityIcon = ({
-  stop,
-  routes
+  stop
 }: {
   stop: Stop;
-  routes: Route[];
-}): ReactElement<HTMLElement> => {
-  // NOTE: Bus stops are always considered accessible, see
-  // https://app.asana.com/0/1201653980996886/1201894234147725/f
-  const isBusStop = some(routes, r => isABusRoute(r));
-  if (!isBusStop && !stop.accessibility.includes("accessible")) {
-    return <></>;
-  }
-
+}): ReactElement<HTMLElement> | null => {
+  if (stop.accessibility.length === 0) return null;
   return (
     <div className="m-stop-page__access-icon">
       <span className="m-stop-page__icon">

assets/ts/stop/components/icons/StopFeatures.tsx

@@ -14,9 +14,13 @@ const StopFeatures = ({
 }): ReactElement<HTMLElement> => {
   return (
     <span className="m-stop-page__header-features mb-6">
-      <ModeIcons routes={routes} />
+      <ModeIcons
+        routes={routes.filter(
+          route => route.description !== "rail_replacement_bus"
+        )}
+      />
       <CommuterRailZoneIcon zoneNumber={stop.zone} />
-      <AccessibilityIcon stop={stop} routes={routes} />
+      <AccessibilityIcon stop={stop} />
       <ParkingIcon stop={stop} />
     </span>
   );