@platformatic/ui-components 0.3.1 → 0.3.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-YI7s19_T.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/AppIcon.jsx +4 -13
- package/src/components/icons/BuiltInLoggingIcon.jsx +122 -0
- package/src/components/icons/MissingTemplateIcon.jsx +107 -0
- package/src/components/icons/NoMetricsIcon.jsx +107 -0
- package/src/components/icons/index.js +7 -0
- package/dist/assets/index-CEKWpFeX.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-YI7s19_T.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-BJ-rQoWR.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -24,11 +24,7 @@ const AppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
24
24
|
xmlns='http://www.w3.org/2000/svg'
|
|
25
25
|
className={className}
|
|
26
26
|
>
|
|
27
|
-
<path d='
|
|
28
|
-
<rect x={6} y={10.64} width={4} height={1.92} stroke='none' />
|
|
29
|
-
<path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
|
|
30
|
-
<path d='M8 2L8.89806 4.65337H11.8042L9.45308 6.29325L10.3511 8.94662L8 7.30675L5.64886 8.94662L6.54692 6.29325L4.19577 4.65337H7.10194L8 2Z' stroke='none' strokeLinejoin='round' />
|
|
31
|
-
|
|
27
|
+
<path d='M8 2L13.1962 5V11L8 14L2.80385 11V5L8 2Z' stroke='none' strokeLinejoin='round' />
|
|
32
28
|
</svg>
|
|
33
29
|
)
|
|
34
30
|
break
|
|
@@ -42,10 +38,8 @@ const AppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
42
38
|
xmlns='http://www.w3.org/2000/svg'
|
|
43
39
|
className={className}
|
|
44
40
|
>
|
|
45
|
-
<path d='
|
|
46
|
-
|
|
47
|
-
<path d='M6 19.84C6 19.2877 6.44772 18.84 7 18.84H17C17.5523 18.84 18 19.2877 18 19.84V21H6V19.84Z' stroke='none' strokeWidth={1.5} />
|
|
48
|
-
<path d='M12 3L13.3471 6.98006H17.7063L14.1796 9.43988L15.5267 13.4199L12 10.9601L8.47329 13.4199L9.82037 9.43988L6.29366 6.98006H10.6529L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
41
|
+
<path d='M12 3L19.7942 7.5V16.5L12 21L4.20577 16.5V7.5L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
42
|
+
|
|
49
43
|
</svg>
|
|
50
44
|
)
|
|
51
45
|
break
|
|
@@ -59,10 +53,7 @@ const AppIcon = ({ color, size, disabled, inactive }) => {
|
|
|
59
53
|
xmlns='http://www.w3.org/2000/svg'
|
|
60
54
|
className={className}
|
|
61
55
|
>
|
|
62
|
-
<path d='
|
|
63
|
-
<rect x={15} y={26.6} width={10} height={4.8} stroke='none' strokeWidth={2} />
|
|
64
|
-
<path d='M10 32.4C10 31.8477 10.4477 31.4 11 31.4H29C29.5523 31.4 30 31.8477 30 32.4V35H10V32.4Z' stroke='none' strokeWidth={2} />
|
|
65
|
-
<path d='M20 5L22.2451 11.6334H29.5106L23.6327 15.7331L25.8779 22.3666L20 18.2669L14.1221 22.3666L16.3673 15.7331L10.4894 11.6334H17.7549L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
56
|
+
<path d='M20 5L32.9904 12.5V27.5L20 35L7.00962 27.5V12.5L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
66
57
|
</svg>
|
|
67
58
|
)
|
|
68
59
|
break
|
|
@@ -0,0 +1,122 @@
|
|
|
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 BuiltInLoggingIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<rect x='7' y='2' width='7' height='7' rx='1' stroke='none' />
|
|
29
|
+
<path d='M7 3.75H14' stroke='none' />
|
|
30
|
+
<circle cx='7.87516' cy='2.87492' r='0.291667' fill='none' className={filledClassName} />
|
|
31
|
+
<circle cx='8.75016' cy='2.87492' r='0.291667' fill='none' className={filledClassName} />
|
|
32
|
+
<circle cx='9.62516' cy='2.87492' r='0.291667' fill='none' className={filledClassName} />
|
|
33
|
+
<path d='M8.1665 4.91675H11.0832' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<path d='M8.75 6.08325H12.8333' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M8.75 7.25H12.8333' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M5.5 6H3C2.44772 6 2 6.44772 2 7V10.3333C2 10.8856 2.44772 11.3333 3 11.3333H9.16667C9.6269 11.3333 10 10.9602 10 10.5V10.5' stroke='none' strokeLinecap='round' />
|
|
37
|
+
<rect x='4.6665' y='11.3333' width='2.66667' height='1.33333' stroke='none' />
|
|
38
|
+
<path d='M3.3335 13.6667C3.3335 13.1145 3.78121 12.6667 4.3335 12.6667H7.66683C8.21911 12.6667 8.66683 13.1145 8.66683 13.6667V14.0001H3.3335V13.6667Z' stroke='none' />
|
|
39
|
+
</svg>
|
|
40
|
+
)
|
|
41
|
+
break
|
|
42
|
+
case MEDIUM:
|
|
43
|
+
icon = (
|
|
44
|
+
<svg
|
|
45
|
+
width={24}
|
|
46
|
+
height={24}
|
|
47
|
+
viewBox='0 0 24 24'
|
|
48
|
+
fill='none'
|
|
49
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
50
|
+
className={className}
|
|
51
|
+
>
|
|
52
|
+
<rect x='10.5' y='3' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
|
|
53
|
+
<path d='M10.5 5.625H21' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='11.8125' cy='4.3125' r='0.4375' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='13.125' cy='4.3125' r='0.4375' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='14.4375' cy='4.3125' r='0.4375' fill='none' className={filledClassName} />
|
|
57
|
+
<path d='M12.25 7.375H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<path d='M13.125 9.125H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
|
+
<path d='M13.125 10.875H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M8.25 9H4C3.44772 9 3 9.44772 3 10V16C3 16.5523 3.44772 17 4 17H14C14.5523 17 15 16.5523 15 16V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
<rect x='7' y='17' width='4' height='2' stroke='none' strokeWidth={1.5} />
|
|
62
|
+
<path d='M5 20C5 19.4477 5.44772 19 6 19H12C12.5523 19 13 19.4477 13 20V21H5V20Z' stroke='none' strokeWidth={1.5} />
|
|
63
|
+
</svg>
|
|
64
|
+
)
|
|
65
|
+
break
|
|
66
|
+
case LARGE:
|
|
67
|
+
icon = (
|
|
68
|
+
<svg
|
|
69
|
+
width={40}
|
|
70
|
+
height={40}
|
|
71
|
+
viewBox='0 0 40 40'
|
|
72
|
+
fill='none'
|
|
73
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
74
|
+
className={className}
|
|
75
|
+
>
|
|
76
|
+
<rect x='17.5' y='5' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
|
|
77
|
+
<path d='M17.5 9.375H35' stroke='none' strokeWidth={2} />
|
|
78
|
+
<circle cx='19.6877' cy='7.18742' r='0.729167' fill='none' className={filledClassName} />
|
|
79
|
+
<circle cx='21.8752' cy='7.18742' r='0.729167' fill='none' className={filledClassName} />
|
|
80
|
+
<circle cx='24.0627' cy='7.18742' r='0.729167' fill='none' className={filledClassName} />
|
|
81
|
+
<path d='M20.4165 12.2917H27.7082' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
82
|
+
<path d='M21.875 15.2083H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
83
|
+
<path d='M21.875 18.125H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
84
|
+
<path d='M13.75 15H6C5.44772 15 5 15.4477 5 16V27.3333C5 27.8856 5.44772 28.3333 6 28.3333H24C24.5523 28.3333 25 27.8856 25 27.3333V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<rect x='11.6665' y='28.3333' width='6.66667' height='3.33333' stroke='none' strokeWidth={2} />
|
|
86
|
+
<path d='M8.3335 32.6667C8.3335 32.1145 8.78121 31.6667 9.3335 31.6667H20.6668C21.2191 31.6667 21.6668 32.1145 21.6668 32.6667V35.0001H8.3335V32.6667Z' stroke='none' strokeWidth={2} />
|
|
87
|
+
</svg>
|
|
88
|
+
)
|
|
89
|
+
break
|
|
90
|
+
|
|
91
|
+
default:
|
|
92
|
+
break
|
|
93
|
+
}
|
|
94
|
+
return icon
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
BuiltInLoggingIcon.propTypes = {
|
|
98
|
+
/**
|
|
99
|
+
* color of text, icon and borders
|
|
100
|
+
*/
|
|
101
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
102
|
+
/**
|
|
103
|
+
* Size
|
|
104
|
+
*/
|
|
105
|
+
size: PropTypes.oneOf(SIZES),
|
|
106
|
+
/**
|
|
107
|
+
* disabled
|
|
108
|
+
*/
|
|
109
|
+
disabled: PropTypes.bool,
|
|
110
|
+
/**
|
|
111
|
+
* inactive
|
|
112
|
+
*/
|
|
113
|
+
inactive: PropTypes.bool
|
|
114
|
+
}
|
|
115
|
+
BuiltInLoggingIcon.defaultProps = {
|
|
116
|
+
color: MAIN_DARK_BLUE,
|
|
117
|
+
size: MEDIUM,
|
|
118
|
+
disabled: false,
|
|
119
|
+
inactive: false
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export default BuiltInLoggingIcon
|
|
@@ -0,0 +1,107 @@
|
|
|
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 MissingTemplateIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path d='M9 4V3C9 2.44772 8.55228 2 8 2L3 2C2.44772 2 2 2.44772 2 3L2 8C2 8.55228 2.44772 9 3 9H4.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<rect x='3.16699' y='3.16675' width='4.66667' height='1.16667' stroke='none' strokeLinejoin='round' />
|
|
30
|
+
<path d='M3.16699 5.5H4.91699V7.83325H3.16699L3.16699 5.5Z' stroke='none' strokeLinejoin='round' />
|
|
31
|
+
<path d='M8 5.5H6.25V7.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<circle cx='10.5' cy='9.5' r='4.5' stroke='none' />
|
|
33
|
+
<path d='M10.1714 10.4776C10.0521 10.4776 9.95546 10.381 9.95546 10.2617C9.95694 9.98421 9.97996 9.89803 10.0245 9.73311C10.0705 9.56819 10.1373 9.43498 10.2249 9.33349C10.3125 9.232 10.418 9.14003 10.5412 9.05756C10.6333 8.99413 10.7157 8.92832 10.7884 8.86013C10.8612 8.79194 10.9191 8.71662 10.9621 8.63416C11.0052 8.55011 11.0267 8.45655 11.0267 8.35347C11.0267 8.24405 11.0022 8.14811 10.9532 8.06565C10.9042 7.98319 10.8382 7.91976 10.755 7.87536C10.6733 7.83095 10.5828 7.80875 10.4833 7.80875C10.3868 7.80875 10.2955 7.83175 10.2094 7.87774C10.1232 7.92214 10.0527 7.98874 9.99777 8.07755C9.89617 8.23886 9.75751 8.40343 9.56686 8.40343H9.46744C9.21107 8.40343 8.99446 8.18808 9.06672 7.94211C9.10194 7.82222 9.15097 7.71434 9.21381 7.61846C9.34892 7.41072 9.52784 7.25611 9.75056 7.15461C9.97327 7.05154 10.219 7 10.4878 7C10.7832 7 11.0445 7.05233 11.2717 7.15699C11.4989 7.26007 11.6771 7.40993 11.8062 7.60657C11.9354 7.8032 12 8.04028 12 8.31779C12 8.50333 11.971 8.66825 11.9131 8.81256C11.8567 8.95528 11.7773 9.08214 11.6748 9.19315C11.5724 9.30257 11.4514 9.40168 11.3118 9.49049C11.1945 9.56502 11.098 9.64272 11.0223 9.7236C10.948 9.80447 10.8924 9.89803 10.8552 10.0043C10.8196 10.1105 10.801 10.1063 10.7996 10.2617C10.7996 10.381 10.7029 10.4776 10.5836 10.4776H10.1714ZM10.3964 12C10.248 12 10.121 11.9445 10.0156 11.8335C9.91166 11.7209 9.86043 11.5861 9.86192 11.4291C9.86043 11.2737 9.91166 11.1405 10.0156 11.0295C10.121 10.9185 10.248 10.863 10.3964 10.863C10.5375 10.863 10.6615 10.9185 10.7684 11.0295C10.8753 11.1405 10.9295 11.2737 10.931 11.4291C10.9295 11.5338 10.9035 11.6297 10.853 11.7169C10.804 11.8026 10.7394 11.8716 10.6592 11.9239C10.5791 11.9746 10.4915 12 10.3964 12Z' fill='none' className={filledClassName} />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M13.5 6V4C13.5 3.44772 13.0523 3 12.5 3L4 3C3.44772 3 3 3.44772 3 4L3 12.5C3 13.0523 3.44772 13.5 4 13.5H6.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<rect x='4.75049' y='4.75012' width='7' height='1.75' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M4.75049 8.25H7.37549V11.7499H4.75049V8.25Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
50
|
+
<path d='M12 8.25H9.375V11.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<circle cx='15.75' cy='14.25' r='6.75' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<path d='M15.2571 15.7165C15.0782 15.7165 14.9332 15.5715 14.9332 15.3926C14.9354 14.9763 14.9699 14.8471 15.0367 14.5997C15.1058 14.3523 15.206 14.1525 15.3374 14.0002C15.4688 13.848 15.6269 13.71 15.8118 13.5863C15.9499 13.4912 16.0735 13.3925 16.1826 13.2902C16.2918 13.1879 16.3786 13.0749 16.4432 12.9512C16.5078 12.8252 16.5401 12.6848 16.5401 12.5302C16.5401 12.3661 16.5033 12.2222 16.4298 12.0985C16.3563 11.9748 16.2572 11.8796 16.1325 11.813C16.01 11.7464 15.8742 11.7131 15.7249 11.7131C15.5802 11.7131 15.4432 11.7476 15.314 11.8166C15.1849 11.8832 15.0791 11.9831 14.9967 12.1163C14.8442 12.3583 14.6363 12.6051 14.3503 12.6051H14.2012C13.8166 12.6051 13.4917 12.2821 13.6001 11.9132C13.6529 11.7333 13.7265 11.5715 13.8207 11.4277C14.0234 11.1161 14.2918 10.8842 14.6258 10.7319C14.9599 10.5773 15.3285 10.5 15.7316 10.5C16.1748 10.5 16.5668 10.5785 16.9076 10.7355C17.2483 10.8901 17.5156 11.1149 17.7094 11.4098C17.9031 11.7048 18 12.0604 18 12.4767C18 12.755 17.9566 13.0024 17.8697 13.2188C17.7851 13.4329 17.6659 13.6232 17.5122 13.7897C17.3586 13.9539 17.1771 14.1025 16.9677 14.2357C16.7918 14.3475 16.647 14.4641 16.5334 14.5854C16.422 14.7067 16.3385 14.8471 16.2829 15.0064C16.2294 15.1658 16.2016 15.1595 16.1993 15.3926C16.1993 15.5715 16.0543 15.7165 15.8754 15.7165H15.2571ZM15.5947 18C15.3719 18 15.1815 17.9167 15.0234 17.7502C14.8675 17.5814 14.7906 17.3792 14.7929 17.1437C14.7906 16.9106 14.8675 16.7108 15.0234 16.5442C15.1815 16.3777 15.3719 16.2945 15.5947 16.2945C15.8062 16.2945 15.9922 16.3777 16.1526 16.5442C16.3129 16.7108 16.3942 16.9106 16.3964 17.1437C16.3942 17.3007 16.3552 17.4446 16.2795 17.5754C16.206 17.7039 16.1091 17.8073 15.9889 17.8858C15.8686 17.9619 15.7372 18 15.5947 18Z' fill='none' className={filledClassName} />
|
|
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
|
+
<path d='M22.5 10.5V6C22.5 5.44772 22.0523 5 21.5 5L6 5C5.44772 5 5 5.44772 5 6L5 21.5C5 22.0523 5.44772 22.5 6 22.5H12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<rect x='7.91748' y='7.91687' width='11.6667' height='2.91667' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
68
|
+
<path d='M7.91748 13.75H12.2925V19.5831H7.91748L7.91748 13.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
69
|
+
<path d='M21 13.75H15.625V19.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<circle cx='26.25' cy='23.75' r='11.25' stroke='none' strokeWidth={2} />
|
|
71
|
+
<path d='M25.4284 26.1941C25.1303 26.1941 24.8886 25.9524 24.8886 25.6543C24.8924 24.9605 24.9499 24.7451 25.0612 24.3328C25.1763 23.9205 25.3434 23.5875 25.5624 23.3337C25.7814 23.08 26.0449 22.8501 26.353 22.6439C26.5831 22.4853 26.7892 22.3208 26.971 22.1503C27.1529 21.9799 27.2977 21.7915 27.4053 21.5854C27.513 21.3753 27.5668 21.1414 27.5668 20.8837C27.5668 20.6101 27.5056 20.3703 27.3831 20.1641C27.2606 19.958 27.0954 19.7994 26.8875 19.6884C26.6834 19.5774 26.4569 19.5219 26.2082 19.5219C25.967 19.5219 25.7387 19.5794 25.5234 19.6943C25.3081 19.8053 25.1318 19.9719 24.9944 20.1939C24.7404 20.5971 24.3938 21.0086 23.9172 21.0086H23.6686C23.0277 21.0086 22.4861 20.4702 22.6668 19.8553C22.7548 19.5556 22.8774 19.2858 23.0345 19.0461C23.3723 18.5268 23.8196 18.1403 24.3764 17.8865C24.9332 17.6288 25.5475 17.5 26.2194 17.5C26.9581 17.5 27.6114 17.6308 28.1793 17.8925C28.7472 18.1502 29.1926 18.5248 29.5156 19.0164C29.8385 19.508 30 20.1007 30 20.7945C30 21.2583 29.9276 21.6706 29.7829 22.0314C29.6418 22.3882 29.4432 22.7054 29.1871 22.9829C28.931 23.2564 28.6284 23.5042 28.2795 23.7262C27.9863 23.9125 27.745 24.1068 27.5557 24.309C27.3701 24.5112 27.2309 24.7451 27.1381 25.0107C27.049 25.2763 27.0026 25.2658 26.9989 25.6543C26.9989 25.9524 26.7572 26.1941 26.4591 26.1941H25.4284ZM25.9911 30C25.6199 30 25.3025 29.8612 25.039 29.5837C24.7791 29.3023 24.6511 28.9653 24.6548 28.5728C24.6511 28.1843 24.7791 27.8513 25.039 27.5737C25.3025 27.2962 25.6199 27.1575 25.9911 27.1575C26.3437 27.1575 26.6537 27.2962 26.9209 27.5737C27.1882 27.8513 27.3237 28.1843 27.3274 28.5728C27.3237 28.8344 27.2587 29.0743 27.1325 29.2923C27.01 29.5064 26.8486 29.6789 26.6481 29.8097C26.4477 29.9366 26.2287 30 25.9911 30Z' fill='none' className={filledClassName} />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
MissingTemplateIcon.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
|
+
MissingTemplateIcon.defaultProps = {
|
|
101
|
+
color: MAIN_DARK_BLUE,
|
|
102
|
+
size: MEDIUM,
|
|
103
|
+
disabled: false,
|
|
104
|
+
inactive: false
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export default MissingTemplateIcon
|
|
@@ -0,0 +1,107 @@
|
|
|
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 NoMetricsIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path d='M4 8V11.5C4 11.7761 4.22386 12 4.5 12H5.5C5.77614 12 6 11.7761 6 11.5V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path d='M8 11V11.5C8 11.7761 8.22386 12 8.5 12H9.5C9.77614 12 10 11.7761 10 11.5V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path d='M14 8V11.5C14 11.7761 13.7761 12 13.5 12H12.5C12.2239 12 12 11.7761 12 11.5V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<path d='M2 2V14H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<circle cx='9' cy='6' r='4' stroke='none' />
|
|
33
|
+
<path d='M8.53633 6.97764C8.49167 6.97764 8.45546 6.94143 8.45546 6.89677C8.45694 6.61925 8.47996 6.39803 8.5245 6.23311C8.57053 6.06819 8.63734 5.93498 8.72494 5.83349C8.81255 5.732 8.91797 5.64003 9.0412 5.55756C9.13326 5.49413 9.21566 5.42832 9.28842 5.36013C9.36117 5.29194 9.41908 5.21662 9.46214 5.13416C9.5052 5.05011 9.52673 4.95655 9.52673 4.85347C9.52673 4.74405 9.50223 4.64811 9.45323 4.56565C9.40423 4.48319 9.33816 4.41976 9.25501 4.37536C9.17335 4.33095 9.08278 4.30875 8.9833 4.30875C8.88679 4.30875 8.79547 4.33175 8.70935 4.37774C8.62324 4.42214 8.55271 4.48874 8.49777 4.57755C8.39617 4.73886 8.25751 4.90343 8.06686 4.90343H7.96744C7.71107 4.90343 7.49446 4.68808 7.56672 4.44211C7.60194 4.32222 7.65097 4.21434 7.71381 4.11846C7.84892 3.91072 8.02784 3.75611 8.25056 3.65461C8.47327 3.55154 8.71901 3.5 8.98775 3.5C9.28322 3.5 9.54454 3.55233 9.77171 3.65699C9.99889 3.76007 10.1771 3.90993 10.3062 4.10657C10.4354 4.3032 10.5 4.54028 10.5 4.81779C10.5 5.00333 10.471 5.16825 10.4131 5.31256C10.3567 5.45528 10.2773 5.58214 10.1748 5.69315C10.0724 5.80257 9.95137 5.90168 9.8118 5.99049C9.69451 6.06502 9.598 6.14272 9.52227 6.2236C9.44803 6.30447 9.39235 6.39803 9.35523 6.50428C9.3196 6.61053 9.30104 6.74136 9.29955 6.89677C9.29955 6.94143 9.26335 6.97764 9.21868 6.97764H8.53633ZM8.89644 8.5C8.74796 8.5 8.62101 8.4445 8.51559 8.33349C8.41166 8.2209 8.36043 8.08611 8.36192 7.92912C8.36043 7.77371 8.41166 7.6405 8.51559 7.5295C8.62101 7.41849 8.74796 7.36299 8.89644 7.36299C9.03749 7.36299 9.16147 7.41849 9.26837 7.5295C9.37528 7.6405 9.42947 7.77371 9.43096 7.92912C9.42947 8.03378 9.40349 8.12972 9.35301 8.21694C9.30401 8.30257 9.23942 8.37155 9.15924 8.42388C9.07906 8.47463 8.99146 8.5 8.89644 8.5Z' fill='none' className={filledClassName} />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M6 12V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M12 16.5V17.5C12 17.7761 12.2239 18 12.5 18H14.5C14.7761 18 15 17.7761 15 17.5V16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M21 12V17.5C21 17.7761 20.7761 18 20.5 18H18.5C18.2239 18 18 17.7761 18 17.5V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M3 3V21H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<circle cx='13.5' cy='9' r='6' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<path d='M12.8045 10.4665C12.7375 10.4665 12.6832 10.4121 12.6832 10.3451C12.6854 9.92888 12.7199 9.59705 12.7867 9.34967C12.8558 9.10228 12.956 8.90247 13.0874 8.75024C13.2188 8.598 13.3769 8.46004 13.5618 8.33635C13.6999 8.2412 13.8235 8.14248 13.9326 8.0402C14.0418 7.93792 14.1286 7.82493 14.1932 7.70124C14.2578 7.57517 14.2901 7.43482 14.2901 7.28021C14.2901 7.11608 14.2533 6.97217 14.1798 6.84848C14.1063 6.72479 14.0072 6.62964 13.8825 6.56304C13.76 6.49643 13.6242 6.46313 13.4749 6.46313C13.3302 6.46313 13.1932 6.49762 13.064 6.5666C12.9349 6.63321 12.8291 6.73311 12.7467 6.86632C12.5942 7.10829 12.3863 7.35514 12.1003 7.35514H11.9512C11.5666 7.35514 11.2417 7.03213 11.3501 6.66316C11.4029 6.48333 11.4765 6.32151 11.5707 6.17769C11.7734 5.86608 12.0418 5.63416 12.3758 5.48192C12.7099 5.32731 13.0785 5.25 13.4816 5.25C13.9248 5.25 14.3168 5.3285 14.6576 5.48549C14.9983 5.6401 15.2656 5.86489 15.4594 6.15985C15.6531 6.45481 15.75 6.81042 15.75 7.22669C15.75 7.505 15.7066 7.75238 15.6197 7.96884C15.5351 8.18292 15.4159 8.37322 15.2622 8.53972C15.1086 8.70385 14.9271 8.85252 14.7177 8.98573C14.5418 9.09753 14.397 9.21408 14.2834 9.33539C14.172 9.45671 14.0885 9.59705 14.0329 9.75642C13.9794 9.91579 13.9516 10.112 13.9493 10.3451C13.9493 10.4121 13.895 10.4665 13.828 10.4665H12.8045ZM13.3447 12.75C13.1219 12.75 12.9315 12.6667 12.7734 12.5002C12.6175 12.3314 12.5406 12.1292 12.5429 11.8937C12.5406 11.6606 12.6175 11.4608 12.7734 11.2942C12.9315 11.1277 13.1219 11.0445 13.3447 11.0445C13.5562 11.0445 13.7422 11.1277 13.9026 11.2942C14.0629 11.4608 14.1442 11.6606 14.1464 11.8937C14.1442 12.0507 14.1052 12.1946 14.0295 12.3254C13.956 12.4539 13.8591 12.5573 13.7389 12.6358C13.6186 12.7119 13.4872 12.75 13.3447 12.75Z' fill='none' className={filledClassName} />
|
|
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
|
+
<path d='M10 20V29.5C10 29.7761 10.2239 30 10.5 30H14.5C14.7761 30 15 29.7761 15 29.5V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<path d='M20 27.5V29.5C20 29.7761 20.2239 30 20.5 30H24.5C24.7761 30 25 29.7761 25 29.5V27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<path d='M35 20V29.5C35 29.7761 34.7761 30 34.5 30H30.5C30.2239 30 30 29.7761 30 29.5V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M5 5V35H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<circle cx='22.5' cy='15' r='10' stroke='none' strokeWidth={2} />
|
|
71
|
+
<path d='M21.3408 17.4441C21.2292 17.4441 21.1386 17.3536 21.1386 17.2419C21.1424 16.5481 21.1999 15.9951 21.3112 15.5828C21.4263 15.1705 21.5934 14.8375 21.8124 14.5837C22.0314 14.33 22.2949 14.1001 22.603 13.8939C22.8331 13.7353 23.0392 13.5708 23.221 13.4003C23.4029 13.2299 23.5477 13.0415 23.6553 12.8354C23.763 12.6253 23.8168 12.3914 23.8168 12.1337C23.8168 11.8601 23.7556 11.6203 23.6331 11.4141C23.5106 11.208 23.3454 11.0494 23.1375 10.9384C22.9334 10.8274 22.7069 10.7719 22.4582 10.7719C22.217 10.7719 21.9887 10.8294 21.7734 10.9443C21.5581 11.0553 21.3818 11.2219 21.2444 11.4439C20.9904 11.8471 20.6438 12.2586 20.1672 12.2586H19.7737C19.2122 12.2586 18.7422 11.7897 18.8788 11.2451C18.9681 10.8889 19.1034 10.5725 19.2845 10.2961C19.6223 9.7768 20.0696 9.39026 20.6264 9.13654C21.1832 8.87885 21.7975 8.75 22.4694 8.75C23.2081 8.75 23.8614 8.88083 24.4293 9.14248C24.9972 9.40017 25.4426 9.77482 25.7656 10.2664C26.0885 10.758 26.25 11.3507 26.25 12.0445C26.25 12.5083 26.1776 12.9206 26.0329 13.2814C25.8918 13.6382 25.6932 13.9554 25.4371 14.2329C25.181 14.5064 24.8784 14.7542 24.5295 14.9762C24.2363 15.1625 23.995 15.3568 23.8057 15.559C23.6201 15.7612 23.4809 15.9951 23.3881 16.2607C23.299 16.5263 23.2526 16.8534 23.2489 17.2419C23.2489 17.3536 23.1584 17.4441 23.0467 17.4441H21.3408ZM22.2411 21.25C21.8699 21.25 21.5525 21.1112 21.289 20.8337C21.0291 20.5523 20.9011 20.2153 20.9048 19.8228C20.9011 19.4343 21.0291 19.1013 21.289 18.8237C21.5525 18.5462 21.8699 18.4075 22.2411 18.4075C22.5937 18.4075 22.9037 18.5462 23.1709 18.8237C23.4382 19.1013 23.5737 19.4343 23.5774 19.8228C23.5737 20.0844 23.5087 20.3243 23.3825 20.5423C23.26 20.7564 23.0986 20.9289 22.8981 21.0597C22.6977 21.1866 22.4787 21.25 22.2411 21.25Z' fill='none' className={filledClassName} />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
NoMetricsIcon.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
|
+
NoMetricsIcon.defaultProps = {
|
|
101
|
+
color: MAIN_DARK_BLUE,
|
|
102
|
+
size: MEDIUM,
|
|
103
|
+
disabled: false,
|
|
104
|
+
inactive: false
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export default NoMetricsIcon
|
|
@@ -26,6 +26,7 @@ import ArrowRightIcon from './ArrowRightIcon'
|
|
|
26
26
|
import ArrowUpIcon from './ArrowUpIcon'
|
|
27
27
|
import BellIcon from './BellIcon'
|
|
28
28
|
import BillingIcon from './BillingIcon'
|
|
29
|
+
import BuiltInLoggingIcon from './BuiltInLoggingIcon'
|
|
29
30
|
import CalendarIcon from './CalendarIcon'
|
|
30
31
|
import Calendar1DayIcon from './Calendar1DayIcon'
|
|
31
32
|
import Calendar7DaysIcon from './Calendar7DaysIcon'
|
|
@@ -91,7 +92,10 @@ import LogOutIcon from './LogOutIcon'
|
|
|
91
92
|
import LogsRiskIcon from './LogsRiskIcon'
|
|
92
93
|
import MetricsIcon from './MetricsIcon'
|
|
93
94
|
import MetricsLoadingIcon from './MetricsLoadingIcon'
|
|
95
|
+
import MissingTemplateIcon from './MissingTemplateIcon'
|
|
96
|
+
|
|
94
97
|
import NameAppIcon from './NameAppIcon'
|
|
98
|
+
import NoMetricsIcon from './NoMetricsIcon'
|
|
95
99
|
import OrganizationIcon from './OrganizationIcon'
|
|
96
100
|
import OutOfBoxGraphQLIcon from './OutOfBoxGraphQLIcon'
|
|
97
101
|
import PlatformaticComposerIcon from './PlatformaticComposerIcon'
|
|
@@ -172,6 +176,7 @@ export default {
|
|
|
172
176
|
ArrowUpIcon,
|
|
173
177
|
BellIcon,
|
|
174
178
|
BillingIcon,
|
|
179
|
+
BuiltInLoggingIcon,
|
|
175
180
|
CalendarIcon,
|
|
176
181
|
Calendar1DayIcon,
|
|
177
182
|
Calendar7DaysIcon,
|
|
@@ -237,7 +242,9 @@ export default {
|
|
|
237
242
|
LogsRiskIcon,
|
|
238
243
|
MetricsIcon,
|
|
239
244
|
MetricsLoadingIcon,
|
|
245
|
+
MissingTemplateIcon,
|
|
240
246
|
NameAppIcon,
|
|
247
|
+
NoMetricsIcon,
|
|
241
248
|
OrganizationIcon,
|
|
242
249
|
OutOfBoxGraphQLIcon,
|
|
243
250
|
PlatformaticComposerIcon,
|