Tooltips and helpbuttons updates no.2

frontend/css/tooltips.scss

@@ -32,13 +32,6 @@
     .fa {
       color: $black;
     }
-    .title-help-text {
-      max-height: 16rem;
-      transition-delay: 0.5s;
-      color: $black;
-      transition: all 0.8s ease;
-      margin-bottom: 4rem;
-    }
   }
 }
 
@@ -48,6 +41,10 @@
   color: transparent;
   transition: all 0.5s ease;
   transition-delay: 0.5s;
+  font-style: italic;
+  color: $black;
+  line-height: 2rem;
+  font-family: sans-serif;
   a {
     pointer-events: all;
   }
@@ -66,4 +63,14 @@
 
 .title-help-icon {
   margin: 0 1rem;
+  display: inline;
+  &.open{
+    .title-help-text {
+      max-height: 16rem;
+      transition-delay: 0.2s;
+      color: $black;
+      transition: all 0.5s ease;
+      margin-bottom: 4rem;
+    }
+  }
 }

frontend/ui/__tests__/tooltip_test.ts

@@ -1,9 +0,0 @@
-import { ToolTip } from "../tooltip";
-import { mount } from "enzyme";
-
-describe("<ToolTip />", () => {
-  it("renders correct text", () => {
-    const wrapper = mount(ToolTip({ helpText: "such help" }));
-    expect(wrapper.find(".title-help-text").html()).toContain("such help");
-  });
-});

frontend/ui/__tests__/tooltip_test.tsx

@@ -0,0 +1,34 @@
+import { ToolTip, ToolTipProps } from "../tooltip";
+import { mount } from "enzyme";
+import React from "react";
+
+describe("<ToolTip />", () => {
+  const fakeProps = (): ToolTipProps => {
+    return {
+      helpText: "such help"
+    };
+  };
+  const p = fakeProps();
+  const wrapper = mount(<ToolTip {...p} />);
+
+  it("renders correct text", () => {
+    expect(wrapper.find(".title-help-text").html()).toContain("such help");
+  });
+
+  it("Has a false initial state", () => {
+    expect(wrapper.state("isOpen")).toBeFalsy();
+  });
+
+  it("Text invisible when closed", () => {
+    expect(wrapper.find(".title-help-text").length).toEqual(1);
+    expect(wrapper.find(".title-help-icon.open").length).toEqual(0);
+  });
+
+  it("Toggles state", () => {
+    const parent = wrapper.find(".fa-question-circle");
+    parent.simulate("click");
+    expect(wrapper.state("isOpen")).toBeTruthy();
+    expect(wrapper.find(".title-help-icon.open").length).toEqual(1);
+  });
+
+});

frontend/ui/tooltip.tsx

@@ -3,28 +3,42 @@ import * as React from "react";
 import { DocSlug, docLink } from ".";
 import { t } from "../i18next_wrapper";
 
-interface ToolTipProps {
+export interface ToolTipProps {
   children?: React.ReactNode;
   className?: string;
   helpText: string;
   docPage?: DocSlug;
 }
 
-export function ToolTip(props: ToolTipProps) {
-  let { className } = props;
-  const { helpText } = props;
-  const cn = className ? className += " title-help" : "title-help";
-  return <div className={cn}>
-    <i className="fa fa-question-circle title-help-icon" />
-    <div className="title-help-text">
-      <i>{t(helpText)}</i>
-      {props.docPage &&
-        <a
-          href={docLink(props.docPage)}
-          target="_blank">
-          {" " + t("Documentation")}
-          <i className="fa fa-external-link" />
-        </a>}
-    </div>
-  </div>;
+interface State {
+  isOpen: boolean;
+}
+
+export class ToolTip extends React.Component<ToolTipProps, Partial<State>> {
+  state: State = { isOpen: false };
+
+  private toggle = (property: keyof State) => () =>
+    this.setState({ [property]: !this.state[property] });
+
+  public render() {
+    const isOpen = this.state.isOpen ? "open" : "";
+    let { className } = this.props;
+    const { helpText } = this.props;
+    const cn = className ? className += " title-help" : "title-help";
+    return <div className={cn}>
+      <div className={`fa fa-question-circle title-help-icon ${isOpen}`}
+        onClick={this.toggle("isOpen")} >
+        <div className="title-help-text">
+          <i>{t(helpText)}</i>
+          {this.props.docPage &&
+            <a
+              href={docLink(this.props.docPage)}
+              target="_blank">
+              {" " + t("Documentation")}
+              <i className="fa fa-external-link" />
+            </a>}
+        </div>
+      </div>
+    </div>;
+  }
 }