@channel.io/bezier-react 1.6.2 → 1.7.1

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,105 +1,66 @@
 import React from 'react'
 
+import { TranslateIcon } from '@channel.io/bezier-icons'
 import {
   type Meta,
   type Story,
 } from '@storybook/react'
 import { base } from 'paths.macro'
 
-import { styled } from '~/src/foundation'
+import {
+  getObjectFromEnum,
+  getTitle,
+} from '~/src/utils/storyUtils'
 
-import { getTitle } from '~/src/utils/storyUtils'
+import { Button } from '~/src/components/Button'
 
-import Tooltip from './Tooltip'
-import type TooltipProps from './Tooltip.types'
-import { TooltipPosition } from './Tooltip.types'
+import {
+  Tooltip,
+  TooltipProvider,
+} from './Tooltip'
+import {
+  TooltipPosition,
+  type TooltipProps,
+} from './Tooltip.types'
 
 export default {
   title: getTitle(base),
   component: Tooltip,
+  subcomponents: { TooltipProvider },
   argTypes: {
-    content: {
-      control: {
-        type: 'text',
-      },
-    },
-    placement: {
-      control: {
-        type: 'radio',
-        options: [
-          TooltipPosition.TopCenter,
-          TooltipPosition.TopLeft,
-          TooltipPosition.TopRight,
-          TooltipPosition.RightCenter,
-          TooltipPosition.RightTop,
-          TooltipPosition.RightBottom,
-          TooltipPosition.BottomCenter,
-          TooltipPosition.BottomLeft,
-          TooltipPosition.BottomRight,
-          TooltipPosition.LeftCenter,
-          TooltipPosition.LeftTop,
-          TooltipPosition.LeftBottom,
-        ],
-      },
-    },
     offset: {
       control: {
         type: 'range',
-        min: 0,
-        max: 50,
-        step: 1,
-      },
-    },
-    delayShow: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 5000,
-        step: 100,
       },
     },
-    delayHide: {
+    placement: {
       control: {
-        type: 'range',
-        min: 0,
-        max: 5000,
-        step: 100,
+        type: 'select',
+        options: getObjectFromEnum(TooltipPosition),
       },
     },
   },
