From 12692f9acfd9c208f931cda9f57481b950416d70 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 09:05:20 -0500 Subject: [PATCH 01/74] Create advanced settings panel --- example.css | 5 +- i18n/en-US.yml | 3 + lib/components/app/batch-routing-panel.tsx | 84 +++++++++++++------ .../form/advanced-settings-button.tsx | 33 ++++++++ .../form/advanced-settings-panel.tsx | 79 +++++++++++++++++ lib/components/form/batch-settings.tsx | 6 ++ lib/components/form/batch-styled.ts | 2 + lib/components/form/form.css | 2 +- lib/components/viewers/viewers.css | 3 +- 9 files changed, 187 insertions(+), 30 deletions(-) create mode 100644 lib/components/form/advanced-settings-button.tsx create mode 100644 lib/components/form/advanced-settings-panel.tsx diff --git a/example.css b/example.css index afd7900f5..6f1cd184f 100644 --- a/example.css +++ b/example.css @@ -39,12 +39,13 @@ .sidebar { height: 100%; padding: 0; - box-shadow: 3px 0px 12px #00000052; - z-index: 1000; + z-index: 99; } .map-container { + box-shadow: 3px 0px 12px #00000052; height: 100%; margin: 0px; padding: 0px; + z-index: 100; } diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 3be68a8c6..dd8d1e833 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -195,8 +195,11 @@ components: BatchRoutingPanel: shortTitle: Plan Trip BatchSearchScreen: + advancedHeader: Advanced preferences + closeAdvancedPreferences: Close advanced preferences header: Plan Your Trip modeSelectorLabel: Select a travel mode + moreOptions: More options BatchSettings: destination: destination invalidModeSelection: >- diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index c1321091e..41caa1dd7 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -4,6 +4,7 @@ import React, { Component, FormEvent } from 'react' import { getActiveSearch, getShowUserSettings } from '../../util/state' import { getPersistenceMode } from '../../util/user' +import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' import InvisibleA11yLabel from '../util/invisible-a11y-label' import LocationField from '../form/connected-location-field' @@ -24,7 +25,9 @@ interface Props { */ class BatchRoutingPanel extends Component { state = { - planTripClicked: false + fade: false, + planTripClicked: false, + showAdvancedModeSettings: false } handleSubmit = (e: FormEvent) => e.preventDefault() @@ -33,6 +36,20 @@ class BatchRoutingPanel extends Component { this.setState({ planTripClicked: true }) } + handleOpenAdvanceSettings = () => { + this.setState({ showAdvancedModeSettings: true }) + setTimeout(() => { + this.setState({ fade: true }) + }, 300) + } + + handleCloseAdvanceSettings = () => { + this.setState({ fade: false }) + setTimeout(() => { + this.setState({ showAdvancedModeSettings: false }) + }, 300) + } + render() { const { activeSearch, intl, mobile, showUserSettings } = this.props const { planTripClicked } = this.state @@ -44,6 +61,8 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) + console.log(this.state) + return ( { onSubmit={this.handleSubmit} style={{ padding: '10px' }} > - - - + + + +
+ +
+
+ + + )} + {this.state.showAdvancedModeSettings && ( + -
- -
-
- + )} {!activeSearch && showUserSettings && ( diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx new file mode 100644 index 000000000..f192f7e39 --- /dev/null +++ b/lib/components/form/advanced-settings-button.tsx @@ -0,0 +1,33 @@ +import { ArrowRight } from '@styled-icons/fa-solid' +import { FormattedMessage } from 'react-intl' + +import { grey } from '../util/colors' +import React from 'react' +import styled from 'styled-components' + +interface Props { + onClick: () => void +} + +const StyledTransparentButton = styled.button` + align-items: center; + background: transparent; + border: none; + color: ${grey[700]}; + display: flex; + gap: 7px; + margin-bottom: 5px; + + float: right; +` + +const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => { + return ( + + + + + ) +} + +export default AdvancedSettingsButton diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx new file mode 100644 index 000000000..7dee4cb49 --- /dev/null +++ b/lib/components/form/advanced-settings-panel.tsx @@ -0,0 +1,79 @@ +import { Close } from '@styled-icons/fa-solid' +import { useIntl } from 'react-intl' + +import PageTitle from '../util/page-title' +import React, { useState } from 'react' +import styled, { keyframes } from 'styled-components' + +const panelFlyIn = keyframes` + 0% { left: 100%; } + 100% { left: 0 } +` + +const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` + left: 0; + top: 0; + height: 100vh; + width: 100%; + position: absolute; + animation: ${panelFlyIn} 400ms ease-in forwards; + animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; + z-index: 100; + background: white; + padding: 1.5em; + box-shadow: 3px 0px 12px #00000052; +` + +const CloseButton = styled.button` + border: none; + background: transparent; +` + +const HeaderContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +` + +const AdvancedSettingsPanel = ({ + closeAdvancedSettings +}: { + closeAdvancedSettings: () => void +}): JSX.Element => { + const [reverseAnimation, setReverseAnimation] = useState(false) + const intl = useIntl() + const key = reverseAnimation.toString() + const closeButtonText = intl.formatMessage({ + id: 'components.BatchSearchScreen.closeAdvancedPreferences' + }) + const headerText = intl.formatMessage({ + id: 'components.BatchSearchScreen.advancedHeader' + }) + + const closePanel = () => { + closeAdvancedSettings() + setReverseAnimation(true) + } + + return ( + + +

{headerText}

+ + + +
+ +
+ ) +} + +export default AdvancedSettingsPanel diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 63e748973..2a21201b9 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -34,6 +34,7 @@ import { ModeSelectorContainer, PlanTripButton } from './batch-styled' +import AdvancedSettingsButton from './advanced-settings-button' import DateTimeButton from './date-time-button' const queryParamConfig = { modeButtons: DelimitedArrayParam } @@ -48,6 +49,7 @@ type Props = { modeSettingDefinitions: ModeSetting[] modeSettingValues: ModeSettingValues onPlanTripClick: () => void + openAdvancedSettings?: () => void routingQuery: any setQueryParam: (evt: any) => void spacedOutModeSelector?: boolean @@ -80,6 +82,7 @@ function BatchSettings({ modeSettingDefinitions, modeSettingValues, onPlanTripClick, + openAdvancedSettings, routingQuery, setQueryParam, spacedOutModeSelector, @@ -240,6 +243,9 @@ function BatchSettings({ // Prevent the hover on date/time selector when mode selector has a popup open via keyboard. style={{ pointerEvents: modeSelectorPopup ? 'none' : undefined }} /> + {openAdvancedSettings && ( + + )} ` align-items: flex-start; display: flex; float: right; + justify-content: space-between; + width: 100%; ${PlanTripButton} { border-bottom-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')}; diff --git a/lib/components/form/form.css b/lib/components/form/form.css index 7ef399d67..5fb1a59ee 100644 --- a/lib/components/form/form.css +++ b/lib/components/form/form.css @@ -93,7 +93,7 @@ position: absolute; top: 22px; right: 32px; - z-index: 100000; + z-index: 99; } .otp .switch-button-container-mobile { diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css index 31e260402..060a3ae9d 100644 --- a/lib/components/viewers/viewers.css +++ b/lib/components/viewers/viewers.css @@ -60,7 +60,8 @@ } .otp .trip-viewer .header-text, -.otp .route-viewer .header-text { +.otp .route-viewer .header-text, +.otp .advanced-settings .header-text { display: contents; font-weight: 700; font-size: 24px; From 6bfcf27da3331714659d5f29cf267a16fb5ba310 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 09:26:00 -0500 Subject: [PATCH 02/74] refactor(advanced-settings-panel): clean up css, add focus trap, add headers --- i18n/en-US.yml | 4 +- .../form/advanced-settings-panel.tsx | 56 ++++++++++++------- lib/components/viewers/viewers.css | 8 +++ 3 files changed, 48 insertions(+), 20 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 82ad151fa..fdbcbe346 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -195,11 +195,13 @@ components: BatchRoutingPanel: shortTitle: Plan Trip BatchSearchScreen: - advancedHeader: Advanced preferences + advancedHeader: Advanced Preferences closeAdvancedPreferences: Close advanced preferences header: Plan Your Trip + modeOptions: Mode Options modeSelectorLabel: Select a travel mode moreOptions: More options + tripOptions: Trip Options BatchSettings: destination: destination invalidModeSelection: >- diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 7dee4cb49..57deb7876 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -1,5 +1,6 @@ import { Close } from '@styled-icons/fa-solid' -import { useIntl } from 'react-intl' +import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' +import { FormattedMessage, useIntl } from 'react-intl' import PageTitle from '../util/page-title' import React, { useState } from 'react' @@ -11,17 +12,17 @@ const panelFlyIn = keyframes` ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - left: 0; - top: 0; - height: 100vh; - width: 100%; - position: absolute; animation: ${panelFlyIn} 400ms ease-in forwards; animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; - z-index: 100; background: white; - padding: 1.5em; box-shadow: 3px 0px 12px #00000052; + height: 100vh; + left: 0; + padding: 1.5em; + position: absolute; + top: 0; + width: 100%; + z-index: 100; ` const CloseButton = styled.button` @@ -61,17 +62,34 @@ const AdvancedSettingsPanel = ({ key={key} reverseAnimation={reverseAnimation} > - -

{headerText}

- - - -
- + + +

{headerText}

+ + + +
+ + {/** + * Date time selector goes here + */} +

+ +

+ {/** + * Trip options (walk speed, walk reluctance, accessible routing) go here + */} +

+ +

+ {/** + * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here + */} +
) } diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css index 060a3ae9d..370da5252 100644 --- a/lib/components/viewers/viewers.css +++ b/lib/components/viewers/viewers.css @@ -67,6 +67,14 @@ font-size: 24px; margin: 0; } + +.otp .advanced-settings h2.header-text { + display: block; + font-size: 18px; + margin: 1em 0; +} + + .otp .route-viewer .header-text.route-expanded { display: flex; align-items: center; From 9a5f4af7e4b98ce27c9df11b5ee2ffc95676864e Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 09:37:01 -0500 Subject: [PATCH 03/74] Fix animation timing --- lib/components/form/advanced-settings-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 57deb7876..e22fdb9db 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -12,7 +12,7 @@ const panelFlyIn = keyframes` ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - animation: ${panelFlyIn} 400ms ease-in forwards; + animation: ${panelFlyIn} 300ms ease-in forwards; animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; background: white; box-shadow: 3px 0px 12px #00000052; From 88b30383cc335e885eb7a659d22500bf304f6325 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:29:14 -0500 Subject: [PATCH 04/74] Close advanced panel on page change --- lib/components/app/batch-routing-panel.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 41caa1dd7..1aaabaa09 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -16,6 +16,7 @@ import ViewerContainer from '../viewers/viewer-container' interface Props { activeSearch: any intl: IntlShape + mainPanelContent: number mobile?: boolean showUserSettings: boolean } @@ -30,6 +31,16 @@ class BatchRoutingPanel extends Component { showAdvancedModeSettings: false } + componentDidUpdate(prevProps: Readonly): void { + if ( + prevProps.mainPanelContent === null && + this.props.mainPanelContent !== null && + this.state.showAdvancedModeSettings + ) { + this.handleCloseAdvanceSettings() + } + } + handleSubmit = (e: FormEvent) => e.preventDefault() handlePlanTripClick = () => { @@ -61,8 +72,6 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) - console.log(this.state) - return ( { getShowUserSettings(state) && (state.user.loggedInUser?.hasConsentedToTerms || getPersistenceMode(state.otp.config.persistence).isLocalStorage) + const { mainPanelContent } = state.otp.ui + return { activeSearch: getActiveSearch(state), + mainPanelContent, showUserSettings } } From e5c0192698a6b84a670f5adef889285a9ad1669a Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:41:23 -0500 Subject: [PATCH 05/74] create PANEL_ANIMATION_TIMING variable --- lib/components/app/batch-routing-panel.tsx | 5 +++-- lib/components/form/advanced-settings-panel.tsx | 3 ++- lib/components/form/styled.ts | 3 +++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 1aaabaa09..fc01faa60 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -4,6 +4,7 @@ import React, { Component, FormEvent } from 'react' import { getActiveSearch, getShowUserSettings } from '../../util/state' import { getPersistenceMode } from '../../util/user' +import { PANEL_ANIMATION_TIMING } from '../form/styled' import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' import InvisibleA11yLabel from '../util/invisible-a11y-label' @@ -51,14 +52,14 @@ class BatchRoutingPanel extends Component { this.setState({ showAdvancedModeSettings: true }) setTimeout(() => { this.setState({ fade: true }) - }, 300) + }, PANEL_ANIMATION_TIMING) } handleCloseAdvanceSettings = () => { this.setState({ fade: false }) setTimeout(() => { this.setState({ showAdvancedModeSettings: false }) - }, 300) + }, PANEL_ANIMATION_TIMING) } render() { diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index e22fdb9db..cf04ba9b0 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -2,6 +2,7 @@ import { Close } from '@styled-icons/fa-solid' import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' +import { PANEL_ANIMATION_TIMING } from './styled' import PageTitle from '../util/page-title' import React, { useState } from 'react' import styled, { keyframes } from 'styled-components' @@ -12,7 +13,7 @@ const panelFlyIn = keyframes` ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - animation: ${panelFlyIn} 300ms ease-in forwards; + animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms linear forwards; animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; background: white; box-shadow: 3px 0px 12px #00000052; diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 06e9449f7..5aa71488e 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -8,6 +8,9 @@ import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled' import LocationField from '@opentripplanner/location-field' import styled, { css } from 'styled-components' +// How many ms it takes for the advanced settings panel to fly in and out +export const PANEL_ANIMATION_TIMING = 300 + const commonButtonCss = css` -webkit-user-select: none; -moz-user-select: none; From c80a8ba747f0f15156358eeed5fa3f36f392fa71 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:49:10 -0500 Subject: [PATCH 06/74] Smooth animation --- lib/components/form/advanced-settings-panel.tsx | 2 +- lib/components/form/styled.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index cf04ba9b0..2a43f31a3 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -13,7 +13,7 @@ const panelFlyIn = keyframes` ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms linear forwards; + animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms ease-in-out forwards; animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; background: white; box-shadow: 3px 0px 12px #00000052; diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 5aa71488e..000bb1245 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -9,7 +9,7 @@ import LocationField from '@opentripplanner/location-field' import styled, { css } from 'styled-components' // How many ms it takes for the advanced settings panel to fly in and out -export const PANEL_ANIMATION_TIMING = 300 +export const PANEL_ANIMATION_TIMING = 550 const commonButtonCss = css` -webkit-user-select: none; From 8fbabd2721bf37b2eb30148a27a6b3a3cca22809 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:50:56 -0500 Subject: [PATCH 07/74] revert example.css changes --- example.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/example.css b/example.css index 6f1cd184f..be6b5f609 100644 --- a/example.css +++ b/example.css @@ -39,13 +39,12 @@ .sidebar { height: 100%; padding: 0; - z-index: 99; + box-shadow: 3px 0px 12px #00000052; + z-index: 1000; } .map-container { - box-shadow: 3px 0px 12px #00000052; height: 100%; margin: 0px; padding: 0px; - z-index: 100; -} +} \ No newline at end of file From 5f4268ca09e91884c2ef3741e709c22124b34465 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 13:04:57 -0500 Subject: [PATCH 08/74] Add AdvancedModePanel to mobile search --- lib/components/form/form.css | 2 +- lib/components/mobile/batch-search-screen.tsx | 81 +++++++++++++------ 2 files changed, 57 insertions(+), 26 deletions(-) diff --git a/lib/components/form/form.css b/lib/components/form/form.css index 5fb1a59ee..9f694e155 100644 --- a/lib/components/form/form.css +++ b/lib/components/form/form.css @@ -100,7 +100,7 @@ position: absolute; top: 32px; right: 45px; - z-index: 100000; + z-index: 99; } /* Settings Selector Panel */ diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 930112a88..20c6b38b4 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -4,6 +4,8 @@ import React, { Component } from 'react' import * as uiActions from '../../actions/ui' import { MobileScreens } from '../../actions/ui-constants' +import { PANEL_ANIMATION_TIMING } from '../form/styled' +import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' import DefaultMap from '../map/default-map' import LocationField from '../form/connected-location-field' @@ -22,7 +24,9 @@ interface Props { class BatchSearchScreen extends Component { state = { - planTripClicked: false + fade: false, + planTripClicked: false, + showAdvancedModeSettings: false } _fromFieldClicked = () => this.props.setMobileScreen(SET_FROM_LOCATION) @@ -33,6 +37,20 @@ class BatchSearchScreen extends Component { this.setState({ planTripClicked: true }) } + handleOpenAdvanceSettings = () => { + this.setState({ showAdvancedModeSettings: true }) + setTimeout(() => { + this.setState({ fade: true }) + }, PANEL_ANIMATION_TIMING) + } + + handleCloseAdvanceSettings = () => { + this.setState({ fade: false }) + setTimeout(() => { + this.setState({ showAdvancedModeSettings: false }) + }, PANEL_ANIMATION_TIMING) + } + render() { const { intl } = this.props const { planTripClicked } = this.state @@ -45,30 +63,43 @@ class BatchSearchScreen extends Component { />
- - -
- -
- + {!this.state.fade && ( + <> + + +
+ +
+ + + )} + + {this.state.showAdvancedModeSettings && ( + + )}
From f2462aa2293f1d3d632304b73bf92f2b9bc98b27 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:09:18 -0500 Subject: [PATCH 09/74] fix(batch-routing-panel): Remove itins and user settings if advanced panel open --- lib/components/app/batch-routing-panel.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index fc01faa60..c49923256 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -132,18 +132,20 @@ class BatchRoutingPanel extends Component { /> )} - {!activeSearch && showUserSettings && ( + {!activeSearch && showUserSettings && !this.state.fade && ( )} -
- -
+ {!this.state.fade && ( +
+ +
+ )} ) } From ab198f1fba8eff4394deb4c42bf505e54b5d7b64 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:17:34 -0500 Subject: [PATCH 10/74] Clean up animation + add prefersReducedMotion util --- lib/components/form/advanced-settings-panel.tsx | 4 ++-- lib/components/form/styled.ts | 3 ++- lib/components/util/prefersReducedMotion.tsx | 3 +++ 3 files changed, 7 insertions(+), 3 deletions(-) create mode 100644 lib/components/util/prefersReducedMotion.tsx diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 2a43f31a3..593371c32 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -8,8 +8,8 @@ import React, { useState } from 'react' import styled, { keyframes } from 'styled-components' const panelFlyIn = keyframes` - 0% { left: 100%; } - 100% { left: 0 } + 0% { left: 100%; opacity: 25% } + 100% { left: 0; opacity: 100% } ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 000bb1245..e8a877bc9 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -5,11 +5,12 @@ import { Styled as TripFormClasses } from '@opentripplanner/trip-form' import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled' +import { prefersReducedMotion } from '../util/prefersReducedMotion' import LocationField from '@opentripplanner/location-field' import styled, { css } from 'styled-components' // How many ms it takes for the advanced settings panel to fly in and out -export const PANEL_ANIMATION_TIMING = 550 +export const PANEL_ANIMATION_TIMING = prefersReducedMotion ? 0 : 550 const commonButtonCss = css` -webkit-user-select: none; diff --git a/lib/components/util/prefersReducedMotion.tsx b/lib/components/util/prefersReducedMotion.tsx new file mode 100644 index 000000000..e15c19594 --- /dev/null +++ b/lib/components/util/prefersReducedMotion.tsx @@ -0,0 +1,3 @@ +export const prefersReducedMotion = window.matchMedia( + '(prefers-reduced-motion: reduce)' +).matches From 3690005baa919ddc9dcba6cf205a05e504fc8fad Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:34:45 -0500 Subject: [PATCH 11/74] Clean up comments, tweak css --- lib/components/app/batch-routing-panel.tsx | 6 ++++-- lib/components/form/advanced-settings-button.tsx | 4 +--- lib/components/mobile/batch-search-screen.tsx | 2 ++ lib/components/util/prefersReducedMotion.tsx | 6 ++++++ 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index c49923256..514225b6c 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -33,12 +33,13 @@ class BatchRoutingPanel extends Component { } componentDidUpdate(prevProps: Readonly): void { + // Close the advanced mode settings if we navigate to another page if ( prevProps.mainPanelContent === null && this.props.mainPanelContent !== null && this.state.showAdvancedModeSettings ) { - this.handleCloseAdvanceSettings() + this.setState({ fade: false, showAdvancedModeSettings: false }) } } @@ -50,6 +51,7 @@ class BatchRoutingPanel extends Component { handleOpenAdvanceSettings = () => { this.setState({ showAdvancedModeSettings: true }) + // Allow Advanced Settings panel to finish animation before removing form from DOM setTimeout(() => { this.setState({ fade: true }) }, PANEL_ANIMATION_TIMING) @@ -57,6 +59,7 @@ class BatchRoutingPanel extends Component { handleCloseAdvanceSettings = () => { this.setState({ fade: false }) + // Allow Advanced Settings panel to finish animation before removing from DOM setTimeout(() => { this.setState({ showAdvancedModeSettings: false }) }, PANEL_ANIMATION_TIMING) @@ -92,7 +95,6 @@ class BatchRoutingPanel extends Component { onSubmit={this.handleSubmit} style={{ padding: '10px' }} > - {' '} {!this.state.fade && ( <> diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx index f192f7e39..281d535d5 100644 --- a/lib/components/form/advanced-settings-button.tsx +++ b/lib/components/form/advanced-settings-button.tsx @@ -13,12 +13,10 @@ const StyledTransparentButton = styled.button` align-items: center; background: transparent; border: none; - color: ${grey[700]}; + color: ${grey[800]}; display: flex; gap: 7px; margin-bottom: 5px; - - float: right; ` const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => { diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 20c6b38b4..755295b38 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -39,6 +39,7 @@ class BatchSearchScreen extends Component { handleOpenAdvanceSettings = () => { this.setState({ showAdvancedModeSettings: true }) + // Allow Advanced Settings panel to finish animation before removing form from DOM setTimeout(() => { this.setState({ fade: true }) }, PANEL_ANIMATION_TIMING) @@ -46,6 +47,7 @@ class BatchSearchScreen extends Component { handleCloseAdvanceSettings = () => { this.setState({ fade: false }) + // Allow Advanced Settings panel to finish animation before removing from DOM setTimeout(() => { this.setState({ showAdvancedModeSettings: false }) }, PANEL_ANIMATION_TIMING) diff --git a/lib/components/util/prefersReducedMotion.tsx b/lib/components/util/prefersReducedMotion.tsx index e15c19594..69e13b7d4 100644 --- a/lib/components/util/prefersReducedMotion.tsx +++ b/lib/components/util/prefersReducedMotion.tsx @@ -1,3 +1,9 @@ +/** + * Identifies whether the user's machine has "reduced motion" enabled + * in their local settings. If reduced motion is on, the app should + * show as few animations & transitions as possible. + * @returns boolean reflecting whether user prefers reduced motion + */ export const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches From 31520af3b3acaae3947fc8de381cd0f62ab962a2 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:46:13 -0500 Subject: [PATCH 12/74] Sort css --- lib/components/form/advanced-settings-panel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 593371c32..0e3ed0306 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -27,14 +27,14 @@ const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` ` const CloseButton = styled.button` - border: none; background: transparent; + border: none; ` const HeaderContainer = styled.div` + align-items: center; display: flex; justify-content: space-between; - align-items: center; ` const AdvancedSettingsPanel = ({ From a6ca364d2735cde8c731a89a961ed1630582e47c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 11 Jun 2024 09:43:33 -0500 Subject: [PATCH 13/74] update animation from homepage to advanced settings --- lib/components/app/batch-routing-panel.tsx | 73 ++++++++++++++----- .../form/advanced-settings-panel.tsx | 7 +- 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 514225b6c..d53ffc992 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -10,6 +10,8 @@ import BatchSettings from '../form/batch-settings' import InvisibleA11yLabel from '../util/invisible-a11y-label' import LocationField from '../form/connected-location-field' import NarrativeItineraries from '../narrative/narrative-itineraries' +import styled, { css, keyframes } from 'styled-components' + import SwitchButton from '../form/switch-button' import UserSettings from '../form/user-settings' import ViewerContainer from '../viewers/viewer-container' @@ -22,6 +24,22 @@ interface Props { showUserSettings: boolean } +const wipeLeft = keyframes` + 0% { transform: translateX(0); opacity: 100%;} + 55% { opacity: 0% } + 100% { transform: translateX(-75px); opacity: 0%;} +` + +const animationString = css` + animation: ${wipeLeft} ${PANEL_ANIMATION_TIMING}ms linear forwards; +` + +const WipeLeftContent = styled.div<{ fade: boolean; reverse: boolean }>` + ${(props) => props.fade && animationString}; + animation-direction: ${(props) => props.reverse && 'reverse'}; + height: 100%; +` + /** * Main panel for the batch/trip comparison form. */ @@ -29,6 +47,7 @@ class BatchRoutingPanel extends Component { state = { fade: false, planTripClicked: false, + reverse: false, showAdvancedModeSettings: false } @@ -58,10 +77,10 @@ class BatchRoutingPanel extends Component { } handleCloseAdvanceSettings = () => { - this.setState({ fade: false }) + this.setState({ fade: false, reverse: true }) // Allow Advanced Settings panel to finish animation before removing from DOM setTimeout(() => { - this.setState({ showAdvancedModeSettings: false }) + this.setState({ reverse: false, showAdvancedModeSettings: false }) }, PANEL_ANIMATION_TIMING) } @@ -76,6 +95,8 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) + const reverseKey = !this.state.fade && this.state.reverse ? 'reverse' : '' + return ( { onSubmit={this.handleSubmit} style={{ padding: '10px' }} > + {this.state.showAdvancedModeSettings && ( + + )} {!this.state.fade && ( - <> + { onPlanTripClick={this.handlePlanTripClick} openAdvancedSettings={this.handleOpenAdvanceSettings} /> - - )} - {this.state.showAdvancedModeSettings && ( - + )} - {!activeSearch && showUserSettings && !this.state.fade && ( - - )} {!this.state.fade && ( -
- -
+ {!activeSearch && showUserSettings && ( + + )} + +
+ +
+ )}
) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 0e3ed0306..020ef5e67 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -8,15 +8,14 @@ import React, { useState } from 'react' import styled, { keyframes } from 'styled-components' const panelFlyIn = keyframes` - 0% { left: 100%; opacity: 25% } + 0% { left: 75px; opacity: 0 } + 45% { opacity: 0} 100% { left: 0; opacity: 100% } ` const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms ease-in-out forwards; + animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms linear forwards; animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; - background: white; - box-shadow: 3px 0px 12px #00000052; height: 100vh; left: 0; padding: 1.5em; From 75f8a7f5305fd5a60164b8477c3370997831cc87 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Fri, 14 Jun 2024 16:00:51 +0200 Subject: [PATCH 14/74] messy first pass of bringing in advanced settings from otp ui --- .../form/advanced-settings-panel.tsx | 102 +++++++++++++++++- lib/components/form/batch-settings.tsx | 51 ++------- lib/components/form/util.tsx | 42 ++++++++ lib/util/state-types.ts | 3 + package.json | 2 +- yarn.lock | 17 ++- 6 files changed, 165 insertions(+), 52 deletions(-) create mode 100644 lib/components/form/util.tsx diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 020ef5e67..51c5d08b1 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -1,11 +1,36 @@ +import { + addSettingsToButton, + AdvancedModeSubsettingsContainer, + populateSettingWithValue +} from '@opentripplanner/trip-form' import { Close } from '@styled-icons/fa-solid' +import { connect } from 'react-redux' +import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' +import { + ModeButtonDefinition, + ModeSetting, + ModeSettingValues +} from '@opentripplanner/types' +import React, { useContext, useState } from 'react' +import styled, { keyframes } from 'styled-components' + +import * as apiActions from '../../actions/api' +import * as formActions from '../../actions/form' +import { + addCustomSettingLabels, + addModeButtonIcon, + pipe, + populateSettingWithIcon +} from './util' +import { AppReduxState } from '../../util/state-types' +import { ComponentContext } from '../../util/contexts' +import { generateModeSettingValues } from '../../util/api' import { PANEL_ANIMATION_TIMING } from './styled' +import { setModeButtonEnabled } from './batch-settings' import PageTitle from '../util/page-title' -import React, { useState } from 'react' -import styled, { keyframes } from 'styled-components' const panelFlyIn = keyframes` 0% { left: 75px; opacity: 0 } @@ -37,9 +62,19 @@ const HeaderContainer = styled.div` ` const AdvancedSettingsPanel = ({ - closeAdvancedSettings + closeAdvancedSettings, + enabledModeButtons, + modeButtonOptions, + modeSettingDefinitions, + modeSettingValues, + setQueryParam }: { closeAdvancedSettings: () => void + enabledModeButtons: string[] + modeButtonOptions: ModeButtonDefinition[] + modeSettingDefinitions: ModeSetting[] + modeSettingValues: ModeSettingValues + setQueryParam: (evt: any) => void }): JSX.Element => { const [reverseAnimation, setReverseAnimation] = useState(false) const intl = useIntl() @@ -56,6 +91,25 @@ const AdvancedSettingsPanel = ({ setReverseAnimation(true) } + // @ts-expect-error Context not typed + const { ModeIcon } = useContext(ComponentContext) + + const processedModeSettings = modeSettingDefinitions.map( + pipe( + populateSettingWithIcon(ModeIcon), + populateSettingWithValue(modeSettingValues), + addCustomSettingLabels(intl) + ) + ) + + const processedModeButtons = modeButtonOptions.map( + pipe( + addModeButtonIcon(ModeIcon), + addSettingsToButton(processedModeSettings), + setModeButtonEnabled(enabledModeButtons) + ) + ) + return ( ) } -export default AdvancedSettingsPanel +const queryParamConfig = { modeButtons: DelimitedArrayParam } + +const mapStateToProps = (state: AppReduxState) => { + const urlSearchParams = new URLSearchParams(state.router.location.search) + const modeSettingValues = generateModeSettingValues( + urlSearchParams, + state.otp?.modeSettingDefinitions || [], + state.otp.config.modes?.initialState?.modeSettingValues || {} + ) + return { + currentQuery: state.otp.currentQuery, + // TODO: Duplicated in apiv2.js + enabledModeButtons: + decodeQueryParams(queryParamConfig, { + modeButtons: urlSearchParams.get('modeButtons') + })?.modeButtons?.filter((mb): mb is string => mb !== null) || + state.otp.config?.modes?.initialState?.enabledModeButtons || + [], + modeButtonOptions: state.otp.config?.modes?.modeButtons || [], + modeSettingDefinitions: state.otp?.modeSettingDefinitions || [], + modeSettingValues + } +} + +const mapDispatchToProps = { + routingQuery: apiActions.routingQuery, + setQueryParam: formActions.setQueryParam, + updateQueryTimeIfLeavingNow: formActions.updateQueryTimeIfLeavingNow +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(AdvancedSettingsPanel) diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 2a21201b9..54eb4ebc1 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -29,6 +29,12 @@ import { getFormattedMode } from '../../util/i18n' import { RoutingQueryCallResult } from '../../actions/api-constants' import { StyledIconWrapper } from '../util/styledIcon' +import { + addCustomSettingLabels, + addModeButtonIcon, + pipe, + populateSettingWithIcon +} from './util' import { MainSettingsRow, ModeSelectorContainer, @@ -56,11 +62,6 @@ type Props = { updateQueryTimeIfLeavingNow: () => void } -// This method is used to daisy-chain a series of functions together on a given value -function pipe(...fns: Array<(arg: T) => T>) { - return (value: T) => fns.reduce((acc, fn) => fn(acc), value) -} - export function setModeButtonEnabled(enabledKeys: string[]) { return (modeButton: ModeButtonDefinition): ModeButtonDefinition => { return { @@ -99,51 +100,17 @@ function BatchSettings({ // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) - const addModeButtonIcon = useCallback( - (def: ModeButtonDefinition) => ({ - ...def, - Icon: function ModeButtonIcon() { - return - } - }), - [ModeIcon] - ) - - const populateSettingWithIcon = useCallback( - (msd: ModeSetting) => ({ - ...msd, - icon: - }), - [ModeIcon] - ) - - const addCustomSettingLabels = useCallback( - (msd: ModeSetting) => { - let modeLabel - // If we're using route mode overrides, make sure we're using the custom mode name - if (msd.type === 'SUBMODE') { - modeLabel = msd.overrideMode || msd.addTransportMode.mode - return { - ...msd, - label: getFormattedMode(modeLabel, intl) - } - } - return msd - }, - [intl] - ) - const processedModeSettings = modeSettingDefinitions.map( pipe( - populateSettingWithIcon, + populateSettingWithIcon(ModeIcon), populateSettingWithValue(modeSettingValues), - addCustomSettingLabels + addCustomSettingLabels(intl) ) ) const processedModeButtons = modeButtonOptions.map( pipe( - addModeButtonIcon, + addModeButtonIcon(ModeIcon), addSettingsToButton(processedModeSettings), setModeButtonEnabled(enabledModeButtons) ) diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx new file mode 100644 index 000000000..f424a22b1 --- /dev/null +++ b/lib/components/form/util.tsx @@ -0,0 +1,42 @@ +import { IntlShape } from 'react-intl' +import { ModeButtonDefinition, ModeSetting } from '@opentripplanner/types' +import React from 'react' + +import { getFormattedMode } from '../../util/i18n' + +// This method is used to daisy-chain a series of functions together on a given value +export function pipe(...fns: Array<(arg: T) => T>) { + return (value: T) => fns.reduce((acc, fn) => fn(acc), value) +} + +export const populateSettingWithIcon = + (ModeIcon: React.ComponentType<{ mode?: string; width?: number }>) => + // eslint-disable-next-line react/display-name + (msd: ModeSetting): ModeSetting => ({ + ...msd, + icon: + }) + +export const addModeButtonIcon = + (ModeIcon: React.ComponentType<{ mode?: string; width?: number }>) => + (def: ModeButtonDefinition): ModeButtonDefinition => ({ + ...def, + Icon: function ModeButtonIcon() { + return + } + }) + +export const addCustomSettingLabels = + (intl: IntlShape) => + (msd: ModeSetting): ModeSetting => { + let modeLabel + // If we're using route mode overrides, make sure we're using the custom mode name + if (msd.type === 'SUBMODE') { + modeLabel = msd.overrideMode || msd.addTransportMode.mode + return { + ...msd, + label: getFormattedMode(modeLabel, intl) + } + } + return msd + } diff --git a/lib/util/state-types.ts b/lib/util/state-types.ts index 3daba23c6..99c321a3b 100644 --- a/lib/util/state-types.ts +++ b/lib/util/state-types.ts @@ -5,6 +5,7 @@ import { MonitoredTrip, User } from '../components/user/types' +import { ModeSetting } from '@opentripplanner/types' import { AppConfig } from './config-types' @@ -12,12 +13,14 @@ export interface OtpState { // TODO: Add other OTP states activeSearchId?: string config: AppConfig + currentQuery: any filter: { sort: { type: string } } location: any + modeSettingDefinitions: ModeSetting[] overlay: any serviceTimeRange?: { end: number diff --git a/package.json b/package.json index bf546fa3c..6930291aa 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@opentripplanner/transit-vehicle-overlay": "^4.0.10", "@opentripplanner/transitive-overlay": "^3.0.18", "@opentripplanner/trip-details": "^5.0.11", - "@opentripplanner/trip-form": "^3.6.0", + "@opentripplanner/trip-form": "^3.7.0-alpha.1", "@opentripplanner/trip-viewer-overlay": "^2.0.8", "@opentripplanner/vehicle-rental-overlay": "^2.1.7", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index 2cddcde2c..9e9a4c2ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,19 +2606,21 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@^3.6.0": - version "3.6.0" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.6.0.tgz#e02996e3e21cee951a61522c1c01ea55f978c2b8" - integrity sha512-iV3bQkRhcJxvty7BZ+RUN/ylLmH+twUcveQgHj1HUCkPhEOz98m26ykDYXQhOXP68k/y9PtaLlt+Gzsa6p+8xQ== +"@opentripplanner/trip-form@^3.7.0-alpha.1": + version "3.7.0-alpha.1" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.1.tgz#025c2e4f01f9e7689006eb266c73b48a9afba90c" + integrity sha512-V938paiKZhiKmrtOhAB4gA22LBWfgpLVE6RKzfdKWxVMLnbuGiUiJOWlgDVrdx/DL/IyB5L81GWcu5BIcWQBog== dependencies: "@floating-ui/react" "^0.19.2" - "@opentripplanner/core-utils" "^11.2.3" + "@opentripplanner/building-blocks" "^1.0.3" + "@opentripplanner/core-utils" "^11.4.0" "@styled-icons/bootstrap" "^10.34.0" "@styled-icons/boxicons-regular" "^10.38.0" "@styled-icons/fa-regular" "^10.37.0" "@styled-icons/fa-solid" "^10.37.0" date-fns "^2.28.0" flat "^5.0.2" + react-animate-height "^3.2.3" react-indiana-drag-scroll "^2.0.1" react-inlinesvg "^2.3.0" @@ -15052,6 +15054,11 @@ react-animate-height@^3.0.4: dependencies: classnames "^2.3.1" +react-animate-height@^3.2.3: + version "3.2.3" + resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-3.2.3.tgz#90929aadac1bd1851cb6a685acc105b50ccfda8c" + integrity sha512-R6DSvr7ud07oeCixScyvXWEMJY/Mt2+GyOWC1KMaRc69gOBw+SsCg4TJmrp4rKUM1hyd6p+YKw90brjPH93Y2A== + react-app-polyfill@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf" From fc070976ca9c2d95878d0bf19b3755a99c75bb2f Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:00:16 -0500 Subject: [PATCH 15/74] add react-transition-group to advanced panel --- lib/components/app/batch-routing-panel.tsx | 258 +++++++++++------- .../form/advanced-settings-panel.tsx | 29 +- package.json | 2 + yarn.lock | 17 ++ 4 files changed, 187 insertions(+), 119 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index d53ffc992..41c332fb7 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -1,17 +1,18 @@ import { connect } from 'react-redux' +import { CSSTransition, TransitionGroup } from 'react-transition-group' import { FormattedMessage, injectIntl, IntlShape } from 'react-intl' -import React, { Component, FormEvent } from 'react' import { getActiveSearch, getShowUserSettings } from '../../util/state' import { getPersistenceMode } from '../../util/user' -import { PANEL_ANIMATION_TIMING } from '../form/styled' import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' import InvisibleA11yLabel from '../util/invisible-a11y-label' import LocationField from '../form/connected-location-field' import NarrativeItineraries from '../narrative/narrative-itineraries' -import styled, { css, keyframes } from 'styled-components' +import React, { Component, FormEvent } from 'react' +import styled, { css } from 'styled-components' +import { prefersReducedMotion } from '../util/prefersReducedMotion' import SwitchButton from '../form/switch-button' import UserSettings from '../form/user-settings' import ViewerContainer from '../viewers/viewer-container' @@ -24,20 +25,59 @@ interface Props { showUserSettings: boolean } -const wipeLeft = keyframes` - 0% { transform: translateX(0); opacity: 100%;} - 55% { opacity: 0% } - 100% { transform: translateX(-75px); opacity: 0%;} +const advancedPanelClassName = 'advanced-panel' +const mainPanelClassName = 'main-panel' +const wipeOffset = 7 +const transitionDuration = prefersReducedMotion ? 0 : 200 + +const transitionMixin = css` + transition: all ${transitionDuration}ms ease-in; ` -const animationString = css` - animation: ${wipeLeft} ${PANEL_ANIMATION_TIMING}ms linear forwards; +const wipeOutMixin = (offset: number) => css` + transform: translateX(${offset}px); + opacity: 0; +` +const wipeInMixin = css` + transform: translateX(0px); + opacity: 1; ` -const WipeLeftContent = styled.div<{ fade: boolean; reverse: boolean }>` - ${(props) => props.fade && animationString}; - animation-direction: ${(props) => props.reverse && 'reverse'}; - height: 100%; +const TransitionStyles = styled.div` + display: contents; + .${advancedPanelClassName}-enter { + ${wipeOutMixin(wipeOffset)} + } + .${advancedPanelClassName}-enter-done { + ${wipeInMixin} + ${transitionMixin} + } + + .${advancedPanelClassName}-exit { + ${wipeInMixin} + } + + .${advancedPanelClassName}-exit-active { + ${wipeOutMixin(wipeOffset)} + ${transitionMixin} + } + + .${mainPanelClassName}-enter { + ${wipeOutMixin(-wipeOffset)} + } + .${mainPanelClassName}-enter-done { + ${wipeInMixin} + ${transitionMixin} + } + + .${mainPanelClassName}-exit { + ${wipeInMixin} + } + + .${mainPanelClassName}-exit-active { + ${wipeOutMixin(-wipeOffset)} + ${transitionMixin} + } ` /** @@ -45,12 +85,15 @@ const WipeLeftContent = styled.div<{ fade: boolean; reverse: boolean }>` */ class BatchRoutingPanel extends Component { state = { - fade: false, planTripClicked: false, reverse: false, showAdvancedModeSettings: false } + _advancedSettingRef = React.createRef() + _mainPanelContentRef = React.createRef() + _itinerariesAndUserRef = React.createRef() + componentDidUpdate(prevProps: Readonly): void { // Close the advanced mode settings if we navigate to another page if ( @@ -58,7 +101,9 @@ class BatchRoutingPanel extends Component { this.props.mainPanelContent !== null && this.state.showAdvancedModeSettings ) { - this.setState({ fade: false, showAdvancedModeSettings: false }) + this.setState({ + showAdvancedModeSettings: false + }) } } @@ -70,18 +115,10 @@ class BatchRoutingPanel extends Component { handleOpenAdvanceSettings = () => { this.setState({ showAdvancedModeSettings: true }) - // Allow Advanced Settings panel to finish animation before removing form from DOM - setTimeout(() => { - this.setState({ fade: true }) - }, PANEL_ANIMATION_TIMING) } handleCloseAdvanceSettings = () => { - this.setState({ fade: false, reverse: true }) - // Allow Advanced Settings panel to finish animation before removing from DOM - setTimeout(() => { - this.setState({ reverse: false, showAdvancedModeSettings: false }) - }, PANEL_ANIMATION_TIMING) + this.setState({ showAdvancedModeSettings: false }) } render() { @@ -95,8 +132,6 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) - const reverseKey = !this.state.fade && this.state.reverse ? 'reverse' : '' - return ( { height: '100%' }} > - -

