Add image size properties to the infoCard component

[efremov-av]

What problem is this solving?

There is a problem with page loading that affects the Core Web Vitals CLS score. The size of image is 0 while the image in infoCard is loading because browser does not yet know about image parameters (width, height and aspectRatio). To prevent this behavior we can define  width and height parameters to the <img /> element. Browser will read them and calculate aspect-ratio to reserve a proper space for image.

How to test it?

I defined imageHeight and imageWidth props to the last infocard that has "Give the gift of choice" title.
Workspace

Screenshots or example usage:

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

Thank you so much for keeping our documentation up-to-date ❤️

[beatrizmaselli]

Separe the property for different layouts (desktop and mobile)

[mariana-caetano]

Hi @efremov-av! The messages folder has updates that fall under the Localization team's scope. To make sure they are aware of these changes and review them, you can go to the #product-localization channel on Slack, go to the Workflows tab, click Product Localization, and fill out the short form to open a task for the team to review.

[mariana-caetano]

Suggested change

	| `imageHeight` | `number` | Height of the image that is used to improve CLS while the image is loading. | `null` |
	| `imageWidth` | `number` | Width of the image that is used to improve CLS while the image is loading. | `null` |
	| `imageHeight` | `number` | Height of the image used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads. | `null` |
	| `imageWidth` | `number` | Width of the image used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads. | `null` |