feat(board): shows icons for transportationmode in tableheader (#1117)

* feat(board): created table header component

* feat(tableheader): displayed transporticons in the tableheader

* feat(tableheader): made transporticon have specified colors

* fix(tableheader): made keys in transporticon unique

* fix(tableheader): removed console log

* feat(tableheader): show transportmodes for all departures from stop place

* fix(tableheader): removed unnecessary css class and renamed variable

* chore(transporticon): refactored transporticon

next-tavla/src/Board/scenarios/StopPlaceTile/index.tsx

@@ -4,6 +4,7 @@ import classes from './styles.module.css'
 import { useQuery } from 'graphql/utils'
 import { StopPlaceQuery } from 'graphql/index'
 import { Tile } from 'components/Tile'
+import { TableHeader } from '../Table/components/TableHeader'
 
 export function StopPlaceTile({
     placeId,
@@ -26,7 +27,10 @@ export function StopPlaceTile({
 
     return (
         <Tile className={classes.stopPlaceTile}>
-            <h3>{data.stopPlace.name}</h3>
+            <TableHeader
+                heading={data.stopPlace.name}
+                transportModes={data.stopPlace.transportMode}
+            />
             <Table departures={data.stopPlace.estimatedCalls} />
         </Tile>
     )

next-tavla/src/Board/scenarios/Table/components/TableHeader/index.tsx

@@ -0,0 +1,26 @@
+import { TransportIcon } from '../TransportIcon'
+import classes from './styles.module.css'
+import { TTransportMode } from 'types/graphql-schema'
+
+function TableHeader({
+    heading,
+    transportModes,
+}: {
+    heading: string
+    transportModes: (TTransportMode | null)[] | null
+}) {
+    return (
+        <div className={classes.headerWrapper}>
+            <h1 className={classes.heading}>{heading}</h1>
+            {transportModes && (
+                <div>
+                    {transportModes.map((mode) => (
+                        <TransportIcon key={mode} transport={mode} />
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export { TableHeader }

next-tavla/src/Board/scenarios/Table/components/TableHeader/styles.module.css

@@ -0,0 +1,11 @@
+.headerWrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.heading {
+    font-size: 1.5em;
+    font-weight: 600;
+    margin: 0;
+}

next-tavla/src/Board/scenarios/Table/components/TransportIcon/index.tsx

@@ -1,57 +1,42 @@
 import { TTransportMode } from 'types/graphql-schema'
-import { TColors } from 'Board/utils/colors'
 import { SVGProps } from 'react'
+import classes from './styles.module.css'
 
-function TransportIcon({
-    transportMode,
-    presentation,
-}: {
-    transportMode: TTransportMode | null
-    presentation: TColors
-}) {
-    const mode = transportMode ? transportMode : 'unknown'
-
-    return (
-        <div
-            style={{
-                backgroundColor: presentation.backgroundColor,
-                fill: presentation.color,
-                color: presentation.color,
-            }}
-        >
-            {getTransportIcon(mode)}
-        </div>
-    )
+function TransportIcon({ transport }: { transport: TTransportMode | null }) {
+    const mode = transport ? transport : 'unknown'
+    const defaultColor = `var(--table-transport-${mode}-color)`
+    const Component = getTransportIcon(mode)
+    return <Component className={classes.transportIcon} fill={defaultColor} />
 }
 
 function getTransportIcon(transportMode: TTransportMode) {
     switch (transportMode) {
         case 'metro':
-            return <MetroIcon />
+            return MetroIcon
         case 'bus':
-            return <BusIcon />
+            return BusIcon
         case 'air':
-            return <PlaneIcon />
+            return PlaneIcon
         case 'tram':
-            return <TramIcon />
+            return TramIcon
         case 'funicular':
-            return <FunicularIcon />
+            return FunicularIcon
         case 'cableway':
-            return <CablewayIcon />
+            return CablewayIcon
         case 'rail':
-            return <RailIcon />
+            return RailIcon
         case 'coach':
-            return <BusIcon />
+            return BusIcon
         case 'lift':
-            return <CablewayIcon />
+            return CablewayIcon
         case 'monorail':
-            return <RailIcon />
+            return RailIcon
         case 'trolleybus':
-            return <BusIcon />
+            return BusIcon
         case 'water':
-            return <FerryIcon />
+            return FerryIcon
         default:
-            return <UnknownIcon />
+            return UnknownIcon
     }
 }
 

next-tavla/src/Board/scenarios/Table/components/TransportIcon/styles.module.css

@@ -0,0 +1,5 @@
+.transportIcon {
+    margin: 0.2em;
+    height: 2em;
+    width: 2em;
+}

next-tavla/src/Shared/graphql/index.ts

@@ -172,6 +172,7 @@ export type TStopPlaceQuery = {
     stopPlace: {
         __typename?: 'StopPlace'
         name: string
+        transportMode: Array<Types.TTransportMode | null> | null
         estimatedCalls: Array<{
             __typename?: 'EstimatedCall'
             aimedDepartureTime: DateTime
@@ -403,6 +404,7 @@ export const StopPlaceQuery = new TypedDocumentString(`
     query StopPlace($stopPlaceId: String!, $whitelistedTransportModes: [TransportMode], $whitelistedLines: [ID!]) {
   stopPlace(id: $stopPlaceId) {
     name
+    transportMode
     estimatedCalls(
       numberOfDepartures: 20
       whiteListedModes: $whitelistedTransportModes

next-tavla/src/Shared/graphql/queries/stopPlace.graphql

@@ -5,6 +5,7 @@ query StopPlace(
 ) {
     stopPlace(id: $stopPlaceId) {
         name
+        transportMode
         estimatedCalls(
             numberOfDepartures: 20
             whiteListedModes: $whitelistedTransportModes