Fix double wrapped thumbnail icon

[ozer550]

Summary

• Fix regressions after removing the SVG wrapper around KIcons.
• Add utility component to support contentKindIcon functionality.

References

closes #4991

Reviewer guidance

• We would want to regression test Thumbnail component and see if things do not break.

[MisRob]

Hi @ozer550, thank you. Looks like a good start.

Next step would be to improve thumbnail icon scaling logic. I think the goal of the issue was to remove the extra <svg>, but without any changes to user experience. However as of now, icon scaling is lost - for example, if I gradually resize /channels browser window, the thumbnail icon behaves quite differently from before. Here's few places, but it affects almost every screen size.

Screen width	Before / expected	After
600px
1380px

Looking into code, there seemed to be lots of effort into implementing smooth scaling experience:

  $svg-scale: 1.25;
  $svg-width: calc(100% * 9 / 16 / #{$svg-scale});
  $svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));

  svg.thumbnail-image {
    top: 0;
    left: calc(50% - (#{$svg-width} / 4));
    width: calc(#{$svg-width} / 4);
   ...

Even though we want to remove extra svg, I don't think it was intended to get rid of this logic completely. We'd rather want to reapply it in a way that works with KIcon.

[MisRob]

@ozer550 I wanted to note that @akolson made some fixes to svg scaling here. It'd be probably best to wait until we merge that and then rebase this PR before we proceed with further refactors.

[rtibbles]

#5147 has now been merged, so can rebase here.

[MisRob]

To sum up our co-hack:

• Applying current calculations on KIcon is not as straightforward as I expected
• @ozer550 will explore if his flex approach can be adjusted so visually there's no regressions
• If we have trouble with that, together we will think if there are ways to adjust KIcon to allow for easier scaling

[MisRob]

Hi @ozer550, overall looking good, and I like the way it's simpler now. I previewed both compact and non-compact mode and haven't noticed any regressions. Nice work. Just two clarifications.

[MisRob]

Where can I preview before / after of thumbnails with captions?

[MisRob]

Even though it's referenced from .thumbnail, is that style actually taking effect? Seems like something that was closely interconnected with the calculations we're now removing. So just double-checking if this is something to be cleaned up as well.

[AlexVelezLl]

Code changes look great; no regressions were found after auditing all places that used the Thumbnail component. Double-checked that .with-caption and $aspect-percentage were working correctly. I have pushed only to rebase and make minimal idiomatic changes. Lgtm!

Comments addressed.