add disabled as prop to support visibilty modes of tooltip (#300)

* add disabled as prop to support visibilty modes of tooltip

* added unit tests for tip component

* typo fix

src/components/Tip/Tip.props.story.tsx

@@ -2,38 +2,79 @@ import React, { Fragment, useState } from 'react';
 
 import { Tip } from './Tip';
 
-import { Button } from '../../components';
+import { Button, Toggle } from '../../components';
 import { Header, Paragraph } from '../../typography';
 import { Layout } from '../../storybook';
 import { ANCHOR_POINTS } from '../../utils';
 
 export default { title: 'components/Tip/props', component: Tip };
 
 export function Active({ args }) {
-  const [active, activeSet] = useState(false);
+  const [active, setActive] = useState(false);
 
   return (
     <Layout.StoryVertical center>
-      <div style={{ textAlign: 'center' }}>
+      <div
+        style={{
+          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <Tip
           content="I am Tip"
           attach="top"
           active={active}
           {...args}
         >
-          <Button
-            onClick={() => activeSet((active) => !active)}
-            fluid
-          >
-            Toggle Tip
-          </Button>
+          <Button fluid>Button with tooltip</Button>
         </Tip>
+        <Toggle
+          label={`Use the toggle to ${
+            active ? 'deactivate' : 'activate'
+          } tooltip`}
+          onChange={() => setActive((active) => !active)}
+        />
       </div>
     </Layout.StoryVertical>
   );
 }
 Active.storyName = 'active';
 
+export function Disabled({ args }) {
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <Layout.StoryVertical center>
+      <div
+        style={{
+          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Tip
+          content="I am a tip"
+          attach="top"
+          disabled={disabled}
+          {...args}
+        >
+          <Button fluid>Button with tooltip</Button>
+        </Tip>
+        <Toggle
+          label={`Use the toggle to ${
+            disabled ? 'enable' : 'disable'
+          } tooltip`}
+          onChange={() => setDisabled((disabled) => !disabled)}
+        />
+      </div>
+    </Layout.StoryVertical>
+  );
+}
+Disabled.storyName = 'disabled';
+
 export function Attach({ args }) {
   return (
     <Layout.StoryVertical center>

src/components/Tip/Tip.style.ts

@@ -23,12 +23,14 @@ interface Props {
   pill?: TipProps['pill'];
   variant?: TipProps['variant'];
   attach?: TipProps['attach'];
+  disabled?: TipProps['disabled'];
 }
 
 export const Tip = styled.div<Props>`
   max-width: ${maxWidth}rem !important;
   animation: ${fadeIn} 120ms ease-in-out;
   will-change: transform;
+  visibility: ${({ disabled }) => (disabled ? 'hidden' : 'visible')};
 
   ${pill};
   ${variants};

src/components/Tip/Tip.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ThemeProvider } from 'styled-components';
+import { themes } from '../../themes';
+import { Tip } from './Tip';
+import { Button } from '../Button/Button';
+
+describe('Tip', () => {
+  it('triggers by hovering the wrapped button', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Tip content="tip" data-testid="tip" active={false}>
+          <Button>Button</Button>
+        </Tip>
+      </ThemeProvider>
+    );
+
+    const button = screen.getByText(/button/i);
+    userEvent.hover(button).then(() => {
+      const tip = screen.getByTestId('tip');
+      expect(tip).toBeInTheDocument();
+    });
+  });
+
+  it('triggers by clicking the wrapped button', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Tip content="tip" data-testid="tip" trigger="click">
+          <Button>Button</Button>
+        </Tip>
+      </ThemeProvider>
+    );
+
+    const button = screen.getByText(/Button/i);
+
+    expect(button).toBeInTheDocument();
+
+    userEvent.click(button).then(() => {
+      const tip = screen.getByTestId('tip');
+      expect(tip).toBeInTheDocument();
+    });
+  });
+});
+
+it('has a text content', () => {
+  render(
+    <ThemeProvider theme={themes['light']}>
+      <Tip content="this is a text" data-testid="tip" active>
+        <Button>Button</Button>
+      </Tip>
+    </ThemeProvider>
+  );
+
+  const tip = screen.getByText('this is a text');
+  expect(tip).toHaveTextContent('this is a text');
+});
+
+it('is not visible on hovering the wrapped button when disabled', () => {
+  render(
+    <ThemeProvider theme={themes['light']}>
+      <Tip content="tip" data-testid="tip" disabled>
+        <Button>Button</Button>
+      </Tip>
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/Button/i);
+  userEvent.hover(button).then(() => {
+    const tip = screen.getByTestId('tip');
+    expect(tip).not.toBeInTheDocument();
+  });
+});
+
+it('can recieve children component as prop and render them', () => {
+  render(
+    <ThemeProvider theme={themes['light']}>
+      <Tip
+        content="tip"
+        data-testid="tip"
+        children={<Button>Button</Button>}
+      />
+    </ThemeProvider>
+  );
+
+  const button = screen.getByText(/Button/i);
+  expect(button).toBeInTheDocument();
+
+  userEvent.hover(button).then(() => {
+    const tip = screen.getByTestId('tip');
+    expect(tip).toBeInTheDocument();
+  });
+});

src/components/Tip/Tip.tsx

@@ -25,6 +25,7 @@ const error =
 
 function TipComponent({
   active,
+  disabled = false,
   attach = 'top',
   content,
   children,
@@ -42,6 +43,7 @@ function TipComponent({
       ref={forwardRef}
       variant={variant}
       $wrap={wrap}
+      disabled={disabled}
       {...props}
       children={tipContent}
     />,

src/components/Tip/Tip.types.ts

@@ -8,6 +8,11 @@ export type Props = IrisProps<{
    * If not defined, it will use the internal state.
    */
   active?: boolean;
+  /**
+   * Controls the tooltip visibility.
+   * If false the tooltip will be disabled - hidden, else it will be enabled - visible.
+   */
+  disabled?: boolean;
   /**
    * Position where tooltip appears.
    * Can be a string or a set of coordinates, such as [[0,0], [100,100]].