@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/structure/Splash.stories.tsx

@@ -0,0 +1,24 @@
+import type * as React from 'react'
+import { Splash as SplashComponent } from './Splash'
+import { Box } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Splash',
+  decorators: [
+    Story => (
+      <Box height="20rem" width="100%">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof SplashComponent>> = args => (
+  <SplashComponent {...args} />
+)
+export const Splash = Template.bind({})
+Splash.args = {
+  iconName: 'ot-logo',
+}

package/src/structure/Splash.tsx

@@ -0,0 +1,22 @@
+/** A full-page icon in a muted color */
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './Splash.module.css'
+
+import type { IconName } from '../icons'
+
+export interface SplashProps {
+  /** optional alternative icon name. Defaults to 'logo'. */
+  iconName?: IconName
+  /** additional className for Splash */
+  className?: string
+}
+
+export function Splash(props: SplashProps): JSX.Element {
+  return (
+    <div className={cx(styles.splash, props.className)}>
+      <Icon name={props.iconName || 'ot-logo'} />
+    </div>
+  )
+}

package/src/structure/TitleBar.stories.tsx

@@ -0,0 +1,42 @@
+import type * as React from 'react'
+import { TitleBar } from './TitleBar'
+import { Text, Icon, SIZE_1 } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/TitleBar',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof TitleBar>> = args => (
+  <TitleBar {...args} />
+)
+export const Basic = Template.bind({})
+Basic.args = {
+  title: 'Main Title Goes Here',
+  subtitle: "I'm the sub-title",
+}
+
+export const TitlesAsReactNodes = Template.bind({})
+TitlesAsReactNodes.args = {
+  title: (
+    <Text as="span">
+      Fancy Title With Icon <Icon size={SIZE_1} name="wifi" />
+    </Text>
+  ),
+  subtitle: (
+    <Text as="a" href="#">
+      sub-title as link
+    </Text>
+  ),
+}
+
+export const WithBackButton = Template.bind({})
+WithBackButton.args = {
+  title: 'Main Title Goes Here',
+  subtitle: "I'm the sub-title",
+  back: {
+    children: 'back',
+    onClick: () => {},
+  },
+}

package/src/structure/TitleBar.tsx

@@ -0,0 +1,81 @@
+// TitleBar component
+
+import type * as React from 'react'
+import cx from 'classnames'
+
+import { FlatButton } from '../buttons'
+import styles from './structure.module.css'
+
+import type { ButtonProps } from '../buttons'
+
+export interface TitleBarProps {
+  id?: string
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  back?: ButtonProps
+  rightNode?: React.ReactNode
+  className?: string
+
+  // TODO(mc, 2018-04-13): deprecate these props
+  onBackClick?: () => unknown
+  backClickDisabled?: boolean
+  backButtonLabel?: string
+}
+
+/**
+ * @deprecated Use 'ModalHeader' instead
+ */
+
+export function TitleBar(props: TitleBarProps): JSX.Element {
+  const {
+    title,
+    subtitle,
+    className,
+    onBackClick,
+    backClickDisabled,
+    backButtonLabel,
+    id,
+  } = props
+  let { back, rightNode } = props
+
+  const separator = subtitle && <span className={styles.separator}>|</span>
+
+  const subheading = subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>
+
+  const rightNodeContainer = rightNode && (
+    <div className={styles.right_node}>{rightNode}</div>
+  )
+
+  // TODO(mc, 2018-04-13): deprecate these props
+  if (!back && onBackClick) {
+    back = {
+      onClick: onBackClick,
+      disabled: backClickDisabled,
+      title: backButtonLabel || 'Back',
+      children: backButtonLabel || 'back',
+    }
+  }
+
+  if (back) {
+    back.children = back.children || 'back'
+    back.title = back.title || 'Back'
+  }
+
+  return (
+    <header id={id} className={cx(styles.title_bar, className)}>
+      {back && (
+        <FlatButton
+          inverted
+          iconName={'chevron-left'}
+          className={styles.title_button}
+          {...back}
+        />
+      )}
+      {/*  @ts-expect-error(sa, 2021-6-23): cast value to boolean */}
+      <h1 className={cx(styles.title, { [styles.right]: back })}>{title}</h1>
+      {separator}
+      {subheading}
+      {rightNodeContainer}
+    </header>
+  )
+}

package/src/structure/index.ts

@@ -0,0 +1,7 @@
+// structure components
+
+export * from './TitleBar'
+export * from './Card'
+export * from './Splash'
+export * from './LabeledValue'
+export * from './Pill'

package/src/styles/borders.ts

@@ -0,0 +1,16 @@
+// border style constants
+import { C_LIGHT_GRAY, C_MED_GRAY } from './colors'
+
+export const BORDER_WIDTH_DEFAULT = '1px'
+
+export const BORDER_RADIUS_DEFAULT = '2px'
+export const BORDER_RADIUS_1 = '5px'
+
+export const BORDER_STYLE_NONE = 'none'
+export const BORDER_STYLE_SOLID = 'solid'
+
+export const BORDER_SOLID_LIGHT = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_LIGHT_GRAY}`
+export const BORDER_SOLID_MEDIUM = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_MED_GRAY}`
+
+export const SHADOW_LIGHT =
+  '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2)'

