Added Molecules Tooltip

Author: wintondeshong

package-lock.json

@@ -22,6 +22,7 @@
     },
     "dependencies": {
         "@reach/menu-button": "0.10.2",
+        "@tippyjs/react": "4.0.2",
         "@types/react": "16.9.11",
         "@types/react-dom": "16.9.3",
         "@types/react-router-dom": "5.1.5",

package.json

@@ -7,3 +7,4 @@
 @import "form-fields";
 @import "forms";
 @import "radio-list";
+@import "tooltip";

src/assets/scss/6-components/molecules/__molecules.scss

@@ -0,0 +1,24 @@
+.c-tooltip {
+    @include box-shadow(0, 7px, 20px, rgba(0, 26, 57, 0.3));
+    @include font-style($size: "small");
+    @include padding(12px);
+    background-color: get-color-neutral("90");
+    color: get-color-neutral("white");
+    border-radius: $border-radius-small;
+
+    .tippy-content {
+        div {
+            word-break: break-word;
+        }
+    }
+
+    &__arrow {
+        position: absolute;
+        bottom: rem(-8px);
+        width: rem(16px);
+        height: rem(16px);
+        background-color: get-color-neutral("90");
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+    }
+}

src/assets/scss/6-components/molecules/_tooltip.scss

@@ -65,6 +65,7 @@ export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
 export { ErrorBanner } from "./molecules/errors/error-banner";
 export { Form } from "./molecules/forms/form";
 export { RadioList } from "./molecules/lists/radio-list";
+export { Tooltip } from "./molecules/tooltips/tooltip";
 export { UnorderedList } from "./molecules/lists/unordered-list";
 
 // Form Fields

src/index.ts

@@ -0,0 +1,20 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import { Button } from "../../atoms/buttons/button";
+import React from "react";
+import { Tooltip } from "./tooltip";
+
+export default {
+    component: Tooltip,
+    title: "Molecules | Tooltip",
+};
+
+export const tooltipKnobs = () => (
+    <Tooltip
+        content={text(
+            "Tooltip Contents",
+            "I am a tooltip, based on @tippyjs/react!"
+        )}
+        visible={boolean("Force Visibility", false) ?? undefined}>
+        <Button>Hover Me!</Button>
+    </Tooltip>
+);

src/molecules/tooltips/tooltip.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Tooltip } from "./tooltip";
+import faker from "faker";
+
+describe("Tooltip", () => {
+    test("when default props, renders children", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <Tooltip content={<span>content</span>}>
+                <span>{expected}</span>
+            </Tooltip>
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+});

src/molecules/tooltips/tooltip.test.tsx

@@ -0,0 +1,91 @@
+import Tippy from "@tippyjs/react";
+import { followCursor } from "tippy.js";
+import React from "react";
+import { StringUtils } from "andculturecode-javascript-core";
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface TooltipProps {
+    /**
+     * Required. The element that triggers the tooltip on hovering.
+     * Surround the trigger with the `<Tooltip>` component.
+     */
+    children: React.ReactElement;
+    /**
+     * The content of the tooltip itself.
+     */
+    content: React.ReactChild | React.ReactChild[];
+    cssClassName?: string;
+    /**
+     * Delay to wait before showing tooltip, in ms. Defaults to 500.
+     */
+    delay?: number;
+    /**
+     * Disable the tooltip. For example, if you have overflowing text,
+     * and you only want to show if the text is actually truncated with ...
+     * you can get a ref to the HTML element and set
+     * disabled={elRef.offsetWidth < elRef.scrollWidth}
+     * @see resource-subtext-label.tsx for an example of how to achieve this behavior
+     */
+    disabled?: boolean;
+    /**
+     * True by default. If true, the tooltip will appear at the cursor's location.
+     */
+    showOnCursor?: boolean;
+    /**
+     * Manually control tooltip visibility.
+     * Useful for debugging styles.
+     */
+    visible?: boolean;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const Tooltip: React.FC<TooltipProps> = (props: TooltipProps) => {
+    const CSS_CLASS_NAME = "c-tooltip";
+    const classNames = [CSS_CLASS_NAME];
+
+    if (StringUtils.hasValue(props.cssClassName)) {
+        classNames.push(props.cssClassName!);
+    }
+
+    const getContent = () => (
+        <React.Fragment>
+            {props.content}
+            <div className={`${CSS_CLASS_NAME}__arrow`} />
+        </React.Fragment>
+    );
+
+    if (props.disabled === true) {
+        return props.children;
+    }
+
+    return (
+        <Tippy
+            className={classNames.join(" ")}
+            content={getContent()}
+            delay={props.delay ?? 500}
+            followCursor={props.showOnCursor === false ? undefined : "initial"}
+            hideOnClick={false}
+            plugins={[followCursor]}
+            visible={props.visible}>
+            {props.children}
+        </Tippy>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { Tooltip };
+
+// #endregion Exports