Merge pull request #269 from IQSS/feature/261-file-citation-ui

261 - Add File Citation to File Page

public/locales/en/citationBlock.json

@@ -0,0 +1 @@
+{ "learnAbout": "Learn About", "standards": "Data Citation Standards" }

public/locales/en/dataset.json

@@ -14,9 +14,7 @@
       "deaccessioned": {
         "description": "DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available."
       }
-    },
-    "learnAbout": "Learn About",
-    "standards": "Data Citation Standards"
+    }
   },
   "datasetActionButtons": {
     "title": "Dataset Action Buttons",

public/locales/en/file.json

@@ -3,6 +3,8 @@
     "metadata": "Metadata"
   },
   "subtext": "This file is part of \"{{datasetTitle}}\".",
+  "datasetCitationTitle": "Dataset Citation",
+  "fileCitationTitle": "File Citation",
   "fileAccess": {
     "title": "File Access",
     "restricted": {

src/files/domain/models/File.ts

@@ -7,6 +7,7 @@ export interface FilePermissions {
 export interface File {
   name: string
   datasetVersion: DatasetVersion
+  citation: string
   restricted: boolean
   permissions: FilePermissions
 }

src/sections/dataset/Dataset.module.scss

@@ -7,7 +7,7 @@
 }
 
 .summary-container {
-  margin:1em 0;
+  margin-bottom: 1em;
 }
 
 .tab-container {

src/sections/dataset/dataset-citation/DatasetCitation.module.scss

@@ -1,16 +1,11 @@
 @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;
+    margin: 0 0 20px;
+    padding: 10px 0;
     border: 1px solid $dv-info-border-color;
 }
 
-.citation {
-    margin-bottom: 1em;
-}
-
 .deaccessioned {
     margin: 0.5rem 0;
     padding: 10px;

src/sections/dataset/dataset-citation/DatasetCitation.tsx

@@ -1,56 +1,41 @@
 import { Col, Row } from '@iqss/dataverse-design-system'
 import styles from './DatasetCitation.module.scss'
-import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail'
 import { CitationDescription } from '../../shared/citation/CitationDescription'
 import { DatasetCitationTooltip } from './DatasetCitationTooltip'
+import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout'
 
 interface DatasetCitationProps {
   thumbnail?: string
   version: DatasetVersion
+  withoutThumbnail?: boolean
 }
 
-export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
-  const { t } = useTranslation('dataset')
+export function DatasetCitation({ thumbnail, version, withoutThumbnail }: DatasetCitationProps) {
   return (
-    <>
-      <Row
-        className={
-          version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
-            ? styles.deaccessioned
-            : styles.container
-        }>
-        <Row className={styles.row}>
-          <Col sm={2} className={styles.thumbnail}>
-            <DatasetThumbnail
-              thumbnail={thumbnail}
-              title={version.title}
-              isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
-            />
-          </Col>
-          <Col>
-            <Row>
-              <span className={styles.citation}>
-                <CitationDescription citation={version.citation} />
-                <DatasetCitationTooltip status={version.publishingStatus} />
-              </span>
-            </Row>
-            <Row>
-              <div>
-                {t('citation.learnAbout')}{' '}
-                <a
-                  className={styles.link}
-                  href="https://dataverse.org/best-practices/data-citation"
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  {t('citation.standards')}.
-                </a>
-              </div>
-            </Row>
-          </Col>
-        </Row>
-      </Row>
-    </>
+    <Row
+      className={
+        version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
+          ? styles.deaccessioned
+          : styles.container
+      }>
+      {!withoutThumbnail && (
+        <Col sm={2} className={styles.thumbnail}>
+          <DatasetThumbnail
+            thumbnail={thumbnail}
+            title={version.title}
+            isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
+          />
+        </Col>
+      )}
+      <Col sm={withoutThumbnail ? 12 : 10}>
+        <CitationDescription
+          citation={version.citation}
+          tooltip={<DatasetCitationTooltip status={version.publishingStatus} />}
+        />
+        <CitationLearnAbout />
+      </Col>
+    </Row>
   )
 }

src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx

@@ -9,16 +9,11 @@ interface DatasetCitationTooltipProps {
 export function DatasetCitationTooltip({ status }: DatasetCitationTooltipProps) {
   const { t } = useTranslation('dataset')
 
-  if (status !== DatasetPublishingStatus.RELEASED) {
-    return (
-      <>
-        {' '}
-        <QuestionMarkTooltip
-          placement={'top'}
-          message={t(`citation.status.${status}.description`)}
-        />
-      </>
-    )
+  if (status === DatasetPublishingStatus.RELEASED) {
+    return <></>
   }
-  return <></>
+
+  return (
+    <QuestionMarkTooltip placement={'top'} message={t(`citation.status.${status}.description`)} />
+  )
 }

src/sections/file/File.module.scss

@@ -1,12 +1,13 @@
 @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;
 }
 
 .subtext {
   margin-bottom: 10px;
- color: $dv-subtext-color;
+  color: $dv-subtext-color;
 }
 
 .container {
@@ -18,6 +19,10 @@
   border-bottom: 1px solid #dee2e6;
 }
 
+.citation-title {
+  font-weight: $dv-font-weight-bold;
+}
+
 .labels {
   display: flex;
   align-items: center;

src/sections/file/File.tsx

@@ -1,12 +1,14 @@
 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'
+import { FileCitation } from './file-citation/FileCitation'
 import { DatasetLabels } from '../dataset/dataset-labels/DatasetLabels'
 import { FileAccessRestrictedIcon } from './file-access/FileAccessRestrictedIcon'
 
@@ -51,6 +53,14 @@ export function File({ repository, id }: FileProps) {
             </div>
           </header>
           <div className={styles.container}>
+            <Row>
+              <Col sm={9}>
+                <span className={styles['citation-title']}>{t('fileCitationTitle')}</span>
+                <FileCitation citation={file.citation} datasetVersion={file.datasetVersion} />
+                <span className={styles['citation-title']}>{t('datasetCitationTitle')}</span>
+                <DatasetCitation version={file.datasetVersion} withoutThumbnail />
+              </Col>
+            </Row>
             <Tabs defaultActiveKey="metadata">
               <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
                 <span></span>

src/sections/file/FileSkeleton.tsx

@@ -1,8 +1,10 @@
 import styles from './File.module.scss'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { Tabs } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
 
 export function FileSkeleton() {
+  const { t } = useTranslation('file')
   return (
     <SkeletonTheme>
       <article data-testid="file-skeleton">
@@ -16,11 +18,20 @@ export function FileSkeleton() {
           <Skeleton width="10%" />
         </header>
         <div className={styles.container}>
+          <Row>
+            <Col sm={9}>
+              <span className={styles['citation-title']}>{t('fileCitationTitle')}</span>
+              <Skeleton height="80px" style={{ marginBottom: 20 }} />
+              <span className={styles['citation-title']}>{t('datasetCitationTitle')}</span>
+              <Skeleton height="80px" style={{ marginBottom: 20 }} />
+            </Col>
+          </Row>
           <Tabs defaultActiveKey="metadata">
             <Tabs.Tab eventKey="metadata" title="Metadata">
-              <Skeleton height="1000px" style={{ marginTop: 20 }} />
+              <></>
             </Tabs.Tab>
           </Tabs>
+          <div className={styles['separation-line']}></div>
         </div>
       </article>
     </SkeletonTheme>

src/sections/file/file-citation/FileCitation.module.scss

@@ -0,0 +1,13 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.container {
+  margin: 0 0 20px;
+  padding: 10px 0;
+  border: 1px solid $dv-secondary-color;
+}
+
+.deaccessioned {
+  margin: 0.5rem 0;
+  padding: 10px;
+  border: 1px solid $dv-danger-color;
+}

src/sections/file/file-citation/FileCitation.tsx

@@ -0,0 +1,29 @@
+import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import styles from './FileCitation.module.scss'
+import { CitationDescription } from '../../shared/citation/CitationDescription'
+import { DatasetCitationTooltip } from '../../dataset/dataset-citation/DatasetCitationTooltip'
+import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout'
+import { Col, Row } from '@iqss/dataverse-design-system'
+
+interface FileCitationProps {
+  citation: string
+  datasetVersion: DatasetVersion
+}
+export function FileCitation({ citation, datasetVersion }: FileCitationProps) {
+  return (
+    <Row
+      className={
+        datasetVersion.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
+          ? styles.deaccessioned
+          : styles.container
+      }>
+      <Col>
+        <CitationDescription
+          citation={citation}
+          tooltip={<DatasetCitationTooltip status={datasetVersion.publishingStatus} />}
+        />
+        <CitationLearnAbout />
+      </Col>
+    </Row>
+  )
+}

src/sections/shared/citation/Citation.module.scss

@@ -0,0 +1,9 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.description {
+  margin-bottom: 1em;
+}
+
+.text {
+  color: $dv-subtext-color
+}

src/sections/shared/citation/CitationDescription.tsx

@@ -1,11 +1,20 @@
 import parse from 'html-react-parser'
+import styles from './Citation.module.scss'
+import { ReactNode } from 'react'
 
 interface CitationDescriptionProps {
   citation: string
+  tooltip?: ReactNode
 }
 
-export function CitationDescription({ citation }: CitationDescriptionProps) {
+export function CitationDescription({ citation, tooltip }: CitationDescriptionProps) {
   const citationAsReactElement = parse(citation)
 
-  return <span>{citationAsReactElement}</span>
+  return (
+    <div className={styles.description}>
+      <span>
+        {citationAsReactElement} {tooltip}
+      </span>
+    </div>
+  )
 }

src/sections/shared/citation/CitationLearnAbout.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+import styles from './Citation.module.scss'
+
+export function CitationLearnAbout() {
+  const { t } = useTranslation('citationBlock')
+  return (
+    <div>
+      <span className={styles.text}>{t('learnAbout')}</span>{' '}
+      <a
+        href="https://dataverse.org/best-practices/data-citation"
+        target="_blank"
+        rel="noopener noreferrer">
+        {t('standards')}.
+      </a>
+    </div>
+  )
+}

src/stories/dataset/Dataset.stories.tsx

@@ -4,12 +4,12 @@ import { WithLayout } from '../WithLayout'
 import { Dataset } from '../../sections/dataset/Dataset'
 import { WithAnonymizedView } from './WithAnonymizedView'
 import { WithDatasetPrivateUrl } from './WithDatasetPrivateUrl'
-import { FileMockRepository } from '../files/FileMockRepository'
+import { FileMockRepository } from '../file/FileMockRepository'
 import { WithCitationMetadataBlockInfo } from './WithCitationMetadataBlockInfo'
-import { FileMockNoDataRepository } from '../files/FileMockNoDataRepository'
+import { FileMockNoDataRepository } from '../file/FileMockNoDataRepository'
 import { WithSettings } from '../WithSettings'
-import { WithFilePermissionsDenied } from '../files/file-permission/WithFilePermissionsDenied'
-import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePermissionsGranted'
+import { WithFilePermissionsDenied } from '../file/file-permission/WithFilePermissionsDenied'
+import { WithFilePermissionsGranted } from '../file/file-permission/WithFilePermissionsGranted'
 import { WithDataset } from './WithDataset'
 import { WithDatasetDraftAsOwner } from './WithDatasetDraftAsOwner'
 import { WithDatasetNotFound } from './WithDatasetNotFound'

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