refactor: Simplify transportMode

package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.13.9",
-    "@atb-as/config-specs": "^7.4.0",
+    "@atb-as/config-specs": "8.8.0",
     "@atb-as/theme": "^15.0.1",
     "@atb-as/utils": "^5.1.1",
     "@github/combobox-nav": "^3.0.1",

src/components/line-chip/index.tsx

@@ -2,13 +2,15 @@ import { Typo } from '@atb/components/typography';
 import style from './line-chip.module.css';
 import {
   TransportIcon,
-  TransportModeType,
   useTransportationThemeColor,
 } from '@atb/modules/transport-mode';
-import { TransportSubmode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
+import {
+  TransportMode,
+  TransportSubmode,
+} from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
 
 export type LineChipProps = {
-  transportMode: TransportModeType;
+  transportMode: TransportMode;
   transportSubmode?: TransportSubmode;
   publicCode?: string;
 };
@@ -19,8 +21,8 @@ export default function LineChip({
   publicCode,
 }: LineChipProps) {
   const transportationColor = useTransportationThemeColor({
-    transportMode: transportMode,
-    transportSubModes: transportSubmode ? [transportSubmode] : [],
+    transportMode,
+    transportSubmode,
   });
 
   return (
@@ -32,10 +34,8 @@ export default function LineChip({
       }}
     >
       <TransportIcon
-        mode={{
-          transportMode: transportMode,
-          transportSubModes: transportSubmode ? [transportSubmode] : [],
-        }}
+        transportMode={transportMode}
+        transportSubmode={transportSubmode}
       />
       {publicCode && (
         <Typo.span

src/components/map/__tests__/map.test.tsx

@@ -1,12 +1,13 @@
 import { cleanup, render } from '@testing-library/react';
 import { afterEach, describe, expect, it } from 'vitest';
 import { MapHeader, type MapHeaderProps } from '../map-header';
+import { TransportMode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
 
 const stopPlaceMock: MapHeaderProps = {
   layer: 'venue',
   name: 'Trondheim S',
   position: { lat: 63.43049, lon: 10.39506 },
-  transportModes: ['bus'],
+  transportModes: [TransportMode.Bus],
 };
 
 const addressMock: MapHeaderProps = {
@@ -36,7 +37,10 @@ describe('MapHeader', function () {
 
   it('should show icons for travel method', async () => {
     const output = render(
-      <MapHeader {...stopPlaceMock} transportModes={['bus', 'tram']} />,
+      <MapHeader
+        {...stopPlaceMock}
+        transportModes={[TransportMode.Bus, TransportMode.Tram]}
+      />,
     );
     expect(output.getByAltText('Buss')).toBeInTheDocument();
     expect(output.getByAltText('Trikk')).toBeInTheDocument();

src/components/map/map-header.tsx

@@ -4,22 +4,23 @@ import { ComponentText, useTranslation } from '@atb/translations';
 import { and } from '@atb/utils/css';
 import { MonoIcon } from '@atb/components/icon';
 
-import { TransportModeType, TransportIcon } from '@atb/modules/transport-mode';
-import { TransportSubmode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated';
+import { TransportIcon } from '@atb/modules/transport-mode';
+import {
+  TransportMode,
+  TransportSubmode,
+} from '@atb/modules/graphql-types/journeyplanner-types_v3.generated';
 
 export type MapHeaderProps = {
   name: string; // StopPlace name or address
   layer: 'address' | 'venue';
-  transportModes?: TransportModeType[];
-  transportSubmodes?: Array<TransportSubmode>;
+  transportModes?: TransportMode[];
   position?: { lat: number; lon: number };
 };
 
 export function MapHeader({
   name,
   layer,
   transportModes,
-  transportSubmodes,
   position,
 }: MapHeaderProps) {
   const { t } = useTranslation();
@@ -35,10 +36,16 @@ export function MapHeader({
             transportModes.map((transportMode) => (
               <div key={`${transportMode}-icon`}>
                 <TransportIcon
-                  mode={{
-                    transportMode: transportMode,
-                    transportSubModes: transportSubmodes,
-                  }}
+                  transportMode={transportMode}
+                  /*
+                  For bus transport mode, we set the submode to LocalBus to ensure the correct icon color is used.
+                  Otherwise it defaults to region bus. This is the same logic as in the app.
+                   */
+                  transportSubmode={
+                    transportMode === TransportMode.Bus
+                      ? TransportSubmode.LocalBus
+                      : undefined
+                  }
                   size="large"
                 />
               </div>

src/components/map/use-map-legs.ts

@@ -19,13 +19,9 @@ export const useMapLegs = (
   const addToMap = useCallback(
     (map: Map, mapLeg: MapLegType, id: number) => {
       const transportColor = transportModeToColor(
-        {
-          transportMode: mapLeg.faded ? 'unknown' : mapLeg.transportMode,
-          transportSubModes: mapLeg.transportSubmode && [
-            mapLeg.transportSubmode,
-          ],
-        },
         transport,
+        mapLeg.faded ? 'unknown' : mapLeg.transportMode,
+        mapLeg.transportSubmode,
         mapLeg.isFlexibleLine,
       );
       const lineColor = mapLeg.faded