refactor(itinerary-body): nest header sequence inside PlaceHeader instead of separate grid area

Author: noeltrimet

packages/itinerary-body/src/ItineraryBody/place-row.tsx

@@ -146,7 +146,6 @@ export default function PlaceRow({
     <S.PlaceRowWrapper
       $showTimeColumn={showTimeColumn}
       $shouldShowAlightStep={shouldShowAlightStep}
-      $showHeaderSequence={showHeaderSequence}
       $isDestination={isDestination}
       $isLastLeg={isLastLeg && !isDestination}
       className={`place-row-wrapper ${leg.transitLeg ? "transit" : ""} ${
@@ -166,17 +165,15 @@ export default function PlaceRow({
           toRouteAbbreviation={toRouteAbbreviation}
         />
       </S.LineColumn>
-      {shouldShowHeaderInOwnRow && (
-        <S.PlaceHeaderSequence>
+      <S.PlaceHeader $showTimeColumn={showTimeColumn}>
+        {shouldShowHeaderInOwnRow && (
           <HeaderSequenceContent
             config={config}
             isDestination={isDestination}
             leg={leg}
             legIndex={legIndex}
           />
-        </S.PlaceHeaderSequence>
-      )}
-      <S.PlaceHeader $showTimeColumn={showTimeColumn}>
+        )}
         <S.PlaceName aria-hidden className="place-row-place-name">
           {placeName}
         </S.PlaceName>

packages/itinerary-body/src/styled.tsx

@@ -453,7 +453,6 @@ export const LegDetails = styled.span`
 interface PlaceRowWrapperProps {
   $showTimeColumn: boolean;
   $shouldShowAlightStep: boolean;
-  $showHeaderSequence: boolean;
   $isDestination: boolean;
   $isLastLeg?: boolean;
 }
@@ -463,7 +462,6 @@ interface PlaceRowWrapperProps {
  */
 function getGridTemplateAreas(
   showTimeColumn: boolean,
-  showHeaderSequence: boolean,
   isDestination: boolean
 ): string {
   if (isDestination && showTimeColumn) {
@@ -472,16 +470,6 @@ function getGridTemplateAreas(
   if (isDestination) {
     return `"line title"`;
   }
-  if (showHeaderSequence && !showTimeColumn) {
-    return `"line header"
-            "line title"
-            "line instructions"`;
-  }
-  if (showHeaderSequence && showTimeColumn) {
-    return `"time line header"
-            "time line title"
-            "time line instructions"`;
-  }
   if (showTimeColumn) {
     return `"time line title"
             "time line instructions"`;
@@ -497,7 +485,6 @@ export const PlaceRowWrapper = styled.li<PlaceRowWrapperProps>`
   grid-template-areas: ${props =>
     getGridTemplateAreas(
       props.$showTimeColumn,
-      props.$showHeaderSequence,
       props.$isDestination
     )};
   grid-template-columns: ${props =>
@@ -572,10 +559,6 @@ export const PlaceDetails = styled.div<PlaceContentProps>`
   grid-area: instructions;
 `;
 
-export const PlaceHeaderSequence = styled.div`
-  grid-area: header;
-`;
-
 export const PlaceSequenceHeader = styled.h3`
   font-weight: bold;
   margin: 0 0 8px 0;