From 5c6052eac81b920dc46fa813c879e12db0a6b2c2 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 29 Jul 2024 07:52:13 -0400
Subject: [PATCH 01/17] first iteration of FileCard.tsx

---
 .../file-card/FileCard.module.scss            | 71 +++++++++++++++++++
 .../datasets-list/file-card/FileCard.tsx      | 22 ++++++
 .../file-card/FileCardHeader.tsx              | 41 +++++++++++
 .../datasets-list/file-card/FileCardInfo.tsx  | 28 ++++++++
 .../file-card/FileCardThumbnail.tsx           | 34 +++++++++
 .../datasets-list/FileCard.stories.tsx        | 26 +++++++
 6 files changed, 222 insertions(+)
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCard.module.scss
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCard.tsx
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
 create mode 100644 src/stories/collection/datasets-list/FileCard.stories.tsx

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
new file mode 100644
index 000000000..92f7696b2
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -0,0 +1,71 @@
+@use 'sass:color';
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
+
+.container {
+  margin: 6px 0;
+  padding: 4px 10px;
+  border: 1px solid $dv-info-border-color;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  display: flex;
+
+  > * {
+    margin-right: .5em;
+  }
+}
+
+.icon {
+  margin-top: 2px;
+  font-size: 1.3em;
+
+  > div >span {
+    margin-right: 0;
+  }
+}
+
+.thumbnail {
+  width: 48px;
+  margin: 8px 12px 6px 0;
+  font-size: 2.8em;
+
+  img {
+      vertical-align: top;
+  }
+}
+
+.info {
+  display: flex;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: $dv-font-size-sm;
+}
+
+.date {
+  color: $dv-subtext-color;
+
+}
+
+.citation-box {
+  margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: color.adjust($dv-primary-color, $lightness: 51%) ;
+}
+
+.citation-box-deaccessioned {
+  margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: color.adjust($dv-danger-box-color, $lightness: 6%);
+}
\ No newline at end of file
diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
new file mode 100644
index 000000000..5b0549bc7
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -0,0 +1,22 @@
+import styles from './FileCard.module.scss'
+import { FileCardHeader } from './FileCardHeader'
+import { FileCardThumbnail } from './FileCardThumbnail'
+import { FileCardInfo } from './FileCardInfo'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+
+interface FileCardProps {
+  filePreview: FilePreview
+  persistentId: string
+}
+
+export function FileCard({ filePreview, persistentId }: FileCardProps) {
+  return (
+    <article className={styles.container}>
+      <FileCardHeader persistentId={persistentId} filePreview={filePreview} />
+      <div className={styles.info}>
+        <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
+        <FileCardInfo filePreview={filePreview} />
+      </div>
+    </article>
+  )
+}
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
new file mode 100644
index 000000000..1a983807f
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -0,0 +1,41 @@
+import styles from './FileCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
+import { DatasetIcon } from '../../../dataset/dataset-icon/DatasetIcon'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+import { FileIcon } from '../../../file/file-preview/FileIcon'
+
+interface FileCardHeaderProps {
+  persistentId: string
+  filePreview: FilePreview
+}
+function getSearchParams(
+  persistentId: string,
+  publishingStatus: DatasetPublishingStatus
+): Record<string, string> {
+  const params: Record<string, string> = { persistentId: persistentId }
+  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+    // TODO: Replace with const after merge of #442
+    params.version = 'DRAFT'
+  }
+  return params
+}
+
+export function FileCardHeader({ persistentId, filePreview }: FileCardHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={styles.title}>
+        <LinkToPage
+          page={Route.FILES}
+          searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+          {filePreview.name}
+        </LinkToPage>
+      </div>
+      <div className={styles.icon}>
+        <FileIcon type={filePreview.metadata.type} />
+      </div>
+    </div>
+  )
+}
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
new file mode 100644
index 000000000..aa62b1937
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -0,0 +1,28 @@
+import styles from './FileCard.module.scss'
+import { DateHelper } from '../../../../shared/helpers/DateHelper'
+import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+
+interface FileCardInfoProps {
+  filePreview: FilePreview
+}
+
+export function FileCardInfo({ filePreview }: FileCardInfoProps) {
+  return (
+    <div className={styles.description}>
+      <span className={styles.date}>
+        {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)}
+      </span>
+      <span
+        className={
+          filePreview.datasetPublishingStatus === DatasetPublishingStatus.DEACCESSIONED
+            ? styles['citation-box-deaccessioned']
+            : styles['citation-box']
+        }>
+        {filePreview.metadata.type.toDisplayFormat()}
+        {filePreview.metadata.checksum && filePreview.metadata.checksum.value.toString()}
+      </span>
+      <span>{filePreview.metadata.description}</span>
+    </div>
+  )
+}
diff --git a/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
new file mode 100644
index 000000000..1bcb161ed
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
@@ -0,0 +1,34 @@
+import styles from './FileCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { FileThumbnail } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+
+interface FileCardThumbnailProps {
+  persistentId: string
+  filePreview: FilePreview
+  thumbnail?: string
+}
+function getSearchParams(
+  persistentId: string,
+  publishingStatus: DatasetPublishingStatus
+): Record<string, string> {
+  const params: Record<string, string> = { persistentId: persistentId }
+  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+    // TODO: Replace with const after merge of #442
+    params.version = 'DRAFT'
+  }
+  return params
+}
+export function FileCardThumbnail({ persistentId, filePreview }: FileCardThumbnailProps) {
+  return (
+    <div className={styles.thumbnail}>
+      <LinkToPage
+        page={Route.FILES}
+        searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+        <FileThumbnail file={filePreview} />
+      </LinkToPage>
+    </div>
+  )
+}
diff --git a/src/stories/collection/datasets-list/FileCard.stories.tsx b/src/stories/collection/datasets-list/FileCard.stories.tsx
new file mode 100644
index 000000000..0b54b7e09
--- /dev/null
+++ b/src/stories/collection/datasets-list/FileCard.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { WithI18next } from '../../WithI18next'
+import { FileCard } from '../../../sections/collection/datasets-list/file-card/FileCard'
+import { FilePreviewMother } from '../../../../tests/component/files/domain/models/FilePreviewMother'
+
+const meta: Meta<typeof FileCard> = {
+  title: 'Sections/Collection Page/FileCard',
+  component: FileCard,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof FileCard>
+
+export const Default: Story = {
+  render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createDefault()} />
+}
+
+export const TabDelimited: Story = {
+  render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createTabular()} />
+}
+export const Deaccessioned: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createDeaccessioned()} />
+  )
+}

