@platformatic/ui-components 0.1.148 → 0.1.149

package/package.json

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

package/src/components/Modal.jsx

@@ -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'
 
@@ -62,6 +64,13 @@ 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
@@ -129,7 +138,7 @@ function Modal ({
         <div className={modalCoverClassName}>
           <div className={headerClassName}>
             <ButtonFullRounded
-              className={buttonFullRoundedClassName}
+              buttonClassName={buttonFullRoundedClassName}
               iconName='CircleCloseIcon'
               iconSize={LARGE}
               iconColor={MAIN_DARK_BLUE}
@@ -172,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'