@platformatic/ui-components 0.1.75 → 0.1.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/assets/index.5f168145.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -6
  4. package/src/components/FollowUs.module.css +2 -2
  5. package/src/components/Modal.jsx +23 -9
  6. package/src/components/Modal.module.css +2 -2
  7. package/src/components/Sidebar.module.css +1 -1
  8. package/src/components/constants.js +9 -3
  9. package/dist/assets/index.d594f700.js +0 -40
package/dist/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index.d594f700.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.5f168145.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.8666e478.css">
9
9
  </head>
10
10
  <body>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.75",
4
+ "version": "0.1.77",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -22,11 +22,6 @@
22
22
  "prepare": "rm -Rf dist; npm run build; npm run tailwind"
23
23
  },
24
24
  "dependencies": {
25
- "@fortawesome/fontawesome-svg-core": "^6.2.0",
26
- "@fortawesome/free-brands-svg-icons": "^6.2.0",
27
- "@fortawesome/free-regular-svg-icons": "^6.2.0",
28
- "@fortawesome/free-solid-svg-icons": "^6.2.0",
29
- "@fortawesome/react-fontawesome": "^0.2.0",
30
25
  "autoprefixer": "^10.4.12",
31
26
  "postcss": "^8.4.17",
32
27
  "react": "^18.2.0",
package/src/components/FollowUs.module.css CHANGED
@@ -11,8 +11,8 @@
11
11
  @apply text-white text-xs mr-2;
12
12
  }
13
13
  .iconFrontpage {
14
- @apply text-white mx-4 text-xl;
14
+ @apply text-white mx-4 text-xl hover:cursor-pointer hover:scale-125;
15
15
  }
16
16
  .iconDashboard {
17
- @apply mx-1;
17
+ @apply mx-1 hover:cursor-pointer hover:scale-125;
18
18
  }
package/src/components/Modal.jsx CHANGED
@@ -3,13 +3,14 @@ import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import ButtonFullRounded from './ButtonFullRounded'
5
5
  import useEscapeKey from '../hooks/useEscapeKey'
6
- import CloseIcon from './icons/CloseIcon'
7
6
  import Logo from './Logo'
7
+ import Logos from './logos'
8
8
  import styles from './Modal.module.css'
9
9
  import commonStyles from './Common.module.css'
10
- import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, LARGE } from './constants'
10
+ import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, LARGE, PROFILE, FREE, BASIC } from './constants'
11
+ import PlatformaticIcon from './PlatformaticIcon'
11
12
 
