diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index 5125f5cb6..1afc35847 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -1319,33 +1319,9 @@ exports[`Storyshots Icons/ClassicLegIcon Classic Leg Icon Examples 2`] = `
- - - - - - - - - + + RAZOR +
@@ -1374,25 +1350,9 @@ exports[`Storyshots Icons/ClassicLegIcon Classic Leg Icon Examples 2`] = `
- - - - - - + + UBER +
@@ -18663,33 +18623,9 @@ exports[`Storyshots ItineraryBody/otp-react-redux E Scooter Rental Itinerary 2`] - - - - - - - - - + + RAZOR + @@ -22573,36 +22509,9 @@ exports[`Storyshots ItineraryBody/otp-react-redux E Scooter Rental Transit Itine - - - - - - - - - - + + SHARED + @@ -23829,36 +23738,9 @@ exports[`Storyshots ItineraryBody/otp-react-redux E Scooter Rental Transit Itine - - - - - - - - - - + + SHARED + @@ -45751,25 +45633,9 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = ` - - - - - - + + UBER + @@ -46446,25 +46312,9 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = ` - - - - - - + + UBER + @@ -96516,14 +96366,12 @@ exports[`Storyshots ItineraryBody/otp-ui Custom Alert Icons Itinerary 1`] = ` ], "staticRulesId": "", }, - "displayName": "OtpUiItineraryBodystory__CustomAlertIconsItinerary", "foldedComponentIds": Array [], "render": [Function], "shouldForwardProp": undefined, "styledComponentId": "OtpUiItineraryBodystory__CustomAlertIconsItinerary-sc-1k5v0ye-1", "target": Object { "$$typeof": Symbol(react.forward_ref), - "displayName": "Bomb", "render": [Function], }, "toString": [Function], @@ -96549,14 +96397,12 @@ exports[`Storyshots ItineraryBody/otp-ui Custom Alert Icons Itinerary 1`] = ` ], "staticRulesId": "", }, - "displayName": "OtpUiItineraryBodystory__CustomAlertIconsItinerary", "foldedComponentIds": Array [], "render": [Function], "shouldForwardProp": undefined, "styledComponentId": "OtpUiItineraryBodystory__CustomAlertIconsItinerary-sc-1k5v0ye-0", "target": Object { "$$typeof": Symbol(react.forward_ref), - "displayName": "Bolt", "render": [Function], }, "toString": [Function], @@ -174627,7 +174473,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear > } @@ -175003,7 +174849,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And onLocationSelected={[Function]} operatorIconMap={ Object { - "wa-state-ferry": , } @@ -176415,7 +176261,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear > } @@ -177016,12 +176862,12 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 1`] = ` } } currentPositionIcon={ - } currentPositionUnavailableIcon={ - } @@ -177058,7 +176904,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 1`] = ` } onLocationSelected={[Function]} sessionOptionIcon={ - } @@ -177073,7 +176919,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 1`] = ` } showUserSettings={true} stopOptionIcon={ - } @@ -207758,93 +207604,7 @@ exports[`Storyshots SeṯtingsSelectorPanel Settings Selector Panel 2`] = ` title="Transports + Biketown" > - - - - - - - + - - - - - - - - - - + Loading...
- - - - - - - + - - - - - - + +ReachNow
- - - - - - - + - - - - - - - - + +Car2Go
, + "icon": , "label": "Prefer Wheelchair Accessible Routes", "name": "wheelchair", "routingTypes": Array [ diff --git a/packages/icons/src/companies/index.js b/packages/icons/src/companies/index.js index c6598881a..15211c4e0 100644 --- a/packages/icons/src/companies/index.js +++ b/packages/icons/src/companies/index.js @@ -1,33 +1,21 @@ -import Biketown from "./biketown-icon"; -import Bird from "./bird-icon"; -import Bolt from "./bolt-icon"; -import BoltEu from "./bolt-eu-icon"; -import Car2go from "./car2go-icon"; -import Gruv from "./gruv-icon"; -import Hopr from "./hopr-icon"; -import Lime from "./lime-icon"; -import Lyft from "./lyft-icon"; -import Razor from "./razor-icon"; -import Reachnow from "./reachnow-icon"; -import Shared from "./shared-icon"; -import Spin from "./spin-icon"; -import Uber from "./uber-icon"; +/* eslint-disable import/prefer-default-export */ +import { lazy } from "react"; const companyLookup = { - biketown: Biketown, - bird: Bird, - bolt: Bolt, - boltEu: BoltEu, - car2go: Car2go, - gruv: Gruv, - hopr: Hopr, - lime: Lime, - lyft: Lyft, - razor: Razor, - reachnow: Reachnow, - shared: Shared, - spin: Spin, - uber: Uber + biketown: lazy(() => import("./biketown-icon")), + bird: lazy(() => import("./bird-icon")), + bolt: lazy(() => import("./bolt-icon")), + boltEu: lazy(() => import("./bolt-eu-icon")), + car2go: lazy(() => import("./car2go-icon")), + gruv: lazy(() => import("./gruv-icon")), + hopr: lazy(() => import("./hopr-icon")), + lime: lazy(() => import("./lime-icon")), + lyft: lazy(() => import("./lime-icon")), + razor: lazy(() => import("./razor-icon")), + reachnow: lazy(() => import("./reachnow-icon")), + shared: lazy(() => import("./shared-icon")), + spin: lazy(() => import("./spin-icon")), + uber: lazy(() => import("./uber-icon")) }; function getCompanyIcon(name) { @@ -38,20 +26,4 @@ function getCompanyIcon(name) { return icon; } -export { - Biketown, - Bird, - Bolt, - BoltEu, - Car2go, - getCompanyIcon, - Gruv, - Hopr, - Lime, - Lyft, - Razor, - Reachnow, - Shared, - Spin, - Uber -}; +export { getCompanyIcon }; diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 9a9fe4687..b07705e37 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -25,23 +25,7 @@ const { ClassicWalk } = classic; -const { - Biketown, - Bird, - Bolt, - BoltEu, - Car2go, - getCompanyIcon, - Gruv, - Hopr, - Lime, - Lyft, - Razor, - Reachnow, - Shared, - Spin, - Uber -} = companies; +const { getCompanyIcon } = companies; const { CircleClockwise, @@ -134,14 +118,9 @@ export { BikeLocker, BikeParking, BikeStaple, - Biketown, - Bird, - Bolt, - BoltEu, Bus, BusCircle, Car, - Car2go, Circle, CircleClockwise, CircleCounterclockwise, @@ -161,18 +140,14 @@ export { Feedback, Ferry, getCompanyIcon, - Gruv, HardLeft, HardRight, Help, HelpSolid, - Hopr, IconRenderer, Info, Left, LegIcon, - Lime, - Lyft, Map, MapMarker, MapMarkerSolid, @@ -182,16 +157,12 @@ export { Parking, Phone, Plane, - Razor, - Reachnow, Refresh, Right, Schedule, - Shared, SlightLeft, SlightRight, Snow, - Spin, StandardBike, StandardBus, StandardGondola, @@ -217,7 +188,6 @@ export { TripPlannerSolid, UTurnLeft, UTurnRight, - Uber, Walk, Wes, WesCircle, diff --git a/packages/icons/src/leg-icon.js b/packages/icons/src/leg-icon.js index 0feae6ad3..154f2d10b 100644 --- a/packages/icons/src/leg-icon.js +++ b/packages/icons/src/leg-icon.js @@ -1,6 +1,6 @@ import coreUtils from "@opentripplanner/core-utils"; import PropTypes from "prop-types"; -import React from "react"; +import React, { Suspense } from "react"; import { getCompanyIcon as defaultGetCompanyIcon } from "./companies"; @@ -9,7 +9,12 @@ const LegIcon = ({ getCompanyIcon, leg, ModeIcon, ...props }) => { // Check if the iconStr has a matching company icon. If so, return that. if (company && typeof getCompanyIcon === "function") { const CompanyIcon = getCompanyIcon(company); - if (CompanyIcon) return ; + if (CompanyIcon) + return ( + {company}}> + + + ); } let iconStr = leg.mode; // Do this for P&R, K&R and TNC trips without company icon diff --git a/packages/trip-form/src/__mocks__/submode-options.tsx b/packages/trip-form/src/__mocks__/submode-options.tsx index a6548488b..828d0f36f 100644 --- a/packages/trip-form/src/__mocks__/submode-options.tsx +++ b/packages/trip-form/src/__mocks__/submode-options.tsx @@ -3,6 +3,8 @@ import React from "react"; // @ts-ignore FIXME: Create TypeScript types for the icons package. import * as Icons from "@opentripplanner/icons"; +const UberIcon = Icons.getCompanyIcon("uber"); + const submodeOptions = [ { id: "BUS", @@ -29,7 +31,7 @@ const submodeOptions = [ title: "Uber", text: ( - Uber + Uber ) } diff --git a/packages/trip-form/src/util.tsx b/packages/trip-form/src/util.tsx index 453a992d8..494e082ff 100644 --- a/packages/trip-form/src/util.tsx +++ b/packages/trip-form/src/util.tsx @@ -2,7 +2,7 @@ import coreUtils from "@opentripplanner/core-utils"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore FIXME: Create TypeScript types for the icons package. import { getCompanyIcon } from "@opentripplanner/icons"; -import React from "react"; +import React, { Suspense } from "react"; import { IntlShape } from "react-intl"; // eslint-disable-next-line prettier/prettier @@ -269,7 +269,9 @@ function getTransitCombinedModeOptions( selectedCompanies.includes(modeCompanyUpper)), text: ( - +{finalIcon} + + +{finalIcon} + ), title: modeLabel @@ -364,7 +366,9 @@ export function getCompaniesOptions( selected: selectedCompanies.includes(comp.id), text: ( - {CompanyIcon && } {comp.label} + + {CompanyIcon ? : comp.id } + ), title: comp.label diff --git a/yarn.lock b/yarn.lock index 83c361f06..a810e235a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15028,15 +15028,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" - integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.2" react-draggable@^4.4.3: version "4.4.3" @@ -15277,14 +15276,13 @@ react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== +react@17.0.2, react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-cmd-shim@^1.0.1: version "1.0.5"