@platformatic/ui-components 0.2.7 → 0.2.9

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 (8) hide show
  1. package/dist/assets/index-BrHI_B3I.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/ButtonFullRounded.jsx +9 -4
  5. package/src/components/Modal.jsx +35 -5
  6. package/src/components/Modal.module.css +2 -0
  7. package/src/components/constants.js +3 -2
  8. package/dist/assets/index-CcMC5HmW.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-CcMC5HmW.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-BrHI_B3I.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.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.2.7",
4
+ "version": "0.2.9",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/ButtonFullRounded.jsx CHANGED
@@ -18,7 +18,8 @@ function ButtonFullRounded ({
18
18
  bordered,
19
19
  tip,
20
20
  selected,
21
- buttonClassName
21
+ buttonClassName,
22
+ internalOverHandling
22
23
  }) {
23
24
  const padding = commonStyles[`padding--${paddingSize}`]
24
25
  const containerClassName = `${className} border-0 ${styles.roundedFull}`
@@ -98,8 +99,11 @@ ButtonFullRounded.propTypes = {
98
99
  /**
99
100
  * buttonClassName
100
101
  */
101
- buttonClassName: PropTypes.string
102
-
102
+ buttonClassName: PropTypes.string,
103
+ /**
104
+ * internalOverHandling
105
+ */
106
+ internalOverHandling: PropTypes.bool
103
107
  }
104
108
 
105
109
  ButtonFullRounded.defaultProps = {
@@ -115,7 +119,8 @@ ButtonFullRounded.defaultProps = {
115
119
  bordered: false,
116
120
  tip: '',
117
121
  selected: false,
118
- buttonClassName: ''
122
+ buttonClassName: '',
123
+ internalOverHandling: false
119
124
  }
120
125
 
121
126
  export default ButtonFullRounded
package/src/components/Modal.jsx CHANGED
@@ -23,8 +23,10 @@ import {
23
23
  MODAL_FULL_DARK,
24
24
  MODAL_FULL_LIGHT,
25
25
  MODAL_FULL_RICH_BLACK,
26
+ MODAL_FULL_RICH_BLACK_V2,
26
27
  WHITE,
27
- RICH_BLACK
28
+ RICH_BLACK,
29
+ MEDIUM
28
30
  } from './constants'
29
31
  import PlatformaticIcon from './PlatformaticIcon'
30
32
 
@@ -36,7 +38,9 @@ function Modal ({
36
38
  size,
37
39
  profile,
38
40
  backgroundClassName,
39
- titleClassName
41
+ titleClassName,
42
+ childrenClassContainer,
43
+ modalCloseClassName
40
44
  }) {
41
45
  let contentFullscreen
42
46
  let titleFullscreen
@@ -61,11 +65,14 @@ function Modal ({
61
65
  modalCoverClassName += commonStyles['background-color-main-dark-blue']
62
66
  modalCoverClassName += ` ${backgroundClassName}`
63
67
  break
68
+
64
69
  case MODAL_FULL_LIGHT:
65
70
  modalCoverClassName += commonStyles['background-color-light-blue']
66
71
  break
72
+
67
73
  case MODAL_FULL_RICH_BLACK:
68
- contentFullscreen = styles[`content--${layout}`]
74
+ case MODAL_FULL_RICH_BLACK_V2:
75
+ contentFullscreen = childrenClassContainer || styles[`content--${layout}`]
69
76
  modalCoverClassName += commonStyles[`background-color-${RICH_BLACK}`]
70
77
  modalCoverClassName += ` ${backgroundClassName}`
71
78
  buttonFullRoundedClassName = `${styles['close--cover']} `
@@ -206,6 +213,19 @@ function Modal ({
206
213
  )
207
214
  break
208
215
 
216
+ case MODAL_FULL_RICH_BLACK_V2:
217
+ whichModal = (
218
+ <div className={modalCoverClassName}>
219
+ <div className={modalCloseClassName || buttonFullRoundedClassName}>
220
+ <PlatformaticIcon iconName='CloseIcon' color={WHITE} size={MEDIUM} onClick={() => setIsOpen(false)} internalOverHandling />
221
+ </div>
222
+ <div className={contentFullscreen}>
223
+ {children}
224
+ </div>
225
+ </div>
226
+ )
227
+ break
228
+
209
229
  default:
210
230
  break
211
231
  }
@@ -217,6 +237,10 @@ Modal.propTypes = {
217
237
  * children
218
238
  */
219
239
  children: PropTypes.node,
240
+ /**
241
+ * childrenClassContainer
242
+ */
243
+ childrenClassContainer: PropTypes.string,
220
244
  /**
221
245
  * setIsOpen
222
246
  */
@@ -244,18 +268,24 @@ Modal.propTypes = {
244
268
  /**
245
269
  * titleClassName
246
270
  */
247
- titleClassName: PropTypes.string
271
+ titleClassName: PropTypes.string,
272
+ /**
273
+ * modalCloseClassName
274
+ */
275
+ modalCloseClassName: PropTypes.string
248
276
  }
249
277
 
250
278
  Modal.defaultProps = {
251
279
  children: null,
280
+ childrenClassContainer: '',
252
281
  setIsOpen: () => {},
253
282
  title: '',
254
283
  layout: MODAL_POPUP,
255
284
  size: SMALL,
256
285
  profile: '',
257
286
  backgroundClassName: '',
258
- titleClassName: ''
287
+ titleClassName: '',
288
+ modalCloseClassName: ''
259
289
  }
260
290
 
261
291
  export default Modal
package/src/components/Modal.module.css CHANGED
@@ -38,6 +38,7 @@
38
38
  .header--popup {
39
39
  @apply flex justify-between items-center;
40
40
  }
41
+ .header--full-rich-black-v2,
41
42
  .header--full-rich-black,
42
43
  .header--full-dark,
43
44
  .header--full-light,
@@ -50,6 +51,7 @@
50
51
  .title {
51
52
  @apply font-bold text-[20px];
52
53
  }
54
+ .content--full-rich-black-v2,
53
55
  .content--full-rich-black,
54
56
  .content--full-dark,
55
57
  .header--full-light,
package/src/components/constants.js CHANGED
@@ -35,7 +35,7 @@ export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED
35
35
 
36
36
  export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
37
37
  export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
38
- export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE]
38
+ export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK]
39
39
 
40
40
  export const MODAL_POPUP = 'popup'
41
41
  export const MODAL_POPUP_V2 = 'popup-v2'
@@ -43,8 +43,9 @@ export const MODAL_COVER = 'cover'
43
43
  export const MODAL_FULL_DARK = 'full-dark'
44
44
  export const MODAL_FULL_LIGHT = 'full-light'
45
45
  export const MODAL_FULL_RICH_BLACK = 'full-rich-black'
46
+ export const MODAL_FULL_RICH_BLACK_V2 = 'full-rich-black-v2'
46
47
 
47
- export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_FULL_RICH_BLACK]
48
+ export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_FULL_RICH_BLACK, MODAL_FULL_RICH_BLACK_V2]
48
49
 
49
50
  export const FREE = 'free'
50
51
  export const BASIC = 'basic'