12
- function Modal ({ setIsOpen, title, layout, children, size }) {
13
+ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
13
14
  let contentFullscreen
14
15
  let titleFullscreen
15
16
  let modalClassName = `${styles.modal}`
@@ -29,6 +30,16 @@ function Modal ({ setIsOpen, title, layout, children, size }) {
29
30
  useEscapeKey(() => setIsOpen(false))
30
31
  let whichModal = <></>
31
32
 
33
+ function renderLogo () {
34
+ if (profile === FREE) {
35
+ return <Logos.FreeLogo width={143} height={63} />
36
+ }
37
+ if (profile === BASIC) {
38
+ return <Logos.BasicLogo width={143} height={63} />
39
+ }
40
+ return <Logo width={100} heigth={80} color={MAIN_DARK_BLUE} />
41
+ }
42
+
32
43
  switch (layout) {
33
44
  case MODAL_POPUP:
34
45
  whichModal = (
@@ -38,9 +49,7 @@ function Modal ({ setIsOpen, title, layout, children, size }) {
38
49
  <div className={modalClassName}>
39
50
  <div className={headerClassName}>
40
51
  <div className={styles.title}>{title}</div>
41
- <div className={styles.close} onClick={() => setIsOpen(false)}>
42
- <CloseIcon size={SMALL} />
43
- </div>
52
+ <PlatformaticIcon iconName='CloseIcon' color={MAIN_DARK_BLUE} size={SMALL} onClick={() => setIsOpen(false)} />
44
53
  </div>
45
54
  <div>
46
55
  {children}
@@ -68,7 +77,7 @@ function Modal ({ setIsOpen, title, layout, children, size }) {
68
77
  </div>
69
78
  <div className={contentFullscreen}>
70
79
  <div className={titleFullscreen}>
71
- <Logo width={100} heigth={80} color={MAIN_DARK_BLUE} />
80
+ {renderLogo()}
72
81
  <h3>PLATFORMATIC</h3>
73
82
  </div>
74
83
  <div>{children}</div>
@@ -103,7 +112,11 @@ Modal.propTypes = {
103
112
  /**
104
113
  * Size
105
114
  */
106
- size: PropTypes.oneOf(MODAL_SIZES)
115
+ size: PropTypes.oneOf(MODAL_SIZES),
116
+ /**
117
+ * profile
118
+ */
119
+ profile: PropTypes.oneOf(PROFILE)
107
120
  }
108
121
 
109
122
  Modal.defaultProps = {
@@ -111,7 +124,8 @@ Modal.defaultProps = {
111
124
  setIsOpen: () => {},
112
125
  title: '',
113
126
  layout: MODAL_POPUP,
114
- size: SMALL
127
+ size: SMALL,
128
+ profile: ''
115
129
  }
116
130
 
117
131
  export default Modal
package/src/components/Modal.module.css CHANGED
@@ -27,10 +27,10 @@
27
27
  @apply text-[#00283D] my-2 opacity-20;
28
28
  }
29
29
  .title {
30
- @apply font-bold text-lg;
30
+ @apply font-bold text-[20px];
31
31
  }
32
32
  .content--cover {
33
- @apply h-auto w-full pt-4;
33
+ @apply h-auto w-full mt-4 mb-10;
34
34
  }
35
35
  .title--cover {
36
36
  @apply inline-flex items-center;
package/src/components/Sidebar.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  @apply flex items-center justify-start border-0 rounded-md w-full py-1 hover:bg-white hover:bg-opacity-20;
27
27
  }
28
28
  .buttonCreate {
29
- @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer;
29
+ @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer hover:font-semibold whitespace-nowrap;
30
30
  }
31
31
  .disabled {
32
32
  @apply opacity-30 cursor-default;
package/src/components/constants.js CHANGED
@@ -1,10 +1,8 @@
1
- export const COLORS_ICON = ['main-green', 'white', 'main-dark-blue', 'error-red', 'warning-yellow']
2
- export const COLORS_BUTTON = ['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']
3
- export const COLORS_BORDERED_BOX = ['main-green', 'error-red', 'white', 'dark-blue', 'warning-yellow', 'transparent']
4
1
  export const WHITE = 'white'
5
2
  export const MAIN_DARK_BLUE = 'main-dark-blue'
6
3
  export const MAIN_GREEN = 'main-green'
7
4
  export const ERROR_RED = 'error-red'
5
+ export const WARNING_YELLOW = 'warning-yellow'
8
6
  export const NONE = 'none'
9
7
  export const SMALL = 'small'
10
8
  export const MEDIUM = 'medium'
@@ -19,6 +17,14 @@ export const FULL_WIDTH = 'full-width'
19
17
  export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDERLINE]
20
18
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
21
19
 
20
+ export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
21
+ export const COLORS_BUTTON = [MAIN_GREEN, 'dark-green', 'light-green', MAIN_DARK_BLUE, 'dark-blue', 'light-blue', WHITE, ERROR_RED, 'tertiary-blue', 'transparent']
22
+ export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, 'dark-blue', WARNING_YELLOW, 'transparent']
23
+
22
24
  export const MODAL_POPUP = 'popup'
23
25
  export const MODAL_COVER = 'cover'
24
26
  export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER]
27
+
28
+ export const FREE = 'free'
29
+ export const BASIC = 'basic'
30
+ export const PROFILE = ['', FREE, BASIC]