feat: add stories

Author: g-saracca

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss

@@ -68,7 +68,7 @@
 }
 
 .card-body-container {
-  align-self: flex-start;
+  align-items: flex-start;
   font-size: $dv-font-size-sm;
 
   .release-or-create-date {

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx

@@ -12,6 +12,8 @@ interface CollectionCardBodyProps {
   parentCollectionAlias?: string
 }
 
+// TODO:ME - Add unit test for dataset card parent collection link.
+
 export const CollectionCardBody = ({
   collectionPreview,
   parentCollectionAlias
@@ -20,28 +22,32 @@ export const CollectionCardBody = ({
     !!parentCollectionAlias && collectionPreview.parentCollectionAlias === parentCollectionAlias
 
   return (
-    <Stack direction="vertical" gap={2} className={styles['card-body-container']}>
-      <Stack direction="horizontal" gap={3}>
-        <CollectionCardThumbnail collectionPreview={collectionPreview} />
-        <Stack direction="vertical" gap={1}>
+    <Stack direction="horizontal" gap={3} className={styles['card-body-container']}>
+      <CollectionCardThumbnail collectionPreview={collectionPreview} />
+      <Stack direction="vertical" gap={1}>
+        <Stack direction="horizontal" gap={1}>
           <time
             dateTime={collectionPreview.releaseOrCreateDate.toLocaleDateString()}
             className={styles['release-or-create-date']}>
             {DateHelper.toDisplayFormat(collectionPreview.releaseOrCreateDate)}
           </time>
           {!isStandingOnParentCollectionPage && (
-            <LinkToPage
-              type={DvObjectType.COLLECTION}
-              page={Route.COLLECTIONS}
-              searchParams={{ id: collectionPreview.parentCollectionAlias?.toString() }}>
-              {collectionPreview.parentCollectionName}
-            </LinkToPage>
+            <span className={styles['link-to-collection-wrapper']}>
+              <span>- </span>
+              <LinkToPage
+                type={DvObjectType.COLLECTION}
+                page={Route.COLLECTIONS}
+                searchParams={{ id: collectionPreview.parentCollectionAlias?.toString() }}>
+                {collectionPreview.parentCollectionName}
+              </LinkToPage>
+            </span>
           )}
         </Stack>
+
+        {collectionPreview.description && (
+          <p className={styles.description}>{collectionPreview.description}</p>
+        )}
       </Stack>
-      {collectionPreview.description && (
-        <p className={styles.description}>{collectionPreview.description}</p>
-      )}
     </Stack>
   )
 }

src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss

@@ -64,7 +64,7 @@
 }
 
 .card-body-container {
-  align-self: flex-start;
+  align-items: flex-start;
   font-size: $dv-font-size-sm;
 
   .release-or-create-date {

src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx

@@ -25,21 +25,24 @@ export const FileCardBody = ({ filePreview }: FileCardBodyProps) => {
       <Stack direction="horizontal" gap={3} style={{ alignItems: 'flex-start' }}>
         <FileCardThumbnail filePreview={filePreview} />
         <Stack direction="vertical" gap={1}>
-          <Stack direction="vertical" gap={1}>
+          <Stack direction="horizontal" gap={1}>
             <time
               dateTime={filePreview.releaseOrCreateDate.toLocaleDateString()}
               className={styles['release-or-create-date']}>
               {DateHelper.toDisplayFormat(filePreview.releaseOrCreateDate)}
             </time>
-            <LinkToPage
-              page={Route.DATASETS}
-              type={DvObjectType.DATASET}
-              searchParams={FileCardHelper.getDatasetSearchParams(
-                filePreview.datasetPersistentId,
-                filePreview.publicationStatuses.includes(PublicationStatus.Draft)
-              )}>
-              {filePreview.datasetName}
-            </LinkToPage>
+            <span className={styles['link-to-collection-wrapper']}>
+              <span>- </span>
+              <LinkToPage
+                page={Route.DATASETS}
+                type={DvObjectType.DATASET}
+                searchParams={FileCardHelper.getDatasetSearchParams(
+                  filePreview.datasetPersistentId,
+                  filePreview.publicationStatuses.includes(PublicationStatus.Draft)
+                )}>
+                {filePreview.datasetName}
+              </LinkToPage>
+            </span>
           </Stack>
           <div className={styles.info}>
             <span>{filePreview.fileType}</span>

src/stories/collection/collection-items-panel/DatasetCard.stories.tsx

@@ -16,10 +16,24 @@ export const Default: Story = {
   render: () => <DatasetCard datasetPreview={DatasetItemTypePreviewMother.createDraft()} />
 }
 
+export const Published: Story = {
+  render: () => <DatasetCard datasetPreview={DatasetItemTypePreviewMother.create()} />
+}
+
+export const DraftAndUnpublished: Story = {
+  render: () => (
+    <DatasetCard datasetPreview={DatasetItemTypePreviewMother.createDraftAndUnpublished()} />
+  )
+}
+
 export const Deaccessioned: Story = {
   render: () => <DatasetCard datasetPreview={DatasetItemTypePreviewMother.createDeaccessioned()} />
 }
 
+export const InReview: Story = {
+  render: () => <DatasetCard datasetPreview={DatasetItemTypePreviewMother.createInReview()} />
+}
+
 export const WithThumbnail: Story = {
   render: () => <DatasetCard datasetPreview={DatasetItemTypePreviewMother.createWithThumbnail()} />
 }

tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts

@@ -62,6 +62,14 @@ export class DatasetItemTypePreviewMother {
     })
   }
 
+  static createDraftAndUnpublished(): DatasetItemTypePreview {
+    return this.create({
+      version: DatasetVersionMother.createNotReleased(),
+      publicationStatuses: [PublicationStatus.Unpublished, PublicationStatus.Draft],
+      thumbnail: undefined
+    })
+  }
+
   static createWithThumbnail(): DatasetItemTypePreview {
     return this.create({ thumbnail: FakerHelper.getImageUrl() })
   }
@@ -72,7 +80,16 @@ export class DatasetItemTypePreviewMother {
 
   static createDeaccessioned(): DatasetItemTypePreview {
     return this.create({
-      version: DatasetVersionMother.createDeaccessioned()
+      version: DatasetVersionMother.createDeaccessioned(),
+      publicationStatuses: [PublicationStatus.Deaccessioned]
+    })
+  }
+
+  static createInReview(): DatasetItemTypePreview {
+    return this.create({
+      version: DatasetVersionMother.createDraft(),
+      publicationStatuses: [PublicationStatus.Draft, PublicationStatus.InReview],
+      thumbnail: undefined
     })
   }
 }