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

2024-10-08 08:57:19 +02:00
parent af8d1b8d6e
commit 3160174701
5 changed files with 62 additions and 60 deletions
@@ -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}
@@ -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;
 }