Made PrintableItinerary use a headingAs

Author: nikkisato

packages/itinerary-body/src/defaults/access-leg-description.tsx

@@ -10,9 +10,10 @@ import Distance from "./default-distance";
 
 const { ensureAtLeastOneMinute, toHoursMinutesSeconds } = coreUtils.time;
 
-interface Props extends HTMLAttributes<HTMLSpanElement> {
+interface Props extends HTMLAttributes<HTMLElement> {
   config: Config;
   leg: Leg;
+  headingAs?: React.ElementType;
 }
 
 /**
@@ -75,7 +76,8 @@ export default function AccessLegDescription({
   className,
   config,
   leg,
-  style
+  style,
+  headingAs
 }: Props): ReactElement {
   const intl = useIntl();
   const { companies, formatDuration, units } = config;
@@ -98,10 +100,15 @@ export default function AccessLegDescription({
   // TODO: is this causing issues with TNC legs? Do walk legs leading to a TNC
   // trip really have the same `to.stopId` as `from.stopId`?
   const isTransferLeg = to.stopId === from.stopId;
+
   return (
     // Return an HTML element which is passed a className (and style props)
     // for styled-components support.
-    <span className={className} style={style}>
+    <S.AccessLegDescriptionHeading
+      as={headingAs ?? "span"}
+      className={className}
+      style={style}
+    >
       {distance > 0 ? (
         <FormattedMessage
           defaultMessage="{mode} {distance} to {place}"
@@ -147,6 +154,6 @@ export default function AccessLegDescription({
           }}
         />
       )}
-    </span>
+    </S.AccessLegDescriptionHeading>
   );
 }

packages/itinerary-body/src/stories/__snapshots__/OtpRrItineraryBody.story.tsx.snap

@@ -280,6 +280,10 @@ export const ItineraryBody = styled.ol`
   padding: 0;
 `;
 
+export const AccessLegDescriptionHeading = styled.span`
+  margin: 0;
+`;
+
 export const LegBody = styled.div`
   color: #676767;
   font-size: 13px;