ODS-Module - Image List

[B3nz01d]

based on:

• https://system.design.orange.com/0c1af118d/p/03eab7-image-lists/b/66c290
• and: https://m2.material.io/components/image-lists

[B3nz01d]

here is a list of design questions to perform the implementation:

• As this component does not exist in the development tools what do we want to do with this for Orange?
• based on the amount of data treated in this element we should probably define it as a module and create 2 new components:
  • imageLoading: a component to display an load an image including the loading state the image display and the image error
  • imageDisplay: an image view with an image, a text and an icon
• what is the padding used to separate the images?
• the anatomy provides an image + label + icon + text protection. Do we need all these elements?
• What image animation do we want when an image is opened? do we need to allow an annimated / non animated version?
• should we allow the user to reorder the image list?
• do we allow vertical AND horizontal scrawling?
• should we support: quilted image arrangement, Woven image list, Masonry image list?

[B3nz01d]

We should create a dedicated component for the image & text and a dedicated module to display the image grid

[B3nz01d]

• We will split this to be both a image item component and an image list module
• For the image item the dev should be able to use:
  • an image item with only the image
  • an image item with text below (could be with title and subtitle)
  • an image item with text over (only one line of text available)
• for icons
  • the icon is optional
  • the icon should always be at the bottom end corner
  • the icon follow the text display
  • the icon is a toggle button without container -> needs to be added as a new update of the current toggle button component that can be displayed without any background and borders (wording is with or without container)
  • the toggle should be from filled to outline - filled color should be the same as the outline color (not using the accent color at all)
• for the text overflow we should only allow one line of text with a 2 line max overflow

Other elements for the image list

• the action on the image could be specified by the dev using the component
• We should provide an example of images opening when clicking in order to provide a transition animation and allow to swipe from one image to the next when in full screen.

Other further questions:

• spacing
• paddings
• columns
• vertical vs horizontal alignment
• do we allow fancy quilted / woven / masonry