@platformatic/ui-components 0.1.98 → 0.1.100

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 (10) hide show
  1. package/dist/assets/index.793edd0a.js +206 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/PlatformaticIcon.jsx +3 -2
  5. package/src/components/forms/InputWithSeparator.jsx +1 -1
  6. package/src/components/icons/CircleCheckMarkIcon.jsx +6 -5
  7. package/src/components/icons/MetricsLoadingIcon.jsx +55 -0
  8. package/src/components/icons/index.js +2 -0
  9. package/src/stories/PlatformaticIcon.stories.jsx +6 -0
  10. package/dist/assets/index.a353cb51.js +0 -206
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.a353cb51.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.793edd0a.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.bf6a37ab.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.98",
4
+ "version": "0.1.100",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -6,13 +6,14 @@ import Icons from './icons'
6
6
  import styles from './PlatformaticIcon.module.css'
7
7
  import { COLORS_ICON, SIZES } from './constants'
8
8
 
9
- function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
9
+ function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip, ...rest }) {
10
10
  let icon = <></>
11
11
  if (iconName) {
12
12
  icon = React.createElement(Icons[`${iconName}`], {
13
13
  color,
14
14
  size,
15
- tip
15
+ tip,
16
+ ...rest
16
17
  })
17
18
  if (onClick) {
18
19
  let className = styles.cursorPointer
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -51,7 +51,7 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
51
51
 
52
52
  function renderChunk (chunk, index) {
53
53
  return (
54
- <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} opaque={20} classes={chunkClasses} key={index}>
54
+ <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} backgroundColorOpacity={20} classes={chunkClasses} key={index}>
55
55
  <div className={styles.chunkContent}>
56
56
  <span className={styles.chunkText}>{chunk}</span>
57
57
  <ButtonFullRounded
package/src/components/icons/CircleCheckMarkIcon.jsx CHANGED
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
4
  import { COLORS_ICON, SIZES } from '../constants'
5
5
 
6
- const CircleCheckMarkIcon = ({ color, size }) => {
6
+ const CircleCheckMarkIcon = ({ color, size, checked }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
@@ -19,7 +19,7 @@ const CircleCheckMarkIcon = ({ color, size }) => {
19
19
  className={className}
20
20
  >
21
21
  <circle cx={8} cy={8} r={6} stroke='none' />
22
- <path d='M5 8L7.5 10L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
22
+ {checked && <path d='M5 8L7.5 10L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />}
23
23
  </svg>
24
24
  )
25
25
  break
@@ -34,7 +34,7 @@ const CircleCheckMarkIcon = ({ color, size }) => {
34
34
  className={className}
35
35
  >
36
36
  <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
37
- <path d='M7.5 12L11.25 15L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
37
+ {checked && <path d='M7.5 12L11.25 15L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />}
38
38
  </svg>
39
39
  )
40
40
  break
@@ -49,7 +49,7 @@ const CircleCheckMarkIcon = ({ color, size }) => {
49
49
  className={className}
50
50
  >
51
51
  <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
52
- <path d='M12.5 20L18.75 25L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
52
+ {checked && <path d='M12.5 20L18.75 25L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />}
53
53
  </svg>
54
54
  )
55
55
  break
@@ -73,7 +73,8 @@ CircleCheckMarkIcon.propTypes = {
73
73
 
74
74
  CircleCheckMarkIcon.defaultProps = {
75
75
  color: 'main-dark-blue',
76
- size: 'medium'
76
+ size: 'medium',
77
+ checked: true
77
78
  }
78
79
 
79
80
  export default CircleCheckMarkIcon
package/src/components/icons/MetricsLoadingIcon.jsx ADDED
@@ -0,0 +1,55 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, EXTRA_LARGE, SIZES } from '../constants'
5
+
6
+ const MetricsLoadingIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ const filledClassName = styles[`filled-${color}`]
9
+
10
+ let icon = <></>
11
+
12
+ switch (size) {
13
+ case EXTRA_LARGE:
14
+ icon = (
15
+ <svg
16
+ width={104}
17
+ height={104}
18
+ viewBox='0 0 104 104'
19
+ fill='none'
20
+ xmlns='http://www.w3.org/2000/svg'
21
+ className={className}
22
+ >
23
+ <rect x={28} y={22} width={12} height={42} rx={1.2} stroke='none' strokeWidth={3} />
24
+ <rect x={52} y={40} width={12} height={24} rx={1.2} stroke='none' strokeWidth={3} />
25
+ <rect x={76} y={4} width={12} height={60} rx={1.2} stroke='none' strokeWidth={3} />
26
+ <path d='M16 4V76H88' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
27
+ <rect x={4} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
28
+ <rect x={8} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
29
+ </svg>
30
+ )
31
+ break
32
+
33
+ default:
34
+ break
35
+ }
36
+ return icon
37
+ }
38
+
39
+ MetricsLoadingIcon.propTypes = {
40
+ /**
41
+ * color of text, icon and borders
42
+ */
43
+ color: PropTypes.oneOf(COLORS_ICON),
44
+ /**
45
+ * Size
46
+ */
47
+ size: PropTypes.oneOf(SIZES)
48
+ }
49
+
50
+ MetricsLoadingIcon.defaultProps = {
51
+ color: 'main-dark-blue',
52
+ size: 'medium'
53
+ }
54
+
55
+ export default MetricsLoadingIcon
package/src/components/icons/index.js CHANGED
@@ -51,6 +51,7 @@ import LiveIcon from './LiveIcon'
51
51
  import LoadingAppIcon from './LoadingAppIcon'
52
52
  import LogOutIcon from './LogOutIcon'
53
53
  import MetricsIcon from './MetricsIcon'
54
+ import MetricsLoadingIcon from './MetricsLoadingIcon'
54
55
  import OrganizationIcon from './OrganizationIcon'
55
56
  import PlayIcon from './PlayIcon'
56
57
  import PullRequestIcon from './PullRequestIcon'
@@ -138,6 +139,7 @@ export default {
138
139
  LoadingAppIcon,
139
140
  LogOutIcon,
140
141
  MetricsIcon,
142
+ MetricsLoadingIcon,
141
143
  OrganizationIcon,
142
144
  PlayIcon,
143
145
  PullRequestIcon,
package/src/stories/PlatformaticIcon.stories.jsx CHANGED
@@ -40,6 +40,12 @@ export default {
40
40
  type: 'radio',
41
41
  options: ['small', 'medium', 'large', 'extra-large']
42
42
  }
43
+ },
44
+ checked: {
45
+ type: 'boolean',
46
+ control: {
47
+ type: 'boolean'
48
+ }
43
49
  }
44
50
  }
45
51
  }