♻️ Tooltip story to Typescript (#804)

* ♻️ JSX to TSX * 🔥 Removed knobs * ♻️ Refactor Tooltip story to TSX * 📝 Added descriptions to prop table
equinor · Nov 13, 2020 · c2b3b1e · c2b3b1e
1 parent 55c44e4
commit c2b3b1e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 141 deletions.
diff --git a/...orybook-react/stories/Tooltip.stories.jsx → ...orybook-react/stories/Tooltip.stories.tsx b/...orybook-react/stories/Tooltip.stories.jsx → ...orybook-react/stories/Tooltip.stories.tsx
@@ -1,17 +1,12 @@
 import React from 'react'
-import { withKnobs, select, text } from '@storybook/addon-knobs'
 import styled from 'styled-components'
 import {
   Tooltip,
+  TooltipProps,
   Typography,
   Button,
-  Icon,
-  Avatar,
-  Chip,
-  TextField,
-  Search,
 } from '@equinor/eds-core-react'
-import catImg from '../images/cat.jpg'
+import { Story, Meta } from '@storybook/react'
 
 const Body = styled.div`
   margin: 42px;
@@ -34,10 +29,24 @@ const TextWrapper = styled.div`
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
-  decorators: [withKnobs],
+  argTypes: {
+    title: {
+      defaultValue: 'Tooltip title',
+    },
+  },
+} as Meta
+
+export const Default: Story<TooltipProps> = (args) => {
+  return (
+    <div style={{ margin: '3rem' }}>
+      <Tooltip {...args}>
+        <Button>Hover me!</Button>
+      </Tooltip>
+    </div>
+  )
 }
 
