horizontal list cards for program page

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/10165

Description (What does it do?)

This PR primarily sets up the course cards on MITx Online to display in "list" format like they do on the search results page. A good deal of refactoring was also done on all of the LearningResourceCard type components. The presentation layer of these components was extracted out into BaseLearningResourceCard so that other components that implement it can do all of the same things that a normal LearningResourceCard does that's passed a LearningResource. This mainly has to do with the fact that the handling of grid vs list etc. was previously handled in ResourceCard. This functionality was basically bubbled up into BaseLearningResourceCard so MitxOnlineCourseCard (and any other card data source in the future) can control this behavior.

Screenshots (if appropriate):

How can this be tested?

• Make sure you have an instance of MITx Online connected to Learn as described in the Readme
• In your instance of MITx Online, you should have at least one program with some course requirements with a variety of certificates available on them
• In the MITx Online CMS, you need to make sure "Include in Learn Catalog" is checked on the program page
• You need Posthog connected and the mitxonline-product-pages feature flag enabled
• View the program page at /programs/readable-id where readable-id is the readable ID of your program in MITx Online
• Verify that the course cards display in a list format and that all of the properties of said courses display as expected on the cards
• Verify that the cards link to where you would expect them to, aka the course product pages
• Since this is a fairly significant refactor of how the cards are structured / inherited from each other, we should smoke test other usages of them:
  • Search results page
  • Home page carousels
  • Channel pages
  • Unit pages
  • Learning Paths / User Lists (although, these are maybe being removed? not sure)
  • Articles?

[ChristopherChudzicki]

I noticed two issues, one is pretty small (the colon spacing). The other to do with prices display twice.

[ChristopherChudzicki]

I'm not actually sure what's preferable here.

1. current_price is the true actual price based on the product for the next unexpired run (next_run_id)
2. min_price / max_price are coming from wagtail
   • in the price range allows for financial aid display
   • It's what Learn uses in its cards, i believe

[ChristopherChudzicki]

I think the following issue is specifically with the MITxOnline data source version of the cards, but when I have both a cert/product + min/max price set, I see the price twice:

I think:

• we should only see cert price or course price, not both.
• except maybe for cert courses that are also auditable, we show cert price + free

That said, I realize that we don't have the data in place to distinguish mitxonlines courses that are paid-only vs paid+free-no-cert options. I think until it's in place, we should assume everything is free-or-paid-for-cert, like ETL assumes. What do you think?

Additional minor issue:

In image above, there seems to be an extra space between Certificate and the colon, i.e., should be "Certificate: " not "Certificate :"

This seems also to happen on the main search page, where the data comes from ETL