@platformatic/ui-components 0.1.147 → 0.1.149

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.147",
+  "version": "0.1.149",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Modal.jsx

@@ -1,5 +1,5 @@
 'use strict'
-import React from 'react'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import ButtonFullRounded from './ButtonFullRounded'
 import useEscapeKey from '../hooks/useEscapeKey'
@@ -22,7 +22,9 @@ import {
   BASIC,
   MODAL_FULL_DARK,
   MODAL_FULL_LIGHT,
-  WHITE
+  MODAL_FULL_RICH_BLACK,
+  WHITE,
+  RICH_BLACK
 } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
@@ -41,8 +43,8 @@ function Modal ({
   let modalClassName = `${styles.modal}`
   modalClassName += ' ' + styles[`modal--${layout}`]
   modalClassName += ' ' + styles[`modal--${size}`]
-
   let buttonFullRoundedClassName
+  const blurRef = useRef()
 
   const headerClassName = styles[`header--${layout}`]
   let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
@@ -62,11 +64,17 @@ function Modal ({
     case MODAL_FULL_LIGHT:
       modalCoverClassName += commonStyles['background-color-light-blue']
       break
+    case MODAL_FULL_RICH_BLACK:
+      contentFullscreen = styles[`content--${layout}`]
+      modalCoverClassName += commonStyles[`background-color-${RICH_BLACK}`]
+      modalCoverClassName += ` ${backgroundClassName}`
+      buttonFullRoundedClassName = `${styles['close--cover']} `
+      buttonFullRoundedClassName += commonStyles[`background-color-${RICH_BLACK}`]
+      break
 
     default:
       break
   }
-
   useEscapeKey(() => setIsOpen(false))
   let whichModal = <></>
 
@@ -80,10 +88,17 @@ function Modal ({
     return <Logo width={100} heigth={80} color={MAIN_DARK_BLUE} />
   }
 
+  function closeModal (event) {
+    if (event.target === blurRef.current) {
+      setIsOpen(false)
+    }
+  }
+
   switch (layout) {
     case MODAL_POPUP_V2:
       whichModal = (
-        <div className={`${styles['blur-fixed']}`} onClick={() => setIsOpen(false)}>
+
+        <div className={`${styles['blur-fixed']}`} onClick={(event) => closeModal(event)} ref={blurRef}>
           <div className={styles.content}>
             <div className={modalClassName}>
               <div className={headerClassName}>
@@ -96,6 +111,7 @@ function Modal ({
             </div>
           </div>
         </div>
+
       )
       break
     case MODAL_POPUP:
@@ -122,7 +138,7 @@ function Modal ({
         <div className={modalCoverClassName}>
           <div className={headerClassName}>
             <ButtonFullRounded
-              className={buttonFullRoundedClassName}
+              buttonClassName={buttonFullRoundedClassName}
               iconName='CircleCloseIcon'
               iconSize={LARGE}
               iconColor={MAIN_DARK_BLUE}
@@ -165,6 +181,31 @@ function Modal ({
       )
       break
 
+    case MODAL_FULL_RICH_BLACK:
+      whichModal = (
+        <div className={modalCoverClassName}>
+          <div className={headerClassName}>
+            <ButtonFullRounded
+              buttonClassName={buttonFullRoundedClassName}
+              iconName='CircleCloseIcon'
+              iconSize={LARGE}
+              iconColor={WHITE}
+              hoverEffect={BACKGROUND_COLOR_OPAQUE}
+              onClick={() => { setIsOpen(false) }}
+              bordered={false}
+              alt='Close'
+            />
+          </div>
+          <div className={contentFullscreen}>
+            <div className={titleFullscreen}>
+              <Logo width={70} heigth={56} color={WHITE} />
+            </div>
+            <div>{children}</div>
+          </div>
+        </div>
+      )
+      break
+
     default:
       break
   }

package/src/components/Modal.module.css

@@ -32,12 +32,13 @@
   @apply bg-light-blue;
 }
 .fullscreen {
-  @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
+  @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full overflow-y-auto;
 }
 .header--popup-v2,
 .header--popup {
   @apply flex justify-between items-center;
 }
+.header--full-rich-black,
 .header--full-dark,
 .header--full-light,
 .header--cover {
@@ -49,10 +50,11 @@
 .title {
   @apply font-bold text-[20px];
 }
+.content--full-rich-black,
 .content--full-dark,
 .header--full-light,
 .content--cover {
-  @apply h-auto w-full mt-4 mb-10;
+  @apply h-auto w-auto p-4 md:pt-4 md:pb-10 md:px-40;
 }
 .title--cover {
   @apply inline-flex items-center;

package/src/components/ModalDirectional.jsx

@@ -14,11 +14,13 @@ function ModalDirectional ({
   title,
   titleClassName,
   children,
-  smallLayout
+  smallLayout,
+  classNameModalLefty
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
   const [variantModalClassName, setVariantModalClassName] = useState(`${styles.container} ${styles.modalLeftCover}`)
+  const classNameLefty = classNameModalLefty || styles.modalLefty
 
   useEffect(() => {
     setVariantModalClassName(`${modalClassName} ${styles.modalLeftCoverEntering}`)
@@ -37,7 +39,7 @@ function ModalDirectional ({
     <>
       <div className={styles.blur} onClick={() => closeModal()} />
       <div className={variantModalClassName}>
-        <div className={styles.modalLefty}>
+        <div className={classNameLefty}>
           <div className={styles.headerClassName}>
             <PlatformaticIcon iconName='ArrowLongLeftIcon' color={WHITE} size={SMALL} onClick={() => closeModal()} />
             <span className={titleClassName}>{title}</span>
@@ -69,7 +71,11 @@ ModalDirectional.propTypes = {
   /**
    * smallLayout
    */
-  smallLayout: PropTypes.bool
+  smallLayout: PropTypes.bool,
+  /**
+   * classNameLefty
+   */
+  classNameLefty: PropTypes.string
 }
 
 ModalDirectional.defaultProps = {
@@ -77,7 +83,8 @@ ModalDirectional.defaultProps = {
   setIsOpen: () => {},
   title: '',
   titleClassName: '',
-  smallLayout: false
+  smallLayout: false,
+  classNameLefty: ''
 }
 
 export default ModalDirectional

package/src/components/constants.js

@@ -36,7 +36,9 @@ export const MODAL_POPUP_V2 = 'popup-v2'
 export const MODAL_COVER = 'cover'
 export const MODAL_FULL_DARK = 'full-dark'
 export const MODAL_FULL_LIGHT = 'full-light'
-export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
+export const MODAL_FULL_RICH_BLACK = 'full-rich-black'
+
+export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_FULL_RICH_BLACK]
 
 export const FREE = 'free'
 export const BASIC = 'basic'