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

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

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

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

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