feat: add featured course card component

[kertuilves]

https://app.clickup.com/t/861n0qjha

[pawelkmpt]

Did you branch it off feat/dashboard or master? It should be from feat/dashboard. We should see here just your commit with the component.

[pawelkmpt]

Something is wrong on desktop. Please notice the white space below instructor

[anoblet]

I believe we should be leveraging more of the benefits that custom elements provide us. Rather than defining the entire template as slotted content, I feel the template should be defined within the component and data passed in. We can be limited when the data is a list, generated html, or long content though other parts should be defined within the shadow dom. Ideally it would look like this:

<cxl-featured-course-card>
  <span slot="title">...</span>
  <span slot="tags">...</span>
  <div slot="description>...</div>
</cxl-featured-course-card>

This would allow us to scope CSS as much possible, as well as reduce the amount of data downloaded (the custom element would be responsible for rendering most of the HTML.)

[freudFlintstone]

I believe we should be leveraging more of the benefits that custom elements provide us. Rather than defining the entire template as slotted content, I feel the template should be defined within the component and data passed in. We can be limited when the data is a list, generated html, or long content though other parts should be defined within the shadow dom. Ideally it would look like this:

<cxl-featured-course-card>
  <span slot="title">...</span>
  <span slot="tags">...</span>
  <div slot="description>...</div>
</cxl-featured-course-card>

This would allow us to scope CSS as much possible, as well as reduce the amount of data downloaded (the custom element would be responsible for rendering most of the HTML.)

Sorry for intruding a bit here. On top of @anoblet suggestions, which I agree with, this design is very, very similar to the cxl-course theme. And the lightweight card can easily be achieved by just hiding a couple sections from the other similar components.

My suggestion would be to briefly go over the figma designs marked as ready, and come up with a revised list of components that are each related to one clickup task and one pull request.

Consolidating design variations under the same component will probably avoid a lot of headaches in the future.

[pawelkmpt]

I believe we should be leveraging more of the benefits that custom elements provide us. Rather than defining the entire template as slotted content, I feel the template should be defined within the component and data passed in. We can be limited when the data is a list, generated html, or long content though other parts should be defined within the shadow dom. Ideally it would look like this:

<cxl-featured-course-card>
  <span slot="title">...</span>
  <span slot="tags">...</span>
  <div slot="description>...</div>
</cxl-featured-course-card>

This would allow us to scope CSS as much possible, as well as reduce the amount of data downloaded (the custom element would be responsible for rendering most of the HTML.)

I agree

[pawelkmpt]

Similar conclusion as in #289 (comment)

TODO: create new cxl-featured-course component.

[pawelkmpt]

It needs tweaks on mobile caused by swoosh

[pawelkmpt]

Looks a way better now, but still some resolutions have swoosh bug

[pawelkmpt]

Good job 👍
Next step: refactor to use cxlBaseCardElement

[pawelkmpt]

This is looking good 👍

Slider on the wide screen has mall bug but I'm not sure if we ever use it this way:

Fix if it's easy, skip if will take hours.

WRT base class improvements: we'll merge light card first, then you'll rebase this branch and we re-check it

[pawelkmpt]

@kertuilves I just merged #289, please rebase this branch, then I'll do (final) review :)