From 83827d42c4424ec96a7a3bfc74870ff53bcef41e Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 29 Jul 2024 07:52:13 -0400
Subject: [PATCH 02/17] first iteration of FileCard.tsx


From ff53150858e32060f8b23f2a3c76bab9068934c0 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 30 Jul 2024 10:37:42 -0400
Subject: [PATCH 03/17] add TabularData and ChecksumData

---
 .../datasets-list/file-card/FileCard.tsx      |  2 +-
 .../file-card/FileCardHeader.tsx              |  2 -
 .../datasets-list/file-card/FileCardInfo.tsx  | 40 +++++++++++++------
 .../datasets-list/FileCard.stories.tsx        | 10 +++--
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
index 5b0549bc7..14ea6ad5c 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -15,7 +15,7 @@ export function FileCard({ filePreview, persistentId }: FileCardProps) {
       <FileCardHeader persistentId={persistentId} filePreview={filePreview} />
       <div className={styles.info}>
         <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
-        <FileCardInfo filePreview={filePreview} />
+        <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
       </div>
     </article>
   )
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index 1a983807f..075d07a5a 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -1,8 +1,6 @@
 import styles from './FileCard.module.scss'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
-import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
-import { DatasetIcon } from '../../../dataset/dataset-icon/DatasetIcon'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
 import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 import { FileIcon } from '../../../file/file-preview/FileIcon'
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index aa62b1937..a530c714b 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -2,27 +2,43 @@ import styles from './FileCard.module.scss'
 import { DateHelper } from '../../../../shared/helpers/DateHelper'
 import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { FileChecksum, FileTabularData } from '../../../../files/domain/models/FileMetadata'
 
 interface FileCardInfoProps {
   filePreview: FilePreview
+  persistentId: string
 }
-
-export function FileCardInfo({ filePreview }: FileCardInfoProps) {
+function renderTabularData(tabularData: FileTabularData | undefined) {
+  if (!tabularData) return null
+  return (
+    <>
+      {' - '}
+      {tabularData.variablesCount} Variables, {tabularData.observationsCount} Observations -{' '}
+      {tabularData.unf}
+    </>
+  )
+}
+function renderChecksumData(checksum: FileChecksum | undefined) {
+  if (!checksum) return null
+  return (
+    <>
+      {' - '}
+      {checksum.algorithm}:{checksum.value}
+    </>
+  )
+}
+export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
-    <div className={styles.description}>
+    <div>
       <span className={styles.date}>
         {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)}
       </span>
-      <span
-        className={
-          filePreview.datasetPublishingStatus === DatasetPublishingStatus.DEACCESSIONED
-            ? styles['citation-box-deaccessioned']
-            : styles['citation-box']
-        }>
-        {filePreview.metadata.type.toDisplayFormat()}
-        {filePreview.metadata.checksum && filePreview.metadata.checksum.value.toString()}
+      <span className={styles.info}>
+        {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
+        {renderTabularData(filePreview.metadata.tabularData)}
+        {renderChecksumData(filePreview.metadata.checksum)}
       </span>
-      <span>{filePreview.metadata.description}</span>
+      <span className={styles.description}>{filePreview.metadata.description}</span>
     </div>
   )
 }
diff --git a/src/stories/collection/datasets-list/FileCard.stories.tsx b/src/stories/collection/datasets-list/FileCard.stories.tsx
index 0b54b7e09..577f93cb5 100644
--- a/src/stories/collection/datasets-list/FileCard.stories.tsx
+++ b/src/stories/collection/datasets-list/FileCard.stories.tsx
@@ -15,12 +15,16 @@ type Story = StoryObj<typeof FileCard>
 export const Default: Story = {
   render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createDefault()} />
 }
-
 export const TabDelimited: Story = {
   render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createTabular()} />
 }
-export const Deaccessioned: Story = {
+export const WithDescription: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithDescription()} />
+  )
+}
+export const WithChecksum: Story = {
   render: () => (
-    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createDeaccessioned()} />
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithChecksum()} />
   )
 }

From 94e3992cfdf524ba9f0210ad7729fbe241358cc7 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 30 Jul 2024 21:43:31 -0400
Subject: [PATCH 04/17] add DatasetLabels to FileCardHeader.tsx

---
 src/files/domain/models/FilePreview.ts        |  4 +++
 .../file-card/FileCardHeader.tsx              | 33 +++++++++++++++++--
 .../datasets-list/FileCard.stories.tsx        | 11 +++++++
 .../files/domain/models/FilePreviewMother.ts  | 12 +++++++
 4 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/files/domain/models/FilePreview.ts b/src/files/domain/models/FilePreview.ts
index b4c6b20c8..74426be1e 100644
--- a/src/files/domain/models/FilePreview.ts
+++ b/src/files/domain/models/FilePreview.ts
@@ -12,4 +12,8 @@ export interface FilePreview {
   ingest: FileIngest
   metadata: FileMetadata
   permissions: FilePermissions
+  releaseOrCreateDate?: Date
+  someDatasetVersionHasBeenReleased?: boolean
+  datasetPersistentId?: string
+  datasetName?: string
 }
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index 075d07a5a..ad50fc71d 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -2,8 +2,14 @@ import styles from './FileCard.module.scss'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
-import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+import {
+  DatasetLabel,
+  DatasetLabelSemanticMeaning,
+  DatasetLabelValue,
+  DatasetPublishingStatus
+} from '../../../../dataset/domain/models/Dataset'
 import { FileIcon } from '../../../file/file-preview/FileIcon'
+import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
 
 interface FileCardHeaderProps {
   persistentId: string
@@ -20,7 +26,24 @@ function getSearchParams(
   }
   return params
 }
