Refactor ItineraryBody so it can be formatted like the original ItineraryBody in otp-react-redux

packages/itinerary-body/src/AccessLegBody/access-leg-steps.js

@@ -0,0 +1,39 @@
+import {
+  getStepDirection,
+  getStepStreetName
+} from "@opentripplanner/core-utils/lib/itinerary";
+import { stepsType } from "@opentripplanner/core-utils/lib/types";
+import { DirectionIcon } from "@opentripplanner/icons/lib/directions";
+import React from "react";
+
+import * as Styled from "../styled";
+
+export default function AccessLegSteps({ steps }) {
+  return (
+    <Styled.Steps>
+      {steps.map((step, k) => {
+        return (
+          <Styled.StepRow key={k}>
+            <Styled.StepIconContainer>
+              <DirectionIcon relativeDirection={step.relativeDirection} />
+            </Styled.StepIconContainer>
+
+            <Styled.StepDescriptionContainer>
+              {getStepDirection(step)}
+              <span>
+                {step.relativeDirection === "ELEVATOR" ? " to " : " on "}
+              </span>
+              <Styled.StepStreetName>
+                {getStepStreetName(step)}
+              </Styled.StepStreetName>
+            </Styled.StepDescriptionContainer>
+          </Styled.StepRow>
+        );
+      })}
+    </Styled.Steps>
+  );
+}
+
+AccessLegSteps.propTypes = {
+  steps: stepsType.isRequired
+};

packages/itinerary-body/src/AccessLegBody/access-leg-summary.js

@@ -0,0 +1,45 @@
+import {
+  getLegModeLabel,
+  getPlaceName
+} from "@opentripplanner/core-utils/lib/itinerary";
+import { configType, legType } from "@opentripplanner/core-utils/lib/types";
+import { humanizeDistanceString } from "@opentripplanner/humanize-distance";
+import React from "react";
+import PropTypes from "prop-types";
+
+import * as Styled from "../styled";
+
+export default function AccessLegSummary({
+  config,
+  leg,
+  LegIcon,
+  onSummaryClick,
+  showLegIcon
+}) {
+  return (
+    <Styled.LegClickable onClick={onSummaryClick}>
+      {showLegIcon && (
+        <Styled.LegIconContainer>
+          <LegIcon leg={leg} />
+        </Styled.LegIconContainer>
+      )}
+
+      {/* Leg description, e.g. "Walk 0.5 mi to..." */}
+      <Styled.LegDescription>
+        {getLegModeLabel(leg)}{" "}
+        {leg.distance > 0 && (
+          <span> {humanizeDistanceString(leg.distance)}</span>
+        )}
+        {` to ${getPlaceName(leg.to, config.companies)}`}
+      </Styled.LegDescription>
+    </Styled.LegClickable>
+  );
+}
+
+AccessLegSummary.propTypes = {
+  config: configType.isRequired,
+  leg: legType.isRequired,
+  LegIcon: PropTypes.elementType.isRequired,
+  onSummaryClick: PropTypes.func.isRequired,
+  showLegIcon: PropTypes.bool.isRequired
+};