Collection Page - Cards tweaks

[g-saracca]

What this PR does / why we need it:

We've identified some discrepancies and areas for improvement in the Collection page cards (collection,dataset and file cards). This effort will address visual fixes and adjust the underlying display logic for various elements.

Collection Card :

• Affiliation inlined with the title as in JSF version.
• Parent Collection link in same line as the released date.

Dataset Card :

• Description now occupies 100% of the card width.
• Dataset Labels are displayed based on the publicationStatuses property from the search api.
• Show parent collection link.
• We are not showing version number now as in the JSF version.
• Citation DOI link was not rendered as link just text, this PR use the latest js-dataverse version that fix that.

File Card :

• Description now occupies 100% of the card width.
• Dataset parent link in same line as the released date.

Which issue(s) this PR closes:

• Closes Collection Page Items Cards tweaks #730

Special notes for your reviewer:

For roles badges I changed it to use "info" variant because now we are using "success" variant for "In Review" status badges. JSF is using also info variant but it has a lighter blue.

I've also added a border to citation boxes in dataset cards to contrast it better with the background, same for deaccessioned citation boxes.

Suggestions on how to test this:

Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && npm i && npm run build.
3. Return with cd ../../.
4. Ensure you have a .env file similar to .env.example
5. Navigate with cd dev-env.
6. Before running next step, be sure have a fresh unstable dataverse image.
7. Start the environment using ./run-env.sh unstable.
8. To verify the environment, visit http://localhost:8000/ and check your local Dataverse installation.

Step 2: Test the changes
Most of the changes here are about Collection, Dataset and File cards layout related. You can see if you are happy with the layout by looking at the stories, this for example is one of the CollectionCard stories, check also DatasetCard and FileCard stories.

1. Validate that dataset cards show correct labels (Draft, Unpublished, Deaccessioned, In Review) according to their state.
2. Validate that DOI links in Datase Cards citation box are being showed as links and not plain text.
3. Validate that Dataset cards show the parent collection link only when they are not being render in that collection specifically.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Is there a release notes update needed for this change?:

Additional documentation:

[ChengShi-1]

Great job! It looks good, just small changes.

Also, I noticed something new that I hadn't seen before. I can create a separate issue for it, or you can address it in this PR—whichever works best for you.

1. The url https://doi.org/10.5072/FK2/MJ7BPY in the card is clickable
   SPA VS JSF
   
2. The file card's description is placed differently from dataset description.
   SPA VS JSF
   

[ChengShi-1]

Do we want the solid border here for dataset card?
SPA ->

JSF ->

[g-saracca]

Yep, I've mentioned this in the PR description, what do you think about it? cc: @ekraffmiller

I've also added a border to citation boxes in dataset cards to contrast it better with the background, same for deaccessioned citation boxes.

[g-saracca]

Thanks @ChengShi-1!
About the above two comments.

Also, I noticed something new that I hadn't seen before. I can create a separate issue for it, or you can address it in this PR—whichever works best for you.

1. The url https://doi.org/10.5072/FK2/MJ7BPY in the card is clickable

That should be fixed in this PR, because it was fixed in this js-dataverse PR that is merged already and this PR is using that version, could you try to install packages again? I can see dataset citations links on my end.

2. The file card's description is placed differently from dataset description.
   SPA VS JSF

Dataset and File descriptions occupy 100% of the card width, for that they are place below as usually this cards have more information next to the icon/thumbnail.
Collection card description it's placed next to the collection icon as collection card don't have that much information.
I was not able to wrap the text as in JSF without using the float property but I think it looks fine as it is, but I can change anything if you think so 💯
See the stories:

• Collection Card
• Dataset Card
• File Card

[ChengShi-1]

Good!

[coveralls]

coverage: 97.452% (+0.07%) from 97.386%
when pulling bd7f4e7 on 730-collection-page-items-tweaks
into 16fd1ef on develop.

[ofahimIQSS]

one quick observation on the root page that displays all the data - when I do a search in JSF: ie. glomerular, the results that have that word "glomerular" appear in bold for that dataset. On the SPA, the word does not appear to be bold after searching for the word.

JSF

SPA

[g-saracca]

one quick observation on the root page that displays all the data - when I do a search in JSF: ie. glomerular, the results that have that word "glomerular" appear in bold for that dataset. On the SPA, the word does not appear to be bold after searching for the word.

Hi @ofahimIQSS , yes, that's not implemented yet and there is already an open issue for that but it's not a priority right now.

[ofahimIQSS]

testing passed- merging PR