Remove languages from data card and display them below the hero

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Remove languages from data card and display them below the hero #1034

Closed inesdgomes closed 20 hours ago

inesdgomes commented 1 month ago

We've been finding that displaying languages in the data card is not flexible enough for all our use cases. We're thinking that it'll be more effective to decouple them from the data card and display them always under the hero card. Something like this:

See test here: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?node-id=5107-72366&t=7WD1W2uRpdvjugs8-0

And an example of UNICEF handled this: https://www.unicef.org/reports/state-worlds-children-2023

@beatrizmartinmartins Could you please:

Refine this design solution, define spacing below, after and within component; font specs; etc.
Do we need to add this as a new component to the library?
Add the component to the following templates: Publication, Resource, Event, Project, Multimedia Story
Remove languages from the data card component

FYI @justintemps so you know this is coming

inesdgomes commented 1 month ago

Hi @beatrizmartinmartins We need to move this to development soon. Could you please give us an update on this?

beatrizmartinmartins commented 1 month ago

@inesdgomes I removed the languages from the Data Card component and included it on the Hero Card component (it's not visible because it's a component propertie that is currently hidden because we don't need it anywhere, so we can always make it visible whenever we want).

Also, above you can find the different templates updated:

The spacing between the text and links is 12px in width and 8 pixels in height between one line and another so it doesn't occupy that much space.

inesdgomes commented 4 weeks ago

Hi @beatrizmartinmartins Thanks for the work on this. I think though that we shouldn't add the languages to the hero card component. This component is already quite complex and does too many things. Other than that, a few other comments:

There's a huge space between the languages and the content that comes afterwards. Was this intentional?
Find it odd that the grey label 'Content also available in' has a different font weight than the languages text. Something seems a bit off.

justintemps commented 4 weeks ago

Hey @inesdgomes and @beatrizmartinmartins, this is a design task for the website but it shouldn't affect the Design System so I think we should close this.

inesdgomes commented 4 weeks ago

Hi @beatrizmartinmartins Talked to Justin, we're keeping this design task here for now, even if it's not strictly about the design system, but rather about a specific application.

beatrizmartinmartins commented 3 weeks ago

Created the Languages component as we spoke during our weekly meeting Link to component @inesdgomes

inesdgomes commented 2 weeks ago

Thanks @beatrizmartinmartins Could you also update the templates accordingly along with spacing info? I think in the templates the languages are still part of the hero card.

beatrizmartinmartins commented 2 weeks ago

I was wondering, does it make sense to exclude it from the Hero Card? I know we don't have almost any instance where we use the dark hero card at the moment, but if we did (like this example here) the languages would be outside the hero card and might look a little bit weird right? So my point here is, should the languages really be outside of the hero card? @inesdgomes

beatrizmartinmartins commented 1 week ago

All templates are changed to what we talked during our meeting (make it a component separated from the header) @inesdgomes

inesdgomes commented 1 week ago

Thanks @beatrizmartinmartins One final request: could you please add the component to a couple of the Resource templates as well with spacing info? Thanks

beatrizmartinmartins commented 1 week ago

Hey @inesdgomes what resources file?

inesdgomes commented 1 week ago

@beatrizmartinmartins

Resource One Column: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?node-id=3847-46885&t=bnQ27Uhc3XeP5BeQ-0

Resource Two Columns: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?node-id=3847-46886&t=bnQ27Uhc3XeP5BeQ-0

beatrizmartinmartins commented 1 day ago

done @inesdgomes

inesdgomes commented 20 hours ago

Thanks, all good!

inesdgomes commented 20 hours ago

Closing this ticket because it doesn't require development in the digital design system. Changes will be applied directly in the ILO website.