refactor: map header icons and text (#33)

* refactor: map header icons and text * fix: tests and imports * refactor: map header importance to 2 * Update src/components/map/map-header.tsx Co-authored-by: Mikael Brevik <mikaelbre@gmail.com> --------- Co-authored-by: Mikael Brevik <mikaelbre@gmail.com>
AtB-AS · Oct 9, 2023 · 88d5f96 · 88d5f96
1 parent fd3d456
commit 88d5f96
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 42 deletions.
diff --git a/src/components/map/__tests__/map.test.tsx b/src/components/map/__tests__/map.test.tsx
@@ -2,14 +2,13 @@ import { cleanup, render } from '@testing-library/react';
 import { afterEach, describe, expect, it } from 'vitest';
 import { MapHeader } from '@atb/components/map';
 import { MapHeaderProps } from '@atb/components/map/map-header';
-import { FeatureCategory } from '@atb/components/venue-icon';
+import { TransportMode } from '@atb/components/transport-mode/types';
 
 const stopPlaceMock: MapHeaderProps = {
   layer: 'venue',
   name: 'Trondheim S',
   id: 'NSR:StopPlace:41742',
-  street: 'Fosenkaia',
-  category: [FeatureCategory.ONSTREET_BUS],
+  transportModes: [TransportMode.BUS],
 };
 
 const addressMock: MapHeaderProps = {
@@ -41,7 +40,7 @@ describe('MapHeader', function () {
     const output = render(
       <MapHeader
         {...stopPlaceMock}
-        category={[FeatureCategory.ONSTREET_BUS, FeatureCategory.ONSTREET_TRAM]}
+        transportModes={[TransportMode.BUS, TransportMode.TRAM]}
       />,
     );
     expect(output.getByAltText('Buss')).toBeInTheDocument();

diff --git a/src/components/map/map-header.tsx b/src/components/map/map-header.tsx
@@ -2,61 +2,55 @@ import style from './map.module.css';
 
 import { ButtonLink } from '@atb/components/button';
 import { ComponentText, useTranslation } from '@atb/translations';
-import VenueIcon, { FeatureCategory } from '@atb/components/venue-icon';
 import { and } from '@atb/utils/css';
 import { MonoIcon } from '@atb/components/icon';
+import { TransportMode } from '@atb/components/transport-mode/types';
+import { transportModeToTranslatedString } from '@atb/components/transport-mode';
+import { getTransportModeIcon } from '@atb/components/transport-mode/transport-icon';
 
 export type MapHeaderProps = {
   id: string;
   name: string; // StopPlace name or address
   layer: 'address' | 'venue';
-  street?: string;
-  category?: FeatureCategory[];
+  transportModes?: TransportMode[];
 };
 
-export function MapHeader({
-  id,
-  name,
-  layer,
-  street,
-  category,
-}: MapHeaderProps) {
+export function MapHeader({ id, name, layer, transportModes }: MapHeaderProps) {
   const { t } = useTranslation();
   return (
     <div className={style.header}>
       <div className={style.header__leftContainer}>
         <div className={style.header__icons}>
-          {layer === 'address' || !category ? (
+          {layer === 'address' || !transportModes ? (
             <div>
               <MonoIcon size="large" icon="map/Pin" overrideMode="dark" />
             </div>
           ) : (
-            category.map((type) => (
-              <div key={[type, 'icon'].join('-')}>
-                <VenueIcon category={[type]} size="large" overrideMode="dark" />
+            transportModes.map((mode) => (
+              <div key={`${mode}-icon`}>
+                <MonoIcon
+                  size="large"
+                  overrideMode="dark"
+                  icon={getTransportModeIcon({ mode })}
+                  role="img"
+                  alt={t(transportModeToTranslatedString({ mode }))}
+                />
               </div>
             ))
           )}
         </div>
         <div className={style.header__info}>
-          <h3
-            className={and(
-              'typo-heading--medium',
-              layer === 'address' && style['flexOrder__2'],
-            )}
-          >
-            {name}
-          </h3>
-          <p
-            className={and(
-              'typo-body__secondary',
-              style['header__info__secondary'],
-            )}
-          >
-            {layer === 'venue'
-              ? t(ComponentText.Map.header.venue(street || '?')) // @TODO: better types
-              : t(ComponentText.Map.header.address)}
-          </p>
+          {layer === 'address' && (
+            <p
+              className={and(
+                'typo-body__secondary',
+                style['header__info__secondary'],
+              )}
+            >
+              {t(ComponentText.Map.header.address)}
+            </p>
+          )}
+          <h2 className={and('typo-heading--medium')}>{name}</h2>
         </div>
       </div>
 

diff --git a/src/components/map/map.module.css b/src/components/map/map.module.css
@@ -32,16 +32,13 @@
 .header__info {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
 .header__info__secondary {
   color: var(--text-colors-secondary);
 }
 
-.flexOrder__2 {
-  order: 2;
-}
-
 .header__buttons {
   display: flex;
   gap: var(--spacings-medium);

diff --git a/src/components/transport-mode/transport-icon/index.tsx b/src/components/transport-mode/transport-icon/index.tsx
@@ -99,7 +99,9 @@ function modeToColor(
   }
 }
 
-function getTransportModeIcon(mode: TransportModeGroup): MonoIconProps['icon'] {
+export function getTransportModeIcon(
+  mode: TransportModeGroup,
+): MonoIconProps['icon'] {
   switch (mode.mode) {
     case 'bus':
     case 'coach':

diff --git a/src/page-modules/departures/nearest-stop-places/index.tsx b/src/page-modules/departures/nearest-stop-places/index.tsx
@@ -30,7 +30,6 @@ export function NearestStopPlaces({
             id={activeLocation.id}
             name={activeLocation.name}
             layer="address"
-            street={activeLocation.street}
             position={[
               activeLocation.geometry.coordinates[0],
               activeLocation.geometry.coordinates[1],

diff --git a/src/page-modules/departures/stop-place/index.tsx b/src/page-modules/departures/stop-place/index.tsx
@@ -36,6 +36,7 @@ export function StopPlace({ departures }: StopPlaceProps) {
           ]}
           layer="venue"
           onSelectStopPlace={(id) => router.push(`/departures/${id}`)}
+          transportModes={departures.stopPlace.transportMode}
         />
       </div>
       <div className={style.quaysContainer}>