-
+function getDatasetLabels(
+  datasetPublishingStatus: DatasetPublishingStatus,
+  someDatasetVersionHasBeenReleased: boolean | undefined
+) {
+  const labels: DatasetLabel[] = []
+  if (datasetPublishingStatus === DatasetPublishingStatus.DRAFT) {
+    labels.push(new DatasetLabel(DatasetLabelSemanticMeaning.DATASET, DatasetLabelValue.DRAFT))
+  }
+  if (
+    someDatasetVersionHasBeenReleased == undefined ||
+    someDatasetVersionHasBeenReleased == false
+  ) {
+    labels.push(
+      new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
+    )
+  }
+  return labels
+}
 export function FileCardHeader({ persistentId, filePreview }: FileCardHeaderProps) {
   return (
     <div className={styles.header}>
@@ -30,6 +53,12 @@ export function FileCardHeader({ persistentId, filePreview }: FileCardHeaderProp
           searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
           {filePreview.name}
         </LinkToPage>
+        <DatasetLabels
+          labels={getDatasetLabels(
+            filePreview.datasetPublishingStatus,
+            filePreview.someDatasetVersionHasBeenReleased
+          )}
+        />
       </div>
       <div className={styles.icon}>
         <FileIcon type={filePreview.metadata.type} />
diff --git a/src/stories/collection/datasets-list/FileCard.stories.tsx b/src/stories/collection/datasets-list/FileCard.stories.tsx
index 577f93cb5..780ef9812 100644
--- a/src/stories/collection/datasets-list/FileCard.stories.tsx
+++ b/src/stories/collection/datasets-list/FileCard.stories.tsx
@@ -28,3 +28,14 @@ export const WithChecksum: Story = {
     <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithChecksum()} />
   )
 }
+export const WithDraft: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithDraft()} />
+  )
+}
+
+export const ReleasedWithDraft: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createReleasedWithDraft()} />
+  )
+}
diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts
index ec11f3798..6fbfaa22a 100644
--- a/tests/component/files/domain/models/FilePreviewMother.ts
+++ b/tests/component/files/domain/models/FilePreviewMother.ts
@@ -36,6 +36,18 @@ export class FilePreviewMother {
       ...props
     })
   }
