feat: use featured item view in previewer

Author: g-saracca

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

@@ -137,6 +137,17 @@
         margin: 0;
         font-size: 14px;
       }
+
+      // Both of these are only beacuse block codes make card overflow
+      :global .rte-code-block {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      :global .rte-code-block code {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
     }
 
     .footer {

src/sections/edit-collection-featured-items/featured-items-form/preview-carousel/PreviewCarousel.module.scss

@@ -1,6 +1,3 @@
-@use 'sass:color';
-@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
-
 .preview-carousel-accordion {
   margin-bottom: 1rem;
 
@@ -10,7 +7,5 @@
 
   .accordion-body {
     padding: 0;
-    padding-top: 2rem;
-    background-color: color.adjust($dv-secondary-color, $lightness: 10%);
   }
 }

src/sections/edit-collection-featured-items/featured-items-form/preview-carousel/PreviewCarousel.tsx

@@ -1,7 +1,11 @@
 import { useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { Accordion } from '@iqss/dataverse-design-system'
-import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
+import {
+  CollectionFeaturedItem,
+  CustomFeaturedItem
+} from '@/collection/domain/models/CollectionFeaturedItem'
+import { FeaturedItemView } from '@/sections/featured-item/featured-item-view/FeaturedItemView'
 import { FeaturedItemsFormHelper } from '../FeaturedItemsFormHelper'
 import { FeaturedItemField } from '../../types'
 import { Slider } from './slider/Slider'
@@ -26,10 +30,10 @@ export const PreviewCarousel = () => {
             dotLabel={tCollection('featuredItems.slider.dotLabel')}
             dataTestId="featured-items-slider"
             items={formFieldsToFeaturedItems.map((featuredItem) => (
-              <div key={featuredItem.id}>
-                Mock, here we need to use the Featured Item Page component or something similar.
-                {/* <FeaturedItemCard featuredItem={featuredItem} key={featuredItem.id} /> */}
-              </div>
+              <FeaturedItemView
+                key={featuredItem.id}
+                featuredItem={featuredItem as CustomFeaturedItem}
+              />
             ))}
           />
         </Accordion.Body>

src/sections/edit-collection-featured-items/featured-items-form/preview-carousel/slider/Slider.module.scss

@@ -35,7 +35,8 @@
       flex: 0 0 100%;
       scroll-snap-align: start;
       justify-content: center;
-      max-height: 100%;
+      max-height: 70vh;
+      padding-inline: 1.5rem;
       overflow-x: hidden;
     }
   }