diff --git a/src/page-modules/contact/components/form/date-selector.tsx b/src/page-modules/contact/components/form/date-selector.tsx new file mode 100644 index 00000000..d05eb1f3 --- /dev/null +++ b/src/page-modules/contact/components/form/date-selector.tsx @@ -0,0 +1,83 @@ +import style from './form.module.css'; +import { MonoIcon } from '@atb/components/icon'; +import { TranslatedString, useTranslation } from '@atb/translations'; +import { fromDate, parseDate } from '@internationalized/date'; +import { + Button, + Calendar, + CalendarCell, + CalendarGrid, + DateInput, + DatePicker, + DateSegment, + Dialog, + Group, + Heading, + Label, + Popover, +} from 'react-aria-components'; + +export type DateSelectorProps = { + label: TranslatedString; + value?: string; + onChange: (value: string) => void; +}; + +export default function DateSelector({ + label, + value, + onChange, +}: DateSelectorProps) { + const { t } = useTranslation(); + + return ( +
+ + onChange(e.toString().slice(0, 10))} + className={style.dateSelector} + shouldForceLeadingZeros + > + + + {(segment) => } + + + + + + +
+ + + +
+ + {(date) => ( + + )} + + + + + +
+ ); +} diff --git a/src/page-modules/contact/components/form/form.module.css b/src/page-modules/contact/components/form/form.module.css index 84783c39..1bf40241 100644 --- a/src/page-modules/contact/components/form/form.module.css +++ b/src/page-modules/contact/components/form/form.module.css @@ -498,11 +498,14 @@ opacity: 0.7; padding-right: var(--spacings-small); } + @media (max-width: 600px) { + .select, + .select__placholder, .select__listBoxItem, - .select__select_container, .searchable_select__comboBox, - .searchable_select__listBoxItem { + .searchable_select__listBoxItem, + .searchable_select__input:not(:focus):placeholder-shown { font-size: 1.25rem; } .select__popover, @@ -511,3 +514,127 @@ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); } } + +/* Time and date selector */ +.dateSelectorContainer { + display: flex; + flex-direction: column; + gap: var(--spacings-small); + font-size: 1rem !important; +} + +.dateSelector, +.timeSelector { + --height: 2.75rem; + border-radius: var(--border-radius-small); + overflow: hidden; +} + +.dateSelector input[type='date'], +.timeSelector input[type='time'] { + height: var(--height); + padding: var(--spacings-medium); + border: none; + background-color: transparent; + color: var(--static-background-background_0-text); + flex: 1; +} + +.calendarSelectorGroup { + display: flex; + position: relative; + width: 100%; +} + +.calendarButton { + position: absolute; + right: 0; + border: none; + cursor: pointer; + background: none; + margin: var(--spacings-medium); + border-radius: var(--border-radius-small); +} + +.calendarDialog { + padding: var(--spacings-xSmall); + background: var(--static-background-background_0-background); + box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.15); +} + +.calendarDialog__header { + display: flex; + gap: var(--spacings-medium); + justify-content: center; + align-items: center; + padding: var(--spacings-small); +} + +.calendarDialog__title { + composes: typo-heading__component from '@atb/theme/typography.module.css'; +} + +.calendarDialog__headerButtons { + background: none; + border: none; + padding: var(--spacings-xSmall) var(--spacings-medium); + cursor: pointer; +} + +.calendarGrid { + width: 100%; +} + +.calendarGrid__cell { + padding: var(--spacings-xSmall) var(--spacings-medium); + cursor: pointer; + text-align: center; + border-radius: var(--border-radius-small); +} + +.calendarGrid__cell[data-disabled] { + opacity: 0.3; + cursor: default; +} + +.calendarGrid__cell[data-selected] { + background-color: var(--interactive-interactive_2-active-background); + color: var(--interactive-interactive_2-active-text); + font-weight: bold; + border-radius: var(--border-radius-small); +} + +.dateSelectorInput, +.timeSelectorInput { + height: var(--height); + padding: var(--spacings-medium); + color: var(--static-background-background_0-text); + border-top-right-radius: 0.75rem; + border-bottom-right-radius: 0.75rem; + display: flex; + border: var(--border-width-slim) solid var(--text-colors-primary); + width: 100%; + + border: var(--border-width-slim) solid var(--text-colors-primary); + align-items: center; +} + +.dateSelector input[type='date']:focus, +.timeSelector input[type='time']:focus { + outline: 0; +} + +.dateSelector:focus-within, +.timeSelector:focus-within { + box-shadow: inset 0 0 0 var(--border-width-medium) + var(--interactive-interactive_2-outline-background); +} + +:global(.dark) + .dateSelector + input[type='date']::-webkit-calendar-picker-indicator, +:global(.dark) + .timeSelector + input[type='time']::-webkit-calendar-picker-indicator { + filter: invert(1); +} diff --git a/src/page-modules/contact/components/form/index.ts b/src/page-modules/contact/components/form/index.ts index 262e7389..3d53275e 100644 --- a/src/page-modules/contact/components/form/index.ts +++ b/src/page-modules/contact/components/form/index.ts @@ -6,6 +6,7 @@ export { default as Input } from './input'; export { default as Radio } from './radio'; export { default as Select } from './select'; export { default as Textarea } from './textarea'; +export { default as DateSelector } from './date-selector'; export { SearchableSelect, getLineOptions, diff --git a/src/page-modules/contact/components/index.tsx b/src/page-modules/contact/components/index.tsx index edc61d0a..9c656ea5 100644 --- a/src/page-modules/contact/components/index.tsx +++ b/src/page-modules/contact/components/index.tsx @@ -10,5 +10,6 @@ export { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from './form'; export { SectionCard } from './section-card'; diff --git a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx index d4ca62c7..607adccc 100644 --- a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx @@ -14,6 +14,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type DelayFormProps = { @@ -128,17 +129,14 @@ export const DelayForm = ({ state, send }: DelayFormProps) => { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> diff --git a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx index abd86bae..66de43ba 100644 --- a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx @@ -14,6 +14,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type DriverFormProps = { @@ -150,17 +151,14 @@ export const DriverForm = ({ state, send }: DriverFormProps) => { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> diff --git a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx index eac437aa..432d6fb1 100644 --- a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx @@ -14,6 +14,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type InjuryFormProps = { @@ -149,17 +150,14 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> diff --git a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx index 7f74a25f..8cc0dc1d 100644 --- a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx @@ -14,6 +14,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type StopFormProps = { @@ -104,17 +105,14 @@ export const StopForm = ({ state, send }: StopFormProps) => { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> diff --git a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx index 77e01644..55e2934a 100644 --- a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx @@ -15,6 +15,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type TransportationFormProps = { @@ -132,17 +133,14 @@ export const TransportationForm = ({ } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> diff --git a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx index 15dc6c78..9df0f96b 100644 --- a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx +++ b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx @@ -14,6 +14,7 @@ import { SearchableSelect, getLineOptions, getStopOptions, + DateSelector, } from '../../components'; type FeedbackFormProps = { @@ -118,20 +119,18 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> + { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> + { } /> - + onChange={(date) => send({ type: 'ON_INPUT_CHANGE', inputName: 'date', - value: e.target.value, + value: date, }) } /> +