package/src/styles/colors.ts

@@ -0,0 +1,58 @@
+// gray scale
+export const C_BLACK = '#000000'
+export const C_DARK_GRAY = '#4a4a4a'
+export const C_MED_DARK_GRAY = '#6c6c6c'
+export const C_MED_GRAY = '#9b9b9b'
+export const C_SILVER_GRAY = '#e3e3e3'
+export const C_MED_LIGHT_GRAY = '#d2d2d2'
+export const C_LIGHT_GRAY = '#e6e6e6'
+export const C_BRIGHT_GRAY = '#f8f8f8'
+export const C_HARBOR_GRAY = '#8a8c8e'
+export const C_NEAR_WHITE = '#fafafa'
+export const C_WHITE = '#ffffff'
+export const C_TRANSPARENT = 'transparent'
+export const C_DARK_BLACK = '#16212d'
+
+// brand colors
+export const C_BLUE = '#006cfa'
+export const C_MINT = '#00bfa8'
+export const C_AQUAMARINE = '#eefff8'
+export const C_POWDER_BLUE = '#f1f8ff'
+export const C_SKY_BLUE = '#accfff80'
+export const C_BLUE_PRESSED = '#0050b8'
+
+// colors by usage
+// TODO(mc, 2020-10-08): s/COLOR_/C_
+export const COLOR_WARNING = '#e28200'
+export const COLOR_WARNING_LIGHT = '#ffd58f'
+export const COLOR_WARNING_DARK = '#9e5e00'
+export const COLOR_ERROR = '#d12929'
+export const COLOR_SUCCESS = '#60b120'
+export const C_DISABLED = '#9c9c9c'
+export const C_SELECTED_DARK = '#00c3e6'
+export const C_BG_SELECTED = '#f0f3ff'
+export const C_ERROR_DARK = '#ac0505'
+export const C_ERROR_LIGHT = '#ffc0c0'
+
+// overlays
+export const OVERLAY_WHITE_10 = 'rgba(255, 255, 255, 0.1)'
+export const OVERLAY_WHITE_20 = 'rgba(255, 255, 255, 0.2)'
+
+// used to set aside further subsections of cards beyond
+// what can be distinguished with a border
+export const OVERLAY_LIGHT_GRAY_50 = 'rgba(230, 230, 230, 0.4)'
+
+// used as default BaseModal overlay color
+export const OVERLAY_GRAY_90 = 'rgba(127, 127, 127, 0.9)'
+
+// darkest modal overlay used
+export const OVERLAY_BLACK_90 = 'rgba(0, 0, 0, 0.9)'
+
+// 80 percent opacity overlay
+export const OVERLAY_BLACK_80 = 'rgba(0, 0, 0, 0.8)'
+
+// opacities
+export const OPACITY_DISABLED = 0.3
+
+// TODO(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
+export const C_FONT_DISABLED = '#9c9c9c'

package/src/styles/cursor.ts

@@ -0,0 +1,12 @@
+// cursor
+// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
+export const CURSOR_AUTO = 'auto'
+export const CURSOR_CROSSHAIR = 'crosshair'
+export const CURSOR_DEFAULT = 'default'
+export const CURSOR_GRAB = 'grab'
+export const CURSOR_GRABBING = 'grabbing'
+export const CURSOR_HELP = 'help'
+export const CURSOR_NOT_ALLOWED = 'not-allowed'
+export const CURSOR_POINTER = 'pointer'
+export const CURSOR_ZOOM_IN = 'zoom-in'
+export const CURSOR_WAIT = 'wait'

package/src/styles/flexbox.ts

