Ensure KCard supports RTL

[MisRob]

Blocked by

• New component: Initial implementation of KCard component #625

Summary

KCard needs to support right-to-left languages. This was difficult to preview and test when developing solely in KDS, but as we're transitioning to Kolibri now, we can preview it more easily and ensure that everything works as expected.

One major area is the placement of the thumbnail area. If the thumbnail area appears on the right side in LTR, it should appear on the left side in RTL:

There may be more places to consider, and reviewing the card in all its layout modes in regard to RTL is one of this issue's tasks.

Guidance

• RTL language support Kolibri guide
• See Bidirectionality guidelines to get a sense of what should be mirrored
• It is recommended to work on this in parallel to developing Kolibri cards based on KCard (such as Resource discovery: Implement channel card kolibri#12317, Resource discovery: Implement folder card kolibri#12318, or Resource discovery: Implement resource card kolibri#12319)

Out of scope

• KCard shouldn't be concerned about RTL for any elements that are provided by products via slots. It's the product's responsibility to ensure RTL for such elements.
  • Example: In the illustration above, KCard ensures that the #aboveTitle slot is rendered on the right side. But it is not (and cannot be) concerned whether icons provided to that slot from a product are mirrored.

Acceptance criteria

• All KCard modes are reviewed for RTL
• It changes its layout appropriately when used in an RTL language
• It is tested in Kolibri in at least one place