search

openedx / paragon

💎 An accessible, theme-ready design system built for learning applications and Open edX.
https://paragon-openedx.netlify.app
Apache License 2.0
121 stars 67 forks source link

discovery: learner dashboard use case for Card.ImageCap #2110

Open adamstankiewicz opened 1 year ago

adamstankiewicz commented 1 year ago

Description

The Card component in Paragon includes a sub-component Card.ImageCap intended to be a reusable component to have a image at the top of the card as well as an optional overlapping, logo image.

However, it appears the Card.ImageCap did not serve the use case of the cards on the frontend-app-learner-dashboard MFE given it is using a custom implementation of Card.ImageCap, relying on Paragon's internal CSS class names (anti-pattern).

This issue intends to understand the use case for the learner dashboard Card and why it isn't using Card.ImageCap: https://github.com/openedx/frontend-app-learner-dashboard/blob/49d70dda9306ac83a9d5b52ca041a51ba1f5ec8d/src/containers/CourseCard/components/CourseCardImage.jsx#L16

It looks like it may be due to the additional of the "verified" badge and ribbon image:

image

We may consider expanding Card.ImageCap's functionality to allow consumers to extend it further with things like this "verified" badge and ribbon image

adamstankiewicz commented 1 year ago

Interestingly, it looks like the Card usage in frontend-app-learner-dashboard also makes both the card title and the image in the card image cap clickable. Having the card image be clickable is a use case the existing Card doesn't support natively.