new(Copy): Add invertTooltip prop (#380)

* new(Copy): Add invertTooltip prop * docs(Copy): update invertedTooltip story
airbnb · Jun 4, 2020 · d2ea8da · d2ea8da
1 parent c913d22
commit d2ea8da
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git 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 (
     <Tooltip
       remainOnMouseDown
+      inverted={invertTooltip}
       content={
         copied ? (
           <T k="lunar.copy.copied" phrase="Copied!" />

diff --git 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 (
+    <Text>
+      Check out this inverted tooltip{' '}
+      <Copy invertTooltip text="Inverted tooltip." prompt="Yo copy me..." />.
+    </Text>
+  );
+}
+
+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
@@ -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('<Copy />', () => {
     expect(spy).toHaveBeenCalledWith('foo', true);
     expect(copy).toHaveBeenCalledWith('foo');
   });
+
+  it('inverts the Tooltip if specified', () => {
+    const wrapper = shallow(<Copy invertTooltip={false} text="foo" />);
+
+    expect(wrapper.dive().find(Tooltip).prop('inverted')).toBe(false);
+    wrapper.setProps({ invertTooltip: true });
+    expect(wrapper.dive().find(Tooltip).prop('inverted')).toBe(true);
+  });
 });