- -

-
-
- {this.state.showAdvancedModeSettings && ( - + + {!this.state.showAdvancedModeSettings && ( + +

+ +

+
)} - {!this.state.fade && ( - - - - + + {this.state.showAdvancedModeSettings && ( + + + + )} + + {!this.state.showAdvancedModeSettings && ( + this.setState({ showAdvancedModeSettings: true }) + // eslint-disable-next-line react/jsx-curly-newline + } + timeout={transitionDuration} + > +
+ + + +
+ +
+
+ +
+
+ )} +
+ + + {!this.state.showAdvancedModeSettings && ( + +
+ {!activeSearch && showUserSettings && ( + )} - isRequired - locationType="to" - selfValidate={planTripClicked} - showClearButton={!mobile} - /> -
- + +
+ +
- - - - )} - - {!this.state.fade && ( - - {!activeSearch && showUserSettings && ( - + )} - -
- -
-
- )} + + ) } diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 020ef5e67..19285695f 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -2,22 +2,12 @@ import { Close } from '@styled-icons/fa-solid' import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' -import { PANEL_ANIMATION_TIMING } from './styled' import PageTitle from '../util/page-title' -import React, { useState } from 'react' -import styled, { keyframes } from 'styled-components' +import React, { RefObject } from 'react' +import styled from 'styled-components' -const panelFlyIn = keyframes` - 0% { left: 75px; opacity: 0 } - 45% { opacity: 0} - 100% { left: 0; opacity: 100% } -` - -const PanelOverlay = styled.div<{ reverseAnimation: boolean }>` - animation: ${panelFlyIn} ${PANEL_ANIMATION_TIMING}ms linear forwards; - animation-direction: ${(props) => props.reverseAnimation && 'reverse'}; +const PanelOverlay = styled.div` height: 100vh; - left: 0; padding: 1.5em; position: absolute; top: 0; @@ -37,13 +27,13 @@ const HeaderContainer = styled.div` ` const AdvancedSettingsPanel = ({ - closeAdvancedSettings + closeAdvancedSettings, + innerRef }: { closeAdvancedSettings: () => void + innerRef: RefObject }): JSX.Element => { - const [reverseAnimation, setReverseAnimation] = useState(false) const intl = useIntl() - const key = reverseAnimation.toString() const closeButtonText = intl.formatMessage({ id: 'components.BatchSearchScreen.closeAdvancedPreferences' }) @@ -53,15 +43,10 @@ const AdvancedSettingsPanel = ({ const closePanel = () => { closeAdvancedSettings() - setReverseAnimation(true) } return ( - +

{headerText}

diff --git a/package.json b/package.json index bf546fa3c..e3e28ec89 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@styled-icons/fa-solid": "^10.34.0", "@turf/centroid": "^6.5.0", "@turf/helpers": "^6.5.0", + "@types/react-transition-group": "^4.4.10", "blob-stream": "^0.1.3", "bootstrap": "^3.3.7", "bowser": "^1.9.3", @@ -118,6 +119,7 @@ "react-router-dom": "^5.3.4", "react-select": "^3.1.0", "react-sliding-pane": "^7.0.0", + "react-transition-group": "^4.4.5", "redux": "^4.0.4", "redux-actions": "^1.2.1", "redux-logger": "^2.7.4", diff --git a/yarn.lock b/yarn.lock index 2cddcde2c..6f2ee2bfa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3618,6 +3618,13 @@ "@types/history" "^4.7.11" "@types/react" "*" +"@types/react-transition-group@^4.4.10": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@17": version "17.0.38" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" @@ -15455,6 +15462,16 @@ react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@<17.0.0: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" From 9af5feb3e39103fb226a0e70df0da36394899e80 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:25:28 -0500 Subject: [PATCH 16/74] Fix innerRef --- lib/components/form/advanced-settings-panel.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index b32eb6939..581790138 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -10,8 +10,8 @@ import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' import PageTitle from '../util/page-title' -import React from 'react' -import styled, { keyframes } from 'styled-components' +import React, { RefObject } from 'react' +import styled from 'styled-components' const PanelOverlay = styled.div` height: 100vh; @@ -34,9 +34,11 @@ const HeaderContainer = styled.div` ` const AdvancedSettingsPanel = ({ - closeAdvancedSettings + closeAdvancedSettings, + innerRef }: { closeAdvancedSettings: () => void + innerRef: RefObject }): JSX.Element => { const intl = useIntl() const closeButtonText = intl.formatMessage({ From 55a26dcdda44c931e99118f7b014fcdd66f5f2cf Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:34:30 -0500 Subject: [PATCH 17/74] cleanup and address PR feedback --- lib/components/form/advanced-settings-panel.tsx | 2 +- lib/components/form/batch-settings.tsx | 6 ++---- lib/components/form/styled.ts | 4 ---- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 581790138..ab9b89f81 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -75,6 +75,7 @@ const AdvancedSettingsPanel = ({ +

{headerText}

- {/** * Date time selector goes here */} diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 54eb4ebc1..c4fa0dff3 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -55,7 +55,7 @@ type Props = { modeSettingDefinitions: ModeSetting[] modeSettingValues: ModeSettingValues onPlanTripClick: () => void - openAdvancedSettings?: () => void + openAdvancedSettings: () => void routingQuery: any setQueryParam: (evt: any) => void spacedOutModeSelector?: boolean @@ -210,9 +210,7 @@ function BatchSettings({ // Prevent the hover on date/time selector when mode selector has a popup open via keyboard. style={{ pointerEvents: modeSelectorPopup ? 'none' : undefined }} /> - {openAdvancedSettings && ( - - )} + Date: Fri, 14 Jun 2024 14:56:00 -0500 Subject: [PATCH 18/74] Add react-transition-group for mobile screens --- lib/components/app/batch-routing-panel.tsx | 63 +--------- .../form/advanced-settings-panel.tsx | 2 + lib/components/form/styled.ts | 57 +++++++++ lib/components/mobile/batch-search-screen.tsx | 116 ++++++++++-------- 4 files changed, 133 insertions(+), 105 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 41c332fb7..574e4ef8d 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -10,9 +10,13 @@ import InvisibleA11yLabel from '../util/invisible-a11y-label' import LocationField from '../form/connected-location-field' import NarrativeItineraries from '../narrative/narrative-itineraries' import React, { Component, FormEvent } from 'react' -import styled, { css } from 'styled-components' -import { prefersReducedMotion } from '../util/prefersReducedMotion' +import { + advancedPanelClassName, + mainPanelClassName, + transitionDuration, + TransitionStyles +} from '../form/styled' import SwitchButton from '../form/switch-button' import UserSettings from '../form/user-settings' import ViewerContainer from '../viewers/viewer-container' @@ -25,61 +29,6 @@ interface Props { showUserSettings: boolean } -const advancedPanelClassName = 'advanced-panel' -const mainPanelClassName = 'main-panel' -const wipeOffset = 7 -const transitionDuration = prefersReducedMotion ? 0 : 200 - -const transitionMixin = css` - transition: all ${transitionDuration}ms ease-in; -` - -const wipeOutMixin = (offset: number) => css` - transform: translateX(${offset}px); - opacity: 0; -` -const wipeInMixin = css` - transform: translateX(0px); - opacity: 1; -` - -const TransitionStyles = styled.div` - display: contents; - .${advancedPanelClassName}-enter { - ${wipeOutMixin(wipeOffset)} - } - .${advancedPanelClassName}-enter-done { - ${wipeInMixin} - ${transitionMixin} - } - - .${advancedPanelClassName}-exit { - ${wipeInMixin} - } - - .${advancedPanelClassName}-exit-active { - ${wipeOutMixin(wipeOffset)} - ${transitionMixin} - } - - .${mainPanelClassName}-enter { - ${wipeOutMixin(-wipeOffset)} - } - .${mainPanelClassName}-enter-done { - ${wipeInMixin} - ${transitionMixin} - } - - .${mainPanelClassName}-exit { - ${wipeInMixin} - } - - .${mainPanelClassName}-exit-active { - ${wipeOutMixin(-wipeOffset)} - ${transitionMixin} - } -` - /** * Main panel for the batch/trip comparison form. */ diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index ab9b89f81..195652a86 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -14,7 +14,9 @@ import React, { RefObject } from 'react' import styled from 'styled-components' const PanelOverlay = styled.div` + background-color: #fff; height: 100vh; + left: 0; padding: 1.5em; position: absolute; top: 0; diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 06e9449f7..2b4fd2ade 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -5,6 +5,7 @@ import { Styled as TripFormClasses } from '@opentripplanner/trip-form' import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled' +import { prefersReducedMotion } from '../util/prefersReducedMotion' import LocationField from '@opentripplanner/location-field' import styled, { css } from 'styled-components' @@ -230,3 +231,59 @@ export const StyledLocationField = styled(LocationField)` } } ` + +export const advancedPanelClassName = 'advanced-panel' +export const mainPanelClassName = 'main-panel' +export const transitionDuration = prefersReducedMotion ? 0 : 200 + +const wipeOffset = 7 + +const transitionMixin = css` + transition: all ${transitionDuration}ms ease-in; +` + +const wipeOutMixin = (offset: number) => css` + transform: translateX(${offset}px); + opacity: 0; +` +const wipeInMixin = css` + transform: translateX(0px); + opacity: 1; +` + +export const TransitionStyles = styled.div` + display: contents; + .${advancedPanelClassName}-enter { + ${wipeOutMixin(wipeOffset)} + } + .${advancedPanelClassName}-enter-done { + ${wipeInMixin} + ${transitionMixin} + } + + .${advancedPanelClassName}-exit { + ${wipeInMixin} + } + + .${advancedPanelClassName}-exit-active { + ${wipeOutMixin(wipeOffset)} + ${transitionMixin} + } + + .${mainPanelClassName}-enter { + ${wipeOutMixin(-wipeOffset)} + } + .${mainPanelClassName}-enter-done { + ${wipeInMixin} + ${transitionMixin} + } + + .${mainPanelClassName}-exit { + ${wipeInMixin} + } + + .${mainPanelClassName}-exit-active { + ${wipeOutMixin(-wipeOffset)} + ${transitionMixin} + } +` diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 755295b38..49d500c71 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -3,8 +3,15 @@ import { injectIntl, IntlShape } from 'react-intl' import React, { Component } from 'react' import * as uiActions from '../../actions/ui' +import { + advancedPanelClassName, + mainPanelClassName, + transitionDuration, + TransitionStyles +} from '../form/styled' +import { CSSTransition, TransitionGroup } from 'react-transition-group' + import { MobileScreens } from '../../actions/ui-constants' -import { PANEL_ANIMATION_TIMING } from '../form/styled' import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' import DefaultMap from '../map/default-map' @@ -24,7 +31,6 @@ interface Props { class BatchSearchScreen extends Component { state = { - fade: false, planTripClicked: false, showAdvancedModeSettings: false } @@ -33,24 +39,19 @@ class BatchSearchScreen extends Component { _toFieldClicked = () => this.props.setMobileScreen(SET_TO_LOCATION) + _mainPanelContentRef = React.createRef() + _advancedSettingRef = React.createRef() + handlePlanTripClick = () => { this.setState({ planTripClicked: true }) } handleOpenAdvanceSettings = () => { this.setState({ showAdvancedModeSettings: true }) - // Allow Advanced Settings panel to finish animation before removing form from DOM - setTimeout(() => { - this.setState({ fade: true }) - }, PANEL_ANIMATION_TIMING) } handleCloseAdvanceSettings = () => { - this.setState({ fade: false }) - // Allow Advanced Settings panel to finish animation before removing from DOM - setTimeout(() => { - this.setState({ showAdvancedModeSettings: false }) - }, PANEL_ANIMATION_TIMING) + this.setState({ showAdvancedModeSettings: false }) } render() { @@ -65,43 +66,62 @@ class BatchSearchScreen extends Component { />
- {!this.state.fade && ( - <> - - -
- -
- - - )} - - {this.state.showAdvancedModeSettings && ( - - )} + + + {!this.state.showAdvancedModeSettings && ( + +
+ + +
+ +
+ +
+
+ )} + {this.state.showAdvancedModeSettings && ( + + + + )} +
+
From 96e4bc8b54c0806a6913d5ead1115a0145edf976 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 15:05:08 -0500 Subject: [PATCH 19/74] fix bad merge --- .../form/advanced-settings-panel.tsx | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 195652a86..1ae2c6294 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -8,10 +8,28 @@ import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' +import { + ModeButtonDefinition, + ModeSetting, + ModeSettingValues +} from '@opentripplanner/types' +import React, { RefObject, useContext } from 'react' +import styled from 'styled-components' + +import * as apiActions from '../../actions/api' +import * as formActions from '../../actions/form' +import { + addCustomSettingLabels, + addModeButtonIcon, + pipe, + populateSettingWithIcon +} from './util' +import { AppReduxState } from '../../util/state-types' +import { ComponentContext } from '../../util/contexts' +import { generateModeSettingValues } from '../../util/api' +import { setModeButtonEnabled } from './batch-settings' import PageTitle from '../util/page-title' -import React, { RefObject } from 'react' -import styled from 'styled-components' const PanelOverlay = styled.div` background-color: #fff; @@ -37,10 +55,20 @@ const HeaderContainer = styled.div` const AdvancedSettingsPanel = ({ closeAdvancedSettings, - innerRef + enabledModeButtons, + innerRef, + modeButtonOptions, + modeSettingDefinitions, + modeSettingValues, + setQueryParam }: { closeAdvancedSettings: () => void + enabledModeButtons: string[] innerRef: RefObject + modeButtonOptions: ModeButtonDefinition[] + modeSettingDefinitions: ModeSetting[] + modeSettingValues: ModeSettingValues + setQueryParam: (evt: any) => void }): JSX.Element => { const intl = useIntl() const closeButtonText = intl.formatMessage({ From 5eb6f417a9123efea7464aed68812bf04608bec4 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Sat, 15 Jun 2024 10:00:09 +0200 Subject: [PATCH 20/74] upgrade trip-form downgrade animate height --- package.json | 2 +- yarn.lock | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index ab79eac3c..223be4fe6 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@opentripplanner/transit-vehicle-overlay": "^4.0.10", "@opentripplanner/transitive-overlay": "^3.0.18", "@opentripplanner/trip-details": "^5.0.11", - "@opentripplanner/trip-form": "^3.7.0-alpha.1", + "@opentripplanner/trip-form": "^3.7.0-alpha.2", "@opentripplanner/trip-viewer-overlay": "^2.0.8", "@opentripplanner/vehicle-rental-overlay": "^2.1.7", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index a4b02a879..9965bf9ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,10 +2606,10 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@^3.7.0-alpha.1": - version "3.7.0-alpha.1" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.1.tgz#025c2e4f01f9e7689006eb266c73b48a9afba90c" - integrity sha512-V938paiKZhiKmrtOhAB4gA22LBWfgpLVE6RKzfdKWxVMLnbuGiUiJOWlgDVrdx/DL/IyB5L81GWcu5BIcWQBog== +"@opentripplanner/trip-form@^3.7.0-alpha.2": + version "3.7.0-alpha.2" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.2.tgz#295b4a8a9233be41fb5db036a390aef0fd3d0e93" + integrity sha512-fWfpI6RGYvFeSNAnBks7kYMXjcIIhzkjdg/FOvuVbYfA2JXqojZxswQX7L0n3lgX/MpDLwM3wI7TvpEcQ6ng+g== dependencies: "@floating-ui/react" "^0.19.2" "@opentripplanner/building-blocks" "^1.0.3" @@ -2620,7 +2620,7 @@ "@styled-icons/fa-solid" "^10.37.0" date-fns "^2.28.0" flat "^5.0.2" - react-animate-height "^3.2.3" + react-animate-height "^3.0.4" react-indiana-drag-scroll "^2.0.1" react-inlinesvg "^2.3.0" @@ -15061,11 +15061,6 @@ react-animate-height@^3.0.4: dependencies: classnames "^2.3.1" -react-animate-height@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-3.2.3.tgz#90929aadac1bd1851cb6a685acc105b50ccfda8c" - integrity sha512-R6DSvr7ud07oeCixScyvXWEMJY/Mt2+GyOWC1KMaRc69gOBw+SsCg4TJmrp4rKUM1hyd6p+YKw90brjPH93Y2A== - react-app-polyfill@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf" From 55511879e8f272403688bdf301f39a6fa006f446 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Sat, 15 Jun 2024 10:20:08 +0200 Subject: [PATCH 21/74] finish wiring up advanced settings pane --- .../form/advanced-settings-panel.tsx | 11 +++-- lib/components/form/batch-settings.tsx | 46 ++++--------------- lib/components/form/util.tsx | 29 ++++++++++++ 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 1ae2c6294..3e4157be0 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -22,8 +22,10 @@ import * as formActions from '../../actions/form' import { addCustomSettingLabels, addModeButtonIcon, + onSettingsUpdate, pipe, - populateSettingWithIcon + populateSettingWithIcon, + setModeButton } from './util' import { AppReduxState } from '../../util/state-types' import { ComponentContext } from '../../util/contexts' @@ -134,8 +136,11 @@ const AdvancedSettingsPanel = ({ fillModeIcons label="test" modeButtons={processedModeButtons} - onSettingsUpdate={setQueryParam} - onToggleModeButton={setQueryParam} + onSettingsUpdate={onSettingsUpdate(setQueryParam)} + onToggleModeButton={setModeButton( + enabledModeButtons, + onSettingsUpdate(setQueryParam) + )} /> diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index c4fa0dff3..aecaef103 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -25,15 +25,17 @@ import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' import { getActiveSearch, hasValidLocation } from '../../util/state' import { getBaseColor, getDarkenedBaseColor } from '../util/colors' -import { getFormattedMode } from '../../util/i18n' import { RoutingQueryCallResult } from '../../actions/api-constants' import { StyledIconWrapper } from '../util/styledIcon' import { addCustomSettingLabels, addModeButtonIcon, + modesQueryParamConfig, + onSettingsUpdate, pipe, - populateSettingWithIcon + populateSettingWithIcon, + setModeButton } from './util' import { MainSettingsRow, @@ -43,8 +45,6 @@ import { import AdvancedSettingsButton from './advanced-settings-button' import DateTimeButton from './date-time-button' -const queryParamConfig = { modeButtons: DelimitedArrayParam } - // TYPESCRIPT TODO: better types type Props = { activeSearch: any @@ -159,35 +159,6 @@ function BatchSettings({ updateQueryTimeIfLeavingNow ]) - /** - * Stores parameters in both the Redux `currentQuery` and URL - * @param params Params to store - */ - const _onSettingsUpdate = useCallback( - (params: any) => { - setQueryParam({ queryParamData: params, ...params }) - }, - [setQueryParam] - ) - - const _toggleModeButton = useCallback( - (buttonId: string, newState: boolean) => { - let newButtons - if (newState) { - newButtons = [...enabledModeButtons, buttonId] - } else { - newButtons = enabledModeButtons.filter((c) => c !== buttonId) - } - - // encodeQueryParams serializes the mode buttons for the URL - // to get nice looking URL params and consistency - _onSettingsUpdate( - encodeQueryParams(queryParamConfig, { modeButtons: newButtons }) - ) - }, - [enabledModeButtons, _onSettingsUpdate] - ) - /** * Check whether the mode selector is showing a popup. */ @@ -224,8 +195,11 @@ function BatchSettings({ id: 'components.BatchSearchScreen.modeSelectorLabel' })} modeButtons={processedModeButtons} - onSettingsUpdate={_onSettingsUpdate} - onToggleModeButton={_toggleModeButton} + onSettingsUpdate={onSettingsUpdate(setQueryParam)} + onToggleModeButton={setModeButton( + enabledModeButtons, + onSettingsUpdate(setQueryParam) + )} /> { currentQuery: state.otp.currentQuery, // TODO: Duplicated in apiv2.js enabledModeButtons: - decodeQueryParams(queryParamConfig, { + decodeQueryParams(modesQueryParamConfig, { modeButtons: urlSearchParams.get('modeButtons') })?.modeButtons || state.otp.config?.modes?.initialState?.enabledModeButtons || diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index f424a22b1..12aeeead0 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -1,3 +1,4 @@ +import { DelimitedArrayParam, encodeQueryParams } from 'serialize-query-params' import { IntlShape } from 'react-intl' import { ModeButtonDefinition, ModeSetting } from '@opentripplanner/types' import React from 'react' @@ -9,6 +10,8 @@ export function pipe(...fns: Array<(arg: T) => T>) { return (value: T) => fns.reduce((acc, fn) => fn(acc), value) } +export const modesQueryParamConfig = { modeButtons: DelimitedArrayParam } + export const populateSettingWithIcon = (ModeIcon: React.ComponentType<{ mode?: string; width?: number }>) => // eslint-disable-next-line react/display-name @@ -40,3 +43,29 @@ export const addCustomSettingLabels = } return msd } + +/** + * Stores parameters in both the Redux `currentQuery` and URL + * @param params Params to store + */ +export const onSettingsUpdate = + (setQueryParam: (evt: any) => void) => (params: any) => { + setQueryParam({ queryParamData: params, ...params }) + } + +export const setModeButton = + (enabledModeButtons: string[], updateHandler: (params: any) => void) => + (buttonId: string, newState: boolean) => { + let newButtons + if (newState) { + newButtons = [...enabledModeButtons, buttonId] + } else { + newButtons = enabledModeButtons.filter((c) => c !== buttonId) + } + + // encodeQueryParams serializes the mode buttons for the URL + // to get nice looking URL params and consistency + updateHandler( + encodeQueryParams(modesQueryParamConfig, { modeButtons: newButtons }) + ) + } From 58e1258d31602099192cfff66fbbdb67410ddd50 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 17 Jun 2024 15:43:15 -0500 Subject: [PATCH 22/74] tweak styling and remove focustrapwrapper --- .../form/advanced-settings-panel.tsx | 78 +++++++++---------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 3e4157be0..9c7ae9013 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -6,7 +6,6 @@ import { import { Close } from '@styled-icons/fa-solid' import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' -import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { FormattedMessage, useIntl } from 'react-intl' import { ModeButtonDefinition, @@ -35,13 +34,14 @@ import PageTitle from '../util/page-title' const PanelOverlay = styled.div` background-color: #fff; - height: 100vh; + height: 100%; left: 0; padding: 1.5em; position: absolute; top: 0; width: 100%; z-index: 100; + overflow-y: scroll; ` const CloseButton = styled.button` @@ -105,44 +105,42 @@ const AdvancedSettingsPanel = ({ return ( - - - -

{headerText}

- - - -
- {/** - * Date time selector goes here - */} -

- -

- {/** - * Trip options (walk speed, walk reluctance, accessible routing) go here - */} -

- -

- {/** - * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here - */} - -
+ + +

{headerText}

+ + + +
+ {/** + * Date time selector goes here + */} +

+ +

+ {/** + * Trip options (walk speed, walk reluctance, accessible routing) go here + */} +

+ +

+ {/** + * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here + */} +
) } From e4ee080d9c2e7e2c6c97fea685ce8887aec47bf2 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 18 Jun 2024 17:19:37 -0500 Subject: [PATCH 23/74] Update accentColor for AdvancedModeSubsettingsContainer and update alpha package --- .../form/advanced-settings-panel.tsx | 26 +++++++++++++------ package.json | 2 +- yarn.lock | 8 +++--- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 9c7ae9013..6a97db93f 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -1,22 +1,32 @@ +import * as apiActions from '../../actions/api' +import * as formActions from '../../actions/form' import { addSettingsToButton, AdvancedModeSubsettingsContainer, populateSettingWithValue } from '@opentripplanner/trip-form' +import { AppReduxState } from '../../util/state-types' +import { blue, getBaseColor } from '../util/colors' + import { Close } from '@styled-icons/fa-solid' + +import { ComponentContext } from '../../util/contexts' + import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FormattedMessage, useIntl } from 'react-intl' + +import { generateModeSettingValues } from '../../util/api' + import { ModeButtonDefinition, ModeSetting, ModeSettingValues } from '@opentripplanner/types' -import React, { RefObject, useContext } from 'react' -import styled from 'styled-components' -import * as apiActions from '../../actions/api' -import * as formActions from '../../actions/form' +import PageTitle from '../util/page-title' + +import React, { RefObject, useContext } from 'react' import { addCustomSettingLabels, @@ -26,11 +36,9 @@ import { populateSettingWithIcon, setModeButton } from './util' -import { AppReduxState } from '../../util/state-types' -import { ComponentContext } from '../../util/contexts' -import { generateModeSettingValues } from '../../util/api' import { setModeButtonEnabled } from './batch-settings' -import PageTitle from '../util/page-title' + +import styled from 'styled-components' const PanelOverlay = styled.div` background-color: #fff; @@ -54,6 +62,7 @@ const HeaderContainer = styled.div` display: flex; justify-content: space-between; ` +const baseColor = getBaseColor() !== 'fff' ? getBaseColor() : blue[900] const AdvancedSettingsPanel = ({ closeAdvancedSettings, @@ -132,6 +141,7 @@ const AdvancedSettingsPanel = ({ * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here */} Date: Tue, 18 Jun 2024 17:29:29 -0500 Subject: [PATCH 24/74] Turn h2 into subheader component --- lib/components/form/advanced-settings-panel.tsx | 15 +++++++++++---- lib/components/viewers/viewers.css | 7 ------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 6a97db93f..7f9ebd061 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -62,6 +62,13 @@ const HeaderContainer = styled.div` display: flex; justify-content: space-between; ` + +const Subheader = styled.h2` + display: block; + font-size: 18px; + font-weight: 700; + margin: 1em 0; +` const baseColor = getBaseColor() !== 'fff' ? getBaseColor() : blue[900] const AdvancedSettingsPanel = ({ @@ -128,15 +135,15 @@ const AdvancedSettingsPanel = ({ {/** * Date time selector goes here */} -

+ -

+ {/** * Trip options (walk speed, walk reluctance, accessible routing) go here */} -

+ -

+ {/** * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here */} diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css index 370da5252..26fd3315a 100644 --- a/lib/components/viewers/viewers.css +++ b/lib/components/viewers/viewers.css @@ -68,13 +68,6 @@ margin: 0; } -.otp .advanced-settings h2.header-text { - display: block; - font-size: 18px; - margin: 1em 0; -} - - .otp .route-viewer .header-text.route-expanded { display: flex; align-items: center; From 5a359ff9045e2c142f4830d079c91db385a45680 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 19 Jun 2024 14:46:14 -0500 Subject: [PATCH 25/74] Create toggle and global settings --- .../form/advanced-settings-panel.tsx | 61 +++++++++++------ lib/components/form/styled.ts | 67 +++++++++++++++++++ 2 files changed, 109 insertions(+), 19 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 7f9ebd061..dbdcc37ee 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -1,17 +1,13 @@ -import * as apiActions from '../../actions/api' -import * as formActions from '../../actions/form' import { addSettingsToButton, AdvancedModeSubsettingsContainer, + ModeSettingRenderer, populateSettingWithValue } from '@opentripplanner/trip-form' -import { AppReduxState } from '../../util/state-types' -import { blue, getBaseColor } from '../util/colors' +import { blue, getBaseColor } from '../util/colors' import { Close } from '@styled-icons/fa-solid' -import { ComponentContext } from '../../util/contexts' - import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FormattedMessage, useIntl } from 'react-intl' @@ -24,9 +20,14 @@ import { ModeSettingValues } from '@opentripplanner/types' +import * as apiActions from '../../actions/api' +import * as formActions from '../../actions/form' +import { AppReduxState } from '../../util/state-types' +import { ComponentContext } from '../../util/contexts' import PageTitle from '../util/page-title' import React, { RefObject, useContext } from 'react' +import styled from 'styled-components' import { addCustomSettingLabels, @@ -37,8 +38,7 @@ import { setModeButton } from './util' import { setModeButtonEnabled } from './batch-settings' - -import styled from 'styled-components' +import { styledCheckboxCss } from './styled' const PanelOverlay = styled.div` background-color: #fff; @@ -52,6 +52,14 @@ const PanelOverlay = styled.div` overflow-y: scroll; ` +const GlobalSettingsContainer = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + + ${styledCheckboxCss} +` + const CloseButton = styled.button` background: transparent; border: none; @@ -69,7 +77,7 @@ const Subheader = styled.h2` font-weight: 700; margin: 1em 0; ` -const baseColor = getBaseColor() !== 'fff' ? getBaseColor() : blue[900] +const baseColor = getBaseColor() || blue[900] const AdvancedSettingsPanel = ({ closeAdvancedSettings, @@ -103,14 +111,29 @@ const AdvancedSettingsPanel = ({ // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) - const processedModeSettings = modeSettingDefinitions.map( - pipe( - populateSettingWithIcon(ModeIcon), - populateSettingWithValue(modeSettingValues), - addCustomSettingLabels(intl) + const processSettings = (settings: any) => + settings.map( + pipe( + populateSettingWithIcon(ModeIcon), + populateSettingWithValue(modeSettingValues), + addCustomSettingLabels(intl) + ) + ) + + const globalSettings = modeSettingDefinitions.filter((x) => !x.applicableMode) + const processedGlobalSettings = processSettings(globalSettings) + + const globalSettingsComponents = processedGlobalSettings.map( + (setting: any) => ( + ) ) + const processedModeSettings = processSettings(modeSettingDefinitions) const processedModeButtons = modeButtonOptions.map( pipe( addModeButtonIcon(ModeIcon), @@ -135,13 +158,13 @@ const AdvancedSettingsPanel = ({ {/** * Date time selector goes here */} - + - {/** - * Trip options (walk speed, walk reluctance, accessible routing) go here - */} - + + {globalSettingsComponents} + + {/** diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 2b4fd2ade..f42da3c64 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -287,3 +287,70 @@ export const TransitionStyles = styled.div` ${transitionMixin} } ` + +const toggleTransition = css` + transition: all 150ms ease-in; +` + +export const styledCheckboxCss = css` + & > div { + width: 100%; + margin-left: 0; + } + input[type='checkbox'] + label { + align-items: center; + display: flex; + position: relative; + justify-content: space-between; + width: 100%; + + &::after { + content: ''; + position: relative; + width: 33px; + height: 22px; + background-color: ${grey[600]}; + border-radius: 20px; + ${toggleTransition}; + cursor: pointer; + } + + &::before { + content: ''; + position: absolute; + width: 18px; + height: 18px; + background-color: white; + border-radius: 100%; + right: 13px; + z-index: 99; + ${toggleTransition}; + cursor: pointer; + } + } + + input[type='checkbox'] { + clip: rect(0, 0, 0, 0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; + + &:checked + label { + &::after { + background-color: ${blue[700]}; + ${toggleTransition}; + } + + &::before { + right: 2px; + ${toggleTransition}; + box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; + } + } + + &:focus-visible + label { + outline: 1px solid blue; + } + } +` From 96555b83d3e9ba29d351f82b204abe226f1d53fa Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 19 Jun 2024 15:43:04 -0500 Subject: [PATCH 26/74] fix passing accent color to AdvancedModeSubsettingsContainer --- lib/components/form/advanced-settings-panel.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index dbdcc37ee..612ac30d1 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -77,7 +77,8 @@ const Subheader = styled.h2` font-weight: 700; margin: 1em 0; ` -const baseColor = getBaseColor() || blue[900] +const baseColor = getBaseColor() +const accentColor = baseColor || blue[900] const AdvancedSettingsPanel = ({ closeAdvancedSettings, @@ -171,7 +172,7 @@ const AdvancedSettingsPanel = ({ * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here */} Date: Wed, 19 Jun 2024 15:43:04 -0500 Subject: [PATCH 27/74] fix passing accent color to AdvancedModeSubsettingsContainer --- lib/components/form/advanced-settings-panel.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 7f9ebd061..546fb4686 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -69,7 +69,8 @@ const Subheader = styled.h2` font-weight: 700; margin: 1em 0; ` -const baseColor = getBaseColor() !== 'fff' ? getBaseColor() : blue[900] +const baseColor = getBaseColor() +const accentColor = baseColor || blue[900] const AdvancedSettingsPanel = ({ closeAdvancedSettings, @@ -148,7 +149,7 @@ const AdvancedSettingsPanel = ({ * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here */} Date: Wed, 19 Jun 2024 16:05:34 -0500 Subject: [PATCH 28/74] remove unnecessary classname from subheader --- lib/components/form/advanced-settings-panel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 546fb4686..0c99d20d7 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -136,13 +136,13 @@ const AdvancedSettingsPanel = ({ {/** * Date time selector goes here */} - + {/** * Trip options (walk speed, walk reluctance, accessible routing) go here */} - + {/** From cb142d08f9c297eb35943389a2f2d4d2e74c0253 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 21 Jun 2024 12:10:48 -0500 Subject: [PATCH 29/74] update otp-ui and animation durations --- lib/components/form/styled.ts | 2 +- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 2b4fd2ade..a10c063b5 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -234,7 +234,7 @@ export const StyledLocationField = styled(LocationField)` export const advancedPanelClassName = 'advanced-panel' export const mainPanelClassName = 'main-panel' -export const transitionDuration = prefersReducedMotion ? 0 : 200 +export const transitionDuration = prefersReducedMotion ? 0 : 175 const wipeOffset = 7 diff --git a/package.json b/package.json index 43dd2e15f..dc15e32c9 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@opentripplanner/transit-vehicle-overlay": "^4.0.10", "@opentripplanner/transitive-overlay": "^3.0.18", "@opentripplanner/trip-details": "^5.0.11", - "@opentripplanner/trip-form": "^3.7.0-alpha.3", + "@opentripplanner/trip-form": "^3.7.0-alpha.4", "@opentripplanner/trip-viewer-overlay": "^2.0.8", "@opentripplanner/vehicle-rental-overlay": "^2.1.7", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index 9a7d23f86..2f8ec9bcf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,10 +2606,10 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@^3.7.0-alpha.3": - version "3.7.0-alpha.3" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.3.tgz#dcda6ab782ec8a487245486c377b17c491770f00" - integrity sha512-TabCfcLjNINddX9QHDPwSdMkrMlFKLR0QfGU56h9YLZdwJP1+guOmD0TvdmikG+VaqXiGFHgMZJlYOEmgY07+Q== +"@opentripplanner/trip-form@^3.7.0-alpha.4": + version "3.7.0-alpha.4" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.4.tgz#595b41c7d6d598939e2899a350ac0046acf131ce" + integrity sha512-uVkiP9qU1RSHo2ffm+tBIsnf/1pc8id0Giyy5Y61iQswDRmXh8ubTz/LUuhC3fiAYOwm3kYnHZ01tmwQ9XIvTQ== dependencies: "@floating-ui/react" "^0.19.2" "@opentripplanner/building-blocks" "^1.0.3" From c7d2b92c97fb47286c83e4e9ca12fb3495e7be51 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 21 Jun 2024 16:09:19 -0500 Subject: [PATCH 30/74] remove unecessary closepanel function --- lib/components/form/advanced-settings-panel.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 0c99d20d7..76f5d7e24 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -97,10 +97,6 @@ const AdvancedSettingsPanel = ({ id: 'components.BatchSearchScreen.advancedHeader' }) - const closePanel = () => { - closeAdvancedSettings() - } - // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) @@ -127,7 +123,7 @@ const AdvancedSettingsPanel = ({

{headerText}

From 4f3ccf09976ada76194c607250b722f91a4a3575 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 21 Jun 2024 16:29:06 -0500 Subject: [PATCH 31/74] remove unnecessary comment --- lib/components/form/advanced-settings-panel.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 87962f8d3..da61de324 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -165,9 +165,6 @@ const AdvancedSettingsPanel = ({ - {/** - * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here - */} Date: Tue, 25 Jun 2024 12:52:39 -0500 Subject: [PATCH 32/74] fix: overflow bug on itinerary results --- lib/components/app/batch-routing-panel.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 574e4ef8d..0ef568403 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -162,7 +162,7 @@ class BatchRoutingPanel extends Component { )} - + {!this.state.showAdvancedModeSettings && ( { >
{!activeSearch && showUserSettings && ( )} -
From 8d75fb9befe30b7655d93633b877016769e6394c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 1 Jul 2024 13:39:58 -0500 Subject: [PATCH 33/74] Make subheaders invisible and address feedback --- lib/components/form/advanced-settings-panel.tsx | 13 +++++++------ lib/components/form/styled.ts | 5 +++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index da61de324..7f1cd955e 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -37,6 +37,9 @@ import { populateSettingWithIcon, setModeButton } from './util' + +import { invisibleCss } from '@opentripplanner/trip-form/lib/MetroModeSelector' + import { setModeButtonEnabled } from './batch-settings' import { styledCheckboxCss } from './styled' @@ -56,6 +59,7 @@ const GlobalSettingsContainer = styled.div` display: flex; flex-direction: column; gap: 10px; + margin: 2em 0; ${styledCheckboxCss} ` @@ -72,10 +76,7 @@ const HeaderContainer = styled.div` ` const Subheader = styled.h2` - display: block; - font-size: 18px; - font-weight: 700; - margin: 1em 0; + ${invisibleCss} ` const baseColor = getBaseColor() const accentColor = baseColor || blue[900] @@ -108,7 +109,7 @@ const AdvancedSettingsPanel = ({ // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) - const processSettings = (settings: any) => + const processSettings = (settings: ModeSetting[]) => settings.map( pipe( populateSettingWithIcon(ModeIcon), @@ -121,7 +122,7 @@ const AdvancedSettingsPanel = ({ const processedGlobalSettings = processSettings(globalSettings) const globalSettingsComponents = processedGlobalSettings.map( - (setting: any) => ( + (setting: ModeSetting) => ( Date: Mon, 1 Jul 2024 13:55:58 -0500 Subject: [PATCH 34/74] adjust form for if there are no processedGlobalSettings --- .../form/advanced-settings-panel.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 7f1cd955e..c2b09213e 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -59,7 +59,7 @@ const GlobalSettingsContainer = styled.div` display: flex; flex-direction: column; gap: 10px; - margin: 2em 0; + margin-bottom: 2em; ${styledCheckboxCss} ` @@ -73,6 +73,7 @@ const HeaderContainer = styled.div` align-items: center; display: flex; justify-content: space-between; + margin-bottom: 2em; ` const Subheader = styled.h2` @@ -156,13 +157,16 @@ const AdvancedSettingsPanel = ({ {/** * Date time selector goes here */} - - - - - - {globalSettingsComponents} - + {processedGlobalSettings.length > 0 && ( + <> + + + + + {globalSettingsComponents} + + + )} From 71128ac670621ccee1aa494fc60be86c6e0c63fa Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:11:53 -0500 Subject: [PATCH 35/74] Add Plan trip and back buttons to advanced trip form --- lib/components/app/batch-routing-panel.tsx | 6 ++ .../form/advanced-settings-panel.tsx | 68 +++++++++++++++---- lib/components/form/batch-settings.tsx | 51 ++------------ lib/components/form/util.tsx | 45 ++++++++++++ lib/components/mobile/batch-search-screen.tsx | 5 ++ 5 files changed, 116 insertions(+), 59 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 0ef568403..2038ef335 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -18,6 +18,9 @@ import { TransitionStyles } from '../form/styled' import SwitchButton from '../form/switch-button' + +import toast from 'react-hot-toast' + import UserSettings from '../form/user-settings' import ViewerContainer from '../viewers/viewer-container' @@ -67,6 +70,8 @@ class BatchRoutingPanel extends Component { } handleCloseAdvanceSettings = () => { + const { intl } = this.props + toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) this.setState({ showAdvancedModeSettings: false }) } @@ -113,6 +118,7 @@ class BatchRoutingPanel extends Component { )} diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 76f5d7e24..2ecfadebc 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -1,23 +1,15 @@ -import * as apiActions from '../../actions/api' -import * as formActions from '../../actions/form' import { addSettingsToButton, AdvancedModeSubsettingsContainer, populateSettingWithValue } from '@opentripplanner/trip-form' -import { AppReduxState } from '../../util/state-types' -import { blue, getBaseColor } from '../util/colors' - import { Close } from '@styled-icons/fa-solid' - -import { ComponentContext } from '../../util/contexts' - import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FormattedMessage, useIntl } from 'react-intl' +import { Search } from '@styled-icons/fa-solid/Search' import { generateModeSettingValues } from '../../util/api' - import { ModeButtonDefinition, ModeSetting, @@ -28,20 +20,30 @@ import PageTitle from '../util/page-title' import React, { RefObject, useContext } from 'react' +import * as apiActions from '../../actions/api' +import * as formActions from '../../actions/form' + import { addCustomSettingLabels, addModeButtonIcon, + alertUserTripPlan, onSettingsUpdate, pipe, populateSettingWithIcon, setModeButton } from './util' +import { AppReduxState } from '../../util/state-types' import { setModeButtonEnabled } from './batch-settings' +import { blue, getBaseColor } from '../util/colors' +import { ComponentContext } from '../../util/contexts' + import styled from 'styled-components' +const baseColor = getBaseColor() +const accentColor = baseColor || blue[900] + const PanelOverlay = styled.div` - background-color: #fff; height: 100%; left: 0; padding: 1.5em; @@ -69,24 +71,52 @@ const Subheader = styled.h2` font-weight: 700; margin: 1em 0; ` -const baseColor = getBaseColor() -const accentColor = baseColor || blue[900] + +const PlanTripButton = styled.button` + align-items: center; + display: flex; + justify-content: center; + gap: 0.5em; + background-color: ${baseColor}; + border: 0; + width: 45%; + height: 51px; + color: white; + font-weight: 700; +` + +const ReturnToTripPlanButton = styled(PlanTripButton)` + border: 2px solid ${baseColor}; + background-color: white; + color: ${baseColor}; +` +const ButtonContainer = styled.div` + display: flex; + justify-content: space-between; + margin-top: 2em; +` const AdvancedSettingsPanel = ({ closeAdvancedSettings, + currentQuery, enabledModeButtons, innerRef, modeButtonOptions, modeSettingDefinitions, modeSettingValues, + onPlanTripClick, + routingQuery, setQueryParam }: { closeAdvancedSettings: () => void + currentQuery: any enabledModeButtons: string[] innerRef: RefObject modeButtonOptions: ModeButtonDefinition[] modeSettingDefinitions: ModeSetting[] modeSettingValues: ModeSettingValues + onPlanTripClick: () => void + routingQuery: () => void setQueryParam: (evt: any) => void }): JSX.Element => { const intl = useIntl() @@ -100,6 +130,11 @@ const AdvancedSettingsPanel = ({ // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) + const planTrip = () => { + alertUserTripPlan(intl, currentQuery, onPlanTripClick, routingQuery) + closeAdvancedSettings() + } + const processedModeSettings = modeSettingDefinitions.map( pipe( populateSettingWithIcon(ModeIcon), @@ -155,6 +190,15 @@ const AdvancedSettingsPanel = ({ onSettingsUpdate(setQueryParam) )} /> + + + Back to Trip Plan + + + + + + ) } diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index aecaef103..1c50355a7 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -4,11 +4,7 @@ import { populateSettingWithValue } from '@opentripplanner/trip-form' import { connect } from 'react-redux' -import { - decodeQueryParams, - DelimitedArrayParam, - encodeQueryParams -} from 'use-query-params' +import { decodeQueryParams } from 'use-query-params' import { ModeButtonDefinition, ModeSetting, @@ -25,12 +21,12 @@ import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' import { getActiveSearch, hasValidLocation } from '../../util/state' import { getBaseColor, getDarkenedBaseColor } from '../util/colors' -import { RoutingQueryCallResult } from '../../actions/api-constants' import { StyledIconWrapper } from '../util/styledIcon' import { addCustomSettingLabels, addModeButtonIcon, + alertUserTripPlan, modesQueryParamConfig, onSettingsUpdate, pipe, @@ -117,47 +113,8 @@ function BatchSettings({ ) const _planTrip = useCallback(() => { - // Check for any validation issues in query. - const issues = [] - if (!hasValidLocation(currentQuery, 'from')) { - issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' })) - } - if (!hasValidLocation(currentQuery, 'to')) { - issues.push( - intl.formatMessage({ id: 'components.BatchSettings.destination' }) - ) - } - onPlanTripClick && onPlanTripClick() - if (issues.length > 0) { - // TODO: replace with less obtrusive validation. - window.alert( - intl.formatMessage( - { id: 'components.BatchSettings.validationMessage' }, - { issues: intl.formatList(issues, { type: 'conjunction' }) } - ) - ) - return - } - - // Plan trip. - updateQueryTimeIfLeavingNow() - const routingQueryResult = routingQuery() - - // If mode combination is not valid (i.e. produced no query), alert the user. - if (routingQueryResult === RoutingQueryCallResult.INVALID_MODE_SELECTION) { - window.alert( - intl.formatMessage({ - id: 'components.BatchSettings.invalidModeSelection' - }) - ) - } - }, [ - currentQuery, - intl, - onPlanTripClick, - routingQuery, - updateQueryTimeIfLeavingNow - ]) + alertUserTripPlan(intl, currentQuery, onPlanTripClick, routingQuery) + }, [currentQuery, intl, onPlanTripClick, routingQuery]) /** * Check whether the mode selector is showing a popup. diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index 12aeeead0..662d68273 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -4,6 +4,9 @@ import { ModeButtonDefinition, ModeSetting } from '@opentripplanner/types' import React from 'react' import { getFormattedMode } from '../../util/i18n' +import { hasValidLocation } from '../../util/state' +import { RoutingQueryCallResult } from '../../actions/api-constants' +import { updateQueryTimeIfLeavingNow } from '../../actions/form' // This method is used to daisy-chain a series of functions together on a given value export function pipe(...fns: Array<(arg: T) => T>) { @@ -69,3 +72,45 @@ export const setModeButton = encodeQueryParams(modesQueryParamConfig, { modeButtons: newButtons }) ) } + +export const alertUserTripPlan = ( + intl, + currentQuery, + onPlanTripClick, + routingQuery +) => { + // Check for any validation issues in query. + const issues = [] + if (!hasValidLocation(currentQuery, 'from')) { + issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' })) + } + if (!hasValidLocation(currentQuery, 'to')) { + issues.push( + intl.formatMessage({ id: 'components.BatchSettings.destination' }) + ) + } + onPlanTripClick && onPlanTripClick() + if (issues.length > 0) { + // TODO: replace with less obtrusive validation. + window.alert( + intl.formatMessage( + { id: 'components.BatchSettings.validationMessage' }, + { issues: intl.formatList(issues, { type: 'conjunction' }) } + ) + ) + return + } + + // Plan trip. + updateQueryTimeIfLeavingNow() + const routingQueryResult = routingQuery() + + // If mode combination is not valid (i.e. produced no query), alert the user. + if (routingQueryResult === RoutingQueryCallResult.INVALID_MODE_SELECTION) { + window.alert( + intl.formatMessage({ + id: 'components.BatchSettings.invalidModeSelection' + }) + ) + } +} diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 49d500c71..e84b0a0fd 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -21,6 +21,8 @@ import SwitchButton from '../form/switch-button' import MobileContainer from './container' import MobileNavigationBar from './navigation-bar' +import toast from 'react-hot-toast' + const { SET_FROM_LOCATION, SET_TO_LOCATION } = MobileScreens interface Props { @@ -51,7 +53,9 @@ class BatchSearchScreen extends Component { } handleCloseAdvanceSettings = () => { + const { intl } = this.props this.setState({ showAdvancedModeSettings: false }) + toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) } render() { @@ -117,6 +121,7 @@ class BatchSearchScreen extends Component { )} From 176145f38ec5b7855e7af1bdb3508615b2ca5a2e Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Tue, 9 Jul 2024 20:50:44 +0100 Subject: [PATCH 36/74] address PR comments --- lib/components/app/batch-routing-panel.tsx | 19 ++++++++----------- .../form/advanced-settings-panel.tsx | 19 +++++++------------ lib/components/form/util.tsx | 14 +++++++------- lib/components/mobile/batch-search-screen.tsx | 6 ++---- 4 files changed, 24 insertions(+), 34 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 2038ef335..e81354323 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -1,15 +1,8 @@ import { connect } from 'react-redux' import { CSSTransition, TransitionGroup } from 'react-transition-group' import { FormattedMessage, injectIntl, IntlShape } from 'react-intl' - -import { getActiveSearch, getShowUserSettings } from '../../util/state' -import { getPersistenceMode } from '../../util/user' -import AdvancedSettingsPanel from '../form/advanced-settings-panel' -import BatchSettings from '../form/batch-settings' -import InvisibleA11yLabel from '../util/invisible-a11y-label' -import LocationField from '../form/connected-location-field' -import NarrativeItineraries from '../narrative/narrative-itineraries' import React, { Component, FormEvent } from 'react' +import toast from 'react-hot-toast' import { advancedPanelClassName, @@ -17,10 +10,14 @@ import { transitionDuration, TransitionStyles } from '../form/styled' +import { getActiveSearch, getShowUserSettings } from '../../util/state' +import { getPersistenceMode } from '../../util/user' +import AdvancedSettingsPanel from '../form/advanced-settings-panel' +import BatchSettings from '../form/batch-settings' +import InvisibleA11yLabel from '../util/invisible-a11y-label' +import LocationField from '../form/connected-location-field' +import NarrativeItineraries from '../narrative/narrative-itineraries' import SwitchButton from '../form/switch-button' - -import toast from 'react-hot-toast' - import UserSettings from '../form/user-settings' import ViewerContainer from '../viewers/viewer-container' diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 2ecfadebc..db0f74b05 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -7,21 +7,22 @@ import { Close } from '@styled-icons/fa-solid' import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FormattedMessage, useIntl } from 'react-intl' -import { Search } from '@styled-icons/fa-solid/Search' - -import { generateModeSettingValues } from '../../util/api' import { ModeButtonDefinition, ModeSetting, ModeSettingValues } from '@opentripplanner/types' - -import PageTitle from '../util/page-title' - +import { Search } from '@styled-icons/fa-solid/Search' import React, { RefObject, useContext } from 'react' +import styled from 'styled-components' import * as apiActions from '../../actions/api' import * as formActions from '../../actions/form' +import { AppReduxState } from '../../util/state-types' +import { blue, getBaseColor } from '../util/colors' +import { ComponentContext } from '../../util/contexts' +import { generateModeSettingValues } from '../../util/api' +import PageTitle from '../util/page-title' import { addCustomSettingLabels, @@ -32,14 +33,8 @@ import { populateSettingWithIcon, setModeButton } from './util' -import { AppReduxState } from '../../util/state-types' import { setModeButtonEnabled } from './batch-settings' -import { blue, getBaseColor } from '../util/colors' -import { ComponentContext } from '../../util/contexts' - -import styled from 'styled-components' - const baseColor = getBaseColor() const accentColor = baseColor || blue[900] diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index 662d68273..23b5ab8fe 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -74,13 +74,13 @@ export const setModeButton = } export const alertUserTripPlan = ( - intl, - currentQuery, - onPlanTripClick, - routingQuery -) => { + intl: IntlShape, + currentQuery: any, + onPlanTripClick: () => void, + routingQuery: () => any +): void => { // Check for any validation issues in query. - const issues = [] + const issues: string[] = [] if (!hasValidLocation(currentQuery, 'from')) { issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' })) } @@ -89,7 +89,7 @@ export const alertUserTripPlan = ( intl.formatMessage({ id: 'components.BatchSettings.destination' }) ) } - onPlanTripClick && onPlanTripClick() + onPlanTripClick() if (issues.length > 0) { // TODO: replace with less obtrusive validation. window.alert( diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index e84b0a0fd..77ba3302a 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -1,6 +1,8 @@ import { connect } from 'react-redux' +import { CSSTransition, TransitionGroup } from 'react-transition-group' import { injectIntl, IntlShape } from 'react-intl' import React, { Component } from 'react' +import toast from 'react-hot-toast' import * as uiActions from '../../actions/ui' import { @@ -9,8 +11,6 @@ import { transitionDuration, TransitionStyles } from '../form/styled' -import { CSSTransition, TransitionGroup } from 'react-transition-group' - import { MobileScreens } from '../../actions/ui-constants' import AdvancedSettingsPanel from '../form/advanced-settings-panel' import BatchSettings from '../form/batch-settings' @@ -21,8 +21,6 @@ import SwitchButton from '../form/switch-button' import MobileContainer from './container' import MobileNavigationBar from './navigation-bar' -import toast from 'react-hot-toast' - const { SET_FROM_LOCATION, SET_TO_LOCATION } = MobileScreens interface Props { From f96bd5427c37d3621e5c018268dcd30310e5b008 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Tue, 9 Jul 2024 23:45:07 +0100 Subject: [PATCH 37/74] fix issue with base color race condition --- lib/components/form/advanced-settings-panel.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index f0c239254..6763185a1 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -39,9 +39,6 @@ import { setModeButton } from './util' -const baseColor = getBaseColor() -const accentColor = baseColor || blue[900] - const PanelOverlay = styled.div` height: 100%; left: 0; @@ -83,7 +80,7 @@ const PlanTripButton = styled.button` display: flex; justify-content: center; gap: 0.5em; - background-color: ${baseColor}; + background-color: var(--main-base-color, ${blue[900]}); border: 0; width: 45%; height: 51px; @@ -92,9 +89,9 @@ const PlanTripButton = styled.button` ` const ReturnToTripPlanButton = styled(PlanTripButton)` - border: 2px solid ${baseColor}; + border: 2px solid var(--main-base-color, ${blue[900]}); background-color: white; - color: ${baseColor}; + color: var(--main-base-color, ${blue[900]}); ` const ButtonContainer = styled.div` display: flex; @@ -125,6 +122,9 @@ const AdvancedSettingsPanel = ({ routingQuery: () => void setQueryParam: (evt: any) => void }): JSX.Element => { + const baseColor = getBaseColor() + const accentColor = baseColor || blue[900] + const intl = useIntl() const closeButtonText = intl.formatMessage({ id: 'components.BatchSearchScreen.closeAdvancedPreferences' From d390bb7b77cb29b4a076d2ac515c1db4a233d416 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 9 Jul 2024 23:11:38 -0400 Subject: [PATCH 38/74] refactor(AdvancedSettingsPanel): sort imports --- lib/components/form/advanced-settings-panel.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 6763185a1..c36a77396 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -24,9 +24,6 @@ import { AppReduxState } from '../../util/state-types' import { blue, getBaseColor } from '../util/colors' import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' - -import { setModeButtonEnabled } from './batch-settings' -import { styledCheckboxCss } from './styled' import PageTitle from '../util/page-title' import { @@ -38,6 +35,8 @@ import { populateSettingWithIcon, setModeButton } from './util' +import { setModeButtonEnabled } from './batch-settings' +import { styledCheckboxCss } from './styled' const PanelOverlay = styled.div` height: 100%; From 52906bcc2de8a020c1273b3b638784665e5fd8ab Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:28:22 -0500 Subject: [PATCH 39/74] fix when toast announces changes saved --- lib/components/app/batch-routing-panel.tsx | 3 --- lib/components/form/advanced-settings-panel.tsx | 10 ++++++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index e81354323..b7a1778bf 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -2,7 +2,6 @@ import { connect } from 'react-redux' import { CSSTransition, TransitionGroup } from 'react-transition-group' import { FormattedMessage, injectIntl, IntlShape } from 'react-intl' import React, { Component, FormEvent } from 'react' -import toast from 'react-hot-toast' import { advancedPanelClassName, @@ -67,8 +66,6 @@ class BatchRoutingPanel extends Component { } handleCloseAdvanceSettings = () => { - const { intl } = this.props - toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) this.setState({ showAdvancedModeSettings: false }) } diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index c36a77396..192420c21 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -25,6 +25,7 @@ import { blue, getBaseColor } from '../util/colors' import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' import PageTitle from '../util/page-title' +import toast from 'react-hot-toast' import { addCustomSettingLabels, @@ -140,6 +141,11 @@ const AdvancedSettingsPanel = ({ closeAdvancedSettings() } + const closeAndAnnounce = () => { + closeAdvancedSettings() + toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) + } + const processSettings = (settings: ModeSetting[]) => settings.map( pipe( @@ -178,7 +184,7 @@ const AdvancedSettingsPanel = ({

{headerText}

@@ -212,7 +218,7 @@ const AdvancedSettingsPanel = ({ )} /> - + Back to Trip Plan From ee9e579b55e53e0a6edebcd7c13c6b019643c06b Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:30:40 -0500 Subject: [PATCH 40/74] fix width on advanced-panel buttons --- lib/components/form/advanced-settings-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 192420c21..34afe9ca6 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -82,7 +82,7 @@ const PlanTripButton = styled.button` gap: 0.5em; background-color: var(--main-base-color, ${blue[900]}); border: 0; - width: 45%; + width: 47%; height: 51px; color: white; font-weight: 700; From b2f864763333d72729c5cde95c8cdf91941d9257 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:35:38 -0500 Subject: [PATCH 41/74] fix height container bug AGAIN --- lib/components/app/batch-routing-panel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 0ef568403..17895747c 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -182,6 +182,7 @@ class BatchRoutingPanel extends Component { className="desktop-narrative-container" style={{ flexGrow: 1, + height: '100%', overflowY: 'hidden' }} > From be55193d771d29459b7dc06d195a6f4ba88e8c5c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:44:57 -0500 Subject: [PATCH 42/74] use variables in toggle checkboxes --- lib/components/form/styled.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index f9816f938..0ecf13634 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -1,4 +1,4 @@ -import { blue, getBaseColor, grey } from '../util/colors' +import { blue, grey } from '../util/colors' import { DateTimeSelector, SettingsSelectorPanel, @@ -235,7 +235,6 @@ export const StyledLocationField = styled(LocationField)` export const advancedPanelClassName = 'advanced-panel' export const mainPanelClassName = 'main-panel' export const transitionDuration = prefersReducedMotion ? 0 : 175 -const baseColor = getBaseColor() const wipeOffset = 7 @@ -339,7 +338,7 @@ export const styledCheckboxCss = css` &:checked + label { &::after { - background-color: ${baseColor || blue[700]}; + background-color: var(--main-base-color, ${blue[700]}); ${toggleTransition}; } From 1c495497f65e2599c112bf408670be23626c44ff Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 16:41:38 -0500 Subject: [PATCH 43/74] remove unnecessary toast from mobile --- lib/components/mobile/batch-search-screen.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 77ba3302a..d2aab6a9f 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -51,9 +51,7 @@ class BatchSearchScreen extends Component { } handleCloseAdvanceSettings = () => { - const { intl } = this.props this.setState({ showAdvancedModeSettings: false }) - toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) } render() { From 04401767bf9ce8405e1ba91876bc67a0ec78e78c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 10 Jul 2024 17:42:46 -0500 Subject: [PATCH 44/74] Change mobile container height on advanced panel open --- lib/components/mobile/batch-search-screen.tsx | 31 +++++++++++++++---- lib/components/mobile/mobile.css | 13 +------- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index d2aab6a9f..556700742 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -2,7 +2,7 @@ import { connect } from 'react-redux' import { CSSTransition, TransitionGroup } from 'react-transition-group' import { injectIntl, IntlShape } from 'react-intl' import React, { Component } from 'react' -import toast from 'react-hot-toast' +import styled from 'styled-components' import * as uiActions from '../../actions/ui' import { @@ -23,6 +23,20 @@ import MobileNavigationBar from './navigation-bar' const { SET_FROM_LOCATION, SET_TO_LOCATION } = MobileScreens +const MobileSearchSettings = styled.div<{ advancedPanelOpen: boolean }>` + background: white; + box-shadow: 3px 0px 12px #00000052; + position: fixed; + top: 50px; + left: 0; + right: 0; + transition: all 200ms ease; + height: ${(props) => + props.advancedPanelOpen ? 'calc(100% - 50px)' : '230px'}; + /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */ + z-index: 999; +` + interface Props { intl: IntlShape map: React.ReactElement @@ -56,7 +70,7 @@ class BatchSearchScreen extends Component { render() { const { intl } = this.props - const { planTripClicked } = this.state + const { planTripClicked, showAdvancedModeSettings } = this.state return ( { })} />
-
+ - {!this.state.showAdvancedModeSettings && ( + {!showAdvancedModeSettings && ( {
)} - {this.state.showAdvancedModeSettings && ( + {showAdvancedModeSettings && ( { )} -
+
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css index b0b6fb3db..b1197cfbd 100644 --- a/lib/components/mobile/mobile.css +++ b/lib/components/mobile/mobile.css @@ -121,20 +121,9 @@ /* Batch routing search screen */ -.otp.mobile .batch-search-settings { - position: fixed; - top: 50px; - left: 0; - right: 0; - height: 216px; - /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */ - z-index: 999; - box-shadow: 3px 0px 12px #00000052; -} - .otp.mobile .batch-search-map { position: fixed; - top: 266px; + top: 282px; left: 0; right: 0; bottom: 0; From c895829a39d036afb5f1d1600abf7231e8878332 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 11 Jul 2024 13:43:09 -0500 Subject: [PATCH 45/74] update trip-from alpha --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index dc15e32c9..6b9be8d9b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@opentripplanner/transit-vehicle-overlay": "^4.0.10", "@opentripplanner/transitive-overlay": "^3.0.18", "@opentripplanner/trip-details": "^5.0.11", - "@opentripplanner/trip-form": "^3.7.0-alpha.4", + "@opentripplanner/trip-form": "^3.7.0-alpha.5", "@opentripplanner/trip-viewer-overlay": "^2.0.8", "@opentripplanner/vehicle-rental-overlay": "^2.1.7", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index 2f8ec9bcf..5ea291352 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,10 +2606,10 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@^3.7.0-alpha.4": - version "3.7.0-alpha.4" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.4.tgz#595b41c7d6d598939e2899a350ac0046acf131ce" - integrity sha512-uVkiP9qU1RSHo2ffm+tBIsnf/1pc8id0Giyy5Y61iQswDRmXh8ubTz/LUuhC3fiAYOwm3kYnHZ01tmwQ9XIvTQ== +"@opentripplanner/trip-form@^3.7.0-alpha.5": + version "3.7.0-alpha.5" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.5.tgz#326b501807fda4a5b5630d57641ed3a48e2c56f8" + integrity sha512-WrKXIUOmutvZBRdOsJmzprf2AUIOFhcpR/AYI8ev8HmrQeETEbOdWzOlhUr9E9jaPb6+St2Bs6XuHcOtlgWNgw== dependencies: "@floating-ui/react" "^0.19.2" "@opentripplanner/building-blocks" "^1.0.3" From 7edd335573bfddf6e8c54d7f2723e0d7919eac3e Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 11 Jul 2024 13:43:29 -0500 Subject: [PATCH 46/74] add classname for custom styling --- lib/components/form/advanced-settings-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 34afe9ca6..4c2421c10 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -198,7 +198,7 @@ const AdvancedSettingsPanel = ({ - + {globalSettingsComponents} From 248924aee350aab36a41cfbf220439c9597d209a Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 11 Jul 2024 13:43:49 -0500 Subject: [PATCH 47/74] fix react-transition-group d/t bug --- lib/components/form/styled.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 0ecf13634..a0c86426a 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -247,7 +247,6 @@ const wipeOutMixin = (offset: number) => css` opacity: 0; ` const wipeInMixin = css` - transform: translateX(0px); opacity: 1; ` From 58a06681934a0e2f6074ed2ddbd3528a2c6d26c5 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 11 Jul 2024 15:40:51 -0500 Subject: [PATCH 48/74] import dt selector to the advanced settings panel --- .../form/advanced-settings-panel.tsx | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 4c2421c10..57f3b2ac6 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -38,6 +38,7 @@ import { } from './util' import { setModeButtonEnabled } from './batch-settings' import { styledCheckboxCss } from './styled' +import DateTimeModal from './date-time-modal' const PanelOverlay = styled.div` height: 100%; @@ -68,7 +69,6 @@ const HeaderContainer = styled.div` align-items: center; display: flex; justify-content: space-between; - margin-bottom: 2em; ` const Subheader = styled.h2` @@ -99,6 +99,24 @@ const ButtonContainer = styled.div` margin-top: 2em; ` +const DtSelectorContainer = styled.div` + padding: 1em; + margin: 2em 0; + background-color: ${blue[50]}; + + .date-time-modal { + padding: 0; + + .main-panel { + margin: 0; + + .date-time-selector { + margin: 15px 0; + } + } + } +` + const AdvancedSettingsPanel = ({ closeAdvancedSettings, currentQuery, @@ -190,9 +208,9 @@ const AdvancedSettingsPanel = ({ - {/** - * Date time selector goes here - */} + + + {processedGlobalSettings.length > 0 && ( <> From 6baf3f13f0be132ed6b4af694f7f92c3f235b26f Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 11 Jul 2024 15:41:28 -0500 Subject: [PATCH 49/74] remove unneccesary hover + subsettings states in batch settings --- lib/components/form/batch-settings.tsx | 75 +++----------------------- 1 file changed, 8 insertions(+), 67 deletions(-) diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 1c50355a7..3ec0ac155 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -1,15 +1,7 @@ -import { - addSettingsToButton, - MetroModeSelector, - populateSettingWithValue -} from '@opentripplanner/trip-form' import { connect } from 'react-redux' import { decodeQueryParams } from 'use-query-params' -import { - ModeButtonDefinition, - ModeSetting, - ModeSettingValues -} from '@opentripplanner/types' +import { MetroModeSelector } from '@opentripplanner/trip-form' +import { ModeButtonDefinition } from '@opentripplanner/types' import { Search } from '@styled-icons/fa-solid/Search' import { SyncAlt } from '@styled-icons/fa-solid/SyncAlt' import { useIntl } from 'react-intl' @@ -18,19 +10,16 @@ import React, { useCallback, useContext, useState } from 'react' import * as apiActions from '../../actions/api' import * as formActions from '../../actions/form' import { ComponentContext } from '../../util/contexts' -import { generateModeSettingValues } from '../../util/api' import { getActiveSearch, hasValidLocation } from '../../util/state' import { getBaseColor, getDarkenedBaseColor } from '../util/colors' import { StyledIconWrapper } from '../util/styledIcon' import { - addCustomSettingLabels, addModeButtonIcon, alertUserTripPlan, modesQueryParamConfig, onSettingsUpdate, pipe, - populateSettingWithIcon, setModeButton } from './util' import { @@ -48,14 +37,11 @@ type Props = { enabledModeButtons: string[] fillModeIcons?: boolean modeButtonOptions: ModeButtonDefinition[] - modeSettingDefinitions: ModeSetting[] - modeSettingValues: ModeSettingValues onPlanTripClick: () => void openAdvancedSettings: () => void routingQuery: any setQueryParam: (evt: any) => void spacedOutModeSelector?: boolean - updateQueryTimeIfLeavingNow: () => void } export function setModeButtonEnabled(enabledKeys: string[]) { @@ -76,74 +62,37 @@ function BatchSettings({ enabledModeButtons, fillModeIcons, modeButtonOptions, - modeSettingDefinitions, - modeSettingValues, onPlanTripClick, openAdvancedSettings, routingQuery, setQueryParam, - spacedOutModeSelector, - updateQueryTimeIfLeavingNow + spacedOutModeSelector }: Props) { const intl = useIntl() // Whether the date/time selector is open const [dateTimeOpen, setDateTimeOpen] = useState(false) - // Whether the mode selector has a popup open - const [modeSelectorPopup, setModeSelectorPopup] = useState(false) - // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) - const processedModeSettings = modeSettingDefinitions.map( - pipe( - populateSettingWithIcon(ModeIcon), - populateSettingWithValue(modeSettingValues), - addCustomSettingLabels(intl) - ) - ) - const processedModeButtons = modeButtonOptions.map( - pipe( - addModeButtonIcon(ModeIcon), - addSettingsToButton(processedModeSettings), - setModeButtonEnabled(enabledModeButtons) - ) + pipe(addModeButtonIcon(ModeIcon), setModeButtonEnabled(enabledModeButtons)) ) const _planTrip = useCallback(() => { alertUserTripPlan(intl, currentQuery, onPlanTripClick, routingQuery) }, [currentQuery, intl, onPlanTripClick, routingQuery]) - /** - * Check whether the mode selector is showing a popup. - */ - const checkModeSelectorPopup = useCallback(() => { - const modeSelectorPopup = document.querySelector( - '.metro-mode-selector div[role="dialog"]' - ) - setModeSelectorPopup(!!modeSelectorPopup) - }, [setModeSelectorPopup]) - const baseColor = getBaseColor() const accentColor = getDarkenedBaseColor() return ( - - + + - + { const urlSearchParams = new URLSearchParams(state.router.location.search) - const modeSettingValues = generateModeSettingValues( - urlSearchParams, - state.otp?.modeSettingDefinitions || [], - state.otp.config.modes?.initialState?.modeSettingValues - ) return { activeSearch: getActiveSearch(state), currentQuery: state.otp.currentQuery, @@ -201,16 +145,13 @@ const mapStateToProps = (state: any) => { {}, fillModeIcons: state.otp.config.itinerary?.fillModeIcons, modeButtonOptions: state.otp.config?.modes?.modeButtons || [], - modeSettingDefinitions: state.otp?.modeSettingDefinitions || [], - modeSettingValues, spacedOutModeSelector: state.otp?.config?.modes?.spacedOut } } const mapDispatchToProps = { routingQuery: apiActions.routingQuery, - setQueryParam: formActions.setQueryParam, - updateQueryTimeIfLeavingNow: formActions.updateQueryTimeIfLeavingNow + setQueryParam: formActions.setQueryParam } export default connect(mapStateToProps, mapDispatchToProps)(BatchSettings) From d4215c58eff30662b2fd78761ec1b3f69bb221fa Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 12 Jul 2024 11:18:51 -0500 Subject: [PATCH 50/74] fix button padding d/t selector --- lib/components/form/advanced-settings-panel.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 57f3b2ac6..ac8fa72a7 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -110,6 +110,10 @@ const DtSelectorContainer = styled.div` .main-panel { margin: 0; + button { + padding: 6px 0; + } + .date-time-selector { margin: 15px 0; } From c5b1974e8590c5816c754cdced222e155ffcdec9 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:56:54 -0500 Subject: [PATCH 51/74] remove styling on d/t selector, revert checkboxes, move to one button --- .../form/advanced-settings-panel.tsx | 55 ++-------------- lib/components/form/styled.ts | 65 +++---------------- 2 files changed, 15 insertions(+), 105 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index ac8fa72a7..343877e63 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -14,23 +14,19 @@ import { ModeSetting, ModeSettingValues } from '@opentripplanner/types' -import { Search } from '@styled-icons/fa-solid/Search' import React, { RefObject, useContext } from 'react' import styled from 'styled-components' -import * as apiActions from '../../actions/api' import * as formActions from '../../actions/form' import { AppReduxState } from '../../util/state-types' import { blue, getBaseColor } from '../util/colors' import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' import PageTitle from '../util/page-title' -import toast from 'react-hot-toast' import { addCustomSettingLabels, addModeButtonIcon, - alertUserTripPlan, onSettingsUpdate, pipe, populateSettingWithIcon, @@ -54,7 +50,7 @@ const PanelOverlay = styled.div` const GlobalSettingsContainer = styled.div` display: flex; flex-direction: column; - gap: 10px; + gap: 13px; margin-bottom: 2em; ${styledCheckboxCss} @@ -75,34 +71,19 @@ const Subheader = styled.h2` ${invisibleCss} ` -const PlanTripButton = styled.button` - align-items: center; - display: flex; - justify-content: center; - gap: 0.5em; +const ReturnToTripPlanButton = styled.button` background-color: var(--main-base-color, ${blue[900]}); border: 0; - width: 47%; + width: 100%; height: 51px; color: white; font-weight: 700; -` - -const ReturnToTripPlanButton = styled(PlanTripButton)` - border: 2px solid var(--main-base-color, ${blue[900]}); - background-color: white; - color: var(--main-base-color, ${blue[900]}); -` -const ButtonContainer = styled.div` - display: flex; - justify-content: space-between; margin-top: 2em; ` const DtSelectorContainer = styled.div` padding: 1em; margin: 2em 0; - background-color: ${blue[50]}; .date-time-modal { padding: 0; @@ -123,25 +104,20 @@ const DtSelectorContainer = styled.div` const AdvancedSettingsPanel = ({ closeAdvancedSettings, - currentQuery, enabledModeButtons, innerRef, modeButtonOptions, modeSettingDefinitions, modeSettingValues, - onPlanTripClick, - routingQuery, setQueryParam }: { closeAdvancedSettings: () => void - currentQuery: any enabledModeButtons: string[] innerRef: RefObject modeButtonOptions: ModeButtonDefinition[] modeSettingDefinitions: ModeSetting[] modeSettingValues: ModeSettingValues onPlanTripClick: () => void - routingQuery: () => void setQueryParam: (evt: any) => void }): JSX.Element => { const baseColor = getBaseColor() @@ -158,16 +134,6 @@ const AdvancedSettingsPanel = ({ // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) - const planTrip = () => { - alertUserTripPlan(intl, currentQuery, onPlanTripClick, routingQuery) - closeAdvancedSettings() - } - - const closeAndAnnounce = () => { - closeAdvancedSettings() - toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' })) - } - const processSettings = (settings: ModeSetting[]) => settings.map( pipe( @@ -206,7 +172,7 @@ const AdvancedSettingsPanel = ({

{headerText}

@@ -239,15 +205,9 @@ const AdvancedSettingsPanel = ({ onSettingsUpdate(setQueryParam) )} /> - - - Back to Trip Plan - - - - - - + + Save and return + ) } @@ -277,7 +237,6 @@ const mapStateToProps = (state: AppReduxState) => { } const mapDispatchToProps = { - routingQuery: apiActions.routingQuery, setQueryParam: formActions.setQueryParam, updateQueryTimeIfLeavingNow: formActions.updateQueryTimeIfLeavingNow } diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index a0c86426a..41cf8566e 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -286,70 +286,21 @@ export const TransitionStyles = styled.div` ${transitionMixin} } ` - -const toggleTransition = css` - transition: all 150ms ease-in; -` - export const styledCheckboxCss = css` - & > div { - width: 100%; - margin-left: 0; - } - input[type='checkbox'] + label { + div { align-items: center; - display: flex; - position: relative; justify-content: space-between; - width: 100%; - &::after { - content: ''; - position: relative; - width: 33px; - height: 22px; - background-color: ${grey[600]}; - border-radius: 20px; - ${toggleTransition}; - cursor: pointer; - } - - &::before { - content: ''; - position: absolute; - width: 18px; - height: 18px; - background-color: white; - border-radius: 100%; - right: 13px; - z-index: 99; - ${toggleTransition}; - cursor: pointer; + label { + margin-bottom: 0; } - } + input[type='checkbox'] { + margin-top: 0; + order: 2; - input[type='checkbox'] { - clip: rect(0, 0, 0, 0); - height: 0; - overflow: hidden; - position: absolute; - width: 0; - - &:checked + label { - &::after { - background-color: var(--main-base-color, ${blue[700]}); - ${toggleTransition}; + &:focus-visible + label { + outline: 1px solid blue; } - - &::before { - right: 2px; - ${toggleTransition}; - box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; - } - } - - &:focus-visible + label { - outline: 1px solid blue; } } ` From e417ac3a2040ba8e16a2f5df723c1e1388d22eff Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 6 Aug 2024 20:39:08 -0500 Subject: [PATCH 52/74] add save feedback in save button and close button --- i18n/en-US.yml | 3 +- lib/components/app/batch-routing-panel.tsx | 13 ++++-- .../form/advanced-settings-panel.tsx | 43 +++++++++++++++---- lib/components/form/styled.ts | 2 + 4 files changed, 48 insertions(+), 13 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index fdbcbe346..564de34be 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -196,11 +196,12 @@ components: shortTitle: Plan Trip BatchSearchScreen: advancedHeader: Advanced Preferences - closeAdvancedPreferences: Close advanced preferences header: Plan Your Trip modeOptions: Mode Options modeSelectorLabel: Select a travel mode moreOptions: More options + saveAndReturn: Save and return + saved: Saved tripOptions: Trip Options BatchSettings: destination: destination diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 9dc568f17..7ca6507de 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -6,6 +6,7 @@ import React, { Component, FormEvent } from 'react' import { advancedPanelClassName, mainPanelClassName, + transitionDelay, transitionDuration, TransitionStyles } from '../form/styled' @@ -34,7 +35,6 @@ interface Props { class BatchRoutingPanel extends Component { state = { planTripClicked: false, - reverse: false, showAdvancedModeSettings: false } @@ -80,6 +80,8 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) + const transitionDurationWithDelay = transitionDuration + transitionDelay + return ( { { () => this.setState({ showAdvancedModeSettings: true }) // eslint-disable-next-line react/jsx-curly-newline } - timeout={transitionDuration} + timeout={transitionDurationWithDelay} >
@@ -167,7 +172,7 @@ class BatchRoutingPanel extends Component {
void setQueryParam: (evt: any) => void }): JSX.Element => { + const [closingBySave, setClosingBySave] = useState(false) + const [closingByX, setClosingByX] = useState(false) const baseColor = getBaseColor() const accentColor = baseColor || blue[900] const intl = useIntl() const closeButtonText = intl.formatMessage({ - id: 'components.BatchSearchScreen.closeAdvancedPreferences' + id: 'components.BatchSearchScreen.saveAndReturn' }) const headerText = intl.formatMessage({ id: 'components.BatchSearchScreen.advancedHeader' @@ -172,10 +184,13 @@ const AdvancedSettingsPanel = ({

{headerText}

{ + setClosingByX(true) + closeAdvancedSettings() + }} title={closeButtonText} > - + {closingByX ? : } @@ -205,8 +220,20 @@ const AdvancedSettingsPanel = ({ onSettingsUpdate(setQueryParam) )} /> - - Save and return + { + setClosingBySave(true) + closeAdvancedSettings() + }} + > + {closingBySave ? ( + <> + + + + ) : ( + + )} ) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 41cf8566e..a0056a851 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -235,6 +235,7 @@ export const StyledLocationField = styled(LocationField)` export const advancedPanelClassName = 'advanced-panel' export const mainPanelClassName = 'main-panel' export const transitionDuration = prefersReducedMotion ? 0 : 175 +export const transitionDelay = prefersReducedMotion ? 0 : 300 const wipeOffset = 7 @@ -267,6 +268,7 @@ export const TransitionStyles = styled.div` .${advancedPanelClassName}-exit-active { ${wipeOutMixin(wipeOffset)} ${transitionMixin} + transition-delay: ${transitionDelay}ms; } .${mainPanelClassName}-enter { From 62ef9a339c90e3349bc553cfc1c4d756e37f4f4c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 6 Aug 2024 20:49:39 -0500 Subject: [PATCH 53/74] some scroll + padding cleanup --- lib/components/app/batch-routing-panel.tsx | 4 ++-- lib/components/form/advanced-settings-panel.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 7ca6507de..0fb118a1f 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -176,7 +176,7 @@ class BatchRoutingPanel extends Component { >
{!activeSearch && showUserSettings && ( { className="desktop-narrative-container" style={{ flexGrow: 1, - height: '100%', + height: activeSearch ? '100%' : 'auto', overflowY: 'hidden' }} > diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 966ff5094..458f165ea 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -45,7 +45,7 @@ const PanelOverlay = styled.div` top: 0; width: 100%; z-index: 100; - overflow-y: scroll; + overflow-y: auto; ` const GlobalSettingsContainer = styled.div` @@ -92,7 +92,6 @@ const ReturnToTripPlanButton = styled.button` ` const DtSelectorContainer = styled.div` - padding: 1em; margin: 2em 0; .date-time-modal { From 0ae71aafdef09d74633af5a1cf8597a7b174808a Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 6 Aug 2024 20:50:26 -0500 Subject: [PATCH 54/74] update yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 3c481f59b..a96622472 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2393,7 +2393,7 @@ maplibre-gl "^2.1.9" react-map-gl "^7.0.15" -"@opentripplanner/building-blocks@^1.1.0": +"@opentripplanner/building-blocks@^1.0.3", "@opentripplanner/building-blocks@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.1.0.tgz#ef9fe862ce0a3e92c9a6c2c2db749a9a02deebd5" integrity sha512-nx7pU1zIZzJcSkCFYyZ7gt+jd0gXj7bjx8rXn1msgF5uLWmtN/70dsmYNEApeA7haC076KOO3B/Jh44YfXG95g== From 9d907713a9a5f8559e7963881abb3060c6a925d3 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 9 Aug 2024 17:00:58 -0500 Subject: [PATCH 55/74] add button classname for styling --- lib/components/form/advanced-settings-panel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 458f165ea..a76b3f85d 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -220,6 +220,7 @@ const AdvancedSettingsPanel = ({ )} /> { setClosingBySave(true) closeAdvancedSettings() From fc2a0fe7d54a3144a926d8525dda79d38be7d768 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 9 Aug 2024 17:08:06 -0500 Subject: [PATCH 56/74] update packages --- package.json | 10 ++++---- yarn.lock | 72 +++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 59 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 4bd463a0b..370983d21 100644 --- a/package.json +++ b/package.json @@ -44,14 +44,14 @@ "@floating-ui/react": "^0.19.2", "@opentripplanner/base-map": "^3.2.0", "@opentripplanner/building-blocks": "^1.1.0", - "@opentripplanner/core-utils": "^11.4.2", + "@opentripplanner/core-utils": "^11.4.3", "@opentripplanner/endpoints-overlay": "^2.1.1", "@opentripplanner/from-to-location-picker": "^2.1.13", "@opentripplanner/geocoder": "^3.0.1", "@opentripplanner/humanize-distance": "^1.2.0", "@opentripplanner/icons": "^2.0.11", - "@opentripplanner/itinerary-body": "^5.3.3", - "@opentripplanner/location-field": "^2.0.20", + "@opentripplanner/itinerary-body": "^5.3.5", + "@opentripplanner/location-field": "^2.0.22", "@opentripplanner/location-icon": "^1.4.1", "@opentripplanner/map-popup": "^3.1.1", "@opentripplanner/otp2-tile-overlay": "^1.0.12", @@ -61,7 +61,7 @@ "@opentripplanner/stop-viewer-overlay": "^2.0.8", "@opentripplanner/stops-overlay": "^5.3.0", "@opentripplanner/transit-vehicle-overlay": "^4.0.11", - "@opentripplanner/transitive-overlay": "^3.0.18", + "@opentripplanner/transitive-overlay": "^3.0.20", "@opentripplanner/trip-details": "^5.0.13", "@opentripplanner/trip-form": "^3.7.0-alpha.5", "@opentripplanner/trip-viewer-overlay": "^2.0.8", @@ -142,7 +142,7 @@ "@graphql-tools/schema": "^10.0.0", "@jackwilsdon/craco-use-babelrc": "^1.0.0", "@opentripplanner/scripts": "^1.2.0", - "@opentripplanner/types": "^6.5.1", + "@opentripplanner/types": "^6.5.2", "@percy/cli": "^1.20.3", "@percy/puppeteer": "^2.0.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", diff --git a/yarn.lock b/yarn.lock index a96622472..ee53af883 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2398,7 +2398,7 @@ resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.1.0.tgz#ef9fe862ce0a3e92c9a6c2c2db749a9a02deebd5" integrity sha512-nx7pU1zIZzJcSkCFYyZ7gt+jd0gXj7bjx8rXn1msgF5uLWmtN/70dsmYNEApeA7haC076KOO3B/Jh44YfXG95g== -"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0", "@opentripplanner/core-utils@^11.4.2": +"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0": version "11.4.2" resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84" integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA== @@ -2416,6 +2416,24 @@ lodash.isequal "^4.5.0" qs "^6.9.1" +"@opentripplanner/core-utils@^11.4.1", "@opentripplanner/core-utils@^11.4.3": + version "11.4.3" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.3.tgz#4655f9a3bef1977e53abd81a4a0eae966f977c60" + integrity sha512-GbvchRsLfEi9JygUx6ypU+Iqv2hELseC53yQyQ/XdnB1kcHzN71BtBbz+qpD5/jk8IuM92j1taRnGMeu5ni6yA== + dependencies: + "@conveyal/lonlat" "^1.4.1" + "@mapbox/polyline" "^1.1.0" + "@opentripplanner/geocoder" "^3.0.0" + "@styled-icons/foundation" "^10.34.0" + "@turf/along" "^6.0.1" + chroma-js "^2.4.2" + date-fns "^2.28.0" + date-fns-tz "^1.2.2" + graphql "^16.6.0" + lodash.clonedeep "^4.5.0" + lodash.isequal "^4.5.0" + qs "^6.9.1" + "@opentripplanner/endpoints-overlay@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-2.1.1.tgz#e7029d95bd13436aacbc6f854c243d1fcf7e8570" @@ -2460,7 +2478,7 @@ "@opentripplanner/core-utils" "^11.4.0" prop-types "^15.7.2" -"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0", "@opentripplanner/itinerary-body@^5.3.3": +"@opentripplanner/itinerary-body@^5.3.0": version "5.3.3" resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.3.tgz#5202060ccd1a38fd6ed823331a00233a15305957" integrity sha512-3G0szbSObrQh3uliQI6Hx62iCqqpxvrxGo7X69r28S7s8fexoI1B/3B4lRC0D14BUUPaOisE5Rc2N10SjI6MtQ== @@ -2478,13 +2496,31 @@ react-resize-detector "^4.2.1" string-similarity "^4.0.4" -"@opentripplanner/location-field@^2.0.20": - version "2.0.20" - resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.20.tgz#ade02af802ba9295aa73cabc2351da758fcfeb4d" - integrity sha512-sYiemP4v2OmNWRKh2J0soLq9EO53piuJ8I5Du8X6wUfsTIk7yFH+xVLHN1IfA3XPRHy0gE8wEAnWzhxh4Qa+NQ== +"@opentripplanner/itinerary-body@^5.3.5": + version "5.3.5" + resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.5.tgz#e31ea005f374acaf9050653d5e77464d70522fa4" + integrity sha512-Ku/KX+G1wGhNqFUTqjXLGz5cYkujEg2fdnpOhyoKayidQbux+CbX0BkpVBR7DBMkVJsN7wWUWVirfbYFBCCSdA== + dependencies: + "@opentripplanner/core-utils" "^11.4.1" + "@opentripplanner/humanize-distance" "^1.2.0" + "@opentripplanner/icons" "^2.0.10" + "@opentripplanner/location-icon" "^1.4.1" + "@styled-icons/fa-solid" "^10.34.0" + "@styled-icons/foundation" "^10.34.0" + date-fns "^2.28.0" + date-fns-tz "^1.2.2" + flat "^5.0.2" + react-animate-height "^3.0.4" + react-resize-detector "^4.2.1" + string-similarity "^4.0.4" + +"@opentripplanner/location-field@^2.0.22": + version "2.0.22" + resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.22.tgz#9ed68dee8660223d4c25ab78a19baf8cfe7d7ec2" + integrity sha512-OiowT7EJ3UWGQzseaN9oCW1BcsdA4XawQCF/AhTmpT3CUfG7SmzHe6kMcyGSKEqTRiNiJ5hBoTvR49gHdrUToQ== dependencies: "@conveyal/geocoder-arcgis-geojson" "^0.0.3" - "@opentripplanner/core-utils" "^11.4.0" + "@opentripplanner/core-utils" "^11.4.1" "@opentripplanner/geocoder" "^3.0.0" "@opentripplanner/humanize-distance" "^1.2.0" "@opentripplanner/location-icon" "^1.4.1" @@ -2580,15 +2616,15 @@ "@opentripplanner/icons" "^2.0.10" flat "^5.0.2" -"@opentripplanner/transitive-overlay@^3.0.18": - version "3.0.18" - resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.18.tgz#c225564355125a0978061704fa4de3e899902869" - integrity sha512-zOcxhNszDg/87flr3SZ9J53YA5L0P+YFHQc/so4ceuaVXfkCkuaE6WvubG0FFM7Dj7JE+vqbjqz5bEYI6Xj8qg== +"@opentripplanner/transitive-overlay@^3.0.20": + version "3.0.20" + resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.20.tgz#ff794938bdd4a051d52a78b874fd109629740bc9" + integrity sha512-3S8LNTPhipGWLDxP3FSoVXc8ob0K8XsKLMi+NWEl2S8nxQoHAHIWZHh6uIHwOLglQNKuseyhOy9kvIT4QJJPCA== dependencies: "@mapbox/polyline" "^1.1.1" - "@opentripplanner/base-map" "^3.0.16" - "@opentripplanner/core-utils" "^11.2.3" - "@opentripplanner/itinerary-body" "^5.2.6" + "@opentripplanner/base-map" "^3.1.0" + "@opentripplanner/core-utils" "^11.4.1" + "@opentripplanner/itinerary-body" "^5.3.0" "@turf/bbox" "^6.5.0" "@turf/bearing" "^6.5.0" "@turf/destination" "^6.5.0" @@ -2634,10 +2670,10 @@ "@opentripplanner/base-map" "^3.0.16" "@opentripplanner/core-utils" "^11.2.3" -"@opentripplanner/types@^6.5.1": - version "6.5.1" - resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.1.tgz#c19c73e051e516e187e79202de276f6ed3bbc59e" - integrity sha512-5S4otkjzlNLqcbDeMXy3Xi6tcPQgQRoyQZX+uvEdPOTzIERr7wJoltyQCBwi49GX99F+jqyRbd08TJ6SnLapbA== +"@opentripplanner/types@^6.5.2": + version "6.5.2" + resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.2.tgz#1373d738479568d880a3b13670b0ec53a1a75bd5" + integrity sha512-2qDcKOrsLoXdwjRAdi4xcdDUsZGTnwBM+vfEf8TTuuWSnA+WYav3ldlMB4sugxIdLaVKXlOfe3F5lCEh9jAHWA== "@opentripplanner/vehicle-rental-overlay@^2.1.7": version "2.1.7" From 0b27c318ad3cec4ad4bd1a621e290b316bf691a6 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 13 Aug 2024 12:29:53 -0500 Subject: [PATCH 57/74] inline state change function --- lib/components/app/batch-routing-panel.tsx | 19 +++++++++---------- lib/components/mobile/batch-search-screen.tsx | 19 +++++++++---------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 0fb118a1f..fa65d0471 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -61,14 +61,6 @@ class BatchRoutingPanel extends Component { this.setState({ planTripClicked: true }) } - handleOpenAdvanceSettings = () => { - this.setState({ showAdvancedModeSettings: true }) - } - - handleCloseAdvanceSettings = () => { - this.setState({ showAdvancedModeSettings: false }) - } - render() { const { activeSearch, intl, mobile, showUserSettings } = this.props const { planTripClicked } = this.state @@ -115,7 +107,10 @@ class BatchRoutingPanel extends Component { }} > this.setState({ showAdvancedModeSettings: false }) + // eslint-disable-next-line react/jsx-curly-newline + } innerRef={this._advancedSettingRef} onPlanTripClick={this.handlePlanTripClick} /> @@ -160,7 +155,11 @@ class BatchRoutingPanel extends Component { + this.setState({ + showAdvancedModeSettings: true + // eslint-disable-next-line prettier/prettier + })} />
diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 556700742..1c866eef9 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -60,14 +60,6 @@ class BatchSearchScreen extends Component { this.setState({ planTripClicked: true }) } - handleOpenAdvanceSettings = () => { - this.setState({ showAdvancedModeSettings: true }) - } - - handleCloseAdvanceSettings = () => { - this.setState({ showAdvancedModeSettings: false }) - } - render() { const { intl } = this.props const { planTripClicked, showAdvancedModeSettings } = this.state @@ -122,7 +114,11 @@ class BatchSearchScreen extends Component {
+ this.setState({ showAdvancedModeSettings: true }) + // eslint-disable-next-line react/jsx-curly-newline + } />
@@ -134,7 +130,10 @@ class BatchSearchScreen extends Component { timeout={transitionDuration} > this.setState({ showAdvancedModeSettings: false }) + // eslint-disable-next-line prettier/prettier + } innerRef={this._advancedSettingRef} onPlanTripClick={this.handlePlanTripClick} /> From af8fff5fda1bb87b526d35881bfea1432d6e1754 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 13 Aug 2024 12:30:23 -0500 Subject: [PATCH 58/74] keep animation delay even with prefersReducedMotion --- lib/components/form/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index a0056a851..c8c72d669 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -235,7 +235,7 @@ export const StyledLocationField = styled(LocationField)` export const advancedPanelClassName = 'advanced-panel' export const mainPanelClassName = 'main-panel' export const transitionDuration = prefersReducedMotion ? 0 : 175 -export const transitionDelay = prefersReducedMotion ? 0 : 300 +export const transitionDelay = 300 const wipeOffset = 7 From 8496d37e5bc10ed911ba5e7576d91139ef2a9aeb Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:47:46 -0500 Subject: [PATCH 59/74] Switch animation timing to ease-in-out --- lib/components/form/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index c8c72d669..b844bb4a2 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -240,7 +240,7 @@ export const transitionDelay = 300 const wipeOffset = 7 const transitionMixin = css` - transition: all ${transitionDuration}ms ease-in; + transition: all ${transitionDuration}ms ease-in-out; ` const wipeOutMixin = (offset: number) => css` From 6bee58af160e8d8dd4c4d063bb7575097ab4c89c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 30 Aug 2024 14:54:10 -0500 Subject: [PATCH 60/74] Code cleanup --- i18n/en-US.yml | 1 + .../form/advanced-settings-button.tsx | 14 ++++----- .../form/advanced-settings-panel.tsx | 17 ++++++----- lib/components/form/batch-settings.tsx | 7 +++-- lib/components/form/styled.ts | 2 +- lib/components/form/util.tsx | 16 +++++----- lib/components/mobile/batch-search-screen.tsx | 8 ++--- yarn.lock | 29 +++++++++++++++++++ 8 files changed, 63 insertions(+), 31 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 4720008a5..3540434a8 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -202,6 +202,7 @@ components: moreOptions: More options saveAndReturn: Save and return saved: Saved + submodeSelectorLabel: Select travel modes and submodes tripOptions: Trip Options BatchSettings: destination: destination diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx index 281d535d5..4e43386bd 100644 --- a/lib/components/form/advanced-settings-button.tsx +++ b/lib/components/form/advanced-settings-button.tsx @@ -19,13 +19,11 @@ const StyledTransparentButton = styled.button` margin-bottom: 5px; ` -const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => { - return ( - - - - - ) -} +const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => ( + + + + +) export default AdvancedSettingsButton diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index a76b3f85d..04b948fb3 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -40,12 +40,12 @@ import DateTimeModal from './date-time-modal' const PanelOverlay = styled.div` height: 100%; left: 0; + overflow-y: auto; padding: 1.5em; position: absolute; top: 0; width: 100%; z-index: 100; - overflow-y: auto; ` const GlobalSettingsContainer = styled.div` @@ -65,8 +65,8 @@ const CloseButton = styled.button` const HeaderContainer = styled.div` align-items: center; display: flex; - justify-content: space-between; height: 30px; + justify-content: space-between; ` const Subheader = styled.h2` @@ -211,7 +211,9 @@ const AdvancedSettingsPanel = ({ { const urlSearchParams = new URLSearchParams(state.router.location.search) + const { modes } = state.otp.config const modeSettingValues = generateModeSettingValues( urlSearchParams, - state.otp?.modeSettingDefinitions || [], - state.otp.config.modes?.initialState?.modeSettingValues || {} + state.otp.modeSettingDefinitions || [], + modes?.initialState?.modeSettingValues || {} ) return { currentQuery: state.otp.currentQuery, @@ -255,9 +258,9 @@ const mapStateToProps = (state: AppReduxState) => { decodeQueryParams(queryParamConfig, { modeButtons: urlSearchParams.get('modeButtons') })?.modeButtons?.filter((mb): mb is string => mb !== null) || - state.otp.config?.modes?.initialState?.enabledModeButtons || + modes?.initialState?.enabledModeButtons || [], - modeButtonOptions: state.otp.config?.modes?.modeButtons || [], + modeButtonOptions: modes?.modeButtons || [], modeSettingDefinitions: state.otp?.modeSettingDefinitions || [], modeSettingValues } diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 3ec0ac155..23bd13a6c 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -133,6 +133,7 @@ function BatchSettings({ // TODO: Typescript const mapStateToProps = (state: any) => { const urlSearchParams = new URLSearchParams(state.router.location.search) + const { modes } = state.otp.config return { activeSearch: getActiveSearch(state), currentQuery: state.otp.currentQuery, @@ -141,11 +142,11 @@ const mapStateToProps = (state: any) => { decodeQueryParams(modesQueryParamConfig, { modeButtons: urlSearchParams.get('modeButtons') })?.modeButtons || - state.otp.config?.modes?.initialState?.enabledModeButtons || + modes?.initialState?.enabledModeButtons || {}, fillModeIcons: state.otp.config.itinerary?.fillModeIcons, - modeButtonOptions: state.otp.config?.modes?.modeButtons || [], - spacedOutModeSelector: state.otp?.config?.modes?.spacedOut + modeButtonOptions: modes?.modeButtons || [], + spacedOutModeSelector: modes?.spacedOut } } diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index b844bb4a2..c567ef293 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -244,8 +244,8 @@ const transitionMixin = css` ` const wipeOutMixin = (offset: number) => css` - transform: translateX(${offset}px); opacity: 0; + transform: translateX(${offset}px); ` const wipeInMixin = css` opacity: 1; diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index 23b5ab8fe..3caf997a8 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -18,9 +18,9 @@ export const modesQueryParamConfig = { modeButtons: DelimitedArrayParam } export const populateSettingWithIcon = (ModeIcon: React.ComponentType<{ mode?: string; width?: number }>) => // eslint-disable-next-line react/display-name - (msd: ModeSetting): ModeSetting => ({ - ...msd, - icon: + (modeSetting: ModeSetting): ModeSetting => ({ + ...modeSetting, + icon: }) export const addModeButtonIcon = @@ -34,17 +34,17 @@ export const addModeButtonIcon = export const addCustomSettingLabels = (intl: IntlShape) => - (msd: ModeSetting): ModeSetting => { + (modeSetting: ModeSetting): ModeSetting => { let modeLabel // If we're using route mode overrides, make sure we're using the custom mode name - if (msd.type === 'SUBMODE') { - modeLabel = msd.overrideMode || msd.addTransportMode.mode + if (modeSetting.type === 'SUBMODE') { + modeLabel = modeSetting.overrideMode || modeSetting.addTransportMode.mode return { - ...msd, + ...modeSetting, label: getFormattedMode(modeLabel, intl) } } - return msd + return modeSetting } /** diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 1c866eef9..778cade10 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -26,13 +26,13 @@ const { SET_FROM_LOCATION, SET_TO_LOCATION } = MobileScreens const MobileSearchSettings = styled.div<{ advancedPanelOpen: boolean }>` background: white; box-shadow: 3px 0px 12px #00000052; - position: fixed; - top: 50px; + height: ${(props) => + props.advancedPanelOpen ? 'calc(100% - 50px)' : '230px'}; left: 0; + position: fixed; right: 0; + top: 50px; transition: all 200ms ease; - height: ${(props) => - props.advancedPanelOpen ? 'calc(100% - 50px)' : '230px'}; /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */ z-index: 999; ` diff --git a/yarn.lock b/yarn.lock index 634ff87b2..a9dca0a61 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2416,6 +2416,24 @@ lodash.isequal "^4.5.0" qs "^6.9.1" +"@opentripplanner/core-utils@^11.4.1": + version "11.4.4" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.4.tgz#11c1be91a5e90afda4fc265831c761d3e044d933" + integrity sha512-WKhOuG7Q+Yxdm+P5MPmJyXndx+JUtGn44GTeilOnUqDdO8lTLTvqqt0hYeEWjA77jWP0u8tG7fAAsft8IZn2cg== + dependencies: + "@conveyal/lonlat" "^1.4.1" + "@mapbox/polyline" "^1.1.0" + "@opentripplanner/geocoder" "^3.0.2" + "@styled-icons/foundation" "^10.34.0" + "@turf/along" "^6.0.1" + chroma-js "^2.4.2" + date-fns "^2.28.0" + date-fns-tz "^1.2.2" + graphql "^16.6.0" + lodash.clonedeep "^4.5.0" + lodash.isequal "^4.5.0" + qs "^6.9.1" + "@opentripplanner/core-utils@^11.4.3": version "11.4.3" resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.3.tgz#4655f9a3bef1977e53abd81a4a0eae966f977c60" @@ -2465,6 +2483,17 @@ isomorphic-mapzen-search "^1.6.1" lodash.memoize "^4.1.2" +"@opentripplanner/geocoder@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.2.tgz#2c7618947d1d9b082bd39d037327c9cf23282782" + integrity sha512-pl7tCiodex0hXWKLH3WE+I+HzoSgOOWp9kR3xMcuRiE5g6k2JXNneoD/ZfSS1n6Oorxcjv3U2DbMSXT2j/39dQ== + dependencies: + "@conveyal/geocoder-arcgis-geojson" "^0.0.3" + "@conveyal/lonlat" "^1.4.1" + "@leeoniya/ufuzzy" "^1.0.14" + isomorphic-mapzen-search "^1.6.1" + lodash.memoize "^4.1.2" + "@opentripplanner/humanize-distance@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.2.0.tgz#71cf5d5d1b756adef15300edbba0995ccd4b35ee" From 50299ab374ec0a903767d0cb483e9832eeff0040 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:44:24 -0500 Subject: [PATCH 61/74] fix(advanced-settings-panel): Replace close button with back button, make save button configurable --- example-config.yml | 3 + lib/components/app/batch-routing-panel.tsx | 16 +++++- .../form/advanced-settings-panel.tsx | 57 ++++++++++--------- lib/components/form/styled.ts | 5 +- lib/util/config-types.ts | 5 ++ 5 files changed, 54 insertions(+), 32 deletions(-) diff --git a/example-config.yml b/example-config.yml index d132b835e..d1a28456d 100644 --- a/example-config.yml +++ b/example-config.yml @@ -426,6 +426,9 @@ itinerary: # - 'DEPARTURETIME' # In the batch itinerary UI, this setting will always show both departure/arrival times alwaysShowBothTimes: false +advancedSettingsPanel: + # Show button in advanced panel that allows users to save and return + saveAndReturnButton: true # The transitOperators key is a list of transit operators that can be used to # order transit agencies when sorting by route. Also, this can optionally diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index fa65d0471..525e01fd5 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -6,7 +6,6 @@ import React, { Component, FormEvent } from 'react' import { advancedPanelClassName, mainPanelClassName, - transitionDelay, transitionDuration, TransitionStyles } from '../form/styled' @@ -34,6 +33,7 @@ interface Props { */ class BatchRoutingPanel extends Component { state = { + closeAdvancedSettingsWithDelay: false, planTripClicked: false, showAdvancedModeSettings: false } @@ -72,6 +72,9 @@ class BatchRoutingPanel extends Component { id: 'common.searchForms.click' }) + /* If there is a save button in advanced preferences, add a transition delay to allow + the saved state to be displayed to users */ + const transitionDelay = this.state.closeAdvancedSettingsWithDelay ? 300 : 0 const transitionDurationWithDelay = transitionDuration + transitionDelay return ( @@ -83,7 +86,7 @@ class BatchRoutingPanel extends Component { height: '100%' }} > - + {!this.state.showAdvancedModeSettings && (

@@ -112,7 +115,13 @@ class BatchRoutingPanel extends Component { // eslint-disable-next-line react/jsx-curly-newline } innerRef={this._advancedSettingRef} - onPlanTripClick={this.handlePlanTripClick} + setCloseAdvancedSettingsWithDelay={ + () => + this.setState({ + closeAdvancedSettingsWithDelay: true + }) + // eslint-disable-next-line react/jsx-curly-newline + } /> )} @@ -157,6 +166,7 @@ class BatchRoutingPanel extends Component { onPlanTripClick={this.handlePlanTripClick} openAdvancedSettings={() => this.setState({ + closeAdvancedSettingsWithDelay: false, showAdvancedModeSettings: true // eslint-disable-next-line prettier/prettier })} diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 04b948fb3..86b0125ec 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -4,8 +4,8 @@ import { ModeSettingRenderer, populateSettingWithValue } from '@opentripplanner/trip-form' +import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft' import { Check } from '@styled-icons/boxicons-regular' -import { Close } from '@styled-icons/fa-solid' import { connect } from 'react-redux' import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params' import { FormattedMessage, useIntl } from 'react-intl' @@ -23,7 +23,6 @@ import { AppReduxState } from '../../util/state-types' import { blue, getBaseColor } from '../util/colors' import { ComponentContext } from '../../util/contexts' import { generateModeSettingValues } from '../../util/api' -import PageTitle from '../util/page-title' import { addCustomSettingLabels, @@ -65,8 +64,8 @@ const CloseButton = styled.button` const HeaderContainer = styled.div` align-items: center; display: flex; + gap: 10px; height: 30px; - justify-content: space-between; ` const Subheader = styled.h2` @@ -118,6 +117,8 @@ const AdvancedSettingsPanel = ({ modeButtonOptions, modeSettingDefinitions, modeSettingValues, + saveAndReturnButton, + setCloseAdvancedSettingsWithDelay, setQueryParam }: { closeAdvancedSettings: () => void @@ -126,11 +127,11 @@ const AdvancedSettingsPanel = ({ modeButtonOptions: ModeButtonDefinition[] modeSettingDefinitions: ModeSetting[] modeSettingValues: ModeSettingValues - onPlanTripClick: () => void + saveAndReturnButton?: boolean + setCloseAdvancedSettingsWithDelay: () => void setQueryParam: (evt: any) => void }): JSX.Element => { const [closingBySave, setClosingBySave] = useState(false) - const [closingByX, setClosingByX] = useState(false) const baseColor = getBaseColor() const accentColor = baseColor || blue[900] @@ -179,18 +180,16 @@ const AdvancedSettingsPanel = ({ return ( - -

{headerText}

{ - setClosingByX(true) closeAdvancedSettings() }} title={closeButtonText} > - {closingByX ? : } + +

{headerText}

@@ -221,22 +220,25 @@ const AdvancedSettingsPanel = ({ onSettingsUpdate(setQueryParam) )} /> - { - setClosingBySave(true) - closeAdvancedSettings() - }} - > - {closingBySave ? ( - <> - - - - ) : ( - - )} - + {saveAndReturnButton && ( + { + await setCloseAdvancedSettingsWithDelay() + setClosingBySave(true) + closeAdvancedSettings() + }} + > + {closingBySave ? ( + <> + + + + ) : ( + + )} + + )}
) } @@ -251,6 +253,8 @@ const mapStateToProps = (state: AppReduxState) => { state.otp.modeSettingDefinitions || [], modes?.initialState?.modeSettingValues || {} ) + const saveAndReturnButton = + state.otp.config?.advancedSettingsPanel?.saveAndReturnButton return { currentQuery: state.otp.currentQuery, // TODO: Duplicated in apiv2.js @@ -262,7 +266,8 @@ const mapStateToProps = (state: AppReduxState) => { [], modeButtonOptions: modes?.modeButtons || [], modeSettingDefinitions: state.otp?.modeSettingDefinitions || [], - modeSettingValues + modeSettingValues, + saveAndReturnButton } } diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index c567ef293..5033db42f 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -235,7 +235,6 @@ export const StyledLocationField = styled(LocationField)` export const advancedPanelClassName = 'advanced-panel' export const mainPanelClassName = 'main-panel' export const transitionDuration = prefersReducedMotion ? 0 : 175 -export const transitionDelay = 300 const wipeOffset = 7 @@ -251,7 +250,7 @@ const wipeInMixin = css` opacity: 1; ` -export const TransitionStyles = styled.div` +export const TransitionStyles = styled.div<{ transitionDelay: number }>` display: contents; .${advancedPanelClassName}-enter { ${wipeOutMixin(wipeOffset)} @@ -268,7 +267,7 @@ export const TransitionStyles = styled.div` .${advancedPanelClassName}-exit-active { ${wipeOutMixin(wipeOffset)} ${transitionMixin} - transition-delay: ${transitionDelay}ms; + transition-delay: ${(props) => props.transitionDelay}ms; } .${mainPanelClassName}-enter { diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts index 18e27ca37..48d13fe01 100644 --- a/lib/util/config-types.ts +++ b/lib/util/config-types.ts @@ -337,6 +337,10 @@ export interface TransitOperatorConfig extends TransitOperator { routeIcons?: boolean } +export interface AdvancedSettingsPanelConfig { + saveAndReturnButton?: boolean +} + /** Route Viewer config */ export interface RouteViewerConfig { /** Whether to hide the route linear shape inside a flex zone of that route. */ @@ -360,6 +364,7 @@ export interface StopScheduleViewerConfig { /** The main application configuration object */ export interface AppConfig { accessibilityScore?: AccessibilityScoreConfig + advancedSettingsPanel?: AdvancedSettingsPanelConfig api: ApiConfig // Optional on declaration, populated with defaults in reducer if not configured. autoPlan?: boolean | AutoPlanConfig From 7bdc7a2bef2a867c93663d6b81c51e0dad1cf9fa Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:58:23 -0500 Subject: [PATCH 62/74] fix: update advanced settings props for mobile --- lib/components/mobile/batch-search-screen.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index 778cade10..bd6afc9f9 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -45,6 +45,7 @@ interface Props { class BatchSearchScreen extends Component { state = { + closeAdvancedSettingsWithDelay: false, planTripClicked: false, showAdvancedModeSettings: false } @@ -63,6 +64,9 @@ class BatchSearchScreen extends Component { render() { const { intl } = this.props const { planTripClicked, showAdvancedModeSettings } = this.state + + const transitionDelay = this.state.closeAdvancedSettingsWithDelay ? 300 : 0 + const transitionDurationWithDelay = transitionDuration + transitionDelay return ( { showAdvancedModeSettings && 'advanced-mode-open' }`} > - + {!showAdvancedModeSettings && ( { { // eslint-disable-next-line prettier/prettier } innerRef={this._advancedSettingRef} - onPlanTripClick={this.handlePlanTripClick} + setCloseAdvancedSettingsWithDelay={ + () => + this.setState({ + closeAdvancedSettingsWithDelay: true + }) + // eslint-disable-next-line react/jsx-curly-newline + } /> )} From ddda7fbd52294f4f1cba50ed0d0cdebebd92ae38 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Wed, 18 Sep 2024 11:35:21 -0700 Subject: [PATCH 63/74] attempt to clean up event type --- lib/components/form/util.tsx | 6 ++++-- lib/components/util/types.ts | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index 3caf997a8..399b0df90 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -5,6 +5,7 @@ import React from 'react' import { getFormattedMode } from '../../util/i18n' import { hasValidLocation } from '../../util/state' +import { QueryParamChangeHandler } from '../util/types' import { RoutingQueryCallResult } from '../../actions/api-constants' import { updateQueryTimeIfLeavingNow } from '../../actions/form' @@ -52,13 +53,14 @@ export const addCustomSettingLabels = * @param params Params to store */ export const onSettingsUpdate = - (setQueryParam: (evt: any) => void) => (params: any) => { + (setQueryParam: QueryParamChangeHandler) => + (params: any): void => { setQueryParam({ queryParamData: params, ...params }) } export const setModeButton = (enabledModeButtons: string[], updateHandler: (params: any) => void) => - (buttonId: string, newState: boolean) => { + (buttonId: string, newState: boolean): void => { let newButtons if (newState) { newButtons = [...enabledModeButtons, buttonId] diff --git a/lib/components/util/types.ts b/lib/components/util/types.ts index 9b21030fa..83bcd7930 100644 --- a/lib/components/util/types.ts +++ b/lib/components/util/types.ts @@ -108,3 +108,5 @@ export type ZoomToPlaceHandler = ( place?: { lat: number; lon: number }, zoom?: number ) => void + +export type QueryParamChangeHandler = (event: any) => void From f389d34d171e890d53eb9e5b18ae5d1b410f2ea9 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:54:55 -0500 Subject: [PATCH 64/74] Revert unnecessary example.css change --- example.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example.css b/example.css index be6b5f609..afd7900f5 100644 --- a/example.css +++ b/example.css @@ -47,4 +47,4 @@ height: 100%; margin: 0px; padding: 0px; -} \ No newline at end of file +} From c5e6671b400ffe199f79c717199287b980fe2b01 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:22:59 -0400 Subject: [PATCH 65/74] chore(i18n): Add FR strings --- i18n/fr.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/i18n/fr.yml b/i18n/fr.yml index 082b0e96a..b910c123c 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -209,8 +209,15 @@ components: BatchRoutingPanel: shortTitle: Planifier un trajet BatchSearchScreen: + advancedHeader: Préférences avancées header: Votre trajet + modeOptions: Choix du mode modeSelectorLabel: Sélectionnez un mode de déplacement + moreOptions: Plus d'options + saveAndReturn: Enregistrer et fermer + saved: Enregistré + submodeSelectorLabel: Sélectionnez vos modes et sous-modes de déplacement + tripOptions: Options concernant le trajet BatchSettings: destination: destination invalidModeSelection: >- From 8017627278f9c492bc09360ee692667ce94f2af3 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 19 Sep 2024 18:16:14 -0500 Subject: [PATCH 66/74] Code cleanup --- lib/components/form/advanced-settings-panel.tsx | 14 ++++++++------ lib/components/form/util.tsx | 13 +++++-------- lib/components/mobile/batch-search-screen.tsx | 1 + lib/components/viewers/viewers.css | 6 +++++- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 86b0125ec..a0a6c5cc5 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -15,7 +15,7 @@ import { ModeSetting, ModeSettingValues } from '@opentripplanner/types' -import React, { RefObject, useContext, useState } from 'react' +import React, { RefObject, useCallback, useContext, useState } from 'react' import styled from 'styled-components' import * as formActions from '../../actions/form' @@ -177,6 +177,12 @@ const AdvancedSettingsPanel = ({ ) ) + const onSaveAndReturnClick = useCallback(async () => { + await setCloseAdvancedSettingsWithDelay() + setClosingBySave(true) + closeAdvancedSettings() + }, [closeAdvancedSettings, setCloseAdvancedSettingsWithDelay]) + return ( @@ -223,11 +229,7 @@ const AdvancedSettingsPanel = ({ {saveAndReturnButton && ( { - await setCloseAdvancedSettingsWithDelay() - setClosingBySave(true) - closeAdvancedSettings() - }} + onClick={onSaveAndReturnClick} > {closingBySave ? ( <> diff --git a/lib/components/form/util.tsx b/lib/components/form/util.tsx index 399b0df90..85dd3107d 100644 --- a/lib/components/form/util.tsx +++ b/lib/components/form/util.tsx @@ -36,10 +36,10 @@ export const addModeButtonIcon = export const addCustomSettingLabels = (intl: IntlShape) => (modeSetting: ModeSetting): ModeSetting => { - let modeLabel // If we're using route mode overrides, make sure we're using the custom mode name if (modeSetting.type === 'SUBMODE') { - modeLabel = modeSetting.overrideMode || modeSetting.addTransportMode.mode + const modeLabel = + modeSetting.overrideMode || modeSetting.addTransportMode.mode return { ...modeSetting, label: getFormattedMode(modeLabel, intl) @@ -61,12 +61,9 @@ export const onSettingsUpdate = export const setModeButton = (enabledModeButtons: string[], updateHandler: (params: any) => void) => (buttonId: string, newState: boolean): void => { - let newButtons - if (newState) { - newButtons = [...enabledModeButtons, buttonId] - } else { - newButtons = enabledModeButtons.filter((c) => c !== buttonId) - } + const newButtons = newState + ? [...enabledModeButtons, buttonId] + : enabledModeButtons.filter((c) => c !== buttonId) // encodeQueryParams serializes the mode buttons for the URL // to get nice looking URL params and consistency diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index bd6afc9f9..ad3eb4c3a 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -83,6 +83,7 @@ class BatchSearchScreen extends Component { > + {/* Unfortunately we can't use a ternary operator here because it is cancelling out the CSSTransition animations. */} {!showAdvancedModeSettings && ( Date: Fri, 20 Sep 2024 11:28:46 -0500 Subject: [PATCH 67/74] turn inline functions into class methods --- lib/components/app/batch-routing-panel.tsx | 40 ++++++++++--------- lib/components/mobile/batch-search-screen.tsx | 34 +++++++++------- 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx index 525e01fd5..5c6a69c73 100644 --- a/lib/components/app/batch-routing-panel.tsx +++ b/lib/components/app/batch-routing-panel.tsx @@ -55,6 +55,23 @@ class BatchRoutingPanel extends Component { } } + openAdvancedSettings = () => { + this.setState({ + closeAdvancedSettingsWithDelay: false, + showAdvancedModeSettings: true + }) + } + + closeAdvancedSettings = () => { + this.setState({ showAdvancedModeSettings: false }) + } + + setCloseAdvancedSettingsWithDelay = () => { + this.setState({ + closeAdvancedSettingsWithDelay: true + }) + } + handleSubmit = (e: FormEvent) => e.preventDefault() handlePlanTripClick = () => { @@ -110,17 +127,10 @@ class BatchRoutingPanel extends Component { }} > this.setState({ showAdvancedModeSettings: false }) - // eslint-disable-next-line react/jsx-curly-newline - } + closeAdvancedSettings={this.closeAdvancedSettings} innerRef={this._advancedSettingRef} setCloseAdvancedSettingsWithDelay={ - () => - this.setState({ - closeAdvancedSettingsWithDelay: true - }) - // eslint-disable-next-line react/jsx-curly-newline + this.setCloseAdvancedSettingsWithDelay } /> @@ -130,10 +140,7 @@ class BatchRoutingPanel extends Component { this.setState({ showAdvancedModeSettings: true }) - // eslint-disable-next-line react/jsx-curly-newline - } + onExit={this.openAdvancedSettings} timeout={transitionDurationWithDelay} >
@@ -164,12 +171,7 @@ class BatchRoutingPanel extends Component { - this.setState({ - closeAdvancedSettingsWithDelay: false, - showAdvancedModeSettings: true - // eslint-disable-next-line prettier/prettier - })} + openAdvancedSettings={this.openAdvancedSettings} />
diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index ad3eb4c3a..eb732a4a4 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -61,6 +61,23 @@ class BatchSearchScreen extends Component { this.setState({ planTripClicked: true }) } + openAdvancedSettings = () => { + this.setState({ + closeAdvancedSettingsWithDelay: false, + showAdvancedModeSettings: true + }) + } + + closeAdvancedSettings = () => { + this.setState({ showAdvancedModeSettings: false }) + } + + setCloseAdvancedSettingsWithDelay = () => { + this.setState({ + closeAdvancedSettingsWithDelay: true + }) + } + render() { const { intl } = this.props const { planTripClicked, showAdvancedModeSettings } = this.state @@ -119,11 +136,7 @@ class BatchSearchScreen extends Component {

- this.setState({ showAdvancedModeSettings: true }) - // eslint-disable-next-line react/jsx-curly-newline - } + openAdvancedSettings={this.openAdvancedSettings} />
@@ -138,17 +151,10 @@ class BatchSearchScreen extends Component { }} > this.setState({ showAdvancedModeSettings: false }) - // eslint-disable-next-line prettier/prettier - } + closeAdvancedSettings={this.closeAdvancedSettings} innerRef={this._advancedSettingRef} setCloseAdvancedSettingsWithDelay={ - () => - this.setState({ - closeAdvancedSettingsWithDelay: true - }) - // eslint-disable-next-line react/jsx-curly-newline + this.setCloseAdvancedSettingsWithDelay } /> From cf8e32255d96792194239b7ddca13d506c7c8b71 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 23 Sep 2024 11:58:19 -0500 Subject: [PATCH 68/74] Fix mobile transition timing --- lib/components/mobile/batch-search-screen.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx index eb732a4a4..c24b4dacb 100644 --- a/lib/components/mobile/batch-search-screen.tsx +++ b/lib/components/mobile/batch-search-screen.tsx @@ -23,7 +23,11 @@ import MobileNavigationBar from './navigation-bar' const { SET_FROM_LOCATION, SET_TO_LOCATION } = MobileScreens -const MobileSearchSettings = styled.div<{ advancedPanelOpen: boolean }>` +const MobileSearchSettings = styled.div<{ + advancedPanelOpen: boolean + transitionDelay: number + transitionDuration: number +}>` background: white; box-shadow: 3px 0px 12px #00000052; height: ${(props) => @@ -32,7 +36,8 @@ const MobileSearchSettings = styled.div<{ advancedPanelOpen: boolean }>` position: fixed; right: 0; top: 50px; - transition: all 200ms ease; + transition: ${(props) => `all ${props.transitionDuration}ms ease`}; + transition-delay: ${(props) => props.transitionDelay}ms; /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */ z-index: 999; ` @@ -97,6 +102,8 @@ class BatchSearchScreen extends Component { className={`batch-search-settings mobile-padding ${ showAdvancedModeSettings && 'advanced-mode-open' }`} + transitionDelay={transitionDelay} + transitionDuration={transitionDuration} > @@ -105,7 +112,7 @@ class BatchSearchScreen extends Component {
Date: Mon, 23 Sep 2024 12:57:01 -0500 Subject: [PATCH 69/74] Update snapshots --- .../viewers/__snapshots__/nearby-view.js.snap | 1154 ++++++++--------- .../stop-schedule-viewer.ts.snap | 6 +- 2 files changed, 580 insertions(+), 580 deletions(-) diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap index 3d4a9501a..3f82632bd 100644 --- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap +++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap @@ -46,7 +46,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`] className="nearby-view base-color-bg" >
viewers > nearby view renders nothing on a blank page 1`] } >
    viewers > nearby view renders proper scooter dates 1`] = ` className="nearby-view base-color-bg" >
    viewers > nearby view renders proper scooter dates 1`] = ` } >
      viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = `

      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = `

      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = `

      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
      viewers > nearby view renders proper scooter dates 1`] = ` >

      Roosevelt Station - Bay 2 @@ -10036,7 +10036,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

      viewers > nearby view renders proper scooter dates 1`] = `

      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
        viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
      • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

        1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

          1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

              viewers > nearby view renders proper scooter dates 1`] = ` >

              Roosevelt @@ -16883,7 +16883,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

              viewers > nearby view renders proper scooter dates 1`] = `

              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
              • viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                1. viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                  1. viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = `

                      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = `

                      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = `

                      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                      viewers > nearby view renders proper scooter dates 1`] = ` >

                      Roosevelt Station - Bay 1 @@ -26397,7 +26397,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                      viewers > nearby view renders proper scooter dates 1`] = `

                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                        viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                      • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                        1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                          1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                            1. viewers > nearby view renders proper scooter dates 1`] = ` title="988" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                viewers > nearby view renders proper scooter dates 1`] = ` >

                                Roosevelt Station Bay 5 - Bay 5 @@ -35949,7 +35949,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                viewers > nearby view renders proper scooter dates 1`] = `

                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                  viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                • viewers > nearby view renders proper scooter dates 1`] = ` title="67" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                  1. viewers > nearby view renders proper scooter dates 1`] = ` title="73" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                    1. viewers > nearby view renders proper scooter dates 1`] = ` title="984" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                        viewers > nearby view renders proper scooter dates 1`] = `

                                        viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                        viewers > nearby view renders proper scooter dates 1`] = ` >

                                        Roosevelt @@ -43780,7 +43780,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                        viewers > nearby view renders proper scooter dates 1`] = `

                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                          viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                        • viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                            viewers > nearby view renders proper scooter dates 1`] = ` >

                                            Roosevelt Station - Bay 3 @@ -51332,7 +51332,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                            viewers > nearby view renders proper scooter dates 1`] = `

                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                              viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                            • viewers > nearby view renders proper scooter dates 1`] = ` title="522" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                              1. viewers > nearby view renders proper scooter dates 1`] = ` title="67" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                1. viewers > nearby view renders proper scooter dates 1`] = ` title="522" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                  1. viewers > nearby view renders proper scooter dates 1`] = ` title="73" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                    1. viewers > nearby view renders proper scooter dates 1`] = ` title="322" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                      1. viewers > nearby view renders proper scooter dates 1`] = ` title="322" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                          viewers > nearby view renders proper scooter dates 1`] = `

                                                          viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                          viewers > nearby view renders proper scooter dates 1`] = ` >

                                                          NE 65th St & 14th Ave NE @@ -62499,7 +62499,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                          viewers > nearby view renders proper scooter dates 1`] = `

                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                            viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                          • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                            1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                              1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > stop viewer should render with initial stop id a > viewers > stop viewer should render with initial stop id a

                                                                Date: Mon, 23 Sep 2024 13:20:19 -0500 Subject: [PATCH 70/74] Update percy tests --- lib/components/form/advanced-settings-button.tsx | 2 +- lib/components/form/advanced-settings-panel.tsx | 1 + percy/percy.test.js | 11 +++++++---- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx index 4e43386bd..0449dc85d 100644 --- a/lib/components/form/advanced-settings-button.tsx +++ b/lib/components/form/advanced-settings-button.tsx @@ -20,7 +20,7 @@ const StyledTransparentButton = styled.button` ` const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => ( - + diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index a0a6c5cc5..ea085d017 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -188,6 +188,7 @@ const AdvancedSettingsPanel = ({ { closeAdvancedSettings() }} diff --git a/percy/percy.test.js b/percy/percy.test.js index c4ac7142e..52fdcdb63 100644 --- a/percy/percy.test.js +++ b/percy/percy.test.js @@ -133,16 +133,19 @@ async function executeTest(page, isMobile, isCallTaker) { await page.keyboard.press('Escape') await page.waitForTimeout(200) - // Check submode selector (this will have no effect on mock query) - await page.hover('label[title="Transit"]') + // Open advanced settings and wait for animation + await page.click('#open-advanced-settings-button') await page.waitForTimeout(500) + + // Check submode selector (this will have no effect on mock query) await page.click('#id-query-param-tram') // Enable accessible routing (this will have no effect on mock query) - await page.hover('label[title="Transit"]') - await page.waitForTimeout(500) await page.click('#id-query-param-wheelchair') + // Close advanced settings + await page.click('#close-advanced-settings-button') + // Delete both origin and destination await page.click('.from-form-control') From 45e47e58bc6f3ca19735cbe978cd281c127601d8 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 24 Sep 2024 15:29:09 -0500 Subject: [PATCH 71/74] update otp-ui packages --- package.json | 42 +++--- yarn.lock | 388 ++++++++++++++++++++++++++++++--------------------- 2 files changed, 252 insertions(+), 178 deletions(-) diff --git a/package.json b/package.json index e6f6f0785..34e1e7c8f 100644 --- a/package.json +++ b/package.json @@ -42,30 +42,30 @@ "@bugsnag/js": "^7.17.0", "@bugsnag/plugin-react": "^7.17.0", "@floating-ui/react": "^0.19.2", - "@opentripplanner/base-map": "^3.2.2", - "@opentripplanner/building-blocks": "^1.2.3", - "@opentripplanner/core-utils": "^11.4.4", - "@opentripplanner/endpoints-overlay": "^2.1.4", - "@opentripplanner/from-to-location-picker": "^2.1.14", + "@opentripplanner/base-map": "4.0.0", + "@opentripplanner/building-blocks": "2.0.0", + "@opentripplanner/core-utils": "12.0.0", + "@opentripplanner/endpoints-overlay": "3.0.0", + "@opentripplanner/from-to-location-picker": "3.0.0", "@opentripplanner/geocoder": "^3.0.2", "@opentripplanner/humanize-distance": "^1.2.0", - "@opentripplanner/icons": "^2.0.13", - "@opentripplanner/itinerary-body": "^5.3.7", - "@opentripplanner/location-field": "^2.0.24", + "@opentripplanner/icons": "3.0.0", + "@opentripplanner/itinerary-body": "6.0.0", + "@opentripplanner/location-field": "3.0.0", "@opentripplanner/location-icon": "^1.4.1", - "@opentripplanner/map-popup": "^4.0.2", - "@opentripplanner/otp2-tile-overlay": "^1.0.17", - "@opentripplanner/park-and-ride-overlay": "^2.0.9", - "@opentripplanner/printable-itinerary": "^2.0.23", - "@opentripplanner/route-viewer-overlay": "^2.0.17", - "@opentripplanner/stop-viewer-overlay": "^2.0.10", - "@opentripplanner/stops-overlay": "^5.3.3", - "@opentripplanner/transit-vehicle-overlay": "^4.0.13", - "@opentripplanner/transitive-overlay": "3.0.22", - "@opentripplanner/trip-details": "^5.0.15", - "@opentripplanner/trip-form": "^3.7.0-alpha.5", - "@opentripplanner/trip-viewer-overlay": "^2.0.10", - "@opentripplanner/vehicle-rental-overlay": "^2.1.9", + "@opentripplanner/map-popup": "5.0.0", + "@opentripplanner/otp2-tile-overlay": "2.0.0", + "@opentripplanner/park-and-ride-overlay": "3.0.0", + "@opentripplanner/printable-itinerary": "3.0.0", + "@opentripplanner/route-viewer-overlay": "3.0.0", + "@opentripplanner/stop-viewer-overlay": "3.0.0", + "@opentripplanner/stops-overlay": "6.0.0", + "@opentripplanner/transit-vehicle-overlay": "5.0.0", + "@opentripplanner/transitive-overlay": "4.0.0", + "@opentripplanner/trip-details": "6.0.0", + "@opentripplanner/trip-form": "4.0.0", + "@opentripplanner/trip-viewer-overlay": "3.0.0", + "@opentripplanner/vehicle-rental-overlay": "3.0.0", "@styled-icons/fa-regular": "^10.34.0", "@styled-icons/fa-solid": "^10.34.0", "@turf/centroid": "^6.5.0", diff --git a/yarn.lock b/yarn.lock index cae490f89..7d175cca4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,7 +43,15 @@ dependencies: "@babel/highlight" "^7.10.4" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.5.5": +"@babel/code-frame@^7.0.0": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465" + integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA== + dependencies: + "@babel/highlight" "^7.24.7" + picocolors "^1.0.0" + +"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.5.5": version "7.22.13" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== @@ -305,11 +313,16 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== -"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.22.20", "@babel/helper-validator-identifier@^7.22.5": +"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.22.20": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== +"@babel/helper-validator-identifier@^7.22.5", "@babel/helper-validator-identifier@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" + integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== + "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3" @@ -334,7 +347,7 @@ "@babel/traverse" "^7.15.0" "@babel/types" "^7.15.0" -"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13": +"@babel/highlight@^7.10.4": version "7.22.13" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.13.tgz#9cda839e5d3be9ca9e8c26b6dd69e7548f0cbf16" integrity sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ== @@ -343,6 +356,16 @@ chalk "^2.4.2" js-tokens "^4.0.0" +"@babel/highlight@^7.22.13", "@babel/highlight@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d" + integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw== + dependencies: + "@babel/helper-validator-identifier" "^7.24.7" + chalk "^2.4.2" + js-tokens "^4.0.0" + picocolors "^1.0.0" + "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.15.0", "@babel/parser@^7.16.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" @@ -1096,13 +1119,20 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.20.7", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.11" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.19.0", "@babel/runtime@^7.21.0": + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2" + integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.10.4", "@babel/template@^7.14.5", "@babel/template@^7.22.15", "@babel/template@^7.3.3": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -2082,11 +2112,11 @@ integrity sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ== "@mapbox/polyline@^1.1.0", "@mapbox/polyline@^1.1.1": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-1.2.0.tgz#11f7481968a83bd9dde36273a50b8037af24a86b" - integrity sha512-sIIi9clVZiTmXYqbXpSAoG+ZLsvQn7j9FJLqiNOG85KnXN8tz11MEhuW2M7NDEDIKi4hIMaSI1CKwH8oLuVxPQ== + version "1.2.1" + resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-1.2.1.tgz#1eecce5e8c0d9e6dfc718b225e8e9f03591ea636" + integrity sha512-sn0V18O3OzW4RCcPoUIVDWvEGQaBNH9a0y5lgqrf5hUycyw1CzrhEoxV5irzrMNXKCkw1xRsZXcaVbsVZggHXA== dependencies: - meow "^6.1.1" + meow "^9.0.0" "@mapbox/tiny-sdf@^2.0.4": version "2.0.5" @@ -2383,12 +2413,12 @@ dependencies: "@octokit/openapi-types" "^10.0.0" -"@opentripplanner/base-map@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-3.2.0.tgz#db4410319d9614077ec925d739165a998c4a2485" - integrity sha512-d/yTKEnXqrw9pXhSvCERT+wLFa077Xr4wEFu4pYB+WYoZFflNxuTuAXXjm268HS/d0kjNndkjSMkxaKk6AjsvA== +"@opentripplanner/base-map@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-4.0.0.tgz#56ffa1d833673282cc3a0b7a17f388fc5dbd31e3" + integrity sha512-pWTKXxnzUQk43woPMc40uYfGIcGqHV8GoCvRwrIu2pqNw7QAV4rxjZfca0pm5hnbbJ+G83sRzYboILEbEUwMcw== dependencies: - "@opentripplanner/map-popup" "^3.1.0" + "@opentripplanner/building-blocks" "^1.2.2" mapbox-gl "npm:empty-npm-package@1.0.0" maplibre-gl "^2.1.9" react-map-gl "^7.0.15" @@ -2403,24 +2433,29 @@ maplibre-gl "^2.1.9" react-map-gl "^7.0.15" +"@opentripplanner/building-blocks@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-2.0.0.tgz#8282c01dff7db5c7e809f6ea91cb52df559a2f9d" + integrity sha512-N07rDaZL8fp552eI9/0j1udKjc0uOpvO0Wv1P19Ge0a4roques463MJgWJ026fbopRCi3uwbc/gYTlh4/ske9A== + "@opentripplanner/building-blocks@^1.0.3": version "1.1.0" resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.1.0.tgz#ef9fe862ce0a3e92c9a6c2c2db749a9a02deebd5" integrity sha512-nx7pU1zIZzJcSkCFYyZ7gt+jd0gXj7bjx8rXn1msgF5uLWmtN/70dsmYNEApeA7haC076KOO3B/Jh44YfXG95g== -"@opentripplanner/building-blocks@^1.2.2", "@opentripplanner/building-blocks@^1.2.3": +"@opentripplanner/building-blocks@^1.2.2": version "1.2.3" resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.2.3.tgz#404e8f9038867d66d55f51adf8855b1326c51ed5" integrity sha512-I0AxiZrTZu+e7+av4u0tHW2ijqpxH0AkLHrhf75BHf1Ep2FOGxaul/v+8UT18mNYiM5eHNstOX3XiXaDjtCUaw== -"@opentripplanner/core-utils@^11.4.0": - version "11.4.2" - resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84" - integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA== +"@opentripplanner/core-utils@12.0.0": + version "12.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-12.0.0.tgz#cc40af92620b207f4dce817d08f99def0cdaea7a" + integrity sha512-udLF8XU+k7gxZ+yyyw7ASz6/4D540zYIv8a9GbUL61TF8HmgGhcMk3XOgBnm5jdOukuaNNpOFE4J3oJc5QsSBQ== dependencies: "@conveyal/lonlat" "^1.4.1" "@mapbox/polyline" "^1.1.0" - "@opentripplanner/geocoder" "^3.0.0" + "@opentripplanner/geocoder" "^3.0.2" "@styled-icons/foundation" "^10.34.0" "@turf/along" "^6.0.1" chroma-js "^2.4.2" @@ -2432,9 +2467,9 @@ qs "^6.9.1" "@opentripplanner/core-utils@^11.4.4": - version "11.4.5" - resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.5.tgz#f568f5f60f153f0bd74fe47ed3134851067b0064" - integrity sha512-uYaVqZXZoRRVks05KdGMTIeGEC7ItKJvexZqKsEbZMjnnMphHRndv4aSDXM19iL7ynoau7JXjYfYEny1HDp7ig== + version "11.5.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.5.0.tgz#b0aaa7724bb44fadc71c7027fe9eacac09e4e042" + integrity sha512-kRn50DSnET6t8Zdwx5hoGz6ZwOegvq70Ovxs6shgJJRKuEj5tEhkPyuqY+LndTG8NWuZj9Ql9Vb4Va7kZbHAvA== dependencies: "@conveyal/lonlat" "^1.4.1" "@mapbox/polyline" "^1.1.0" @@ -2449,10 +2484,10 @@ lodash.isequal "^4.5.0" qs "^6.9.1" -"@opentripplanner/endpoints-overlay@^2.1.4": - version "2.1.4" - resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-2.1.4.tgz#f81088bce83236344dfa4a51b2efe00092a5c87a" - integrity sha512-VLRZArhoRQ38aafc/w986Uv1lnq/WLJOgBqnpvuUbLhLR/qHU9h5X3wg3jgwf2GA0BIn03Z99VJbCkGfkyd0LA== +"@opentripplanner/endpoints-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-3.0.0.tgz#17bb943f5bf2b8571cb808b12b5a2185fd18196a" + integrity sha512-st6vfLRCBzVollYS4nIXghbjApDq73lcExo7hZh60DCVSGESSZA9jsNE6ff0HmvhYHdag9QV9zbZOFuNxPIrng== dependencies: "@opentripplanner/base-map" "^3.2.2" "@opentripplanner/building-blocks" "^1.2.2" @@ -2461,10 +2496,10 @@ "@styled-icons/fa-solid" "^10.34.0" flat "^5.0.2" -"@opentripplanner/from-to-location-picker@^2.1.12", "@opentripplanner/from-to-location-picker@^2.1.13": - version "2.1.13" - resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-2.1.13.tgz#d13acd582929175c676cd4303a6cdc6e1c289d99" - integrity sha512-6/7+wYQuuQhnGvxkDQcvoACdmuwUL1BlPqBIUFwyBpkdJ1VQGZiUSAAZTxXdY1Fv/p5mKR1vRsvZgtSPhcxgcg== +"@opentripplanner/from-to-location-picker@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-3.0.0.tgz#048a596c2f854825e0058e03dac67dcad7eb5864" + integrity sha512-jRXaY9jKg+PXUL7Z2SkHRyO88xG1t7iG3U449LPiCm/6flxsY+Wlxg+nyMsAP5gQMjOU0wsGLdH83lGgrpSF4A== dependencies: "@opentripplanner/location-icon" "^1.4.1" flat "^5.0.2" @@ -2477,17 +2512,6 @@ "@opentripplanner/location-icon" "^1.4.1" flat "^5.0.2" -"@opentripplanner/geocoder@^3.0.0": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.1.tgz#834960bc52f515e1223346a8002fb847674d33bc" - integrity sha512-+LHTqY8pHmPE39IjVev5T5baa+BohEyvsLwVwFB2bYWzM+m/RgAJ188uBcDzXKdqk5y3dZR9ZODYVMtrvIiKzQ== - dependencies: - "@conveyal/geocoder-arcgis-geojson" "^0.0.3" - "@conveyal/lonlat" "^1.4.1" - "@leeoniya/ufuzzy" "^1.0.14" - isomorphic-mapzen-search "^1.6.1" - lodash.memoize "^4.1.2" - "@opentripplanner/geocoder@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.2.tgz#2c7618947d1d9b082bd39d037327c9cf23282782" @@ -2504,7 +2528,15 @@ resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.2.0.tgz#71cf5d5d1b756adef15300edbba0995ccd4b35ee" integrity sha512-x0QRXMDhypFeazZ6r6vzrdU8vhiV56nZ/WX6zUbxpgp6T9Oclw0gwR2Zdw6DZiiFpSYVNeVNxVzZwsu6NRGjcA== -"@opentripplanner/icons@^2.0.12", "@opentripplanner/icons@^2.0.13": +"@opentripplanner/icons@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-3.0.0.tgz#f7293fd4dd2625eace3a4c82ecd573d6000d85d3" + integrity sha512-naSCdCsPwSyEiP7Vf6oN6dpgwpFIkeQFXfTJG7lp1Dg9emLTAYzRx/f+45e9Bh0zP0aA4DsN4VgHBQllyu82qQ== + dependencies: + "@opentripplanner/core-utils" "^11.4.4" + prop-types "^15.7.2" + +"@opentripplanner/icons@^2.0.12": version "2.0.13" resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-2.0.13.tgz#45c4c16d8f208cff73811941f2def0fa23f87780" integrity sha512-1oEPCmFuyS88bJZ2U9eFlEw2kQ0ZZW+wOI1dggr0omJDD6L+nVNQJ6TUtosNHYL1S35Jpx4aSQEG3iwwlXOHMg== @@ -2512,7 +2544,25 @@ "@opentripplanner/core-utils" "^11.4.4" prop-types "^15.7.2" -"@opentripplanner/itinerary-body@^5.3.6", "@opentripplanner/itinerary-body@^5.3.7": +"@opentripplanner/itinerary-body@6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.0.0.tgz#e261bcccd0d7a786f7f17be987a52ba1dc940229" + integrity sha512-j79byCefyEZuomvDlvBZJVZJ92+X6U4ivth3M62RKGmw1x8qW4nsbEKnzeQxXzGJcy3M+91eeIpcJnj98KHlRw== + dependencies: + "@opentripplanner/core-utils" "^11.4.4" + "@opentripplanner/humanize-distance" "^1.2.0" + "@opentripplanner/icons" "^2.0.12" + "@opentripplanner/location-icon" "^1.4.1" + "@styled-icons/fa-solid" "^10.34.0" + "@styled-icons/foundation" "^10.34.0" + date-fns "^2.28.0" + date-fns-tz "^1.2.2" + flat "^5.0.2" + react-animate-height "^3.0.4" + react-resize-detector "^4.2.1" + string-similarity "^4.0.4" + +"@opentripplanner/itinerary-body@^5.3.6": version "5.3.7" resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.7.tgz#e32437f804defc19aef23685e45c0a363ac8bc31" integrity sha512-ZnbxI78WsY6/Ynl3QY026JqimGG+gqXcN8ZEXY/BPMrNhSul27HgFFT2Flo37Fnc5gN2+jE8LsR1yxq05H3kvQ== @@ -2530,10 +2580,10 @@ react-resize-detector "^4.2.1" string-similarity "^4.0.4" -"@opentripplanner/location-field@^2.0.24": - version "2.0.24" - resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.24.tgz#32e7109142bd754d28bd28ebbdf68d4e5ef4c812" - integrity sha512-fOAyanDnLLHC39kHG6kMSY6i09n4l0KSVQACFoosGZgUcJmz5CUCMl0/x3RszIwh3g2wqxKh6fagh4V56YEpfQ== +"@opentripplanner/location-field@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-3.0.0.tgz#a6f8743290cf088bcd589cf8e6b0d07a651b704a" + integrity sha512-wPb9l5pvSeocZ45K1E3Zeb4hDjJtP9tw/S0MQ3HXYEQSf+700n4CWXVXYReYJXJYriOzge5/2whjUPGTlJckWw== dependencies: "@conveyal/geocoder-arcgis-geojson" "^0.0.3" "@opentripplanner/core-utils" "^11.4.4" @@ -2551,16 +2601,18 @@ "@styled-icons/fa-regular" "^10.34.0" "@styled-icons/fa-solid" "^10.34.0" -"@opentripplanner/map-popup@^3.1.0": - version "3.1.1" - resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.1.1.tgz#54f081162d328cc4bb0e89562f9ea200e29e01a1" - integrity sha512-yWBIPuYGw7biaRNIpglQm5+opZ+D5QQgXHLhKnYaCR0eNijjl9cx34lGXdyKPXt26S6MiyJZXL81uc6w6CnQ3A== +"@opentripplanner/map-popup@5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-5.0.0.tgz#cf360845704ed54222c8bf19581ed1253d3dcf14" + integrity sha512-cuIzZm/cZbjY2tAVLSDpBK63efR+YsEsXVPBx4VAHlGhJoY1yooipFlq+3/51VSsFOJPp6gcsKaizfdICDJlYA== dependencies: - "@opentripplanner/core-utils" "^11.4.0" - "@opentripplanner/from-to-location-picker" "^2.1.12" + "@opentripplanner/base-map" "^3.2.2" + "@opentripplanner/building-blocks" "^1.2.2" + "@opentripplanner/core-utils" "^11.4.4" + "@opentripplanner/from-to-location-picker" "^2.1.14" flat "^5.0.2" -"@opentripplanner/map-popup@^4.0.0", "@opentripplanner/map-popup@^4.0.2": +"@opentripplanner/map-popup@^4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-4.0.2.tgz#367ab7ce69d16d319988bb48d8f6d2db762623c7" integrity sha512-RlHv9GE3Bk3++PwBcaPcALr6rZ+2AxY6Uj6W71AnLqz+wbeQO5rM3eEP99r0Sg1K3pAY0hXljBkVwKiUWhwxbQ== @@ -2571,33 +2623,33 @@ "@opentripplanner/from-to-location-picker" "^2.1.14" flat "^5.0.2" -"@opentripplanner/otp2-tile-overlay@^1.0.17": - version "1.0.17" - resolved "https://registry.yarnpkg.com/@opentripplanner/otp2-tile-overlay/-/otp2-tile-overlay-1.0.17.tgz#0e63bcb956778bbab6bd42d282aa9f5416881b74" - integrity sha512-mgMHprVVOXdzgU0D/50be57TeuEp1RP+b7xH/3Xt+rj0mF1PY+5GgLMuEul+1WqbzFwAefrmi9KRMs3MYJArrg== +"@opentripplanner/otp2-tile-overlay@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/otp2-tile-overlay/-/otp2-tile-overlay-2.0.0.tgz#6af1a9113a8baaebb226a5e747e8e523f6da249b" + integrity sha512-Yc0VsfxS6xIw4+1i9lpvQyCXobkTubZWYYu+6bDWkk77D4J4WaSoWE/qWT39vc2/h1ZY4afUZL59d7kc8V0PLg== dependencies: "@opentripplanner/map-popup" "^4.0.0" -"@opentripplanner/park-and-ride-overlay@^2.0.9": - version "2.0.9" - resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-2.0.9.tgz#0efe2bf8a7595b56c4da6396e89db5f04e4b3ec8" - integrity sha512-ekf6kcCgMVTzXDMY3Ed8qclaL3YY2/1BrArdpRY8DxciGWmE1HKOW90Vf1aP18aLrwcW9kpvv1Kdbl60tY6mCQ== +"@opentripplanner/park-and-ride-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-3.0.0.tgz#7139d5358bc8e5f68f1574e9225a3bcfb57993be" + integrity sha512-MLalzHhXSZ1yAwW9cyMVoUUQPMGktTTPFbhgEB/Ft4fX/TJAIH1sQHsKoaeGE0+48Kxg4M49zPoeNujr9RIeGA== dependencies: - "@opentripplanner/base-map" "^3.2.0" - "@opentripplanner/from-to-location-picker" "^2.1.13" + "@opentripplanner/base-map" "^3.2.2" + "@opentripplanner/from-to-location-picker" "^2.1.14" -"@opentripplanner/printable-itinerary@^2.0.23": - version "2.0.23" - resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-2.0.23.tgz#31f11e0e22bb9f223c4c1d8fa97c6eea18496cfa" - integrity sha512-Cb5SX7ts0rX0P1XSStjqbTITP5ueWlDe1b7U4KMaRNqEOaK2tELEyb/qZGo9kMpXTT/17jmEQZsKHQj43C5Eyg== +"@opentripplanner/printable-itinerary@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-3.0.0.tgz#7f4438b18cbd767ede74b2a3b7e3ad6ab1ec936b" + integrity sha512-/P7HtzXPu0yP6ZnfHl1DQFTVgEx+YplLxs43jd7rnXc0PUvsVyAsmp4oI3TDG8tStMD9pKsVLOCBNLUacoXo1Q== dependencies: "@opentripplanner/core-utils" "^11.4.4" "@opentripplanner/itinerary-body" "^5.3.6" -"@opentripplanner/route-viewer-overlay@^2.0.17": - version "2.0.17" - resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-2.0.17.tgz#f34686fd965cf39650a10f64df599e7aca468415" - integrity sha512-3UTTLxHhaMg4iKP4oJlobvUCbvC/TjCW6ss8PxxC3UurwiMeSFNVkaWGLElPc9YoKg0QqKxrIY7zq0WClIPa6g== +"@opentripplanner/route-viewer-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-3.0.0.tgz#d307af1fb734f113627a82f816bf4683a7d9a860" + integrity sha512-Kbgs+gkzOKNEoXG2ImoUBekET5olMc8sGo9ltb7tgTg8ZuBcq3woMID7b3+n3DDdvqdHLExg5T68gkip1Eu/QQ== dependencies: "@mapbox/polyline" "^1.1.0" "@opentripplanner/base-map" "^3.2.2" @@ -2615,38 +2667,38 @@ glob-promise "^4.2.2" js-yaml "^4.1.0" -"@opentripplanner/stop-viewer-overlay@^2.0.10": - version "2.0.10" - resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-2.0.10.tgz#0749fe7ffb28dac7a6925ed7c663e2fdd5156f3b" - integrity sha512-rFmaqQ7uJ+ZE80O6fveiNxlEVSJW5PwFSMh1B9pN0HaVTB1U27+yKbIMMuP7GtWve31mPy+PaWYXDW3hMlsi8A== +"@opentripplanner/stop-viewer-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-3.0.0.tgz#69dc8af797ab9a202954137b6ea68bcaa45cc4ff" + integrity sha512-1OnLhP9QcOnAe1qwSrjLXsFsMtqx7tBullcl/CgT5kYA/aXLKNiQ7zGeMrfbALOXhU51v74gtmMEAwW1EB1pcw== dependencies: "@opentripplanner/base-map" "^3.2.2" "@opentripplanner/core-utils" "^11.4.4" -"@opentripplanner/stops-overlay@^5.3.3": - version "5.3.3" - resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-5.3.3.tgz#711dd9316de93ac6c959dc3191d31884dc0a9589" - integrity sha512-GYADErZLIG3KPJ4OiigWkyHaGrWJ/wiCenH0RTbQ5J0XbYrenUIlWBsI5kpQNZPGBXocvF77sOTOUM8gex1AUA== +"@opentripplanner/stops-overlay@6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-6.0.0.tgz#97186a2ce82284e2632967a4666294ad04d092db" + integrity sha512-zGpCc2PWpHDn1VGu9zdLfRIfde9sNAMN6ElHkLQq/67ylrQ7R1jIzi9K1O2X/ZPAEtfH5VOYa/y/A1drNlN3gw== dependencies: "@opentripplanner/base-map" "^3.2.2" "@opentripplanner/from-to-location-picker" "^2.1.14" "@opentripplanner/map-popup" "^4.0.0" flat "^5.0.2" -"@opentripplanner/transit-vehicle-overlay@^4.0.13": - version "4.0.13" - resolved "https://registry.yarnpkg.com/@opentripplanner/transit-vehicle-overlay/-/transit-vehicle-overlay-4.0.13.tgz#6f66c7c6a27d2473353b7c8c14acc8c540fb01ad" - integrity sha512-Sh3c3+q2dIhFZP5uyhPboyLSsTv8unVsPYKjFWVJaK19z6wN8KqFVmSqWysrcEnooRJd+D4+4erQiUbabomDLQ== +"@opentripplanner/transit-vehicle-overlay@5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/transit-vehicle-overlay/-/transit-vehicle-overlay-5.0.0.tgz#1a3ea04abce38d65a21a9eaad8c5e0ac19a41100" + integrity sha512-N0vM89xozWTbbb63pBeZEZIbdlbgnP2K0qNJZ0vk87clJU0T7RxBtq/sdftBQ6CzB86AjXCCxfitCZH9HOD7/A== dependencies: "@opentripplanner/base-map" "^3.2.2" "@opentripplanner/core-utils" "^11.4.4" "@opentripplanner/icons" "^2.0.12" flat "^5.0.2" -"@opentripplanner/transitive-overlay@3.0.22": - version "3.0.22" - resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.22.tgz#631096b12e08671e5da05ffe1c0a0e01331750a4" - integrity sha512-Ix3+2qz1+iSbeLnMfd4tU+0AUU1LDjq4y8cTzfKHayqHe0pzHpYY9Ib2zrXbvog7Mav/Jozn2ycL27R4UgzQaA== +"@opentripplanner/transitive-overlay@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-4.0.0.tgz#1a0c41dd4a22704b74da105ef67c0ac63624c335" + integrity sha512-kFKRbKGeIKNDx2t21HaPXsOOkG+qlnHgXN8lbTZRxpfy+EIV3ZeoH72/ymWuiHdLnxUORHBAjhacQh+2fryc4A== dependencies: "@mapbox/polyline" "^1.1.1" "@opentripplanner/base-map" "^3.2.2" @@ -2660,24 +2712,24 @@ "@turf/midpoint" "^6.5.0" lodash.isequal "^4.5.0" -"@opentripplanner/trip-details@^5.0.15": - version "5.0.15" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-5.0.15.tgz#73cfd7427aed49af53fec4ded9de7d17b0ed5377" - integrity sha512-1OfCEju90PXGH9DVy2dbBk8Jz8/8zSJ35/OCgodenGT3FyokQPoJsQhPjr6MPIIYMTyAdUSDT9C372thA+rU2Q== +"@opentripplanner/trip-details@6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-6.0.0.tgz#60958ca14910f865125d20db8ec2eeba6d2c7362" + integrity sha512-BzUAsSpuSWzVMRW6vhiZblrg0Sq7Tnar17jjgvTvIhzv0yUUyrW5jUxlGIPPk11UUJ5WrPZmkfQasF9z8xk5BQ== dependencies: "@opentripplanner/core-utils" "^11.4.4" "@styled-icons/fa-solid" "^10.34.0" flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@^3.7.0-alpha.5": - version "3.7.0-alpha.5" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.7.0-alpha.5.tgz#326b501807fda4a5b5630d57641ed3a48e2c56f8" - integrity sha512-WrKXIUOmutvZBRdOsJmzprf2AUIOFhcpR/AYI8ev8HmrQeETEbOdWzOlhUr9E9jaPb6+St2Bs6XuHcOtlgWNgw== +"@opentripplanner/trip-form@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-4.0.0.tgz#27b36a0504e46cfda1cdf50c971b5cea03de8ae2" + integrity sha512-Cg8SlAVN8M+qoWpz8jAkwuqllIPgrL2PVewTPuDPsIQ8i5B7xo5KKE3TPo7cQUM+jE6WEshpvv0FIdMF+NAlNg== dependencies: "@floating-ui/react" "^0.19.2" "@opentripplanner/building-blocks" "^1.0.3" - "@opentripplanner/core-utils" "^11.4.0" + "@opentripplanner/core-utils" "^11.4.4" "@styled-icons/bootstrap" "^10.34.0" "@styled-icons/boxicons-regular" "^10.38.0" "@styled-icons/fa-regular" "^10.37.0" @@ -2688,10 +2740,10 @@ react-indiana-drag-scroll "^2.0.1" react-inlinesvg "^2.3.0" -"@opentripplanner/trip-viewer-overlay@^2.0.10": - version "2.0.10" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-2.0.10.tgz#2c0809b2d54da4d57d0a0683a4739e29cb13a326" - integrity sha512-7M9l7fF8shtD/566bci+zEkPncf/L+ZWIYAl5gnIgrBxwLagN/+E2zkoDebYamGFGb236FXpvTS30i1BJzhcPA== +"@opentripplanner/trip-viewer-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-3.0.0.tgz#a56263863aba87a3608d4dbed0cf839333cf99d0" + integrity sha512-64qNLUxkL6ow8T1FghdKDp13KH96djjYAo6hHTAeZYHZuu7gxffRD1GmrDJVeyk0+DixjKdiNhAZ9mOCtAgK/w== dependencies: "@mapbox/polyline" "^1.1.0" "@opentripplanner/base-map" "^3.2.2" @@ -2702,10 +2754,10 @@ resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.2.tgz#1373d738479568d880a3b13670b0ec53a1a75bd5" integrity sha512-2qDcKOrsLoXdwjRAdi4xcdDUsZGTnwBM+vfEf8TTuuWSnA+WYav3ldlMB4sugxIdLaVKXlOfe3F5lCEh9jAHWA== -"@opentripplanner/vehicle-rental-overlay@^2.1.9": - version "2.1.9" - resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-2.1.9.tgz#c373e1400874a00f473be0f029b28e0944652c88" - integrity sha512-VYWqnuk5j1yHF/zH5NEqDIVjsSbIsIgiCK6SaYtQHOBwszWauIubpqviTBASAcY72JfKE36AQfGjPuYILd9oTw== +"@opentripplanner/vehicle-rental-overlay@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-3.0.0.tgz#68e2a6c117fa3af485f375685c24a557762c6bb6" + integrity sha512-Yt6l6fEX+5O1jJ4z2NpbA0rib2tARxKdE3nTUFaBORBSq/NFfa2vZMk3EBXIrtzC3/GRabqluJU8sDaMGfkvvw== dependencies: "@opentripplanner/base-map" "^3.2.2" "@opentripplanner/core-utils" "^11.4.4" @@ -3136,11 +3188,11 @@ "@styled-icons/styled-icon" "^10.7.0" "@styled-icons/styled-icon@^10.7.0": - version "10.7.0" - resolved "https://registry.yarnpkg.com/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz#d6960e719b8567c8d0d3a87c40fb6f5b4952a228" - integrity sha512-SCrhCfRyoY8DY7gUkpz+B0RqUg/n1Zaqrr2+YKmK/AyeNfCcoHuP4R9N4H0p/NA1l7PTU10ZkAWSLi68phnAjw== + version "10.7.1" + resolved "https://registry.yarnpkg.com/@styled-icons/styled-icon/-/styled-icon-10.7.1.tgz#da04b80751e126756f98a5485b3b0dd9b52c9aba" + integrity sha512-WLYaeMTMhMkSxE+v+of+r2ovIk0tceDGfv8iqWHRMxvbm+6zxngVcQ4ELx6Zt/LFxqckmmoAdvo6ehiiYj6I6A== dependencies: - "@babel/runtime" "^7.19.0" + "@babel/runtime" "^7.20.7" "@surma/rollup-plugin-off-main-thread@^1.1.1": version "1.4.2" @@ -3596,9 +3648,9 @@ integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ== "@types/minimist@^1.2.0": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" - integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== + version "1.2.5" + resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.5.tgz#ec10755e871497bcd83efe927e43ec46e8c0747e" + integrity sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag== "@types/node@*", "@types/node@14", "@types/node@14 || 16 || 17": version "14.18.21" @@ -3611,9 +3663,9 @@ integrity sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw== "@types/normalize-package-data@^2.4.0": - version "2.4.1" - resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" - integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw== + version "2.4.4" + resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901" + integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA== "@types/object-hash@^3.0.5": version "3.0.5" @@ -5826,9 +5878,9 @@ chownr@^2.0.0: integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== chroma-js@^2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.4.2.tgz#dffc214ed0c11fa8eefca2c36651d8e57cbfb2b0" - integrity sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A== + version "2.6.0" + resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.6.0.tgz#578743dd359698a75067a19fa5571dec54d0b70b" + integrity sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A== chrome-trace-event@^1.0.2: version "1.0.3" @@ -9257,7 +9309,12 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== -graphql@^16.6.0, graphql@^16.8.1: +graphql@^16.6.0: + version "16.9.0" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f" + integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw== + +graphql@^16.8.1: version "16.8.1" resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07" integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw== @@ -9352,9 +9409,9 @@ has-property-descriptors@^1.0.2: es-define-property "^1.0.0" has-proto@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0" - integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg== + version "1.0.3" + resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd" + integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q== has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3: version "1.0.3" @@ -9426,10 +9483,10 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" -hasown@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c" - integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA== +hasown@^2.0.0, hasown@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003" + integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ== dependencies: function-bind "^1.1.2" @@ -10116,13 +10173,20 @@ is-color-stop@^1.0.0: rgb-regex "^1.0.1" rgba-regex "^1.0.0" -is-core-module@^2.0.0, is-core-module@^2.13.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.6.0: +is-core-module@^2.0.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.6.0: version "2.13.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db" integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== dependencies: has "^1.0.3" +is-core-module@^2.13.0: + version "2.15.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37" + integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ== + dependencies: + hasown "^2.0.2" + is-data-descriptor@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" @@ -12401,30 +12465,31 @@ memory-fs@^0.5.0: errno "^0.1.3" readable-stream "^2.0.1" -meow@^6.1.1: - version "6.1.1" - resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467" - integrity sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg== +meow@^8.0.0: + version "8.1.2" + resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897" + integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q== dependencies: "@types/minimist" "^1.2.0" camelcase-keys "^6.2.2" decamelize-keys "^1.1.0" hard-rejection "^2.1.0" - minimist-options "^4.0.2" - normalize-package-data "^2.5.0" + minimist-options "4.1.0" + normalize-package-data "^3.0.0" read-pkg-up "^7.0.1" redent "^3.0.0" trim-newlines "^3.0.0" - type-fest "^0.13.1" - yargs-parser "^18.1.3" + type-fest "^0.18.0" + yargs-parser "^20.2.3" -meow@^8.0.0: - version "8.1.2" - resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897" - integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q== +meow@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364" + integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ== dependencies: "@types/minimist" "^1.2.0" camelcase-keys "^6.2.2" + decamelize "^1.2.0" decamelize-keys "^1.1.0" hard-rejection "^2.1.0" minimist-options "4.1.0" @@ -12590,7 +12655,7 @@ minimatch@^5.0.1: dependencies: brace-expansion "^2.0.1" -minimist-options@4.1.0, minimist-options@^4.0.2: +minimist-options@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619" integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A== @@ -13294,11 +13359,16 @@ object-hash@^1.3.1: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df" integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA== -object-inspect@^1.11.0, object-inspect@^1.13.1, object-inspect@^1.6.0, object-inspect@^1.7.0: +object-inspect@^1.11.0, object-inspect@^1.6.0, object-inspect@^1.7.0: version "1.13.1" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2" integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ== +object-inspect@^1.13.1: + version "1.13.2" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff" + integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g== + object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac" @@ -15770,9 +15840,9 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== regenerator-runtime@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" - integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + version "0.14.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" + integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== regenerator-transform@^0.14.2: version "0.14.5" @@ -16047,7 +16117,7 @@ resolve@1.18.1: is-core-module "^2.0.0" path-parse "^1.0.6" -resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1: +resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1: version "1.22.4" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34" integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg== @@ -16056,6 +16126,15 @@ resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11. path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" +resolve@^1.10.0: + version "1.22.8" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" + integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== + dependencies: + is-core-module "^2.13.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + resolve@^2.0.0-next.3: version "2.0.0-next.3" resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46" @@ -16906,9 +16985,9 @@ spdx-correct@^3.0.0: spdx-license-ids "^3.0.0" spdx-exceptions@^2.1.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d" - integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A== + version "2.5.0" + resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66" + integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w== spdx-expression-parse@^3.0.0: version "3.0.1" @@ -16919,9 +16998,9 @@ spdx-expression-parse@^3.0.0: spdx-license-ids "^3.0.0" spdx-license-ids@^3.0.0: - version "3.0.13" - resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz#7189a474c46f8d47c7b0da4b987bb45e908bd2d5" - integrity sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w== + version "3.0.20" + resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz#e44ed19ed318dd1e5888f93325cee800f0f51b89" + integrity sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw== spdy-transport@^3.0.0: version "3.0.0" @@ -17980,11 +18059,6 @@ type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5: resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g== -type-fest@^0.13.1: - version "0.13.1" - resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934" - integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg== - type-fest@^0.16.0: version "0.16.0" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860" @@ -19047,7 +19121,7 @@ yargs-parser@^13.1.2: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^18.1.2, yargs-parser@^18.1.3: +yargs-parser@^18.1.2: version "18.1.3" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0" integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ== From df10d08d76467ab139a47550c913891ddda2e0b7 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 25 Sep 2024 11:43:50 -0500 Subject: [PATCH 72/74] fix unit tests --- .../viewers/__snapshots__/nearby-view.js.snap | 1154 ++++++++--------- .../stop-schedule-viewer.ts.snap | 6 +- yarn.lock | 191 +-- 3 files changed, 647 insertions(+), 704 deletions(-) diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap index 3f82632bd..36c414905 100644 --- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap +++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap @@ -46,7 +46,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`] className="nearby-view base-color-bg" >
                                                                viewers > nearby view renders nothing on a blank page 1`] } >
                                                                  viewers > nearby view renders proper scooter dates 1`] = ` className="nearby-view base-color-bg" >
                                                                  viewers > nearby view renders proper scooter dates 1`] = ` } >
                                                                    viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                    viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    Roosevelt Station - Bay 2 @@ -10036,7 +10036,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                      viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                    • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                      1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                        1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                            viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                            Roosevelt @@ -16883,7 +16883,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                            viewers > nearby view renders proper scooter dates 1`] = `

                                                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                              viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                            • viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                              1. viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                1. viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    Roosevelt Station - Bay 1 @@ -26397,7 +26397,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                    viewers > nearby view renders proper scooter dates 1`] = `

                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                                    • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                      1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                        1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                          1. viewers > nearby view renders proper scooter dates 1`] = ` title="988" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              Roosevelt Station Bay 5 - Bay 5 @@ -35949,7 +35949,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                              viewers > nearby view renders proper scooter dates 1`] = `

                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                                              • viewers > nearby view renders proper scooter dates 1`] = ` title="67" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                1. viewers > nearby view renders proper scooter dates 1`] = ` title="73" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                  1. viewers > nearby view renders proper scooter dates 1`] = ` title="984" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = `

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                      Roosevelt @@ -43780,7 +43780,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = `

                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                                                      • viewers > nearby view renders proper scooter dates 1`] = ` title="1 Line" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                          viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                          Roosevelt Station - Bay 3 @@ -51332,7 +51332,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                          viewers > nearby view renders proper scooter dates 1`] = `

                                                                                                          viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                            viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                                                          • viewers > nearby view renders proper scooter dates 1`] = ` title="522" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                            1. viewers > nearby view renders proper scooter dates 1`] = ` title="67" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                              1. viewers > nearby view renders proper scooter dates 1`] = ` title="522" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                  viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                                1. viewers > nearby view renders proper scooter dates 1`] = ` title="73" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                    viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                                  1. viewers > nearby view renders proper scooter dates 1`] = ` title="322" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                      viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                                    1. viewers > nearby view renders proper scooter dates 1`] = ` title="322" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = `

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                                        NE 65th St & 14th Ave NE @@ -62499,7 +62499,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` >

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = `

                                                                                                                        viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` size="0.9em" > viewers > nearby view renders proper scooter dates 1`] = ` >
                                                                                                                          viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >
                                                                                                                        • viewers > nearby view renders proper scooter dates 1`] = ` title="45" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                            viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                                          1. viewers > nearby view renders proper scooter dates 1`] = ` title="62" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                              viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` roundedTop={false} >

                                                                                                                            1. viewers > nearby view renders proper scooter dates 1`] = ` title="79" > viewers > nearby view renders proper scooter dates 1`] = ` className="departure-times" >

                                                                                                                                viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.realtime" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` iconViewBox="0 0 448 512" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > nearby view renders proper scooter dates 1`] = ` title="components.StopTimeCell.scheduled" > viewers > nearby view renders proper scooter dates 1`] = ` > viewers > stop viewer should render with initial stop id a > viewers > stop viewer should render with initial stop id a

                                                                                                                              Date: Wed, 25 Sep 2024 12:10:05 -0500 Subject: [PATCH 73/74] Update percy tests --- percy/percy.test.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/percy/percy.test.js b/percy/percy.test.js index 52fdcdb63..1b355e40f 100644 --- a/percy/percy.test.js +++ b/percy/percy.test.js @@ -192,14 +192,12 @@ async function executeTest(page, isMobile, isCallTaker) { await page.waitForTimeout(1000) // wait extra time for all results to load if (!isMobile) { - await page.hover('label[title="Transit"]') - await page.waitForTimeout(200) - await percySnapshotWithWait( - page, - 'Metro Transit-Walk Itinerary Desktop with Mode Selector Expanded' - ) - // Hover something else to unhover the mode selector. - await page.hover('#plan-trip') + await page.click('#open-advanced-settings-button') + await page.waitForTimeout(500) + await percySnapshotWithWait(page, 'Metro Advanced Settings Open') + // Close advanced settings + await page.click('#close-advanced-settings-button') + await page.waitForTimeout(500) } else { await percySnapshotWithWait(page, 'Metro Transit-Walk Itinerary Mobile') } From a3343d462078e0ab511310b8662a89c4f4d70b20 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 25 Sep 2024 12:15:57 -0500 Subject: [PATCH 74/74] fix percy tests --- percy/percy.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/percy/percy.test.js b/percy/percy.test.js index 1b355e40f..6e8e8b1e6 100644 --- a/percy/percy.test.js +++ b/percy/percy.test.js @@ -145,7 +145,7 @@ async function executeTest(page, isMobile, isCallTaker) { // Close advanced settings await page.click('#close-advanced-settings-button') - + await page.waitForTimeout(500) // Delete both origin and destination await page.click('.from-form-control')