Providing default fallback images for `Card.ImageCap`

[adamstankiewicz]

https://paragon-openedx.netlify.app/components/card/#with-fallback-image

The Card components supports a fallbackSrc and fallbackLogoSrc prop to provide a generic solution to displaying a default fallback image if/when the primary image fails to load (e.g., the image at the URL provided no longer exists).

However, it would be beneficial to include a reasonable pre-defined fallback image to use so consumers/designers don't necessarily need to consider which fallback image in each use case for Card.ImageCap.

Because these fallback images may be dependent on theme, the proposal is to add image assets to the brand/theme-specific repositories (i.e., @edx/brand-openedx, @edx/brand-edx.org) as the mechanism to serve the images to consumers, e.g.:

import { cardSrcFallbackImg } from `@edx/brand-openedx`;

For now, we will have the same fallback image used across the core Open edX theme as well as the edX.org-specific theme, but this implementation would afford the flexibility to make them distinct later on.

We will want to update the docs in Paragon to refer and/or show an example of importing the fallback from @edx/brand-openedx. I will write up some of these items as a Github Issue for now.

This is currently the fallback image used in Card.ImageCap in at least one use case thus far. For now, we plan on using this as the default fallback image. That said, it may be worth confirming with a designer whether this image can be converted to SVG such that its vector/scalable without losing quality when resized.

AC

• [ ] Write an ADR in the Paragon repo to discuss this architectural decision around Card.ImageCap fallback images, and where they will be stored on a theme-by-theme basis (e.g., @edx/brand-openedx).
• [ ] Add basic default gray background SVG as default fallback src for Card.ImageCap.
• [ ] Add default fallback image(s) for Card.ImageCap to both @edx/brand-openedx and @edx/brand-edx.org such that they are importable by consumers.
  • [ ] Note, these repos already contain several static image assets for logos and favicons (e.g., import edXLogo from '@edx/brand/logo.svg';).
• [ ] Verify with a designer whether the example fallback image linked above could be converted to SVG, or if we should rely on the PNG instead.
• [ ] Ensure Card.ImageCap can handle either an image file or an image src string.
• [ ] Update Card docs on the Paragon documentation website to show an example of importing fallback image from @edx/brand-openedx in place of a hardcoded image URL.