From 9913c2772454700b3f9c9c582fd5df80e0959399 Mon Sep 17 00:00:00 2001
From: MellyGray <melinaabril@gmail.com>
Date: Tue, 19 Dec 2023 17:22:08 +0100
Subject: [PATCH] feat(FilePage): add dataset citation

---
 public/locales/en/file.json                   |  3 ++-
 .../DatasetCitation.module.scss               |  1 -
 .../dataset-citation/DatasetCitation.tsx      | 19 +++++++++++--------
 src/sections/file/File.module.scss            |  5 +++++
 src/sections/file/File.tsx                    |  9 ++++++++-
 .../DatasetCitation.stories.tsx               |  9 ++++++++-
 .../dataset-citation/DatasetCitation.spec.tsx |  8 ++++++++
 tests/component/sections/file/File.spec.tsx   |  2 ++
 8 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/public/locales/en/file.json b/public/locales/en/file.json
index 9e3bd1b68..516ac5815 100644
--- a/public/locales/en/file.json
+++ b/public/locales/en/file.json
@@ -2,5 +2,6 @@
   "tabs": {
     "metadata": "Metadata"
   },
-  "subtext": "This file is part of \"{{datasetTitle}}\"."
+  "subtext": "This file is part of \"{{datasetTitle}}\".",
+  "datasetCitation":  "Dataset Citation"
 }
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
index 4e3ecc9ea..ef29ae7bc 100644
--- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
+++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
@@ -1,7 +1,6 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-min-height: 150px;
     margin: 0.5rem 0;
     padding: 10px;
     border: 1px solid $dv-info-border-color;
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
index 976a17dc8..09494653b 100644
--- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx
+++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
@@ -8,9 +8,10 @@ import { CitationThumbnail } from './CitationThumbnail'
 interface DatasetCitationProps {
   thumbnail?: string
   version: DatasetVersion
+  withoutThumbnail?: boolean
 }
 
-export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
+export function DatasetCitation({ thumbnail, version, withoutThumbnail }: DatasetCitationProps) {
   const { t } = useTranslation('dataset')
   return (
     <>
@@ -21,13 +22,15 @@ export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={2}>
-            <CitationThumbnail
-              thumbnail={thumbnail}
-              title={version.title}
-              publishingStatus={version.publishingStatus}
-            />
-          </Col>
+          {!withoutThumbnail && (
+            <Col sm={2}>
+              <CitationThumbnail
+                thumbnail={thumbnail}
+                title={version.title}
+                publishingStatus={version.publishingStatus}
+              />
+            </Col>
+          )}
           <Col>
             <Row>
               <CitationDescription
diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss
index 2c924a81a..a6d356319 100644
--- a/src/sections/file/File.module.scss
+++ b/src/sections/file/File.module.scss
@@ -1,4 +1,5 @@
 @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";
 
 .header {
   margin: 0.5em 0;
@@ -15,4 +16,8 @@
 .separation-line {
   margin: 1em 0;
   border-bottom: 1px solid #dee2e6;
+}
+
+.citation-title {
+  font-weight: $dv-font-weight-bold;
 }
\ No newline at end of file
diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx
index 176eee903..414d6a4f9 100644
--- a/src/sections/file/File.tsx
+++ b/src/sections/file/File.tsx
@@ -1,12 +1,13 @@
 import { useTranslation } from 'react-i18next'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import styles from './File.module.scss'
-import { Tabs } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { useFile } from './useFile'
 import { useEffect } from 'react'
 import { useLoading } from '../loading/LoadingContext'
 import { FileSkeleton } from './FileSkeleton'
+import { DatasetCitation } from '../dataset/dataset-citation/DatasetCitation'
 
 interface FileProps {
   repository: FileRepository
@@ -38,6 +39,12 @@ export function File({ repository, id }: FileProps) {
             </span>
           </header>
           <div className={styles.container}>
+            <Row>
+              <Col sm={9}>
+                <span className={styles['citation-title']}>{t('datasetCitation')}</span>
+                <DatasetCitation version={file.datasetVersion} withoutThumbnail />
+              </Col>
+            </Row>
             <Tabs defaultActiveKey="metadata">
               <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
                 <span></span>
diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
index 4d8d201d2..e578f6d1e 100644
--- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
+++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -29,7 +29,7 @@ export const Default: Story = {
   }
 }
 
-export const WithThumbnail: Story = {
+export const WithThumbnailImage: Story = {
   render: () => {
     const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
     return (
@@ -91,3 +91,10 @@ export const Anonymized: Story = {
     )
   }
 }
+
+export const WithoutThumbnail: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic()
+    return <DatasetCitation withoutThumbnail version={dataset.version} />
+  }
+}
diff --git a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
index d695e40cd..4f5558af3 100644
--- a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
+++ b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
@@ -17,6 +17,7 @@ describe('DatasetCitation', () => {
     cy.findByText(/RELEASED/).should('not.exist')
     cy.findByText(/V1/).should('exist')
     cy.findByLabelText('icon-dataset').should('exist')
+    cy.findByLabelText('icon-dataset').should('exist')
   })
 
   it('shows the draft tooltip when version is draft', () => {
@@ -38,4 +39,11 @@ describe('DatasetCitation', () => {
       /DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available./
     ).should('exist')
   })
+
+  it('does not render the thumbnail when withoutThumbnail prop is true', () => {
+    const version = DatasetVersionMother.createRealistic()
+    cy.customMount(<DatasetCitation version={version} withoutThumbnail={true} />)
+
+    cy.findByLabelText('icon-dataset').should('not.exist')
+  })
 })
diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx
index 1377c092a..0340eddc1 100644
--- a/tests/component/sections/file/File.spec.tsx
+++ b/tests/component/sections/file/File.spec.tsx
@@ -15,6 +15,8 @@ describe('File', () => {
 
     cy.findAllByText(testFile.name).should('exist')
     cy.findByText(`This file is part of "${testFile.datasetVersion.title}".`).should('exist')
+    cy.findByText('Dataset Citation').should('exist')
+    cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist')
   })
 
   it('renders skeleton while loading', () => {