chore(tooltip): refactor storybook

package.json

@@ -89,7 +89,6 @@
     "live-server": "1.2.1",
     "markdownlint-cli": "0.31.1",
     "ora": "5.4.1",
-    "popper.js": "1.16.1",
     "postcss": "8.4.12",
     "prettier": "2.6.0",
     "prettier-package-json": "2.6.3",

packages/tooltip/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 6308,
-    "minified": 3371,
-    "gzipped": 1195
+    "bundled": 6370,
+    "minified": 3425,
+    "gzipped": 1210
   },
   "index.esm.js": {
-    "bundled": 5660,
-    "minified": 2815,
-    "gzipped": 1078,
+    "bundled": 5722,
+    "minified": 2869,
+    "gzipped": 1095,
     "treeshaked": {
       "rollup": {
         "code": 131,
         "import_statements": 101
       },
       "webpack": {
-        "code": 3663
+        "code": 3704
       }
     }
   }

packages/tooltip/README.md

@@ -14,11 +14,14 @@ npm install @zendeskgarden/container-tooltip
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers?path=/story/tooltip-container--usetooltip).
+This container implements the
+[tooltip](https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip) design pattern
+and can be used to build a tooltip component. Check out
+[storybook](https://zendeskgarden.github.io/react-containers) for live examples.
 
 ### useTooltip
 
-```jsx static
+```jsx
 import { useTooltip } from '@zendeskgarden/container-tooltip';
 
 const Tooltip = () => {
@@ -46,7 +49,7 @@ const Tooltip = () => {
 
 ### TooltipContainer
 
-```jsx static
+```jsx
 import { TooltipContainer } from '@zendeskgarden/container-tooltip';
 
 const Tooltip = () => {

packages/tooltip/demo/#readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs';
+import README from '../README.md';
+
+<Meta title="Packages/Tooltip/README" />
+
+<Description>{README}</Description>

packages/tooltip/demo/stories/TooltipStory.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { Story } from '@storybook/react';
+import classNames from 'classnames';
+import {
+  ITooltipContainerProps,
+  IUseTooltipProps,
+  IUseTooltipReturnValue,
+  TooltipContainer,
+  useTooltip
+} from '@zendeskgarden/container-tooltip';
+
+const Component = ({ getTooltipProps, getTriggerProps, isVisible }: IUseTooltipReturnValue) => (
+  <>
+    <span
+      className={classNames(
+        'bg-grey-800',
+        'inline-block',
+        'mb-1',
+        'px-2',
+        'py-0.5',
+        'rounded-sm',
+        'text-sm',
+        'text-white',
+        isVisible ? 'visible' : 'invisible'
+      )}
+      {...getTooltipProps()}
+    >
+      Tooltip
+    </span>
+    <div
+      className="bg-grey-200 border border-solid cursor-pointer px-3 py-2 rounded"
+      {...getTriggerProps()}
+    >
+      Trigger
+    </div>
+  </>
+);
+
+const Container = (props: IUseTooltipProps) => (
+  <TooltipContainer {...props}>
+    {containerProps => <Component {...containerProps} />}
+  </TooltipContainer>
+);
+
+const Hook = (props: IUseTooltipProps) => {
+  const hookProps = useTooltip(props);
+
+  return <Component {...hookProps} />;
+};
+
+interface IArgs extends ITooltipContainerProps {
+  as: 'hook' | 'container';
+}
+
+export const TooltipStory: Story<IArgs> = ({ as, ...props }) => {
+  const Tooltip = () => {
+    switch (as) {
+      case 'container':
+        return <Container {...props} />;
+
+      case 'hook':
+      default:
+        return <Hook {...props} />;
+    }
+  };
+
+  return <Tooltip />;
+};

packages/tooltip/demo/tooltip.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { TooltipContainer } from '@zendeskgarden/container-tooltip';
+import { TooltipStory } from './stories/TooltipStory';
+
+<Meta title="Packages/Tooltip" component={TooltipContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="Tooltip"
+    args={{
+      as: 'hook',
+      delayMilliseconds: TooltipContainer.defaultProps.delayMilliseconds
+    }}
+    argTypes={{
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } }
+    }}
+  >
+    {args => <TooltipStory {...args} />}
+  </Story>
+</Canvas>

packages/tooltip/demo/~patterns/patterns.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { FocusStory } from './stories/FocusStory';
+
+<Meta title="Packages/Tooltip/[patterns]" />
+
+# Patterns
+
+## Focus
+
+Demonstrate `openTooltip` and `closeTooltip` overrides.
+
+<Canvas>
+  <Story name="Focus">{args => <FocusStory {...args} />}</Story>
+</Canvas>

packages/tooltip/demo/~patterns/stories/FocusStory.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { Story } from '@storybook/react';
+import classNames from 'classnames';
+import { useTooltip } from '@zendeskgarden/container-tooltip';
+
+export const FocusStory: Story = () => {
+  const { getTooltipProps, getTriggerProps, isVisible, openTooltip, closeTooltip } = useTooltip();
+  const onFocus = () => openTooltip();
+  const onBlur = () => closeTooltip(0);
+
+  return (
+    <>
+      <div
+        className="bg-grey-200 border border-solid cursor-pointer px-3 py-2 rounded"
+        {...getTriggerProps()}
+      >
+        Trigger, then tab to the tooltip &lt;button&gt;
+      </div>
+      <div
+        className={classNames(
+          'bg-grey-800',
+          'inline-block',
+          'mt-1',
+          'px-2',
+          'rounded-sm',
+          'text-sm',
+          'text-white',
+          isVisible ? 'visible' : 'invisible'
+        )}
+        {...getTooltipProps({ onFocus, onBlur })}
+      >
+        Tooltip with{' '}
+        <button className="bg-grey-600 border border-solid border-grey-500 m-1 py-0.5 px-1 rounded-sm text-white">
+          tabbable
+        </button>{' '}
+        focus
+      </div>
+    </>
+  );
+};

packages/tooltip/src/TooltipContainer.tsx

@@ -25,6 +25,10 @@ export const TooltipContainer: React.FunctionComponent<ITooltipContainerProps> =
   return <>{render!(useTooltip(options)) as React.ReactElement}</>;
 };
 
+TooltipContainer.defaultProps = {
+  delayMilliseconds: 500
+};
+
 TooltipContainer.propTypes = {
   children: PropTypes.func,
   render: PropTypes.func,

packages/tooltip/src/index.ts

@@ -6,7 +6,9 @@
  */
 
 /* Hooks */
-export { useTooltip, IUseTooltipProps, IUseTooltipReturnValue } from './useTooltip';
+export { useTooltip } from './useTooltip';
+export type { IUseTooltipProps, IUseTooltipReturnValue } from './useTooltip';
 
 /* Render-props */
-export { TooltipContainer, ITooltipContainerProps } from './TooltipContainer';
+export { TooltipContainer } from './TooltipContainer';
+export type { ITooltipContainerProps } from './TooltipContainer';