@platformatic/ui-components 0.1.91 → 0.1.92

package/package.json

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

package/src/components/Modal.jsx

@@ -7,10 +7,25 @@ import Logo from './Logo'
 import Logos from './logos'
 import styles from './Modal.module.css'
 import commonStyles from './Common.module.css'
-import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, LARGE, PROFILE, FREE, BASIC } from './constants'
+import {
+  MODAL_SIZES,
+  SMALL,
+  MODAL_LAYOUTS,
+  MODAL_COVER,
+  MODAL_POPUP,
+  MAIN_DARK_BLUE,
+  BACKGROUND_COLOR_OPAQUE,
+  LARGE,
+  PROFILES,
+  FREE,
+  BASIC,
+  MODAL_FULL_DARK,
+  MODAL_FULL_LIGHT,
+  WHITE
+} from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
-function Modal ({ setIsOpen, title, layout, children, size, profile }) {
+function Modal ({ setIsOpen, title, layout, children, size, profile, backgroundClassName }) {
   let contentFullscreen
   let titleFullscreen
   let modalClassName = `${styles.modal}`
@@ -20,11 +35,26 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
   let buttonFullRoundedClassName
 
   const headerClassName = styles[`header--${layout}`]
-  if (MODAL_COVER === layout) {
-    contentFullscreen = styles[`content--${layout}`]
-    titleFullscreen = styles[`title--${layout}`]
-    buttonFullRoundedClassName = `${styles['close--cover']} `
-    buttonFullRoundedClassName += commonStyles['background-color-light-blue']
+  let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
+  switch (layout) {
+    case MODAL_COVER:
+      contentFullscreen = styles[`content--${layout}`]
+      titleFullscreen = styles[`title--${layout}`]
+      buttonFullRoundedClassName = `${styles['close--cover']} `
+      buttonFullRoundedClassName += commonStyles['background-color-light-blue']
+      modalCoverClassName += commonStyles['background-color-light-blue']
+      break
+
+    case MODAL_FULL_DARK:
+      modalCoverClassName += commonStyles['background-color-main-dark-blue']
+      modalCoverClassName += ` ${backgroundClassName}`
+      break
+    case MODAL_FULL_LIGHT:
+      modalCoverClassName += commonStyles['background-color-light-blue']
+      break
+
+    default:
+      break
   }
 
   useEscapeKey(() => setIsOpen(false))
@@ -62,7 +92,7 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
 
     case MODAL_COVER:
       whichModal = (
-        <div className={`${styles.container} ${styles.fullscreen}`}>
+        <div className={modalCoverClassName}>
           <div className={headerClassName}>
             <ButtonFullRounded
               className={buttonFullRoundedClassName}
@@ -85,6 +115,29 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
       )
       break
 
+    case MODAL_FULL_LIGHT:
+    case MODAL_FULL_DARK:
+      whichModal = (
+        <div className={modalCoverClassName}>
+          <div className={headerClassName}>
+            <ButtonFullRounded
+              className={buttonFullRoundedClassName}
+              iconName='CircleCloseIcon'
+              iconSize={LARGE}
+              iconColor={layout === MODAL_FULL_LIGHT ? MAIN_DARK_BLUE : WHITE}
+              hoverEffect={BACKGROUND_COLOR_OPAQUE}
+              onClick={() => { setIsOpen(false) }}
+              bordered={false}
+              alt='Close'
+            />
+          </div>
+          <div className={contentFullscreen}>
+            <div>{children}</div>
+          </div>
+        </div>
+      )
+      break
+
     default:
       break
   }
@@ -115,7 +168,11 @@ Modal.propTypes = {
   /**
    * profile
    */
-  profile: PropTypes.oneOf(PROFILE)
+  profile: PropTypes.oneOf(PROFILES),
+  /**
+   * backgroundClassName
+   */
+  backgroundClassName: PropTypes.string
 }
 
 Modal.defaultProps = {
@@ -124,7 +181,8 @@ Modal.defaultProps = {
   title: '',
   layout: MODAL_POPUP,
   size: SMALL,
-  profile: ''
+  profile: '',
+  backgroundClassName: ''
 }
 
 export default Modal

package/src/components/Modal.module.css

@@ -15,11 +15,13 @@
   @apply bg-light-blue;
 }
 .fullscreen {
-  @apply fixed top-0 left-0 bg-light-blue 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 py-4 pl-20 pr-4 overflow-y-auto;
 }
 .header--popup {
   @apply flex justify-between items-center;
 }
+.header--full-dark,
+.header--full-light,
 .header--cover {
   @apply flex justify-end;
 }
@@ -29,6 +31,8 @@
 .title {
   @apply font-bold text-[20px];
 }
+.content--full-dark,
+.header--full-light,
 .content--cover {
   @apply h-auto w-full mt-4 mb-10;
 }
@@ -44,6 +48,8 @@
 .modal--full-width {
   @apply w-screen min-w-full;
 }
+.close--full-dark,
+.header--full-light,
 .close--cover {
   @apply mt-4 mr-4;
 }

package/src/components/constants.js

@@ -6,6 +6,7 @@ export const DARK_BLUE = 'dark-blue'
 export const DARK_GREEN = 'dark-green'
 export const MAIN_GREEN = 'main-green'
 export const TRANSPARENT = 'transparent'
+export const TERTIARY_BLUE = 'tertiary-blue'
 export const ERROR_RED = 'error-red'
 export const WARNING_YELLOW = 'warning-yellow'
 export const NONE = 'none'
@@ -25,16 +26,20 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 
 export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
-export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, 'tertiary-blue', TRANSPARENT]
+export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT]
 export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT]
 
 export const MODAL_POPUP = 'popup'
 export const MODAL_COVER = 'cover'
-export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER]
+export const MODAL_FULL_DARK = 'full-dark'
+export const MODAL_FULL_LIGHT = 'full-light'
+export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
 
 export const FREE = 'free'
 export const BASIC = 'basic'
-export const PROFILE = ['', FREE, BASIC]
+export const ADVANCED = 'advanced'
+export const PRO = 'pro'
+export const PROFILES = ['', FREE, BASIC, ADVANCED, PRO]
 
 export const FONT_BASE = 'base'
 export const FONT_XS = 'xs'

package/src/stories/Modal.stories.jsx

@@ -4,7 +4,7 @@ import Button from '../components/Button'
 import BorderedBox from '../components/BorderedBox'
 import DropDown from '../components/DropDown'
 import HorizontalSeparator from '../components/HorizontalSeparator'
-import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
+import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
 export default {
   title: 'Platformatic/Modal',
   component: Modal,
@@ -82,9 +82,21 @@ const MenuTemplate = () => {
 }
 export const WithDropDown = MenuTemplate.bind({})
 
-export const FullscreenLayout = Template.bind({})
-FullscreenLayout.args = {
+export const FullscreenLayoutLightBlue = Template.bind({})
+FullscreenLayoutLightBlue.args = {
   title: 'Give me an invite',
   size: FULL_WIDTH,
   layout: MODAL_COVER
 }
+
+export const FullscreenLayoutDark = Template.bind({})
+FullscreenLayoutDark.args = {
+  size: FULL_WIDTH,
+  layout: MODAL_FULL_DARK
+}
+
+export const FullscreenLayoutLight = Template.bind({})
+FullscreenLayoutLight.args = {
+  size: FULL_WIDTH,
+  layout: MODAL_FULL_LIGHT
+}