feat(display-list): add display list component - FRONT-2342

[emeryro]

preview:

• EC: https://ecl-preview-2214--europa-component-library.netlify.app/ec/components/display-list/code/
• EU: https://ecl-preview-2214--europa-component-library.netlify.app/eu/components/display-list/code/

specs:

• EC: https://citnet.tech.ec.europa.eu/CITnet/confluence/display/ECL/EC+Display+lists
• EU: https://citnet.tech.ec.europa.eu/CITnet/confluence/display/ECL/EU+Display+lists

Two templates have been created:

• Display list, used to display a full list of elements; number of columns is a parameter (1 column = vertical display)
• Display list item, containing the data, and placed in a display list

[github-actions]

🚀 Deployed on https://ecl-preview-2214--europa-component-library.netlify.app

[planctus]

• Wow, i was not aware of this "request"...it looks to me like it would be the way to build "layouts" using the "content item" as a component that we still don't have, or we could say that the display-list-item template in this pr is basically that

• The display-list template then should be the one creating the different rendering markup for the "vertical" and the "horizontal" variants of this "meta component".
  In this case we are just using instead to cover the vertical variant to build a simple list in a wrapper while all the examples for the horizontal variant are built only using the item template with all the surrounding markup created in the story so that those lists are not actually an implementation of the display-list component.

• I find it also very confusing to associate the variant (horizontal or vertical) to the list, i think that is a property of the item, in case, while the list should only consider the number of columns and build the right markup for it.

• I haven't looked at the specs, but the option of the square image should maybe only be associated with the "horizontal" variant, but it's not clear the reason why, more than just altering the proportions of the image (as written in the control) it is also resizing it to 100px.
  I would also expect the title to support a "link", not sure if there is any specification about this in the specs, though.

• We had the idea of building this kind of "layout builder", we even created a template for that in ecl-twig but it was more ambitious, meant to dinamycally include the components based on a parameter, which was not working in twing, unfortunately.

• Not saying we should reproduce that, but i think this pr is basically introducing a "component", which is the display-list-item, while the "layout" template is currently too limited.

[emeryro]

yes, I also considered using custom css to display horizontal version, instead of using the grid. That's a shame, because we would have to duplicate part of the grid code into this component, but that's probably the best way to handle it...
In any case, I think that it makes sense to have the variant (horizontal, vertical) on the display list component, as it will be the one handling the layout

The square image are indeed defined with a fixed size, for some reasons. I will ask for the possibility to have links, that's a good point.

[emeryro]

ok, I've been thinking about this again, and here is what I propose:

at list level

• parameter to set the number of columns (from 1 to 4). We would have classes like .ecl-list-illustration--col-2
• css for the display of columns handled directly in the component (maybe with a display: grid)
• no variant "horizontal" or "vertical" here

at item level

• parameter to have "horizontal" or "vertical" items (so with images on left or on top)

[planctus]

It's ok i think, just in the website i guess we mixed up data and we have examples with the horizontal "variant" and the zebra.
Another small improvement could be to add in the controls "categories" (content and icons) the information that they only refer to the first item.