@unitedstatespowersquadrons/components 1.4.9 → 1.4.11

package/ActionButton.tsx

@@ -14,6 +14,10 @@ const useStyles = createUseStyles({
   button: { ...Styles.button },
   darkGrayColored: { ...Styles.colorizeButton("darkGray") },
   darkGrayGray: { ...Styles.darkGray },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: "none",
+  },
   grayColored: { ...Styles.colorizeButton("gray") },
   grayGray: { ...Styles.gray },
   greenColored: { ...Styles.colorizeButton("green") },
@@ -54,6 +58,7 @@ const useStyles = createUseStyles({
 interface CoreActionButtonBaseProps extends FontAwesomeProps {
   className?: string | undefined;
   color: ButtonColorName;
+  disabled?: boolean | undefined;
   grayMode?: boolean | undefined;
   id?: string;
   rightIcon?: boolean;
@@ -99,7 +104,22 @@ export type ActionButtonProps =
 
 const ActionButton = (props: ActionButtonProps) => {
   const {
-    className, color, fa, fontSize, grayMode, icon, id, margin, mode, rightIcon, size, style, subtext, text, title,
+    className,
+    color,
+    disabled,
+    fa,
+    fontSize,
+    grayMode,
+    icon,
+    id,
+    margin,
+    mode,
+    rightIcon,
+    size,
+    style,
+    subtext,
+    text,
+    title,
   } = props;
   const classes = useStyles({
     ...(fontSize !== undefined && { fontSize }),
@@ -107,6 +127,7 @@ const ActionButton = (props: ActionButtonProps) => {
   });
 
   const colorClassName = classes[`${color}${grayMode ? "Gray" : "Colored"}`];
+  const disabledClassName = disabled ? classes.disabled : "";
 
   const sizeClassName = () => {
     switch (size) {
@@ -144,7 +165,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         id={id}
@@ -160,7 +187,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         href={href}
@@ -181,6 +214,7 @@ const ActionButton = (props: ActionButtonProps) => {
       classes.sizing,
       rightIcon ? classes.rightIcon : "",
       inline && classes.inline,
+      disabledClassName,
       className
     );
 
@@ -210,7 +244,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         id={id}

package/Badges/Tag.tsx

@@ -1,24 +1,31 @@
 import React from "react";
 import Badge from "./Badge";
 import { badgeify, versionColor } from "./helpers";
+import { github } from "./remotes";
 
 interface Props {
   version: string;
   label?: string;
   logo?: string;
+  repo?: string;
 }
 
 const TagBadge = (props: Props) => {
-  const { version, label, logo } = props;
+  const { version, label, logo, repo } = props;
 
   const badgeLabel = label ? badgeify(label) : undefined;
 
-  return(
+  const badge = (
     <Badge
       content={version} {...badgeLabel ? { label: badgeLabel } : {}}
       color={versionColor(version)} {...logo ? { logo } : {}}
-    />
-  );
+    />);
+
+  if (repo) {
+    return <a href={`${github}/${repo}`} rel="noreferrer" target="_blank">{badge}</a>;
+  } else {
+    return badge;
+  }
 };
 
 export default TagBadge;

package/package.json

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