feat(FileMetadata): update FileSkeleton

IQSS · Jan 16, 2024 · dad8039 · dad8039
1 parent 89f0467
commit dad8039
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 10 deletions.
diff --git a/...es-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss b/...es-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss
@@ -1,4 +1,4 @@
-∂%container {
+%container {
   position: relative;
   display: inline-block;
 }

diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss
@@ -4,6 +4,10 @@
   margin: 0.5em 0;
 }
 
+.row {
+  margin: 12px 0;
+}
+
 .subtext {
   margin-bottom: 10px;
   color: $dv-subtext-color;

diff --git a/src/sections/file/FileSkeleton.tsx b/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 { Accordion, 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">
@@ -17,8 +19,38 @@ export function FileSkeleton() {
         </header>
         <div className={styles.container}>
           <Tabs defaultActiveKey="metadata">
-            <Tabs.Tab eventKey="metadata" title="Metadata">
-              <Skeleton height="1000px" style={{ marginTop: 20 }} />
+            <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
+              <div className={styles['tab-container']}>
+                <Accordion defaultActiveKey="0">
+                  <Accordion.Item eventKey="0">
+                    <Accordion.Header>{t('metadata.title')}</Accordion.Header>
+                    <Accordion.Body>
+                      <Row className={styles.row}>
+                        <Col sm={3}>
+                          <strong>
+                            <Skeleton height="24px" />
+                          </strong>
+                        </Col>
+                        <Col>
+                          <Skeleton height="400px" width="400px" />
+                        </Col>
+                      </Row>
+                      {Array.from({ length: 25 }, (_, index) => (
+                        <Row key={index} className={styles.row}>
+                          <Col sm={3}>
+                            <strong>
+                              <Skeleton height="24px" />
+                            </strong>
+                          </Col>
+                          <Col>
+                            <Skeleton height="24px" />
+                          </Col>
+                        </Row>
+                      ))}
+                    </Accordion.Body>
+                  </Accordion.Item>
+                </Accordion>
+              </div>
             </Tabs.Tab>
           </Tabs>
         </div>

diff --git a/src/sections/file/file-metadata/FileMetadata.module.scss b/src/sections/file/file-metadata/FileMetadata.module.scss
@@ -10,4 +10,8 @@
 
 .code {
     background-color: #F0F0F0;
+}
+
+.preview > span {
+    font-size: 16.7em;
 }
diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx
@@ -23,7 +23,7 @@ export function FileMetadata({ file }: FileMetadataProps) {
             <Col sm={3}>
               <strong>{t('metadata.fields.preview')}</strong>
             </Col>
-            <Col>
+            <Col className={styles.preview}>
               <FilePreview thumbnail={file.thumbnail} type={file.type} name={file.name} />
             </Col>
           </Row>

diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts
@@ -26,7 +26,7 @@ export class FileMother {
       labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [],
       depositDate: faker.date.past(),
       publicationDate: faker.datatype.boolean() ? faker.date.past() : undefined,
-      thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined,
+      thumbnail: faker.datatype.boolean() ? faker.image.imageUrl(400) : undefined,
       directory: faker.datatype.boolean() ? faker.system.directoryPath() : undefined,
       persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined,
       downloadUrls: {

diff --git a/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx
@@ -5,7 +5,7 @@ import { FileEmbargoMother } from '../../../files/domain/models/FilePreviewMothe
 describe('FileEmbargoDate', () => {
   it('renders the embargo date when embargo exists', () => {
     const embargoDate = new Date('2123-09-18')
-    const embargo = FileEmbargoMother.create(embargoDate)
+    const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = FilePublishingStatus.RELEASED
     cy.customMount(<FileEmbargoDate embargo={embargo} publishingStatus={status} />)
     const dateString = embargoDate.toLocaleDateString(
@@ -21,7 +21,7 @@ describe('FileEmbargoDate', () => {
 
   it('renders the until embargo date when embargo is not active and the file is not released', () => {
     const embargoDate = new Date('2023-09-15')
-    const embargo = FileEmbargoMother.create(embargoDate)
+    const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = FilePublishingStatus.RELEASED
 
     cy.customMount(<FileEmbargoDate embargo={embargo} publishingStatus={status} />)
@@ -38,7 +38,7 @@ describe('FileEmbargoDate', () => {
 
   it('renders the draft until embargo date when embargo is active and the file is not released', () => {
     const embargoDate = new Date('2123-09-18')
-    const embargo = FileEmbargoMother.create(embargoDate)
+    const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = FilePublishingStatus.DRAFT
 
     cy.customMount(<FileEmbargoDate embargo={embargo} publishingStatus={status} />)
@@ -66,7 +66,7 @@ describe('FileEmbargoDate', () => {
 
   it('renders the embargo date in YYYY-MM-DD format', () => {
     const embargoDate = new Date('2123-09-18')
-    const embargo = FileEmbargoMother.create(embargoDate)
+    const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = FilePublishingStatus.RELEASED
     cy.customMount(
       <FileEmbargoDate embargo={embargo} publishingStatus={status} format="YYYY-MM-DD" />