feat(popup): add cross button support to popup (#302)

* feat(popup): add cross button support to popup

* Add margin to close button

Author: ehsan-github

package.json

@@ -126,4 +126,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/components/popup/index.tsx

@@ -6,6 +6,8 @@ import * as R from 'ramda';
 import useKeyUp from '../../utils/useKeyUp';
 // Styles
 import getStyles, { backdropStyles } from './popup.styles';
+import { IconName } from '../icon';
+import IconButton from '../icon-button';
 
 export interface PopupProps extends Omit<BoxProps, 'css'> {
   children: React.ReactNode;
@@ -22,6 +24,7 @@ export interface PopupProps extends Omit<BoxProps, 'css'> {
   disabledMainButton?: boolean;
   footer?: React.ReactNode;
   disabledSecondaryButton?: boolean;
+  hasCloseButton?: boolean;
 }
 
 const Popup: FC<PopupProps> = ({
@@ -37,6 +40,7 @@ const Popup: FC<PopupProps> = ({
   closeOnBackdropClick = true,
   footer,
   onClose = () => {},
+  hasCloseButton = false,
   sx,
   ...props
 }: PopupProps) => {
@@ -84,6 +88,14 @@ const Popup: FC<PopupProps> = ({
         overflowX="visible"
         {...props}
       >
+        {hasCloseButton && (
+          <IconButton
+            icon={IconName.cross}
+            sx={{ position: 'absolute', right: 10, top: 10 }}
+            size="lg"
+            onClick={onClose}
+          />
+        )}
         {children}
         {footer && (
           <Box width="100%" backgroundColor="grayShade3">

src/components/popup/popup.stories.tsx

@@ -43,7 +43,9 @@ const Template: Story<PopupProps> = (props) => {
   return (
     <div>
       <Button onClick={handleToggle}>Open Drawer</Button>
-      <Popup isOpen={isOpen} onClose={handleToggle} {...props} />
+      <Popup isOpen={isOpen} onClose={handleToggle} {...props}>
+        <div>this is children</div>
+      </Popup>
     </div>
   );
 };
@@ -299,4 +301,9 @@ Default.argTypes = {
       summary: 'Is show backdrop',
     },
   },
+  hasCloseButton: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };