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 1/3] 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 2/3] 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 3/3] 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 (