diff --git a/packages/core/src/components/Copy/index.tsx b/packages/core/src/components/Copy/index.tsx index 96e311124..c7cc67b9f 100644 --- a/packages/core/src/components/Copy/index.tsx +++ b/packages/core/src/components/Copy/index.tsx @@ -10,6 +10,8 @@ export type CopyProps = { children?: React.ReactElement; /** Pass an HTML element attribute id to the Link. */ id?: string; + /** Invert the colors of the tooltip. */ + invertTooltip?: boolean; /** String of text to be copied to the clipboard. */ text: string; /** Callback fired when text is copied. */ @@ -31,6 +33,7 @@ export default function Copy({ children, text, id, + invertTooltip, trackingName, underlined, prompt, @@ -64,6 +67,7 @@ export default function Copy({ return ( diff --git a/packages/core/src/components/Copy/story.tsx b/packages/core/src/components/Copy/story.tsx index 2be55daaa..7211afd80 100644 --- a/packages/core/src/components/Copy/story.tsx +++ b/packages/core/src/components/Copy/story.tsx @@ -49,3 +49,16 @@ export function withACustomElementToTriggerTheCopy() { withACustomElementToTriggerTheCopy.story = { name: 'With a custom element to trigger the copy.', }; + +export function withInvertedTooltip() { + return ( + + Check out this inverted tooltip{' '} + . + + ); +} + +withInvertedTooltip.story = { + name: 'With an inverted tooltip.', +}; diff --git a/packages/core/test/components/Copy.test.tsx b/packages/core/test/components/Copy.test.tsx index 970ccf0af..682e3051e 100644 --- a/packages/core/test/components/Copy.test.tsx +++ b/packages/core/test/components/Copy.test.tsx @@ -4,6 +4,7 @@ import copy from 'copy-to-clipboard'; import IconCopy from '@airbnb/lunar-icons/lib/interface/IconCopy'; import Copy from '../../src/components/Copy'; import IconButton from '../../src/components/IconButton'; +import { Tooltip } from '../../src/components/Tooltip'; jest.mock('copy-to-clipboard', () => jest.fn(() => true)); @@ -50,4 +51,12 @@ describe('', () => { expect(spy).toHaveBeenCalledWith('foo', true); expect(copy).toHaveBeenCalledWith('foo'); }); + + it('inverts the Tooltip if specified', () => { + const wrapper = shallow(); + + expect(wrapper.dive().find(Tooltip).prop('inverted')).toBe(false); + wrapper.setProps({ invertTooltip: true }); + expect(wrapper.dive().find(Tooltip).prop('inverted')).toBe(true); + }); });