Merged in chore/sw-3145-move-tooltip (pull request #2514)

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

* Move Tooltip to design-system


Approved-by: Joakim Jäderberg

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"

apps/scandic-web/types/components/tooltip.ts

@@ -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
-}

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

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

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: {

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",