@platformatic/ui-components 0.19.4 → 0.20.0

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 (6) hide show
  1. package/dist/assets/{index-DEoizFxJ.js → index-Ca49jjlR.js} +1 -1
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/icons/MarkdownDownloadIcon.jsx +27 -11
  5. package/src/components/icons/WorkflowIcon.jsx +79 -0
  6. package/src/components/icons/index.js +2 -0
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-DEoizFxJ.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-Ca49jjlR.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CMl46sxX.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.19.4",
4
+ "version": "0.20.0",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/icons/MarkdownDownloadIcon.jsx CHANGED
@@ -1,7 +1,20 @@
1
1
  import * as React from 'react'
2
- import { SMALL, MEDIUM, LARGE } from '../constants'
2
+ import styles from './Icons.module.css'
3
+ import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
3
4
 
4
- const MarkdownDownloadIcon = ({ size = SMALL }) => {
5
+ const MarkdownDownloadIcon = ({
6
+ color = MAIN_DARK_BLUE,
7
+ size = MEDIUM,
8
+ disabled = false,
9
+ inactive = false
10
+ }) => {
11
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
12
+ if (disabled) {
13
+ className += ` ${styles.iconDisabled}`
14
+ }
15
+ if (inactive) {
16
+ className += ` ${styles.iconInactive}`
17
+ }
5
18
  let icon = <></>
6
19
 
7
20
  switch (size) {
@@ -13,10 +26,11 @@ const MarkdownDownloadIcon = ({ size = SMALL }) => {
13
26
  viewBox='0 0 16 16'
14
27
  fill='none'
15
28
  xmlns='http://www.w3.org/2000/svg'
29
+ className={className}
16
30
  >
17
- <path d='M11.5002 14V8M11.5002 14L9.32617 11.8031M11.5002 14L13.7352 11.7414' stroke='#00050B' strokeLinecap='round' strokeLinejoin='round' />
18
- <path d='M3 5H4.44324L5.96757 9.03125H6.03243L7.55676 5H9V11H7.86487V7.09473H7.81892L6.38649 10.9707H5.61351L4.18108 7.08008H4.13514V11H3V5Z' fill='#00050B' />
19
- <path d='M8 2H2V12.5H7.5M8 2L10 3.5V4M8 2V4H10M10 9.5V4' stroke='#00050B' strokeLinecap='round' strokeLinejoin='round' />
31
+ <path d='M11.5002 14V8M11.5002 14L9.32617 11.8031M11.5002 14L13.7352 11.7414' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32
+ <path d='M3 5H4.44324L5.96757 9.03125H6.03243L7.55676 5H9V11H7.86487V7.09473H7.81892L6.38649 10.9707H5.61351L4.18108 7.08008H4.13514V11H3V5Z' fill='none' />
33
+ <path d='M8 2H2V12.5H7.5M8 2L10 3.5V4M8 2V4H10M10 9.5V4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
20
34
  </svg>
21
35
  )
22
36
  break
@@ -29,10 +43,11 @@ const MarkdownDownloadIcon = ({ size = SMALL }) => {
29
43
  viewBox='0 0 24 24'
30
44
  fill='none'
31
45
  xmlns='http://www.w3.org/2000/svg'
46
+ className={className}
32
47
  >
33
- <path d='M17.2502 21V12M17.2502 21L13.9893 17.7047M17.2502 21L20.6028 17.6121' stroke='#00050B' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
34
- <path d='M4.5 7.5H6.66487L8.95135 13.5469H9.04865L11.3351 7.5H13.5V16.5H11.7973V10.6421H11.7284L9.57973 16.4561H8.42027L6.27162 10.6201H6.2027V16.5H4.5V7.5Z' fill='#00050B' />
35
- <path d='M12 3H3V18.75H11.25M12 3L15 5.25V6M12 3V6H15M15 14.25V6' stroke='#00050B' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
48
+ <path d='M17.2502 21V12M17.2502 21L13.9893 17.7047M17.2502 21L20.6028 17.6121' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M4.5 7.5H6.66487L8.95135 13.5469H9.04865L11.3351 7.5H13.5V16.5H11.7973V10.6421H11.7284L9.57973 16.4561H8.42027L6.27162 10.6201H6.2027V16.5H4.5V7.5Z' fill='none' />
50
+ <path d='M12 3H3V18.75H11.25M12 3L15 5.25V6M12 3V6H15M15 14.25V6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
36
51
  </svg>
37
52
  )
38
53
  break
@@ -45,10 +60,11 @@ const MarkdownDownloadIcon = ({ size = SMALL }) => {
45
60
  viewBox='0 0 40 40'
46
61
  fill='none'
47
62
  xmlns='http://www.w3.org/2000/svg'
63
+ className={className}
48
64
  >
49
- <path d='M28.7504 35V20M28.7504 35L23.3154 29.5078M28.7504 35L34.338 29.3535' stroke='#00050B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
50
- <path d='M7.5 12.5H11.1081L14.9189 22.5781H15.0811L18.8919 12.5H22.5V27.5H19.6622V17.7368H19.5473L15.9662 27.4268H14.0338L10.4527 17.7002H10.3378V27.5H7.5V12.5Z' fill='#00050B' />
51
- <path d='M20 5H5V31.25H18.75M20 5L25 8.75V10M20 5V10H25M25 23.75V10' stroke='#00050B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
65
+ <path d='M28.7504 35V20M28.7504 35L23.3154 29.5078M28.7504 35L34.338 29.3535' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66
+ <path d='M7.5 12.5H11.1081L14.9189 22.5781H15.0811L18.8919 12.5H22.5V27.5H19.6622V17.7368H19.5473L15.9662 27.4268H14.0338L10.4527 17.7002H10.3378V27.5H7.5V12.5Z' fill='none' />
67
+ <path d='M20 5H5V31.25H18.75M20 5L25 8.75V10M20 5V10H25M25 23.75V10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
52
68
  </svg>
53
69
  )
54
70
  break
package/src/components/icons/WorkflowIcon.jsx ADDED
@@ -0,0 +1,79 @@
1
+ import * as React from 'react'
2
+ import styles from './Icons.module.css'
3
+ import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+
5
+ const WorkflowIcon = ({
6
+ color = MAIN_DARK_BLUE,
7
+ size = MEDIUM,
8
+ disabled = false,
9
+ inactive = false
10
+ }) => {
11
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
12
+ if (disabled) {
13
+ className += ` ${styles.iconDisabled}`
14
+ }
15
+ if (inactive) {
16
+ className += ` ${styles.iconInactive}`
17
+ }
18
+ let icon = <></>
19
+
20
+ switch (size) {
21
+ case SMALL:
22
+ icon = (
23
+ <svg
24
+ width={16}
25
+ height={16}
26
+ viewBox='0 0 16 16'
27
+ fill='none'
28
+ xmlns='http://www.w3.org/2000/svg'
29
+ className={className}
30
+ >
31
+ <rect x={2} y={2} width={5} height={3} stroke='none' strokeLinejoin='round' />
32
+ <path d='M5.5 6.5H10.5V9.5H5.5V6.5Z' stroke='none' strokeLinejoin='round' />
33
+ <rect x={9} y={11} width={5} height={3} stroke='none' strokeLinejoin='round' />
34
+ <path d='M4 5V7.5C4 8.05228 4.44772 8.5 5 8.5H6M7.5 10V11.5C7.5 12.0523 7.94772 12.5 8.5 12.5H9' stroke='none' />
35
+ </svg>
36
+ )
37
+ break
38
+ case MEDIUM:
39
+ icon = (
40
+ <svg
41
+ width={24}
42
+ height={24}
43
+ viewBox='0 0 24 24'
44
+ fill='none'
45
+ xmlns='http://www.w3.org/2000/svg'
46
+ className={className}
47
+ >
48
+ <rect x={3} y={3} width={7.5} height={4.5} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
49
+ <path d='M8.25 9.75H15.75V14.25H8.25V9.75Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
+ <rect x={13.5} y={16.5} width={7.5} height={4.5} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
51
+ <path d='M6 7.5V11.25C6 12.0784 6.67157 12.75 7.5 12.75H9M11.25 15V17.25C11.25 18.0784 11.9216 18.75 12.75 18.75H13.5' stroke='none' strokeWidth={1.5} />
52
+ </svg>
53
+ )
54
+ break
55
+ case LARGE:
56
+ icon = (
57
+ <svg
58
+ width={40}
59
+ height={40}
60
+ viewBox='0 0 40 40'
61
+ fill='none'
62
+ xmlns='http://www.w3.org/2000/svg'
63
+ className={className}
64
+ >
65
+ <rect x={5} y={5} width={12.5} height={7.5} stroke='none' strokeWidth={2} strokeLinejoin='round' />
66
+ <path d='M13.75 16.25H26.25V23.75H13.75V16.25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
67
+ <rect x={22.5} y={27.5} width={12.5} height={7.5} stroke='none' strokeWidth={2} strokeLinejoin='round' />
68
+ <path d='M10 12.5V17.5C10 18.8807 11.1193 20 12.5 20H14M18.75 24V28.75C18.75 30.1307 19.8693 31.25 21.25 31.25H22.5' stroke='none' strokeWidth={2} />
69
+ </svg>
70
+ )
71
+ break
72
+
73
+ default:
74
+ break
75
+ }
76
+ return icon
77
+ }
78
+
79
+ export default WorkflowIcon
package/src/components/icons/index.js CHANGED
@@ -226,6 +226,7 @@ import UserComputerIcon from './UserComputerIcon'
226
226
  import UserIcon from './UserIcon'
227
227
  import UserRemoveIcon from './UserRemoveIcon'
228
228
  import UserRoleIcon from './UserRoleIcon'
229
+ import WorkflowIcon from './WorkflowIcon'
229
230
  import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
230
231
  import WorkspaceEmptyIcon from './WorkspaceEmptyIcon'
231
232
  import WorkspaceFailIcon from './WorkspaceFailIcon'
@@ -465,6 +466,7 @@ export default {
465
466
  UserIcon,
466
467
  UserRemoveIcon,
467
468
  UserRoleIcon,
469
+ WorkflowIcon,
468
470
  WorkspaceDynamicIcon,
469
471
  WorkspaceEmptyIcon,
470
472
  WorkspaceFailIcon,