@@ -0,0 +1,39 @@
+export const FLEX_NONE = 'none'
+export const FLEX_AUTO = 'auto'
+export const FLEX_MIN_CONTENT = 'min-content'
+export const FLEX_MAX_CONTENT = 'max-content'
+
+export const ALIGN_NORMAL = 'normal'
+export const ALIGN_START = 'start'
+export const ALIGN_END = 'end'
+export const ALIGN_FLEX_START = 'flex-start'
+export const ALIGN_FLEX_END = 'flex-end'
+export const ALIGN_CENTER = 'center'
+export const ALIGN_BASELINE = 'baseline'
+export const ALIGN_STRETCH = 'stretch'
+
+export const JUSTIFY_NORMAL = 'normal'
+export const JUSTIFY_START = 'start'
+export const JUSTIFY_END = 'end'
+export const JUSTIFY_FLEX_START = 'flex-start'
+export const JUSTIFY_FLEX_END = 'flex-end'
+export const JUSTIFY_CENTER = 'center'
+export const JUSTIFY_SPACE_BETWEEN = 'space-between'
+export const JUSTIFY_SPACE_AROUND = 'space-around'
+export const JUSTIFY_SPACE_EVENLY = 'space-evenly'
+export const JUSTIFY_STRETCH = 'stretch'
+
+export const DIRECTION_ROW = 'row'
+export const DIRECTION_ROW_REVERSE = 'row-reverse'
+export const DIRECTION_COLUMN = 'column'
+export const DIRECTION_COLUMN_REVERSE = 'column-reverse'
+
+export const WRAP = 'wrap'
+export const NO_WRAP = 'nowrap'
+export const WRAP_REVERSE = 'wrap-reverse'
+
+export const WHITE_SPACE_NORMAL = 'normal'
+export const WHITE_SPACE_PRE = 'pre'
+export const WHITE_SPACE_PRE_WRAP = 'pre-wrap'
+export const WHITE_SPACE_PRE_LINE = 'pre-line'
+export const WHITE_SPACE_BREAK_SPACES = 'break-spaces'

package/src/styles/index.ts

@@ -0,0 +1,8 @@
+export * from './borders'
+export * from './colors'
+export * from './cursor'
+export * from './flexbox'
+export * from './layout'
+export * from './position'
+export * from './spacing'
+export * from './typography'

package/src/styles/layout.ts

@@ -0,0 +1,31 @@
+// display
+export const DISPLAY_NONE = 'none'
+export const DISPLAY_INLINE = 'inline'
+export const DISPLAY_BLOCK = 'block'
+export const DISPLAY_INLINE_BLOCK = 'inline-block'
+export const DISPLAY_FLEX = 'flex'
+export const DISPLAY_TABLE = 'table'
+export const DISPLAY_TABLE_ROW = 'table-row'
+export const DISPLAY_TABLE_CELL = 'table-cell'
+export const DISPLAY_GRID = 'grid'
+
+// powers-of-two size scale
+export const SIZE_AUTO = 'auto'
+export const SIZE_1 = '1rem'
+export const SIZE_2 = '2rem'
+export const SIZE_3 = '4rem'
+export const SIZE_4 = '8rem'
+export const SIZE_5 = '16rem'
+export const SIZE_6 = '32rem'
+
+// overflow
+export const OVERFLOW_VISIBLE = 'visible'
+export const OVERFLOW_HIDDEN = 'hidden'
+export const OVERFLOW_CLIP = 'clip'
+export const OVERFLOW_SCROLL = 'scroll'
+export const OVERFLOW_AUTO = 'auto'
+
+// overflow wrap
+export const OVERFLOW_WRAP_ANYWHERE = 'anywhere'
+export const OVERFLOW_WRAP_BREAK_WORD = 'break-word'
+export const OVERFLOW_WRAP_NORMAL = 'normal'

package/src/styles/position.ts

@@ -0,0 +1,5 @@
+export const POSITION_STATIC: 'static' = 'static'
+export const POSITION_RELATIVE: 'relative' = 'relative'
+export const POSITION_ABSOLUTE: 'absolute' = 'absolute'
+export const POSITION_FIXED: 'fixed' = 'fixed'
+export const POSITION_STICKY: 'sticky' = 'sticky'

package/src/styles/spacing.ts

@@ -0,0 +1,11 @@
+export const SPACING_AUTO = 'auto'
+
+// powers-of-two spacing scale
+export const SPACING_1 = '0.25rem'
+export const SPACING_2 = '0.5rem'
+export const SPACING_3 = '1rem'
+export const SPACING_4 = '2rem'
+export const SPACING_5 = '4rem'
+export const SPACING_6 = '8rem'
+export const SPACING_7 = '16rem'
+export const SPACING_8 = '32rem'

