[Tooltip] - add component

packages/ui/src/2_molecules/Tooltip/Tooltip.module.css

@@ -0,0 +1,88 @@
+.tooltip {
+    @apply bg-gray-10 rounded p-3 text-gray-1 absolute inline-block min-w-5 max-w-72 leading-5 opacity-0;
+
+    &.bottom,
+    &.bottom-start,
+    &.bottom-end,
+    &.top,
+    &.top-start,
+    &.top-end,
+    &.left,
+    &.left-start,
+    &.left-end,
+    &.right,
+    &.right-start,
+    &.right-end {
+        @apply opacity-100;
+        &:after {
+            @apply content-[''] absolute w-0 h-0 border-solid;
+        }
+    }
+
+    &.top,
+    &.top-start,
+    &.top-end {
+        &:after {
+            @apply border-t-[0.656rem] border-b-0 border-t-gray-10 border-b-transparent -bottom-[0.656rem] border-x-[0.516rem] border-x-transparent;
+        }
+    }
+
+    &.right,
+    &.right-start,
+    &.right-end {
+        &:after {
+            @apply border-r-[0.656rem] border-l-0 border-r-gray-10 border-l-transparent -left-[0.656rem] border-y-[0.516rem] border-y-transparent;
+        }
+    }
+
+    &.left,
+    &.left-start,
+    &.left-end {
+        &:after {
+            @apply border-l-[0.656rem] border-r-0 border-l-gray-10 border-r-transparent -right-[0.656rem] border-y-[0.516rem] border-y-transparent;
+        }
+    }
+
+    &.bottom,
+    &.bottom-start,
+    &.bottom-end {
+        &:after {
+            @apply border-b-[0.656rem] border-t-0 border-b-gray-10 border-t-transparent -top-[0.656rem] border-x-[0.516rem] border-x-transparent;
+        }
+    }
+
+    &.top,
+    &.bottom {
+        &:after {
+            @apply left-0 right-0 m-auto;
+        }
+        &-end {
+            &:after {
+                @apply left-4 right-auto;
+            }
+        }
+        &-start {
+
+            &:after {
+                @apply left-auto right-4;
+            }
+        }
+    }
+
+    &.left,
+    &.right {
+        &:after {
+            @apply top-0 bottom-0 m-auto;
+        }
+        &-start {
+            &:after {
+                @apply top-auto bottom-4;
+            }
+        }
+        &-end {
+            &:after {
+                @apply top-4 bottom-auto;
+            }
+        }
+    }
+}

packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,78 @@
+import { Story } from '@storybook/react';
+
+import React, { ComponentProps } from 'react';
+
+import { Button, Icon, Link } from '../../1_atoms';
+import { Tooltip } from './Tooltip';
+import { TooltipPlacement, TooltipTrigger } from './Tooltip.types';
+
+export default {
+  title: 'Molecule/Tooltip',
+  component: Tooltip,
+};
+
+const Template: Story<ComponentProps<typeof Tooltip>> = args => (
+  <div className="flex justify-center items-center h-96 w-full">
+    <Tooltip {...args} />
+  </div>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  content: (
+    <div className="max-w-52">
+      Click here to fund your wallet and get started with Sovryn
+      <Link
+        className="mt-4 block text-blue-2 hover:no-underline"
+        text="Read more"
+        href="#"
+      />
+    </div>
+  ),
+  children: (
+    <div>
+      <Icon icon="info" />
+    </div>
+  ),
+  className: '',
+  tooltipClassName: '',
+  dataLayoutId: '',
+  placement: TooltipPlacement.TOP,
+  disabled: false,
+  trigger: TooltipTrigger.hover,
+};
+
+const InteractiveTemplate: Story<ComponentProps<typeof Tooltip>> = args => (
+  <div className="flex justify-center mt-32">
+    <Tooltip
+      {...args}
+      onHide={() => console.log('onHide event called')}
+      onShow={() => console.log('onShow event called')}
+    />
+  </div>
+);
+
+export const Interactive = InteractiveTemplate.bind({});
+Interactive.args = {
+  content: (
+    <div className="max-w-52">
+      Click here to fund your wallet and get started with Sovryn
+      <Link
+        className="mt-4 block text-blue-2 hover:no-underline"
+        text="Read more"
+        href="#"
+      />
+    </div>
+  ),
+  children: (
+    <div>
+      <Button text="Info" />
+    </div>
+  ),
+  className: '',
+  tooltipClassName: '',
+  dataLayoutId: '',
+  placement: TooltipPlacement.TOP,
+  disabled: false,
+  trigger: TooltipTrigger.hover,
+};

packages/ui/src/2_molecules/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,94 @@
+import { act, screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React from 'react';
+
+import { Tooltip } from './Tooltip';
+import { TooltipPlacement, TooltipTrigger } from './Tooltip.types';
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test('should render a tooltip on hover in and hide on hover out', () => {
+    render(<Tooltip children={<button>Text</button>} content={<>Tooltip</>} />);
+    const button = screen.getByRole('button');
+    userEvent.hover(button);
+    const tooltip = screen.queryByText('Tooltip');
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(button);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+
+  it('should render a tooltip on focus in and hide on focus out', async () => {
+    render(
+      <Tooltip
+        trigger={TooltipTrigger.focus}
+        children={<button>Text</button>}
+        content={<>Tooltip</>}
+      />,
+    );
+    const button = screen.getByRole('button');
+    await waitFor(() => button.focus());
+    const tooltip = screen.queryByText('Tooltip');
+    expect(tooltip).toBeInTheDocument();
+    await waitFor(() => button.blur());
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+
+  it('should render a tooltip on click and hide on a second click', () => {
+    render(
+      <Tooltip
+        trigger={TooltipTrigger.click}
+        children={<button>Text</button>}
+        content={<>Tooltip</>}
+      />,
+    );
+    const button = screen.getByRole('button');
+    userEvent.click(button);
+    const tooltip = screen.queryByText('Tooltip');
+    expect(tooltip).toBeInTheDocument();
+    userEvent.click(button);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+
+  it('should not render a tooltip if disabled is true', () => {
+    render(
+      <Tooltip
+        disabled
+        children={<button>Text</button>}
+        content={<>Tooltip</>}
+      />,
+    );
+    userEvent.click(screen.getByRole('button'));
+    expect(screen.queryByText('Tooltip')).not.toBeInTheDocument();
+  });
+
+  it('should render a tooltip with a bottom placement', () => {
+    render(
+      <Tooltip
+        children={<button>Text</button>}
+        placement={TooltipPlacement.BOTTOM}
+        content={<>Tooltip</>}
+      />,
+    );
+    userEvent.hover(screen.getByRole('button'));
+    const tooltip = screen.getByText('Tooltip');
+    const classes = tooltip.getAttribute('class');
+    expect(classes).toContain('bottom');
+  });
+});