feat: card improvements and solve lint

Author: g-saracca

src/sections/collection/featured-items/FeaturedItemCard.tsx

@@ -2,7 +2,8 @@ import { useMemo } from 'react'
 import DOMPurify from 'dompurify'
 import { Link } from 'react-router-dom'
 import cn from 'classnames'
-import { Card } from '@iqss/dataverse-design-system'
+import { Card, Stack } from '@iqss/dataverse-design-system'
+import { BoxArrowUpRight } from 'react-bootstrap-icons'
 import {
   CollectionFeaturedItem,
   CustomFeaturedItem
@@ -55,7 +56,10 @@ export const FeaturedItemCard = ({ featuredItem, collectionId }: FeaturedItemPro
           <Link
             to={RouteWithParams.FEATURED_ITEM(collectionId, featuredItem.id.toString())}
             className="btn btn-secondary btn-sm">
-            See {getDisplayValue(featuredItem.type)}
+            <Stack direction="horizontal" gap={2}>
+              <span className={styles.cta_link_text}>See {getDisplayValue(featuredItem.type)}</span>
+              <BoxArrowUpRight size={14} />
+            </Stack>
           </Link>
         </footer>
       </Card.Body>

src/sections/collection/featured-items/FeaturedItems.module.scss

@@ -154,6 +154,11 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+
+      .cta_link_text {
+        color: color.adjust($dv-brand-color, $lightness: -9%);
+        font-weight: 500;
+      }
     }
   }
 }

src/sections/collection/featured-items/FeaturedItems.tsx