+  static createWithDraft(): FilePreview {
+    return this.createDefault({
+      datasetPublishingStatus: DatasetPublishingStatus.DRAFT
+    })
+  }
+
+  static createReleasedWithDraft(): FilePreview {
+    return this.createDefault({
+      datasetPublishingStatus: DatasetPublishingStatus.DRAFT,
+      someDatasetVersionHasBeenReleased: true
+    })
+  }
 
   static createWithEmbargo(): FilePreview {
     return this.createDefault({

From 16ee602d510dd22362348c4c00fc4fd2078a70e4 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Wed, 31 Jul 2024 18:47:00 -0400
Subject: [PATCH 05/17] update styles and display, added stories

---
 .../file-card/FileCard.module.scss            |  2 +
 .../file-card/FileCardHeader.tsx              | 11 +++--
 .../datasets-list/file-card/FileCardInfo.tsx  | 43 ++++++++++++++-----
 .../files/domain/models/FileMetadataMother.ts |  8 +++-
 .../files/domain/models/FilePreviewMother.ts  |  5 ++-
 5 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
index 92f7696b2..4321b36af 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.module.scss
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -42,12 +42,14 @@
 
 .info {
   display: flex;
+  color: $dv-subtext-color;
 }
 
 .description {
   display: flex;
   flex-direction: column;
   width: 100%;
+  color: black;
   font-size: $dv-font-size-sm;
 }
 
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index ad50fc71d..4b9889b8f 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -12,17 +12,16 @@ import { FileIcon } from '../../../file/file-preview/FileIcon'
 import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
 
 interface FileCardHeaderProps {
-  persistentId: string
   filePreview: FilePreview
 }
 function getSearchParams(
-  persistentId: string,
+  id: number,
   publishingStatus: DatasetPublishingStatus
 ): Record<string, string> {
-  const params: Record<string, string> = { persistentId: persistentId }
+  const params: Record<string, string> = { id: id.toString() }
   if (publishingStatus === DatasetPublishingStatus.DRAFT) {
     // TODO: Replace with const after merge of #442
-    params.version = 'DRAFT'
+    params.datasetVersion = 'DRAFT'
   }
   return params
 }
@@ -44,13 +43,13 @@ function getDatasetLabels(
   }
   return labels
 }
-export function FileCardHeader({ persistentId, filePreview }: FileCardHeaderProps) {
+export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
   return (
     <div className={styles.header}>
       <div className={styles.title}>
         <LinkToPage
           page={Route.FILES}
-          searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+          searchParams={getSearchParams(filePreview.id, filePreview.datasetPublishingStatus)}>
           {filePreview.name}
         </LinkToPage>
         <DatasetLabels
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index a530c714b..912b5d075 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -1,13 +1,27 @@
 import styles from './FileCard.module.scss'
 import { DateHelper } from '../../../../shared/helpers/DateHelper'
-import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
 import { FileChecksum, FileTabularData } from '../../../../files/domain/models/FileMetadata'
+import { Stack } from '@iqss/dataverse-design-system'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 
 interface FileCardInfoProps {
   filePreview: FilePreview
   persistentId: string
 }
+function getSearchParams(
+  persistentId: string,
+  publishingStatus: DatasetPublishingStatus
+): Record<string, string> {
+  const params: Record<string, string> = { persistentId: persistentId }
+  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+    // TODO: Replace with const after merge of #442
+    params.version = 'DRAFT'
+  }
+  return params
+}
 function renderTabularData(tabularData: FileTabularData | undefined) {
   if (!tabularData) return null
   return (
@@ -29,16 +43,23 @@ function renderChecksumData(checksum: FileChecksum | undefined) {
 }
 export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
-    <div>
-      <span className={styles.date}>
-        {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)}
-      </span>
-      <span className={styles.info}>
-        {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
-        {renderTabularData(filePreview.metadata.tabularData)}
-        {renderChecksumData(filePreview.metadata.checksum)}
-      </span>
-      <span className={styles.description}>{filePreview.metadata.description}</span>
+    <div className={styles.description}>
+      <Stack>
+        <span className={styles.date}>
+          {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)} -{' '}
+          <LinkToPage
+            page={Route.DATASETS}
+            searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+            {filePreview.datasetName}
+          </LinkToPage>
+        </span>
+        <span className={styles.info}>
+          {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
+          {renderTabularData(filePreview.metadata.tabularData)}
+          {renderChecksumData(filePreview.metadata.checksum)}
+        </span>
+        <span className={styles.description}>{filePreview.metadata.description}</span>
+      </Stack>
     </div>
   )
 }
diff --git a/tests/component/files/domain/models/FileMetadataMother.ts b/tests/component/files/domain/models/FileMetadataMother.ts
index 72d5baf46..96752b016 100644
--- a/tests/component/files/domain/models/FileMetadataMother.ts
+++ b/tests/component/files/domain/models/FileMetadataMother.ts
@@ -238,6 +238,7 @@ export class FileMetadataMother {
 
   static createTabular(props?: Partial<FileMetadata>): FileMetadata {
     return this.createDefault({
+      description: FakerHelper.paragraph(),
       type: FileTypeMother.createTabular(),
       tabularData: FileTabularDataMother.create(),
       ...props
@@ -246,6 +247,7 @@ export class FileMetadataMother {
 
   static createNonTabular(props?: Partial<FileMetadata>): FileMetadata {
     return this.createDefault({
+      description: FakerHelper.paragraph(),
       type: FileTypeMother.createText(),
       tabularData: undefined,
       ...props
@@ -273,13 +275,15 @@ export class FileMetadataMother {
 
   static createWithChecksum(): FileMetadata {
     return this.createDefault({
-      checksum: FileChecksumMother.create()
+      checksum: FileChecksumMother.create(),
+      description: FakerHelper.paragraph()
     })
   }
 
   static createWithNoChecksum(): FileMetadata {
     return this.createDefault({
-      checksum: undefined
+      checksum: undefined,
+      description: FakerHelper.paragraph()
     })
   }
 
diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts
index 6fbfaa22a..8aa610584 100644
--- a/tests/component/files/domain/models/FilePreviewMother.ts
+++ b/tests/component/files/domain/models/FilePreviewMother.ts
@@ -33,12 +33,15 @@ export class FilePreviewMother {
       ingest: FileIngestMother.createIngestNone(),
       metadata: FileMetadataMother.createDefault(),
       permissions: FilePermissionsMother.createWithGrantedPermissions(),
+      datasetName: 'Dataset Name',
+      someDatasetVersionHasBeenReleased: true,
       ...props
     })
   }
   static createWithDraft(): FilePreview {
     return this.createDefault({
-      datasetPublishingStatus: DatasetPublishingStatus.DRAFT
+      datasetPublishingStatus: DatasetPublishingStatus.DRAFT,
+      someDatasetVersionHasBeenReleased: false
     })
   }
 

From 28f94345951700117f54491d1d2cdc8445d7a72e Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Wed, 31 Jul 2024 19:06:16 -0400
Subject: [PATCH 06/17] re-use FileChecksum and FIleTabularData

---
 .../datasets-list/file-card/FileCard.tsx      |  2 +-
 .../datasets-list/file-card/FileCardInfo.tsx  | 31 +++++--------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
index 14ea6ad5c..a76f89044 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -12,7 +12,7 @@ interface FileCardProps {
 export function FileCard({ filePreview, persistentId }: FileCardProps) {
   return (
     <article className={styles.container}>
-      <FileCardHeader persistentId={persistentId} filePreview={filePreview} />
+      <FileCardHeader filePreview={filePreview} />
       <div className={styles.info}>
         <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
         <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index 912b5d075..ec7ea2ece 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -1,11 +1,12 @@
 import styles from './FileCard.module.scss'
 import { DateHelper } from '../../../../shared/helpers/DateHelper'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
-import { FileChecksum, FileTabularData } from '../../../../files/domain/models/FileMetadata'
 import { Stack } from '@iqss/dataverse-design-system'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+import { FileChecksum } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileChecksum'
+import { FileTabularData } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTabularData'
 
 interface FileCardInfoProps {
   filePreview: FilePreview
@@ -22,25 +23,7 @@ function getSearchParams(
   }
   return params
 }
-function renderTabularData(tabularData: FileTabularData | undefined) {
-  if (!tabularData) return null
-  return (
-    <>
-      {' - '}
-      {tabularData.variablesCount} Variables, {tabularData.observationsCount} Observations -{' '}
-      {tabularData.unf}
-    </>
-  )
-}
-function renderChecksumData(checksum: FileChecksum | undefined) {
-  if (!checksum) return null
-  return (
-    <>
-      {' - '}
-      {checksum.algorithm}:{checksum.value}
-    </>
-  )
-}
+
 export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
     <div className={styles.description}>
@@ -54,9 +37,11 @@ export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
           </LinkToPage>
         </span>
         <span className={styles.info}>
-          {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
-          {renderTabularData(filePreview.metadata.tabularData)}
-          {renderChecksumData(filePreview.metadata.checksum)}
+          <Stack gap={1} direction={'horizontal'}>
+            {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
+            <FileTabularData tabularData={filePreview.metadata.tabularData} />
+            <FileChecksum checksum={filePreview.metadata.checksum} />
+          </Stack>
         </span>
         <span className={styles.description}>{filePreview.metadata.description}</span>
       </Stack>

From 6d1c609c4cef957e416781877e77512094e103f8 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Wed, 31 Jul 2024 19:32:31 -0400
Subject: [PATCH 07/17] add component test

---
 .../datasets-list/file-card/FileCard.spec.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 tests/component/sections/collection/datasets-list/file-card/FileCard.spec.tsx

diff --git a/tests/component/sections/collection/datasets-list/file-card/FileCard.spec.tsx b/tests/component/sections/collection/datasets-list/file-card/FileCard.spec.tsx
new file mode 100644
index 000000000..d048fc5c0
--- /dev/null
+++ b/tests/component/sections/collection/datasets-list/file-card/FileCard.spec.tsx
@@ -0,0 +1,19 @@
+import { FileCard } from '../../../../../../src/sections/collection/datasets-list/file-card/FileCard'
+import { FilePreviewMother } from '../../../../files/domain/models/FilePreviewMother'
+import { DateHelper } from '../../../../../../src/shared/helpers/DateHelper'
+
+describe('FileCard', () => {
+  it('should render the card', () => {
+    const filePreview = FilePreviewMother.createTabular()
+    const persistentId = 'test-persistent-id'
+    cy.customMount(<FileCard filePreview={filePreview} persistentId={persistentId} />)
+
+    cy.contains(DateHelper.toDisplayFormat(filePreview.metadata.depositDate)).should('exist')
+    cy.contains(filePreview.metadata.type.toDisplayFormat()).should('exist')
+    cy.contains(filePreview.metadata.size.toString()).should('exist')
+    filePreview.metadata.description &&
+      cy.findByText(filePreview.metadata.description).should('exist')
+    filePreview.datasetName && cy.findByText(filePreview.datasetName).should('exist')
+    cy.contains(DateHelper.toDisplayFormat(filePreview.metadata.depositDate)).should('exist')
+  })
+})

From 56fa8832a89220ab91a44cc72452975358dfaccc Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 5 Aug 2024 16:17:48 -0400
Subject: [PATCH 08/17] Improve styles of FileCard components

---
 .../datasets-list/file-card/FileCard.module.scss   |  1 +
 .../datasets-list/file-card/FileCard.tsx           |  7 +++++--
 .../datasets-list/file-card/FileCardHeader.tsx     |  6 ++++--
 .../datasets-list/file-card/FileCardIcon.tsx       | 14 ++++++++++++++
 .../datasets-list/file-card/FileCardInfo.tsx       |  2 +-
 5 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCardIcon.tsx

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
index 4321b36af..5958bea1d 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.module.scss
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -24,6 +24,7 @@
 .icon {
   margin-top: 2px;
   font-size: 1.3em;
+  line-height: 1.1;
 
   > div >span {
     margin-right: 0;
diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
index a76f89044..33ae508bd 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -3,6 +3,7 @@ import { FileCardHeader } from './FileCardHeader'
 import { FileCardThumbnail } from './FileCardThumbnail'
 import { FileCardInfo } from './FileCardInfo'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { Stack } from '@iqss/dataverse-design-system'
 
 interface FileCardProps {
   filePreview: FilePreview
@@ -14,8 +15,10 @@ export function FileCard({ filePreview, persistentId }: FileCardProps) {
     <article className={styles.container}>
       <FileCardHeader filePreview={filePreview} />
       <div className={styles.info}>
-        <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
-        <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
+        <Stack direction={'horizontal'} gap={1}>
+          <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
+          <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
+        </Stack>
       </div>
     </article>
   )
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index 4b9889b8f..a5dfdeb33 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -8,8 +8,9 @@ import {
   DatasetLabelValue,
   DatasetPublishingStatus
 } from '../../../../dataset/domain/models/Dataset'
-import { FileIcon } from '../../../file/file-preview/FileIcon'
 import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
+import { FileCardIcon } from './FileCardIcon'
+import { FileType } from '../../../../files/domain/models/FileMetadata'
 
 interface FileCardHeaderProps {
   filePreview: FilePreview
@@ -44,6 +45,7 @@ function getDatasetLabels(
   return labels
 }
 export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
+  const iconFileType = new FileType('text/tab-separated-values', 'Comma Separated Values')
   return (
     <div className={styles.header}>
       <div className={styles.title}>
@@ -60,7 +62,7 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
         />
       </div>
       <div className={styles.icon}>
-        <FileIcon type={filePreview.metadata.type} />
+        <FileCardIcon type={iconFileType} />
       </div>
     </div>
   )
diff --git a/src/sections/collection/datasets-list/file-card/FileCardIcon.tsx b/src/sections/collection/datasets-list/file-card/FileCardIcon.tsx
new file mode 100644
index 000000000..c8f695c69
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCardIcon.tsx
@@ -0,0 +1,14 @@
+import styles from './FileCard.module.scss'
+import { IconName } from '@iqss/dataverse-design-system'
+import { FileType } from '../../../../files/domain/models/FileMetadata'
+import { FileTypeToFileIconMap } from '../../../file/file-preview/FileTypeToFileIconMap'
+
+export function FileCardIcon({ type }: { type: FileType }) {
+  const icon = FileTypeToFileIconMap[type.value] || IconName.OTHER
+
+  return (
+    <span className={`${styles.icon} ${icon} `} role="img" aria-label={icon}>
+      <title>{icon}</title>
+    </span>
+  )
+}
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index ec7ea2ece..d62b14625 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -27,7 +27,7 @@ function getSearchParams(
 export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
     <div className={styles.description}>
-      <Stack>
+      <Stack gap={1}>
         <span className={styles.date}>
           {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)} -{' '}
           <LinkToPage

From 22092daaa0d7d1e71409412ae1d7a452010a83c3 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 5 Aug 2024 16:50:49 -0400
Subject: [PATCH 09/17] fix: add padding around file icon

---
 src/sections/collection/datasets-list/file-card/FileCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
index 33ae508bd..c9a667f84 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -15,7 +15,7 @@ export function FileCard({ filePreview, persistentId }: FileCardProps) {
     <article className={styles.container}>
       <FileCardHeader filePreview={filePreview} />
       <div className={styles.info}>
-        <Stack direction={'horizontal'} gap={1}>
+        <Stack direction={'horizontal'} gap={3}>
           <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
           <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
         </Stack>

From 902339c5a65a847f7e1d7c1bfd9efce86dc55591 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 5 Aug 2024 16:59:33 -0400
Subject: [PATCH 10/17] fix: update 'docker compose'

---
 dev-env/rm-env.sh  | 2 +-
 dev-env/run-env.sh | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dev-env/rm-env.sh b/dev-env/rm-env.sh
index 1bf0a3764..69142bdca 100755
--- a/dev-env/rm-env.sh
+++ b/dev-env/rm-env.sh
@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
-docker-compose -f "./docker-compose-dev.yml" down
+docker compose -f "./docker-compose-dev.yml" down
 rm -rf ./docker-dev-volumes
diff --git a/dev-env/run-env.sh b/dev-env/run-env.sh
index 28ebd20c6..f8014c429 100755
--- a/dev-env/run-env.sh
+++ b/dev-env/run-env.sh
@@ -14,4 +14,4 @@ echo "INFO - Removing current environment if exists..."
 ./rm-env.sh
 
 echo "INFO - Running docker containers..."
-docker-compose -f "./docker-compose-dev.yml" up -d --build
+docker compose -f "./docker-compose-dev.yml" up -d --build

From 44874377241107e06be1f3c07bfda162427fb324 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 6 Aug 2024 10:21:28 -0400
Subject: [PATCH 11/17] fix: remove hard-coded search param

---
 .../collection/datasets-list/file-card/FileCardHeader.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index a5dfdeb33..5aa30c7c7 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -6,6 +6,7 @@ import {
   DatasetLabel,
   DatasetLabelSemanticMeaning,
   DatasetLabelValue,
+  DatasetNonNumericVersionSearchParam,
   DatasetPublishingStatus
 } from '../../../../dataset/domain/models/Dataset'
 import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
@@ -21,8 +22,7 @@ function getSearchParams(
 ): Record<string, string> {
   const params: Record<string, string> = { id: id.toString() }
   if (publishingStatus === DatasetPublishingStatus.DRAFT) {
-    // TODO: Replace with const after merge of #442
-    params.datasetVersion = 'DRAFT'
+    params.datasetVersion = DatasetNonNumericVersionSearchParam.DRAFT
   }
   return params
 }

From 394f0427c438b62b81f9116f12f2537b2fe5a334 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Wed, 7 Aug 2024 14:32:43 -0400
Subject: [PATCH 12/17] fix: apply requested changes

---
 .../styles/design-tokens/colors.module.scss   |  4 ++
 .../file-card/FileCard.module.scss            | 10 ++---
 .../file-card/FileCardHeader.tsx              | 44 +++----------------
 .../datasets-list/FileCard.stories.tsx        | 15 +++++--
 .../create-dataset/CreateDataset.spec.tsx     |  2 -
 tests/component/shared/FakerHelper.ts         |  4 +-
 6 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss b/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss
index 429903c63..7664187ce 100644
--- a/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss
+++ b/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss
@@ -12,6 +12,10 @@ $dv-warning-box-color: #fcf8e3;
 $dv-info-box-color: #d9edf7;
 $dv-info-border-color: #428BCA;
 
+$dv-collection-border-color: #c55b28;
+$dv-dataset-border-color: #428BCA;
+$dv-file-border-color: #808080;
+
 // Text colors
 $dv-text-color: #333;
 $dv-subtext-color: #767676;
diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
index 5958bea1d..60144e8d6 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.module.scss
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -5,7 +5,7 @@
 .container {
   margin: 6px 0;
   padding: 4px 10px;
-  border: 1px solid $dv-info-border-color;
+  border: 1px solid $dv-file-border-color;
 }
 
 .header {
@@ -14,11 +14,7 @@
 }
 
 .title {
-  display: flex;
-
-  > * {
-    margin-right: .5em;
-  }
+  display: flex;gap: 8px;
 }
 
 .icon {
@@ -48,8 +44,10 @@
 
 .description {
   display: flex;
+  display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show, apply what you think looks better */ line-clamp: 3; -webkit-box-orient: vertical;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
   color: black;
   font-size: $dv-font-size-sm;
 }
diff --git a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
index 5aa30c7c7..034e7d27b 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardHeader.tsx
@@ -2,48 +2,15 @@ import styles from './FileCard.module.scss'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
-import {
-  DatasetLabel,
-  DatasetLabelSemanticMeaning,
-  DatasetLabelValue,
-  DatasetNonNumericVersionSearchParam,
-  DatasetPublishingStatus
-} from '../../../../dataset/domain/models/Dataset'
 import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
 import { FileCardIcon } from './FileCardIcon'
 import { FileType } from '../../../../files/domain/models/FileMetadata'
+import { FileCardHelper } from './FileCardHelper'
 
 interface FileCardHeaderProps {
   filePreview: FilePreview
 }
-function getSearchParams(
-  id: number,
-  publishingStatus: DatasetPublishingStatus
-): Record<string, string> {
-  const params: Record<string, string> = { id: id.toString() }
-  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
-    params.datasetVersion = DatasetNonNumericVersionSearchParam.DRAFT
-  }
-  return params
-}
-function getDatasetLabels(
-  datasetPublishingStatus: DatasetPublishingStatus,
-  someDatasetVersionHasBeenReleased: boolean | undefined
-) {
-  const labels: DatasetLabel[] = []
-  if (datasetPublishingStatus === DatasetPublishingStatus.DRAFT) {
-    labels.push(new DatasetLabel(DatasetLabelSemanticMeaning.DATASET, DatasetLabelValue.DRAFT))
-  }
-  if (
-    someDatasetVersionHasBeenReleased == undefined ||
-    someDatasetVersionHasBeenReleased == false
-  ) {
-    labels.push(
-      new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
-    )
-  }
-  return labels
-}
+
 export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
   const iconFileType = new FileType('text/tab-separated-values', 'Comma Separated Values')
   return (
@@ -51,11 +18,14 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
       <div className={styles.title}>
         <LinkToPage
           page={Route.FILES}
-          searchParams={getSearchParams(filePreview.id, filePreview.datasetPublishingStatus)}>
+          searchParams={FileCardHelper.getFileSearchParams(
+            filePreview.id,
+            filePreview.datasetPublishingStatus
+          )}>
           {filePreview.name}
         </LinkToPage>
         <DatasetLabels
-          labels={getDatasetLabels(
+          labels={FileCardHelper.getDatasetLabels(
             filePreview.datasetPublishingStatus,
             filePreview.someDatasetVersionHasBeenReleased
           )}
diff --git a/src/stories/collection/datasets-list/FileCard.stories.tsx b/src/stories/collection/datasets-list/FileCard.stories.tsx
index 780ef9812..b66b2abe6 100644
--- a/src/stories/collection/datasets-list/FileCard.stories.tsx
+++ b/src/stories/collection/datasets-list/FileCard.stories.tsx
@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
 import { FileCard } from '../../../sections/collection/datasets-list/file-card/FileCard'
 import { FilePreviewMother } from '../../../../tests/component/files/domain/models/FilePreviewMother'
+import { FileMetadataMother } from '../../../../tests/component/files/domain/models/FileMetadataMother'
+import { FakerHelper } from '../../../../tests/component/shared/FakerHelper'
 
 const meta: Meta<typeof FileCard> = {
   title: 'Sections/Collection Page/FileCard',
@@ -18,10 +20,15 @@ export const Default: Story = {
 export const TabDelimited: Story = {
   render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createTabular()} />
 }
-export const WithDescription: Story = {
-  render: () => (
-    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithDescription()} />
-  )
+export const WithLongDescription: Story = {
+  render: () => {
+    const filePreview = FilePreviewMother.createDefault({
+      metadata: FileMetadataMother.createDefault({
+        description: FakerHelper.paragraph(20)
+      })
+    })
+    return <FileCard persistentId={'testid'} filePreview={filePreview} />
+  }
 }
 export const WithChecksum: Story = {
   render: () => (
diff --git a/tests/component/sections/create-dataset/CreateDataset.spec.tsx b/tests/component/sections/create-dataset/CreateDataset.spec.tsx
index 7bf7e5b42..e235de476 100644
--- a/tests/component/sections/create-dataset/CreateDataset.spec.tsx
+++ b/tests/component/sections/create-dataset/CreateDataset.spec.tsx
@@ -3,11 +3,9 @@ import { DatasetRepository } from '../../../../src/dataset/domain/repositories/D
 import { MetadataBlockInfoRepository } from '../../../../src/metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
 import { MetadataBlockInfoMother } from '../../metadata-block-info/domain/models/MetadataBlockInfoMother'
 import { NotImplementedModalProvider } from '../../../../src/sections/not-implemented/NotImplementedModalProvider'
-import { FileRepository } from '../../../../src/files/domain/repositories/FileRepository'
 
 const datasetRepository: DatasetRepository = {} as DatasetRepository
 const metadataBlockInfoRepository: MetadataBlockInfoRepository = {} as MetadataBlockInfoRepository
-const fileRepository: FileRepository = {} as FileRepository
 
 const collectionMetadataBlocksInfo =
   MetadataBlockInfoMother.getByCollectionIdDisplayedOnCreateTrue()
diff --git a/tests/component/shared/FakerHelper.ts b/tests/component/shared/FakerHelper.ts
index d8a1d25f7..c184ab586 100644
--- a/tests/component/shared/FakerHelper.ts
+++ b/tests/component/shared/FakerHelper.ts
@@ -83,11 +83,11 @@ export class FakerHelper {
       return faker.system.directoryPath()
     }
   }
-  static paragraph() {
+  static paragraph(sentenceCount?: number) {
     if (this.chromaticBuild()) {
       return 'Voluptas amet consectetur dolore doloribus. Cumque et quo eum voluptatem eum dolores dignissimos. Vel inventore quaerat officiis. Nobis debitis quidem hic laudantium blanditiis. Error excepturi dicta aliquam enim ducimus.'
     } else {
-      return faker.lorem.paragraph()
+      return faker.lorem.paragraph(sentenceCount)
     }
   }
   static pastDate() {

From 25278c011c4bf982da73cc7fd9be6ca6b1967640 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Wed, 7 Aug 2024 14:34:05 -0400
Subject: [PATCH 13/17] fix: move functions to FileCardHelper.ts

---
 .../datasets-list/file-card/FileCardHelper.ts | 48 +++++++++++++++++++
 .../datasets-list/file-card/FileCardInfo.tsx  | 20 +++-----
 .../file-card/FileCardThumbnail.tsx           | 19 +++-----
 3 files changed, 60 insertions(+), 27 deletions(-)
 create mode 100644 src/sections/collection/datasets-list/file-card/FileCardHelper.ts

diff --git a/src/sections/collection/datasets-list/file-card/FileCardHelper.ts b/src/sections/collection/datasets-list/file-card/FileCardHelper.ts
new file mode 100644
index 000000000..ce506c1ce
--- /dev/null
+++ b/src/sections/collection/datasets-list/file-card/FileCardHelper.ts
@@ -0,0 +1,48 @@
+import {
+  DatasetLabel,
+  DatasetLabelSemanticMeaning,
+  DatasetLabelValue,
+  DatasetNonNumericVersionSearchParam,
+  DatasetPublishingStatus
+} from '../../../../dataset/domain/models/Dataset'
+export class FileCardHelper {
+  static getDatasetSearchParams(
+    persistentId: string,
+    publishingStatus: DatasetPublishingStatus
+  ): Record<string, string> {
+    const params: Record<string, string> = { persistentId: persistentId }
+    if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+      params.version = DatasetNonNumericVersionSearchParam.DRAFT
+    }
+    return params
+  }
+  static getFileSearchParams(
+    id: number,
+    publishingStatus: DatasetPublishingStatus
+  ): Record<string, string> {
+    const params: Record<string, string> = { id: id.toString() }
+    if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+      params.datasetVersion = DatasetNonNumericVersionSearchParam.DRAFT
+    }
+    return params
+  }
+
+  static getDatasetLabels(
+    datasetPublishingStatus: DatasetPublishingStatus,
+    someDatasetVersionHasBeenReleased: boolean | undefined
+  ) {
+    const labels: DatasetLabel[] = []
+    if (datasetPublishingStatus === DatasetPublishingStatus.DRAFT) {
+      labels.push(new DatasetLabel(DatasetLabelSemanticMeaning.DATASET, DatasetLabelValue.DRAFT))
+    }
+    if (
+      someDatasetVersionHasBeenReleased == undefined ||
+      someDatasetVersionHasBeenReleased == false
+    ) {
+      labels.push(
+        new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
+      )
+    }
+    return labels
+  }
+}
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index d62b14625..0a08fae24 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -4,25 +4,14 @@ import { FilePreview } from '../../../../files/domain/models/FilePreview'
 import { Stack } from '@iqss/dataverse-design-system'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
-import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 import { FileChecksum } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileChecksum'
 import { FileTabularData } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTabularData'
+import { FileCardHelper } from './FileCardHelper'
 
 interface FileCardInfoProps {
   filePreview: FilePreview
   persistentId: string
 }
-function getSearchParams(
-  persistentId: string,
-  publishingStatus: DatasetPublishingStatus
-): Record<string, string> {
-  const params: Record<string, string> = { persistentId: persistentId }
-  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
-    // TODO: Replace with const after merge of #442
-    params.version = 'DRAFT'
-  }
-  return params
-}
 
 export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
@@ -32,12 +21,15 @@ export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
           {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)} -{' '}
           <LinkToPage
             page={Route.DATASETS}
-            searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+            searchParams={FileCardHelper.getDatasetSearchParams(
+              persistentId,
+              filePreview.datasetPublishingStatus
+            )}>
             {filePreview.datasetName}
           </LinkToPage>
         </span>
         <span className={styles.info}>
-          <Stack gap={1} direction={'horizontal'}>
+          <Stack gap={1} direction="horizontal">
             {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
             <FileTabularData tabularData={filePreview.metadata.tabularData} />
             <FileChecksum checksum={filePreview.metadata.checksum} />
diff --git a/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
index 1bcb161ed..914a66531 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
@@ -3,30 +3,23 @@ import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { FileThumbnail } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail'
 import { FilePreview } from '../../../../files/domain/models/FilePreview'
-import { DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
+import { FileCardHelper } from './FileCardHelper'
 
 interface FileCardThumbnailProps {
   persistentId: string
   filePreview: FilePreview
   thumbnail?: string
 }
-function getSearchParams(
-  persistentId: string,
-  publishingStatus: DatasetPublishingStatus
-): Record<string, string> {
-  const params: Record<string, string> = { persistentId: persistentId }
-  if (publishingStatus === DatasetPublishingStatus.DRAFT) {
-    // TODO: Replace with const after merge of #442
-    params.version = 'DRAFT'
-  }
-  return params
-}
+
 export function FileCardThumbnail({ persistentId, filePreview }: FileCardThumbnailProps) {
   return (
     <div className={styles.thumbnail}>
       <LinkToPage
         page={Route.FILES}
-        searchParams={getSearchParams(persistentId, filePreview.datasetPublishingStatus)}>
+        searchParams={FileCardHelper.getFileSearchParams(
+          filePreview.id,
+          filePreview.datasetPublishingStatus
+        )}>
         <FileThumbnail file={filePreview} />
       </LinkToPage>
     </div>

From d099622ec780dca82c70188a8a6b8854d23998da Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Thu, 8 Aug 2024 09:22:59 -0400
Subject: [PATCH 14/17] fix: separate style classes for desciption and text

---
 .../datasets-list/file-card/FileCard.module.scss           | 7 +++++--
 .../collection/datasets-list/file-card/FileCardInfo.tsx    | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
index 60144e8d6..56d3c149e 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.module.scss
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -44,12 +44,15 @@
 
 .description {
   display: flex;
-  display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show, apply what you think looks better */ line-clamp: 3; -webkit-box-orient: vertical;
+  font-size: $dv-font-size-sm;
+}
+
+.descriptionText {
+  display: -webkit-box; -webkit-line-clamp: 3;  line-clamp: 3; -webkit-box-orient: vertical;
   flex-direction: column;
   width: 100%;
   overflow: hidden;
   color: black;
-  font-size: $dv-font-size-sm;
 }
 
 .date {
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index 0a08fae24..4fd09c34a 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -35,7 +35,7 @@ export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
             <FileChecksum checksum={filePreview.metadata.checksum} />
           </Stack>
         </span>
-        <span className={styles.description}>{filePreview.metadata.description}</span>
+        <span className={styles.descriptionText}>{filePreview.metadata.description}</span>
       </Stack>
     </div>
   )

From 7018705c9ac6d94b27634eee64d500d476de9c81 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Thu, 8 Aug 2024 09:46:03 -0400
Subject: [PATCH 15/17] change <span> to <p>

---
 .../collection/datasets-list/file-card/FileCardInfo.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index 4fd09c34a..d3e2bb360 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -35,7 +35,7 @@ export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
             <FileChecksum checksum={filePreview.metadata.checksum} />
           </Stack>
         </span>
-        <span className={styles.descriptionText}>{filePreview.metadata.description}</span>
+        <p className={styles.descriptionText}>{filePreview.metadata.description}</p>
       </Stack>
     </div>
   )

From e966bc2c270cab2ae8cf88c9e4c6f4e7032017a1 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Thu, 8 Aug 2024 10:22:54 -0400
Subject: [PATCH 16/17] fix: style class names and removed unused param

---
 .../collection/datasets-list/file-card/FileCard.module.scss   | 4 ++--
 .../collection/datasets-list/file-card/FileCardInfo.tsx       | 4 ++--
 .../collection/datasets-list/file-card/FileCardThumbnail.tsx  | 3 +--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.module.scss b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
index 56d3c149e..ff436a6f8 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.module.scss
+++ b/src/sections/collection/datasets-list/file-card/FileCard.module.scss
@@ -42,12 +42,12 @@
   color: $dv-subtext-color;
 }
 
-.description {
+.card-info-container {
   display: flex;
   font-size: $dv-font-size-sm;
 }
 
-.descriptionText {
+.description {
   display: -webkit-box; -webkit-line-clamp: 3;  line-clamp: 3; -webkit-box-orient: vertical;
   flex-direction: column;
   width: 100%;
diff --git a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
index d3e2bb360..a942d2791 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardInfo.tsx
@@ -15,7 +15,7 @@ interface FileCardInfoProps {
 
 export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
   return (
-    <div className={styles.description}>
+    <div className={styles['card-info-container']}>
       <Stack gap={1}>
         <span className={styles.date}>
           {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)} -{' '}
@@ -35,7 +35,7 @@ export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
             <FileChecksum checksum={filePreview.metadata.checksum} />
           </Stack>
         </span>
-        <p className={styles.descriptionText}>{filePreview.metadata.description}</p>
+        <p className={styles.description}>{filePreview.metadata.description}</p>
       </Stack>
     </div>
   )
diff --git a/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
index 914a66531..000aaf78f 100644
--- a/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx
@@ -6,12 +6,11 @@ import { FilePreview } from '../../../../files/domain/models/FilePreview'
 import { FileCardHelper } from './FileCardHelper'
 
 interface FileCardThumbnailProps {
-  persistentId: string
   filePreview: FilePreview
   thumbnail?: string
 }
 
-export function FileCardThumbnail({ persistentId, filePreview }: FileCardThumbnailProps) {
+export function FileCardThumbnail({ filePreview }: FileCardThumbnailProps) {
   return (
     <div className={styles.thumbnail}>
       <LinkToPage

From 81959ab9417886765b66ab669eac5a63f9209def Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Thu, 8 Aug 2024 10:27:50 -0400
Subject: [PATCH 17/17] fix: lint error

---
 src/sections/collection/datasets-list/file-card/FileCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/collection/datasets-list/file-card/FileCard.tsx b/src/sections/collection/datasets-list/file-card/FileCard.tsx
index c9a667f84..a1900e4d6 100644
--- a/src/sections/collection/datasets-list/file-card/FileCard.tsx
+++ b/src/sections/collection/datasets-list/file-card/FileCard.tsx
@@ -16,7 +16,7 @@ export function FileCard({ filePreview, persistentId }: FileCardProps) {
       <FileCardHeader filePreview={filePreview} />
       <div className={styles.info}>
         <Stack direction={'horizontal'} gap={3}>
-          <FileCardThumbnail filePreview={filePreview} persistentId={persistentId} />
+          <FileCardThumbnail filePreview={filePreview} />
           <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
         </Stack>
       </div>