@platformatic/ui-components 0.2.8 → 0.2.9

package/package.json

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

package/src/components/ButtonFullRounded.jsx

@@ -18,7 +18,8 @@ function ButtonFullRounded ({
   bordered,
   tip,
   selected,
-  buttonClassName
+  buttonClassName,
+  internalOverHandling
 }) {
   const padding = commonStyles[`padding--${paddingSize}`]
   const containerClassName = `${className} border-0 ${styles.roundedFull}`
@@ -98,8 +99,11 @@ ButtonFullRounded.propTypes = {
   /**
      * buttonClassName
      */
-  buttonClassName: PropTypes.string
-
+  buttonClassName: PropTypes.string,
+  /**
+     * internalOverHandling
+     */
+  internalOverHandling: PropTypes.bool
 }
 
 ButtonFullRounded.defaultProps = {
@@ -115,7 +119,8 @@ ButtonFullRounded.defaultProps = {
   bordered: false,
   tip: '',
   selected: false,
-  buttonClassName: ''
+  buttonClassName: '',
+  internalOverHandling: false
 }
 
 export default ButtonFullRounded

package/src/components/Modal.jsx

@@ -23,8 +23,10 @@ import {
   MODAL_FULL_DARK,
   MODAL_FULL_LIGHT,
   MODAL_FULL_RICH_BLACK,
+  MODAL_FULL_RICH_BLACK_V2,
   WHITE,
-  RICH_BLACK
+  RICH_BLACK,
+  MEDIUM
 } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
@@ -36,7 +38,9 @@ function Modal ({
   size,
   profile,
   backgroundClassName,
-  titleClassName
+  titleClassName,
+  childrenClassContainer,
+  modalCloseClassName
 }) {
   let contentFullscreen
   let titleFullscreen
@@ -61,11 +65,14 @@ function Modal ({
       modalCoverClassName += commonStyles['background-color-main-dark-blue']
       modalCoverClassName += ` ${backgroundClassName}`
       break
+
     case MODAL_FULL_LIGHT:
       modalCoverClassName += commonStyles['background-color-light-blue']
       break
+
     case MODAL_FULL_RICH_BLACK:
-      contentFullscreen = styles[`content--${layout}`]
+    case MODAL_FULL_RICH_BLACK_V2:
+      contentFullscreen = childrenClassContainer || styles[`content--${layout}`]
       modalCoverClassName += commonStyles[`background-color-${RICH_BLACK}`]
       modalCoverClassName += ` ${backgroundClassName}`
       buttonFullRoundedClassName = `${styles['close--cover']} `
@@ -206,6 +213,19 @@ function Modal ({
       )
       break
 
+    case MODAL_FULL_RICH_BLACK_V2:
+      whichModal = (
+        <div className={modalCoverClassName}>
+          <div className={modalCloseClassName || buttonFullRoundedClassName}>
+            <PlatformaticIcon iconName='CloseIcon' color={WHITE} size={MEDIUM} onClick={() => setIsOpen(false)} internalOverHandling />
+          </div>
+          <div className={contentFullscreen}>
+            {children}
+          </div>
+        </div>
+      )
+      break
+
     default:
       break
   }
@@ -217,6 +237,10 @@ Modal.propTypes = {
    * children
    */
   children: PropTypes.node,
+  /**
+   * childrenClassContainer
+   */
+  childrenClassContainer: PropTypes.string,
   /**
    * setIsOpen
    */
@@ -244,18 +268,24 @@ Modal.propTypes = {
   /**
    * titleClassName
    */
-  titleClassName: PropTypes.string
+  titleClassName: PropTypes.string,
+  /**
+   * modalCloseClassName
+   */
+  modalCloseClassName: PropTypes.string
 }
 
 Modal.defaultProps = {
   children: null,
+  childrenClassContainer: '',
   setIsOpen: () => {},
   title: '',
   layout: MODAL_POPUP,
   size: SMALL,
   profile: '',
   backgroundClassName: '',
-  titleClassName: ''
+  titleClassName: '',
+  modalCloseClassName: ''
 }
 
 export default Modal

package/src/components/Modal.module.css

@@ -38,6 +38,7 @@
 .header--popup {
   @apply flex justify-between items-center;
 }
+.header--full-rich-black-v2,
 .header--full-rich-black,
 .header--full-dark,
 .header--full-light,
@@ -50,6 +51,7 @@
 .title {
   @apply font-bold text-[20px];
 }
+.content--full-rich-black-v2,
 .content--full-rich-black,
 .content--full-dark,
 .header--full-light,

package/src/components/constants.js

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

package/tailwind.config.cjs

@@ -47,8 +47,7 @@ module.exports = {
       'electric-purple': '#C61BE2',
       'anti-flash-white': '#EDEDED',
       'fire-engine-red': '#D71919',
-      'alternate-rich-black': '#12171D',
-      'electric-purple': '#C61BE2'
+      'alternate-rich-black': '#12171D'
     },
     fontFamily: {
       sans: ['Montserrat'],