Merge pull request #746 from amitamrutiya/export-modal

Export modal style header and modal close button

Author: leecalcote

src/custom/Modal/index.tsx

@@ -31,7 +31,7 @@ interface UseModalReturnI extends ModalProps {
   isOpen: boolean;
 }
 
-const CloseBtn = styled(IconButton)`
+export const CloseBtn = styled(IconButton)`
   && {
     & svg {
       fill: #fff;
@@ -54,7 +54,7 @@ const StyledDialog = styled(Dialog)`
   }
 `;
 
-const StyledHeader = styled('div')(() => ({
+export const ModalStyledHeader = styled('div')(() => ({
   background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
   color: '#eee',
   display: 'flex',
@@ -141,15 +141,15 @@ export const Modal: React.FC<ModalProps> = ({
       {...props}
     >
       {title && (
-        <StyledHeader>
+        <ModalStyledHeader>
           {headerIcon && headerIcon}
           <Typography component={'div'} variant="h6">
             {title}
           </Typography>
           <CloseBtn onClick={closeModal}>
             <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
           </CloseBtn>
-        </StyledHeader>
+        </ModalStyledHeader>
       )}
 
       {reactNode && reactNode}

src/custom/index.tsx

@@ -89,13 +89,15 @@ export {
 
 //Custom Modal
 export {
+  CloseBtn,
   Modal,
   ModalBody,
   ModalButtonDanger,
   ModalButtonPrimary,
   ModalButtonSecondary,
   ModalButtonTertiary,
   ModalFooter,
+  ModalStyledHeader,
   PrimaryActionButtons,
   useModal
 } from './Modal';