Add hove instruction converter for default transport mode

src/libs/route_utils.js

@@ -1,3 +1,4 @@
+/* global _ */
 /* eslint-disable no-irregular-whitespace */
 import { normalizeToFeatureCollection } from './geojson';
 
@@ -84,3 +85,23 @@ export const originDestinationCoords = route => {
 
   return { origin, destination };
 };
+
+export const walkingManeuver = maneuver => {
+  const stringifyModifier = {
+    'sharp left': _('Turn left', 'direction'),
+    left: _('Turn left', 'direction'),
+    'slight left': _('Keep left', 'direction'),
+    straight: _('Walk', 'direction'),
+    'slight right': _('Keep right', 'direction'),
+    right: _('Turn right', 'direction'),
+    'sharp right': _('Turn right', 'direction'),
+    uturn: _('Turn back', 'direction'),
+  };
+
+  const context = {
+    modifier: stringifyModifier[maneuver.modifier],
+    name: maneuver.detail.name,
+  };
+
+  return maneuver.detail.name ? _('{modifier} on {name}', 'direction', context) : context.modifier;
+};

src/panel/direction/MobileDirectionPanel/MobileRoadMapPreview/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import RoadMapStep from '../../RoutesList/Route/RoadMap/RoadMapStep';
+import DefaultRoadMapStep from '../../RoutesList/Route/RoadMap/Default/DefaultRoadMapStep';
 import { fire } from 'src/libs/customEvents';
 import classnames from 'classnames';
 import { FloatingButton } from 'src/components/ui';
@@ -61,7 +61,7 @@ const MobileRoadMapPreview = ({ steps, onClose }) => {
               active: index === currentStep,
             })}
           >
-            <RoadMapStep step={step} />
+            <DefaultRoadMapStep step={step} />
           </div>
         ))}
       </div>

src/panel/direction/PublicTransportLine/index.tsx

@@ -4,7 +4,7 @@ import Color from 'color';
 import cx from 'classnames';
 import { components } from 'appTypes/idunn';
 import { Text } from '@qwant/qwant-ponents';
