feat(SW-350): Implemented tooltip and booking widget tablet design

2024-10-04 10:00:52 +02:00
parent 04406d3865
commit aee9e94f7a
17 changed files with 530 additions and 137 deletions
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -0,0 +1,77 @@
+"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 styles from "./voucher.module.css"
+
+export default function Voucher() {
+  const intl = useIntl()
+
+  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
+  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
+  const addVouchers = intl.formatMessage({ id: "Add code" })
+  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
+  const reward = intl.formatMessage({ id: "Book reward night" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "Disabled booking options header",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Disabled booking options text",
+  })
+
+  return (
+    <div className={styles.optionsContainer}>
+      <Tooltip
+        heading={disabledBookingOptionsHeader}
+        text={disabledBookingOptionsText}
+        position="bottom"
+        arrow="left"
+      >
+        <div className={styles.vouchers}>
+          <div className={styles.vouchersHeader}>
+            <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>
+        </div>
+      </Tooltip>
+      <Tooltip
+        heading={disabledBookingOptionsHeader}
+        text={disabledBookingOptionsText}
+        position="bottom"
+        arrow="left"
+      >
+        <div className={styles.options}>
+          <label className={`${styles.option} ${styles.checkboxVoucher}`}>
+            <input type="checkbox" disabled className={styles.checkbox} />
+            <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} />
+            <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} />
+            <Caption color="disabled">{reward}</Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
--- a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
+++ b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
@@ -0,0 +1,82 @@
+.vouchers {
+  display: block;
+}
+.options {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.option {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-top: var(--Spacing-x2);
+  align-items: center;
+}
+.vouchers {
+  width: 100%;
+
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox {
+  width: var(--Spacing-x3);
+  height: var(--Spacing-x3);
+}
+
+.checkboxVoucher {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .vouchers {
+    display: none;
+  }
+  .options {
+    flex-direction: row;
+    gap: var(--Spacing-x4);
+  }
+  .option {
+    margin-top: 0;
+    gap: var(--Spacing-x-one-and-half);
+  }
+  .checkboxVoucher {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 1366px) {
+  .vouchers {
+    background-color: var(--Base-Background-Primary-Normal);
+    border-radius: var(--Corner-radius-Medium);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .vouchers {
+    display: block;
+    max-width: 200px;
+  }
+  .options {
+    flex-direction: column;
+    max-width: 190px;
+    gap: 0;
+  }
+  .vouchers:hover,
+  .option:hover {
+    cursor: not-allowed;
+  }
+  .optionsContainer {
+    flex-direction: row;
+  }
+  .checkboxVoucher {
+    display: none;
+  }
+}
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -1,24 +1,7 @@
-.options {
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-}
-
-.option {
-  display: flex;
-  gap: var(--Spacing-x-one-and-half);
-  align-items: center;
-}
-
 .infoIcon {
  stroke: var(--Base-Text-Disabled);
 }

-.vouchers,
-.options {
-  display: none;
-}
-
 .vouchersHeader {
  display: flex;
  gap: var(--Spacing-x-one-and-half);
@@ -28,9 +11,19 @@
  width: var(--Spacing-x3);
  height: var(--Spacing-x3);
 }
+.icon,
+.voucherRow {
+  display: none;
+}

@media screen and (max-width: 767px) {
-  .input {
+  .voucherContainer {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x4);
+  }
+}
+
+@media screen and (max-width: 1367px) {
+  .inputContainer {
    display: grid;
    gap: var(--Spacing-x2);
  }
@@ -49,36 +42,39 @@
    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
  }

-  .options {
-    gap: var(--Spacing-x2);
-    margin-top: var(--Spacing-x2);
-  }
-
-  .option {
-    gap: var(--Spacing-x2);
+  .button {
+    align-self: flex-end;
+    justify-content: center;
+    width: 100%;
  }
 }

@media screen and (min-width: 768px) {
  .input {
    display: flex;
+    align-items: center;
+  }
+  .inputContainer {
+    display: flex;
+    flex: 2;
    gap: var(--Spacing-x2);
  }
+  .voucherContainer {
+    flex: 1;
+  }

  .rooms,
-  .vouchers,
  .when,
  .where {
    width: 100%;
  }

-  .input input[type="text"] {
+  .inputContainer input[type="text"] {
    border: none;
-    height: 24px;
+    height: var(--Spacing-x3);
  }

  .rooms,
-  .vouchers,
  .when {
    max-width: 240px;
    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
@@ -90,30 +86,43 @@
    background-color: var(--Base-Surface-Primary-light-Hover-alt);
  }

-  .vouchers {
-    max-width: 200px;
-  }
-
  .where {
    max-width: 280px;
    position: relative;
  }

-  .options {
-    max-width: 190px;
+  .button {
+    justify-content: center;
+    width: 118px;
  }
 }

-@media screen and (min-width: 1367px) {
-  .vouchers {
-    display: block;
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .inputContainer {
+    padding: var(--Spacing-x2);
  }
-
-  .options {
+  .buttonContainer {
+    padding-right: var(--Spacing-x2);
+  }
+  .input .buttonContainer .button {
+    padding: var(--Spacing-x1);
+    width: var(--Spacing-x6);
+    height: var(--Spacing-x6);
+  }
+  .buttonText {
+    display: none;
+  }
+  .icon {
    display: flex;
  }
-  .vouchers:hover,
-  .option:hover {
-    cursor: not-allowed;
+
+  .voucherRow {
+    display: flex;
+    background: var(--Base-Surface-Primary-light-Hover);
+    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+    padding: var(--Spacing-x2);
+  }
+  .voucherContainer {
+    display: none;
  }
 }
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -1,85 +1,93 @@
 "use client"
+import React from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"

 import DatePicker from "@/components/DatePicker"
-import { InfoCircleIcon } from "@/components/Icons"
+import { SearchIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import Search from "./Search"
+import Voucher from "./Voucher"

 import styles from "./formContent.module.css"
-import tempStyles from "./Search/search.module.css" // TODO: Remove this when Rooms and Voucher is implemented
+import inputStyles from "./Search/search.module.css"

 import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"

 export default function FormContent({
  locations,
+  formId,
+  formState,
 }: BookingWidgetFormContentProps) {
  const intl = useIntl()
  const selectedDate = useWatch({ name: "date" })

  const rooms = intl.formatMessage({ id: "Guests & Rooms" })
-  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
-  const addVouchers = intl.formatMessage({ id: "Add code" })
-  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
-  const reward = intl.formatMessage({ id: "Book reward night" })

  const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")

  return (
-    <div className={styles.input}>
-      <div className={styles.where}>
-        <Search locations={locations} />
-      </div>
-      <div className={styles.when}>
-        <Caption color="red" textTransform="bold">
-          {intl.formatMessage(
-            { id: "booking.nights" },
-            { totalNights: nights }
-          )}
-        </Caption>
-        <DatePicker />
-      </div>
-      <div className={styles.rooms}>
-        <Caption color="red" textTransform="bold">
-          {rooms}
-        </Caption>
-        <Body asChild>
-          <input type="text" placeholder={rooms} className={tempStyles.input} />
-        </Body>
-      </div>
-      <div className={styles.vouchers}>
-        <div className={styles.vouchersHeader}>
-          <Caption color="disabled" textTransform="bold">
-            {vouchers}
-          </Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
+    <>
+      <div className={styles.input}>
+        <div className={styles.inputContainer}>
+          <div className={styles.where}>
+            <Search locations={locations} />
+          </div>
+          <div className={styles.when}>
+            <Caption color="red" textTransform="bold">
+              {intl.formatMessage(
+                { id: "booking.nights" },
+                { totalNights: nights }
+              )}
+            </Caption>
+            <DatePicker />
+          </div>
+          <div className={styles.rooms}>
+            <Caption color="red" textTransform="bold">
+              {rooms}
+            </Caption>
+            <Body asChild>
+              <input
+                type="text"
+                placeholder={rooms}
+                className={inputStyles.input}
+              />
+            </Body>
+          </div>
+        </div>
+        <div className={styles.voucherContainer}>
+          <Voucher />
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            className={styles.button}
+            disabled={!formState.isValid}
+            form={formId}
+            intent="primary"
+            theme="base"
+            type="submit"
+          >
+            <Caption
+              color="white"
+              textTransform="bold"
+              className={styles.buttonText}
+            >
+              {intl.formatMessage({ id: "Search" })}
+            </Caption>
+            <div className={styles.icon}>
+              <SearchIcon color="white" width={28} height={28} />
+            </div>
+          </Button>
        </div>
-        <Body asChild>
-          <input
-            type="text"
-            placeholder={addVouchers}
-            className={tempStyles.input}
-            disabled
-          />
-        </Body>
      </div>
-      <div className={styles.options}>
-        <label className={styles.option}>
-          <input type="checkbox" disabled className={styles.checkbox} />
-          <Caption color="disabled">{bonus}</Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
-        </label>
-        <label className={styles.option}>
-          <input type="checkbox" disabled className={styles.checkbox} />
-          <Caption color="disabled">{reward}</Caption>
-          <InfoCircleIcon color="white" className={styles.infoIcon} />
-        </label>
+      <div className={styles.voucherRow}>
+        <Voucher />
      </div>
-    </div>
+    </>
  )
 }
--- a/components/Forms/BookingWidget/form.module.css
+++ b/components/Forms/BookingWidget/form.module.css
@@ -8,7 +8,6 @@

 .form {
  display: grid;
-  gap: var(--Spacing-x2);
  width: 100%;
 }

@@ -16,27 +15,23 @@
  .form {
    align-self: flex-start;
  }
-
-  .button {
-    align-self: flex-end;
-    justify-content: center;
-    width: 100%;
-  }
 }

@media screen and (min-width: 768px) {
  .section {
    display: flex;
-    padding: var(--Spacing-x1) var(--Spacing-x5);
-  }
-
-  .button {
-    justify-content: center;
-    width: 118px;
  }

  .default {
    border-radius: var(--Corner-radius-Medium);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    padding: var(--Spacing-x1) var(--Spacing-x5);
+  }
+  .default {
    padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
      var(--Spacing-x-one-and-half) var(--Spacing-x1);
  }
--- a/components/Forms/BookingWidget/index.tsx
+++ b/components/Forms/BookingWidget/index.tsx
@@ -1,10 +1,6 @@
 "use client"
 import { useRouter } from "next/navigation"
 import { useFormContext } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"

 import FormContent from "./FormContent"
 import { bookingWidgetVariants } from "./variants"
@@ -17,7 +13,6 @@ import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidg
 const formId = "booking-widget"

 export default function Form({ locations, type }: BookingWidgetFormProps) {
-  const intl = useIntl()
  const router = useRouter()

  const classNames = bookingWidgetVariants({
@@ -43,20 +38,12 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
        id={formId}
      >
        <input {...register("location")} type="hidden" />
-        <FormContent locations={locations} />
+        <FormContent
+          locations={locations}
+          formId={formId}
+          formState={formState}
+        />
      </form>
-      <Button
-        className={styles.button}
-        disabled={!formState.isValid}
-        form={formId}
-        intent="primary"
-        theme="base"
-        type="submit"
-      >
-        <Caption color="white" textTransform="bold">
-          {intl.formatMessage({ id: "Search" })}
-        </Caption>
-      </Button>
    </section>
  )
 }
--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -0,0 +1,30 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { tooltipVariants } from "./variants"
+
+import styles from "./tooltip.module.css"
+
+import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
+
+export function Tooltip<P extends TooltipPosition>({
+  heading,
+  text,
+  position,
+  arrow,
+  children,
+}: TooltipProps<P>) {
+  const className = tooltipVariants({ position, arrow })
+  return (
+    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+      <div className={className}>
+        {heading && (
+          <Caption textTransform="bold" color="white">
+            {heading}
+          </Caption>
+        )}
+        {text && <Caption color="white">{text}</Caption>}
+      </div>
+      {children}
+    </div>
+  )
+}
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -0,0 +1,137 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  padding: var(--Spacing-x1);
+  background-color: var(--UI-Text-Active);
+  border: 0.5px solid var(--UI-Border-Active);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-Inverted);
+  position: absolute;
+  visibility: hidden;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s;
+  max-width: 200px;
+}
+
+.tooltipContainer:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.left {
+  right: 100%;
+}
+
+.right {
+  left: 100%;
+}
+
+.top {
+  bottom: 100%;
+}
+
+.bottom {
+  top: 100%;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  border-style: solid;
+}
+
+.bottom.arrowLeft::before {
+  top: -8px;
+  left: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowCenter::before {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowRight::before {
+  top: -8px;
+  right: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.top.arrowLeft::before {
+  bottom: -8px;
+  left: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowCenter::before {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowRight::before {
+  bottom: -8px;
+  right: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.left.arrowTop::before {
+  top: 16px;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowCenter::before {
+  top: 50%;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowBottom::before {
+  bottom: 16px;
+  right: -8px;
+  transform: translateY(50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.right.arrowTop::before {
+  top: 16px;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowCenter::before {
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowBottom::before {
+  bottom: 16px;
+  left: -8px;
+  transform: translateY(50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
--- a/components/TempDesignSystem/Tooltip/variants.ts
+++ b/components/TempDesignSystem/Tooltip/variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./tooltip.module.css"
+
+export const tooltipVariants = cva(styles.tooltip, {
+  variants: {
+    position: {
+      left: styles.left,
+      right: styles.right,
+      top: styles.top,
+      bottom: styles.bottom,
+    },
+    arrow: {
+      left: styles.arrowLeft,
+      right: styles.arrowRight,
+      center: styles.arrowCenter,
+      top: styles.arrowTop,
+      bottom: styles.arrowBottom,
+    },
+  },
+})