DS-660 Ratio Element

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-660

Summary

Ratio Element is created to replace the Ratio Component in the future.

Details

A new Ratio Element was created and its docs

• schema
• twig template
• scss
• docs

How to test

Pull the branch. Check if:

• the schema is compatible with our standards
• styles are efficient and sufficient for this element
• ratio element meets use cases and can replace the old ratio component
• docs are useful and readable

Release notes

Ratio Component will be deprecated and replaced with the new Ratio Element.

[mikemai2awesome]

@MarcinMr As we discussed in dev huddle, we decided to remove the doc page about nearest aspect ratio since it might create confusion rather than providing useful tips.

I also added a doc page demonstrating image fit and position within ratio, those are expected to work. This was brought up in huddle by @adamszalapski .

I'll leave it to you to resolve the merge conflicts. This is all set from me.

[MarcinMr]

@mikemai2awesome thanks for the updates. Solved conflict related to a cache

[colbytcook]

Approved. One note to make on using this in prod. Safari 15 for both OS and iOS support this feature but unfortunately Safari Mobile still has a significant user base (9.62% global usage). It is only a matter of time until this number drops but until then we probably shouldn't be using this element on production (yet). If we see the user base drop under 2% globally then we should be good to update the docs and components to leverage this (I will create tickets to deprecate the ratio component and update the docs and components with the ratio element).

[danielamorse]

Code looks good and got a visual demo last week.