From 31f5f3d35b7ebb49bd6532baf02956e35263b44c Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Fri, 18 Aug 2023 16:01:39 -0500
Subject: [PATCH] refactor(upload card): refactors label and button logic

---
 .../sage-react/lib/UploadCard/UploadCard.jsx  | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/sage-react/lib/UploadCard/UploadCard.jsx b/packages/sage-react/lib/UploadCard/UploadCard.jsx
index 9f05e53eda..296d17f5a4 100644
--- a/packages/sage-react/lib/UploadCard/UploadCard.jsx
+++ b/packages/sage-react/lib/UploadCard/UploadCard.jsx
@@ -54,22 +54,23 @@ export const UploadCard = ({
   );
 
   const renderLabel = () => {
-    if ((selectionLabel || replaceLabel) && !customFileInputField) {
-      return (
-        <>
-          <label htmlFor={id} className="sage-upload-card__input-label sage-btn sage-btn--secondary">{selectionLabel || replaceLabel}</label>
-        </>
-      );
-    }
-
-    if (actions) {
-      if (!customFileInputField) {
-        return (
-          <label htmlFor={id} className="visually-hidden">{selectionLabel || replaceLabel}</label>
-        );
+    let classnames = 'visually-hidden';
+    const CustomLabel = () => (
+      <>
+        <label htmlFor={id} className={classnames}>
+          {selectionLabel || replaceLabel}
+        </label>
+      </>
+    );
+    if ((selectionLabel || replaceLabel) && customFileInputField === false) {
+      classnames = 'sage-upload-card__input-label sage-btn sage-btn--secondary';
+    } else if (actions !== null) {
+      if (customFileInputField === false) {
+        classnames = 'visually-hidden';
       }
+      return actions;
     }
-    return actions;
+    return <CustomLabel />;
   };
 
   return (