-import RoadMapIcon from '../RoutesList/Route/RoadMap/RoadMapIcon';
+import DefaultRoadMapIcon from '../RoutesList/Route/RoadMap/Default/DefaultRoadMapIcon';
 import { getTransportTypeIcon } from 'src/libs/route_utils';
 
 export type PublicTransportLineProps = {
@@ -37,7 +37,7 @@ const PublicTransportLine: React.FunctionComponent<PublicTransportLineProps> = (
     <>
       <div className="oval" />
       {mode && (
-        <RoadMapIcon
+        <DefaultRoadMapIcon
           className="routePtLine__transport-icon"
           iconClass={getTransportTypeIcon({ mode })}
         />

src/panel/direction/RoutesList/Route/RoadMap/LegLine/index.jsx → src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultLegLine/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const LegLine = ({ mode, info }) => {
+const DefaultLegLine = ({ mode, info }) => {
   if (mode === 'WALK') {
     return <div className="itinerary_roadmap_line itinerary_roadmap_line--walk" />;
   }
@@ -12,4 +12,4 @@ const LegLine = ({ mode, info }) => {
   );
 };
 
-export default LegLine;
+export default DefaultLegLine;

src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultRoadMap/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import DefaultRoadMapPoint from '../DefaultRoadMapPoint';
+import DefaultRoadMapStep from '../DefaultRoadMapStep';
+import { fire } from 'src/libs/customEvents';
+import { components } from 'appTypes/idunn';
+import IdunnPoi from 'src/adapters/poi/idunn_poi';
+
+export type DefaultRoadMapProps = {
+  routeSteps: components['schemas']['RouteStep'][];
+  destination: IdunnPoi;
+  origin: IdunnPoi;
+};
+
+const DefaultRoadMap: React.FunctionComponent<DefaultRoadMapProps> = ({
+  origin,
+  destination,
+  routeSteps,
+}) => {
+  return (
+    <div className="itinerary_roadmap">
+      <DefaultRoadMapPoint point={origin} onClick={() => fire('fit_map', origin)} />
+      {routeSteps.map((step, index) => (
+        <DefaultRoadMapStep
+          key={index}
+          step={step}
+          onMouseOver={() => {
+            fire('highlight_step', index);
+          }}
+          onMouseOut={() => {
+            fire('unhighlight_step', index);
+          }}
+          onClick={() => {
+            fire('zoom_step', step);
+          }}
+        />
+      ))}
+      <DefaultRoadMapPoint point={destination} onClick={() => fire('fit_map', destination)} />
+    </div>
+  );
+};
+
+export default DefaultRoadMap;

src/panel/direction/RoutesList/Route/RoadMap/RoadMapIcon/index.jsx → src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultRoadMapIcon/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
 
-const RoadMapIcon = ({ className = '', iconClass }) => (
+const DefaultRoadMapIcon = ({ className = '', iconClass }) => (
   <div className={cx(className, 'roadmapIcon', `roadmapIcon--${iconClass}`)} />
 );
 
-export default RoadMapIcon;
+export default DefaultRoadMapIcon;

src/panel/direction/RoutesList/Route/RoadMap/RoadMapItem/index.jsx → src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultRoadMapItem/index.jsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { Flex } from '@qwant/qwant-ponents';
 import { Divider } from 'src/components/ui';
 
-const RoadMapItem = ({ children, icon, distance, className, line, alignTop, ...rest }) => (
+const DefaultRoadMapItem = ({ children, icon, distance, className, line, alignTop, ...rest }) => (
   <>
     <div className={classnames('itinerary_roadmap_item', className)} {...rest}>
       {line}
@@ -19,4 +19,4 @@ const RoadMapItem = ({ children, icon, distance, className, line, alignTop, ...r
   </>
 );
 
-export default RoadMapItem;
+export default DefaultRoadMapItem;

src/panel/direction/RoutesList/Route/RoadMap/RoadMapPoint/index.jsx → src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultRoadMapPoint/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import RoadMapItem from '../RoadMapItem';
+import DefaultRoadMapItem from '../DefaultRoadMapItem';
 import { getInputValue } from 'src/libs/suggest';
 import Address from 'src/components/ui/Address';
 import PlaceIcon from 'src/components/PlaceIcon';
 
-const RoadMapPoint = ({ point, ...rest }) => {
+const DefaultRoadMapPoint = ({ point, ...rest }) => {
   const { address, type } = point;
 
   return (
-    <RoadMapItem icon={<PlaceIcon place={point} withBackground />} {...rest}>
+    <DefaultRoadMapItem icon={<PlaceIcon place={point} withBackground />} {...rest}>
       <div className="u-text--smallTitle">{getInputValue(point)}</div>
       {type !== 'geoloc' && (
         <div className="u-text--subtitle">
@@ -20,8 +20,8 @@ const RoadMapPoint = ({ point, ...rest }) => {
           />
         </div>
       )}
-    </RoadMapItem>
+    </DefaultRoadMapItem>
   );
 };
 
-export default RoadMapPoint;
+export default DefaultRoadMapPoint;

src/panel/direction/RoutesList/Route/RoadMap/Default/DefaultRoadMapStep/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { formatDistance, getStepIcon } from 'src/libs/route_utils';
+import DefaultRoadMapItem from '../DefaultRoadMapItem';
+import DefaultRoadMapIcon from '../DefaultRoadMapIcon';
+import { walkingManeuver } from 'src/libs/route_utils';
+
+const DefaultRoadMapStep = ({ step, ...rest }) => (
+  <DefaultRoadMapItem
+    icon={<DefaultRoadMapIcon iconClass={getStepIcon(step)} />}
+    distance={step.distance ? formatDistance(step.distance) : null}
+    alignTop
+    {...rest}
+  >
+    {step.maneuver.instruction || walkingManeuver(step.maneuver)}
+  </DefaultRoadMapItem>
+);
+
+export default DefaultRoadMapStep;

src/panel/direction/RoutesList/Route/RoadMap/PublicTransport/PublicTransportLineLeg/index.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PublicTransportRoadMapItem from '../PublicTransportRoadMapItem';
-import RoadMapIcon from '../../RoadMapIcon';
+import DefaultRoadMapIcon from '../../Default/DefaultRoadMapIcon';
 import PublicTransportLine from '../../../../../PublicTransportLine';
-import LegLine from '../../LegLine';
+import DefaultLegLine from '../../Default/DefaultLegLine';
 import cx from 'classnames';
 import { getTransportTypeIcon, formatDuration } from 'src/libs/route_utils';
 import { Chevron } from 'src/components/ui';
@@ -16,13 +16,13 @@ const PublicTransportLineLeg = ({ leg }) => {
 
   return (
     <PublicTransportRoadMapItem
-      icon={<RoadMapIcon iconClass={getTransportTypeIcon(leg)} />}
+      icon={<DefaultRoadMapIcon iconClass={getTransportTypeIcon(leg)} />}
       className={cx(
         'itinerary_roadmap_item--transportLine',
         stops?.length === 0 && 'itinerary_roadmap_item--no-hover'
       )}
       type="TRANSPORT_LINE"
-      line={<LegLine info={info} mode={mode} />}
+      line={<DefaultLegLine info={info} mode={mode} />}
     >
       <div className="itinerary_roadmap_item_summary" onClick={() => setDetailsOpen(!detailsOpen)}>
         <div>

src/panel/direction/RoutesList/Route/RoadMap/PublicTransport/PublicTransportWalkLeg/index.jsx

@@ -1,31 +1,13 @@
-/* global _ */
+/* globals _ */
+
 import React, { useState } from 'react';
 import { formatDistance, formatDuration } from 'src/libs/route_utils';
 import PublicTransportRoadMapItem from '../PublicTransportRoadMapItem';
-import RoadMapIcon from '../../RoadMapIcon';
-import LegLine from '../../LegLine';
+import RoadMapIcon from '../../Default/DefaultRoadMapIcon';
+import DefaultLegLine from '../../Default/DefaultLegLine';
 import cx from 'classnames';
 import { Chevron } from 'src/components/ui';
-
-const stringifyManeuver = maneuver => {
-  const stringifyModifier = {
-    'sharp left': _('Turn left', 'direction'),
-    left: _('Turn left', 'direction'),
-    'slight left': _('Keep left', 'direction'),
-    straight: _('Walk', 'direction'),
-    'slight right': _('Keep right', 'direction'),
-    right: _('Turn right', 'direction'),
-    'sharp right': _('Turn right', 'direction'),
-    uturn: _('Turn back', 'direction'),
-  };
-
-  const context = {
-    modifier: stringifyModifier[maneuver.modifier],
-    name: maneuver.detail.name,
-  };
-
-  return maneuver.detail.name ? _('{modifier} on {name}', 'direction', context) : context.modifier;
-};
+import { walkingManeuver } from 'src/libs/route_utils';
 
 const PublicTransportWalkLeg = ({ leg }) => {
   const [detailsOpen, setDetailsOpen] = useState(false);
@@ -41,7 +23,7 @@ const PublicTransportWalkLeg = ({ leg }) => {
         'itinerary_roadmap_item--walk',
         !hasSteps && 'itinerary_roadmap_item--no-hover'
       )}
-      line={<LegLine mode="WALK" />}
+      line={<DefaultLegLine mode="WALK" />}
       distance={formatDuration(leg.duration)}
       type="WALK"
     >
@@ -62,7 +44,7 @@ const PublicTransportWalkLeg = ({ leg }) => {
         <div className="itinerary_roadmap_substeps">
           {leg.steps.map((step, index) => (
             <div key={index} className="itinerary_roadmap_substep">
-              <div>{step.maneuver.instruction || stringifyManeuver(step.maneuver)}</div>
+              <div>{step.maneuver.instruction || walkingManeuver(step.maneuver)}</div>
             </div>
           ))}
         </div>