scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sw-350): fixed ui-comments for calendar, search and widget

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-14 12:04:05 +02:00
parent 89d65cec38
commit b3b26be83c
16 changed files with 80 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/DatePicker/Screen/Desktop.tsx
View File

@@ -60,10 +60,9 @@ export default function DatePickerDesktop({
lang={lang}
locale={locale}
mode="range"
numberOfMonths={2}
onSelect={handleOnSelect}
onDayClick={(day) => handleOnSelect(day)}
pagedNavigation
required
required={false}
selected={selectedDate}
startMonth={currentDate}
weekStartsOn={1}

2
components/DatePicker/Screen/Mobile.tsx
View File

@@ -78,7 +78,7 @@ export default function DatePickerMobile({
mode="range"
/** Showing full year or what's left of it */
numberOfMonths={12}
onSelect={handleOnSelect}
onDayClick={(day) => handleOnSelect(day)}
required
selected={selectedDate}
startMonth={startMonth}

5
components/DatePicker/Screen/desktop.module.css
View File

@@ -47,8 +47,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
}
td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
td.rangeStart[aria-selected="true"]:not([data-outside="true"])
button.dayButton {
td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
td.day[aria-selected="true"] button.dayButton {
background: var(--Primary-Light-On-Surface-Accent);
border: none;
color: var(--Base-Button-Inverted-Fill-Normal);
@@ -75,6 +75,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
background: var(--Base-Background-Primary-Normal);
border: none;
border-radius: 0;
color: var(--UI-Text-High-contrast);
}
td.day[data-disabled="true"],

5
components/DatePicker/Screen/mobile.module.css
View File

@@ -113,8 +113,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
}
td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
td.rangeStart[aria-selected="true"]:not([data-outside="true"])
button.dayButton {
td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
td.day[aria-selected="true"] button.dayButton {
background: var(--Primary-Light-On-Surface-Accent);
border: none;
color: var(--Base-Button-Inverted-Fill-Normal);
@@ -141,6 +141,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
background: var(--Base-Background-Primary-Normal);
border: none;
border-radius: 0;
color: var(--UI-Text-High-contrast);
}
td.day[data-disabled="true"],

5
components/DatePicker/date-picker.module.css
View File

@@ -22,6 +22,11 @@
.hideWrapper {
background-color: var(--Main-Grey-White);
display: none;
}
.container[data-isopen="true"] .hideWrapper {
display: block;
}
@media screen and (max-width: 1366px) {

47
components/DatePicker/index.tsx
View File

@@ -14,8 +14,6 @@ import DatePickerMobile from "./Screen/Mobile"
import styles from "./date-picker.module.css"
import type { DateRange } from "react-day-picker"
import type { DatePickerFormProps } from "@/types/components/datepicker"
const locales = {
@@ -26,26 +24,54 @@ const locales = {
[Lang.sv]: sv,
}
export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
export default function DatePickerForm({
name = "date",
onToggleOpen,
}: DatePickerFormProps) {
const lang = useLang()
const [isOpen, setIsOpen] = useState(false)
const selectedDate = useWatch({ name })
const { register, setValue } = useFormContext()
const ref = useRef<HTMLDivElement | null>(null)
const [isSelectingFrom, setIsSelectingFrom] = useState(true)
function close() {
setIsOpen(false)
onToggleOpen && onToggleOpen(false)
}
function handleOnClick() {
setIsOpen((prevIsOpen) => !prevIsOpen)
setIsOpen((prevIsOpen) => {
const newState = !prevIsOpen
onToggleOpen && onToggleOpen(newState)
return newState
})
}
function handleSelectDate(selected: DateRange) {
setValue(name, {
from: dt(selected.from).format("YYYY-MM-DD"),
to: dt(selected.to).format("YYYY-MM-DD"),
})
function handleSelectDate(selected: Date) {
if (isSelectingFrom) {
setValue(name, {
from: dt(selected).format("YYYY-MM-DD"),
to: undefined,
})
setIsSelectingFrom(false)
} else {
const fromDate = dt(selectedDate.from)
const toDate = dt(selected)
if (toDate.isAfter(fromDate)) {
setValue(name, {
from: selectedDate.from,
to: toDate.format("YYYY-MM-DD"),
})
setIsSelectingFrom(true)
} else {
setValue(name, {
from: selectedDate.from,
to: undefined,
})
}
}
}
useEffect(() => {
@@ -53,13 +79,14 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
const target = evt.target as HTMLElement
if (ref.current && target && !ref.current.contains(target)) {
setIsOpen(false)
onToggleOpen && onToggleOpen(false)
}
}
document.body.addEventListener("click", handleClickOutside)
return () => {
document.body.removeEventListener("click", handleClickOutside)
}
}, [setIsOpen])
}, [setIsOpen, onToggleOpen])
const selectedFromDate = dt(selectedDate.from)
.locale(lang)

11
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -48,15 +48,6 @@ export default function Search({ locations }: SearchProps) {
dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
}
function handleOnBlur() {
if (!value && state.searchData?.name) {
setValue(name, state.searchData.name)
// Always need to manually trigger
// revalidation when setting value r-h-f
trigger()
}
}
function handleOnChange(
evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
) {
@@ -67,6 +58,7 @@ export default function Search({ locations }: SearchProps) {
type: ActionType.SEARCH_LOCATIONS,
})
} else {
console.log("clear")
dispatch({ type: ActionType.CLEAR_SEARCH_LOCATIONS })
}
}
@@ -156,7 +148,6 @@ export default function Search({ locations }: SearchProps) {
}),
...register(name, {
onBlur: function () {
handleOnBlur()
closeMenu()
},
onChange: handleOnChange,

5
components/Forms/BookingWidget/FormContent/Search/search.module.css
View File

@@ -24,8 +24,3 @@
p {
color: var(--UI-Text-Active);
}
.container:hover:has(input:not(:active, :focus, :focus-within))
input::-webkit-search-cancel-button {
display: none;
}

8
components/Forms/BookingWidget/FormContent/Voucher/index.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
@@ -50,17 +50,17 @@ export default function Voucher() {
>
<div className={styles.options}>
<label className={`${styles.option} ${styles.checkboxVoucher}`}>
<input type="checkbox" disabled className={styles.checkbox} />
<Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
<Caption color="disabled">{useVouchers}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Checkbox name="useBonus" registerOptions={{ disabled: true }} />
<Caption color="disabled">{bonus}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>
<label className={styles.option}>
<input type="checkbox" disabled className={styles.checkbox} />
<Checkbox name="useReward" registerOptions={{ disabled: true }} />
<Caption color="disabled">{reward}</Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label>

3
components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
View File

@@ -68,7 +68,7 @@
.options {
flex-direction: column;
max-width: 190px;
gap: 0;
gap: var(--Spacing-x-half);
}
.vouchers:hover,
.option:hover {
@@ -76,6 +76,7 @@
}
.optionsContainer {
flex-direction: row;
align-items: center;
}
.checkboxVoucher {
display: none;

9
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -27,6 +27,7 @@
.rooms,
.vouchers,
.when,
.whenOpen,
.where {
background-color: var(--Base-Background-Primary-Normal);
border-radius: var(--Corner-radius-Medium);
@@ -34,7 +35,8 @@
.rooms,
.vouchers,
.when {
.when,
.whenOpen {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
}
@@ -61,6 +63,7 @@
.rooms,
.when,
.whenOpen,
.where {
width: 100%;
}
@@ -71,12 +74,14 @@
}
.rooms,
.when {
.when,
.whenOpen {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Small);
}
.when:hover,
.rooms:hover,
.whenOpen,
.rooms:has(.input:active, .input:focus, .input:focus-within) {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}

6
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -1,4 +1,5 @@
"use client"
import { useState } from "react"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -22,6 +23,7 @@ export default function FormContent({
formId,
}: BookingWidgetFormContentProps) {
const intl = useIntl()
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const selectedDate = useWatch({ name: "date" })
const rooms = intl.formatMessage({ id: "Guests & Rooms" })
@@ -35,14 +37,14 @@ export default function FormContent({
<div className={styles.where}>
<Search locations={locations} />
</div>
<div className={styles.when}>
<div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
<Caption color="red" textTransform="bold">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
</Caption>
<DatePicker />
<DatePicker onToggleOpen={setIsDatePickerOpen} />
</div>
<div className={styles.rooms}>
<label>

8
components/TempDesignSystem/Form/Checkbox/checkbox.module.css
View File

@@ -9,6 +9,11 @@
background: var(--UI-Input-Controls-Fill-Selected);
}
.container[data-disabled] .checkbox {
border: 1px solid var(--UI-Input-Controls-Border-Disabled);
background: var(--UI-Input-Controls-Surface-Disabled);
}
.checkboxContainer {
display: flex;
align-items: flex-start;
@@ -20,13 +25,12 @@
width: 24px;
height: 24px;
min-width: 24px;
border: 2px solid var(--UI-Input-Controls-Border-Normal);
border: 1px solid var(--UI-Input-Controls-Border-Normal);
border-radius: 4px;
transition: all 200ms;
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms;
forced-color-adjust: none;
}

5
components/TempDesignSystem/Form/Checkbox/index.tsx
View File

@@ -7,10 +7,10 @@ import { InfoCircleIcon } from "@/components/Icons"
import CheckIcon from "@/components/Icons/Check"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { CheckboxProps } from "./checkbox"
import styles from "./checkbox.module.css"
import { CheckboxProps } from "@/types/components/checkbox"
export default function Checkbox({
name,
children,
@@ -29,6 +29,7 @@ export default function Checkbox({
isSelected={field.value}
onChange={field.onChange}
data-testid={name}
isDisabled={registerOptions?.disabled}
>
{({ isSelected }) => (
<>

0
components/TempDesignSystem/Form/Checkbox/checkbox.ts → types/components/checkbox/index.ts
View File

3
types/components/datepicker.ts
View File

@@ -5,13 +5,14 @@ import type { DateRange } from "react-day-picker"
export interface DatePickerFormProps {
name?: string
onToggleOpen?: (isDatePickerOpen: boolean) => void
}
type LangWithoutEn = Lang.da | Lang.de | Lang.fi | Lang.no | Lang.sv
export interface DatePickerProps {
close: () => void
handleOnSelect: (selected: DateRange) => void
handleOnSelect: (selected: Date) => void
locales: Record<LangWithoutEn, Locale>
selectedDate: DateRange
}