X2-6577 Add ability to specify the caption for the button

rushi · Sep 28, 2023 · 65a1f0f · 65a1f0f
1 parent 54ba5cf
commit 65a1f0f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/ImageUpload.jsx b/src/components/ImageUpload.jsx
@@ -10,6 +10,7 @@ export const ImageUpload = ({
     maxSize = 5,
     hasDelete = true,
     requirements = null,
+    caption = null,
     csvAcceptFormats = "image/png,image/jpeg",
     onChange,
     onDelete,
@@ -41,6 +42,7 @@ export const ImageUpload = ({
     };
 
     const hasRequirements = requirements?.trim().length > 0;
+    const hasCaption = caption?.trim().length > 0;
 
     return (
         <div className={clsx("flex items-center rounded bg-gray-lighter p-4", hasDelete ? "space-x-2" : "space-x-3")}>
@@ -73,12 +75,12 @@ export const ImageUpload = ({
                                 Delete
                             </Button>
                             <SubmitButton disabled={isLoading} isLoading={isLoading} onClick={handleUploadClick}>
-                                Upload New Picture
+                                {hasCaption ? caption.trim() : "Upload New Photo"}
                             </SubmitButton>
                         </>
                     ) : (
                         <SubmitButton disabled={isLoading} isLoading={isLoading} onClick={handleUploadClick}>
-                            {src ? "Replace Photo" : "Upload New Photo"}
+                            {hasCaption ? caption.trim() : src ? "Replace Photo" : "Upload New Photo"}
                         </SubmitButton>
                     )}
                 </div>

diff --git a/src/stories/Media/ImageUpload.stories.js b/src/stories/Media/ImageUpload.stories.js
@@ -20,6 +20,7 @@ const ImageUploadStories = {
         size: "medium",
         maxSize: 5,
         hasDelete: true,
+        caption: "",
         requirements: "",
     },
     argTypes: {
@@ -43,6 +44,14 @@ const ImageUploadStories = {
                 defaultValue: { summary: "medium" },
             },
         },
+        csvAcceptFormats: {
+            description: "The caption to show on the upload button",
+            control: { type: "text" },
+            table: {
+                type: { summary: null },
+                defaultValue: { summary: "Upload New Photo" },
+            },
+        },
         isLoading: {
             control: { type: "boolean" },
             table: {
@@ -82,6 +91,7 @@ export const Default = ({
     src: source,
     size = "small",
     maxSize,
+    caption,
     csvAcceptFormats,
     hasDelete,
     requirements,
@@ -112,6 +122,7 @@ export const Default = ({
             size={size}
             isLoading={isLoading}
             maxSize={maxSize}
+            caption={caption}
             hasDelete={hasDelete}
             requirements={requirements}
             onChange={onChange}