From 6e41e62b80938d2dd1716e9500cf9e6f84dc3156 Mon Sep 17 00:00:00 2001 From: Batel Shafir Date: Thu, 27 Jul 2023 15:03:10 +0300 Subject: [PATCH 1/3] add disabled as prop to support visibilty modes of tooltip --- src/components/Tip/Tip.props.story.tsx | 59 ++++++++++++++++++++++---- src/components/Tip/Tip.style.ts | 2 + src/components/Tip/Tip.tsx | 2 + src/components/Tip/Tip.types.ts | 5 +++ 4 files changed, 59 insertions(+), 9 deletions(-) diff --git a/src/components/Tip/Tip.props.story.tsx b/src/components/Tip/Tip.props.story.tsx index 530712c8f..e305f5740 100644 --- a/src/components/Tip/Tip.props.story.tsx +++ b/src/components/Tip/Tip.props.story.tsx @@ -2,7 +2,7 @@ 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'; @@ -10,30 +10,71 @@ 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 ( -
+
- + + setActive((active) => !active)} + />
); } Active.storyName = 'active'; +export function Disabled({ args }) { + const [disabled, setDisabled] = useState(false); + + return ( + +
+ + + + setDisabled((disabled) => !disabled)} + /> +
+ + ); +} +Disabled.storyName = 'disabled'; + export function Attach({ args }) { return ( diff --git a/src/components/Tip/Tip.style.ts b/src/components/Tip/Tip.style.ts index 94e869bec..df838f161 100755 --- a/src/components/Tip/Tip.style.ts +++ b/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` max-width: ${maxWidth}rem !important; animation: ${fadeIn} 120ms ease-in-out; will-change: transform; + visibility: ${({ disabled }) => (disabled ? 'hidden' : 'visible')}; ${pill}; ${variants}; diff --git a/src/components/Tip/Tip.tsx b/src/components/Tip/Tip.tsx index 1ac0ad6d5..33682e760 100755 --- a/src/components/Tip/Tip.tsx +++ b/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} />, diff --git a/src/components/Tip/Tip.types.ts b/src/components/Tip/Tip.types.ts index a3756bb0f..6dbb2f5e8 100644 --- a/src/components/Tip/Tip.types.ts +++ b/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; + /** + * Controlls 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]]. From 5edf4b133029d8941cb31a3531a444eb4460d53f Mon Sep 17 00:00:00 2001 From: Batel Shafir Date: Sun, 30 Jul 2023 17:04:28 +0300 Subject: [PATCH 2/3] added unit tests for tip component --- src/components/Tip/Tip.test.tsx | 94 +++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/components/Tip/Tip.test.tsx diff --git a/src/components/Tip/Tip.test.tsx b/src/components/Tip/Tip.test.tsx new file mode 100644 index 000000000..447bfb031 --- /dev/null +++ b/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( + + + + + + ); + + 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( + + + + + + ); + + 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( + + + + + + ); + + 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( + + + + + + ); + 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( + + Button} + /> + + ); + + const button = screen.getByText(/Button/i); + expect(button).toBeInTheDocument(); + + userEvent.hover(button).then(() => { + const tip = screen.getByTestId('tip'); + expect(tip).toBeInTheDocument(); + }); +}); From 646a51c41e92502f2d4e2c20f9a4f700d05c481b Mon Sep 17 00:00:00 2001 From: Batel Shafir Date: Tue, 1 Aug 2023 10:12:47 +0300 Subject: [PATCH 3/3] typo fix --- src/components/Tip/Tip.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tip/Tip.types.ts b/src/components/Tip/Tip.types.ts index 6dbb2f5e8..c48eface8 100644 --- a/src/components/Tip/Tip.types.ts +++ b/src/components/Tip/Tip.types.ts @@ -9,7 +9,7 @@ export type Props = IrisProps<{ */ active?: boolean; /** - * Controlls the tooltip visibility. + * Controls the tooltip visibility. * If false the tooltip will be disabled - hidden, else it will be enabled - visible. */ disabled?: boolean;