-export function Placement() {
+export const Placement: Story<TooltipProps> = () => {
   return (
     <Body>
       <TextWrapper>
@@ -99,62 +108,7 @@ export function Placement() {
   )
 }
 
-const ANCHOR_CHOICES = {
-  button: <Button variant="ghost">Button</Button>,
-  avatar: <Avatar src={catImg} size={48} alt="avatar" />,
-  chip: <Chip>Chip</Chip>,
-  search: (
-    <Search aria-label="sitewide" id="search-normal" placeholder="Search" />
-  ),
-  textfield: (
-    <TextField
-      id="textfield-normal"
-      placeholder="Placeholder text"
-      label="Text"
-      helperText="Helper text"
-    />
-  ),
-  typography: <Typography variant="h3">Typography</Typography>,
-  icon: <Icon name="work" color={'red'} />,
-}
-
-export const WithKnobs = () => {
-  const anchor = select('Anchor', Object.keys(ANCHOR_CHOICES), 'avatar')
-  const title = text('Title', 'Title')
-  const placement = select(
-    'Placement',
-    [
-      'topLeft',
-      'top',
-      'topRight',
-      'rightTop',
-      'right',
-      'rightBottom',
-      'bottomLeft',
-      'bottom',
-      'bottomRight',
-      'leftTop',
-      'left',
-      'leftBottom',
-    ],
-    'bottom',
-  )
-
-  return (
-    <Body>
-      <TextWrapper>
-        <Typography variant="h3">With knobs</Typography>
-      </TextWrapper>
-      <Wrapper>
-        <Tooltip open title={title} placement={placement}>
-          {ANCHOR_CHOICES[anchor]}
-        </Tooltip>
-      </Wrapper>
-    </Body>
-  )
-}
-
-export function WithDisabledElements() {
+export const WithDisabledElements: Story<TooltipProps> = () => {
   return (
     <Body>
       <TextWrapper>

diff --git a/libraries/core-react/src/Tooltip/Tooltip.tsx b/libraries/core-react/src/Tooltip/Tooltip.tsx
@@ -68,8 +68,8 @@ const TooltipArrow = styled.svg<ArrowProps>`
   fill: inherit;
   `
 
-type Props = {
-  /* Tooltip placement relative to anchor */
+export type TooltipProps = {
+  /** Tooltip placement relative to anchor */
   placement?:
     | 'topLeft'
     | 'top'
@@ -83,91 +83,93 @@ type Props = {
     | 'leftTop'
     | 'left'
     | 'leftBottom'
-  /* For controlled Tooltip */
+  /** For controlled Tooltip */
   open?: boolean
-  /* Tooltip title */
+  /** Tooltip title */
   title?: string
   /** Tooltip reference/anchor element */
   children: ReactNode
 } & HTMLAttributes<HTMLDivElement>
 
 // Controller for TooltipItem
-export const Tooltip = forwardRef<HTMLDivElement, Props>(function Tooltip(
-  {
-    className,
-    title = '',
-    children,
-    placement = 'bottom',
-    open = false,
-    ...rest
-  },
-  ref,
-) {
-  const [openState, setOpenState] = useState(open)
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(
+    {
+      className,
+      title = '',
+      children,
+      placement = 'bottom',
+      open = false,
+      ...rest
+    },
+    ref,
+  ) {
+    const [openState, setOpenState] = useState(open)
 
-  const handleOpen = () => {
-    setOpenState(true)
-  }
+    const handleOpen = () => {
+      setOpenState(true)
+    }
 
-  const handleClose = () => {
-    setOpenState(false)
-  }
+    const handleClose = () => {
+      setOpenState(false)
+    }
 
-  const props = {
-    ...rest,
-    className,
-    ref,
-  }
+    const props = {
+      ...rest,
+      className,
+      ref,
+    }
 
-  const placementToken: Placement = tokens.placement[placement]
+    const placementToken: Placement = tokens.placement[placement]
 
-  const wrapperProps = {
-    right: placementToken.tooltipRight,
-    top: placementToken.tooltipTop,
-    bottom: placementToken.tooltipBottom,
-    left: placementToken.tooltipLeft,
-    transform: placementToken.transform,
-  }
+    const wrapperProps = {
+      right: placementToken.tooltipRight,
+      top: placementToken.tooltipTop,
+      bottom: placementToken.tooltipBottom,
+      left: placementToken.tooltipLeft,
+      transform: placementToken.transform,
+    }
 
-  const arrowProps = {
-    left: placementToken.arrowLeft,
-    right: placementToken.arrowRight,
-    top: placementToken.arrowTop,
-    bottom: placementToken.arrowBottom,
-  }
-  const arrowStyle: CSS.Properties = {
-    transform: `${placementToken.arrowTransform}`,
-  }
-  return (
-    <Wrapper {...props}>
-      <div
-        onMouseOver={handleOpen}
-        onMouseEnter={handleOpen}
-        onPointerEnter={handleOpen}
-        onPointerLeave={handleClose}
-        onMouseOut={handleClose}
-        onMouseLeave={handleClose}
-        onBlur={handleClose}
-        onFocus={handleOpen}
-      >
-        {children}
-      </div>
-      {openState && (
-        <StyledTooltipWrapper
-          style={{ justifySelf: 'center' }}
-          role="tooltip"
-          {...wrapperProps}
+    const arrowProps = {
+      left: placementToken.arrowLeft,
+      right: placementToken.arrowRight,
+      top: placementToken.arrowTop,
+      bottom: placementToken.arrowBottom,
+    }
+    const arrowStyle: CSS.Properties = {
+      transform: `${placementToken.arrowTransform}`,
+    }
+    return (
+      <Wrapper {...props}>
+        <div
+          onMouseOver={handleOpen}
+          onMouseEnter={handleOpen}
+          onPointerEnter={handleOpen}
+          onPointerLeave={handleClose}
+          onMouseOut={handleClose}
+          onMouseLeave={handleClose}
+          onBlur={handleClose}
+          onFocus={handleOpen}
         >
-          <StyledTooltip>
-            <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}
-          </StyledTooltip>
-        </StyledTooltipWrapper>
-      )}
-    </Wrapper>
-  )
-})
+          {children}
+        </div>
+        {openState && (
+          <StyledTooltipWrapper
+            style={{ justifySelf: 'center' }}
+            role="tooltip"
+            {...wrapperProps}
+          >
+            <StyledTooltip>
+              <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}
+            </StyledTooltip>
+          </StyledTooltipWrapper>
+        )}
+      </Wrapper>
+    )
+  },
+)
 
 // Tooltip.displayName = 'eds-tooltip'
diff --git a/libraries/core-react/src/Tooltip/index.ts b/libraries/core-react/src/Tooltip/index.ts
@@ -1 +1 @@
-export { Tooltip } from './Tooltip'
+export * from './Tooltip'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -19,7 +19,7 @@ export { Chip } from './Chip'
 export * from './Avatar'
 export * from './Search'
 export { Slider } from './Slider'
-export { Tooltip } from './Tooltip'
+export * from './Tooltip'
 export { Snackbar } from './Snackbar'
 export * from './Popover'
 export * from './Banner'