Implement the `RecommendedResourceCard` component in Studio to display recommended resources

[akolson]

Overview

This task involves implementing a component named RecommendedResourceCard in Studio to display recommended resources to users within the recommended resources side panel. The implementation wraps around the KCard component.

Description and outcomes

• Design requirements

• Markup requirements

  • The outermost element is <KCard>

    <KCard ...>
      // Other Recommended resources relevant code
      ...
    </KCard>

• Styling requirements

  • This card inherits from the KCard component.

• Architecture requirements

  • Is built as a single component
  • Wraps around the KCard component
  • Has appropriate props to pass data into KCard
  • Uses KIcon to render icons
  • Uses KIconButton to render clickable icons
  • Uses the learningActivity to dynamically set the learning activity and its corresponding icon
  • It uses the the horizontal layout and the small thumbnailDisplay. See KCard specifications
    

• Props

Name	Description	Type	Required	Default
to	Router-link object that enables user navigation to the intended route.	Object	true	-
title	Sets the value of the title text.	String	false	null
level	Sets the value of the level text.	String	false	null
thumbnailSrc	Source URL of a thumbnail image	String	false	null
thumbnailScaleType	Specifies how an image should be scaled within the thumbnail area. See KImg for supported types.	String	false	'centerInside'
learningActivity	Sets the value of the learning activity.	String	false	null

• Events

Name	Description
focus	Emitted when the card element has received focus.
hover	Emitted when the mouse pointer enters or leaves the card element

Acceptance Criteria

• Conforms fully to the specification above

Assumptions and Dependencies

• The implementation wraps around the KCard component
• Depends on https://github.com/learningequality/kolibri-design-system/issues/530
• The KCard will initially be developed in Studio before being moved into KDS

Scope

The scope of this task is limited to;

• A card component for recommended resources only.

This task doesn’t include;

• Implementing the KCard component
• Implementing the actions for the pop-out link and thumbs down icons.

Accessibility Requirements

• Card inherits KCard’s accessibility features

Resources

• KCard specification
• KIcon specification
• KIconButton specification
• Figma designs

[akolson]

Completed and merged in https://github.com/learningequality/studio/pull/4480