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;