diff --git a/packages/react/src/components/Attachments/AttachmentMetadata.js b/packages/react/src/components/Attachments/AttachmentMetadata.js
new file mode 100644
index 000000000..3e8aee462
--- /dev/null
+++ b/packages/react/src/components/Attachments/AttachmentMetadata.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { ActionButton } from '../ActionButton';
+import { Box } from '../Box';
+
+const AttachmentMetadata = ({ attachment, url }) => {
+ const handleDownload = () => {
+ const anchor = document.createElement('a');
+ anchor.href = url;
+ anchor.download = attachment.title;
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ };
+
+ return (
+ <>
+
{attachment.description}
+
+ {attachment.title}
+
+
+ >
+ );
+};
+
+export default AttachmentMetadata;
diff --git a/packages/react/src/components/Attachments/AudioAttachment.js b/packages/react/src/components/Attachments/AudioAttachment.js
index f2349ce39..143a7b6e0 100644
--- a/packages/react/src/components/Attachments/AudioAttachment.js
+++ b/packages/react/src/components/Attachments/AudioAttachment.js
@@ -1,13 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
-const AudioAttachment = ({ attachment, host }) => (
-
- {attachment?.description}
-
-
-);
+const AudioAttachment = ({ attachment, host }) => {
+ return (
+
+
+
+
+ );
+};
export default AudioAttachment;
diff --git a/packages/react/src/components/Attachments/ImageAttachment.js b/packages/react/src/components/Attachments/ImageAttachment.js
index e3a650be8..98c1c38cc 100644
--- a/packages/react/src/components/Attachments/ImageAttachment.js
+++ b/packages/react/src/components/Attachments/ImageAttachment.js
@@ -1,16 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
-const ImageAttachment = ({ attachment, host }) => (
-
- {attachment?.description}
-
-
-);
+const ImageAttachment = ({ attachment, host }) => {
+ return (
+
+
+
+
+ );
+};
export default ImageAttachment;
diff --git a/packages/react/src/components/Attachments/VideoAttachment.js b/packages/react/src/components/Attachments/VideoAttachment.js
index 304a3a4da..7b82c665a 100644
--- a/packages/react/src/components/Attachments/VideoAttachment.js
+++ b/packages/react/src/components/Attachments/VideoAttachment.js
@@ -1,15 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
-const VideoAttachment = ({ attachment, host }) => (
-
- {attachment?.description}
-
-
-);
+const VideoAttachment = ({ attachment, host }) => {
+ return (
+
+
+
+
+ );
+};
export default VideoAttachment;
diff --git a/packages/react/src/components/Icon/icons/Download.js b/packages/react/src/components/Icon/icons/Download.js
new file mode 100644
index 000000000..7127ed3e3
--- /dev/null
+++ b/packages/react/src/components/Icon/icons/Download.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Download = (props) => (
+
+);
+
+export default Download;
diff --git a/packages/react/src/components/Icon/icons/index.js b/packages/react/src/components/Icon/icons/index.js
index ea226f3e4..e7aae4195 100644
--- a/packages/react/src/components/Icon/icons/index.js
+++ b/packages/react/src/components/Icon/icons/index.js
@@ -39,6 +39,7 @@ import PinFilled from './PinFilled';
import VideoRecorder from './VideoRecoder';
import DisabledRecorder from './DisableRecorder';
import Clipboard from './Clipboard';
+import Download from './Download';
const icons = {
file: File,
@@ -82,6 +83,7 @@ const icons = {
'arrow-down': ArrowDown,
'pin-filled': PinFilled,
clipboard: Clipboard,
+ download: Download,
};
export default icons;