From 75fc672e7db2e6dbf3693adc273a49afe9c4a766 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:46:13 -0600 Subject: [PATCH 1/4] Update d/t selector styling and types --- packages/trip-form/src/styled.ts | 44 +++++++++++++++++--------------- packages/trip-form/src/types.ts | 7 +++-- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/packages/trip-form/src/styled.ts b/packages/trip-form/src/styled.ts index 889b838a2..24364e132 100755 --- a/packages/trip-form/src/styled.ts +++ b/packages/trip-form/src/styled.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import colors from "@opentripplanner/building-blocks" // eslint-disable-next-line prettier/prettier import type { @@ -8,6 +9,12 @@ import type { SubmodeSelectorAndSubComponents } from "./types"; +const { blue } = colors; + +export const baseColor = () => getComputedStyle(document.documentElement).getPropertyValue( + "--main-base-color" +) + export const SettingsHeader = styled.div``; export const SettingsSection = styled.div``; @@ -21,29 +28,26 @@ export const FloatingSettingLabel = styled(SettingLabel)` float: left; `; -export const DateTimeSelector: DateTimeSelectorAndSubComponents = styled.div``; - -DateTimeSelector.DepartureRow = styled.div` - box-sizing: border-box; - > * { - box-sizing: border-box; - width: 33.333333%; - padding: 0px 5px; - } +export const DateTimeSelector: DateTimeSelectorAndSubComponents = styled.div<{ baseColor: string | undefined }>` +border: 2px solid ${(props) => props.baseColor || blue[900]}; +border-radius: 5px; +height: 45px; `; DateTimeSelector.DateTimeRow = styled.div` - box-sizing: border-box; - > * { - box-sizing: border-box; - width: 50%; - padding: 0px 5px; - display: inline-block; - } - input { - box-sizing: border-box; - width: 100%; - } +display: flex; +justify-content: space-around; +align-items: center; +height: 100%; +padding: 0 0%; +background-color: white; +border-radius: 0 3px 3px 0; + +input { + border: 0px; + height: 100%; + width: 100%; +} `; export const ModeSelector: ModeSelectorAndSubComponents = styled.div``; diff --git a/packages/trip-form/src/types.ts b/packages/trip-form/src/types.ts index 7049f14c8..3ebad8fa0 100644 --- a/packages/trip-form/src/types.ts +++ b/packages/trip-form/src/types.ts @@ -107,11 +107,14 @@ export interface ModeSelectorOptionSet { tertiary?: ModeSelectorOption[]; } -type SimpleStyledDiv = StyledComponent<"div", any>; +type SimpleStyledDiv = StyledComponent< + "div", + any, + { baseColor?: string | undefined } +>; export type DateTimeSelectorAndSubComponents = SimpleStyledDiv & { DateTimeRow?: SimpleStyledDiv; - DepartureRow?: SimpleStyledDiv; }; export type ModeSelectorAndSubComponents = SimpleStyledDiv & { From ea03d07c18fa6cd78c62904369c4ba31d44733eb Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:47:07 -0600 Subject: [PATCH 2/4] Fix d/t selector story styling --- packages/trip-form/src/__mocks__/trimet-styled.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/trip-form/src/__mocks__/trimet-styled.tsx b/packages/trip-form/src/__mocks__/trimet-styled.tsx index 9ee19fdb3..c4fff422e 100644 --- a/packages/trip-form/src/__mocks__/trimet-styled.tsx +++ b/packages/trip-form/src/__mocks__/trimet-styled.tsx @@ -58,10 +58,11 @@ const TriMetStyled = styled.div` text-decoration: underline; } } + ${TripFormClasses.DateTimeSelector} { + max-width: 550px; + } ${TripFormClasses.DateTimeSelector.DateTimeRow} { - margin: 15px 0px; input { - padding: 6px 12px; text-align: center; font-size: inherit; font-family: inherit; From d2855f547afc89336e4f1015f898b4cbc18be9b1 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:48:31 -0600 Subject: [PATCH 3/4] Force "depart" on time change, remove unneeded containers and styling --- .../trip-form/src/DateTimeSelector/index.tsx | 97 ++++++++----------- 1 file changed, 38 insertions(+), 59 deletions(-) diff --git a/packages/trip-form/src/DateTimeSelector/index.tsx b/packages/trip-form/src/DateTimeSelector/index.tsx index c2438c088..95c7fb350 100644 --- a/packages/trip-form/src/DateTimeSelector/index.tsx +++ b/packages/trip-form/src/DateTimeSelector/index.tsx @@ -1,24 +1,15 @@ import CSS from "csstype"; import { format, parse } from "date-fns"; -import flatten from "flat"; import coreUtils from "@opentripplanner/core-utils"; -import React, { ChangeEvent, ReactElement, ReactNode, useCallback } from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import React, { ChangeEvent, ReactElement, useCallback } from "react"; +import { useIntl } from "react-intl"; -import ModeButton from "../ModeButton"; +import colors, { Dropdown } from "@opentripplanner/building-blocks"; import * as S from "../styled"; // eslint-disable-next-line prettier/prettier import type { QueryParamChangeEvent } from "../types"; -// Load the default messages. -import defaultEnglishMessages from "../../i18n/en-US.yml"; - -// 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, -// - the yaml loader for jest returns messages with flattened ids. -const defaultMessages: Record = flatten(defaultEnglishMessages); const { getCurrentDate, @@ -28,6 +19,8 @@ const { OTP_API_TIME_FORMAT } = coreUtils.time; +const { blue } = colors; + type DepartArriveValue = "NOW" | "DEPART" | "ARRIVE"; interface DateTimeSelectorProps { @@ -78,7 +71,7 @@ interface DateTimeSelectorProps { interface DepartArriveOption { isSelected?: boolean; - text: ReactNode; + text: string; type: DepartArriveValue; } @@ -137,6 +130,26 @@ export default function DateTimeSelector({ timeZone = getUserTimezone() }: DateTimeSelectorProps): ReactElement { const intl = useIntl() + const baseColor = S.baseColor() + + const departureOptions: DepartArriveOption[] = [ + { + // Default option. + type: "NOW", + text: intl.formatMessage({ id: "otpUi.DateTimeSelector.now" }) + }, + { + type: "DEPART", + text: intl.formatMessage({ id: "otpUi.DateTimeSelector.depart" }) + }, + { + type: "ARRIVE", + text: intl.formatMessage({ id: "otpUi.DateTimeSelector.arrive" }) + } + ]; + departureOptions.forEach(opt => { + opt.isSelected = departArrive === opt.type; + }); const handleQueryParamChange = useCallback( (queryParam: QueryParamChangeEvent): void => { @@ -150,8 +163,12 @@ export default function DateTimeSelector({ const handleInputChange = (key: string) => useCallback( (evt: ChangeEvent): void => { handleQueryParamChange({ [key]: evt.target.value }); + // If the user changes the time, it doesn't make sense for them to be departing now. + if (departArrive === "NOW") { + handleQueryParamChange({ departArrive: "DEPART" }); + } }, - [onQueryParamChange, key] + [onQueryParamChange, key, departArrive] ); const handleDateChange = handleInputChange("date"); @@ -191,42 +208,7 @@ export default function DateTimeSelector({ [onQueryParamChange, option.type, option.isSelected, timeZone] ); - const departureOptions: DepartArriveOption[] = [ - { - // Default option. - type: "NOW", - text: ( - - ) - }, - { - type: "DEPART", - text: ( - - ) - }, - { - type: "ARRIVE", - text: ( - - ) - } - ]; - departureOptions.forEach(opt => { - opt.isSelected = departArrive === opt.type; - }); + const isLegacy = forceLegacy || !supportsDateTimeInputs; @@ -236,21 +218,19 @@ export default function DateTimeSelector({ className={className} role="group" style={style} + baseColor={baseColor} > - + opt.isSelected).text} buttonStyle={{ backgroundColor: S.baseColor() || blue[900], borderRadius: "3px 0px 0px 3px", color: "white", height: "45px", border: "0px", padding:"5px 7px" }}> {departureOptions.map(opt => ( - {opt.text} - - ))} - - - {departArrive !== "NOW" && !isLegacy && ( + ))} + {/* The
elements below are used for layout, see S.DateTimeSelector. */}
@@ -272,7 +252,6 @@ export default function DateTimeSelector({ />
- )} {/* Backup controls (for older browsers) */} {departArrive !== "NOW" && isLegacy && ( From 7fc56a4554496268a7565fc7a73c6142d12cb7fb Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:07:52 -0600 Subject: [PATCH 4/4] feat(tip-form): update date time selector BREAKING CHANGE: Replaces the old d/t selector in favor of new design --- packages/trip-form/src/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trip-form/src/styled.ts b/packages/trip-form/src/styled.ts index 24364e132..97a7373d3 100755 --- a/packages/trip-form/src/styled.ts +++ b/packages/trip-form/src/styled.ts @@ -39,7 +39,7 @@ display: flex; justify-content: space-around; align-items: center; height: 100%; -padding: 0 0%; +padding: 0; background-color: white; border-radius: 0 3px 3px 0;