package/src/styles/typography.ts

@@ -0,0 +1,90 @@
+import { css } from 'styled-components'
+
+import { C_DARK_GRAY, C_WHITE } from './colors'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+// font size values
+export const FONT_SIZE_HUGE = '3rem'
+export const FONT_SIZE_BIG = '1.5rem'
+export const FONT_SIZE_HEADER = '1.125rem'
+export const FONT_SIZE_DEFAULT = '1rem'
+export const FONT_SIZE_BODY_2 = '0.875rem'
+export const FONT_SIZE_BODY_1 = '0.75rem'
+export const FONT_SIZE_CAPTION = '0.625rem'
+export const FONT_SIZE_TINY = '0.325rem'
+export const FONT_SIZE_MICRO = '0.2rem'
+export const FONT_SIZE_INHERIT = 'inherit'
+
+// line height values
+export const LINE_HEIGHT_SOLID = 1
+export const LINE_HEIGHT_TITLE = 1.25
+export const LINE_HEIGHT_COPY = 1.5
+
+// font weight values
+export const FONT_WEIGHT_LIGHT = 300
+export const FONT_WEIGHT_REGULAR = 400
+export const FONT_WEIGHT_SEMIBOLD = 600
+export const FONT_WEIGHT_BOLD = 800
+
+// font style values
+export const FONT_STYLE_NORMAL = 'normal'
+export const FONT_STYLE_ITALIC = 'italic'
+
+// text align
+export const TEXT_ALIGN_LEFT = 'left'
+export const TEXT_ALIGN_CENTER = 'center'
+export const TEXT_ALIGN_RIGHT = 'right'
+export const TEXT_ALIGN_JUSTIFY = 'justify'
+
+// text transform
+export const TEXT_TRANSFORM_NONE = 'none'
+export const TEXT_TRANSFORM_CAPITALIZE = 'capitalize'
+export const TEXT_TRANSFORM_UPPERCASE = 'uppercase'
+export const TEXT_TRANSFORM_LOWERCASE = 'lowercase'
+
+// text decoration
+export const TEXT_DECORATION_UNDERLINE = 'underline'
+
+// font property sets
+export const FONT_HEADER_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HEADER_THIN: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_LIGHT: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_WHITE};
+`
+
+export const FONT_BODY_2_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_2};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HUGE_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HUGE};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`

package/src/testing/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './renderWithProviders'
+export * from './matchers'

package/src/testing/utils/matchers.ts

@@ -0,0 +1,31 @@
+import { when } from 'vitest-when'
+import type { Matcher } from '@testing-library/react'
+
+// these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
+// https://github.com/timkindberg/jest-when/issues/66
+// use partialComponentPropsMatcher to only verify the props you pass into partialComponentPropsMatcher
+export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
+  // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
+  when.allArgs((args, equals) =>
+    equals(args[0], expect.objectContaining(argsToMatch))
+  )
+
+// Match things like <p>Some <strong>nested</strong> text</p>
+// Use with either string match: getByText(nestedTextMatcher("Some nested text"))
+// or regexp: getByText(nestedTextMatcher(/Some nested text/))
+export const nestedTextMatcher = (textMatch: string | RegExp): Matcher => (
+  content,
+  node
+) => {
+  const hasText = (n: typeof node): boolean => {
+    if (n == null || n.textContent === null) return false
+    return typeof textMatch === 'string'
+      ? Boolean(n?.textContent.match(textMatch))
+      : textMatch.test(n.textContent)
+  }
+  const nodeHasText = hasText(node)
+  const childrenDontHaveText =
+    node != null && Array.from(node.children).every(child => !hasText(child))
+
+  return nodeHasText && childrenDontHaveText
+}

package/src/testing/utils/renderWithProviders.tsx

