From e03f7ccf86042994c139da3825b19df88daefd36 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 19 Oct 2022 10:25:01 -0300
Subject: [PATCH] chore: modal hero image wrapper (#878)

---
 packages/fuselage/src/components/Modal/Modal.stories.tsx | 2 +-
 packages/fuselage/src/components/Modal/Modal.styles.scss | 9 ++++++++-
 .../fuselage/src/components/Modal/ModalHeroImage.tsx     | 4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/fuselage/src/components/Modal/Modal.stories.tsx b/packages/fuselage/src/components/Modal/Modal.stories.tsx
index 7cb6ff38e3..b3ba808c91 100644
--- a/packages/fuselage/src/components/Modal/Modal.stories.tsx
+++ b/packages/fuselage/src/components/Modal/Modal.stories.tsx
@@ -145,8 +145,8 @@ export const _WithHeroImage = () => (
       </Modal.HeaderText>
       <Modal.Close />
     </Modal.Header>
-    <Modal.HeroImage src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z' />
     <Modal.Content>
+      <Modal.HeroImage src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z' />
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
       urna posuere, tempor urna nec, lacinia lacus. Vivamus ac lobortis arcu.
       Morbi malesuada, diam sed congue aliquet, dui elit tincidunt leo, a
diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
index 8370d7a838..f46abe20bb 100644
--- a/packages/fuselage/src/components/Modal/Modal.styles.scss
+++ b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -70,11 +70,18 @@ $modal-margin: theme('modal-margin', auto);
   }
 
   &__hero-image {
+    display: block;
+
     width: 100%;
     height: auto;
     max-height: lengths.size(256);
-    margin-bottom: lengths.size(24);
     object-fit: contain;
+
+    &-wrapper {
+      margin: 0;
+      margin-bottom: lengths.size(24);
+      margin-inline: -(lengths.size(24));
+    }
   }
 
   &__backdrop {
diff --git a/packages/fuselage/src/components/Modal/ModalHeroImage.tsx b/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
index ebd62a5a6e..073e9f3d1a 100644
--- a/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
+++ b/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
@@ -6,5 +6,7 @@ import Box from '../Box';
 export type ModalHeroImageProps = ComponentProps<typeof Box>;
 
 export const ModalHeroImage = ({ ...props }: ModalHeroImageProps) => (
-  <Box rcx-modal__hero-image is='img' {...props} />
+  <figure className='rcx-modal__hero-image-wrapper'>
+    <Box rcx-modal__hero-image is='img' {...props} />
+  </figure>
 );