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

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>
+  )
+}

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;
+}

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,
+    },
+  },
+})