@platformatic/ui-components 0.7.22 → 0.7.24

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 (11) hide show
  1. package/dist/assets/{index-CY9YlI2t.js → index-BZ5YvRH5.js} +7 -7
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Modal.jsx +24 -12
  5. package/src/components/Modal.module.css +1 -1
  6. package/src/components/ModalDirectional.module.css +1 -1
  7. package/src/components/forms/Select.jsx +1 -1
  8. package/src/components/forms/Select.module.css +4 -1
  9. package/src/components/icons/HourglassIcon.jsx +99 -0
  10. package/src/components/icons/index.js +2 -0
  11. package/src/stories/forms/Select.stories.jsx +2 -2
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-CY9YlI2t.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-BZ5YvRH5.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.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.7.22",
4
+ "version": "0.7.24",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Modal.jsx CHANGED
@@ -41,7 +41,8 @@ function Modal ({
41
41
  titleClassName = '',
42
42
  childrenClassContainer = '',
43
43
  modalCloseClassName = '',
44
- permanent = false
44
+ permanent = false,
45
+ showCloseButtonOnTop = true
45
46
  }) {
46
47
  let contentFullscreen
47
48
  let titleFullscreen
@@ -83,7 +84,11 @@ function Modal ({
83
84
  default:
84
85
  break
85
86
  }
86
- useEscapeKey(() => setIsOpen(false))
87
+ useEscapeKey(() => {
88
+ if (showCloseButtonOnTop) {
89
+ setIsOpen(false)
90
+ }
91
+ })
87
92
  let whichModal = <></>
88
93
 
89
94
  function renderLogo () {
@@ -231,15 +236,18 @@ function Modal ({
231
236
  case MODAL_FULL_RICH_BLACK_V2:
232
237
  whichModal = (
233
238
  <div className={modalCoverClassName}>
234
- <div className={modalCloseClassName || buttonFullRoundedClassName}>
235
- <PlatformaticIcon
236
- iconName='CloseIcon'
237
- color={WHITE}
238
- size={MEDIUM}
239
- onClick={() => setIsOpen(false)}
240
- internalOverHandling
241
- />
242
- </div>
239
+
240
+ {showCloseButtonOnTop && (
241
+ <div className={modalCloseClassName || buttonFullRoundedClassName}>
242
+ <PlatformaticIcon
243
+ iconName='CloseIcon'
244
+ color={WHITE}
245
+ size={MEDIUM}
246
+ onClick={() => setIsOpen(false)}
247
+ internalOverHandling
248
+ />
249
+ </div>
250
+ )}
243
251
  <div className={contentFullscreen}>
244
252
  {children}
245
253
  </div>
@@ -297,7 +305,11 @@ Modal.propTypes = {
297
305
  /**
298
306
  * permanent: modal could be closed only with Esc, X or Cancel
299
307
  */
300
- permanent: PropTypes.bool
308
+ permanent: PropTypes.bool,
309
+ /**
310
+ * showCloseButtonOnTop: show button on X
311
+ */
312
+ showCloseButtonOnTop: PropTypes.bool
301
313
  }
302
314
 
303
315
  export default Modal
package/src/components/Modal.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  background-color: rgba(0, 0, 0, 0.95);
4
4
  }
5
5
  .blur-absolute {
6
- @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/95;
6
+ @apply absolute top-0 left-0 w-full h-full z-20 bg-rich-black/95;
7
7
  }
8
8
  .blur-fixed {
9
9
  @apply fixed top-0 left-0 w-screen h-full z-20 bg-rich-black/95 flex justify-center items-center;
package/src/components/ModalDirectional.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .blur {
2
- @apply fixed top-0 left-0 w-full h-full z-10 bg-rich-black/95;
2
+ @apply fixed top-0 left-0 w-full h-full z-20 bg-rich-black/95;
3
3
  }
4
4
  .container {
5
5
  @apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white/30 border-l;
package/src/components/forms/Select.jsx CHANGED
@@ -38,7 +38,7 @@ function Select ({
38
38
  const showError = errorMessage.length > 0
39
39
  const containerClassName = `${styles.container} ${defaultContainerClassName} `
40
40
  let baseWrapperClassName = `${styles.selectContainer} `
41
- let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
41
+ let inputClassName = `${styles.select} ${inputTextClassName}`
42
42
  baseWrapperClassName += ' ' + styles[`select-${mainColor}`]
43
43
  baseWrapperClassName += ' ' + commonStyles[`text--${borderColor}`]
44
44
  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
package/src/components/forms/Select.module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @apply w-full flex items-center relative z-10 gap-x-2 border border-solid box-border rounded py-1.5 px-2 md:px-3 md:py-[10.5px];
6
6
  }
7
7
  .select {
8
- @apply h-full border-none rounded;
8
+ @apply h-full border-none rounded truncate w-[calc(100%-1rem)];
9
9
  }
10
10
  .select-main-dark-blue input.active,
11
11
  .select-main-dark-blue input:focus {
@@ -34,6 +34,9 @@
34
34
  .liContent {
35
35
  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-full;
36
36
  }
37
+ .liContent > span {
38
+ @apply truncate;
39
+ }
37
40
  .descriptionValue {
38
41
  @apply opacity-70
39
42
  }
package/src/components/icons/HourglassIcon.jsx ADDED
@@ -0,0 +1,99 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const HourglassIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ >
32
+ <path d='M12 2H4V4H12V2Z' stroke='none' strokeLinejoin='round' />
33
+ <path d='M4 12V14H12V12H4Z' stroke='none' strokeLinejoin='round' />
34
+ <path d='M11 4V4C11 5.24949 10.3755 6.41631 9.3359 7.1094L6.6641 8.8906C5.62446 9.58369 5 10.7505 5 12V12' stroke='none' />
35
+ <path d='M5 4V4C5 5.24949 5.62446 6.41631 6.6641 7.1094L9.3359 8.8906C10.3755 9.58369 11 10.7505 11 12V12' stroke='none' />
36
+ </svg>
37
+ )
38
+ break
39
+ case MEDIUM:
40
+ icon = (
41
+ <svg
42
+ width={24}
43
+ height={24}
44
+ viewBox='0 0 24 24'
45
+ fill='none'
46
+ xmlns='http://www.w3.org/2000/svg'
47
+ className={className}
48
+ >
49
+ <path d='M18 3H6V6H18V3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
+ <path d='M6 18V21H18V18H6Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
51
+ <path d='M16.5 6V6C16.5 7.87423 15.5633 9.62446 14.0038 10.6641L9.99615 13.3359C8.43669 14.3755 7.5 16.1258 7.5 18V18' stroke='none' strokeWidth={1.5} />
52
+ <path d='M7.5 6V6C7.5 7.87423 8.43669 9.62446 9.99615 10.6641L14.0038 13.3359C15.5633 14.3755 16.5 16.1258 16.5 18V18' stroke='none' strokeWidth={1.5} />
53
+ </svg>
54
+ )
55
+ break
56
+ case LARGE:
57
+ icon = (
58
+ <svg
59
+ width={40}
60
+ height={40}
61
+ viewBox='0 0 40 40'
62
+ fill='none'
63
+ xmlns='http://www.w3.org/2000/svg'
64
+ className={className}
65
+ >
66
+ <path d='M30 5H10V10H30V5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
67
+ <path d='M10 30V35H30V30H10Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
68
+ <path d='M27.5 10V11.7889C27.5 13.795 26.4974 15.6684 24.8282 16.7812L15.1718 23.2188C13.5026 24.3316 12.5 26.205 12.5 28.2111V30' stroke='none' strokeWidth={2} />
69
+ <path d='M12.5 10V11.7889C12.5 13.795 13.5026 15.6684 15.1718 16.7812L24.8282 23.2188C26.4974 24.3316 27.5 26.205 27.5 28.2111V30' stroke='none' strokeWidth={2} />
70
+ </svg>
71
+ )
72
+ break
73
+
74
+ default:
75
+ break
76
+ }
77
+ return icon
78
+ }
79
+
80
+ HourglassIcon.propTypes = {
81
+ /**
82
+ * color of text, icon and borders
83
+ */
84
+ color: PropTypes.oneOf(COLORS_ICON),
85
+ /**
86
+ * Size
87
+ */
88
+ size: PropTypes.oneOf(SIZES),
89
+ /**
90
+ * disabled
91
+ */
92
+ disabled: PropTypes.bool,
93
+ /**
94
+ * inactive
95
+ */
96
+ inactive: PropTypes.bool
97
+ }
98
+
99
+ export default HourglassIcon
package/src/components/icons/index.js CHANGED
@@ -97,6 +97,7 @@ import GitHubRepo2Icon from './GitHubRepo2Icon'
97
97
  import GraphQLIcon from './GraphQLIcon'
98
98
  import GraphQLEditsIcon from './GraphQLEditsIcon'
99
99
  import HorizontalPodAutoscalerIcon from './HorizontalPodAutoscalerIcon'
100
+ import HourglassIcon from './HourglassIcon'
100
101
  import K8SMetricsIcon from './K8SMetricsIcon'
101
102
  import KeyIcon from './KeyIcon'
102
103
  import ImportAppIcon from './ImportAppIcon'
@@ -291,6 +292,7 @@ export default {
291
292
  GraphQLIcon,
292
293
  GraphQLEditsIcon,
293
294
  HorizontalPodAutoscalerIcon,
295
+ HourglassIcon,
294
296
  ImportAppIcon,
295
297
  InfrastructureIcon,
296
298
  IngressControllIcon,
package/src/stories/forms/Select.stories.jsx CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  } from '../../components/constants'
12
12
 
13
13
  const divStyle = {
14
- width: '100%',
14
+ width: '300px',
15
15
  height: 'auto',
16
16
  padding: '20px',
17
17
  backgroundColor: 'transparent'
@@ -78,7 +78,7 @@ BorderMainDarkBlue.args = {
78
78
  name: 'test',
79
79
  placeholder: 'Defaul option',
80
80
  options: [...Array(20).keys()].map((ele) => ({
81
- label: `Option ${ele}`,
81
+ label: ele % 2 === 0 ? `Option ${ele}` : `Long long long long Option ${ele}`,
82
82
  value: `Value${ele}`,
83
83
  iconName: 'SocialGitHubIcon'
84
84
  })),