From dc952a6c4234c3144268c0036b317a8f90751f40 Mon Sep 17 00:00:00 2001
From: MellyGray <melinaabril@gmail.com>
Date: Thu, 26 Oct 2023 10:33:24 +0200
Subject: [PATCH] feat(DownloadFiles): add icon to the button

---
 .../DownloadFilesButton.module.scss           |  4 ++
 .../download-files/DownloadFilesButton.tsx    | 47 +++++--------------
 .../DownloadFilesButton.stories.tsx           | 16 ++++++-
 3 files changed, 31 insertions(+), 36 deletions(-)
 create mode 100644 src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.module.scss

diff --git a/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.module.scss b/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.module.scss
new file mode 100644
index 000000000..0c9c49a03
--- /dev/null
+++ b/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.module.scss
@@ -0,0 +1,4 @@
+.icon {
+  margin-right: 0.3rem;
+  margin-bottom: 0.2rem;
+}
\ No newline at end of file
diff --git a/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx b/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx
index 09374b79c..2f743dd4c 100644
--- a/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx
+++ b/src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx
@@ -1,6 +1,8 @@
 import { File } from '../../../../../../files/domain/models/File'
 import { useDataset } from '../../../../DatasetContext'
 import { Button, DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
+import { Download } from 'react-bootstrap-icons'
+import styles from './DownloadFilesButton.module.scss'
 
 interface DownloadFilesButtonProps {
   files: File[]
@@ -19,45 +21,20 @@ export function DownloadFilesButton({ files }: DownloadFilesButtonProps) {
 
   if (files.some((file) => file.isTabularData)) {
     return (
-      <DropdownButton id="download-files" title="Download" variant="secondary">
+      <DropdownButton
+        id="download-files"
+        icon={<Download className={styles.icon} />}
+        title="Download"
+        variant="secondary">
         <DropdownButtonItem>Original Format</DropdownButtonItem>
         <DropdownButtonItem>Archival Format (.tab)</DropdownButtonItem>
       </DropdownButton>
     )
   }
 
-  return <Button variant="secondary">Download</Button>
+  return (
+    <Button variant="secondary" icon={<Download className={styles.icon} />}>
+      Download
+    </Button>
+  )
 }
-
-// Original:
-// < div
-// jsf:id = "downloadButtonBlockNormal"
-// className = "btn-group"
-// jsf:rendered = "#{(!(empty DatasetPage.workingVersion.fileMetadatas)
-// and
-// DatasetPage.workingVersion.fileMetadatas.size() > 1
-// )
-// and
-// DatasetPage.downloadButtonAvailable
-// and !
-// DatasetPage.isVersionHasTabular()
-// }
-// ">
-// < p
-// :
-// commandLink
-// styleClass = "btn btn-default btn-download"
-// disabled = "#{false and DatasetPage.lockedFromDownload}"
-// onclick = "if (!testFilesSelected()) return false;"
-// action = "#{DatasetPage.startDownloadSelectedOriginal()}"
-// update = "@form"
-// oncomplete = "showPopup();" >
-//   < f
-// :
-// setPropertyActionListener
-// target = "#{DatasetPage.fileMetadataForAction}"
-// value = "#{null}" / >
-//   < span
-// className = "glyphicon glyphicon-download-alt" / > #{bundle.download}
-//   < /p:commandLink>
-// </div>
diff --git a/src/stories/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.stories.tsx
index e7649f520..61e22d129 100644
--- a/src/stories/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.stories.tsx
@@ -17,5 +17,19 @@ export default meta
 type Story = StoryObj<typeof EditFilesMenu>
 
 export const NonTabularFiles: Story = {
-  render: () => <DownloadFilesButton files={FileMother.createMany(2)} />
+  render: () => <DownloadFilesButton files={FileMother.createMany(2, { tabularData: undefined })} />
+}
+
+export const TabularFiles: Story = {
+  render: () => (
+    <DownloadFilesButton
+      files={FileMother.createMany(2, {
+        tabularData: {
+          variablesCount: 2,
+          observationsCount: 3,
+          unf: 'some-unf'
+        }
+      })}
+    />
+  )
 }