@@ -0,0 +1,53 @@
+// render using targetted component using @testing-library/react
+// with wrapping providers for i18next and redux
+import type * as React from 'react'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { I18nextProvider } from 'react-i18next'
+import { Provider } from 'react-redux'
+import { vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { createStore } from 'redux'
+
+import type { RenderResult, RenderOptions } from '@testing-library/react'
+import type { PreloadedState, Store } from 'redux'
+
+export interface RenderWithProvidersOptions<State> extends RenderOptions {
+  initialState?: State
+  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+}
+
+export function renderWithProviders<State>(
+  Component: React.ReactElement,
+  options?: RenderWithProvidersOptions<State>
+): [RenderResult, Store<State>] {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const { initialState = {}, i18nInstance = null } = options || {}
+
+  const store: Store<State> = createStore(
+    vi.fn(),
+    initialState as PreloadedState<State>
+  )
+  store.dispatch = vi.fn()
+  store.getState = vi.fn(() => initialState) as () => State
+
+  const queryClient = new QueryClient()
+
+  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+    children,
+  }) => {
+    const BaseWrapper = (
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>{children}</Provider>
+      </QueryClientProvider>
+    )
+    if (i18nInstance != null) {
+      return (
+        <I18nextProvider i18n={i18nInstance}>{BaseWrapper}</I18nextProvider>
+      )
+    } else {
+      return BaseWrapper
+    }
+  }
+
+  return [render(Component, { wrapper: ProviderWrapper }), store]
+}

package/src/tooltips/DeprecatedTooltip.tsx

@@ -0,0 +1,105 @@
+import type * as React from 'react'
+import { Manager, Reference, Popper } from 'react-popper'
+import cx from 'classnames'
+import styles from './tooltips.module.css'
+
+const DISTANCE_FROM_REFERENCE = 8
+
+type PopperProps = React.ComponentProps<typeof Popper>
+
+export interface DeprecatedTooltipProps {
+  /** show or hide the tooltip */
+  open?: boolean
+  /** contents of the tooltip */
+  tooltipComponent: React.ReactNode
+  /** optional portal to place the tooltipComponent inside */
+  portal?: React.ComponentType<any>
+  /** <https://github.com/FezVrasta/react-popper#placement> */
+  placement?: PopperProps['placement']
+  /** <https://github.com/FezVrasta/react-popper#positionfixed> */
+  positionFixed?: PopperProps['positionFixed']
+  /** <https://github.com/FezVrasta/react-popper#modifiers> */
+  modifiers?: PopperProps['modifiers']
+  /** render function for tooltip'd component */
+  children: (props?: React.PropsWithRef<any>) => JSX.Element | null
+  /** extra props to pass to the children render function */
+  childProps?: React.PropsWithRef<any>
+}
+
+/**
+ *  Basic, fully controlled Tooltip component.
+ *
+ * `props.children` is a function that receives the following props object:
+ * ```js
+ * type TooltipChildProps = {
+ *   ref: React.Ref<*>,
+ * }
+ * ```
+ *
+ * `props.childProps` can be used to add extra fields to the child props object
+ *
+ * @deprecated Use `Tooltip` and `useTooltip` instead
+ */
+export function DeprecatedTooltip(
+  props: DeprecatedTooltipProps
+): JSX.Element | null {
+  if (!props.tooltipComponent) return props.children()
+
+  return (
+    <Manager>
+      <Reference>
+        {
+          // TODO(mc, 2020-02-21): this is pretty hard to type as is, ref
+          // should probably be a whole separate argument to children
+          // this may become a moot point if we switch tooltips to hooks
+          ({ ref }) => props.children({ ...props.childProps, ref })
+        }
+      </Reference>
+      {props.open && (
+        <Popper
+          placement={props.placement}
+          modifiers={{
+            offset: { offset: `0, ${DISTANCE_FROM_REFERENCE}` },
+            ...props.modifiers,
+          }}
+          positionFixed={props.positionFixed}
+        >
+          {({ ref, style, placement, arrowProps }) => {
+            // remove optional -start and -end modifiers for arrow style
+            // https://popper.js.org/popper-documentation.html#Popper.placements
+            const arrowPlacement = placement
+              ? placement.replace(/-(?:start|end)/, '')
+              : ''
+
+            let { style: arrowStyle } = arrowProps
+            if (arrowPlacement === 'left' || arrowPlacement === 'right') {
+              arrowStyle = { top: '0.6em' }
+            }
+            const tooltipContents = (
+              <div
+                ref={ref}
+                className={styles.tooltip_box}
+                style={style}
+                data-placement={placement}
+              >
+                {props.tooltipComponent}
+                <div
+                  className={cx(styles.arrow, styles[arrowPlacement])}
+                  ref={arrowProps.ref}
+                  style={arrowStyle}
+                />
+              </div>
+            )
+
+            if (props.portal) {
+              const PortalClass = props.portal
+              return <PortalClass>{tooltipContents}</PortalClass>
+            }
+
+            return tooltipContents
+          }}
+        </Popper>
+      )}
+    </Manager>
+  )
+}