refactor(tooltip): Use the new responsive component

Add tests for responsive behaviour. :)

src/components/ResponsiveReactMedia/ResponsiveReactMedia.jsx

@@ -58,13 +58,14 @@ Responsive.propTypes = {
   /**
    * The content. Can be text, any HTML element, a function, or any component.
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 }
 
 Responsive.defaultProps = {
   minWidth: undefined,
   maxWidth: undefined,
   query: {},
+  children: undefined,
 }
 
 export default Responsive

src/components/Tooltip/Bubble.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import joinClassNames from '../../utils/joinClassNames'
+
+import Text from '../Typography/Text/Text'
+import Box from '../Box/Box'
+
+import styles from './Tooltip.modules.scss'
+import displayStyles from '../Display.modules.scss'
+
+const Bubble = ({ id, direction, width, open, children }) => {
+  const classes = joinClassNames(styles[direction], styles[width], !open && displayStyles.hide)
+
+  return (
+    <Box
+      vertical={2}
+      horizontal={3}
+      dangerouslyAddClassName={classes}
+      id={id}
+      role="tooltip"
+      aria-live="polite"
+      aria-hidden={open ? 'false' : 'true'}
+      data-testid="bubble"
+    >
+      <Text size="small">{children}</Text>
+    </Box>
+  )
+}
+
+Bubble.propTypes = {
+  id: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(['left', 'right']).isRequired,
+  width: PropTypes.oneOf(['full', 'half', 'quarter']).isRequired,
+  open: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+}
+
+export default Bubble

src/components/Tooltip/Tooltip.jsx

@@ -2,18 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../utils/safeRest'
-import joinClassNames from '../../utils/joinClassNames'
 import generateId from '../../utils/generateId'
 import closest from './element-closest'
 
 import StandaloneIcon from '../Icons/StandaloneIcon/StandaloneIcon'
-import Text from '../Typography/Text/Text'
-import Box from '../Box/Box'
-import Responsive from '../Responsive/Responsive'
+import Responsive from '../ResponsiveReactMedia/ResponsiveReactMedia'
+
+import Bubble from './Bubble'
 
-import displayStyles from '../Display.modules.scss'
 import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
-import styles from './Tooltip.modules.scss'
 
 const getTriggerA11yText = connectedFieldLabel => {
   if (!connectedFieldLabel) {
@@ -78,40 +75,41 @@ class Tooltip extends React.Component {
     })
   }
 
-  renderBubble(id, direction, open, content, size) {
-    const classes = joinClassNames(styles[direction], styles[size], !open && displayStyles.hide)
-    return (
-      <Box
-        vertical={2}
-        horizontal={3}
-        dangerouslyAddClassName={classes}
-        id={id}
-        role="tooltip"
-        aria-live="polite"
-        aria-hidden={open ? 'false' : 'true'}
-        data-testid="bubble"
-      >
-        <Text size="small">{content}</Text>
-      </Box>
-    )
-  }
-
   render() {
     const { direction, connectedFieldLabel, children, ...rest } = this.props
 
     const { bubbleId, triggerId } = getIds(connectedFieldLabel)
 
     return (
       <div {...safeRest(rest)} className={iconWrapperStyles.fixLineHeight}>
-        <Responsive maxWidth="sm">
-          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleXsmall')}
-        </Responsive>
-        <Responsive minWidth="sm" maxWidth="md">
-          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleSmall')}
-        </Responsive>
-        <Responsive minWidth="md">
-          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleDesktop')}
-        </Responsive>
+        <Responsive
+          defaultMatches
+          maxWidth="sm"
+          render={() => (
+            <Bubble id={bubbleId} direction="left" width="full" open={this.state.open}>
+              {children}
+            </Bubble>
+          )}
+        />
+        <Responsive
+          defaultMatches={false}
+          minWidth="sm"
+          maxWidth="md"
+          render={() => (
+            <Bubble id={bubbleId} direction="left" width="half" open={this.state.open}>
+              {children}
+            </Bubble>
+          )}
+        />
+        <Responsive
+          defaultMatches={false}
+          minWidth="md"
+          render={() => (
+            <Bubble id={bubbleId} direction={direction} width="quarter" open={this.state.open}>
+              {children}
+            </Bubble>
+          )}
+        />
 
         <StandaloneIcon
           symbol="questionMarkCircle"

src/components/Tooltip/Tooltip.modules.scss

@@ -38,48 +38,34 @@ $bubble-triangle-position: $bubble-triangle-width + 5px;
   }
 }
 
-@mixin left-bubble {
+.left {
+  composes: bubble;
+
   right: $bubble-offset * -1;
 
   &::before {
     right: $bubble-triangle-position;
   }
 }
 
-.left {
+.right {
   composes: bubble;
 
-  @include left-bubble;
-}
+  left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
 
-.right {
-  composes: bubble;
+  &::before {
+    left: $bubble-triangle-position;
+  }
 }
 
-.bubbleXsmall {
+.full {
   width: 100%;
-
-  &.right {
-    @include left-bubble;
-  }
 }
 
-.bubbleSmall {
+.half {
   width: 50%;
-
-  &.right {
-    @include left-bubble;
-  }
 }
 
-.bubbleDesktop {
+.quarter {
   width: 25%;
-
-  &.right {
-    left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
-
-    &::before {
-      left: $bubble-triangle-position;
-    }
-  }
 }