@unitedstatespowersquadrons/components 1.0.8 → 1.0.9

package/ActionButton.tsx

@@ -76,7 +76,7 @@ const ActionButton = (props: ActionButtonProps) => {
   const buttonContents = () => {
     return(
       <>
-        <FontAwesomeIcon icon={icon} fa={fa} mode={mode} style={style} />
+        <FontAwesomeIcon fa={fa} icon={icon} mode={mode} style={style} />
         <span>{text}</span>
         {subtext && <small className={classes.subText}>({subtext})</small>}
       </>
@@ -89,10 +89,10 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>
@@ -103,11 +103,11 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         href={href}
         id={id}
         method={method}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>
@@ -139,10 +139,10 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>

package/BaseActionButton.tsx

@@ -47,11 +47,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
     return(
       <button
-        type="button"
-        id={id}
         className={classNames("action-button", classes.button, className)}
+        id={id}
         onClick={wrappedOnClick}
         title={title}
+        type="button"
       >
         {children}
       </button>
@@ -66,8 +66,8 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
       return(
         <form action={href} method="POST" ref={formRef}>
-          <input type="hidden" name="authenticity_token" value={getCsrfTokenHeader()} />
-          <input type="hidden" name="_method" value={method.toUpperCase()} />
+          <input name="authenticity_token" type="hidden" value={getCsrfTokenHeader()} />
+          <input name="_method" type="hidden" value={method.toUpperCase()} />
         </form>
       );
     };
@@ -86,11 +86,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
       <>
         {form()}
         <button
-          type="button"
-          id={id}
           className={classNames("action-button", classes.button, className)}
+          id={id}
           onClick={submitForm}
           title={title}
+          type="button"
         >
           {children}
         </button>
@@ -109,11 +109,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
     return(
       <button
-        type="button"
-        onClick={onClick}
-        id={id}
         className={classNames("action-button", classes.button, className)}
+        id={id}
+        onClick={onClick}
         title={title}
+        type="button"
       >
         {children}
       </button>

package/Flags/Officer.tsx

@@ -80,7 +80,7 @@ const OfficerFlag = (props: Props) => {
 
   const combinedPath = `${flagBaseUrl}/${formatDir}/${subDirectory()}${displayRank}${sizeExtension}.${extension}`;
 
-  return <img className={className} src={combinedPath} alt={displayRank} />;
+  return <img alt={displayRank} className={className} src={combinedPath} />;
 };
 
 export default OfficerFlag;

package/Flags/Signal.tsx

@@ -52,7 +52,7 @@ const SignalFlag = (props: Props) => {
   const combinedUrl = `${signalBaseUrl}/${formatDir}/${dir()}/${flagValue()}.${extension}`;
 
   return (
-    <img className={className}  src={combinedUrl} alt={alt || flag} />
+    <img alt={alt || flag}  className={className} src={combinedUrl} />
   );
 };
 

package/IconButton.tsx

@@ -33,7 +33,7 @@ const IconButton = (props: IconButtonProps) => {
   const { className, fa, icon, id, mode, style, title } = props;
   const classes = useStyles();
 
-  const configuredIcon = <FontAwesomeIcon icon={icon} fa={fa} mode={mode} style={style} css={className} />;
+  const configuredIcon = <FontAwesomeIcon css={className} fa={fa} icon={icon} mode={mode} style={style} />;
 
   const combinedClassName = classNames(classes.icon, className);
 
@@ -43,10 +43,10 @@ const IconButton = (props: IconButtonProps) => {
     return(
       <BaseActionButton
         className={combinedClassName}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {configuredIcon}
       </BaseActionButton>
@@ -57,11 +57,11 @@ const IconButton = (props: IconButtonProps) => {
     return(
       <BaseActionButton
         className={combinedClassName}
+        confirm={confirm}
         href={href}
         id={id}
         method={method}
         title={title}
-        confirm={confirm}
       >
         {configuredIcon}
       </BaseActionButton>

package/SelectionIconButton.tsx

@@ -22,12 +22,12 @@ const SelectionIconButton = (props: Props) => {
 
   return(
     <IconButton
+      className={classNames(classes.icon, className)}
       icon={icon}
       id={id}
+      mode="duotone"
       onClick={onClick}
       title={title}
-      className={classNames(classes.icon, className)}
-      mode="duotone"
     />
   );
 };

package/StripedTable/Table.tsx

@@ -18,7 +18,7 @@ const Table = (props: Props) => {
   const classes = useStyles();
 
   return(
-    <table id={id} className={classNames(className, classes.table)}>
+    <table className={classNames(className, classes.table)} id={id}>
       {children}
     </table>
   );

package/Toasts/Toast.tsx

@@ -122,12 +122,12 @@ const Toast = (props: Props) => {
   return (
     <div className={classNames(classes.toast, statusClassName, opacityClass)} key={`toast-${id}`}>
       <div className={classes.toastTitle}>
-        <FontAwesomeIcon icon={icon} mode="duotone" fa="fw" />
+        <FontAwesomeIcon fa="fw" icon={icon} mode="duotone" />
         <span>{title}</span>
       </div>
       <div className={classes.toastBody}>{renderBody()}</div>
-      <a className={classes.toastDismiss} title="Dismiss this message" onClick={handleDismiss}>
-        <FontAwesomeIcon icon="times" mode="duotone" fa="fw" css={classes.toastDismissIcon} />
+      <a className={classes.toastDismiss} onClick={handleDismiss} title="Dismiss this message">
+        <FontAwesomeIcon css={classes.toastDismissIcon} fa="fw" icon="times" mode="duotone" />
       </a>
     </div>
   );

package/Toasts/Toasts.tsx

@@ -50,7 +50,7 @@ const Toasts = (props: Props) => {
 
   return (
     <div className={classNames("toastsContainer", classes.toastsContainer)}>
-      {toasts?.map(toast => <Toast dismiss={dismissFunc()} toast={toast} key={toast.id} />)}
+      {toasts?.map(toast => <Toast dismiss={dismissFunc()} key={toast.id} toast={toast} />)}
     </div>
   );
 };

package/eslint.config.mjs

@@ -145,11 +145,12 @@ export default tseslint.config(
       "stylistic/no-extra-semi": "error",
       "stylistic/semi": ["error", "always"],
       "stylistic/no-multiple-empty-lines": "error",
+      "stylistic/jsx-sort-props": "error",
       "stylistic/array-element-newline": [
         "error",
         {
           "ArrayExpression": "consistent",
-          "ArrayPattern": { "minItems": 3 },
+          "ArrayPattern": { "minItems": 5 },
         }
       ],
       "stylistic/object-property-newline": [

package/package.json

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