Add a thumbnail component for new hybrid learning features

[MisRob]

Summary

For my work on the completion modal #8109, I needed to create a new thumbnail component which also draws from recent JB's hybrid learning work. I'll soon be preparing the rest of JB's work for merge and I will need to have this component available. Because we won't be able to merge the completion modal for some time, I've extracted the thumbnail logic from the completion modal to this separate PR.

The component displays a topic or learning activity icon when a picture is not available. Regarding the thumbnail container ratio, we decided to go with 16:9 as that's the most common ratio of thumbnails. Pictures with different ratios are letterboxed. The thumbnail adjusts its width according to its container width to allow for flexible control from parent components which is important when implementing responsive behavior across hybrid learning features.

Besides that, this PR extends the utility function for getting thumbnails from the content node to account for cases when simplified data are returned from API for a content node where the thumbnail is saved directly in the thumbnail attribute.

Thumbnail component screenshots

16:9
4:3
1:1
wide
no thumbnail - single learning activity
no thumbnail - multiple learning activities
no thumbnail - topic

References

As for the decisions about icons colors and thumbnail container ratio, you can see this Slack thread.

Reviewer guidance

Since this is only a prerequisite component for work that will be reviewed in the future, I think that briefly checking code and screenshots is sufficient at this point. However, if you'd like to preview it locally on the dev server, I can provide my completion modal working branch.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[MisRob]

@indirectlylit What was the reason for retargeting this PR to release-v0.15.x? I will need it in develop for the completion modal and other hybrid learning features that can't go to release-v0.15.x. I saw there are some directions for targeting develop for all hybrid learning work or are there any changes to those decisions?

[indirectlylit]

Good catch – this should be in develop for hybrid learning and doesn't need to be in the current 0.15 release branch.

By the way, sorry I haven't had a chance to review this yet. It looks really valuable, I'm excited to take a look!

[MisRob]

Thank you. No worries, I'd post a message to someone if it'd be urgent.

[marcellamaki]

This looks good to me @MisRob! I've only done a read-through and reviewed the screenshots, but the code makes sense and I agree that any implementation issues will become apparent as this component is used in features that we are working on.