Resource discovery: Implement channel card

[MisRob]

Blocked by

• https://github.com/learningequality/kolibri-design-system/pull/625 (however, since the PR is nearly ready, can be developed in parallel locally via Running Kolibri with local Kolibri Design System)

Summary

In support of coach resource discovery, we need to implement a new channel card. This will be one of the first cards in Kolibri built on top of KCard.

The final card is expected to look like:

It needs to show:

• Channel title
• Number of resources in the channel
• Channel description
• Channel thumbnail
• Metadata pills
• Details link (only emits event on click)

References

• Resource discovery designs (see channel cards)
• Card specs designs
• https://github.com/learningequality/kolibri/issues/11888
• Sibling cards: https://github.com/learningequality/kolibri/issues/12318, https://github.com/learningequality/kolibri/issues/12319

Guidance

• Create a completely new component <AccessibleChannelCard> (to differ from the already existing <ChannelCard>) and use <KCard> as its basis.
• Regarding the structure of production data that the card should display, examine existing channel cards in the Library and also see the useSearch composable. In the scope of this issue, assume that data for the new card will have the same structure.
• For the purpose of development and review, display the new card at any place in Kolibri and remove the preview shortly before the final merge. It may be handy to work on the Library page because it has access to all data.
• Even though none of the existing cards should be changed, they may contain some useful pieces of code for the new card, so it’s recommended to examine them (see ChannelCard.vue).
• It is possible that KCard will need further updates to support all Kolibri cards. If there’s something that KCard doesn’t support yet, discuss with relevant people and determine the next steps.

Out of scope

• Metadata pills
• Anything grid related (this includes the card’s min and max width which will be the grid’s responsibility, as well as checkboxes)
• Refactoring existing card components in Kolibri
• Implementing other parts of the coach resource discovery such as the side panel where cards will be displayed
• ‘Details’ fully functioning

Acceptance criteria

• [x] The card is built on top of the KCard and contains elements listed above
• [x] It follows the designs closely (or discrepancies get discussed)
• [x] It is content tolerant (renders well for short strings, long strings, missing information, missing thumbnail picture, etc.)
• [x] It is responsive
• [x] It supports RTL (note that KCard will be responsible for basic layout RTL support, but some additional tweaks may be needed for content that is provided to it via slots etc.)
• [x] It is ready to receive production data, meaning it doesn’t use hardcoded data inside the card but rather receives data from outside like it would in the final feature, for example in the form of an object passed via prop (or any other relevant manner)
• [x] For the purpose of preview and QA, please include at least a couple of <AccessibleChannelCard>'s in <ul> and feed them with data that have the same structure as production data with enough variance (see content tolerance criteria)
• [x] If some components used in the current cards are re-used in this new card and tweaked for the purpose, there are no regressions in the old cards

[Spoorthy1423]

Hey!! I would like to work on this issue @MisRob please assign me this issue!!

[MisRob]

Hi @Spoorthy1423, thanks for volunteering. This issue is not available for assignment. See https://github.com/learningequality/kolibri/issues/12319#issuecomment-2307913993.

[AllanOXDi]

fixed in #12607