From 0ee6e8800d517b60ec546668944f2081b9957ace Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 3 Jul 2025 13:00:12 +0000
Subject: [PATCH] Merged in chore/sw-3145-move-tooltip (pull request #2514)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chore(SW-3145): Move Tooltip to design-system

* Move Tooltip to design-system


Approved-by: Joakim Jäderberg
---
 .../components/GuestsRoomsPicker/Form.tsx     |  2 +-
 apps/scandic-web/types/components/tooltip.ts  | 22 -------------
 .../lib/components}/Tooltip/index.tsx         | 32 +++++++++++++++----
 .../components}/Tooltip/tooltip.module.css    |  6 ++--
 .../lib/components}/Tooltip/variants.ts       |  4 +--
 packages/design-system/package.json           |  1 +
 6 files changed, 33 insertions(+), 34 deletions(-)
 delete mode 100644 apps/scandic-web/types/components/tooltip.ts
 rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Tooltip/index.tsx (57%)
 rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Tooltip/tooltip.module.css (96%)
 rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Tooltip/variants.ts (81%)

diff --git a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
index 9ca0780e9..7c0f405a8 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
@@ -5,11 +5,11 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Button from "../TempDesignSystem/Button"
-import { Tooltip } from "../TempDesignSystem/Tooltip"
 import { GuestsRoom } from "./GuestsRoom"
 
 import styles from "./guests-rooms-picker.module.css"
diff --git a/apps/scandic-web/types/components/tooltip.ts b/apps/scandic-web/types/components/tooltip.ts
deleted file mode 100644
index 622db4c2c..000000000
--- a/apps/scandic-web/types/components/tooltip.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export type TooltipPosition = "left" | "right" | "top" | "bottom"
-type VerticalArrow = "top" | "bottom" | "center"
-type HorizontalArrow = "left" | "right" | "center"
-
-type ValidArrowMap = {
-  left: VerticalArrow
-  right: VerticalArrow
-  top: HorizontalArrow
-  bottom: HorizontalArrow
-}
-
-type ValidArrow<P extends TooltipPosition> = P extends keyof ValidArrowMap
-  ? ValidArrowMap[P]
-  : never
-
-export interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
-  heading?: string
-  text?: string
-  position: P
-  arrow: ValidArrow<P>
-  isTouchable?: boolean
-}
diff --git a/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx b/packages/design-system/lib/components/Tooltip/index.tsx
similarity index 57%
rename from apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx
rename to packages/design-system/lib/components/Tooltip/index.tsx
index 7e79f5a58..5ce126a09 100644
--- a/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx
+++ b/packages/design-system/lib/components/Tooltip/index.tsx
@@ -1,12 +1,32 @@
-import { type PropsWithChildren, useState } from "react"
+import { type PropsWithChildren, useState } from 'react'
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import { tooltipVariants } from './variants'
 
-import { tooltipVariants } from "./variants"
+import styles from './tooltip.module.css'
+import Caption from '../Caption'
 
-import styles from "./tooltip.module.css"
+type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
+type VerticalArrow = 'top' | 'bottom' | 'center'
+type HorizontalArrow = 'left' | 'right' | 'center'
 
-import type { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
+type ValidArrowMap = {
+  left: VerticalArrow
+  right: VerticalArrow
+  top: HorizontalArrow
+  bottom: HorizontalArrow
+}
+
+type ValidArrow<P extends TooltipPosition> = P extends keyof ValidArrowMap
+  ? ValidArrowMap[P]
+  : never
+
+interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
+  heading?: string
+  text?: string
+  position: P
+  arrow: ValidArrow<P>
+  isTouchable?: boolean
+}
 
 export function Tooltip<P extends TooltipPosition>({
   heading,
@@ -24,7 +44,7 @@ export function Tooltip<P extends TooltipPosition>({
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault()
       handleToggle()
     }
diff --git a/apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css b/packages/design-system/lib/components/Tooltip/tooltip.module.css
similarity index 96%
rename from apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
rename to packages/design-system/lib/components/Tooltip/tooltip.module.css
index c521f814c..5e3d7a7ec 100644
--- a/apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/packages/design-system/lib/components/Tooltip/tooltip.module.css
@@ -45,7 +45,7 @@
 }
 
 .tooltip::before {
-  content: "";
+  content: '';
   position: absolute;
   border-style: solid;
 }
@@ -155,12 +155,12 @@
 }
 
 @media screen and (max-width: 767px) {
-  .tooltipContainer[data-active="true"] .tooltip {
+  .tooltipContainer[data-active='true'] .tooltip {
     visibility: visible;
     opacity: 1;
   }
 
-  .tooltipContainer[data-active="false"] .tooltip {
+  .tooltipContainer[data-active='false'] .tooltip {
     visibility: hidden;
     opacity: 0;
   }
diff --git a/apps/scandic-web/components/TempDesignSystem/Tooltip/variants.ts b/packages/design-system/lib/components/Tooltip/variants.ts
similarity index 81%
rename from apps/scandic-web/components/TempDesignSystem/Tooltip/variants.ts
rename to packages/design-system/lib/components/Tooltip/variants.ts
index 286466f92..d49622d87 100644
--- a/apps/scandic-web/components/TempDesignSystem/Tooltip/variants.ts
+++ b/packages/design-system/lib/components/Tooltip/variants.ts
@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./tooltip.module.css"
+import styles from './tooltip.module.css'
 
 export const tooltipVariants = cva(styles.tooltip, {
   variants: {
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index ade0e8788..2aec3db7d 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -17,6 +17,7 @@
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
+    "./Tooltip": "./dist/components/Tooltip/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",
     "./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",