feat: add locked state to cards

[anoblet]

https://app.clickup.com/t/86b1nztyh

Course card:

Light card:

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	44.75 KB (+1.15% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.89 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	29.23 KB (+0.78% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	138.23 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-institute.js, packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	277.57 KB (+0.41% 🔺)

[heshfekry]

Hey @anoblet

Good start. What you showed above would be difficult for users as they can not see the title of the course, so they will just see a list of CTAs and the same microcopy. Original intention was to swap the excerpt.

What you showed however could work on hover. Something like this?

Normal state

On-hover state

I would probably keep the CTA to take the user to the course. As some have promo videos and they may want to find out more about the course. They can always click this piece on the course page to go to pricing.

[heshfekry]

the original intention was to put this copy

here

Maybe we can try both and see what looks/feels better? can you proivde a storybook link of both please?

[heshfekry]

@anoblet if you are struggling to get hover to work properly, then we can just try originally intended version.

[pawelkmpt]

This is overcomplicated. Also such message should not be hardcoded. It was supposed to replace regular course description.

[lkraav]

"All-Access" product name always hyphenated, right?

Unsure: do we need to repeat CXL? I mean who else's All-Access are we selling?

[heshfekry]

Unsure: do we need to repeat CXL? I mean who else's All-Access are

BRAAAANDDDDDD!!!!

I agree and am definitely up for removing repetition here, its redundant. Especially in a tooltip which is latest incarnation proposed by @pawelkmpt

would propose a slight tweak to the tool tip copy as it conflicts with the CTA. Purchase to view >> View course

Purchase an All-Access subscription to unlock this course.

[pawelkmpt]

[pawelkmpt]

Also such message should not be hardcoded.

Made it hardcoded as @heshfekry suggested message different than we currently use but provided override possibility.

[pawelkmpt]

cxl-light-card locked