[BD-46] feat: add support for selectable CardView in DataTable

[viktorrusakov]

Description

Add ability to select Cards in DataTable in CardView

Deploy Preview

https://deploy-preview-1698--paragon-openedx.netlify.app/components/datatable/#view-switching

Merge Checklist

• [x] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• [x] Does your change adhere to the documented style conventions?
• [x] Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• [x] Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• [x] Were your changes tested in the example app?
• [x] Is there adequate test coverage for your changes?
• [x] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• [ ] Verify your changes were released to NPM at the expected version.
• [ ] If you'd like, share your contribution in #show-and-tell.
• [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @viktorrusakov!

When this pull request is ready, tag your edX technical lead.

[netlify[bot]]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	58f9bab09963c741ef1cc638d43c5bbbb652fd9a
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/637bac929b473e0009f0cfeb
😎 Deploy Preview	https://deploy-preview-1698--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[viktorrusakov]

@adamstankiewicz do you think the location of the checkbox near the Card is ok? Seems like the gap is too big between the Cards, but on the screenshot you provided in the issue the gap is even bigger I think 😅

Also not sure if we need to add a separate section in the docs about this feature, I think the DataTable page is already too long... I just modified existing example for now

[codecov[bot]]

Codecov Report

Base: 90.53% // Head: 90.76% // Increases project coverage by +0.23% :tada:

Coverage data is based on head (db57400) compared to base (4bb9423). Patch coverage: 100.00% of modified lines in pull request are covered.

:exclamation: Current head db57400 differs from pull request most recent head 58f9bab. Consider uploading reports for the commit 58f9bab to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1698      +/-   ##
==========================================
+ Coverage   90.53%   90.76%   +0.23%     
==========================================
  Files         212      212              
  Lines        3718     3726       +8     
  Branches      874      876       +2     
==========================================
+ Hits         3366     3382      +16     
+ Misses        337      329       -8     
  Partials       15       15              

Impacted Files	Coverage Δ
src/DataTable/index.jsx	94.82% <ø> (ø)
src/DataTable/selection/ControlledSelect.jsx	100.00% <ø> (ø)
src/DataTable/selection/ControlledSelectHeader.jsx	100.00% <ø> (ø)
src/DataTable/utils/getVisibleColumns.jsx	100.00% <ø> (ø)
src/DataTable/CardView.jsx	100.00% <100.00%> (+80.00%)	:arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[adamstankiewicz]

@viktorrusakov I've passed the deploy preview along to the designer who proposed this change for review. Per our sync today, I will file a follow-up issue for allowing the consumer to customize the number of cards per row, which should also have a nice side effect for answering the question posed in https://github.com/openedx/paragon/issues/1671

Edit: Instead of a new issue, I will update the description of that above linked issue.

[viktorrusakov]

@adamstankiewicz turns out DataTable already supports customizing number of cards per row, I've added examples to the documentation (with horizontal cards also). I guess we need to discuss whether such API is ok and also design stuff.

[openedx-webhooks]

@viktorrusakov 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

:tada: This PR is included in version 20.19.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[edx-semantic-release]

:tada: This PR is included in version 21.0.0-alpha.12 :tada:

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: