feat(fuselage): Modal Hero Image (#860)

RocketChat · Oct 4, 2022 · ce85b97 · ce85b97
1 parent f2626ae
commit ce85b97
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 0 deletions.
diff --git a/packages/fuselage/src/components/Modal/Modal.stories.tsx b/packages/fuselage/src/components/Modal/Modal.stories.tsx
@@ -136,3 +136,35 @@ export const _WithAnnotation = () => (
     </Modal.Footer>
   </Modal>
 );
+
+export const _WithHeroImage = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </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>
+      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
+      fermentum ante augue nec ex. Vestibulum feugiat aliquam sem vel porta.
+      Praesent varius aliquet consequat. Mauris id nisl egestas, egestas ipsum
+      sit amet, vestibulum elit. Cras vel dapibus lacus. Sed congue interdum
+      lobortis. In vitae consectetur enim, eu varius leo. Quisque rhoncus nulla
+      a rhoncus lobortis. Sed eu nulla libero. Donec lacus ante, vehicula eget
+      eros molestie, ullamcorper tincidunt arcu. Suspendisse eget pulvinar
+      lacus.
+    </Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -69,6 +69,14 @@ $modal-margin: theme('modal-margin', auto);
     @include typography.use-font-scale(c2);
   }
 
+  &__hero-image {
+    width: 100%;
+    height: auto;
+    max-height: lengths.size(256);
+    margin-bottom: lengths.size(24);
+    object-fit: contain;
+  }
+
   &__backdrop {
     position: fixed;
 

diff --git a/packages/fuselage/src/components/Modal/ModalHeroImage.tsx b/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box';
+
+export type ModalHeroImageProps = ComponentProps<typeof Box>;
+
+export const ModalHeroImage = ({ ...props }: ModalHeroImageProps) => (
+  <Box rcx-modal__hero-image is='img' {...props} />
+);
diff --git a/packages/fuselage/src/components/Modal/index.ts b/packages/fuselage/src/components/Modal/index.ts
@@ -7,6 +7,7 @@ import { ModalFooterAnnotation } from './ModalFooterAnnotation';
 import { ModalFooterControllers } from './ModalFooterControllers';
 import { ModalHeader } from './ModalHeader';
 import { ModalHeaderText } from './ModalHeaderText';
+import { ModalHeroImage } from './ModalHeroImage';
 import { ModalIcon } from './ModalIcon';
 import { ModalTagline } from './ModalTagline';
 import { ModalThumb } from './ModalThumb';
@@ -24,6 +25,7 @@ export default Object.assign(Modal, {
   Title: ModalTitle,
   Tagline: ModalTagline,
   HeaderText: ModalHeaderText,
+  HeroImage: ModalHeroImage,
   FooterControllers: ModalFooterControllers,
   FooterAnnotation: ModalFooterAnnotation,
 });
@@ -39,6 +41,7 @@ export {
   ModalIcon,
   ModalTagline,
   ModalHeaderText,
+  ModalHeroImage,
   ModalFooterControllers,
   ModalFooterAnnotation,
 };