feat: add departure date selector #27
Conversation
| {t(PageText.Departures.search.date.label)} | ||
| </p> | ||
|
|
||
| <DepartureDateSelector |
There was a problem hiding this comment.
Couldn't find a better name, please come with some alternatives.
| .departureDateSelector { | ||
| display: flex; | ||
| flex-direction: column; | ||
| /* TODO: Spacing not in variables. Use variable instead? */ |
There was a problem hiding this comment.
What should we do with values like these that are not specified in the theme? Should the design be revised, should we add the value(s) or should we just use them as is?
There was a problem hiding this comment.
The design should be revised to follow the correct spacing I think
There was a problem hiding this comment.
Agree, I'd prefer that over adding new values. Though a bit strange (maybe not the best word) that a spacing of 1rem is not in the set of spacings? Same with 0.75rem for border-radius.
Should we just keep this values for now until we have a design review, or similar to update the spacings, or use the spacings we have for now?
There was a problem hiding this comment.
Don't think 16px is ever used in spacing in the webshop or app 🤔
There was a problem hiding this comment.
Probably not since it is not a spacing.
The ones we are using at the moment are:
6px / 0.375rem (spacing between date/time inputs and type)
16px / 1rem (margin-bottom for search box asks for this, have used --spacings-medium)
12px / 0.75rem (border-radius)
| const [departureDateState, setDepartureDateState] = useState( | ||
| DepartureDateState.Now, | ||
| ); | ||
| const [_departureDate, setDepartureDate] = useState<Date>(); |
There was a problem hiding this comment.
Would it be better with one state, a date, and that state gets updated accordingly inside the component changing the date and time separately?
There was a problem hiding this comment.
I think the API should be "cleaned" more here and communicate with timestamps instead. It is the only intended way of using it so we should do that data mapping / conversion as early as possible in the call stack
There was a problem hiding this comment.
So I think something like
type DepartureDate = {
type: 'now'
} | {
type: 'arrival',
datetime: new Date()
}
// | etc etc ;
<DepartureDateSelector
initialValue={departureDate as DepartureDate}
onChange={setDepartureDate}
/>There was a problem hiding this comment.
Good suggestion! Was waiting with this some so that we agree on the solution. Implementing this post standup.
There was a problem hiding this comment.
When this is done I think it's ready to be merged for now
|
That menu selector screams to be animated 😄 But not important for now. |
|
I think maybe the break points should happen earlier? 
|
The padding should also be removed. Have removed it in my current branch. Tried getting an overview of the other breakpoints (header/footer etc) but couldn't find a common break point used. What should we break at? |
|
If I start typing the date with a 0 (zero) I'm getting a runtime error. This should probably be handled |
Indeed. One of the last changes I've done. Looking at it! |
| <label htmlFor="departureDateSelector"> | ||
| {t(ComponentText.DepartureDateSelector.date)} | ||
| </label> | ||
| <input |
There was a problem hiding this comment.
Looks like these inputs have color: var(--text-colors-secondary); in the Figma sketches
|
Maybe not relevant for this issue, but these headings should be primary--bold |
adriansberg
force-pushed
the
adriansberg/departure-date-selector
branch
from
14e2a28
to
0d5505c
Compare
adriansberg
force-pushed
the
adriansberg/departure-date-selector
branch
from
0d5505c
to
424bbde
Compare
Added options for when to travel, based on the current time, the arrival time or the departure time.
Screenshots
Light mode
Light mode mobile
Date and time picker mobile
Dark mode
Dark mode mobile
Fixes https://github.com/AtB-AS/kundevendt/issues/9144 (parts of it)
TODO