feat(tooltip): add component

components/index.ts

@@ -45,3 +45,4 @@ export { default as Textarea } from './textarea'
 export { default as Table } from './table'
 export { default as Toggle } from './toggle'
 export { default as Snippet } from './snippet'
+export { default as Tooltip } from './tooltip'

components/tooltip/index.ts

@@ -0,0 +1,3 @@
+import Tooltip from './tooltip'
+
+export default Tooltip

components/tooltip/placement.ts

@@ -0,0 +1,172 @@
+import { Placement } from '../utils/prop-types'
+
+interface ParentDomRect {
+  top: number
+  left: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface TooltipPosition {
+  top: string
+  left: string
+  transform: string
+}
+
+export const defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none',
+}
+
+export interface TooltipIconPosition {
+  top: string
+  left: string
+  right: string
+  bottom: string
+  transform: string
+}
+
+export const getPosition = (
+  placement: Placement,
+  rect: ParentDomRect,
+  offset: number,
+): TooltipPosition => {
+  const positions: { [key in Placement]: TooltipPosition } = {
+    top: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: 'translate(-50%, -100%)',
+    },
+    topStart: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left}px`,
+      transform: 'translate(0, -100%)',
+    },
+    topEnd: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: 'translate(-100%, -100%)',
+    },
+    bottom: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: 'translate(-50%, 0)',
+    },
+    bottomStart: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left}px`,
+      transform: 'translate(0, 0)',
+    },
+    bottomEnd: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: 'translate(-100%, 0)',
+    },
+    left: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, -50%)',
+    },
+    leftStart: {
+      top: `${rect.top}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, 0)',
+    },
+    leftEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, -100%)',
+    },
+    right: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, -50%)',
+    },
+    rightStart: {
+      top: `${rect.top}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, 0)',
+    },
+    rightEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, -100%)',
+    },
+  }
+  return positions[placement] || positions.top as TooltipPosition
+}
+
+export const getIconPosition = (
+  placement: Placement,
+  offset: number,
+): TooltipIconPosition => {
+  const positions: { [key in Placement]?: TooltipIconPosition } = {
+    top: {
+      top: 'auto', right: 'auto',
+      left: '50%', bottom: `${offset}px`,
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
+    },
+    topStart: {
+      top: 'auto', right: 'auto',
+      left: '5%', bottom: `${offset}px`,
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    topEnd: {
+      top: 'auto', right: '5%',
+      left: 'auto', bottom: `${offset}px`,
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    bottom: {
+      top: `${offset}px`, right: 'auto',
+      left: '50%', bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
+    },
+    bottomStart: {
+      top: `${offset}px`, right: 'auto',
+      left: '5%', bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    bottomEnd: {
+      top: `${offset}px`, right: '5%',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    left: {
+      top: '50%', right: '0',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftStart: {
+      top: '10%', right: '0',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(100%, 0) rotate(180deg)'
+    },
+    leftEnd: {
+      top: 'auto', right: '0',
+      left: 'auto', bottom: '10%',
+      transform: 'translate(100%, 0) rotate(180deg)'
+    },
+    right: {
+      top: '50%', right: 'auto',
+      left: '0', bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightStart: {
+      top: '10%', right: 'auto',
+      left: '0', bottom: 'auto',
+      transform: 'translate(-100%, 0) rotate(0deg)'
+    },
+    rightEnd: {
+      top: 'auto', right: 'auto',
+      left: '0', bottom: '10%',
+      transform: 'translate(-100%, 0) rotate(0deg)'
+    },
+  }
+  
+  return positions[placement] || positions.top as TooltipIconPosition
+}
+
+

components/tooltip/tooltip-content.tsx

@@ -0,0 +1,110 @@
+import React, { MutableRefObject, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import useTheme from '../styles/use-theme'
+import usePortal from '../utils/use-portal'
+import useResize from '../utils/use-resize'
+import CSSTransition from '../shared/css-transition'
+import useClickAnyWhere from '../utils/use-click-anywhere'
+import { getPosition, TooltipPosition, defaultTooltipPosition } from './placement'
+import TooltipIcon from './tooltip-icon'
+import { Placement } from '../utils/prop-types'
+
+interface Props {
+  parent?: MutableRefObject<HTMLElement | null> | undefined
+  placement: Placement
+  visible: boolean
+  offset: number
+  bgColor: string
+}
+
+interface ReactiveDomReact {
+  top: number
+  bottom: number
+  left: number
+  right: number
+  width: number
+  height: number
+}
+
+const defaultRect: ReactiveDomReact = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  bottom: -1000,
+  width: 0,
+  height: 0,
+}
+
+const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {
+  if (!ref || !ref.current) return defaultRect
+  const rect = ref.current.getBoundingClientRect()
+  return {
+    ...rect,
+    width: rect.width || (rect.right - rect.left),
+    height: rect.height || (rect.bottom - rect.top),
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft,
+  }
+}
+
+const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
+  children, parent, visible, offset, placement, bgColor,
+}) => {
+  const theme = useTheme()
+  const el = usePortal('tooltip')
+  const selfRef = useRef<HTMLDivElement>(null)
+  const [rect, setRect] = useState<TooltipPosition>(defaultTooltipPosition)
+  if (!parent) return null
+
+  const updateRect = () => {
+    const position = getPosition(placement, getRect(parent), offset)
+    setRect(position)
+  }
+
+  useResize(updateRect)
+  useClickAnyWhere(() => updateRect())
+
+  const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    event.nativeEvent.stopImmediatePropagation()
+  }
+
+  if (!el) return null
+  return createPortal((
+    <CSSTransition visible={visible}>
+      <div className="tooltip-content" ref={selfRef}
+        onClick={preventHandler}
+        onMouseEnter={preventHandler}
+        onMouseLeave={preventHandler}>
+        <div className="inner">
+          <TooltipIcon placement={placement} bgColor={bgColor} />
+          {children}
+        </div>
+        <style jsx>{`
+        .tooltip-content {
+          position: absolute;
+          width: auto;
+          top: ${rect.top};
+          left: ${rect.left};
+          transform: ${rect.transform};
+          background-color: ${bgColor};
+          color: ${theme.palette.background};
+          border-radius: ${theme.layout.radius};
+          padding: 0;
+          z-index: 1000;
+        }
+        
+        .inner {
+          padding: ${theme.layout.gapHalf} ${theme.layout.gap};
+          position: relative;
+        }
+      `}</style>
+      </div>
+    </CSSTransition>
+  ), el)
+})
+
+export default TooltipContent

components/tooltip/tooltip-icon.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react'
+import { getIconPosition } from './placement'
+import { Placement } from '../utils/prop-types'
+
+interface Props {
+  placement: Placement
+  bgColor: string
+}
+
+const TooltipIcon: React.FC<Props> = ({
+  placement, bgColor,
+}) => {
+  const {
+    transform, top, left, right, bottom,
+  } = useMemo(() => getIconPosition(placement, 3), [placement])
+  
+  return (
+    <span>
+      <style jsx>{`
+        span {
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 6px 7px 6px 0;
+          border-color: transparent ${bgColor} transparent transparent;
+          position: absolute;
+          left: ${left};
+          top: ${top};
+          right: ${right};
+          bottom: ${bottom};
+          transform: ${transform};
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default TooltipIcon

components/tooltip/tooltip.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useRef, useState } from 'react'
+import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
+import TooltipContent from './tooltip-content'
+import useClickAway from '../utils/use-click-away'
+import { ZeitUIThemesPalette } from 'components/styles/themes'
+import { TriggerTypes, Placement, NormalTypes } from '../utils/prop-types'
+
+interface Props {
+  text: string | React.ReactNode
+  type?: NormalTypes
+  placement?: Placement
+  initialVisible?: boolean
+  trigger?: TriggerTypes
+  enterDelay?: number
+  leaveDelay?: number
+  offset?: number
+}
+
+const defaultProps = {
+  initialVisible: false,
+  type: 'default' as NormalTypes,
+  trigger: 'hover' as TriggerTypes,
+  placement: 'top',
+  enterDelay: 100,
+  leaveDelay: 300,
+  offset: 12,
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TooltipProps = Props & typeof defaultProps & NativeAttrs
+
+const getBgColor = (
+  type: NormalTypes,
+  palette: ZeitUIThemesPalette,
+) => {
+  const colors: { [key in NormalTypes ]: string } = {
+    default: palette.foreground,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary,
+  }
+  return colors[type]
+}
+
+const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
+  children, initialVisible, text, offset, placement,
+  enterDelay, leaveDelay, trigger, type,
+}) => {
+  const theme = useTheme()
+  const timer = useRef<number>()
+  const ref = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState<boolean>(initialVisible)
+  const bgColor = useMemo(() => getBgColor(type, theme.palette), [type, theme.palette])
+  
+  const changeVisible = (nextState: boolean) => {
+    const clear = () => {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+    if (nextState) {
+      timer.current = window.setTimeout(() => {
+        setVisible(true)
+        clear()
+      }, enterDelay)
+    } else {
+      clear()
+      timer.current = window.setTimeout(() => {
+        setVisible(false)
+        clear()
+      }, leaveDelay)
+    }
+  }
+  const mouseEventHandler = (nextState: boolean) => {
+    if (trigger !== 'hover') return
+    changeVisible(nextState)
+  }
+  const clickEventHandler = () => {
+    if (trigger !== 'click') return
+    changeVisible(!visible)
+  }
+  
+  useClickAway(ref, () => {
+    if (trigger !== 'click') return
+    changeVisible(false)
+  })
+  
+  return (
+    <div ref={ref} className="tooltip" onClick={clickEventHandler}
+      onMouseEnter={() => mouseEventHandler(true)}
+      onMouseLeave={() => mouseEventHandler(false)}>
+      {children}
+      <TooltipContent parent={ref} visible={visible}
+        offset={offset}
+        bgColor={bgColor}
+        placement={placement}>
+        {text}
+      </TooltipContent>
+      <style jsx>{`
+        .tooltip {
+          width: min-content;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default withDefaults(Tooltip, defaultProps)

components/utils/prop-types.ts

@@ -46,6 +46,26 @@ const copyTypes = tuple(
   'prevent',
 )
 
+const triggerTypes = tuple(
+  'hover',
+  'click',
+)
+
+const placement = tuple(
+  'top',
+  'topStart',
+  'topEnd',
+  'left',
+  'leftStart',
+  'leftEnd',
+  'bottom',
+  'bottomStart',
+  'bottomEnd',
+  'right',
+  'rightStart',
+  'rightEnd',
+)
+
 export type ButtonTypes = typeof buttonTypes[number]
 
 export type NormalSizes = typeof normalSizes[number]
@@ -57,3 +77,7 @@ export type ThemeTypes = typeof themeTypes[number]
 export type SnippetTypes = typeof snippetTypes[number]
 
 export type CopyTypes = typeof copyTypes[number]
+
+export type TriggerTypes = typeof triggerTypes[number]
+
+export type Placement = typeof placement[number]

package.json

@@ -69,4 +69,4 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {}
-}
+}

pages/en-us/components/tooltip.mdx

@@ -0,0 +1,101 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Avatar, Spacer } from 'components'
+
+export const meta = {
+  title: 'avatar',
+  group: 'Data Display',
+}
+
+## Avatar
+
+Avatars represent a user or a team. Stacked avatars represent a group of people.
+
+
+<Playground
+  desc="The `Avatar` contains circle and square."
+  scope={{ Avatar, Spacer }}
+  code={`
+() => {
+  const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
+  return (
+    <>
+      <Avatar src={url} />
+      <Avatar src={url} />
+      <Avatar src={url} />
+      <Avatar src={url} />
+      <Spacer y={.5} />
+      <Avatar src={url} isSquare />
+      <Avatar src={url} isSquare />
+      <Avatar src={url} isSquare />
+      <Avatar src={url} isSquare />
+    </>
+  )
+}
+`} />
+
+
+<Playground
+ title="Sizes"
+ desc="You can specify different sizes of `Avatar`."
+ scope={{ Avatar }}
+ code={`
+() => {
+  const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
+  return (
+    <>
+      <Avatar src={url} size="mini" />
+      <Avatar src={url} size="small" />
+      <Avatar src={url} size="medium" />
+      <Avatar src={url} size="large" />
+    </>
+  )
+}
+`} />
+
+<Playground
+  title="Text"
+  desc="Display text in the avatar box."
+  scope={{ Avatar }}
+  code={`
+<>
+  <Avatar text="W" />
+  <Avatar text="A" />
+  <Avatar text="W" />
+  <Avatar text="Joe" />
+</>
+`} />
+
+
+<Playground
+  title="Stacked"
+  desc="Multiple avatars can overlap and stack together."
+  scope={{ Avatar }}
+  code={`
+() => {
+  const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
+  return (
+    <>
+      <Avatar src={url} stacked />
+      <Avatar src={url} stacked />
+      <Avatar src={url} stacked />
+      <Avatar src={url} stacked />
+    </>
+  )
+}
+`} />
+
+<Attributes edit="/pages/docs/components/avatar.mdx">
+<Attributes.Title>Avatar.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **src** | image src | `string` | - | - |
+| **stacked** | stacked display group | `boolean` | - | `false` |
+| **text** | display text when image is missing | `string` | - | - |
+| **size** | avatar size | `string` / `number` | `'mini', 'small', 'medium', 'large', number` | `medium` |
+| **isSquare** | avatar shape | `boolean` | - | `false` |
+| ... | native props | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>