@unitedstatespowersquadrons/components 1.4.4 → 1.4.5-2

package/Admin/AdminLink.tsx

@@ -3,7 +3,8 @@ import { createUseStyles } from "react-jss";
 import classNames from "classnames";
 import AdminItem from "./AdminItem";
 import Colors, { ButtonColorName } from "../Colors";
-import FontAwesomeIcon, { FontAwesomeProps } from "../FontAwesomeIcon";
+import { FontAwesomeProps } from "../FontAwesomeIcon";
+import IconButton from "../IconButton";
 import Styles from "../Styles";
 
 // Styles aren't tree-shaken, but keeping every color variant here means apps
@@ -48,13 +49,6 @@ const useStyles = createUseStyles({
     cursor: "pointer",
   },
   left: { textAlign: "left" },
-  link: {
-    ...Styles.flexRow,
-    color: "inherit",
-    flex: 1,
-    justifyContent: "left",
-    textDecoration: "none",
-  },
   orange: {
     "& button": { ...Styles.orange },
     "&:hover": {
@@ -85,6 +79,12 @@ const useStyles = createUseStyles({
     paddingLeft: "0",
     paddingRight: "0",
   },
+  subMenuLink: {
+    color: "inherit",
+    cursor: "pointer",
+    flex: 1,
+    textDecoration: "none",
+  },
   subMenuText: {
     animation: "fadeIn 100ms",
     fontSize: "1.5em",
@@ -109,14 +109,16 @@ const AdminLink = (props: Props) => {
 
   return(
     <AdminItem className={classNames(classes.item, classes.left, colorClassName)}>
-      <a className={classes.link} href={href} title={title}>
-        <FontAwesomeIcon
-          css={classNames(classes.subMenuIcon, className)}
-          fa={fa}
-          icon={icon}
-          mode={mode}
-          style={style}
-        />
+      <IconButton
+        className={classNames(classes.subMenuIcon, className)}
+        fa={fa}
+        href={href}
+        icon={icon}
+        mode={mode}
+        style={style}
+        title={title}
+      />
+      <a className={classes.subMenuLink} href={href} title={title}>
         <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
       </a>
     </AdminItem>

package/Admin/Impersonation.tsx

@@ -1,45 +1,28 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { createUseStyles } from "react-jss";
-import classNames from "classnames";
 import AdminItem from "./AdminItem";
 import { AdminAction, Impersonation as ImpersonationType } from "./types";
 import ActionButton from "../ActionButton";
-import FontAwesomeIcon from "../FontAwesomeIcon";
 import IconButton from "../IconButton";
 import Styles from "../Styles";
 import { OnClickHandler, OnClickOrKeyboardHandler } from "../types";
 
 const useStyles = createUseStyles({
   button: { paddingRight: "0.75em !important" },
-  center: {
-    "& svg": { margin: "0 auto" },
-    justifyContent: "center",
-  },
   gray: { ...Styles.gray },
   impersonation: {
+    alignItems: "center",
     animation: "300ms ease-in",
     display: "flex",
     flexDirection: "column",
     gap: "0.25em",
     paddingBottom: "0.5em",
+    width: "100%",
   },
-  inactive: {
-    "& > div": {
-      display: "none",
-      opacity: "0",
-      transition: "opacity 0.5s ease-in-out",
-    },
-    "& > svg": { display: "block" },
-    "&:hover > div": {
-      display: "flex",
-      opacity: "1",
-    },
-    "&:hover > svg": { display: "none" },
-  },
-  left: { textAlign: "left" },
-  viewAsIcon: {
+  triggerIcon: {
+    "&:hover": { ...Styles.hover.purple },
     ...Styles.purple,
-    fontSize: "2em",
+    fontSize: "2em !important",
   },
   viewingAsIcon: {
     "&:hover": { ...Styles.hover.red },
@@ -62,6 +45,7 @@ const buildImpersonation = (hooks: Hooks) => {
     const classes = useStyles();
 
     const inputRef = useRef<HTMLInputElement>(null);
+    const [expanded, setExpanded] = useState(false);
 
     const handleImpersonate: OnClickOrKeyboardHandler = event => {
       if ("key" in event && event.key !== "Enter") { return; }
@@ -73,10 +57,13 @@ const buildImpersonation = (hooks: Hooks) => {
       dispatch({ certificate, type: "impersonate" });
     };
 
-    const handleCancel: OnClickHandler = () => {
+    const handleCancelImpersonation: OnClickHandler = () => {
       dispatch({ type: "cancelImpersonation" });
     };
 
+    const handleExpand: OnClickHandler = () => setExpanded(true);
+    const handleCollapse: OnClickHandler = () => setExpanded(false);
+
     if (impersonation) {
       const { certificate, name } = impersonation;
 
@@ -87,7 +74,7 @@ const buildImpersonation = (hooks: Hooks) => {
             className={classes.viewingAsIcon}
             icon="user-group"
             mode="duotone"
-            onClick={handleCancel}
+            onClick={handleCancelImpersonation}
             title="Cancel Impersonation"
           />
           <div>{name}</div>
@@ -96,18 +83,32 @@ const buildImpersonation = (hooks: Hooks) => {
       );
     }
 
-    const collapsed = (
-      <FontAwesomeIcon
-        css={classes.viewAsIcon}
-        icon="user-group"
-        mode="duotone"
-      />
-    );
+    if (!expanded) {
+      return(
+        <AdminItem key="collapsed">
+          <IconButton
+            className={classes.triggerIcon}
+            color="purple"
+            icon="user-group"
+            mode="duotone"
+            onClick={handleExpand}
+            title="Impersonate Member"
+          />
+        </AdminItem>
+      );
+    }
 
-    const expanded = (
-      <div className={classNames(classes.impersonation, classes.center)}>
+    return(
+      <AdminItem className={classes.impersonation} key="expanded">
         <div className="bold">View As:</div>
-        <FontAwesomeIcon css={classes.viewAsIcon} icon="user-group" mode="duotone" />
+        <IconButton
+          className={classes.triggerIcon}
+          color="purple"
+          icon="user-group"
+          mode="duotone"
+          onClick={handleCollapse}
+          title="Collapse"
+        />
         <input
           maxLength={7}
           onKeyDown={handleImpersonate}
@@ -124,13 +125,6 @@ const buildImpersonation = (hooks: Hooks) => {
           size="small"
           text="Impersonate"
         />
-      </div>
-    );
-
-    return(
-      <AdminItem className={classes.inactive}>
-        {collapsed}
-        {expanded}
       </AdminItem>
     );
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.4",
+  "version": "1.4.5-2",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {