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

feat(SW-350): Created Input field for booking widget

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-08 08:57:19 +02:00
parent af8d1b8d6e
commit 3160174701
5 changed files with 62 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Forms/BookingWidget/FormContent/Input/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React, { forwardRef, InputHTMLAttributes } from "react"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./input.module.css"
const Input = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>(function InputComponent(props, ref) {
return (
<Body asChild>
<input
{...props}
ref={ref}
className={`${styles.input} ${props.className}`}
/>
</Body>
)
})
export default Input

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

@@ -13,10 +13,10 @@ import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Input from "../Input"
import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer" import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
import SearchList from "./SearchList" import SearchList from "./SearchList"
import inputStyles from "../Input/input.module.css"
import styles from "./search.module.css" import styles from "./search.module.css"
import type { BookingWidgetSchema } from "@/types/components/bookingWidget" import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
@@ -143,29 +143,27 @@ export default function Search({ locations }: SearchProps) {
</Caption> </Caption>
</label> </label>
<div {...getRootProps({}, { suppressRefError: true })}> <div {...getRootProps({}, { suppressRefError: true })}>
<Body asChild> <Input
<input {...getInputProps({
{...getInputProps({ className: styles.input,
className: `${styles.searchInput} ${inputStyles.input}`, id: name,
id: name, onFocus(evt) {
onFocus(evt) { handleOnFocus(evt)
handleOnFocus(evt) openMenu()
openMenu() },
placeholder: intl.formatMessage({
id: "Destinations & hotels",
}),
...register(name, {
onBlur: function () {
handleOnBlur()
closeMenu()
}, },
placeholder: intl.formatMessage({ onChange: handleOnChange,
id: "Destinations & hotels", }),
}), type: "search",
...register(name, { })}
onBlur: function () { />
handleOnBlur()
closeMenu()
},
onChange: handleOnChange,
}),
type: "search",
})}
/>
</Body>
</div> </div>
<SearchList <SearchList
getItemProps={getItemProps} getItemProps={getItemProps}

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

@@ -7,32 +7,24 @@
} }
.container:hover, .container:hover,
.container:has( .container:has(input:active, .input:focus, .input:focus-within) {
.searchInput:active,
.searchInput:focus,
.searchInput:focus-within
) {
background-color: var(--Base-Surface-Primary-light-Hover-alt); background-color: var(--Base-Surface-Primary-light-Hover-alt);
} }
.container:has( .container:has(input:active, .input:focus, .input:focus-within) {
.searchInput:active,
.searchInput:focus,
.searchInput:focus-within
) {
border-color: 1px solid var(--UI-Input-Controls-Border-Focus); border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
} }
.label:has( .label:has(
~ .inputContainer .searchInput:active, ~ .inputContainer .input:active,
~ .inputContainer .searchInput:focus, ~ .inputContainer .input:focus,
~ .inputContainer .searchInput:focus-within ~ .inputContainer .input:focus-within
) )
p { p {
color: var(--UI-Text-Active); color: var(--UI-Text-Active);
} }
.container:hover:has(.searchInput:not(:active, :focus, :focus-within)) .container:hover:has(.input:not(:active, :focus, :focus-within))
.searchInput::-webkit-search-cancel-button { .input::-webkit-search-cancel-button {
display: none; display: none;
} }

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

@@ -1,11 +1,12 @@
"use client" "use client"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import inputStyles from "@/components/Forms/BookingWidget/FormContent/Search/search.module.css"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip" import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import Input from "../Input"
import styles from "./voucher.module.css" import styles from "./voucher.module.css"
export default function Voucher() { export default function Voucher() {
@@ -32,20 +33,13 @@ export default function Voucher() {
arrow="left" arrow="left"
> >
<div className={styles.vouchers}> <div className={styles.vouchers}>
<div className={styles.vouchersHeader}> <label>
<Caption color="disabled" textTransform="bold"> <Caption color="disabled" textTransform="bold">
{vouchers} {vouchers}
</Caption> </Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */} {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</div> </label>
<Body asChild> <Input type="text" placeholder={addVouchers} disabled />
<input
type="text"
placeholder={addVouchers}
className={inputStyles.input}
disabled
/>
</Body>
</div> </div>
</Tooltip> </Tooltip>
<Tooltip <Tooltip

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

@@ -10,11 +10,11 @@ import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Input from "./Input"
import Search from "./Search" import Search from "./Search"
import Voucher from "./Voucher" import Voucher from "./Voucher"
import styles from "./formContent.module.css" import styles from "./formContent.module.css"
import inputStyles from "./Input/input.module.css"
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget" import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
@@ -47,16 +47,12 @@ export default function FormContent({
<DatePicker /> <DatePicker />
</div> </div>
<div className={styles.rooms}> <div className={styles.rooms}>
<Caption color="red" textTransform="bold"> <label>
{rooms} <Caption color="red" textTransform="bold">
</Caption> {rooms}
<Body asChild> </Caption>
<input </label>
type="text" <Input type="text" placeholder={rooms} />
placeholder={rooms}
className={inputStyles.input}
/>
</Body>
</div> </div>
</div> </div>
<div className={styles.voucherContainer}> <div className={styles.voucherContainer}>