@@ -11,15 +11,13 @@ import styles from './FeaturedItems.module.scss'
 export interface FeaturedItemsProps {
   collectionRepository: CollectionRepository
   collectionId: string
-  hideTitle?: boolean
   className?: string
 }
 
 export const FeaturedItems = ({
   collectionRepository,
   collectionId,
-  className,
-  hideTitle = false
+  className
 }: FeaturedItemsProps) => {
   const { t } = useTranslation('collection')
   const theme = useTheme()
@@ -101,7 +99,7 @@ export const FeaturedItems = ({
 
   return (
     <div className={`${styles.featured_items} ${className || ''}`}>
-      {!hideTitle && <h4>{t('featuredItems.title')}</h4>}
+      <h4>{t('featuredItems.title')}</h4>
 
       <div className={styles['slider-container']} data-testid="featured-items-slider">
         {!oneItemOnly && isOverflowing && (

src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsForm.tsx

@@ -6,7 +6,10 @@ import { SortableContext } from '@dnd-kit/sortable'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
-import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
+import {
+  CollectionFeaturedItem,
+  CustomFeaturedItem
+} from '@/collection/domain/models/CollectionFeaturedItem'
 import { FeaturedItemField } from './featured-item-field/FeaturedItemField'
 import { PreviewCarousel } from './preview-carousel/PreviewCarousel'
 import { FeaturedItemFieldWithSortId, FeaturedItemsFormData } from '../types'
@@ -160,7 +163,9 @@ export const FeaturedItemsForm = ({
                   onAddField={handleOnAddField}
                   onRemoveField={handleOnRemoveField}
                   initialImageUrl={
-                    collectionFeaturedItems.find((item) => item.id === field.itemId)?.imageFileUrl
+                    (collectionFeaturedItems as CustomFeaturedItem[]).find(
+                      (item) => item.id === field.itemId
+                    )?.imageFileUrl
                   }
                   key={field.id}
                 />

src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsFormHelper.ts

@@ -1,4 +1,7 @@
-import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
+import {
+  CollectionFeaturedItem,
+  CustomFeaturedItem
+} from '@/collection/domain/models/CollectionFeaturedItem'
 import { FeaturedItemField, FeaturedItemsFormData } from '../types'
 import {
   CollectionFeaturedItemDTO,
@@ -20,7 +23,7 @@ export class FeaturedItemsFormHelper {
     }
 
     return collectionFeaturedItems.map((collectionFeaturedItem) => {
-      const { id, content, imageFileUrl } = collectionFeaturedItem
+      const { id, content, imageFileUrl } = collectionFeaturedItem as CustomFeaturedItem
 
       return {
         content,

src/sections/homepage/Homepage.module.scss

@@ -10,8 +10,26 @@
   padding-top: 2rem;
 }
 
+.separation-line {
+  width: 100%;
+  height: 1px;
+  margin: 0 auto;
+  background-color: $dv-border-color;
+  margin-block: 1.5rem;
+}
+
 .featured-items-wrapper {
   min-width: 100%;
+
+  .separation-line {
+    display: none;
+  }
+
+  &:has(h4) {
+    .separation-line {
+      display: block;
+    }
+  }
 }
 
 .middle-search-cta-wrapper {
@@ -23,11 +41,3 @@
   width: 100%;
   padding-block: 2rem;
 }
-
-.separation-line {
-  width: 100%;
-  height: 1px;
-  margin: 0 auto;
-  background-color: $dv-border-color;
-  margin-block: 1.5rem;
-}

src/sections/homepage/Homepage.tsx

@@ -14,9 +14,12 @@ interface HomepageProps {
   collectionRepository: CollectionRepository
 }
 
-// TODO:ME - Create Feaured Item by id page
-// TODO:ME - Use that page component for showing it in the preview carousel
+// TODO:ME - Add translations for home page texts
+// TODO:ME - Detect if user prefers reduced motion with javascript and avoid startValue of counter, else startValue of 0
+// TODO:ME - Placeholder skeleton featured items card while loading
 // TODO:ME - Modify card to show dvObject types and make a storybook example
+// TODO:ME - Storybook for Featured Item Page
+// TODO:ME - Unit tests for Homepage and new FeaturedItems slider
 
 export const Homepage = ({ collectionRepository }: HomepageProps) => {
   const { collection, isLoading: isLoadingCollection } = useCollection(collectionRepository)
@@ -53,10 +56,9 @@ export const Homepage = ({ collectionRepository }: HomepageProps) => {
             <FeaturedItems
               collectionRepository={collectionRepository}
               collectionId={collection.id}
-              // hideTitle
             />
+            <div className={styles['separation-line']} />
           </div>
-          <div className={styles['separation-line']} />
         </>
       )}
 

src/sections/homepage/usage/Usage.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
 
 .card {
@@ -17,8 +18,8 @@
       justify-content: flex-end;
 
       .cta_link_text {
-        color: $dv-brand-color;
-        font-weight: 600;
+        color: color.adjust($dv-brand-color, $lightness: -9%);
+        font-weight: 500;
       }
     }
   }

src/stories/homepage/Homepage.stories.tsx

@@ -2,6 +2,9 @@ import { Meta, StoryObj } from '@storybook/react'
 import Homepage from '../../sections/homepage/Homepage'
 import { WithI18next } from '../WithI18next'
 import { WithLayout } from '../WithLayout'
+import { CollectionMockRepository } from '../collection/CollectionMockRepository'
+import { CollectionFeaturedItemMother } from '@tests/component/collection/domain/models/CollectionFeaturedItemMother'
+import { FakerHelper } from '@tests/component/shared/FakerHelper'
 
 const meta: Meta<typeof Homepage> = {
   title: 'Pages/Homepage',
@@ -17,5 +20,20 @@ export default meta
 type Story = StoryObj<typeof Homepage>
 
 export const Default: Story = {
-  render: () => <Homepage />
+  render: () => <Homepage collectionRepository={new CollectionMockRepository()} />
+}
+
+const collectionRepositoryWithFeaturedItems = new CollectionMockRepository()
+collectionRepositoryWithFeaturedItems.getFeaturedItems = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        ...CollectionFeaturedItemMother.createFeaturedItems(),
+        ...CollectionFeaturedItemMother.createFeaturedItems()
+      ])
+    }, FakerHelper.loadingTimout())
+  })
+}
+export const WithFeaturedItems: Story = {
+  render: () => <Homepage collectionRepository={collectionRepositoryWithFeaturedItems} />
 }