-} as Meta
-
-const Target = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 40px;
-  background-color: ${props => props.foundation?.theme?.['bg-black-dark']};
-  border-radius: 4px;
-`
+} as Meta<TooltipProps>
 
-const Template: Story<TooltipProps> = (props) => (
-  <Tooltip
-    {...props}
-  >
-    <Target>
-      Target
-    </Target>
+const Template: Story<TooltipProps> = ({ children, ...rest }) => (
+  <Tooltip {...rest}>
+    { children }
   </Tooltip>
 )
 
 export const Primary = Template.bind({})
 
 Primary.args = {
-  // eslint-disable-next-line max-len
-  content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
-  lazy: true,
+  defaultShow: false,
   placement: TooltipPosition.BottomCenter,
   offset: 4,
   disabled: false,
-  keepInContainer: false,
+  keepInContainer: true,
   allowHover: false,
   delayShow: 0,
   delayHide: 0,
+  children: (<Button text="Button" />),
+  content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  icon: TranslateIcon,
 }

package/src/components/Tooltip/Tooltip.styled.ts

@@ -1,46 +1,136 @@
 import {
   LineHeightAbsoluteNumber,
+  TransitionDuration,
+  Typography,
   css,
   ellipsis,
+  keyframes,
   styled,
 } from '~/src/foundation'
 
 import { ZIndex } from '~/src/constants/ZIndex'
-import type { InterpolationProps } from '~/src/types/Foundation'
 
-interface ContentWrapperProps {
-  disabled: boolean
-}
+import { AlphaStack } from '~/src/components/AlphaStack'
+import {
+  Icon as BaseIcon,
+  IconSize,
+} from '~/src/components/Icon'
+import { Text } from '~/src/components/Text'
+
+import { type TooltipProps } from './Tooltip.types'
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
 
-export const Container = styled.div`
-  position: relative;
+  to {
+    opacity: 1;
+  }
+`
+
+const SLIDE_OFFSET = 2
+
+const slideUp = keyframes`
+  from {
+    transform: translateY(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`
+
+const slideRight = keyframes`
+  from {
+    transform: translateX(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`
+
+const slideDown = keyframes`
+  from {
+    transform: translateY(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`
+
+const slideLeft = keyframes`
+  from {
+    transform: translateX(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
 `
-export const ContentWrapper = styled.div<ContentWrapperProps>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: ${ZIndex.Tooltip};
 
-  ${({ disabled }) => disabled && css`
-    display: none;
-  `}
+const getSlideAnimation = (frames: ReturnType<typeof keyframes>) => css`
+  animation-name: ${() => frames}, ${() => fadeIn};
+  animation-duration: ${TransitionDuration.M}ms;
+  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
 `
 
-export const Content = styled.div<InterpolationProps>`
+export const TooltipContent = styled(AlphaStack).attrs({
+  direction: 'horizontal',
+  spacing: 4,
+})<TooltipProps>`
+  z-index: ${ZIndex.Tooltip};
+
   box-sizing: border-box;
   width: max-content;
   max-width: 260px;
   height: max-content;
-  padding: 8px 14px;
-  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
+  padding: 5px 8px;
   word-break: normal;
   word-wrap: break-word;
-  ${({ foundation }) => foundation?.elevation?.ev2(true)};
+
+  ${({ foundation }) => foundation?.elevation?.ev3(true)};
   ${({ foundation }) => foundation?.rounding?.round8};
 
+  &[data-side="top"] {
+    ${getSlideAnimation(slideUp)}
+  }
+
+  &[data-side="right"] {
+    ${getSlideAnimation(slideRight)}
+  }
+
+  &[data-side="bottom"] {
+    ${getSlideAnimation(slideDown)}
+  }
+
+  &[data-side="left"] {
+    ${getSlideAnimation(slideLeft)}
+  }
+
   ${({ interpolation }) => interpolation}
 `
 
-export const EllipsisableContent = styled.div`
+export const TextContainer = styled.div`
+  overflow: hidden;
+`
+
+export const Content = styled(Text).attrs({ typo: Typography.Size13 })`
+  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
+  /* NOTE: Line height of Typography.Size13  */
   ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}
+  white-space: pre-wrap;
+`
+
+export const Description = styled(Text).attrs({ typo: Typography.Size12 })`
+  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-dark']};
+`
+
+export const Icon = styled(BaseIcon).attrs({
+  size: IconSize.XS,
+})`
+  padding: 1px;
+  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
 `

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,99 +1,172 @@
 import React from 'react'
 
-import { fireEvent } from '@testing-library/dom'
-import { act } from '@testing-library/react'
-
-import { css } from '~/src/foundation'
+import {
+  isInaccessible,
+  waitFor,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/testUtils'
 
-import Tooltip, {
-  TOOLTIP_CONTENT_TEST_ID,
-  TOOLTIP_TEST_ID,
+import {
+  Tooltip,
+  TooltipProvider,
 } from './Tooltip'
-import type TooltipProps from './Tooltip.types'
-
-const RootTooltip: React.FC<TooltipProps> = ({ children, ...rests }) => (
-  <Tooltip {...rests}>
-    { children }
-  </Tooltip>
-)
-
-describe('Tooltip test >', () => {
-  let props: TooltipProps
+import {
+  type TooltipProps,
+  type TooltipProviderProps,
+} from './Tooltip.types'
+
+describe('Tooltip', () => {
+  const renderTooltip = ({
+    children,
+    ...rest
+  }: TooltipProps = {}) => render(
+    <Tooltip {...rest}>
+      <button type="button">
+        Trigger
+      </button>
+    </Tooltip>,
+  )
 
-  const content = 'Hovered'
+  let user: ReturnType<typeof userEvent.setup>
 
   beforeEach(() => {
-    props = {
-      children: 'Text',
-      content,
-    }
-
-    jest.useFakeTimers()
+    user = userEvent.setup()
   })
 
-  afterEach(() => {
-    jest.useRealTimers()
-  })
+  describe('ARIA', () => {
+    it('should be accessible', () => {
+      const { container } = renderTooltip({ defaultShow: true })
+      expect(isInaccessible(container)).toBe(false)
+    })
 
-  const renderTooltip = (optionProps?: TooltipProps) => render(
-    <RootTooltip {...props} {...optionProps} />,
-  )
+    it('The element that serves as the tooltip container has role `tooltip`.', () => {
+      const { getByRole } = renderTooltip({ defaultShow: true })
+      expect(getByRole('tooltip')).toBeInTheDocument()
+    })
 
-  it('Tooltip with default props', () => {
-    const { baseElement, getByTestId } = renderTooltip()
+    it('The element that triggers the tooltip references the tooltip element with `aria-describedby`.', () => {
+      const { getByRole } = renderTooltip({ defaultShow: true })
+      expect(getByRole('button')).toHaveAttribute('aria-describedby', getByRole('tooltip').id)
+    })
+  })
 
-    act(() => {
-      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+  describe('User Interactions', () => {
+    it('The tooltip content should be visible when hover over the trigger.', async () => {
+      const { getByRole } = renderTooltip()
+      await user.hover(getByRole('button'))
+      expect(getByRole('tooltip')).toBeInTheDocument()
+    })
 
-      jest.runAllTimers()
+    it('The tooltip content should be visible when the keyboard focuses on the trigger.', async () => {
+      const { getByRole } = renderTooltip()
+      await user.tab()
+      expect(getByRole('tooltip')).toBeInTheDocument()
     })
 
-    expect(baseElement).toMatchSnapshot()
-  })
+    it('When the tooltip content is visible, pressing Esc should hide the tooltip content.', async () => {
+      const { queryByRole } = renderTooltip({ defaultShow: true })
+      await user.keyboard('{Escape}')
+      expect(queryByRole('tooltip')).not.toBeInTheDocument()
+    })
 
-  it('Tooltip with contentInterpolation prop', async () => {
-    const { baseElement, getByTestId } = renderTooltip({
-      contentInterpolation: css`background-color: black;`,
+    it('When the `allowHover` property is true, the tooltip content should be hoverable.', async () => {
+      const { getByRole } = renderTooltip({ allowHover: true })
+      await user.hover(getByRole('button'))
+      await user.hover(getByRole('tooltip'))
+      expect(getByRole('tooltip')).toBeInTheDocument()
     })
 
-    act(() => {
-      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+    it('When the tooltip is visible, the `onShow` handler should be called.', async () => {
+      const onShow = jest.fn()
+      const { getByRole } = renderTooltip({ onShow })
+      await user.hover(getByRole('button'))
+      expect(onShow).toHaveBeenCalled()
+    })
 
-      jest.runAllTimers()
+    it('When the tooltip is hidden, the `onHide` handler should be called.', async () => {
+      const onHide = jest.fn()
+      const { getByRole } = renderTooltip({ onHide })
+      await user.hover(getByRole('button'))
+      await user.unhover(getByRole('button'))
+      expect(onHide).toHaveBeenCalled()
     })
 
-    expect(baseElement).toMatchSnapshot()
-  })
+    it('If the `disabled` property is true, the tooltip should not be visible when hovering over it or with keyboard focus.', async () => {
+      const { getByRole, queryByRole } = renderTooltip({ disabled: true })
+      await user.hover(getByRole('button'))
+      expect(queryByRole('tooltip')).not.toBeInTheDocument()
+      await user.tab()
+      expect(queryByRole('tooltip')).not.toBeInTheDocument()
+    })
 
-  it('TooltipContent not rendered at first', async () => {
-    const { queryByTestId } = renderTooltip()
+    it('If the `delayShow` property is greater than 0, the tooltip should be delayed by that number of ms before appearing.', async () => {
+      const { getByRole, queryByRole } = renderTooltip({ delayShow: 1000 })
+      await user.hover(getByRole('button'))
+      expect(queryByRole('tooltip')).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(queryByRole('tooltip')).toBeInTheDocument()
+      }, { timeout: 1000 })
+    })
 
-    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeNull()
+    it('If the `delayHide` property is greater than 0, the tooltip should be delayed by that number of ms before disappearing.', async () => {
+      const { getByRole, queryByRole } = renderTooltip({ delayHide: 1000 })
+      await user.hover(getByRole('button'))
+      await user.unhover(getByRole('button'))
+      expect(queryByRole('tooltip')).toBeInTheDocument()
+      await waitFor(() => {
+        expect(queryByRole('tooltip')).not.toBeInTheDocument()
+      }, { timeout: 1000 })
+    })
   })
+})
 
-  it('TooltipContent rendered after mouseover', async () => {
-    const { getByTestId, queryByTestId } = renderTooltip()
-
-    act(() => {
-      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+describe('TooltipProvider', () => {
+  const renderTooltipProvider = ({
+    children,
+    ...rest
+  }: TooltipProviderProps = {}) => render(
+    <TooltipProvider {...rest}>
+      <Tooltip>
+        <button type="button">
+          Trigger
+        </button>
+      </Tooltip>
+    </TooltipProvider>,
+  )
 
-      jest.runAllTimers()
-    })
+  let user: ReturnType<typeof userEvent.setup>
 
-    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeVisible()
+  beforeEach(() => {
+    user = userEvent.setup()
   })
 
-  it('Tooltip with disabled prop not rendered even after mouseover', async () => {
-    const { getByTestId, queryByTestId } = renderTooltip({ disabled: true })
-
-    act(() => {
-      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+  describe('User Interactions', () => {
+    it('If the `allowHover` property is true, the tooltip content should be hoverable.', async () => {
+      const { getByRole } = renderTooltipProvider({ allowHover: true })
+      await user.hover(getByRole('button'))
+      await user.hover(getByRole('tooltip'))
+      expect(getByRole('tooltip')).toBeInTheDocument()
+    })
 
-      jest.runAllTimers()
+    it('If the `delayShow` property is greater than 0, the tooltip should be delayed by that number of ms before appearing.', async () => {
+      const { getByRole, queryByRole } = renderTooltipProvider({ delayShow: 1000 })
+      await user.hover(getByRole('button'))
+      expect(queryByRole('tooltip')).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(queryByRole('tooltip')).toBeInTheDocument()
+      }, { timeout: 1000 })
     })
 
-    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeNull()
+    it('If the `delayHide` property is greater than 0, the tooltip should be delayed by that number of ms before disappearing.', async () => {
+      const { getByRole, queryByRole } = renderTooltipProvider({ delayHide: 1000 })
+      await user.hover(getByRole('button'))
+      await user.unhover(getByRole('button'))
+      expect(queryByRole('tooltip')).toBeInTheDocument()
+      await waitFor(() => {
+        expect(queryByRole('tooltip')).not.toBeInTheDocument()
+      }, { timeout: 1000 })
+    })
   })
 })