@platformatic/ui-components 0.7.4 → 0.7.5
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.
- package/dist/assets/index-B3XhZH_I.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/ArrowLongDownIcon.jsx +91 -0
- package/src/components/icons/ArrowLongUpIcon.jsx +92 -0
- package/src/components/icons/UploadFileIcon.jsx +9 -9
- package/src/components/icons/index.js +5 -1
- package/dist/assets/index-D1klFHIw.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-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-B3XhZH_I.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-BUMVjZ-U.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
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 ArrowLongDownIcon = ({
|
|
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.8 6.99995L8.00005 2.19995M8.00005 2.19995L3.20005 6.99995M8.00005 2.19995L8.00005 14.2' stroke='none' strokeLinecap='round' strokeLinejoin='round' transform='rotate(-180 8 8)' />
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
break
|
|
36
|
+
case MEDIUM:
|
|
37
|
+
icon = (
|
|
38
|
+
<svg
|
|
39
|
+
width={24}
|
|
40
|
+
height={24}
|
|
41
|
+
viewBox='0 0 24 24'
|
|
42
|
+
fill='none'
|
|
43
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
44
|
+
className={className}
|
|
45
|
+
>
|
|
46
|
+
<path d='M19.2 10.5L11.9999 3.30005M11.9999 3.30005L4.79995 10.5001M11.9999 3.30005L12 21.3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' transform='rotate(-180 12 12)' />
|
|
47
|
+
|
|
48
|
+
</svg>
|
|
49
|
+
)
|
|
50
|
+
break
|
|
51
|
+
case LARGE:
|
|
52
|
+
icon = (
|
|
53
|
+
<svg
|
|
54
|
+
width={40}
|
|
55
|
+
height={40}
|
|
56
|
+
viewBox='0 0 40 40'
|
|
57
|
+
fill='none'
|
|
58
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
59
|
+
className={className}
|
|
60
|
+
>
|
|
61
|
+
<path d='M32 17.5L20 5.5M20 5.5L8 17.5M20 5.5L20 35.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' transform='rotate(-180 20 20)' />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
return icon
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
ArrowLongDownIcon.propTypes = {
|
|
73
|
+
/**
|
|
74
|
+
* color of text, icon and borders
|
|
75
|
+
*/
|
|
76
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
77
|
+
/**
|
|
78
|
+
* Size
|
|
79
|
+
*/
|
|
80
|
+
size: PropTypes.oneOf(SIZES),
|
|
81
|
+
/**
|
|
82
|
+
* disabled
|
|
83
|
+
*/
|
|
84
|
+
disabled: PropTypes.bool,
|
|
85
|
+
/**
|
|
86
|
+
* inactive
|
|
87
|
+
*/
|
|
88
|
+
inactive: PropTypes.bool
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default ArrowLongDownIcon
|
|
@@ -0,0 +1,92 @@
|
|
|
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 ArrowLongUpIcon = ({
|
|
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.8 6.99995L8.00005 2.19995M8.00005 2.19995L3.20005 6.99995M8.00005 2.19995L8.00005 14.2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
break
|
|
36
|
+
case MEDIUM:
|
|
37
|
+
icon = (
|
|
38
|
+
<svg
|
|
39
|
+
width={24}
|
|
40
|
+
height={24}
|
|
41
|
+
viewBox='0 0 24 24'
|
|
42
|
+
fill='none'
|
|
43
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
44
|
+
className={className}
|
|
45
|
+
>
|
|
46
|
+
<path d='M19.2 10.5L11.9999 3.30005M11.9999 3.30005L4.79995 10.5001M11.9999 3.30005L12 21.3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
|
|
48
|
+
</svg>
|
|
49
|
+
)
|
|
50
|
+
break
|
|
51
|
+
case LARGE:
|
|
52
|
+
icon = (
|
|
53
|
+
<svg
|
|
54
|
+
width={40}
|
|
55
|
+
height={40}
|
|
56
|
+
viewBox='0 0 40 40'
|
|
57
|
+
fill='none'
|
|
58
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
59
|
+
className={className}
|
|
60
|
+
>
|
|
61
|
+
<path d='M32 17.5L20 5.5M20 5.5L8 17.5M20 5.5L20 35.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
|
|
63
|
+
</svg>
|
|
64
|
+
)
|
|
65
|
+
break
|
|
66
|
+
|
|
67
|
+
default:
|
|
68
|
+
break
|
|
69
|
+
}
|
|
70
|
+
return icon
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
ArrowLongUpIcon.propTypes = {
|
|
74
|
+
/**
|
|
75
|
+
* color of text, icon and borders
|
|
76
|
+
*/
|
|
77
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
78
|
+
/**
|
|
79
|
+
* Size
|
|
80
|
+
*/
|
|
81
|
+
size: PropTypes.oneOf(SIZES),
|
|
82
|
+
/**
|
|
83
|
+
* disabled
|
|
84
|
+
*/
|
|
85
|
+
disabled: PropTypes.bool,
|
|
86
|
+
/**
|
|
87
|
+
* inactive
|
|
88
|
+
*/
|
|
89
|
+
inactive: PropTypes.bool
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export default ArrowLongUpIcon
|
|
@@ -29,9 +29,9 @@ const UploadFileIcon = ({
|
|
|
29
29
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
30
|
className={className}
|
|
31
31
|
>
|
|
32
|
-
<path d='M10 6.5V5.14655C10 5.00414 9.93927 4.86848 9.83305 4.77362L6.86956 2.12707C6.77792 2.04523 6.65937 2 6.53651 2H2.5C2.22386 2 2 2.22386 2 2.5V11.055C2 11.3312 2.22386 11.555 2.5 11.555H8.5' stroke='
|
|
33
|
-
<path d='M6.5 5.34426V2L10 5.34426H6.5Z' stroke='
|
|
34
|
-
<path d='M11 14V8M11 8L8.5 10M11 8L13.5 10' stroke='
|
|
32
|
+
<path d='M10 6.5V5.14655C10 5.00414 9.93927 4.86848 9.83305 4.77362L6.86956 2.12707C6.77792 2.04523 6.65937 2 6.53651 2H2.5C2.22386 2 2 2.22386 2 2.5V11.055C2 11.3312 2.22386 11.555 2.5 11.555H8.5' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<path d='M6.5 5.34426V2L10 5.34426H6.5Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M11 14V8M11 8L8.5 10M11 8L13.5 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
35
|
</svg>
|
|
36
36
|
)
|
|
37
37
|
break
|
|
@@ -45,9 +45,9 @@ const UploadFileIcon = ({
|
|
|
45
45
|
xmlns='http://www.w3.org/2000/svg'
|
|
46
46
|
className={className}
|
|
47
47
|
>
|
|
48
|
-
<path d='M15 9.75V7.60791C15 7.4655 14.9393 7.32984 14.833 7.23498L10.2332 3.12707C10.1416 3.04523 10.023 3 9.90014 3H3.5C3.22386 3 3 3.22386 3 3.5V16.8326C3 17.1087 3.22386 17.3326 3.5 17.3326H12.75' stroke='
|
|
49
|
-
<path d='M9.75 8.0164V3L15 8.0164H9.75Z' stroke='
|
|
50
|
-
<path d='M16.5 21V12M16.5 12L12.75 15M16.5 12L20.25 15' stroke='
|
|
48
|
+
<path d='M15 9.75V7.60791C15 7.4655 14.9393 7.32984 14.833 7.23498L10.2332 3.12707C10.1416 3.04523 10.023 3 9.90014 3H3.5C3.22386 3 3 3.22386 3 3.5V16.8326C3 17.1087 3.22386 17.3326 3.5 17.3326H12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
49
|
+
<path d='M9.75 8.0164V3L15 8.0164H9.75Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M16.5 21V12M16.5 12L12.75 15M16.5 12L20.25 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
51
|
</svg>
|
|
52
52
|
)
|
|
53
53
|
break
|
|
@@ -61,9 +61,9 @@ const UploadFileIcon = ({
|
|
|
61
61
|
xmlns='http://www.w3.org/2000/svg'
|
|
62
62
|
className={className}
|
|
63
63
|
>
|
|
64
|
-
<path d='M25 16.25V12.5306C25 12.3882 24.9393 12.2526 24.833 12.1577L16.9605 5.12707C16.8688 5.04523 16.7503 5 16.6274 5H5.5C5.22386 5 5 5.22386 5 5.5V28.3876C5 28.6637 5.22386 28.8876 5.5 28.8876H21.25' stroke='
|
|
65
|
-
<path d='M16.25 13.3607V5L25 13.3607H16.25Z' stroke='
|
|
66
|
-
<path d='M27.5 35V20M27.5 20L21.25 25M27.5 20L33.75 25' stroke='
|
|
64
|
+
<path d='M25 16.25V12.5306C25 12.3882 24.9393 12.2526 24.833 12.1577L16.9605 5.12707C16.8688 5.04523 16.7503 5 16.6274 5H5.5C5.22386 5 5 5.22386 5 5.5V28.3876C5 28.6637 5.22386 28.8876 5.5 28.8876H21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
65
|
+
<path d='M16.25 13.3607V5L25 13.3607H16.25Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M27.5 35V20M27.5 20L21.25 25M27.5 20L33.75 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
67
|
</svg>
|
|
68
68
|
)
|
|
69
69
|
break
|
|
@@ -21,8 +21,10 @@ import AppWorkspace from './AppWorkspace'
|
|
|
21
21
|
import ArrowDownFullIcon from './ArrowDownFullIcon'
|
|
22
22
|
import ArrowDownIcon from './ArrowDownIcon'
|
|
23
23
|
import ArrowLeftIcon from './ArrowLeftIcon'
|
|
24
|
+
import ArrowLongDownIcon from './ArrowLongDownIcon'
|
|
24
25
|
import ArrowLongLeftIcon from './ArrowLongLeftIcon'
|
|
25
26
|
import ArrowLongRightIcon from './ArrowLongRightIcon'
|
|
27
|
+
import ArrowLongUpIcon from './ArrowLongUpIcon'
|
|
26
28
|
import ArrowRightIcon from './ArrowRightIcon'
|
|
27
29
|
import ArrowUpIcon from './ArrowUpIcon'
|
|
28
30
|
import BellIcon from './BellIcon'
|
|
@@ -68,6 +70,7 @@ import DatabaseIcon from './DatabaseIcon'
|
|
|
68
70
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
69
71
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
70
72
|
import DeploymentHistoryIcon from './DeploymentHistoryIcon'
|
|
73
|
+
import DocumentIcon from './DocumentIcon'
|
|
71
74
|
import DownloadIcon from './DownloadIcon'
|
|
72
75
|
import EditDocumentIcon from './EditDocumentIcon'
|
|
73
76
|
import EditIcon from './EditIcon'
|
|
@@ -177,7 +180,6 @@ import PodMetricsIcon from './PodMetricsIcon'
|
|
|
177
180
|
import PodPerformanceIcon from './PodPerformanceIcon'
|
|
178
181
|
import ScalerDetailsIcon from './ScalerDetailsIcon'
|
|
179
182
|
import ScalerHistoryIcon from './ScalerHistoryIcon'
|
|
180
|
-
import DocumentIcon from './DocumentIcon'
|
|
181
183
|
|
|
182
184
|
export default {
|
|
183
185
|
AddIcon,
|
|
@@ -203,8 +205,10 @@ export default {
|
|
|
203
205
|
ArrowDownFullIcon,
|
|
204
206
|
ArrowDownIcon,
|
|
205
207
|
ArrowLeftIcon,
|
|
208
|
+
ArrowLongDownIcon,
|
|
206
209
|
ArrowLongLeftIcon,
|
|
207
210
|
ArrowLongRightIcon,
|
|
211
|
+
ArrowLongUpIcon,
|
|
208
212
|
ArrowRightIcon,
|
|
209
213
|
ArrowUpIcon,
|
|
210
214
|
BellIcon,
|