Complete KImg

[MisRob]

Description

Completes the implementation of the new KImg component.

Note there are minor deviations from the original specification, namely:

• placeholderColor prop renamed to backgroundColor
  • Since the color in not used solely for the placeholder area but also as the background color of the letterbox
• kolibriFly prop not implemented
  • Since this logic is now provided by the KLogo component
• default and placeholder slot merged only into one slot, placeholder
  • I originally suggested having two but after thinking about it again, it seemed to be slightly confusing to me so I simplified it
• extra #topLeft, #topRight, #bottomLeft, and #bottomRight slots
  • I added these slots in support of the upcoming KCard work. I am not entirely sure if they will be needed, because recently I noticed we actually don't place content over card thumbnail images in the new card designs. But since the card designs are WIP and it won't harm anything, I am leaving the slots here for now. They won't be exposed in KCard if it's not in the designs.

Issue addressed

• Closes KImg: Add scaling and placeholder logic #370
• Closes KImg: Polish documentation #374
• Closes KImg Component #368
• Closes KImg component for accessible, responsive image rendering #23

Changelog

• #538
  • Description: Complete KImg implementation
  • Products impact: new API
  • Addresses: KImg Component #368
  • Components: KImg
  • Breaking: no
  • Impacts a11y: yes
  • Guidance: One of the benefits of using KImg is that it throws a11y related warnings

Steps to test

• Since this work completes KImg, please review the component code and documentation page as a whole (plus it'd be quite meaningless to focus on checking the PR diff anyways as I needed to tweak previous code to support new features and we don't really use this component anywhere yet). Read KImg Component #368 and linked issues for expected API.

• Is the documentation page clear? https://deploy-preview-538--kolibri-design-system.netlify.app/kimg/

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

After review

• The changelog item has been pasted to the CHANGELOG.md

[marcellamaki]

This looks fantastic, @MisRob - the documentation is so clear, and the KImg file itself is also really easy to read. I would love to hear @akolson's thoughts as I know he did some of the speccing with you, so he may have a few additional notes or insights that I don't. But, for me, I don't see any blockers and I really appreciate you pushing on this to get it merged.

@AllanOXDi - no need to formally review here but I think if you read through, and ask any questions you have about the code as you do, this will be some helpful foundational context for the KCard work that is upcoming, as they are related :)

[akolson]

HI @MisRob! This looks really amazing. The component is so well documented and implemented in the simplest possible way❤️ . No further comments -- I can't wait to see it in action. Thanks

[MisRob]

Thanks both, that's kind. We have a co-review planned next week with @AllanOXDi. If all goes well, I will merge after that.

[MisRob]

I'll merge so it's available for components that need it. @AllanOXDi we can still co-review later on when there's more time.

[AllanOXDi]

Sure! I am available for co rearview.