@platformatic/ui-components 0.7.2 → 0.7.4
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-DbI83KVc.js → index-D1klFHIw.js} +10 -10
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/DocumentIcon.jsx +99 -0
- package/src/components/icons/HorizontalPodAutoscalerIcon.jsx +96 -0
- package/src/components/icons/PodMetricsIcon.jsx +101 -0
- package/src/components/icons/PodPerformanceIcon.jsx +103 -0
- package/src/components/icons/RequestsIcon.jsx +109 -0
- package/src/components/icons/ScalerDetailsIcon.jsx +99 -0
- package/src/components/icons/ScalerHistoryIcon.jsx +102 -0
- package/src/components/icons/index.js +14 -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-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-D1klFHIw.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,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 DocumentIcon = ({
|
|
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
|
+
<rect x='3' y='2' width='10' height='12' rx='1' stroke='none' />
|
|
33
|
+
<path d='M5.08325 5.33325H10.6388' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M5.08325 8H10.6388' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M5.08325 10.6667H10.6388' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
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
|
+
<rect x='4.5' y='3' width='15' height='18' rx='1' stroke='none' strokeWidth={1.5} />
|
|
50
|
+
<path d='M7.625 8H15.9583' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M7.625 12H15.9583' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M7.625 16H15.9583' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
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
|
+
<rect x='7.5' y='5' width='25' height='30' rx='1' stroke='none' strokeWidth={2} />
|
|
67
|
+
<path d='M12.7083 13.3333H26.5971' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<path d='M12.7083 20H26.5971' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M12.7083 26.6667H26.5971' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
break
|
|
76
|
+
}
|
|
77
|
+
return icon
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
DocumentIcon.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 DocumentIcon
|
|
@@ -0,0 +1,96 @@
|
|
|
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 HorizontalPodAutoscalerIcon = ({
|
|
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='M7.99996 5L5.21537 6.60769V9.82306L7.99996 11.4307L10.7846 9.82306V6.60769L7.99996 5Z' stroke='none' strokeLinejoin='round' />
|
|
33
|
+
<path d='M11.2154 5L14 6.60769V9.82306L11.2154 11.4307' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M4.78467 5L2.00008 6.60769V9.82306L4.78467 11.4307' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
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
|
+
<path d='M12.0002 7.5L7.8233 9.91153V14.7346L12.0002 17.1461L16.1771 14.7346V9.91153L12.0002 7.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M16.8231 7.5L21 9.91153V14.7346L16.8231 17.1461' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M7.17676 7.5L2.99987 9.91153V14.7346L7.17676 17.1461' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
</svg>
|
|
52
|
+
)
|
|
53
|
+
break
|
|
54
|
+
case LARGE:
|
|
55
|
+
icon = (
|
|
56
|
+
<svg
|
|
57
|
+
width={40}
|
|
58
|
+
height={40}
|
|
59
|
+
viewBox='0 0 40 40'
|
|
60
|
+
fill='none'
|
|
61
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
62
|
+
className={className}
|
|
63
|
+
>
|
|
64
|
+
<path d='M20.0001 12.5L13.0387 16.5192V24.5576L20.0001 28.5769L26.9616 24.5576V16.5192L20.0001 12.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
65
|
+
<path d='M28.0385 12.5L35 16.5192V24.5576L28.0385 28.5769' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M11.9614 12.5L4.99995 16.5192V24.5576L11.9614 28.5769' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
</svg>
|
|
68
|
+
)
|
|
69
|
+
break
|
|
70
|
+
|
|
71
|
+
default:
|
|
72
|
+
break
|
|
73
|
+
}
|
|
74
|
+
return icon
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
HorizontalPodAutoscalerIcon.propTypes = {
|
|
78
|
+
/**
|
|
79
|
+
* color of text, icon and borders
|
|
80
|
+
*/
|
|
81
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
82
|
+
/**
|
|
83
|
+
* Size
|
|
84
|
+
*/
|
|
85
|
+
size: PropTypes.oneOf(SIZES),
|
|
86
|
+
/**
|
|
87
|
+
* disabled
|
|
88
|
+
*/
|
|
89
|
+
disabled: PropTypes.bool,
|
|
90
|
+
/**
|
|
91
|
+
* inactive
|
|
92
|
+
*/
|
|
93
|
+
inactive: PropTypes.bool
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export default HorizontalPodAutoscalerIcon
|
|
@@ -0,0 +1,101 @@
|
|
|
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 PodMetricsIcon = ({
|
|
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='M5.5 7H4.5C4.22386 7 4 7.22386 4 7.5V12C4 12.2761 4.22386 12.5 4.5 12.5H5.5C5.77614 12.5 6 12.2761 6 12V7.5C6 7.22386 5.77614 7 5.5 7Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M10 6.5V4.5C10 4.22386 9.77614 4 9.5 4H8.5C8.22386 4 8 4.22386 8 4.5V8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M12 6.5V2.5C12 2.22386 12.2239 2 12.5 2H13.5C13.7761 2 14 2.22386 14 2.5V8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M2 2V14H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M11 8L8.40192 9.5V12.5L11 14L13.5981 12.5V9.5L11 8Z' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
</svg>
|
|
38
|
+
)
|
|
39
|
+
break
|
|
40
|
+
case MEDIUM:
|
|
41
|
+
icon = (
|
|
42
|
+
<svg
|
|
43
|
+
width={24}
|
|
44
|
+
height={24}
|
|
45
|
+
viewBox='0 0 24 24'
|
|
46
|
+
fill='none'
|
|
47
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
48
|
+
className={className}
|
|
49
|
+
>
|
|
50
|
+
<path d='M8.5 10.5H6.5C6.22386 10.5 6 10.7239 6 11V18.25C6 18.5261 6.22386 18.75 6.5 18.75H8.5C8.77614 18.75 9 18.5261 9 18.25V11C9 10.7239 8.77614 10.5 8.5 10.5Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M15 9.75V6.5C15 6.22386 14.7761 6 14.5 6H12.5C12.2239 6 12 6.22386 12 6.5V12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M18 9.75V3.5C18 3.22386 18.2239 3 18.5 3H20.5C20.7761 3 21 3.22386 21 3.5V12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M3 3V21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M16.5 12L12.6029 14.25V18.75L16.5 21L20.3971 18.75V14.25L16.5 12Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
><path d='M14.5 17.5H10.5C10.2239 17.5 10 17.7239 10 18V30.75C10 31.0261 10.2239 31.25 10.5 31.25H14.5C14.7761 31.25 15 31.0261 15 30.75V18C15 17.7239 14.7761 17.5 14.5 17.5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<path d='M25 16.25V10.5C25 10.2239 24.7761 10 24.5 10H20.5C20.2239 10 20 10.2239 20 10.5V20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M30 16.25V5.5C30 5.22386 30.2239 5 30.5 5H34.5C34.7761 5 35 5.22386 35 5.5V20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M5 5V35H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
71
|
+
<path d='M27.5 20L21.0048 23.75V31.25L27.5 35L33.9952 31.25V23.75L27.5 20Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
PodMetricsIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(SIZES),
|
|
91
|
+
/**
|
|
92
|
+
* disabled
|
|
93
|
+
*/
|
|
94
|
+
disabled: PropTypes.bool,
|
|
95
|
+
/**
|
|
96
|
+
* inactive
|
|
97
|
+
*/
|
|
98
|
+
inactive: PropTypes.bool
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export default PodMetricsIcon
|
|
@@ -0,0 +1,103 @@
|
|
|
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 PodPerformanceIcon = ({
|
|
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
|
+
><path d='M7.06325 14C4.26689 14 2 11.727 2 8.92311C2 6.11921 4.26689 3.84619 7.06325 3.84619C9.46576 3.84619 11.4775 5.52403 11.9965 7.77486' stroke='none' strokeLinecap='round' />
|
|
32
|
+
<path d='M7.06286 3.84615V2M5.22168 2H8.90404' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M10.9837 5.02751L11.642 4.38226M10.9985 3.72217L12.2856 5.04235' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M3.33446 5.09739L2.69392 4.43439M2.03271 5.07666L3.35514 3.79212' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M8.67407 6.61512L7.06295 9.38435' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M10.5 9L8.33494 10.25V12.75L10.5 14L12.6651 12.75V10.25L10.5 9Z' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
</svg>
|
|
38
|
+
)
|
|
39
|
+
break
|
|
40
|
+
case MEDIUM:
|
|
41
|
+
icon = (
|
|
42
|
+
<svg
|
|
43
|
+
width={24}
|
|
44
|
+
height={24}
|
|
45
|
+
viewBox='0 0 24 24'
|
|
46
|
+
fill='none'
|
|
47
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
48
|
+
className={className}
|
|
49
|
+
><path d='M10.5949 21.0001C6.40034 21.0001 3 17.5905 3 13.3847C3 9.17881 6.40034 5.76929 10.5949 5.76929C14.1986 5.76929 17.2162 8.28604 17.9947 11.6623' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
50
|
+
<path d='M10.5943 5.76923V3M7.83252 3H13.3561' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M16.4754 7.54127L17.4628 6.57339M16.4976 5.58325L18.4281 7.56353' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M5.00145 7.64608L4.04064 6.65159M3.04883 7.61499L5.03246 5.68819' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M13.0114 9.9228L10.5947 14.0767' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M15.75 13.5L12.5024 15.375V19.125L15.75 21L18.9976 19.125V15.375L15.75 13.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
>
|
|
68
|
+
<path d='M17.6581 35.0001C10.6672 35.0001 5 29.3176 5 22.3078C5 15.298 10.6672 9.61548 17.6581 9.61548C23.6644 9.61548 28.6936 13.8101 29.9911 19.4372' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
69
|
+
<path d='M17.6576 9.61538V5M13.0547 5H22.2606' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M27.4591 12.5688L29.1049 10.9556M27.4961 9.30542L30.7137 12.6059' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
71
|
+
<path d='M8.33591 12.7435L6.73457 11.086M5.08154 12.6917L8.38759 9.48031' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M21.6859 16.5379L17.6581 23.461' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<path d='M26.25 22.5L20.8373 25.625V31.875L26.25 35L31.6627 31.875V25.625L26.25 22.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
74
|
+
</svg>
|
|
75
|
+
)
|
|
76
|
+
break
|
|
77
|
+
|
|
78
|
+
default:
|
|
79
|
+
break
|
|
80
|
+
}
|
|
81
|
+
return icon
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
PodPerformanceIcon.propTypes = {
|
|
85
|
+
/**
|
|
86
|
+
* color of text, icon and borders
|
|
87
|
+
*/
|
|
88
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
89
|
+
/**
|
|
90
|
+
* Size
|
|
91
|
+
*/
|
|
92
|
+
size: PropTypes.oneOf(SIZES),
|
|
93
|
+
/**
|
|
94
|
+
* disabled
|
|
95
|
+
*/
|
|
96
|
+
disabled: PropTypes.bool,
|
|
97
|
+
/**
|
|
98
|
+
* inactive
|
|
99
|
+
*/
|
|
100
|
+
inactive: PropTypes.bool
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default PodPerformanceIcon
|
|
@@ -0,0 +1,109 @@
|
|
|
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 RequestsIcon = ({
|
|
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
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
|
|
22
|
+
switch (size) {
|
|
23
|
+
case SMALL:
|
|
24
|
+
icon = (
|
|
25
|
+
<svg
|
|
26
|
+
width={16}
|
|
27
|
+
height={16}
|
|
28
|
+
viewBox='0 0 16 16'
|
|
29
|
+
fill='none'
|
|
30
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
31
|
+
className={className}
|
|
32
|
+
>
|
|
33
|
+
<rect x='2' y='2' width='12' height='12' rx='1' stroke='none' />
|
|
34
|
+
<path d='M14 5.5C14.2761 5.5 14.5 5.27614 14.5 5C14.5 4.72386 14.2761 4.5 14 4.5V5.5ZM2 5.5H14V4.5H2V5.5Z' fill='none' className={filledClassName} />
|
|
35
|
+
<circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
36
|
+
<circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
37
|
+
<circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
38
|
+
<path d='M6.5 12V7M6.5 7L5 8M6.5 7L8 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
39
|
+
<path d='M9.5 7L9.5 12M9.5 12L11 11M9.5 12L8 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
40
|
+
</svg>
|
|
41
|
+
)
|
|
42
|
+
break
|
|
43
|
+
case MEDIUM:
|
|
44
|
+
icon = (
|
|
45
|
+
<svg
|
|
46
|
+
width={24}
|
|
47
|
+
height={24}
|
|
48
|
+
viewBox='0 0 24 24'
|
|
49
|
+
fill='none'
|
|
50
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
51
|
+
className={className}
|
|
52
|
+
>
|
|
53
|
+
<rect x='3' y='3' width='18' height='18' rx='1' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<path d='M21 8.25C21.4142 8.25 21.75 7.91421 21.75 7.5C21.75 7.08579 21.4142 6.75 21 6.75V8.25ZM3 8.25H21V6.75H3V8.25Z' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
57
|
+
<circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
58
|
+
<path d='M9.75 18V10.5M9.75 10.5L7.5 12M9.75 10.5L12 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<path d='M14.25 10.5L14.25 18M14.25 18L16.5 16.5M14.25 18L12 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
case LARGE:
|
|
64
|
+
icon = (
|
|
65
|
+
<svg
|
|
66
|
+
width={40}
|
|
67
|
+
height={40}
|
|
68
|
+
viewBox='0 0 40 40'
|
|
69
|
+
fill='none'
|
|
70
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
71
|
+
className={className}
|
|
72
|
+
>
|
|
73
|
+
<rect x='5' y='5' width='30' height='30' rx='1' stroke='none' strokeWidth={2} />
|
|
74
|
+
<path d='M35 13.5C35.5523 13.5 36 13.0523 36 12.5C36 11.9477 35.5523 11.5 35 11.5V13.5ZM5 13.5H35V11.5H5V13.5Z' fill='none' className={filledClassName} />
|
|
75
|
+
<circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
76
|
+
<circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
77
|
+
<circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
78
|
+
<path d='M16.25 30V17.5M16.25 17.5L12.5 20M16.25 17.5L20 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<path d='M23.75 17.5L23.75 30M23.75 30L27.5 27.5M23.75 30L20 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
</svg>
|
|
81
|
+
)
|
|
82
|
+
break
|
|
83
|
+
|
|
84
|
+
default:
|
|
85
|
+
break
|
|
86
|
+
}
|
|
87
|
+
return icon
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
RequestsIcon.propTypes = {
|
|
91
|
+
/**
|
|
92
|
+
* color of text, icon and borders
|
|
93
|
+
*/
|
|
94
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
95
|
+
/**
|
|
96
|
+
* Size
|
|
97
|
+
*/
|
|
98
|
+
size: PropTypes.oneOf(SIZES),
|
|
99
|
+
/**
|
|
100
|
+
* disabled
|
|
101
|
+
*/
|
|
102
|
+
disabled: PropTypes.bool,
|
|
103
|
+
/**
|
|
104
|
+
* inactive
|
|
105
|
+
*/
|
|
106
|
+
inactive: PropTypes.bool
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
export default RequestsIcon
|
|
@@ -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 ScalerDetailsIcon = ({
|
|
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
|
+
><path d='M10.7847 5.5V3.60769L8.00008 2L5.21548 3.60769V6.82306L6.21865 7.40224' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<circle cx='9.91667' cy='9.91667' r='2.91667' stroke='none' />
|
|
33
|
+
<path d='M14 14L12.25 12.25' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M11.2154 2L14 3.60769V6.82306L13.3039 7.22498' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M4.78467 2L2.00008 3.60769V6.82306L4.78467 8.43074' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
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
|
+
><path d='M16.1768 8.25V5.41153L11.9999 3L7.82298 5.41153V10.2346L9.32773 11.1034' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<circle cx='14.875' cy='14.875' r='4.375' stroke='none' strokeWidth={1.5} />
|
|
50
|
+
<path d='M21 21L18.375 18.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M16.8231 3L21 5.41153V10.2346L19.9558 10.8375' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M7.17676 3L2.99987 5.41153V10.2346L7.17676 12.6461' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
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
|
+
><path d='M26.9614 13.75V9.01921L19.9999 5L13.0385 9.01921V17.0576L15.5464 18.5056' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<circle cx='24.7917' cy='24.7917' r='7.29167' stroke='none' strokeWidth={2} />
|
|
67
|
+
<path d='M35 35L30.625 30.625' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<path d='M28.0385 5L35 9.01921V17.0576L33.2596 18.0624' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M11.9614 5L4.99995 9.01921V17.0576L11.9614 21.0769' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
break
|
|
76
|
+
}
|
|
77
|
+
return icon
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
ScalerDetailsIcon.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 ScalerDetailsIcon
|