From 98ee788a6ae49c0a9c712a01bf835dfd209eb60d Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 4 Jun 2024 14:19:57 -0500 Subject: [PATCH 01/29] feat(trip-form): create mode subsettings container and button --- packages/trip-form/package.json | 8 +- .../MetroModeSelector.story.tsx | 116 +----------------- .../ModeSettingsButton.story.tsx | 115 +++++++++++++++++ .../ModeSettingsButton/index.tsx | 111 +++++++++++++++++ .../ModeSubsettingsContainer.tsx | 61 +++++++++ .../trip-form/src/MetroModeSelector/index.tsx | 2 +- .../MetroModeSelector/mockButtons.story.tsx | 113 +++++++++++++++++ packages/trip-form/src/index.ts | 4 + yarn.lock | 5 + 9 files changed, 420 insertions(+), 115 deletions(-) create mode 100644 packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx create mode 100644 packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx create mode 100644 packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx create mode 100644 packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx diff --git a/packages/trip-form/package.json b/packages/trip-form/package.json index d944e3b9e..6f6d121c0 100644 --- a/packages/trip-form/package.json +++ b/packages/trip-form/package.json @@ -10,20 +10,22 @@ "types": "lib/index.d.ts", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.3.1", "@floating-ui/react": "^0.19.2", + "@opentripplanner/core-utils": "^11.3.1", + "@opentripplanner/building-blocks": "^1.0.3", "@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" }, "devDependencies": { - "@types/flat": "^5.0.2", - "@opentripplanner/types": "6.5.0" + "@opentripplanner/types": "6.5.0", + "@types/flat": "^5.0.2" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx index de4e78150..d4003bd10 100644 --- a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx @@ -1,13 +1,4 @@ import { ModeButtonDefinition } from "@opentripplanner/types"; -import { - Bus, - Car, - PersonWalking, - Train, - TrainSubway, - TrainTram -} from "@styled-icons/fa-solid"; -import { ClassicBike } from "@opentripplanner/icons/src/classic"; import React, { ReactElement, useState } from "react"; import * as Core from ".."; import { QueryParamChangeEvent } from "../types"; @@ -17,108 +8,11 @@ import { populateSettingWithValue, setModeButtonEnabled } from "./utils"; - -const getIcon = (iconName: string): JSX.Element | null => { - switch (iconName) { - case "bus": - return ; - case "tram": - return ; - case "subway": - return ; - case "train": - return ; - default: - return null; - } -}; - -const defaultModeButtonDefinitions = [ - { - Icon: Bus, - iconName: "bus", - key: "transit", - label: "Bus", - modes: [{ mode: "TRANSIT" }] - }, - { - Icon: PersonWalking, - iconName: "person-walking", - key: "walk", - label: "Walk", - modes: [{ mode: "WALK" }] - }, - { - // Using TriMet icon here to illustrate the use of fillModeIcons prop. - Icon: ClassicBike, - iconName: "bicycle", - key: "bicycle", - label: "Bike", - modes: [{ mode: "BICYCLE" }] - }, - { - Icon: Car, - iconName: "car", - key: "car", - label: "Car", - modes: [{ mode: "CAR" }] - } -]; - -// TODO: add more test settings? -const modeSettingDefinitionsWithDropdown = [ - { - applicableMode: "TRANSIT", - default: "blue", - key: "busColor", - label: "Bus Color", - options: [{ value: "blue", text: "Blue" }], - type: "DROPDOWN" - }, - { - applicableMode: "TRANSIT", - default: true, - key: "tram", - iconName: "tram", - label: "Tram", - addTransportMode: { - mode: "TRAM" - }, - type: "SUBMODE" - }, - { - applicableMode: "TRANSIT", - default: true, - key: "bus", - label: "MARTA Rail", - iconName: "bus", - addTransportMode: { - mode: "BUS" - }, - type: "SUBMODE" - }, - { - applicableMode: "TRANSIT", - default: true, - key: "subway", - label: "Subway", - iconName: "subway", - addTransportMode: { - mode: "SUBWAY" - }, - type: "SUBMODE" - }, - { - applicableMode: "TRANSIT", - default: true, - key: "ferry", - label: "Ferry", - addTransportMode: { - mode: "FERRY" - }, - type: "SUBMODE" - } -]; +import { + modeSettingDefinitionsWithDropdown, + getIcon, + defaultModeButtonDefinitions +} from "./mockButtons.story"; const initialState = { enabledModeButtons: ["transit"], diff --git a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx new file mode 100644 index 000000000..09a71f616 --- /dev/null +++ b/packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx @@ -0,0 +1,115 @@ +import React, { ReactElement, useState } from "react"; +import * as Core from ".."; +import { QueryParamChangeEvent } from "../types"; +import { + addSettingsToButton, + extractModeSettingDefaultsToObject, + populateSettingWithValue, + setModeButtonEnabled +} from "./utils"; +import { + defaultModeButtonDefinitions, + getIcon, + modeSettingDefinitionsWithDropdown +} from "./mockButtons.story"; + +const initialState = { + enabledModeButtons: ["transit"], + modeSettingValues: {} +}; + +function pipe(...fns: Array<(arg: T) => T>) { + return (value: T) => fns.reduce((acc, fn) => fn(acc), value); +} + +const MetroModeSubsettingsComponent = ({ + fillModeIcons, + modeButtonDefinitions, + onSetModeSettingValue, + onToggleModeButton +}: { + fillModeIcons?: boolean; + modeButtonDefinitions: any; + onSetModeSettingValue: (event: QueryParamChangeEvent) => void; + onToggleModeButton: (key: string, newState: boolean) => void; +}): ReactElement => { + const [modeSettingValues, setModeSettingValues] = useState({}); + const modeSettingValuesWithDefaults = { + ...extractModeSettingDefaultsToObject(modeSettingDefinitionsWithDropdown), + ...initialState.modeSettingValues, + ...modeSettingValues + }; + + const [activeModeButtonKeys, setModeButtonKeys] = useState( + initialState.enabledModeButtons + ); + + const addIconToModeSetting = msd => ({ + ...msd, + icon: getIcon(msd.iconName) + }); + + const processedModeSettings = modeSettingDefinitionsWithDropdown.map( + pipe( + addIconToModeSetting, + populateSettingWithValue(modeSettingValuesWithDefaults) + ) + ); + + const processedModeButtons = modeButtonDefinitions.map( + pipe( + addSettingsToButton(processedModeSettings), + setModeButtonEnabled(activeModeButtonKeys) + ) + ); + + const toggleModeButtonAction = (key: string, newState: boolean) => { + if (newState) { + setModeButtonKeys([...activeModeButtonKeys, key]); + } else { + setModeButtonKeys(activeModeButtonKeys.filter(button => button !== key)); + } + // Storybook Action: + onToggleModeButton(key, newState); + }; + + const setModeSettingValueAction = (event: QueryParamChangeEvent) => { + setModeSettingValues({ ...modeSettingValues, ...event }); + // Storybook Action: + onSetModeSettingValue(event); + }; + + return ( + + ); +}; + +const Template = (args: { + fillModeIcons?: boolean; + onSetModeSettingValue: (event: QueryParamChangeEvent) => void; + onToggleModeButton: (key: string, newState: boolean) => void; +}): ReactElement => ( + +); + +export const ModeSettingsButtons = Template.bind({}); + +export default { + argTypes: { + fillModeIcons: { control: "boolean" }, + onSetModeSettingValue: { action: "set mode setting value" }, + onToggleModeButton: { action: "toggle button" } + }, + component: MetroModeSubsettingsComponent, + title: "Trip Form Components/Mode Settings Buttons" +}; diff --git a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx new file mode 100644 index 000000000..25a721108 --- /dev/null +++ b/packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx @@ -0,0 +1,111 @@ +import React from "react"; +import AnimateHeight from "react-animate-height"; +import styled from "styled-components"; +import colors from "@opentripplanner/building-blocks"; +import { Check2 } from "@styled-icons/bootstrap"; +import { ModeButtonDefinition } from "@opentripplanner/types"; +import { useIntl } from "react-intl"; +import SubSettingsPane from "../SubSettingsPane"; +import generateModeButtonLabel from "../i18n"; +import { invisibleCss } from ".."; + +const { blue, grey } = colors; + +interface Props { + accentColor?: string; + modeButton: ModeButtonDefinition; + onSettingsUpdate: () => void; + id: string; + onToggle: () => void; +} + +const SettingsContainer = styled.div` + width: 100%; + max-width: 500px; +`; + +const StyledModeSettingsButton = styled.div<{ accentColor: string }>` + & > input { + ${invisibleCss} + } + & > label { + width: 100%; + background-color: #fff; + color: ${props => props.accentColor}; + height: 51px; + border: 1px solid ${props => props.accentColor}; + border-left-width: 2px; + border-right-width: 2px; + display: grid; + grid-template-columns: 40px auto 40px; + gap: 20px; + align-items: center; + justify-items: center; + } + + & > input:checked + label { + background-color: ${props => props.accentColor}; + color: #fff; + } + + span { + justify-self: flex-start; + } + + svg { + height: 24px; + width: 24px; + } + + &:hover { + cursor: pointer; + } +`; + +const StyledSettingsContainer = styled.div` + border: 1px solid ${grey[300]}; + border-top: 0; + padding: 1em; +`; + +const ModeSettingsButton = ({ + accentColor = blue[700], + modeButton, + onSettingsUpdate, + onToggle, + id +}: Props) => { + const intl = useIntl(); + const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); + const checkboxId = `metro-submode-selector-mode-${id}`; + return ( + + + + + + {modeButton.modeSettings.length > 0 && ( + + + + + + )} + + ); +}; + +export default ModeSettingsButton; diff --git a/packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx b/packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx new file mode 100644 index 000000000..54ace955b --- /dev/null +++ b/packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx @@ -0,0 +1,61 @@ +import styled from "styled-components"; +import React, { useCallback } from "react"; +import { ModeButtonDefinition } from "@opentripplanner/types"; +import ModeSettingsButton from "./ModeSettingsButton"; + +const SubsettingsContainer = styled.fieldset` + border: none; + width: 90%; + margin: 0; + + legend { + display: none; + } + + display: flex; + flex-direction: column; + + div:first-of-type div label { + border-top-width: 2px; + } + + div:last-of-type div label { + border-bottom-width: 2px; + } +`; + +interface Props { + fillModeIcons: any; + label: string; + modeButtons: ModeButtonDefinition[]; + onSettingsUpdate: any; + onToggleModeButton: any; +} + +const ModeSubsettingsContainer = ({ + modeButtons, + label, + onSettingsUpdate, + onToggleModeButton +}: Props): JSX.Element => { + return ( + + {label} + {modeButtons.map(button => { + return ( + { + onToggleModeButton(button.key, !button.enabled); + }, [button, onToggleModeButton])} + id={button.key} + /> + ); + })} + + ); +}; + +export default ModeSubsettingsContainer; diff --git a/packages/trip-form/src/MetroModeSelector/index.tsx b/packages/trip-form/src/MetroModeSelector/index.tsx index 26fa1b919..b21fc14f8 100644 --- a/packages/trip-form/src/MetroModeSelector/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/index.tsx @@ -21,7 +21,7 @@ import styled, { css } from "styled-components"; import SubSettingsPane, { defaultMessages } from "./SubSettingsPane"; import generateModeButtonLabel from "./i18n"; -const invisibleCss = css` +export const invisibleCss = css` clip: rect(0, 0, 0, 0); height: 0; overflow: hidden; diff --git a/packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx b/packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx new file mode 100644 index 000000000..8ffe5152d --- /dev/null +++ b/packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx @@ -0,0 +1,113 @@ +import { + Bus, + Car, + PersonWalking, + Train, + TrainSubway, + TrainTram +} from "@styled-icons/fa-solid"; + +import { ClassicBike } from "@opentripplanner/icons/src/classic"; +import React from "react"; + +export const defaultModeButtonDefinitions = [ + { + Icon: Bus, + iconName: "bus", + key: "transit", + label: "Bus", + modes: [{ mode: "TRANSIT" }] + }, + { + Icon: PersonWalking, + iconName: "person-walking", + key: "walk", + label: "Walk", + modes: [{ mode: "WALK" }] + }, + { + // Using TriMet icon here to illustrate the use of fillModeIcons prop. + Icon: ClassicBike, + iconName: "bicycle", + key: "bicycle", + label: "Bike", + modes: [{ mode: "BICYCLE" }] + }, + { + Icon: Car, + iconName: "car", + key: "car", + label: "Car", + modes: [{ mode: "CAR" }] + } +]; + +// TODO: add more test settings? +export const modeSettingDefinitionsWithDropdown = [ + { + applicableMode: "TRANSIT", + default: "blue", + key: "busColor", + label: "Bus Color", + options: [{ value: "blue", text: "Blue" }], + type: "DROPDOWN" + }, + { + applicableMode: "TRANSIT", + default: true, + key: "tram", + iconName: "tram", + label: "Tram", + addTransportMode: { + mode: "TRAM" + }, + type: "SUBMODE" + }, + { + applicableMode: "TRANSIT", + default: true, + key: "bus", + label: "MARTA Rail", + iconName: "bus", + addTransportMode: { + mode: "BUS" + }, + type: "SUBMODE" + }, + { + applicableMode: "TRANSIT", + default: true, + key: "subway", + label: "Subway", + iconName: "subway", + addTransportMode: { + mode: "SUBWAY" + }, + type: "SUBMODE" + }, + { + applicableMode: "TRANSIT", + default: true, + key: "ferry", + label: "Ferry", + addTransportMode: { + mode: "FERRY" + }, + type: "SUBMODE" + } +]; + +export const getIcon = (iconName: string): JSX.Element | null => { + switch (iconName) { + case "bus": + return ; + case "tram": + return ; + case "subway": + return ; + case "train": + return ; + default: + return null; + } +}; diff --git a/packages/trip-form/src/index.ts b/packages/trip-form/src/index.ts index 507b0b6a1..019f9194c 100644 --- a/packages/trip-form/src/index.ts +++ b/packages/trip-form/src/index.ts @@ -9,6 +9,8 @@ import SliderSelector from "./SliderSelector"; import * as Styled from "./styled"; import SubmodeSelector from "./SubmodeSelector"; import MetroModeSelector from "./MetroModeSelector"; +import ModeSettingsButton from "./MetroModeSelector/ModeSettingsButton"; +import ModeSubsettingsContainer from "./MetroModeSelector/ModeSubsettingsContainer"; import { addSettingsToButton, aggregateModes, @@ -31,6 +33,8 @@ export { GeneralSettingsPanel, getBannedRoutesFromSubmodes, MetroModeSelector, + ModeSettingsButton, + ModeSubsettingsContainer, ModeButton, ModeSelector, ModeSettingRenderer, diff --git a/yarn.lock b/yarn.lock index 886be9fff..abf6e3919 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15749,6 +15749,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-colorful@^5.1.2: version "5.3.0" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.3.0.tgz#bcbae49c1affa9ab9a3c8063398c5948419296bd" From f870be43b7d455f7f19386a27cc80940e31a8703 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 6 Jun 2024 10:18:44 -0500 Subject: [PATCH 02/29] Clean up and rename components --- ...x => AdvancedModeSettingsButton.story.tsx} | 9 +++-- .../index.tsx | 40 +++++++++---------- ...x => AdvancedModeSubsettingsContainer.tsx} | 15 ++++--- packages/trip-form/src/index.ts | 8 ++-- 4 files changed, 38 insertions(+), 34 deletions(-) rename packages/trip-form/src/MetroModeSelector/{ModeSettingsButton.story.tsx => AdvancedModeSettingsButton.story.tsx} (91%) rename packages/trip-form/src/MetroModeSelector/{ModeSettingsButton => AdvancedModeSettingsButton}/index.tsx (93%) rename packages/trip-form/src/MetroModeSelector/{ModeSubsettingsContainer.tsx => AdvancedModeSubsettingsContainer.tsx} (78%) diff --git a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx similarity index 91% rename from packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx rename to packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx index 09a71f616..7a2b0248a 100644 --- a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx @@ -1,4 +1,5 @@ import React, { ReactElement, useState } from "react"; +import { ModeButtonDefinition } from "@opentripplanner/types"; import * as Core from ".."; import { QueryParamChangeEvent } from "../types"; import { @@ -29,7 +30,7 @@ const MetroModeSubsettingsComponent = ({ onToggleModeButton }: { fillModeIcons?: boolean; - modeButtonDefinitions: any; + modeButtonDefinitions: Array; onSetModeSettingValue: (event: QueryParamChangeEvent) => void; onToggleModeButton: (key: string, newState: boolean) => void; }): ReactElement => { @@ -80,7 +81,7 @@ const MetroModeSubsettingsComponent = ({ }; return ( - ); -export const ModeSettingsButtons = Template.bind({}); +export const AdvancedModeSettingsButtons = Template.bind({}); export default { argTypes: { @@ -111,5 +112,5 @@ export default { onToggleModeButton: { action: "toggle button" } }, component: MetroModeSubsettingsComponent, - title: "Trip Form Components/Mode Settings Buttons" + title: "Trip Form Components/Advanced Mode Settings Buttons" }; diff --git a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx similarity index 93% rename from packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx rename to packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 25a721108..375e4d62c 100644 --- a/packages/trip-form/src/MetroModeSelector/ModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -11,14 +11,6 @@ import { invisibleCss } from ".."; const { blue, grey } = colors; -interface Props { - accentColor?: string; - modeButton: ModeButtonDefinition; - onSettingsUpdate: () => void; - id: string; - onToggle: () => void; -} - const SettingsContainer = styled.div` width: 100%; max-width: 500px; @@ -29,18 +21,18 @@ const StyledModeSettingsButton = styled.div<{ accentColor: string }>` ${invisibleCss} } & > label { - width: 100%; + align-items: center; background-color: #fff; - color: ${props => props.accentColor}; - height: 51px; border: 1px solid ${props => props.accentColor}; border-left-width: 2px; border-right-width: 2px; + color: ${props => props.accentColor}; display: grid; - grid-template-columns: 40px auto 40px; gap: 20px; - align-items: center; + grid-template-columns: 40px auto 40px; + height: 51px; justify-items: center; + padding: 0 10px; } & > input:checked + label { @@ -53,8 +45,8 @@ const StyledModeSettingsButton = styled.div<{ accentColor: string }>` } svg { - height: 24px; - width: 24px; + height: 26px; + width: 26px; } &:hover { @@ -68,13 +60,21 @@ const StyledSettingsContainer = styled.div` padding: 1em; `; -const ModeSettingsButton = ({ +interface Props { + accentColor?: string; + id: string; + modeButton: ModeButtonDefinition; + onSettingsUpdate: () => void; + onToggle: () => void; +} + +const AdvancedModeSettingsButton = ({ accentColor = blue[700], + id, modeButton, onSettingsUpdate, - onToggle, - id -}: Props) => { + onToggle +}: Props): JSX.Element => { const intl = useIntl(); const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); const checkboxId = `metro-submode-selector-mode-${id}`; @@ -108,4 +108,4 @@ const ModeSettingsButton = ({ ); }; -export default ModeSettingsButton; +export default AdvancedModeSettingsButton; diff --git a/packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx similarity index 78% rename from packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx rename to packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx index 54ace955b..8b0aed915 100644 --- a/packages/trip-form/src/MetroModeSelector/ModeSubsettingsContainer.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx @@ -1,15 +1,16 @@ import styled from "styled-components"; import React, { useCallback } from "react"; import { ModeButtonDefinition } from "@opentripplanner/types"; -import ModeSettingsButton from "./ModeSettingsButton"; +import AdvancedModeSettingsButton from "./AdvancedModeSettingsButton"; +import { invisibleCss } from "."; const SubsettingsContainer = styled.fieldset` border: none; - width: 90%; margin: 0; + width: 90%; legend { - display: none; + ${invisibleCss} } display: flex; @@ -17,10 +18,12 @@ const SubsettingsContainer = styled.fieldset` div:first-of-type div label { border-top-width: 2px; + border-radius: 8px 8px 0 0; } div:last-of-type div label { border-bottom-width: 2px; + border-radius: 0 0 8px 8px; } `; @@ -32,7 +35,7 @@ interface Props { onToggleModeButton: any; } -const ModeSubsettingsContainer = ({ +const AdvancedModeSubsettingsContainer = ({ modeButtons, label, onSettingsUpdate, @@ -43,7 +46,7 @@ const ModeSubsettingsContainer = ({ {label} {modeButtons.map(button => { return ( - Date: Thu, 6 Jun 2024 12:33:08 -0500 Subject: [PATCH 03/29] clean up types, styling, and pass fillModeIcons --- .../AdvancedModeSettingsButton/index.tsx | 24 +++++++++++++++---- .../AdvancedModeSubsettingsContainer.tsx | 13 +++++++--- .../MetroModeSelector/mockButtons.story.tsx | 2 +- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 375e4d62c..b15032419 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -8,6 +8,7 @@ import { useIntl } from "react-intl"; import SubSettingsPane from "../SubSettingsPane"; import generateModeButtonLabel from "../i18n"; import { invisibleCss } from ".."; +import { QueryParamChangeEvent } from "../../types"; const { blue, grey } = colors; @@ -16,7 +17,11 @@ const SettingsContainer = styled.div` max-width: 500px; `; -const StyledModeSettingsButton = styled.div<{ accentColor: string }>` +const StyledModeSettingsButton = styled.div<{ + accentColor: string; + fillModeIcons: boolean; + subsettings: boolean; +}>` & > input { ${invisibleCss} } @@ -38,6 +43,8 @@ const StyledModeSettingsButton = styled.div<{ accentColor: string }>` & > input:checked + label { background-color: ${props => props.accentColor}; color: #fff; + border-bottom-left-radius: ${props => props.subsettings && 0} !important; + border-bottom-right-radius: ${props => props.subsettings && 0} !important; } span { @@ -47,6 +54,8 @@ const StyledModeSettingsButton = styled.div<{ accentColor: string }>` svg { height: 26px; width: 26px; + fill: ${props => + props.fillModeIcons === false ? "inherit" : "currentcolor"}; } &:hover { @@ -62,14 +71,16 @@ const StyledSettingsContainer = styled.div` interface Props { accentColor?: string; + fillModeIcons: boolean; id: string; modeButton: ModeButtonDefinition; - onSettingsUpdate: () => void; + onSettingsUpdate: (event: QueryParamChangeEvent) => void; onToggle: () => void; } const AdvancedModeSettingsButton = ({ accentColor = blue[700], + fillModeIcons, id, modeButton, onSettingsUpdate, @@ -79,8 +90,13 @@ const AdvancedModeSettingsButton = ({ const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); const checkboxId = `metro-submode-selector-mode-${id}`; return ( - - + + 0} + > void; + onToggleModeButton: (key: string, newState: boolean) => void; } const AdvancedModeSubsettingsContainer = ({ + fillModeIcons, modeButtons, label, onSettingsUpdate, @@ -47,6 +53,7 @@ const AdvancedModeSubsettingsContainer = ({ {modeButtons.map(button => { return ( Date: Wed, 12 Jun 2024 13:51:37 -0700 Subject: [PATCH 04/29] update snapshots --- __snapshots__/storybook.test.ts.snap | 688 ++++++++++++++++++++++++++- 1 file changed, 687 insertions(+), 1 deletion(-) diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index db0dbf85c..6af84bc94 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -264552,6 +264552,692 @@ Array [ ] `; +exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced Mode Settings Buttons 1`] = ` + + + +`; + +exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced Mode Settings Buttons 2`] = ` +.c4 { + display: inline-block; + vertical-align: middle; + overflow: hidden; +} + +.c9 { + font-weight: normal; + padding-left: 6px; +} + +.c11 > div { + width: 50%; + display: inline-block; + box-sizing: border-box; + position: relative; +} + +.c11 select { + width: 100%; + box-sizing: border-box; + cursor: pointer; +} + +.c3 { + display: inline-block; + vertical-align: middle; + overflow: hidden; +} + +.c7 { + display: grid; + grid-column: span 2; + grid-template-columns: 1fr 1fr; + width: 100%; +} + +.c6 { + border: none; + pointer-events: auto; +} + +.c6 div { + padding: 5px 0; +} + +.c6 .wide { + grid-column: span 2; +} + +.c6 .slim { + font-size: 125%; + font-weight: 125%; +} + +.c6 legend { + font-size: 1.5em; + margin-bottom: 0.5rem; + padding-top: 15px; +} + +.c8 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-left: 4px; +} + +.c8 input { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c10 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 4px; +} + +.c10 svg { + width: 16px; + height: 16px; + display: inline-block; + margin-bottom: 4px; + vertical-align: middle; + overflow: hidden; +} + +.c1 { + width: 100%; + max-width: 500px; +} + +.c2 > input { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} + +.c2 > label { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #fff; + border: 1px solid #336B9E; + border-left-width: 2px; + border-right-width: 2px; + color: #336B9E; + display: grid; + gap: 20px; + grid-template-columns: 40px auto 40px; + height: 51px; + justify-items: center; + padding: 0 10px; +} + +.c2 > input:checked + label { + background-color: #336B9E; + color: #fff; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.c2 span { + justify-self: flex-start; +} + +.c2 svg { + height: 26px; + width: 26px; + fill: currentcolor; +} + +.c2:hover { + cursor: pointer; +} + +.c12 > input { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} + +.c12 > label { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #fff; + border: 1px solid #336B9E; + border-left-width: 2px; + border-right-width: 2px; + color: #336B9E; + display: grid; + gap: 20px; + grid-template-columns: 40px auto 40px; + height: 51px; + justify-items: center; + padding: 0 10px; +} + +.c12 > input:checked + label { + background-color: #336B9E; + color: #fff; + border-bottom-left-radius: !important; + border-bottom-right-radius: !important; +} + +.c12 span { + justify-self: flex-start; +} + +.c12 svg { + height: 26px; + width: 26px; + fill: currentcolor; +} + +.c12:hover { + cursor: pointer; +} + +.c5 { + border: 1px solid #B3B3B3; + border-top: 0; + padding: 1em; +} + +.c0 { + border: none; + margin: 0; + width: 90%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c0 legend { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} + +.c0 div:first-of-type div label { + border-top-width: 2px; + border-radius: 8px 8px 0 0; +} + +.c0 div:last-of-type div label { + border-bottom-width: 2px; + border-radius: 0 0 8px 8px; +} + +.c0 div.advanced-submode-container:last-of-type div:last-child { + border-radius: 0 0 8px 8px; +} + +
+ + Select a transit mode + +
+
+ + +
+
+
+
+
+ + + Transit + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+`; + exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector 1`] = ` Date: Wed, 12 Jun 2024 16:56:49 -0700 Subject: [PATCH 05/29] merge yarn --- yarn.lock | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3f72219de..abf6e3919 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3246,17 +3246,6 @@ resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca" integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q== -"@opentripplanner/geocoder@^2.2.2": - version "2.2.2" - resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480" - integrity sha512-tJIOOE5N9kpMj0ji1YyVfWwg4yAFVs7Ks+EET67acql768bXwRE6rHoX6oaHvKhbCDjaQ7kuPIwi1BYWHQgg0Q== - 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" - "@peculiar/asn1-schema@^2.1.6", "@peculiar/asn1-schema@^2.3.0": version "2.3.3" resolved "https://registry.yarnpkg.com/@peculiar/asn1-schema/-/asn1-schema-2.3.3.tgz#21418e1f3819e0b353ceff0c2dad8ccb61acd777" From 8145226f3976a3a5a143d370dde47a99a33c2f2e Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Sat, 15 Jun 2024 09:43:07 +0200 Subject: [PATCH 06/29] deps: force animate height version --- package.json | 3 ++- packages/trip-form/package.json | 2 +- yarn.lock | 14 +++++++------- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index d38dc0ada..66ff8794b 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "packages/*" ], "resolutions": { - "react": "17.0.2" + "react": "17.0.2", + "react-animate-height": "3.0.4" }, "devDependencies": { "@babel/cli": "^7.10", diff --git a/packages/trip-form/package.json b/packages/trip-form/package.json index f86266304..b2b16208e 100644 --- a/packages/trip-form/package.json +++ b/packages/trip-form/package.json @@ -19,7 +19,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" }, diff --git a/yarn.lock b/yarn.lock index abf6e3919..09b8e2bf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7136,11 +7136,16 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1: +classnames@^2.2.5, classnames@^2.2.6: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== +classnames@^2.3.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + clean-css@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" @@ -15742,18 +15747,13 @@ rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-animate-height@^3.0.4: +react-animate-height@3.0.4, react-animate-height@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-3.0.4.tgz#80c9cc25e8569709ad1c626b968dbe5108d0ce46" integrity sha512-k+mBS8yCzpFp+7BdrHsL5bXd6CO/2bYO2SvRGKfxK+Ss3nzplAJLlgnd6Zhcxe/avdpy/CgcziicFj7pIHgG5g== 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-colorful@^5.1.2: version "5.3.0" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.3.0.tgz#bcbae49c1affa9ab9a3c8063398c5948419296bd" From 156463807e3d9dd7d24b918a74edab6868605ad7 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 18 Jun 2024 15:44:32 -0500 Subject: [PATCH 07/29] fix(trip-form): clean up styling + pass props --- .../MetroModeSelector/AdvancedModeSettingsButton/index.tsx | 3 +++ .../MetroModeSelector/AdvancedModeSubsettingsContainer.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index b15032419..3ced01898 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -33,10 +33,13 @@ const StyledModeSettingsButton = styled.div<{ border-right-width: 2px; color: ${props => props.accentColor}; display: grid; + font-size: 18px; + font-weight: 400; gap: 20px; grid-template-columns: 40px auto 40px; height: 51px; justify-items: center; + margin-bottom: 0; padding: 0 10px; } diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx index 70510bd1c..e745ca6c1 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx @@ -8,7 +8,6 @@ import { QueryParamChangeEvent } from "../types"; const SubsettingsContainer = styled.fieldset` border: none; margin: 0; - width: 90%; legend { ${invisibleCss} @@ -33,6 +32,7 @@ const SubsettingsContainer = styled.fieldset` `; interface Props { + accentColor: string; fillModeIcons: boolean | undefined; label: string; modeButtons: ModeButtonDefinition[]; @@ -41,6 +41,7 @@ interface Props { } const AdvancedModeSubsettingsContainer = ({ + accentColor, fillModeIcons, modeButtons, label, @@ -53,6 +54,7 @@ const AdvancedModeSubsettingsContainer = ({ {modeButtons.map(button => { return ( Date: Tue, 18 Jun 2024 16:14:21 -0500 Subject: [PATCH 08/29] fix(trip-form): add cursor styling to mode button --- .../src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 3ced01898..0516c2c7f 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -32,6 +32,7 @@ const StyledModeSettingsButton = styled.div<{ border-left-width: 2px; border-right-width: 2px; color: ${props => props.accentColor}; + cursor: pointer; display: grid; font-size: 18px; font-weight: 400; From 6954860bd3669d4d5064af6fc161fb38a11a1bf1 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 18 Jun 2024 16:54:23 -0500 Subject: [PATCH 09/29] make accent color optional --- .../src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx index e745ca6c1..bea1229dd 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx @@ -32,7 +32,7 @@ const SubsettingsContainer = styled.fieldset` `; interface Props { - accentColor: string; + accentColor?: string; fillModeIcons: boolean | undefined; label: string; modeButtons: ModeButtonDefinition[]; From a2f34cc5e0e6bd0aee4d7e2c4bba3b2390c8ca0d Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 19 Jun 2024 13:47:00 -0500 Subject: [PATCH 10/29] fix(trip-form): remove max-width on wide mode buttons --- .../src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 0516c2c7f..0e6d511e7 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -14,7 +14,6 @@ const { blue, grey } = colors; const SettingsContainer = styled.div` width: 100%; - max-width: 500px; `; const StyledModeSettingsButton = styled.div<{ From f97065ed49d38fe4f7890d4734fd79e7475aab9c Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 21 Jun 2024 10:57:02 -0500 Subject: [PATCH 11/29] clean up styling --- .../AdvancedModeSettingsButton.story.tsx | 16 +++++++++------- .../AdvancedModeSettingsButton/index.tsx | 7 ++++--- .../AdvancedModeSubsettingsContainer.tsx | 6 +++++- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx index 7a2b0248a..bd3a8b4c0 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx @@ -81,13 +81,15 @@ const MetroModeSubsettingsComponent = ({ }; return ( - +
+ +
); }; diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 0e6d511e7..95b6d608c 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -27,7 +27,7 @@ const StyledModeSettingsButton = styled.div<{ & > label { align-items: center; background-color: #fff; - border: 1px solid ${props => props.accentColor}; + border: 2px solid ${props => props.accentColor}; border-left-width: 2px; border-right-width: 2px; color: ${props => props.accentColor}; @@ -40,6 +40,7 @@ const StyledModeSettingsButton = styled.div<{ height: 51px; justify-items: center; margin-bottom: 0; + margin-top: -2px; padding: 0 10px; } @@ -114,8 +115,8 @@ const AdvancedModeSettingsButton = ({ {modeButton.modeSettings.length > 0 && ( - - + + Date: Fri, 21 Jun 2024 11:30:39 -0500 Subject: [PATCH 12/29] fix(trip-form): styling fixes --- packages/trip-form/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/trip-form/README.md b/packages/trip-form/README.md index 1ef175f30..454da5818 100644 --- a/packages/trip-form/README.md +++ b/packages/trip-form/README.md @@ -2,4 +2,5 @@ ``` TBD + ``` From 3c4ff0435690358afd459ca255aa165d28140d9d Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 2 Jul 2024 14:48:14 -0500 Subject: [PATCH 13/29] fix(trip-form): update input focus states --- .../AdvancedModeSettingsButton/index.tsx | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 95b6d608c..3e125906f 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -21,9 +21,6 @@ const StyledModeSettingsButton = styled.div<{ fillModeIcons: boolean; subsettings: boolean; }>` - & > input { - ${invisibleCss} - } & > label { align-items: center; background-color: #fff; @@ -43,12 +40,28 @@ const StyledModeSettingsButton = styled.div<{ margin-top: -2px; padding: 0 10px; } + & > input { + ${invisibleCss} + + &:checked + label { + background-color: ${props => props.accentColor}; + color: #fff; + border-bottom-left-radius: ${props => props.subsettings && 0} !important; + border-bottom-right-radius: ${props => props.subsettings && 0} !important; + } + + &:focus-visible + label, + &:focus + label { + outline: ${props => props.accentColor} 1px solid; + outline-offset: -4px; + } + } - & > input:checked + label { - background-color: ${props => props.accentColor}; - color: #fff; - border-bottom-left-radius: ${props => props.subsettings && 0} !important; - border-bottom-right-radius: ${props => props.subsettings && 0} !important; + & > input:checked { + &:focus-visible + label, + &:focus + label { + outline: white 1px solid; + } } span { From bea6c49fb0a506582ab9fa7794b71a2357e9946b 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:36:10 -0500 Subject: [PATCH 14/29] fix(trip-form): add classNames to advanced mode buttons --- .../src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 3e125906f..335034f9e 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -110,6 +110,7 @@ const AdvancedModeSettingsButton = ({ 0} From 7426879ae7d3b707a85aae576970d74207bd7755 Mon Sep 17 00:00:00 2001 From: Josh Willis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:38:34 -0400 Subject: [PATCH 15/29] Remove floating UI (#26) BREAKING CHANGE: removes mode subsettings panel Co-authored-by: Daniel Heppner Co-authored-by: Amy Corson <115499534+amy-corson-ibigroup@users.noreply.github.com> --- __snapshots__/storybook.test.ts.snap | 909 ++++++++---------- packages/base-map/package.json | 4 +- packages/building-blocks/package.json | 4 +- packages/core-utils/package.json | 4 +- packages/endpoints-overlay/package.json | 8 +- packages/from-to-location-picker/package.json | 2 +- packages/icons/package.json | 2 +- packages/itinerary-body/package.json | 4 +- packages/location-field/package.json | 4 +- packages/map-popup/package.json | 4 +- packages/otp2-tile-overlay/package.json | 6 +- packages/park-and-ride-overlay/package.json | 2 +- packages/printable-itinerary/package.json | 2 +- packages/route-viewer-overlay/package.json | 6 +- packages/stop-viewer-overlay/package.json | 6 +- packages/stops-overlay/package.json | 6 +- packages/transit-vehicle-overlay/package.json | 6 +- packages/transitive-overlay/package.json | 8 +- packages/trip-details/package.json | 4 +- packages/trip-form/i18n/en-US.yml | 7 +- packages/trip-form/i18n/fr.yml | 3 +- packages/trip-form/package.json | 8 +- .../trip-form/src/MetroModeSelector/index.tsx | 198 +--- packages/trip-viewer-overlay/package.json | 4 +- packages/vehicle-rental-overlay/package.json | 8 +- packages/zoom-based-markers/package.json | 6 +- yarn.lock | 45 - 27 files changed, 444 insertions(+), 826 deletions(-) diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index ed34d8b5c..980484b23 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -269118,12 +269118,6 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced cursor: pointer; } -.c3 { - display: inline-block; - vertical-align: middle; - overflow: hidden; -} - .c7 { display: grid; grid-column: span 2; @@ -269196,16 +269190,6 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced .c1 { width: 100%; - max-width: 500px; -} - -.c2 > input { - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 0; - overflow: hidden; - position: absolute; - width: 0; } .c2 > label { @@ -269214,18 +269198,32 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced -ms-flex-align: center; align-items: center; background-color: #fff; - border: 1px solid #336B9E; + border: 2px solid #336B9E; border-left-width: 2px; border-right-width: 2px; color: #336B9E; + cursor: pointer; display: grid; + font-size: 18px; + font-weight: 400; gap: 20px; grid-template-columns: 40px auto 40px; height: 51px; justify-items: center; + margin-bottom: 0; + margin-top: -2px; padding: 0 10px; } +.c2 > input { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} + .c2 > input:checked + label { background-color: #336B9E; color: #fff; @@ -269233,6 +269231,17 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced border-bottom-right-radius: 0 !important; } +.c2 > input:focus-visible + label, +.c2 > input:focus + label { + outline: #336B9E 1px solid; + outline-offset: -4px; +} + +.c2 > input:checked:focus-visible + label, +.c2 > input:checked:focus + label { + outline: white 1px solid; +} + .c2 span { justify-self: flex-start; } @@ -269247,33 +269256,38 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced cursor: pointer; } -.c12 > input { - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 0; - overflow: hidden; - position: absolute; - width: 0; -} - .c12 > label { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; - border: 1px solid #336B9E; + border: 2px solid #336B9E; border-left-width: 2px; border-right-width: 2px; color: #336B9E; + cursor: pointer; display: grid; + font-size: 18px; + font-weight: 400; gap: 20px; grid-template-columns: 40px auto 40px; height: 51px; justify-items: center; + margin-bottom: 0; + margin-top: -2px; padding: 0 10px; } +.c12 > input { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} + .c12 > input:checked + label { background-color: #336B9E; color: #fff; @@ -269281,6 +269295,17 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced border-bottom-right-radius: !important; } +.c12 > input:focus-visible + label, +.c12 > input:focus + label { + outline: #336B9E 1px solid; + outline-offset: -4px; +} + +.c12 > input:checked:focus-visible + label, +.c12 > input:checked:focus + label { + outline: white 1px solid; +} + .c12 span { justify-self: flex-start; } @@ -269304,7 +269329,6 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced .c0 { border: none; margin: 0; - width: 90%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -269333,377 +269357,392 @@ exports[`Storyshots Trip Form Components/Advanced Mode Settings Buttons Advanced border-radius: 0 0 8px 8px; } -.c0 div.advanced-submode-container:last-of-type div:last-child { +.c0 div.advanced-submode-container:last-of-type div.subsettings-container { border-radius: 0 0 8px 8px; + border-bottom: 1px solid #B3B3B3; } -
- - Select a transit mode - -
+ + Select a transit mode +
- -
-
+ focusable="false" + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + + + + Transit + + + +
-
- - - Transit - - -
+ + + Transit + +
- - -
-
- -
+
+ Tram +
+ + +
+
- + - -
-
- -
+
+ MARTA Rail +
+ + +
+
- + - -
-
- -
+
+ Subway +
+ + +
+
- + - + +
+ Ferry +
+ + +
- -
-
-
-
-
+ + - -
- - +
- -
- - +
- -
- - +
- - + + `; exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector 1`] = ` @@ -269780,12 +269819,6 @@ exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector `; exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector 2`] = ` -.c2 { - display: inline-block; - vertical-align: middle; - overflow: hidden; -} - .c3 { display: inline-block; -webkit-clip: rect(0,0,0,0); @@ -269925,6 +269958,12 @@ exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector color: #eee; } +.c2 { + display: inline-block; + vertical-align: middle; + overflow: hidden; +} +
@@ -269943,13 +269982,6 @@ exports[`Storyshots Trip Form Components/Metro Mode Selector Metro Mode Selector /> - - - -
`; diff --git a/packages/base-map/package.json b/packages/base-map/package.json index d8819d3a6..51029971a 100644 --- a/packages/base-map/package.json +++ b/packages/base-map/package.json @@ -12,10 +12,10 @@ "mapbox-gl": "npm:empty-npm-package@1.0.0", "maplibre-gl": "^2.1.9", "react-map-gl": "^7.0.15", - "@opentripplanner/map-popup": "^3.1.0" + "@opentripplanner/map-popup": "^3.1.1" }, "peerDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "react": "^16.14.0", "styled-components": "^5.3.0" }, diff --git a/packages/building-blocks/package.json b/packages/building-blocks/package.json index ba6dbb76c..045b14eb6 100644 --- a/packages/building-blocks/package.json +++ b/packages/building-blocks/package.json @@ -9,8 +9,8 @@ "module": "esm/index.js", "private": false, "devDependencies": { - "@opentripplanner/types": "^6.5.0", - "@opentripplanner/core-utils": "^11.4.0" + "@opentripplanner/types": "^6.5.1", + "@opentripplanner/core-utils": "^11.4.2" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/core-utils/package.json b/packages/core-utils/package.json index 0ea1e7375..31749d8a4 100644 --- a/packages/core-utils/package.json +++ b/packages/core-utils/package.json @@ -14,7 +14,7 @@ "dependencies": { "@conveyal/lonlat": "^1.4.1", "@mapbox/polyline": "^1.1.0", - "@opentripplanner/geocoder": "^3.0.0", + "@opentripplanner/geocoder": "^3.0.1", "@styled-icons/foundation": "^10.34.0", "@turf/along": "^6.0.1", "chroma-js": "^2.4.2", @@ -30,7 +30,7 @@ "tsc": "tsc" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "@types/chroma-js": "^2.1.4" } } diff --git a/packages/endpoints-overlay/package.json b/packages/endpoints-overlay/package.json index 0a4b75a03..fe34e4b9c 100644 --- a/packages/endpoints-overlay/package.json +++ b/packages/endpoints-overlay/package.json @@ -19,15 +19,15 @@ "url": "https://github.com/opentripplanner/otp-ui/issues" }, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", + "@opentripplanner/base-map": "^3.2.0", "@opentripplanner/location-icon": "^1.4.1", - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "flat": "^5.0.2", "@styled-icons/fa-solid": "^10.34.0", - "@opentripplanner/map-popup": "^3.1.0" + "@opentripplanner/map-popup": "^3.1.1" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "@types/flat": "^5.0.2" }, "peerDependencies": { diff --git a/packages/from-to-location-picker/package.json b/packages/from-to-location-picker/package.json index 360bec62a..9441e2539 100644 --- a/packages/from-to-location-picker/package.json +++ b/packages/from-to-location-picker/package.json @@ -13,7 +13,7 @@ "flat": "^5.0.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/icons/package.json b/packages/icons/package.json index a5fcc894e..e1bdccc69 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -10,7 +10,7 @@ "license": "MIT", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "prop-types": "^15.7.2" }, "peerDependencies": { diff --git a/packages/itinerary-body/package.json b/packages/itinerary-body/package.json index 2ffe85659..20bef12c6 100644 --- a/packages/itinerary-body/package.json +++ b/packages/itinerary-body/package.json @@ -10,7 +10,7 @@ "license": "MIT", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/humanize-distance": "^1.2.0", "@opentripplanner/icons": "^2.0.10", "@opentripplanner/location-icon": "^1.4.1", @@ -24,7 +24,7 @@ "string-similarity": "^4.0.4" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "@types/flat": "^5.0.2" }, "peerDependencies": { diff --git a/packages/location-field/package.json b/packages/location-field/package.json index 7a91f7d07..5ca2ff1ef 100644 --- a/packages/location-field/package.json +++ b/packages/location-field/package.json @@ -10,8 +10,8 @@ "private": false, "dependencies": { "@conveyal/geocoder-arcgis-geojson": "^0.0.3", - "@opentripplanner/core-utils": "^11.4.0", - "@opentripplanner/geocoder": "^3.0.0", + "@opentripplanner/core-utils": "^11.4.2", + "@opentripplanner/geocoder": "^3.0.1", "@opentripplanner/humanize-distance": "^1.2.0", "@opentripplanner/location-icon": "^1.4.1", "@styled-icons/fa-solid": "^10.34.0", diff --git a/packages/map-popup/package.json b/packages/map-popup/package.json index bd1f12a04..c9938a491 100644 --- a/packages/map-popup/package.json +++ b/packages/map-popup/package.json @@ -11,12 +11,12 @@ "license": "MIT", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/from-to-location-picker": "^2.1.12", "flat": "^5.0.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/otp2-tile-overlay/package.json b/packages/otp2-tile-overlay/package.json index 3ac5faf5e..b24061f1c 100644 --- a/packages/otp2-tile-overlay/package.json +++ b/packages/otp2-tile-overlay/package.json @@ -16,10 +16,10 @@ "react-map-gl": "^7.0.15" }, "dependencies": { - "@opentripplanner/map-popup": "^3.1.0" + "@opentripplanner/map-popup": "^3.1.1" }, "devDependencies": { - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/types": "^6.5.1" } } diff --git a/packages/park-and-ride-overlay/package.json b/packages/park-and-ride-overlay/package.json index 4a95a3e37..c431ee964 100644 --- a/packages/park-and-ride-overlay/package.json +++ b/packages/park-and-ride-overlay/package.json @@ -19,7 +19,7 @@ "url": "https://github.com/opentripplanner/otp-ui/issues" }, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", + "@opentripplanner/base-map": "^3.2.0", "@opentripplanner/from-to-location-picker": "^2.1.12" }, "peerDependencies": { diff --git a/packages/printable-itinerary/package.json b/packages/printable-itinerary/package.json index 1ef8e96e6..27d280df0 100644 --- a/packages/printable-itinerary/package.json +++ b/packages/printable-itinerary/package.json @@ -10,7 +10,7 @@ "license": "MIT", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/itinerary-body": "^5.3.0" }, "devDependencies": { diff --git a/packages/route-viewer-overlay/package.json b/packages/route-viewer-overlay/package.json index 27ee1e920..c61083114 100644 --- a/packages/route-viewer-overlay/package.json +++ b/packages/route-viewer-overlay/package.json @@ -20,12 +20,12 @@ }, "dependencies": { "@mapbox/polyline": "^1.1.0", - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2", "point-in-polygon": "^1.1.0" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "point-in-polygon": "^1.1.0" }, "peerDependencies": { diff --git a/packages/stop-viewer-overlay/package.json b/packages/stop-viewer-overlay/package.json index 111b5e572..183f02b70 100644 --- a/packages/stop-viewer-overlay/package.json +++ b/packages/stop-viewer-overlay/package.json @@ -19,11 +19,11 @@ "url": "https://github.com/opentripplanner/otp-ui/issues" }, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0" + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/stops-overlay/package.json b/packages/stops-overlay/package.json index 66181a216..6ef66ff0b 100644 --- a/packages/stops-overlay/package.json +++ b/packages/stops-overlay/package.json @@ -19,13 +19,13 @@ "url": "https://github.com/opentripplanner/otp-ui/issues" }, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", + "@opentripplanner/base-map": "^3.2.0", "@opentripplanner/from-to-location-picker": "^2.1.12", - "@opentripplanner/map-popup": "^3.1.0", + "@opentripplanner/map-popup": "^3.1.1", "flat": "^5.0.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "styled-icons": "^10.34.0" }, "peerDependencies": { diff --git a/packages/transit-vehicle-overlay/package.json b/packages/transit-vehicle-overlay/package.json index 89a55b24e..1acfd516e 100644 --- a/packages/transit-vehicle-overlay/package.json +++ b/packages/transit-vehicle-overlay/package.json @@ -9,13 +9,13 @@ "module": "esm/index.js", "private": false, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/icons": "^2.0.10", "flat": "^5.0.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/transitive-overlay/package.json b/packages/transitive-overlay/package.json index 481c07455..aa7e4be7a 100644 --- a/packages/transitive-overlay/package.json +++ b/packages/transitive-overlay/package.json @@ -20,8 +20,8 @@ }, "dependencies": { "@mapbox/polyline": "^1.1.1", - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/itinerary-body": "^5.3.0", "@turf/bbox": "^6.5.0", "@turf/bearing": "^6.5.0", @@ -32,8 +32,8 @@ "lodash.isequal": "^4.5.0" }, "devDependencies": { - "@opentripplanner/endpoints-overlay": "^2.0.12", - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/endpoints-overlay": "^2.1.0", + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/trip-details/package.json b/packages/trip-details/package.json index da2c4a6af..87a6d64d4 100644 --- a/packages/trip-details/package.json +++ b/packages/trip-details/package.json @@ -11,13 +11,13 @@ "license": "MIT", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/core-utils": "^11.4.2", "@styled-icons/fa-solid": "^10.34.0", "flat": "^5.0.2", "react-animate-height": "^3.0.4" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0", + "@opentripplanner/types": "^6.5.1", "@types/flat": "^5.0.2" }, "peerDependencies": { diff --git a/packages/trip-form/i18n/en-US.yml b/packages/trip-form/i18n/en-US.yml index 3cf235912..fc542ad3d 100644 --- a/packages/trip-form/i18n/en-US.yml +++ b/packages/trip-form/i18n/en-US.yml @@ -30,10 +30,6 @@ otpUi: walkTolerance-labelHigh: More Walking walkTolerance-labelLow: Less Walking wheelchair-label: Accessible Routing - settingsLabel: "{mode} settings" - TripOptions: - transitOnly: Go by Transit - openApp: Open app SettingsSelectorPanel: bikeOnly: Bike Only escooterOnly: E-scooter Only @@ -42,6 +38,9 @@ otpUi: use: Use useCompanies: Use companies walkOnly: Walk Only + TripOptions: + openApp: Open app + transitOnly: Go by Transit queryParameters: bikeSpeed: Bicycle Speed distanceInMiles: | diff --git a/packages/trip-form/i18n/fr.yml b/packages/trip-form/i18n/fr.yml index 2fcf44212..0482f8e26 100644 --- a/packages/trip-form/i18n/fr.yml +++ b/packages/trip-form/i18n/fr.yml @@ -30,7 +30,6 @@ otpUi: walkTolerance-labelHigh: Plus de marche walkTolerance-labelLow: Moins de marche wheelchair-label: Accès avec mobilité réduite - settingsLabel: "Paramètres pour : {mode}" SettingsSelectorPanel: bikeOnly: Vélo uniquement escooterOnly: Trottinette uniquement @@ -40,8 +39,8 @@ otpUi: useCompanies: Prestataires walkOnly: À pied uniquement TripOptions: - transitOnly: En transports publics openApp: Ouvrir l'application + transitOnly: En transports publics queryParameters: bikeSpeed: Vitesse à vélo distanceInMiles: "{miles, number, :: unit/mile unit-width-full-name}" diff --git a/packages/trip-form/package.json b/packages/trip-form/package.json index 249419fbd..e1d36b6ac 100644 --- a/packages/trip-form/package.json +++ b/packages/trip-form/package.json @@ -10,8 +10,7 @@ "types": "lib/index.d.ts", "private": false, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", - "@floating-ui/react": "^0.19.2", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/building-blocks": "^1.0.3", "@styled-icons/bootstrap": "^10.34.0", "@styled-icons/boxicons-regular": "^10.38.0", @@ -24,8 +23,9 @@ "react-inlinesvg": "^2.3.0" }, "devDependencies": { - "@opentripplanner/types": "6.5.0", - "@types/flat": "^5.0.2" + "@types/flat": "^5.0.2", + "@opentripplanner/types": "6.5.1" + }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/trip-form/src/MetroModeSelector/index.tsx b/packages/trip-form/src/MetroModeSelector/index.tsx index b21fc14f8..58fefaab9 100644 --- a/packages/trip-form/src/MetroModeSelector/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/index.tsx @@ -1,24 +1,8 @@ -import { - arrow, - FloatingFocusManager, - offset, - safePolygon, - shift, - useClick, - useDismiss, - useFloating, - useHover, - useInteractions, - useRole -} from "@floating-ui/react"; import { ModeButtonDefinition } from "@opentripplanner/types"; -import { CaretDown } from "@styled-icons/fa-solid/CaretDown"; -import { CaretUp } from "@styled-icons/fa-solid/CaretUp"; -import React, { ReactElement, useCallback, useRef, useState } from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import React, { ReactElement, useCallback } from "react"; +import { useIntl } from "react-intl"; import styled, { css } from "styled-components"; -import SubSettingsPane, { defaultMessages } from "./SubSettingsPane"; import generateModeButtonLabel from "./i18n"; export const invisibleCss = css` @@ -151,34 +135,6 @@ const ModeButtonWrapper = styled.span<{ } `; -const HoverPanel = styled.div` - min-width: 300px; - padding: 0 10px; - width: 75%; - z-index: 100; -`; - -const HoverInnerContainer = styled.div` - background: #fff; - border-radius: 4px; - color: #2e2e2e; - font-size: 90%; - font-weight: bold; - padding: 0px 20px 10px; - pointer-events: none; - ${boxShadowCss} -`; - -const Arrow = styled.div` - background: #fff; - height: 10px; - margin-top: -5px; - position: absolute; - transform: rotate(-45deg); - width: 10px; - ${boxShadowCss} -`; - interface ModeButtonProps { // Optional properties for styling accentColor?: string; @@ -186,10 +142,7 @@ interface ModeButtonProps { fillModeIcons?: boolean; id: string; - itemWithKeyboard?: string; modeButton: ModeButtonDefinition; - onPopupClose: () => void; - onPopupKeyboardExpand: (id: string) => void; onSettingsUpdate: (QueryParamChangeEvent) => void; onToggle: () => void; } @@ -199,85 +152,13 @@ function ModeButton({ activeHoverColor, fillModeIcons, id, - itemWithKeyboard, modeButton, - onPopupClose, - onPopupKeyboardExpand, - onSettingsUpdate, onToggle }: ModeButtonProps) { const intl = useIntl(); - const [open, setOpen] = useState(false); - const [hoverEnabled, setHoverEnabled] = useState(true); - const arrowRef = useRef(null); - const onOpenChange = useCallback( - value => { - setOpen(value); - if (!value && typeof onPopupClose === "function") { - onPopupClose(); - } - }, - [onPopupClose, setOpen] - ); - const { - context, - floating, - middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, - reference, - strategy, - x, - y - } = useFloating({ - middleware: [offset(8), shift(), arrow({ element: arrowRef })], - onOpenChange, - open - }); - - const { getFloatingProps, getReferenceProps } = useInteractions([ - useHover(context, { - // Enable hover only if no popup has been triggered via keyboard. - // (This is to avoid focus being stolen by hovering out of another button.) - enabled: itemWithKeyboard === null && hoverEnabled, - handleClose: safePolygon({ - blockPointerEvents: false, - restMs: 500, - buffer: 0 - }) - }), - useClick(context), - useRole(context), - useDismiss(context) - ]); - - const renderDropdown = - open && modeButton.enabled && modeButton.modeSettings?.length > 0; - const interactionProps = getReferenceProps(); - - // ARIA roles are added by the `useRole` hook. - // Remove the aria-controls, aria-expanded, and aria-haspopup props from the label, they will - // instead be passed to the button for keyboard/screen reader users to trigger the popup. - const { - "aria-controls": ariaControls, - "aria-expanded": ariaExpanded, - "aria-haspopup": ariaHasPopup, - ...labelInteractionProps - } = interactionProps; - const checkboxId = `metro-mode-selector-mode-${id}`; - const handleButtonClick = useCallback( - e => { - if (typeof onPopupKeyboardExpand === "function") { - onPopupKeyboardExpand(id); - } - if (typeof interactionProps.onClick === "function") { - interactionProps.onClick(e); - } - }, - [id, interactionProps, onPopupKeyboardExpand] - ); - const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); return ( @@ -299,79 +180,13 @@ function ModeButton({ - - {renderDropdown && ( - - { - setHoverEnabled(false); - setTimeout(() => setHoverEnabled(true), 100); - }} - ref={floating} - style={{ - left: x ?? 0, - position: strategy, - top: y ?? 0 - }} - > - - - - - - - )} ); } @@ -417,10 +232,6 @@ export default function ModeSelector({ onSettingsUpdate, onToggleModeButton }: Props): ReactElement { - // State that holds the id of the active mode combination popup that was triggered via keyboard. - // It is used to enable/disable hover effects to avoid keyboard focus being stolen - // and overlapping popups on mouse hover. - const [itemWithKeyboard, setItemWithKeyboard] = useState(null); return ( {label} @@ -430,13 +241,8 @@ export default function ModeSelector({ activeHoverColor={activeHoverColor} fillModeIcons={fillModeIcons} id={button.key} - itemWithKeyboard={itemWithKeyboard} key={button.label} modeButton={button} - onPopupClose={useCallback(() => { - setItemWithKeyboard(null); - }, [setItemWithKeyboard])} - onPopupKeyboardExpand={setItemWithKeyboard} onSettingsUpdate={onSettingsUpdate} onToggle={useCallback(() => { onToggleModeButton(button.key, !button.enabled); diff --git a/packages/trip-viewer-overlay/package.json b/packages/trip-viewer-overlay/package.json index ef0187c4d..fcbfa78fc 100644 --- a/packages/trip-viewer-overlay/package.json +++ b/packages/trip-viewer-overlay/package.json @@ -20,8 +20,8 @@ }, "dependencies": { "@mapbox/polyline": "^1.1.0", - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0" + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/vehicle-rental-overlay/package.json b/packages/vehicle-rental-overlay/package.json index 497edb42c..fec01d9a6 100644 --- a/packages/vehicle-rental-overlay/package.json +++ b/packages/vehicle-rental-overlay/package.json @@ -19,16 +19,16 @@ "url": "git+https://github.com/opentripplanner/otp-ui.git" }, "dependencies": { - "@opentripplanner/base-map": "^3.1.0", - "@opentripplanner/core-utils": "^11.4.0", + "@opentripplanner/base-map": "^3.2.0", + "@opentripplanner/core-utils": "^11.4.2", "@opentripplanner/from-to-location-picker": "^2.1.12", - "@opentripplanner/map-popup": "^3.1.0", + "@opentripplanner/map-popup": "^3.1.1", "@styled-icons/fa-solid": "^10.34.0", "flat": "^5.0.2", "lodash.memoize": "^4.1.2" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/packages/zoom-based-markers/package.json b/packages/zoom-based-markers/package.json index 501442d70..8a91239bf 100644 --- a/packages/zoom-based-markers/package.json +++ b/packages/zoom-based-markers/package.json @@ -19,11 +19,11 @@ "url": "https://github.com/opentripplanner/otp-ui/issues" }, "dependencies": { - "@opentripplanner/core-utils": "^11.4.0", - "@opentripplanner/base-map": "^3.1.0" + "@opentripplanner/core-utils": "^11.4.2", + "@opentripplanner/base-map": "^3.2.0" }, "devDependencies": { - "@opentripplanner/types": "^6.5.0" + "@opentripplanner/types": "^6.5.1" }, "peerDependencies": { "react": "^16.14.0", diff --git a/yarn.lock b/yarn.lock index dbe0c1bd6..d88d923bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,34 +1474,6 @@ unique-filename "^1.1.1" which "^1.3.1" -"@floating-ui/core@^1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.2.tgz#66f62cf1b7de2ed23a09c101808536e68caffaec" - integrity sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA== - -"@floating-ui/dom@^1.2.1": - version "1.2.3" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.3.tgz#8dc6fbf799fbb5c29f705b54bdd51f3ab0ee03a2" - integrity sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA== - dependencies: - "@floating-ui/core" "^1.2.2" - -"@floating-ui/react-dom@^1.3.0": - version "1.3.0" - resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3" - integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g== - dependencies: - "@floating-ui/dom" "^1.2.1" - -"@floating-ui/react@^0.19.2": - version "0.19.2" - resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412" - integrity sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w== - dependencies: - "@floating-ui/react-dom" "^1.3.0" - aria-hidden "^1.1.3" - tabbable "^6.0.1" - "@formatjs/cli@^4.2.32", "@formatjs/cli@^4.2.33": version "4.8.4" resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-4.8.4.tgz#c4f4e589b8c77c950b659948dbf0e877a4d910fd" @@ -3246,11 +3218,6 @@ resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca" integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q== -"@opentripplanner/types@6.5.0": - version "6.5.0" - resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.0.tgz#d8cca355bf30f0984283faa793113ad6c0dba38d" - integrity sha512-FllEyE+1WQ2GOSKXQOuzrk+OPcJEqr4+zacsHQLB9WVyfm5D/BPHR1/OjfuVngrwLTK5bKP8VlDRS1ba/R8rtg== - "@peculiar/asn1-schema@^2.1.6", "@peculiar/asn1-schema@^2.3.0": version "2.3.3" resolved "https://registry.yarnpkg.com/@peculiar/asn1-schema/-/asn1-schema-2.3.3.tgz#21418e1f3819e0b353ceff0c2dad8ccb61acd777" @@ -5959,13 +5926,6 @@ argv-formatter@~1.0.0: resolved "https://registry.yarnpkg.com/argv-formatter/-/argv-formatter-1.0.0.tgz#a0ca0cbc29a5b73e836eebe1cbf6c5e0e4eb82f9" integrity sha1-oMoMvCmltz6Dbuvhy/bF4OTrgvk= -aria-hidden@^1.1.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954" - integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ== - dependencies: - tslib "^2.0.0" - aria-query@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc" @@ -18002,11 +17962,6 @@ synchronous-promise@^2.0.15, synchronous-promise@^2.0.6: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e" integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg== -tabbable@^6.0.1: - version "6.1.1" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0" - integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== - table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" From b73aabab901c62da77d57a1f349692db18f2d784 Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Mon, 9 Sep 2024 13:50:30 -0700 Subject: [PATCH 16/29] feat(trip-form): add callback for disabling all submodes --- .../AdvancedModeSettingsButton/index.tsx | 3 ++ .../AdvancedModeSubsettingsContainer.tsx | 3 ++ .../src/MetroModeSelector/SubSettingsPane.tsx | 39 ++++++++++++++++--- 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx index 335034f9e..e8731aec3 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton/index.tsx @@ -91,6 +91,7 @@ interface Props { fillModeIcons: boolean; id: string; modeButton: ModeButtonDefinition; + onAllSubmodesDisabled?: (modeButton: ModeButtonDefinition) => void; onSettingsUpdate: (event: QueryParamChangeEvent) => void; onToggle: () => void; } @@ -101,6 +102,7 @@ const AdvancedModeSettingsButton = ({ id, modeButton, onSettingsUpdate, + onAllSubmodesDisabled, onToggle }: Props): JSX.Element => { const intl = useIntl(); @@ -134,6 +136,7 @@ const AdvancedModeSettingsButton = ({ diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx index e8c092b42..515bf2813 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSubsettingsContainer.tsx @@ -40,6 +40,7 @@ interface Props { fillModeIcons: boolean | undefined; label: string; modeButtons: ModeButtonDefinition[]; + onAllSubmodesDisabled?: (modeButton: ModeButtonDefinition) => void; onSettingsUpdate: (event: QueryParamChangeEvent) => void; onToggleModeButton: (key: string, newState: boolean) => void; } @@ -49,6 +50,7 @@ const AdvancedModeSubsettingsContainer = ({ fillModeIcons, modeButtons, label, + onAllSubmodesDisabled, onSettingsUpdate, onToggleModeButton }: Props): JSX.Element => { @@ -63,6 +65,7 @@ const AdvancedModeSubsettingsContainer = ({ key={button.label} modeButton={button} onSettingsUpdate={onSettingsUpdate} + onAllSubmodesDisabled={onAllSubmodesDisabled} onToggle={useCallback(() => { onToggleModeButton(button.key, !button.enabled); }, [button, onToggleModeButton])} diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index 759ae63c8..b4d9228cd 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -1,6 +1,11 @@ import { flatten } from "flat"; -import { ModeButtonDefinition, ModeSetting } from "@opentripplanner/types"; -import React, { ReactElement } from "react"; +import { + ModeButtonDefinition, + ModeSetting, + ModeSettingBase, + TransitSubmodeCheckboxOption +} from "@opentripplanner/types"; +import React, { ReactElement, useCallback } from "react"; import { useIntl } from "react-intl"; import styled from "styled-components"; @@ -10,6 +15,7 @@ import SliderSelector from "../SliderSelector"; import generateModeButtonLabel, { generateModeSettingLabels } from "./i18n"; import defaultEnglishMessages from "../../i18n/en-US.yml"; +import { QueryParamChangeEvent } from "../types"; // HACK: We should flatten the messages loaded above because // the YAML loaders behave differently between webpack and our version of jest: // - the yaml loader for webpack returns a nested object, @@ -153,10 +159,12 @@ export const ModeSettingRenderer = ({ interface Props { modeButton: ModeButtonDefinition; onSettingUpdate: (QueryParamChangeEvent) => void; + onAllSubmodesDisabled?: (modeButton: ModeButtonDefinition) => void; } export default function SubSettingsPane({ modeButton, - onSettingUpdate + onSettingUpdate, + onAllSubmodesDisabled }: Props): ReactElement { const intl = useIntl(); const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); @@ -166,7 +174,10 @@ export default function SubSettingsPane({ const { settingsNoSubmodes, settingsOnlySubmodes - } = modeButton.modeSettings.reduce( + } = modeButton.modeSettings.reduce<{ + settingsNoSubmodes: ModeSetting[]; + settingsOnlySubmodes: (TransitSubmodeCheckboxOption & ModeSettingBase)[]; + }>( (accumulator, cur) => { if (cur.type === "SUBMODE") { accumulator.settingsOnlySubmodes.push(cur); @@ -178,6 +189,22 @@ export default function SubSettingsPane({ { settingsNoSubmodes: [], settingsOnlySubmodes: [] } ); + const handleSettingChange = useCallback( + (setting: ModeSetting) => (evt: QueryParamChangeEvent) => { + if (setting.type === "SUBMODE") { + if ( + settingsOnlySubmodes.every( + s => Object.keys(evt).includes(s.key) || s.value === false + ) + ) { + onAllSubmodesDisabled && onAllSubmodesDisabled(modeButton); + } + } + onSettingUpdate(evt); + }, + [onSettingUpdate] + ); + return ( @@ -189,7 +216,7 @@ export default function SubSettingsPane({ {settingsOnlySubmodes.map(setting => ( ))} @@ -197,7 +224,7 @@ export default function SubSettingsPane({ {settingsNoSubmodes.map(setting => ( ))} From b800d707435966c73fe71aedf2d761bc830dd695 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Mon, 9 Sep 2024 22:06:13 -0500 Subject: [PATCH 17/29] fix(subsetting-pane): check if subsetting adds a transport mode --- packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index b4d9228cd..becc09ce6 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -191,7 +191,10 @@ export default function SubSettingsPane({ const handleSettingChange = useCallback( (setting: ModeSetting) => (evt: QueryParamChangeEvent) => { - if (setting.type === "SUBMODE") { + if ( + (setting.type === "CHECKBOX" || setting.type === "SUBMODE") && + setting.addTransportMode + ) { if ( settingsOnlySubmodes.every( s => Object.keys(evt).includes(s.key) || s.value === false From 7f4c816c0edb2dcca8718f5fab9d1e1a6451e325 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 10 Sep 2024 15:49:27 -0500 Subject: [PATCH 18/29] fix(subsettings-pane): handle change when all settings that add a transport mode are false --- .../src/MetroModeSelector/SubSettingsPane.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index becc09ce6..a71e39fe9 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -191,18 +191,26 @@ export default function SubSettingsPane({ const handleSettingChange = useCallback( (setting: ModeSetting) => (evt: QueryParamChangeEvent) => { - if ( - (setting.type === "CHECKBOX" || setting.type === "SUBMODE") && - setting.addTransportMode - ) { + // rental mode settings do not have type "SUBMODE" + const settingsWithTransportMode = modeButton.modeSettings.filter( + (s: ModeSetting) => + (s.type === "CHECKBOX" || s.type === "SUBMODE") && s.addTransportMode + ); + // check if setting is a transport mode setting + if (settingsWithTransportMode.find(s => s.key === setting.key)) { + // check if all submodes are disabled if ( - settingsOnlySubmodes.every( + settingsWithTransportMode.every( s => Object.keys(evt).includes(s.key) || s.value === false ) ) { + settingsWithTransportMode.forEach(s => { + evt[s.key] = Object.keys(evt).includes(s.key) || !s.value; + }); onAllSubmodesDisabled && onAllSubmodesDisabled(modeButton); } } + onSettingUpdate(evt); }, [onSettingUpdate] From 6da3d7fb160c2748898f6373ca2493f5c23b587e Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:37:32 -0500 Subject: [PATCH 19/29] fix react version --- package.json | 2 +- yarn.lock | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 07a7bd333..c1c46ac0b 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "packages/*" ], "resolutions": { - "react": "17.0.2", + "react": "18.2.0", "react-animate-height": "3.0.4" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 8a45bb9d6..fa9be1f13 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21172,6 +21172,11 @@ synchronous-promise@^2.0.15, synchronous-promise@^2.0.6: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e" integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg== +tabbable@^6.0.1: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" From acd40eca9ad29943ce8fd6ce515e05002ad32f48 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Fri, 13 Sep 2024 12:36:07 -0500 Subject: [PATCH 20/29] fix(subsettings-pane): only reset submodes if onAllSubmodesDisabled prop is present --- packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index a71e39fe9..fbc0ad4c0 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -202,12 +202,13 @@ export default function SubSettingsPane({ if ( settingsWithTransportMode.every( s => Object.keys(evt).includes(s.key) || s.value === false - ) + ) && + onAllSubmodesDisabled ) { settingsWithTransportMode.forEach(s => { evt[s.key] = Object.keys(evt).includes(s.key) || !s.value; }); - onAllSubmodesDisabled && onAllSubmodesDisabled(modeButton); + onAllSubmodesDisabled(modeButton); } } From 89e8c48302b36dfd7f473e85c0fd3ca9bf25d059 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:11:01 -0500 Subject: [PATCH 21/29] fix(i18n): remove unused string --- packages/trip-form/i18n/en-US.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/trip-form/i18n/en-US.yml b/packages/trip-form/i18n/en-US.yml index 524577bff..fc542ad3d 100644 --- a/packages/trip-form/i18n/en-US.yml +++ b/packages/trip-form/i18n/en-US.yml @@ -30,7 +30,6 @@ otpUi: walkTolerance-labelHigh: More Walking walkTolerance-labelLow: Less Walking wheelchair-label: Accessible Routing - settingsLabel: "{mode} settings" SettingsSelectorPanel: bikeOnly: Bike Only escooterOnly: E-scooter Only From 10ac8a69d7cd0805e923294dc20fc7cadb52500b Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:30:10 -0500 Subject: [PATCH 22/29] chore: update yarn.lock --- yarn.lock | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index fa9be1f13..e38831978 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19106,7 +19106,7 @@ react-test-renderer@^16.14.0: react-shallow-renderer "^16.15.0" scheduler "^0.23.0" -react@^18.2.0: +react@18.2.0, react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -20717,8 +20717,7 @@ string-similarity@^4.0.4: resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b" integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - name string-width-cjs +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -20736,6 +20735,15 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -20816,8 +20824,7 @@ stringify-package@^1.0.1: resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85" integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg== -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: - name strip-ansi-cjs +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -20845,6 +20852,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -22620,8 +22634,7 @@ worker-farm@^1.7.0: dependencies: errno "~0.1.7" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: - name wrap-ansi-cjs +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -22656,6 +22669,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From e4dd82800b086c53de68b1a3ccfd0b2009852cdd Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:54:32 -0500 Subject: [PATCH 23/29] chore(storybook): remove unneeded story file --- .../MetroModeSelector/AdvancedModeSettingsButton.story.tsx | 2 +- .../src/MetroModeSelector/MetroModeSelector.story.tsx | 2 +- .../{mockButtons.story.tsx => mockButtons.tsx} | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) rename packages/trip-form/src/MetroModeSelector/{mockButtons.story.tsx => mockButtons.tsx} (90%) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx index bd3a8b4c0..e47fb210e 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx @@ -12,7 +12,7 @@ import { defaultModeButtonDefinitions, getIcon, modeSettingDefinitionsWithDropdown -} from "./mockButtons.story"; +} from "./mockButtons"; const initialState = { enabledModeButtons: ["transit"], diff --git a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx index d4003bd10..45a7f9802 100644 --- a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx @@ -12,7 +12,7 @@ import { modeSettingDefinitionsWithDropdown, getIcon, defaultModeButtonDefinitions -} from "./mockButtons.story"; +} from "./mockButtons"; const initialState = { enabledModeButtons: ["transit"], diff --git a/packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx b/packages/trip-form/src/MetroModeSelector/mockButtons.tsx similarity index 90% rename from packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx rename to packages/trip-form/src/MetroModeSelector/mockButtons.tsx index 2e146b6b3..67b7d6a83 100644 --- a/packages/trip-form/src/MetroModeSelector/mockButtons.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/mockButtons.tsx @@ -7,10 +7,12 @@ import { TrainTram } from "@styled-icons/fa-solid"; +import { ModeButtonDefinition, ModeSetting } from "@opentripplanner/types"; + import { ClassicBike } from "@opentripplanner/icons/src/classic"; import React from "react"; -export const defaultModeButtonDefinitions = [ +export const defaultModeButtonDefinitions: ModeButtonDefinition[] = [ { Icon: Bus, iconName: "bus", @@ -41,9 +43,8 @@ export const defaultModeButtonDefinitions = [ modes: [{ mode: "CAR" }] } ]; - // TODO: add more test settings? -export const modeSettingDefinitionsWithDropdown = [ +export const modeSettingDefinitionsWithDropdown: ModeSetting[] = [ { applicableMode: "TRANSIT", default: "blue", From 1b1e94d9abda546db273a8b191158453795be56e Mon Sep 17 00:00:00 2001 From: Daniel Heppner Date: Mon, 16 Sep 2024 15:28:41 -0700 Subject: [PATCH 24/29] update snapshots --- .../AdvancedModeSettingsButton.story.tsx.snap | 267 ++++++++++++++++++ .../MetroModeSelector.story.tsx.snap | 99 ------- 2 files changed, 267 insertions(+), 99 deletions(-) create mode 100644 packages/trip-form/src/MetroModeSelector/__snapshots__/AdvancedModeSettingsButton.story.tsx.snap diff --git a/packages/trip-form/src/MetroModeSelector/__snapshots__/AdvancedModeSettingsButton.story.tsx.snap b/packages/trip-form/src/MetroModeSelector/__snapshots__/AdvancedModeSettingsButton.story.tsx.snap new file mode 100644 index 000000000..186d7cb14 --- /dev/null +++ b/packages/trip-form/src/MetroModeSelector/__snapshots__/AdvancedModeSettingsButton.story.tsx.snap @@ -0,0 +1,267 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Trip Form Components/Advanced Mode Settings Buttons AdvancedModeSettingsButtons smoke-test 1`] = ` +
+
+ + Select a transit mode + +
+
+ + +
+
+
+
+
+ + + Transit + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+`; diff --git a/packages/trip-form/src/MetroModeSelector/__snapshots__/MetroModeSelector.story.tsx.snap b/packages/trip-form/src/MetroModeSelector/__snapshots__/MetroModeSelector.story.tsx.snap index bbc305de0..2038f2a0a 100644 --- a/packages/trip-form/src/MetroModeSelector/__snapshots__/MetroModeSelector.story.tsx.snap +++ b/packages/trip-form/src/MetroModeSelector/__snapshots__/MetroModeSelector.story.tsx.snap @@ -32,30 +32,6 @@ exports[`Trip Form Components/Metro Mode Selector MetroModeSelector smoke-test 1 Transit - - - - `; From 46ee93f16767e19b57159f59d05458ce2f033f50 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:43:20 -0500 Subject: [PATCH 25/29] fix(subsettings-pane): sort props --- .../trip-form/src/MetroModeSelector/SubSettingsPane.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index fbc0ad4c0..fb8d17d9f 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -158,13 +158,13 @@ export const ModeSettingRenderer = ({ interface Props { modeButton: ModeButtonDefinition; - onSettingUpdate: (QueryParamChangeEvent) => void; onAllSubmodesDisabled?: (modeButton: ModeButtonDefinition) => void; + onSettingUpdate: (QueryParamChangeEvent) => void; } export default function SubSettingsPane({ modeButton, - onSettingUpdate, - onAllSubmodesDisabled + onAllSubmodesDisabled, + onSettingUpdate }: Props): ReactElement { const intl = useIntl(); const label = generateModeButtonLabel(modeButton.key, intl, modeButton.label); From 5ba1bb3a69a5c4c3806d5cfa1571d78ba1935e63 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:46:03 -0500 Subject: [PATCH 26/29] fix(subsettings-pane): move const outside of callback --- .../src/MetroModeSelector/SubSettingsPane.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx index fb8d17d9f..43c79e904 100644 --- a/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx +++ b/packages/trip-form/src/MetroModeSelector/SubSettingsPane.tsx @@ -189,13 +189,14 @@ export default function SubSettingsPane({ { settingsNoSubmodes: [], settingsOnlySubmodes: [] } ); + // rental mode settings do not have type "SUBMODE" + const settingsWithTransportMode = modeButton.modeSettings.filter( + (s: ModeSetting) => + (s.type === "CHECKBOX" || s.type === "SUBMODE") && s.addTransportMode + ); + const handleSettingChange = useCallback( (setting: ModeSetting) => (evt: QueryParamChangeEvent) => { - // rental mode settings do not have type "SUBMODE" - const settingsWithTransportMode = modeButton.modeSettings.filter( - (s: ModeSetting) => - (s.type === "CHECKBOX" || s.type === "SUBMODE") && s.addTransportMode - ); // check if setting is a transport mode setting if (settingsWithTransportMode.find(s => s.key === setting.key)) { // check if all submodes are disabled From d5680c6643802e91879283589b757e3acd9295af Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:28:57 -0500 Subject: [PATCH 27/29] fix(AMSB-story): add support for onAllSubmodesDisabled prop --- .../AdvancedModeSettingsButton.story.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx index e47fb210e..b830904b8 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx @@ -26,11 +26,13 @@ function pipe(...fns: Array<(arg: T) => T>) { const MetroModeSubsettingsComponent = ({ fillModeIcons, modeButtonDefinitions, + onAllSubmodesDisabled, onSetModeSettingValue, onToggleModeButton }: { fillModeIcons?: boolean; modeButtonDefinitions: Array; + onAllSubmodesDisabled?: (modeButton: ModeButtonDefinition) => void; onSetModeSettingValue: (event: QueryParamChangeEvent) => void; onToggleModeButton: (key: string, newState: boolean) => void; }): ReactElement => { @@ -74,6 +76,12 @@ const MetroModeSubsettingsComponent = ({ onToggleModeButton(key, newState); }; + const onAllSubmodesDisabledAction = (modeButton: ModeButtonDefinition) => { + toggleModeButtonAction(modeButton.key, false); + // Storybook Action: + onAllSubmodesDisabled?.(modeButton); + }; + const setModeSettingValueAction = (event: QueryParamChangeEvent) => { setModeSettingValues({ ...modeSettingValues, ...event }); // Storybook Action: @@ -86,6 +94,7 @@ const MetroModeSubsettingsComponent = ({ fillModeIcons={fillModeIcons} label="Select a transit mode" modeButtons={processedModeButtons} + onAllSubmodesDisabled={onAllSubmodesDisabledAction} onSettingsUpdate={setModeSettingValueAction} onToggleModeButton={toggleModeButtonAction} /> @@ -111,7 +120,8 @@ export default { argTypes: { fillModeIcons: { control: "boolean" }, onSetModeSettingValue: { action: "set mode setting value" }, - onToggleModeButton: { action: "toggle button" } + onToggleModeButton: { action: "toggle button" }, + onAllSubmodesDisabled: { action: "all submodes disabled" } }, component: MetroModeSubsettingsComponent, title: "Trip Form Components/Advanced Mode Settings Buttons" From f35cdb2584742f2281d9c593c0f85d3c8210ce20 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 24 Sep 2024 14:04:13 -0500 Subject: [PATCH 28/29] chore: rename mock mode button file and move to mocks folder --- .../src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx | 2 +- .../mockButtons.tsx => __mocks__/mode-selector-buttons.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/trip-form/src/{MetroModeSelector/mockButtons.tsx => __mocks__/mode-selector-buttons.tsx} (100%) diff --git a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx index b830904b8..90c240d2d 100644 --- a/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/AdvancedModeSettingsButton.story.tsx @@ -12,7 +12,7 @@ import { defaultModeButtonDefinitions, getIcon, modeSettingDefinitionsWithDropdown -} from "./mockButtons"; +} from "../__mocks__/mode-selector-buttons"; const initialState = { enabledModeButtons: ["transit"], diff --git a/packages/trip-form/src/MetroModeSelector/mockButtons.tsx b/packages/trip-form/src/__mocks__/mode-selector-buttons.tsx similarity index 100% rename from packages/trip-form/src/MetroModeSelector/mockButtons.tsx rename to packages/trip-form/src/__mocks__/mode-selector-buttons.tsx From f147b684d7d7dd7db247c02e9e3d1b4272ec3983 Mon Sep 17 00:00:00 2001 From: josh-willis-arcadis <168561922+josh-willis-arcadis@users.noreply.github.com> Date: Tue, 24 Sep 2024 14:09:48 -0500 Subject: [PATCH 29/29] use correct import --- .../trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx index 45a7f9802..ea29c898e 100644 --- a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx +++ b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx @@ -12,7 +12,7 @@ import { modeSettingDefinitionsWithDropdown, getIcon, defaultModeButtonDefinitions -} from "./mockButtons"; +} from "../__mocks__/mode-selector-buttons"; const initialState = { enabledModeButtons: ["transit"],