feat(tooltip): add state hook prop

twilio-labs · Sep 14, 2020 · 539db2c · 539db2c
1 parent fb78d69
commit 539db2c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/packages/paste-core/components/tooltip/__test__/index.spec.tsx b/packages/paste-core/components/tooltip/__test__/index.spec.tsx
@@ -3,6 +3,7 @@ import {axe} from 'jest-axe';
 import {render, screen} from '@testing-library/react';
 import {Button} from '@twilio-paste/button';
 import {Theme} from '@twilio-paste/theme';
+import {StateHookExample} from '../stories/index.stories';
 import {Tooltip} from '../src';
 
 const TooltipMock: React.FC<{}> = () => {
@@ -25,6 +26,24 @@ describe('Tooltip', () => {
       const renderedTooltip = screen.getByTestId('tooltip-example');
       expect(renderedTooltip.getAttribute('role')).toEqual('tooltip');
     });
+
+    it('should render a tooltip and show/hide on button click', () => {
+      render(<StateHookExample />);
+
+      const ButtonOne = screen.queryByTestId('show-button');
+      const ButtonTwo = screen.queryByTestId('hide-button');
+
+      let tooltip = screen.queryByTestId('state-hook-tooltip');
+      expect(tooltip.getAttribute('hidden')).toBeDefined();
+
+      ButtonOne.click();
+      tooltip = screen.queryByTestId('state-hook-tooltip');
+      expect(tooltip.getAttribute('hidden')).toBeNull();
+
+      ButtonTwo.click();
+      tooltip = screen.queryByTestId('state-hook-tooltip');
+      expect(tooltip.getAttribute('hidden')).toBeDefined();
+    });
   });
 
   describe('Accessibility', () => {

diff --git a/packages/paste-core/components/tooltip/src/index.tsx b/packages/paste-core/components/tooltip/src/index.tsx
@@ -9,6 +9,7 @@ import {
   useTooltipPrimitiveState,
   TooltipPrimitive,
   TooltipPrimitiveReference,
+  TooltipPrimitiveStateReturn,
 } from '@twilio-paste/tooltip-primitive';
 import {TooltipArrow} from './TooltipArrow';
 
@@ -34,13 +35,17 @@ const StyledTooltip = React.forwardRef<HTMLDivElement, BoxProps>(({style, ...pro
   );
 });
 
+export interface TooltipStateReturn extends TooltipPrimitiveStateReturn {
+  [key: string]: any;
+}
 export interface TooltipProps extends TooltipPrimitiveInitialState {
   children: NonNullable<React.ReactElement>;
+  state?: TooltipStateReturn;
   text: string;
 }
 
-const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(({baseId, children, text, ...props}, ref) => {
-  const tooltip = useTooltipPrimitiveState({baseId: `paste-tooltip-${useUID()}`, ...props});
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(({baseId, children, state, text, ...props}, ref) => {
+  const tooltip = state || useTooltipPrimitiveState({baseId: `paste-tooltip-${useUID()}`, ...props});
   return (
     <>
       {React.Children.only(
@@ -70,3 +75,5 @@ if (process.env.NODE_ENV === 'development') {
 
 Tooltip.displayName = 'Tooltip';
 export {Tooltip};
+
+export {useTooltipPrimitiveState as useTooltipState};
diff --git a/packages/paste-core/components/tooltip/stories/index.stories.tsx b/packages/paste-core/components/tooltip/stories/index.stories.tsx
@@ -8,7 +8,31 @@ import {Button} from '@twilio-paste/button';
 import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
 import {Stack} from '@twilio-paste/stack';
 import {Text} from '@twilio-paste/text';
-import {Tooltip} from '../src';
+import {Theme} from '@twilio-paste/theme';
+import {useTooltipState, Tooltip} from '../src';
+
+export const StateHookExample: React.FC = () => {
+  const tooltip = useTooltipState();
+  return (
+    <Theme.Provider theme="console">
+      <Stack orientation="horizontal" spacing="space60">
+        <Tooltip
+          data-testid="state-hook-tooltip"
+          state={tooltip}
+          text="This should be visible by pressing another button"
+        >
+          <Button variant="primary">Open tooltip</Button>
+        </Tooltip>
+        <Button variant="primary" onClick={() => tooltip.show()} data-testid="show-button">
+          Open tooltip on click
+        </Button>
+        <Button variant="primary" onClick={() => tooltip.hide()} data-testid="hide-button">
+          Close tooltip on click
+        </Button>
+      </Stack>
+    </Theme.Provider>
+  );
+};
 
 storiesOf('Components|Tooltip', module)
   .addDecorator(withKnobs)
@@ -113,4 +137,7 @@ storiesOf('Components|Tooltip', module)
         </Tooltip>
       </>
     );
+  })
+  .add('State hook Tooltip', () => {
+    return <StateHookExample />;
   });