Add tooltip component

package.json

@@ -19,6 +19,7 @@
     "@reach/combobox": "^0.10.5",
     "@reach/menu-button": "^0.10.5",
     "@reach/tabs": "^0.11.2",
+    "@reach/tooltip": "^0.11.2",
     "@sentry/react": "^5.22.3",
     "@theme-ui/color": "^0.3.1",
     "@theme-ui/presets": "^0.3.0",

src/components/ErrorFallback.tsx

@@ -24,7 +24,7 @@ export default function ErrorFallback() {
       >
         <Block maxWidth="400px">
           <Heading as="h3">Something Went Wrong</Heading>
-          <Text my={1}>Help Us Out By Letting Us Know What Happened</Text>
+          <Text my={1}>Help us out by letting us know what happened</Text>
           <Block my={3}>
             <Button
               as="a"

src/components/Tooltip.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReachTooltip, { TooltipProps } from '@reach/tooltip';
+
+// const centered = (triggerRect, tooltipRect) => {
+//   const triggerCenter = triggerRect.left + triggerRect.width / 2;
+//   const left = triggerCenter - tooltipRect.width / 2;
+//   const maxLeft = window.innerWidth - tooltipRect.width - 2;
+//   return {
+//     left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
+//     top: triggerRect.bottom + 8 + window.scrollY,
+//   };
+// };
+
+export default function Tooltip({
+  style,
+  ...props
+}: { style?: React.CSSProperties } & TooltipProps) {
+  return (
+    <ReachTooltip
+      isVisible
+      style={{
+        background: 'hsla(0, 0%, 0%, 0.75)',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '0.5em 1em',
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

src/stories/Tooltip.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Label,
+  Input,
+  Select,
+  Textarea,
+  Radio,
+  Flex,
+  Checkbox,
+  Slider,
+} from 'theme-ui';
+import '@reach/tooltip/styles.css';
+import Button from '../components/elements/Button';
+import { Icon } from '../components/icon';
+import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
+import { themes } from '../theme';
+import Tooltip from '../components/Tooltip';
+import Block from '../components/elements/Block';
+
+export default { title: 'Tooltip' };
+
+export const Basic = () => {
+  return (
+    <Block>
+      <Block>
+        <Tooltip label="Settings">
+          <Icon name="settings" />
+        </Tooltip>
+      </Block>
+      {/* {Object.keys(themes).map(theme => {
+        return (
+          <ThemeSystemProvider key={theme} initialTheme={theme}>
+            <Box bg="background" p={2}>
+              <Button mx={1}>Primary</Button>
+              <Button variant="secondary" mx={1}>
+                Secondary
+              </Button>
+              <Button variant="highlight" mx={1}>
+                Highlight
+              </Button>
+              <Button variant="muted" mx={1}>
+                Muted
+              </Button>
+              <Button disabled mx={1}>
+                Disabled
+              </Button>
+              <Button variant="danger" mx={1}>
+                Danger
+              </Button>
+              <Button variant="outline" mx={1}>
+                Outline
+              </Button>
+            </Box>
+          </ThemeSystemProvider>
+        );
+      })} */}
+    </Block>
+  );
+};

yarn.lock

@@ -1820,6 +1820,14 @@
     "@reach/utils" "0.10.5"
     tslib "^2.0.0"
 
+"@reach/[email protected]":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
+  integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
+  dependencies:
+    "@reach/utils" "0.11.2"
+    tslib "^2.0.0"
+
 "@reach/[email protected]":
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.10.5.tgz#ba68722f155b146c6790e7d10a97dca1fd7ab14e"
@@ -1830,6 +1838,16 @@
     prop-types "^15.7.2"
     tslib "^2.0.0"
 
+"@reach/[email protected]":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491"
+  integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ==
+  dependencies:
+    "@reach/observe-rect" "1.2.0"
+    "@reach/utils" "0.11.2"
+    prop-types "^15.7.2"
+    tslib "^2.0.0"
+
 "@reach/[email protected]^1.2.1", "@reach/[email protected]^1.3.3":
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
@@ -1851,6 +1869,19 @@
     prop-types "^15.7.2"
     tslib "^2.0.0"
 
+"@reach/[email protected]^0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b"
+  integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA==
+  dependencies:
+    "@reach/auto-id" "0.11.2"
+    "@reach/portal" "0.11.2"
+    "@reach/rect" "0.11.2"
+    "@reach/utils" "0.11.2"
+    "@reach/visually-hidden" "0.11.1"
+    prop-types "^15.7.2"
+    tslib "^2.0.0"
+
 "@reach/[email protected]":
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b"
@@ -1869,6 +1900,13 @@
     tslib "^2.0.0"
     warning "^4.0.3"
 
+"@reach/[email protected]":
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3"
+  integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ==
+  dependencies:
+    tslib "^2.0.0"
+
 "@rollup/[email protected]^14.0.0":
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0"