@unitedstatespowersquadrons/components 1.4.0 → 1.4.2-1

package/ActionButton.tsx

@@ -18,6 +18,11 @@ const useStyles = createUseStyles({
   grayGray: { ...Styles.gray },
   greenColored: { ...Styles.colorizeButton("green") },
   greenGray: { ...Styles.green },
+  inline: {
+    display: "inline-flex !important",
+    margin: "0 0.25em",
+    verticalAlign: "middle",
+  },
   noMargin: { marginTop: "0" },
   orangeColored: { ...Styles.colorizeButton("orange") },
   orangeGray: { ...Styles.orange },
@@ -65,10 +70,10 @@ interface InlineProps {
   inline?: boolean;
 }
 
-export interface ActionButtonHrefProps extends CoreActionButtonProps, HrefProps, InlineProps {}
-export interface ActionButtonMethodProps extends CoreActionButtonProps, MethodProps {}
-export interface ActionButtonOnClickProps extends CoreActionButtonProps, OnClickProps {}
-export interface ActionButtonFormProps extends CoreActionButtonProps, FormProps {}
+export type ActionButtonHrefProps = CoreActionButtonProps & HrefProps & InlineProps;
+export type ActionButtonMethodProps = CoreActionButtonProps & MethodProps & InlineProps;
+export type ActionButtonOnClickProps = CoreActionButtonProps & OnClickProps & InlineProps;
+export type ActionButtonFormProps = CoreActionButtonProps & FormProps & InlineProps;
 
 export type ActionButtonProps =
   | ActionButtonHrefProps
@@ -113,11 +118,11 @@ const ActionButton = (props: ActionButtonProps) => {
   };
 
   if ("onClick" in props) {
-    const { confirm, onClick } = props;
+    const { confirm, inline, onClick } = props;
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
         confirm={confirm}
         id={id}
         onClick={onClick}
@@ -127,11 +132,11 @@ const ActionButton = (props: ActionButtonProps) => {
       </BaseActionButton>
     );
   } else if ("method" in props) {
-    const { confirm, href, method } = props;
+    const { confirm, href, inline, method } = props;
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
         confirm={confirm}
         href={href}
         id={id}
@@ -149,6 +154,7 @@ const ActionButton = (props: ActionButtonProps) => {
       colorClassName,
       sizeClassName(),
       rightIcon ? classes.rightIcon : "",
+      inline && classes.inline,
       className
     );
 
@@ -165,7 +171,7 @@ const ActionButton = (props: ActionButtonProps) => {
       </BaseActionButton>
     );
   } else if ("formId" in props) {
-    const { confirm, formId } = props;
+    const { confirm, formId, inline } = props;
 
     const onClick: OnClickHandler = () => {
       const externalForm = document.getElementById(formId) as HTMLFormElement | undefined;
@@ -177,7 +183,7 @@ const ActionButton = (props: ActionButtonProps) => {
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
         confirm={confirm}
         id={id}
         onClick={onClick}

package/IconButton.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import { createUseStyles } from "react-jss";
 import classNames from "classnames";
+import { ButtonColorName } from "./Colors";
 import FontAwesomeIcon, { FontAwesomeProps } from "./FontAwesomeIcon";
 import BaseActionButton from "./BaseActionButton";
 import { HrefProps, MethodProps, OnClickProps } from "./types";
 import Styles from "./Styles";
 
 const useStyles = createUseStyles({
+  blue: { ...Styles.blue },
+  darkGray: { ...Styles.darkGray },
+  gray: { ...Styles.gray },
+  green: { ...Styles.green },
   icon: {
-    ...Styles.blue,
     cursor: "pointer",
     fontSize: "1.1em",
   },
+  orange: { ...Styles.orange },
+  purple: { ...Styles.purple },
+  red: { ...Styles.red },
   wrapperLink: {
     display: "inline-block",
     margin: "0",
@@ -21,6 +28,7 @@ const useStyles = createUseStyles({
 
 interface CoreIconProps extends FontAwesomeProps {
   className?: string;
+  color?: ButtonColorName;
   id?: string | undefined;
   title: string;
 }
@@ -35,12 +43,12 @@ export type IconButtonProps =
   | IconButtonOnClickProps;
 
 const IconButton = (props: IconButtonProps) => {
-  const { className, fa, icon, id, mode, style, title } = props;
+  const { className, color, fa, icon, id, mode, style, title } = props;
   const classes = useStyles();
 
-  const configuredIcon = <FontAwesomeIcon css={className} fa={fa} icon={icon} mode={mode} style={style} />;
-
-  const combinedClassName = classNames(classes.icon, className);
+  const colorClassName = classes[color ?? "blue"];
+  const combinedClassName = classNames(classes.icon, colorClassName, className);
+  const configuredIcon = <FontAwesomeIcon css={combinedClassName} fa={fa} icon={icon} mode={mode} style={style} />;
 
   if ("onClick" in props) {
     const { confirm, onClick } = props;

package/package.json

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