bug/fix-screenshot-image-cutt-off-bug

[adrianrivers]

What's changed and why

• Get margin top and margin bottom of element in order to adjust clip path, getBoundingClientRect retrieves the elements dimensions plus padding, some of our elements rely on margins to be displayed correctly hence why some of the screenshots were cut off at the bottom.
• Add stories to test large elements with padding and margins

Adjusts the clip path to start at the margin top of the element

y: Math.ceil(top - marginTop),

Adjusts the clip path to take a screenshot of the full height of the element including its margins

height: Math.ceil(height + marginTop + marginBottom),

[preventdefault]

👍