Merged in fix/SW-1003-tooltip-filter-pet-mobile (pull request #1012)

fix(SW-1003): Moved tooltip on mobile and fixed bug with touch/click

Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -4,8 +4,10 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 import { z } from "zod"
 
+import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -25,6 +27,8 @@ export default function RoomFilter({
   onFilter,
   filterOptions,
 }: RoomFilterProps) {
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+
   const initialFilterValues = useMemo(
     () =>
       filterOptions.reduce(
@@ -55,6 +59,8 @@ export default function RoomFilter({
     id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
   })
 
+  const showTooltip = isAboveMobile && petFriendly
+
   const submitFilter = useCallback(() => {
     const data = getValues()
     onFilter(data)
@@ -77,19 +83,50 @@ export default function RoomFilter({
       </div>
       <div className={styles.infoMobile}>
         <div className={styles.filterInfo}>
-          <Caption
-            type="label"
-            color="baseTextMediumContrast"
-            textTransform="uppercase"
-          >
-            {intl.formatMessage({ id: "Filter" })}
-          </Caption>
-          <Caption type="label" color="baseTextMediumContrast">
-            {Object.entries(selectedFilters)
-              .filter(([_, value]) => value)
-              .map(([key]) => intl.formatMessage({ id: key }))
-              .join(", ")}
-          </Caption>
+          {!isAboveMobile ? (
+            <Tooltip
+              text={tooltipText}
+              position="bottom"
+              arrow="left"
+              isTouchable
+            >
+              <InfoCircleIcon
+                color="uiTextHighContrast"
+                height={20}
+                width={20}
+              />
+
+              <Caption
+                type="label"
+                color="baseTextMediumContrast"
+                textTransform="uppercase"
+              >
+                {intl.formatMessage({ id: "Filter" })}
+              </Caption>
+              <Caption type="label" color="baseTextMediumContrast">
+                {Object.entries(selectedFilters)
+                  .filter(([_, value]) => value)
+                  .map(([key]) => intl.formatMessage({ id: key }))
+                  .join(", ")}
+              </Caption>
+            </Tooltip>
+          ) : (
+            <>
+              <Caption
+                type="label"
+                color="baseTextMediumContrast"
+                textTransform="uppercase"
+              >
+                {intl.formatMessage({ id: "Filter" })}
+              </Caption>
+              <Caption type="label" color="baseTextMediumContrast">
+                {Object.entries(selectedFilters)
+                  .filter(([_, value]) => value)
+                  .map(([key]) => intl.formatMessage({ id: key }))
+                  .join(", ")}
+              </Caption>
+            </>
+          )}
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
@@ -118,11 +155,11 @@ export default function RoomFilter({
                   disabled={isDisabled}
                   selected={getValues(code)}
                   Icon={getIconForFeatureCode(code)}
-                  hasTooltip={isPetRoom}
+                  hasTooltip={isPetRoom && isAboveMobile}
                 />
               )
 
-              return isPetRoom ? (
+              return showTooltip ? (
                 <Tooltip
                   key={option.code}
                   text={tooltipText}

components/TempDesignSystem/Tooltip/index.tsx

@@ -14,12 +14,20 @@ export function Tooltip<P extends TooltipPosition>({
   position,
   arrow,
   children,
+  isTouchable = false,
 }: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
   const [isActive, setIsActive] = useState(false)
 
   function handleToggle() {
-    setIsActive(!isActive)
+    setIsActive((prevState) => !prevState)
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      handleToggle()
+    }
   }
 
   return (
@@ -27,8 +35,10 @@ export function Tooltip<P extends TooltipPosition>({
       className={styles.tooltipContainer}
       role="tooltip"
       aria-label={text}
-      onClick={handleToggle}
-      onTouchStart={handleToggle}
+      tabIndex={0}
+      onClick={isTouchable ? undefined : handleToggle}
+      onTouchStart={isTouchable ? handleToggle : undefined}
+      onKeyDown={handleKeyDown}
       data-active={isActive}
     >
       <div className={className}>

types/components/tooltip.ts

@@ -18,4 +18,5 @@ export interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
   text?: string
   position: P
   arrow: ValidArrow<P>
+  isTouchable?: boolean
 }