@unitedstatespowersquadrons/components 1.3.12 → 1.3.14

package/Admin/AdminLink.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { createUseStyles } from "react-jss";
+import classNames from "classnames";
+import AdminItem from "./AdminItem";
+import Colors, { ButtonColorName } from "../Colors";
+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
+// can pass any ButtonColorName without needing to know which ones are wired up.
+const useStyles = createUseStyles({
+  blue: {
+    "& button": { ...Styles.blue },
+    "&:hover": {
+      "& button": { ...Styles.hover.blue },
+      ...Styles.hover.blue,
+    },
+    ...Styles.blue,
+  },
+  darkGray: {
+    "& button": { ...Styles.darkGray },
+    "&:hover": {
+      "& button": { ...Styles.darkGray },
+      ...Styles.darkGray,
+    },
+    ...Styles.darkGray,
+  },
+  gray: {
+    "& button": { ...Styles.gray },
+    "&:hover": {
+      "& button": { ...Styles.hover.gray },
+      ...Styles.hover.gray,
+    },
+    ...Styles.gray,
+  },
+  green: {
+    "& button": { ...Styles.green },
+    "&:hover": {
+      "& button": { ...Styles.hover.green },
+      ...Styles.hover.green,
+    },
+    ...Styles.green,
+  },
+  item: {
+    "& > span": { display: "none" },
+    "&:hover": { backgroundColor: Colors.shades._a },
+    "&:hover > span": { display: "inline-block" },
+    cursor: "pointer",
+  },
+  left: { textAlign: "left" },
+  orange: {
+    "& button": { ...Styles.orange },
+    "&:hover": {
+      "& button": { ...Styles.hover.orange },
+      ...Styles.hover.orange,
+    },
+    ...Styles.orange,
+  },
+  purple: {
+    "& button": { ...Styles.purple },
+    "&:hover": {
+      "& button": { ...Styles.hover.purple },
+      ...Styles.hover.purple,
+    },
+    ...Styles.purple,
+  },
+  red: {
+    "& button": { ...Styles.red },
+    "&:hover": {
+      "& button": { ...Styles.hover.red },
+      ...Styles.hover.red,
+    },
+    ...Styles.red,
+  },
+  subMenuIcon: {
+    fontSize: "1.5em",
+    gap: "0",
+    paddingLeft: "0",
+    paddingRight: "0",
+  },
+  subMenuText: {
+    animation: "fadeIn 100ms",
+    fontSize: "1.5em",
+    gap: "0",
+    paddingRight: "0.5em",
+  },
+});
+
+interface Props extends FontAwesomeProps {
+  className?: string;
+  color: ButtonColorName;
+  href: string;
+  subMenu?: string;
+  title: string;
+}
+
+const AdminLink = (props: Props) => {
+  const { className, color, href, icon, mode, style, subMenu, title } = props;
+  const classes = useStyles();
+
+  const colorClassName = classes[color];
+
+  return(
+    <AdminItem className={classNames(classes.item, classes.left, colorClassName)}>
+      <IconButton
+        className={classNames(classes.subMenuIcon, className)}
+        href={href}
+        icon={icon}
+        mode={mode}
+        style={style}
+        title={title}
+      />
+      <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
+    </AdminItem>
+  );
+};
+
+export default AdminLink;

package/Admin/index.tsx

@@ -1,4 +1,5 @@
 export { default as AdminItem } from "./AdminItem";
+export { default as AdminLink } from "./AdminLink";
 export { default as buildImpersonation } from "./Impersonation";
 export * from "./handlers";
 export type * from "./types";

package/Badges/Checks/Check.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { github, shields } from "../remotes";
+import { shields } from "../remotes";
 import { badgeify } from "../helpers";
 import { CheckConclusion, CheckStatus } from "../types";
 
 interface Props {
-  repo?: string | undefined;
   label: string;
   status: CheckStatus;
   conclusion?: CheckConclusion | undefined;
@@ -12,7 +11,7 @@ interface Props {
 }
 
 const CheckBadge = (props: Props) => {
-  const { conclusion, label, repo, skipCi, status } = props;
+  const { conclusion, label, skipCi, status } = props;
 
   const suiteBadgeColor = () => {
     if (skipCi) return "lightgray";
@@ -65,12 +64,7 @@ const CheckBadge = (props: Props) => {
   };
   const color = suiteBadgeColor();
 
-  const img =
-    <img src={`${shields}/badge/${badgeify(label)}-${description() || "Unknown"}-${color}?logo=github`} />;
-
-  if (!repo || conclusion === "success") return img;
-
-  return <a href={`${github}/${repo}/actions/workflows/main.yml`} rel="noreferrer" target="_blank">{img}</a>;
+  return <img src={`${shields}/badge/${badgeify(label)}-${description() || "Unknown"}-${color}?logo=github`} />;
 };
 
 export default CheckBadge;

package/Badges/Checks/Run.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Check from "./Check";
+import { github } from "../remotes";
 import { CheckRun } from "../types";
 
 interface Props {
@@ -12,11 +13,15 @@ const RunBadge = (props: Props) => {
 
   if (!run || !run.status) return null;
 
-  const { conclusion, name, status } = run;
+  const { conclusion, id, name, status } = run;
 
   const skipCi = false;
 
-  return <Check conclusion={conclusion} label={name} repo={repo} skipCi={skipCi} status={status} />;
+  const badge = <Check conclusion={conclusion} label={name} skipCi={skipCi} status={status} />;
+
+  if (!repo || conclusion === "success") return badge;
+
+  return <a href={`${github}/${repo}/runs/${id}`} rel="noreferrer" target="_blank">{badge}</a>;
 };
 
 export default RunBadge;

package/Badges/Checks/Suite.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Check from "./Check";
+import { github } from "../remotes";
 import { CheckSuite } from "../types";
 
 interface Props {
@@ -14,7 +15,13 @@ const SuiteBadge = (props: Props) => {
 
   const { headBranch, conclusion, skipCi, status } = suite;
 
-  return <Check conclusion={conclusion} label={headBranch} repo={repo} skipCi={skipCi} status={status} />;
+  const badge = <Check conclusion={conclusion} label={headBranch} skipCi={skipCi} status={status} />;
+
+  if (!repo || conclusion === "success") return badge;
+
+  return (
+    <a href={`${github}/${repo}/actions?query=branch:${headBranch}`} rel="noreferrer" target="_blank">{badge}</a>
+  );
 };
 
 export default SuiteBadge;

package/Badges/types.ts

@@ -44,6 +44,7 @@ interface Person {
 }
 
 export interface CheckRun {
+  id: number;
   name: string;
   status: CheckStatus;
   conclusion?: CheckConclusion;

package/package.json

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