feat(FileCitation): add to skeleton

IQSS · Dec 21, 2023 · 4482c92 · 4482c92
1 parent 6d34d58
commit 4482c92
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 11 deletions.
diff --git a/public/locales/en/citationBlock.json b/public/locales/en/citationBlock.json
@@ -1,2 +1 @@
-{"learnAbout": "Learn About",
-  "standards": "Data Citation Standards"}
+{ "learnAbout": "Learn About", "standards": "Data Citation Standards" }
diff --git a/public/locales/en/file.json b/public/locales/en/file.json
@@ -3,6 +3,6 @@
     "metadata": "Metadata"
   },
   "subtext": "This file is part of \"{{datasetTitle}}\".",
-  "datasetCitationTitle":  "Dataset Citation",
-  "fileCitationTitle":  "File Citation"
+  "datasetCitationTitle": "Dataset Citation",
+  "fileCitationTitle": "File Citation"
 }
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
@@ -1,7 +1,7 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-    margin: 0 0 20px 0;
+    margin: 0 0 20px;
     padding: 10px 0;
     border: 1px solid $dv-info-border-color;
 }

diff --git a/src/sections/file/FileSkeleton.tsx b/src/sections/file/FileSkeleton.tsx
@@ -1,23 +1,34 @@
-import styles from '../dataset/Dataset.module.scss'
+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">
         <header className={styles.header}>
           <h1>
-            <Skeleton width="30%" />
+            <Skeleton width="15%" />
           </h1>
-          <Skeleton width="10%" />
+          <Skeleton width="20%" />
         </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>

diff --git a/src/sections/file/file-citation/FileCitation.module.scss b/src/sections/file/file-citation/FileCitation.module.scss
@@ -1,7 +1,7 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   padding: 10px 0;
   border: 1px solid $dv-secondary-color;
 }

diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx
@@ -15,6 +15,7 @@ describe('DatasetCard', () => {
     cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box'])
     cy.findByText(dataset.abbreviatedDescription).should('exist')
   })

diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx
@@ -12,6 +12,7 @@ describe('DatasetCardInfo', () => {
     cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box'])
     cy.findByText(dataset.abbreviatedDescription).should('exist')
   })
@@ -23,6 +24,7 @@ describe('DatasetCardInfo', () => {
     cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box-deaccessioned'])
   })
 })