Allow custom icons for location-field

Refs opentripplanner#14

packages/core-utils/src/types.js

@@ -338,3 +338,38 @@ export const configuredCompanyType = PropTypes.shape({
   label: PropTypes.string.isRequired,
   modes: PropTypes.string.isRequired
 });
+
+/**
+ * Depending on the geocoder that is used, more properties than just the `label`
+ * property might be provided by the geocoder. For example, with the Pelias
+ * geocoder, properties such as `id`, `layer`, `source` are also included.
+ */
+export const geocodedFeatureType = PropTypes.shape({
+  geometry: PropTypes.shape({
+    coordinates: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+    type: PropTypes.string.isRequired
+  }).isRequired,
+  properties: PropTypes.shape({
+    label: PropTypes.string.isRequired
+  }).isRequired
+});
+
+export const userLocationType = PropTypes.shape({
+  id: PropTypes.string,
+  /**
+   * Can be either 'home', 'work', or null
+   */
+  icon: PropTypes.string,
+  lat: PropTypes.number.isRequired,
+  lon: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  /**
+   * This represents the last time that this location was selected in a
+   * search
+   */
+  timestamp: PropTypes.number,
+  /**
+   * One of: 'home', 'work', 'stop' or 'recent'
+   */
+  type: PropTypes.string.isRequired
+});

packages/location-field/src/LocationField.story.js

@@ -1,9 +1,26 @@
+import {
+  geocodedFeatureType,
+  userLocationType
+} from "@opentripplanner/core-utils/lib/types";
+import PropTypes from "prop-types";
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { withA11y } from "@storybook/addon-a11y";
 import { withInfo } from "@storybook/addon-info";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
+import {
+  Building,
+  Clock,
+  Crosshairs,
+  MapPin,
+  MapSigns,
+  PlaneArrival,
+  PlaneDeparture,
+  SkullCrossbones,
+  Star,
+  Train
+} from "styled-icons/fa-solid";
 
 import LocationField from ".";
 import * as LocationFieldClasses from "./styled";
@@ -84,6 +101,34 @@ const StyledLocationField = styled(LocationField)`
   }
 `;
 
+function GeocodedOptionIconComponent({ feature }) {
+  if (feature.properties.layer === "stops") return <MapSigns size={13} />;
+  if (feature.properties.layer === "station") return <Train size={13} />;
+  return <MapPin size={13} />;
+}
+
+GeocodedOptionIconComponent.propTypes = {
+  feature: geocodedFeatureType.isRequired
+};
+
+function LocationIconComponent({ locationType }) {
+  if (locationType === "from") return <PlaneDeparture size={13} />;
+  return <PlaneArrival size={13} />;
+}
+
+LocationIconComponent.propTypes = {
+  locationType: PropTypes.string.isRequired
+};
+
+function UserLocationIconComponent({ userLocation }) {
+  if (userLocation.icon === "work") return <Building size={13} />;
+  return <Star size={13} />;
+}
+
+UserLocationIconComponent.propTypes = {
+  userLocation: userLocationType.isRequired
+};
+
 storiesOf("LocationField", module)
   .addDecorator(withA11y)
   .addDecorator(withInfo)
@@ -172,4 +217,26 @@ storiesOf("LocationField", module)
       static
       userLocationsAndRecentPlaces={userLocationsAndRecentPlaces}
     />
+  ))
+  .add("LocationField with in mobile context with custom icons", () => (
+    <LocationField
+      currentPosition={currentPosition}
+      currentPositionIcon={<Crosshairs size={13} />}
+      currentPositionUnavailableIcon={<SkullCrossbones size={13} />}
+      GeocodedOptionIconComponent={GeocodedOptionIconComponent}
+      geocoderConfig={geocoderConfig}
+      getCurrentPosition={getCurrentPosition}
+      LocationIconComponent={LocationIconComponent}
+      locationType="to"
+      nearbyStops={nearbyStops}
+      onLocationSelected={onLocationSelected}
+      sessionOptionIcon={<Clock size={13} />}
+      sessionSearches={sessionSearches}
+      showUserSettings
+      static
+      stopsIndex={stopsIndex}
+      stopOptionIcon={<MapSigns size={13} />}
+      userLocationsAndRecentPlaces={userLocationsAndRecentPlaces}
+      UserLocationIconComponent={UserLocationIconComponent}
+    />
   ));