feat: Add Modal Icon to Modal Component (#410)

RocketChat · Mar 22, 2021 · c6a8b3e · c6a8b3e
1 parent 96bb6ae
commit c6a8b3e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 0 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_With_Icon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_With_Icon.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_With_Icon.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_With_Icon.png
diff --git a/packages/fuselage/src/components/Modal/Modal.stories.js b/packages/fuselage/src/components/Modal/Modal.stories.js
@@ -26,3 +26,20 @@ export const _Modal = () => (
     </Modal.Footer>
   </Modal>
 );
+
+export const WithIcon = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.Icon name='info' />
+      <Modal.Title>Modal Header</Modal.Title>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <ButtonGroup align='end'>
+        <Button>Cancel</Button>
+        <Button primary>Submit</Button>
+      </ButtonGroup>
+    </Modal.Footer>
+  </Modal>
+);
diff --git a/packages/fuselage/src/components/Modal/ModalIcon.js b/packages/fuselage/src/components/Modal/ModalIcon.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { Icon } from '../Icon';
+
+export const ModalIcon = ({ size = 'x24', ...props }) => (
+  <Icon {...props} size={size} />
+);
diff --git a/packages/fuselage/src/components/Modal/index.js b/packages/fuselage/src/components/Modal/index.js
@@ -4,6 +4,7 @@ import { ModalClose } from './ModalClose';
 import { ModalContent } from './ModalContent';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
+import { ModalIcon } from './ModalIcon';
 import { ModalThumb } from './ModalThumb';
 import { ModalTitle } from './ModalTitle';
 
@@ -14,6 +15,7 @@ Modal.Footer = ModalFooter;
 Modal.Header = ModalHeader;
 Modal.Thumb = ModalThumb;
 Modal.Title = ModalTitle;
+Modal.Icon = ModalIcon;
 
 export {
   Modal,
@@ -24,4 +26,5 @@ export {
   ModalHeader,
   ModalThumb,
   ModalTitle,
+  ModalIcon,
 };