Logo grid: document and improve component

inesdgomes commented 5 months ago

We developed a new component called 'logo grid' that is not properly documented. The component now exists in storybook but not in Figma. The developers followed the style used on this page: https://www.figma.com/file/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?type=design&node-id=3796-41633&mode=design&t=GCP28TXoAdcuBckG-0

We need to create the component in Figma and document it correctly. Besides, we need to do the following changes:

Increase the size of the logos' images. At the moment, the logos can be a maximum of 150px wide and 50px high. The component will render them as high and as wide as possible until they hit one of those two limits.
Design for scenarios when CMS editors use only one or two logos

FYI @justintemps Assigning this to Beatriz but copying you so know it's coming up.

inesdgomes commented 5 months ago

@beatrizmartinmartins Could we aim for 22 April to have this ready?

beatrizmartinmartins commented 5 months ago

@inesdgomes you can check the designs on the template here. The container is flexed, this means that depending on the screen size, it will adquire the full-width of it's own container. Also you can check the component here

inesdgomes commented 5 months ago

Thanks @beatrizmartinmartins I think we still need to increase the maximum height in the 3 tile grid. The design is assuming all logos have a similar size/layout. Here's an example we can look at together tomorrow (scroll to the bottom of the page): https://www-preview.ilo.org/topics/safety-and-health-work/programmes-projects/safety-health-all

beatrizmartinmartins commented 5 months ago

Could you update the link? I can't open it @inesdgomes

inesdgomes commented 4 months ago

@beatrizmartinmartins Yes, sorry. Here you go: https://www.ilo.org/topics/safety-and-health-work/programmes-projects/safety-health-all

inesdgomes commented 4 months ago

To move to development on 16 May

beatrizmartinmartins commented 4 months ago

Template with real logos: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?m=auto&node-id=4887%3A1800700&t=sRRyckchF3r0xlVV-1 @inesdgomes

inesdgomes commented 4 months ago

Hi @beatrizmartinmartins Thanks. A few requests:

In the template with real logos, could you please tweak the logo images so they don't have any empty space around them? They should all fit perfectly in the available container so they're all the same height or same width.
Could you clean up the social media component in the library so developers can refer to it when implementing the changes?
Please also detail here in a comment what changed design-wise (how was it before / how is it now) so it's easier for developers to apply the changes.

Thank you!

beatrizmartinmartins commented 4 months ago

Hey @inesdgomes !

Just tweak them so they fit perfectly on their respective variant. It will look good on the templates, but keep in mind that is not realistic unless someone changes them.
What do you mean by that? Don't have the logos and just keep the default images like these ones?

Will do in a different comment so it's easier to follow up.

beatrizmartinmartins commented 4 months ago

Hey team! So for the Logo Grid component, previously we had a simple variant with a max-width container surrounded by a 24px spacing on the borders of the image container. This worked for logos that where displayed horizontally (like Nike for example) but it constrained the logos that are higher than wider. Since we couldn't figure out how to make sure that all logos fit properly on the same container, we opted to create another variant.

Now we have a "Horizontal Image" and "Vertical Image" option to choose from. Both are different in terms of min-width and the spacing around them, making the logos easier to adjust to the container. Of course it also depends on the logo provided by the user and the black space that can have around it, but we tested a few logos that are currently on this page and they all work correctly when applied it's own variant.

Please let me know if everything is explained and if you need more context. You can check the updated component on this link

@justintemps

inesdgomes commented 4 months ago

Thanks @beatrizmartinmartins Just to avoid any confusion/inconsistency, please update the component description before we move it to development.

beatrizmartinmartins commented 4 months ago

@inesdgomes It's documented on the real component

inesdgomes commented 4 months ago

Thank you @beatrizmartinmartins. @justintemps We can move this to development. See here Beatriz's explanation: https://github.com/international-labour-organization/designsystem/issues/954#issuecomment-2124494243

inesdgomes commented 4 months ago

Apologies, my bad, not yet. We still need to address one thing: what happens when only one or two logos are shown? @beatrizmartinmartins Could you please test these scenarios? We've seen situations where CMS users only uploaded one or two logos and it doesn't look great. Should the grid adjust somehow in those cases? For example, if there's only one logo, should it be bigger or centered?

Here's an example:

Maybe this won't be an issue anymore after the changes you made, but let me know what you think.

inesdgomes commented 4 months ago

@beatrizmartinmartins Just a kind reminder on this one too, as we need to move it to development. Thanks

beatrizmartinmartins commented 3 months ago

I think it would be better if the images are full width within the container. I don't think the logos need to be bigger because they are not that important within the context and if they get too big they can occupy a lot of space within the screen but they will be centered on it's own container.. You can check all possible scenarios in here Do you think it can make sense @inesdgomes ? Or should we find another approach for those instances? I feel like when we have one or two, they should be full width, but when we have 4, and so on (intead of multiples of 3, they should have a fixed width).

inesdgomes commented 3 months ago

Hi @beatrizmartinmartins Yes, it does make sense to me. Just not super convinced about the single logo taking full width, I think it looks strange. Could we rather show the single logo in a grid of 2?

If 1 or 2 logos: show in grid of 2
If 3 or more: show in grid of 3

beatrizmartinmartins commented 3 months ago

@inesdgomes fixed

inesdgomes commented 3 months ago

@justintemps This can move to development. You can check the updated component here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=3311%3A5768&t=2KxVXrG6xwSm2oel-1

A few notes:

Previously we had a simple variant with a max-width container surrounded by a 24px spacing on the borders of the image container. This worked for logos that where displayed horizontally (like Nike for example) but it constrained the logos that are higher than wider. Since we couldn't figure out how to make sure that all logos fit properly on the same container, we opted to create another variant.
Now we have a "Horizontal Image" and "Vertical Image" option to choose from. Both are different in terms of min-width and the spacing around them, making the logos easier to adjust to the container. Of course it also depends on the logo provided by the user and the black space that can have around it, but we tested a few logos that are currently on this page and they all work correctly when applied its own variant.
The grid has also been changed. The logos can be shown in a grid of 2 or 3 items. If the group has 1 or 2 items, the logos show in a grid of 2; if the group has more than 3 items, the logos always show in a grid of 3.

Please let us know if it's all clear.

justintemps commented 1 month ago

I'm going to close this as a design ticket and create a new one for development.

international-labour-organization / designsystem

Logo grid: document and improve component #954