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

Merged in fix/350-ui-fixes-booking-widget (pull request #907)

Browse Source 
Fix/350 ui fixes booking widget

Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2024-11-15 11:03:19 +00:00
parent ef2ef3c9a8 f786f6fa07
commit 452ad7bcd4
6 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BookingWidget/Client.tsx
View File

@@ -173,7 +173,7 @@ export default function BookingWidgetClient({
> >
<CloseLargeIcon /> <CloseLargeIcon />
</button> </button>
<Form locations={locations} type={type} /> <Form locations={locations} type={type} setIsOpen={setIsOpen} />
</div> </div>
</section> </section>
<div className={styles.backdrop} onClick={closeMobileSearch} /> <div className={styles.backdrop} onClick={closeMobileSearch} />

7
components/DatePicker/index.tsx
View File

@@ -123,7 +123,12 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
data-isopen={isOpen} data-isopen={isOpen}
ref={ref} ref={ref}
> >
<button className={styles.btn} onFocus={showOnFocus} type="button"> <button
className={styles.btn}
onFocus={showOnFocus}
onClick={() => setIsOpen(true)}
type="button"
>
<Body className={styles.body} asChild> <Body className={styles.body} asChild>
<span> <span>
{selectedFromDate} - {selectedToDate} {selectedFromDate} - {selectedToDate}

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

@@ -17,7 +17,11 @@ import { Location } from "@/types/trpc/routers/hotel/locations"
const formId = "booking-widget" const formId = "booking-widget"
export default function Form({ locations, type }: BookingWidgetFormProps) { export default function Form({
locations,
type,
setIsOpen,
}: BookingWidgetFormProps) {
const router = useRouter() const router = useRouter()
const lang = useLang() const lang = useLang()
@@ -52,7 +56,7 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
) )
}) })
}) })
setIsOpen(false)
router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`) router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
} }

16
components/TempDesignSystem/Tooltip/index.tsx
View File

@@ -1,4 +1,4 @@
import { PropsWithChildren } from "react" import { PropsWithChildren, useState } from "react"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -16,8 +16,20 @@ export function Tooltip<P extends TooltipPosition>({
children, children,
}: PropsWithChildren<TooltipProps<P>>) { }: PropsWithChildren<TooltipProps<P>>) {
const className = tooltipVariants({ position, arrow }) const className = tooltipVariants({ position, arrow })
const [isActive, setIsActive] = useState(false)
function handleToggle() {
setIsActive(!isActive)
}
return ( return (
<div className={styles.tooltipContainer} role="tooltip" aria-label={text}> <div
className={styles.tooltipContainer}
role="tooltip"
aria-label={text}
onClick={handleToggle}
data-active={isActive}
>
<div className={className}> <div className={className}>
{heading && ( {heading && (
<Caption type="bold" color="white"> <Caption type="bold" color="white">

12
components/TempDesignSystem/Tooltip/tooltip.module.css
View File

@@ -140,3 +140,15 @@
border-width: 7px 8px 7px 0; border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent; border-color: transparent var(--UI-Text-Active) transparent transparent;
} }
@media screen and (max-width: 768px) {
.tooltipContainer[data-active="true"] .tooltip {
visibility: visible;
opacity: 1;
}
.tooltipContainer[data-active="false"] .tooltip {
visibility: hidden;
opacity: 0;
}
}

8
types/components/form/bookingwidget.ts
View File

@@ -1,14 +1,10 @@
import { FormState, UseFormReturn } from "react-hook-form" import type { BookingWidgetType } from "@/types/components/bookingWidget"
import type {
BookingWidgetSchema,
BookingWidgetType,
} from "@/types/components/bookingWidget"
import type { Location, Locations } from "@/types/trpc/routers/hotel/locations" import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
export interface BookingWidgetFormProps { export interface BookingWidgetFormProps {
locations: Locations locations: Locations
type?: BookingWidgetType type?: BookingWidgetType
setIsOpen: (isOpen: boolean) => void
} }
export interface BookingWidgetFormContentProps { export interface BookingWidgetFormContentProps {