add footer action button text props

Author: karthikjeeyar

packages/module/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -51,4 +51,22 @@ describe('AttachmentEdit', () => {
     fireEvent.click(screen.getByText('Cancel'));
     expect(onCancelHandler).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    screen.getByText('Save');
+    screen.getByText('Close');
+  });
 });

packages/module/src/AttachmentEdit/AttachmentEdit.tsx

@@ -24,6 +24,10 @@ export interface AttachmentEditProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
 }
 
 export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
@@ -35,7 +39,9 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   onSave,
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
-  isCompact
+  isCompact,
+  primaryActionButtonText = 'Save',
+  secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
   const handleSave = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent, code) => {
     handleModalToggle(_event);
@@ -55,8 +61,8 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleSave}
       onSecondaryAction={handleCancel}
-      primaryActionBtn="Save"
-      secondaryActionBtn="Cancel"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       displayMode={displayMode}
       isCompact={isCompact}

packages/module/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -47,4 +47,21 @@ describe('PreviewAttachment', () => {
 
     expect(onDismiss).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    screen.getByText('Edit');
+    screen.getByText('Close');
+  });
 });

packages/module/src/PreviewAttachment/PreviewAttachment.tsx

@@ -24,6 +24,10 @@ export interface PreviewAttachmentProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
 }
 
 export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
@@ -34,6 +38,8 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
+  primaryActionButtonText = 'Edit',
+  secondaryActionButtonText = 'Dismiss',
   displayMode = ChatbotDisplayMode.default,
   isCompact
 }: PreviewAttachmentProps) => {
@@ -58,8 +64,8 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleEdit}
       onSecondaryAction={handleDismiss}
-      primaryActionBtn="Edit"
-      secondaryActionBtn="Dismiss"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       isReadOnly
       displayMode={displayMode}