@platformatic/ui-components 0.7.1 → 0.7.3
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-D5dGmVAb.js} +10 -10
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/ModalDirectional.jsx +8 -3
- package/src/components/forms/InputFileUpload.jsx +35 -15
- package/src/components/forms/InputFileUpload.module.css +5 -4
- 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/ScalerDetailsIcon.jsx +99 -0
- package/src/components/icons/ScalerHistoryIcon.jsx +102 -0
- package/src/components/icons/index.js +10 -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-D5dGmVAb.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-BUMVjZ-U.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -18,7 +18,8 @@ function ModalDirectional ({
|
|
|
18
18
|
titleClassName = '',
|
|
19
19
|
smallLayout = false,
|
|
20
20
|
classNameModalLefty = '',
|
|
21
|
-
permanent = false
|
|
21
|
+
permanent = false,
|
|
22
|
+
blurClassName = ''
|
|
22
23
|
}) {
|
|
23
24
|
const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
|
|
24
25
|
const [modalClassName] = useState(className)
|
|
@@ -40,7 +41,7 @@ function ModalDirectional ({
|
|
|
40
41
|
|
|
41
42
|
return (
|
|
42
43
|
<>
|
|
43
|
-
<div className={styles.blur} onClick={() => permanent ? {} : closeModal()} />
|
|
44
|
+
<div className={blurClassName || styles.blur} onClick={() => permanent ? {} : closeModal()} />
|
|
44
45
|
<div className={variantModalClassName}>
|
|
45
46
|
<div className={classNameLefty}>
|
|
46
47
|
<div className={styles.headerClassName}>
|
|
@@ -94,7 +95,11 @@ ModalDirectional.propTypes = {
|
|
|
94
95
|
/**
|
|
95
96
|
* permanent: modal could be closed only with Esc, X or Cancel
|
|
96
97
|
*/
|
|
97
|
-
permanent: PropTypes.bool
|
|
98
|
+
permanent: PropTypes.bool,
|
|
99
|
+
/**
|
|
100
|
+
* blurClassName: override
|
|
101
|
+
*/
|
|
102
|
+
blurClassName: PropTypes.string
|
|
98
103
|
}
|
|
99
104
|
|
|
100
105
|
export default ModalDirectional
|
|
@@ -8,6 +8,7 @@ import Button from '../Button'
|
|
|
8
8
|
import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
|
|
9
9
|
|
|
10
10
|
function InputFileUpload ({
|
|
11
|
+
idInputFile = 'fileUpload',
|
|
11
12
|
placeholder = '',
|
|
12
13
|
borderColor = MAIN_GREEN,
|
|
13
14
|
errorMessage = '',
|
|
@@ -18,12 +19,14 @@ function InputFileUpload ({
|
|
|
18
19
|
afterIcon = null,
|
|
19
20
|
backgroundColor = WHITE,
|
|
20
21
|
inputTextClassName = '',
|
|
22
|
+
detailTextClassName = '',
|
|
21
23
|
verticalPaddingClassName = '',
|
|
22
24
|
dataAttrName = '',
|
|
23
25
|
dataAttrValue = '',
|
|
24
26
|
readOnly = false,
|
|
25
27
|
removeFileButton = {},
|
|
26
|
-
onClickDetail = () => {}
|
|
28
|
+
onClickDetail = () => {},
|
|
29
|
+
acceptFiles = '*'
|
|
27
30
|
}) {
|
|
28
31
|
let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
|
|
29
32
|
baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
|
|
@@ -68,26 +71,31 @@ function InputFileUpload ({
|
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
function clearFile () {
|
|
74
|
+
document.getElementById(idInputFile).value = ''
|
|
71
75
|
setFile(null)
|
|
72
76
|
onFileSelect(null)
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
return (
|
|
76
80
|
<div className={styles.container} {...dataProps}>
|
|
77
|
-
<div className={styles.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
<div className={styles.content}>
|
|
82
|
+
<div className={styles.inputContainer}>
|
|
83
|
+
{beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
|
|
84
|
+
<input
|
|
85
|
+
id={idInputFile}
|
|
86
|
+
type='file'
|
|
87
|
+
className={focus ? focusedClassName() : normalClassName()}
|
|
88
|
+
onChange={handleFileInput}
|
|
89
|
+
disabled={disabled}
|
|
90
|
+
placeholder={inputPlaceholder}
|
|
91
|
+
readOnly={readOnly}
|
|
92
|
+
aria-readonly={readOnly}
|
|
93
|
+
onFocus={() => handleFocus()}
|
|
94
|
+
onBlur={() => handleBlur()}
|
|
95
|
+
accept={acceptFiles}
|
|
96
|
+
/>
|
|
97
|
+
{file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
|
|
98
|
+
</div>
|
|
91
99
|
{file !== null && (
|
|
92
100
|
<Button
|
|
93
101
|
textClass={removeFileButton?.textClass ?? ''}
|
|
@@ -105,6 +113,10 @@ function InputFileUpload ({
|
|
|
105
113
|
}
|
|
106
114
|
|
|
107
115
|
InputFileUpload.propTypes = {
|
|
116
|
+
/**
|
|
117
|
+
* idInputFile
|
|
118
|
+
*/
|
|
119
|
+
idInputFile: PropTypes.string,
|
|
108
120
|
/**
|
|
109
121
|
* placeholder
|
|
110
122
|
*/
|
|
@@ -149,6 +161,14 @@ InputFileUpload.propTypes = {
|
|
|
149
161
|
* inputTextClassName
|
|
150
162
|
*/
|
|
151
163
|
inputTextClassName: PropTypes.string,
|
|
164
|
+
/**
|
|
165
|
+
* detailTextClassName
|
|
166
|
+
*/
|
|
167
|
+
detailTextClassName: PropTypes.string,
|
|
168
|
+
/**
|
|
169
|
+
* accept
|
|
170
|
+
*/
|
|
171
|
+
accept: PropTypes.string,
|
|
152
172
|
/**
|
|
153
173
|
* verticalPaddingClassName
|
|
154
174
|
*/
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
.container {
|
|
2
2
|
@apply flex flex-col w-full relative;
|
|
3
3
|
}
|
|
4
|
+
.content,
|
|
4
5
|
.inputContainer {
|
|
5
|
-
@apply flex
|
|
6
|
+
@apply flex w-full relative z-20 gap-x-2 items-center;
|
|
6
7
|
}
|
|
7
8
|
.input {
|
|
8
9
|
padding-block: 0px;
|
|
@@ -12,7 +13,7 @@
|
|
|
12
13
|
.inputDefaultVerticalPadding {
|
|
13
14
|
@apply py-2.5;
|
|
14
15
|
}
|
|
15
|
-
.
|
|
16
|
+
.afterInputDetail,
|
|
16
17
|
.beforeInputIcon {
|
|
17
18
|
@apply absolute top-[50%] z-20;
|
|
18
19
|
transform: translateY(-50%);
|
|
@@ -20,8 +21,8 @@
|
|
|
20
21
|
.beforeInputIcon {
|
|
21
22
|
@apply left-0 ml-2
|
|
22
23
|
}
|
|
23
|
-
.
|
|
24
|
-
@apply right-0 mr-2
|
|
24
|
+
.afterInputDetail {
|
|
25
|
+
@apply right-0 mr-2 cursor-pointer
|
|
25
26
|
}
|
|
26
27
|
.beforeIconPadding {
|
|
27
28
|
@apply pl-8
|
|
@@ -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,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
|