fix(modal): added conditional padding for modal, adjusted zindex of c…

…lose modal icon

CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [7.0.6](https://github.com/Se-Gl/codn/compare/v7.0.5...v7.0.6) (2022-08-06)
 
-
 ### Bug Fixes
 
-* **css:** re-added css imports in components ([5ad9486](https://github.com/Se-Gl/codn/commit/5ad948608c612b6d12351763d8f018f73f9400bc))
+- **css:** re-added css imports in components ([5ad9486](https://github.com/Se-Gl/codn/commit/5ad948608c612b6d12351763d8f018f73f9400bc))
 
 ## [7.0.5](https://github.com/Se-Gl/codn/compare/v7.0.4...v7.0.5) (2022-08-06)
 

README.md

@@ -297,6 +297,7 @@ export default App
 | setToggle             | -                                                     | useState toggle setToggle                                                                                               |
 | useKeyInput           | true                                                  | Use the default key inputs "CTRL + k" to open the modal and "ESC" to close the modal                                    |
 | shadow                | true                                                  | Set a black shadow modal content                                                                                        |
+| modalPadding          | true                                                  | Apply a 20px padding around the modal                                                                                   |
 | className             | ""                                                    | Use your own className to style the modal content                                                                       |
 | backgroundAnimation   | 'fade-in animation-duration-500ms animation-forwards' | Add your custom animation className in order to overwrite the default fade in animation for the background              |
 | modalContentAnimation | 'fade-in animation-duration-500ms animation-forwards' | Add your custom animation className in order to overwrite the default fade in animation for the modal content component |

src/components/Modal/Modal.js

@@ -12,7 +12,8 @@ export const Modal = ({
   closeIcon = <CloseIcon />,
   modalContentAnimation = 'fade-in animation-duration-500ms animation-forwards',
   useKeyInput = true,
-  shadow = true
+  shadow = true,
+  modalPadding = true
 }) => {
   useKeyInput === true &&
     useEffect(() => {
@@ -51,6 +52,7 @@ export const Modal = ({
               className={className}
               setToggle={setToggle}
               closeIcon={closeIcon}
+              modalPadding={modalPadding}
               modalContentAnimation={modalContentAnimation}>
               {children}
             </ModalContent>
@@ -62,7 +64,16 @@ export const Modal = ({
   )
 }
 
-const ModalContent = ({ children, className, modalContentAnimation, closeIcon, shadow, setToggle, ...restProps }) => {
+const ModalContent = ({
+  children,
+  className,
+  modalContentAnimation,
+  closeIcon,
+  shadow,
+  setToggle,
+  modalPadding,
+  ...restProps
+}) => {
   const modalRef = useRef()
 
   return (
@@ -80,11 +91,11 @@ const ModalContent = ({ children, className, modalContentAnimation, closeIcon, s
         tabIndex={0}
         onKeyPress={setToggle.bind(this, false)}
         onClick={setToggle.bind(this, false)}
-        className='absolute z-1 focus:outline-1px focus:outline-solid focus:outline-gray text-gray-9'
-        style={{ top: '20px', right: '20px' }}>
+        className='absolute focus:outline-1px focus:outline-solid focus:outline-gray text-gray-9'
+        style={{ top: '20px', right: '20px', zIndex: '99999' }}>
         {closeIcon}
       </div>
-      <div className='p-20px'>{children}</div>
+      <div className={modalPadding ? 'p-20px' : ''}>{children}</div>
     </div>
   )
 }

src/stories/Modal.stories.js

@@ -18,7 +18,7 @@ export const StoryModal = stories.add('Modal', () => {
 
       {/* Modal */}
       <div className='relative z-2'>
-        <Modal toggle={toggleModal} setToggle={setToggleModal}>
+        <Modal toggle={toggleModal} setToggle={setToggleModal} modalPadding={false}>
           <Modal.Header className='sans font-900 text-30px fade-in-left animation-duration-500ms animation-forwards'>
             <h3>👋 Hi, I'm your modal</h3>
           </Modal.Header>

src/stories/Toast.stories.js

@@ -81,17 +81,32 @@ stories.add('Toast', () => {
   const [toastList, setToastList] = useState([])
 
   return (
-    <div className='' style={{ fontFamily: 'Inter' }}>
-      <button onClick={() => handleShowToast('info', 'Success', 'You did it! codn toast works successfully!', setToastList)}>
-        Show warning
-      </button>
-      <Toast
-        toastList={toastList}
-        setToastList={setToastList}
-        duration={50000}
-        position='top-right'
-        progressColor='from-blue to-magenta gradient-to-left'
-      />
-    </div>
+    <>
+      <div className='min-h-100vh bg-red-7' style={{ fontFamily: 'Inter' }}>
+        <button onClick={() => handleShowToast('info', 'Success', 'You did it! codn toast works successfully!', setToastList)}>
+          Show info
+        </button>
+        <Toast
+          toastList={toastList}
+          setToastList={setToastList}
+          duration={50000}
+          position='top-right'
+          progressColor='from-blue to-magenta gradient-to-left'
+        />
+      </div>
+
+      <div
+        className='h-100vh py-10rem sm:my-0px md:my-0px sm:m-10px md:m-10px opacity-100per fade-in-bottom animate animation-forwards transition-all transition-duration-300ms transition-delay-700ms'
+        style={{ fontFamily: 'Inter' }}>
+        <button onClick={() => handleShowToast('error', 'Error', 'ufff!', setToastList)}>Show error</button>
+        <Toast
+          toastList={toastList}
+          setToastList={setToastList}
+          duration={50000}
+          position='top-right'
+          progressColor='from-blue to-magenta gradient-to-left'
+        />
+      </div>
+    </>
   )
 })