feat(icons): Add classic, trimet-mod mode icons and leg icons.

packages/icons/src/classic-leg-icon.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+import LegIcon from "./leg-icon";
+import ClassicModeIcon from "./classic-mode-icon";
+
+const ClassicLegIcon = props => {
+  return <LegIcon ModeIcon={ClassicModeIcon} {...props} />;
+};
+
+export default ClassicLegIcon;

packages/icons/src/classic-mode-icon.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+import {
+  ClassicBike,
+  ClassicBus,
+  ClassicCar,
+  ClassicFerry,
+  ClassicGondola,
+  ClassicMicromobility,
+  ClassicTram,
+  ClassicWalk
+} from "./classic";
+
+function ClassicModeIcon({ label, ...props }) {
+  if (!label) return null;
+  switch (label.toLowerCase()) {
+    case "bus":
+      return <ClassicBus {...props} />;
+    case "tram":
+    case "rail":
+    case "subway":
+      return <ClassicTram {...props} />;
+    case "walk":
+      return <ClassicWalk {...props} />;
+    case "bicycle":
+    case "bicycle_rent":
+      return <ClassicBike {...props} />;
+    case "ferry":
+      return <ClassicFerry {...props} />;
+    case "gondola":
+      return <ClassicGondola {...props} />;
+    case "car":
+      return <ClassicCar {...props} />;
+    case "micromobility":
+    case "micromobility_rent":
+      return <ClassicMicromobility {...props} />;
+    default:
+      return null;
+  }
+}
+
+export default ClassicModeIcon;

packages/icons/src/index.js

@@ -1,8 +1,8 @@
-import * as classicModes from "./classic-modes";
+import * as classic from "./classic";
 import * as companies from "./companies";
 import * as directions from "./directions";
 import * as generic from "./generic";
-import * as modModes from "./mod";
+import * as mod from "./mod";
 import * as trimet from "./trimet";
 import TriMetLegIcon from "./trimet-leg-icon";
 import TriMetModeIcon from "./trimet-mode-icon";
@@ -16,7 +16,7 @@ const {
   ClassicMicromobility,
   ClassicTram,
   ClassicWalk
-} = classicModes;
+} = classic;
 
 const {
   Biketown,
@@ -61,7 +61,7 @@ const {
   ModTram,
   ModTransit,
   ModWalk
-} = modModes;
+} = mod;
 
 const {
   Accessible,

packages/icons/src/index.story.js

@@ -9,7 +9,14 @@ function Container({ children }) {
 
 const allStories = storiesOf("Icons", module);
 
-const noStoryComponents = ["TriMetLegIcon", "TriMetModeIcon"];
+const noStoryComponents = [
+  "ClassicLegIcon",
+  "ClassicModeIcon",
+  "TriMetLegIcon",
+  "TriMetModeIcon",
+  "TriMetModLegIcon",
+  "TriMetModModeIcon"
+];
 
 Object.keys(Icons).forEach(iconKey => {
   if (noStoryComponents.indexOf(iconKey) > -1) return;

packages/icons/src/leg-icon.js

@@ -0,0 +1,77 @@
+import { legType } from "@opentripplanner/core-utils/lib/types";
+import PropTypes from "prop-types";
+import React from "react";
+
+import Biketown from "./companies/biketown-icon";
+import Bird from "./companies/bird-icon";
+// import Bolt from "./companies/bolt-icon";
+// import Car2go from "./companies/car2go-icon";
+import Gruv from "./companies/gruv-icon";
+import Lime from "./companies/lime-icon";
+// import Lyft from "./companies/lyft-icon";
+import Razor from "./companies/razor-icon";
+import Shared from "./companies/shared-icon";
+import Spin from "./companies/spin-icon";
+import Uber from "./companies/uber-icon";
+
+const companyLookup = {
+  biketown: Biketown,
+  bird: Bird,
+  // bolt: Bolt,
+  // car2go: Car2go,
+  gruv: Gruv,
+  lime: Lime,
+  // lyft: Lyft,
+  razor: Razor,
+  shared: Shared,
+  spin: Spin,
+  uber: Uber
+};
+
+function getCompanyIcon(name) {
+  return companyLookup[name.toLowerCase()];
+}
+
+const LegIcon = ({ leg, ModeIcon, ...props }) => {
+  let iconStr = leg.mode;
+  if (iconStr === "CAR" && leg.rentedCar) {
+    iconStr = leg.from.networks[0];
+  } else if (iconStr === "CAR" && leg.tncData) {
+    iconStr = leg.tncData.company;
+  } else if (iconStr === "BICYCLE" && leg.rentedBike && leg.from.networks) {
+    iconStr = leg.from.networks[0];
+  } else if (
+    iconStr === "MICROMOBILITY" &&
+    leg.rentedVehicle &&
+    leg.from.networks
+  ) {
+    iconStr = leg.from.networks[0];
+  }
+
+  // this if / else if block is specific to TriMet
+  if (leg.routeLongName && leg.routeLongName.startsWith("Portland Streetcar")) {
+    iconStr = "STREETCAR";
+  } else if (leg.rentedBike) {
+    if (leg.from.networks && leg.from.networks[0] === "GBFS") {
+      iconStr = "BIKETOWN";
+    } else {
+      iconStr = "BICYCLE";
+    }
+  }
+
+  // try to see if the iconStr has a matching company icon. If so, return that.
+  const CompanyIcon = getCompanyIcon(iconStr);
+  if (CompanyIcon) return <CompanyIcon {...props} />;
+
+  // Do this for P&R, K&R and TNC trips without company icon
+  if (iconStr && iconStr.startsWith("CAR")) iconStr = "CAR";
+
+  return <ModeIcon label={iconStr} {...props} />;
+};
+
+LegIcon.propTypes = {
+  leg: legType.isRequired,
+  ModeIcon: PropTypes.element.isRequired
+};
+
+export default LegIcon;

packages/icons/src/trimet-leg-icon.js

@@ -1,76 +1,10 @@
-import { legType } from "@opentripplanner/core-utils/lib/types";
 import React from "react";
 
-import Biketown from "./companies/biketown-icon";
-import Bird from "./companies/bird-icon";
-// import Bolt from "./companies/bolt-icon";
-// import Car2go from "./companies/car2go-icon";
-import Gruv from "./companies/gruv-icon";
-import Lime from "./companies/lime-icon";
-// import Lyft from "./companies/lyft-icon";
-import Razor from "./companies/razor-icon";
-import Shared from "./companies/shared-icon";
-import Spin from "./companies/spin-icon";
-import Uber from "./companies/uber-icon";
+import LegIcon from "./leg-icon";
 import TriMetModeIcon from "./trimet-mode-icon";
 
-const companyLookup = {
-  biketown: Biketown,
-  bird: Bird,
-  // bolt: Bolt,
-  // car2go: Car2go,
-  gruv: Gruv,
-  lime: Lime,
-  // lyft: Lyft,
-  razor: Razor,
-  shared: Shared,
-  spin: Spin,
-  uber: Uber
-};
-
-function getCompanyIcon(name) {
-  return companyLookup[name.toLowerCase()];
-}
-
-const TriMetLegIcon = ({ leg, ...props }) => {
-  let iconStr = leg.mode;
-  if (iconStr === "CAR" && leg.rentedCar) {
-    iconStr = leg.from.networks[0];
-  } else if (iconStr === "CAR" && leg.tncData) {
-    iconStr = leg.tncData.company;
-  } else if (iconStr === "BICYCLE" && leg.rentedBike && leg.from.networks) {
-    iconStr = leg.from.networks[0];
-  } else if (
-    iconStr === "MICROMOBILITY" &&
-    leg.rentedVehicle &&
-    leg.from.networks
-  ) {
-    iconStr = leg.from.networks[0];
-  }
-
-  // this if / else if block is specific to TriMet
-  if (leg.routeLongName && leg.routeLongName.startsWith("Portland Streetcar")) {
-    iconStr = "STREETCAR";
-  } else if (leg.rentedBike) {
-    if (leg.from.networks && leg.from.networks[0] === "GBFS") {
-      iconStr = "BIKETOWN";
-    } else {
-      iconStr = "BICYCLE";
-    }
-  }
-
-  // try to see if the iconStr has a matching company icon. If so, return that.
-  const CompanyIcon = getCompanyIcon(iconStr);
-  if (CompanyIcon) return <CompanyIcon {...props} />;
-
-  // Do this for P&R, K&R and TNC trips without company icon
-  if (iconStr && iconStr.startsWith("CAR")) iconStr = "CAR";
-
-  return <TriMetModeIcon label={iconStr} {...props} />;
-};
-
-TriMetLegIcon.propTypes = {
-  leg: legType.isRequired
+const TriMetLegIcon = props => {
+  return <LegIcon ModeIcon={TriMetModeIcon} {...props} />;
 };
 
 export default TriMetLegIcon;

packages/icons/src/trimet-mod-leg-icon.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+import LegIcon from "./leg-icon";
+import TriMetModModeIcon from "./trimet-mod-mode-icon";
+
+const TriMetModLegIcon = props => {
+  return <LegIcon ModeIcon={TriMetModModeIcon} {...props} />;
+};
+
+export default TriMetModLegIcon;

packages/icons/src/trimet-mod-mode-icon.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { ClassicCar, ClassicFerry, ClassicMicromobility } from "./classic";
+import { ModBike, ModBus, ModGondola, ModTram, ModWalk } from "./mod";
+
+function TriMetModModeIcon({ label, ...props }) {
+  if (!label) return null;
+  switch (label.toLowerCase()) {
+    case "bus":
+      return <ModBus {...props} />;
+    case "tram":
+    case "rail":
+    case "subway":
+      return <ModTram {...props} />;
+    case "walk":
+      return <ModWalk {...props} />;
+    case "bicycle":
+    case "bicycle_rent":
+      return <ModBike {...props} />;
+    case "ferry":
+      return <ClassicFerry {...props} />;
+    case "gondola":
+      return <ModGondola {...props} />;
+    case "car":
+      return <ClassicCar {...props} />;
+    case "micromobility":
+    case "micromobility_rent":
+      return <ClassicMicromobility {...props} />;
+    default:
+      return null;
+  }
+}
+
+export default TriMetModModeIcon;