[Remove Vuetify from Studio] Cards in Content Library

[MisRob]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Sub-issue of https://github.com/learningequality/studio/issues/5060.

Complexity: High

Summary

Remove Vuetify from the channel cards in Channels > Content Library.

Currently, ChannelItem built with several Vuetify components is used to display the channel list.

To remove these Vuetify dependencies:

• Replace

https://github.com/learningequality/studio/blob/261cc598c4a9e5dd0e2cdd6e66d366e460a01962/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue#L52-L69

by

<KCardGrid ...>
  <StudioChannelCard ...>
  ...
</KCardGrid>

• Follow KCard: Selection controls to implement selection when downloading a summary of selected channels
  • Use KCheckbox instead of Checkbox

Examine carefully the current user experience (when both logged in and logged out) and related code (ChannelItem), and ensure no features are lost. Do not modifify ChannelItem.

How to get there

• Login as [email protected] with password a
• Go to Channels > Content Library
• Click Download a summary of selected channels
• Log out
• Click Explore without an account

Guidance

• Target channel-cards branch
• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not refactor any other areas of the codebase
• Do not modify ChannelItem

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS
• Aspect ratio and size of card thumbnail area

References

• Builds on https://github.com/learningequality/studio/issues/5227, https://github.com/learningequality/studio/issues/5524, and https://github.com/learningequality/studio/issues/5525

Acceptance criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• [ ] The specification above is followed.
• [ ] Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• [ ] There are no ::v-deep or /deep/ selectors.
• [ ] All user interactions are manually tested with no regressions.
• [ ] Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• [ ] Implementation meets a11y standards
• [ ] All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• [ ] User-facing strings are translated (except in Administration)
• [ ] The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• [ ] Mobile experience is reasonable

Unit tests

• [ ] If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• [ ] If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

[MisRob]

If still interested, reserved for @yeshwanth235

[vtushar06]

Hii @yeshwanth235, are you taking this up, please let me know as I am interested to resolve this, and @MisRob can I work on this issue if you allow.

[learning-equality-bot[bot]]

Hi! 👋

Thanks so much for your interest! This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

We really appreciate your willingness to help—you're welcome to find a more suitable issue, and let us know if you have any questions. 😊

[MisRob]

Hi @vtushar06, please use issue headers to orient yourself - unless I mention someone explicitly on an issue (usually informed by prior conversations and plans with that specific person), the issue needs to be 'help wanted' for us to assign it.

[vtushar06]

Yeah sure @MisRob, I will be following same.

[vtushar06]

Hi @MisRob, I’m interested in this Issue and would be happy to work on it once it’s available.

[learning-equality-bot[bot]]

Season’s greetings! 👋

We’d like to thank everyone for another year of fruitful collaborations, engaging discussions, and for the continued support of our work. Learning Equality will be on holidays from December 22 to January 5. We look forward to much more in the new year and wish you a very happy holiday season!

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[MisRob]

Thank you @vtushar06

[MisRob]

I need to merge another PR first, please wait a day or two before you start working @vtushar06. I will let you know.

[vtushar06]

sure @MisRob. Thanks for assignment.

[MisRob]

Hi @vtushar06 - you're welcome to start working. Please fetch the latest channel-cards branch (I've just merged some work there that you will need to have available).

You will notice that the new cards look somewhat different in regard to card size and thumbnail area ratio. Please ignore that and just use as is (I will address it later on KDS side https://github.com/learningequality/kolibri-design-system/issues/1162)

Finally, note the holiday message above. We won't be responding during that time. And - I have an additional time off - will be back on January 12 when we can reconnect. Thanks and happy new year!