feat(DownloadFiles): add icon to the button

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;
+}

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>

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'
+        }
+      })}
+    />
+  )
 }