Add feature to release hand raised when the tile indicator is clicked. (#2721)

* Refactor to add support for lowering hand on indicator click.

* Cleanup and lint.

* fix icon being a little off

src/reactions/RaisedHandIndicator.module.css

@@ -5,6 +5,11 @@
   color: var(--cpd-color-icon-secondary);
 }
 
+.button {
+  display: contents;
+  background: none;
+}
+
 .raisedHandWidget > p {
   padding: none;
   margin-top: auto;
@@ -42,11 +47,11 @@
   height: var(--cpd-space-6x);
   display: inline-block;
   text-align: center;
-  font-size: 16px;
+  font-size: 1.3em;
 }
 
 .raisedHandLarge > span {
   width: var(--cpd-space-8x);
   height: var(--cpd-space-8x);
-  font-size: 22px;
+  font-size: 1.9em;
 }

src/reactions/RaisedHandIndicator.test.tsx

@@ -40,4 +40,16 @@ describe("RaisedHandIndicator", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+  test("can be clicked", () => {
+    const dateTime = new Date();
+    let wasClicked = false;
+    const { getByRole } = render(
+      <RaisedHandIndicator
+        raisedHandTime={dateTime}
+        onClick={() => (wasClicked = true)}
+      />,
+    );
+    getByRole("button").click();
+    expect(wasClicked).toBe(true);
+  });
 });

src/reactions/RaisedHandIndicator.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useState } from "react";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import classNames from "classnames";
 import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
@@ -23,13 +29,26 @@ export function RaisedHandIndicator({
   raisedHandTime,
   minature,
   showTimer,
+  onClick,
 }: {
   raisedHandTime?: Date;
   minature?: boolean;
   showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
   // This effect creates a simple timer effect.
   useEffect(() => {
     if (!raisedHandTime || !showTimer) {
@@ -52,26 +71,40 @@ export function RaisedHandIndicator({
     return (): void => clearInterval(to);
   }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
-  if (raisedHandTime) {
-    return (
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !minature,
+      })}
+    >
       <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !minature,
         })}
       >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
-        {showTimer && <p>{raisedHandDuration}</p>}
+        <span role="img" aria-label="raised hand">
+          ✋
+        </span>
       </div>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </div>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        aria-label="lower raised hand"
+        className={styles.button}
+        onClick={clickCallback}
+      >
+        {content}
+      </button>
     );
   }
 
-  return null;
+  return content;
 }