@unitedstatespowersquadrons/components 1.3.0 → 1.3.1

package/Badges/Branch.tsx

@@ -15,19 +15,10 @@ const BranchBadge = (props: Props) => {
   const color = branch === primaryBranch ? "blue" : "orange";
   const name = badgeify(branch)!;
 
-  const img = (
-    <img src={`${shields}/badge/${name}-${color}?logo=git&logoColor=white`} />
-  );
+  const img = <img src={`${shields}/badge/${name}-${color}?logo=git&logoColor=white`} />;
   if (!effectiveRepo) return img;
 
-  return(
-    <a
-      href={`${github}/${effectiveRepo}/compare/${branch}?expand=1`}
-      rel="noreferrer" target="_blank"
-    >
-      {img}
-    </a>
-  );
+  return <a href={`${github}/${effectiveRepo}/compare/${branch}?expand=1`} rel="noreferrer" target="_blank">{img}</a>;
 };
 
 export default BranchBadge;

package/Badges/Commit.tsx

@@ -9,19 +9,10 @@ interface Props {
 const CommitBadge = (props: Props) => {
   const { commit, repo } = props;
 
-  const img = (
-    <img src={`${shields}/badge/sha-${commit.slice(0, 12)}-purple`} />
-  );
+  const img = <img src={`${shields}/badge/sha-${commit.slice(0, 12)}-purple`} />;
   if (!repo) return img;
 
-  return(
-    <a
-      href={`${github}/${repo}/commit/${commit}`}
-      rel="noreferrer" target="_blank"
-    >
-      {img}
-    </a>
-  );
+  return <a href={`${github}/${repo}/commit/${commit}`} rel="noreferrer" target="_blank">{img}</a>;
 };
 
 export default CommitBadge;

package/Badges/Date.tsx

@@ -16,15 +16,15 @@ const DateBadge = (props: Props) => {
   const color = () => {
     // Age
     if      (diff <= -60 * 60 * 24 * 14) return "63a2c7";
-    else if (diff <= -60 * 60 * 24) return "blue";
-    else if (diff <= -60 * 60) return "green";
-    else if (diff <= -60) return "yellowgreen";
+    else if (diff <= -60 * 60 * 24)      return "blue";
+    else if (diff <= -60 * 60)           return "green";
+    else if (diff <= -60)                return "yellowgreen";
 
     // Expiration Time
-    else if (diff <= 60) return "orange";
+    else if (diff <= 60)      return "orange";
     else if (diff <= 60 * 10) return "yellowgreen";
     else if (diff <= 60 * 60) return "green";
-    else return "brightgreen";
+    else                      return "brightgreen";
   };
 
   const params = new URLSearchParams();

package/Badges/PhpLibrary.tsx

@@ -14,8 +14,11 @@ const PhpLibraryBadge = (props: Props) => {
   return(
     <a href={`${github}/${php}`} rel="noreferrer" target="_blank">
       <Badge
-        color={versionColor(version)} content={version}
-        label="library" logo="php" logoColor="white"
+        color={versionColor(version)}
+        content={version}
+        label="library"
+        logo="php"
+        logoColor="white"
       />
     </a>
   );

package/Badges/Reachable.tsx

@@ -13,18 +13,15 @@ const ReachableBadge = (props: Props) => {
   const status = reachable?.status;
   const reason = reachable?.reason || "Error";
 
-  const badge = status
-    ? <Badge color="brightgreen" content="Reachable" label={host} />
-    : <Badge color="red" content={reason} label={host} />;
+  const badge = () => {
+    if (status) {
+      return <Badge color="brightgreen" content="Reachable" label={host} />;
+    } else {
+      return <Badge color="red" content={reason} label={host} />;
+    }
+  };
 
-  return(
-    <a
-      href={`https://${host}.aws.usps.org`}
-      rel="noreferrer" target="_blank"
-    >
-      {badge}
-    </a>
-  );
+  return <a href={`https://${host}.aws.usps.org`} rel="noreferrer" target="_blank">{badge()}</a>;
 };
 
 export default ReachableBadge;

package/Badges/Suite.tsx

@@ -13,10 +13,12 @@ const SuiteBadge = (props: Props) => {
 
   if (!suite || !suite.status) return null;
 
+  const { headBranch, conclusion, skipCi, status } = suite;
+
   const suiteBadgeColor = () => {
-    if (suite.skipCi) return "lightgray";
+    if (skipCi) return "lightgray";
 
-    switch (suite.status) {
+    switch (status) {
     case "queued":
     case "in_progress":
     case "requested":
@@ -25,7 +27,7 @@ const SuiteBadge = (props: Props) => {
       return "yellow";
 
     case "completed":
-      switch (suite.conclusion) {
+      switch (conclusion) {
       case "success": return "brightgreen";
       case "failure":
       case "timed_out":
@@ -39,36 +41,25 @@ const SuiteBadge = (props: Props) => {
     }
   };
 
-  const titleize = (text: string) =>
-    text.replace(/(^|\s)\S/g, t => t.toUpperCase());
+  const titleize = (text: string) => text.replace("_", " ").replace(/(^|\s)\S/g, t => t.toUpperCase());
+
+  const description = () => {
+    if (skipCi) return "Skipped";
 
-  const branch = badgeify(suite.headBranch);
-  const description = suite.skipCi
-    ? "Skipped"
-    : suite.status === "completed"
-      ? badgeify(titleize(suite.conclusion || ""))
-      : badgeify(titleize(suite.status));
+    if (status === "completed") {
+      return badgeify(titleize(conclusion || ""));
+    } else {
+      return badgeify(titleize(status));
+    }
+  };
   const color = suiteBadgeColor();
 
-  const img = (
-    <img
-      src={
-        `${shields}/badge/`
-        + `${branch}-${description || "Unknown"}-${color}`
-        + "?logo=github"
-      }
-    />
-  );
-  if (!repo || suite.conclusion === "success") return img;
+  const img =
+    <img src={`${shields}/badge/${badgeify(headBranch)}-${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 <a href={`${github}/${repo}/actions/workflows/main.yml`} rel="noreferrer" target="_blank">{img}</a>;
 };
 
 export default SuiteBadge;

package/Badges/helpers.ts

@@ -1,5 +1,3 @@
-export const badgeify = (text?: string) =>
-  text?.replaceAll("-", "--")?.replaceAll("_", "__")?.replaceAll(" ", "_");
+export const badgeify = (text?: string) => text?.replaceAll("-", "--")?.replaceAll("_", "__")?.replaceAll(" ", "_");
 
-export const versionColor = (version: string) =>
-  version.slice(0, 2) === "v0" ? "orange" : "blue";
+export const versionColor = (version: string) => version.slice(0, 2) === "v0" ? "orange" : "blue";

package/package.json

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