Add types for Tooltip (#671)

* 🏷️ Add types for Tooltip * 🐛 Fix types. Add correct typography token to tooltip * 🐛 Add correct tooltip text color
equinor · Nov 13, 2020 · 9ec1cfd · 9ec1cfd
1 parent e96055b
commit 9ec1cfd
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 63 deletions.
diff --git a/...s/core-react/src/Tooltip/Tooltip.test.jsx → ...s/core-react/src/Tooltip/Tooltip.test.tsx b/...s/core-react/src/Tooltip/Tooltip.test.jsx → ...s/core-react/src/Tooltip/Tooltip.test.tsx
diff --git a/.../core-react/src/Tooltip/Tooltip.tokens.js → .../core-react/src/Tooltip/Tooltip.tokens.ts b/.../core-react/src/Tooltip/Tooltip.tokens.js → .../core-react/src/Tooltip/Tooltip.tokens.ts
@@ -1,12 +1,13 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
+import type { Typography, Spacing } from '@equinor/eds-tokens'
 
 const {
   colors: {
     ui: {
       background__overlay: { rgba: background },
     },
   },
+  typography: { ui },
   spacings: {
     comfortable: { small: spacingSmall },
   },
@@ -15,12 +16,52 @@ const {
   },
 } = tokens
 
-export const tooltip = {
+export type Placement = {
+  arrowLeft?: string
+  arrowTop?: string
+  arrowRight?: string
+  arrowBottom?: string
+  tooltipBottom?: string | number
+  tooltipRight?: number | string
+  tooltipLeft?: number | string
+  tooltipTop?: string | number
+  arrowTransform?: string
+  transform?: string
+  width?: string
+}
+
+export type Tooltip = {
+  typography: Typography
+  background: string
+  tooltip: {
+    minHeight: string
+  }
+  arrow: {
+    width: string
+    height: string
+  }
+  spacings: Spacing
+  borderRadius: string
+  placement: {
+    bottom: Placement
+    bottomRight: Placement
+    bottomLeft: Placement
+    top: Placement
+    topRight: Placement
+    topLeft: Placement
+    left: Placement
+    leftTop: Placement
+    leftBottom: Placement
+    right: Placement
+    rightTop: Placement
+    rightBottom: Placement
+  }
+}
+
+export const tooltip: Tooltip = {
   typography: {
+    ...ui.tooltip,
     color: '#fff',
-    fontFamily: 'Equinor',
-    fontSize: '12px',
-    lineHeight: '16px',
   },
   background,
   tooltip: {

diff --git a/libraries/core-react/src/Tooltip/Tooltip.jsx → libraries/core-react/src/Tooltip/Tooltip.tsx b/libraries/core-react/src/Tooltip/Tooltip.jsx → libraries/core-react/src/Tooltip/Tooltip.tsx
@@ -1,17 +1,24 @@
-// @ts-nocheck
-import React, { forwardRef, useState } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, useState, HTMLAttributes, ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 import { spacingsTemplate, typographyTemplate } from '../_common/templates'
-import { tooltip as tokens } from './Tooltip.tokens'
+import { tooltip as tokens, Placement } from './Tooltip.tokens'
+import CSS from 'csstype'
 
 const Wrapper = styled.div`
   position: relative;
   display: inline-flex;
   justify-content: center;
 `
 
-const StyledTooltipWrapper = styled.div`
+type WrapperProps = {
+  top: string | number
+  bottom: string | number
+  right: string | number
+  left: string | number
+  transform: string
+}
+
+const StyledTooltipWrapper = styled.div<WrapperProps>`
   ${({ top, bottom, right, left, transform }) =>
     css`
       bottom: ${bottom};
@@ -40,7 +47,14 @@ const StyledTooltip = styled.div`
   position: relative;
 `
 
-const TooltipArrow = styled.svg`
+type ArrowProps = {
+  top: string
+  bottom: string
+  right: string
+  left: string
+} & HTMLAttributes<SVGSVGElement>
+
+const TooltipArrow = styled.svg<ArrowProps>`
   ${({ top, bottom, right, left }) =>
     css`
       bottom: ${bottom};
@@ -54,9 +68,39 @@ const TooltipArrow = styled.svg`
   fill: inherit;
   `
 
+type Props = {
+  /* Tooltip placement relative to anchor */
+  placement?:
+    | 'topLeft'
+    | 'top'
+    | 'topRight'
+    | 'rightTop'
+    | 'right'
+    | 'rightBottom'
+    | 'bottomLeft'
+    | 'bottom'
+    | 'bottomRight'
+    | 'leftTop'
+    | 'left'
+    | 'leftBottom'
+  /* For controlled Tooltip */
+  open?: boolean
+  /* Tooltip title */
+  title?: string
+  /** Tooltip reference/anchor element */
+  children: ReactNode
+} & HTMLAttributes<HTMLDivElement>
+
 // Controller for TooltipItem
-export const Tooltip = forwardRef(function Tooltip(
-  { className, title, children, placement, open, ...rest },
+export const Tooltip = forwardRef<HTMLDivElement, Props>(function Tooltip(
+  {
+    className,
+    title = '',
+    children,
+    placement = 'bottom',
+    open = false,
+    ...rest
+  },
   ref,
 ) {
   const [openState, setOpenState] = useState(open)
@@ -75,21 +119,25 @@ export const Tooltip = forwardRef(function Tooltip(
     ref,
   }
 
+  const placementToken: Placement = tokens.placement[placement]
+
   const wrapperProps = {
-    right: tokens.placement[placement].tooltipRight,
-    top: tokens.placement[placement].tooltipTop,
-    bottom: tokens.placement[placement].tooltipBottom,
-    left: tokens.placement[placement].tooltipLeft,
-    transform: tokens.placement[placement].transform,
+    right: placementToken.tooltipRight,
+    top: placementToken.tooltipTop,
+    bottom: placementToken.tooltipBottom,
+    left: placementToken.tooltipLeft,
+    transform: placementToken.transform,
   }
 
   const arrowProps = {
-    left: tokens.placement[placement].arrowLeft,
-    right: tokens.placement[placement].arrowRight,
-    top: tokens.placement[placement].arrowTop,
-    bottom: tokens.placement[placement].arrowBottom,
+    left: placementToken.arrowLeft,
+    right: placementToken.arrowRight,
+    top: placementToken.arrowTop,
+    bottom: placementToken.arrowBottom,
+  }
+  const arrowStyle: CSS.Properties = {
+    transform: `${placementToken.arrowTransform}`,
   }
-
   return (
     <Wrapper {...props}>
       <div
@@ -111,12 +159,7 @@ export const Tooltip = forwardRef(function Tooltip(
           {...wrapperProps}
         >
           <StyledTooltip>
-            <TooltipArrow
-              {...arrowProps}
-              style={{
-                transform: `${tokens.placement[placement].arrowTransform}`,
-              }}
-            >
+            <TooltipArrow {...arrowProps} style={arrowStyle}>
               <path d="M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z" />
             </TooltipArrow>
             {title}
@@ -128,36 +171,3 @@ export const Tooltip = forwardRef(function Tooltip(
 })
 
 Tooltip.displayName = 'eds-tooltip'
-
-Tooltip.propTypes = {
-  // Tooltip placement relative to anchor
-  placement: PropTypes.oneOf([
-    'topLeft',
-    'top',
-    'topRight',
-    'rightTop',
-    'right',
-    'rightBottom',
-    'bottomLeft',
-    'bottom',
-    'bottomRight',
-    'leftTop',
-    'left',
-    'leftBottom',
-  ]),
-  // Tooltip title
-  title: PropTypes.string,
-  // For controlled Tooltip
-  open: PropTypes.bool,
-  /** Tooltip reference/anchor element */
-  children: PropTypes.node.isRequired,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-Tooltip.defaultProps = {
-  open: false,
-  placement: 'bottom',
-  title: '',
-  className: '',
-}
diff --git a/libraries/core-react/src/Tooltip/index.js → libraries/core-react/src/Tooltip/index.ts b/libraries/core-react/src/Tooltip/index.js → libraries/core-react/src/Tooltip/index.ts
@@ -1,2 +1 @@
-// @ts-nocheck
 export { Tooltip } from './Tooltip'