[Dataset page] Information block

[cmoinier]

This PR adds the information block elements to the dataset page.

What's included

• Information items (update date, categories, territories, licences, producer)
• Keywords filtering logic
• Social medias share buttons & linking logic
• e2e

What is not included

• Territoires : these two buttons are hard coded and are waiting for this field to be harvested later on.
• Social medias modal : see note in figma. it was decided that implementing a modal to write a message and post it on the user's social media was out of the scope of this PR.

Screenshot

[Angi-Kinas]

Thanks @cmoinier for adding the information block! It looks great already! 🚀
I have some comments, but mainly I noticed some small things in the design.

• For the keywords in the categories I think the row-gap should be a bit bigger (maybe gap-y-2) and then I think the same can be applied to the territory
• I am not sure about the design for the license and producer, there are two versions. One without underline and one with (but for me this looks a bit like a link), also I think in one design the value is on the next line
• the value of the producer is not on the same (baseline) as the key

Let me know if something is not clear or if you need help.

[Angi-Kinas]

Is the "(s)" needed? I did not see it in the design.

[tkohr]

Good question, if we have plural, we could also use translateParams, to display either singular or plural. Not sure if all licenses should be listed here, or just the first.

[cmoinier]

Not sure either, and they can be pretty long strings. I'm going to ask Christophe about it.

[tkohr]

Thanks for the nice component @cmoinier ! I've added a couple more ideas inline.

[cmoinier]

Thanks @Angi-Kinas and @tkohr for the reviews 🙂

The changes addressed with the last commits are :

• Moved dataset-information to the header template.
• Displayed only one license (in discussion with Christophe, might change).
• Increased the row gap for the keywords and territoires.
• Removed the underline, added weight and put the licenses and producer infos on the same line as their titles.
• Added a TODO for the territoires information
• Added tailwind components for the mel-badge-button (primary and secondary)
• Added a new tailwind component for the social media buttons

[tkohr]

Nice! Thanks, for all the rework @cmoinier!

Once the fixed width is removed from the component and the last adaptions are made, as discussed everything LGTM 🙂