@platformatic/ui-components 0.7.7 → 0.7.8
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-CVJlkMNG.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/AddRouteIcon.jsx +100 -0
- package/src/components/icons/IngressControllIcon.jsx +108 -0
- package/src/components/icons/index.js +4 -0
- package/dist/assets/index-BhCGZDsr.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-CVJlkMNG.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-D6y32yDw.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,100 @@
|
|
|
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 AddRouteIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
tip = '',
|
|
10
|
+
disabled = false,
|
|
11
|
+
inactive = false
|
|
12
|
+
}) => {
|
|
13
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
14
|
+
if (disabled) {
|
|
15
|
+
className += ` ${styles.iconDisabled}`
|
|
16
|
+
}
|
|
17
|
+
if (inactive) {
|
|
18
|
+
className += ` ${styles.iconInactive}`
|
|
19
|
+
}
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
let icon = <></>
|
|
22
|
+
|
|
23
|
+
switch (size) {
|
|
24
|
+
case SMALL:
|
|
25
|
+
icon = (
|
|
26
|
+
<svg
|
|
27
|
+
width={16}
|
|
28
|
+
height={16}
|
|
29
|
+
viewBox='0 0 16 16'
|
|
30
|
+
fill='none'
|
|
31
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
data-tip={tip}
|
|
33
|
+
className={className}
|
|
34
|
+
>
|
|
35
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10M6.02882 4V8M4 6L8 6.04041' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M5.5 13H13C13.5523 13 14 12.5523 14 12V11.5C14 10.9477 13.5523 10.5 13 10.5H9C8.44772 10.5 8 10.0523 8 9.5V9C8 8.44772 8.44772 8 9 8H12.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<circle cx='5' cy='13' r='1' fill='none' className={filledClassName} />
|
|
38
|
+
<circle cx='13' cy='8' r='1' fill='none' className={filledClassName} />
|
|
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
|
+
data-tip={tip}
|
|
52
|
+
>
|
|
53
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15M9.04323 6V12M6 9L12 9.06062' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M8.25 19.5H19.125C20.1605 19.5 21 18.6605 21 17.625V17.625C21 16.5895 20.1605 15.75 19.125 15.75H13.875C12.8395 15.75 12 14.9105 12 13.875V13.875C12 12.8395 12.8395 12 13.875 12H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<circle cx='7.5' cy='19.5' r='1.5' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='19.5' cy='12' r='1.5' fill='none' className={filledClassName} />
|
|
57
|
+
</svg>
|
|
58
|
+
)
|
|
59
|
+
break
|
|
60
|
+
case LARGE:
|
|
61
|
+
icon = (
|
|
62
|
+
<svg
|
|
63
|
+
width={40}
|
|
64
|
+
height={40}
|
|
65
|
+
viewBox='0 0 40 40'
|
|
66
|
+
fill='none'
|
|
67
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
68
|
+
className={className}
|
|
69
|
+
data-tip={tip}
|
|
70
|
+
>
|
|
71
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C9.50941 5 5 9.52239 5 15.101C5 19.9878 8.46027 24.0641 13.0576 25M15.0721 10V20M10 15L20 15.101' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M13.75 32.5H33C34.1046 32.5 35 31.6046 35 30.5V28.25C35 27.1454 34.1046 26.25 33 26.25H22C20.8954 26.25 20 25.3546 20 24.25V22C20 20.8954 20.8954 20 22 20H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<circle cx='12.5' cy='32.5' r='2.5' fill='none' className={filledClassName} />
|
|
74
|
+
<circle cx='32.5' cy='20' r='2.5' fill='none' className={filledClassName} />
|
|
75
|
+
</svg>
|
|
76
|
+
)
|
|
77
|
+
break
|
|
78
|
+
|
|
79
|
+
default:
|
|
80
|
+
break
|
|
81
|
+
}
|
|
82
|
+
return icon
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
AddRouteIcon.propTypes = {
|
|
86
|
+
/**
|
|
87
|
+
* color of text, icon and borders
|
|
88
|
+
*/
|
|
89
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
90
|
+
/**
|
|
91
|
+
* Size
|
|
92
|
+
*/
|
|
93
|
+
size: PropTypes.oneOf(SIZES),
|
|
94
|
+
/**
|
|
95
|
+
* tip
|
|
96
|
+
*/
|
|
97
|
+
tip: PropTypes.string
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export default AddRouteIcon
|
|
@@ -0,0 +1,108 @@
|
|
|
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 IngressControllIcon = ({
|
|
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='2' y='6' width='4' height='4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<rect x='12' y='2' width='2' height='2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<rect x='12' y='7' width='2' height='2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<rect x='12' y='12' width='2' height='2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M6 8L12 3' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M6 8H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<path d='M6 8L12 13' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
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='3' y='9' width='6' height='6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<rect x='18' y='3' width='3' height='3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<rect x='18' y='10.5' width='3' height='3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<rect x='18' y='18' width='3' height='3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M9 12L18 4.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M9 12H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<path d='M9 12L18 19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
</svg>
|
|
60
|
+
)
|
|
61
|
+
break
|
|
62
|
+
case LARGE:
|
|
63
|
+
icon = (
|
|
64
|
+
<svg
|
|
65
|
+
width={40}
|
|
66
|
+
height={40}
|
|
67
|
+
viewBox='0 0 40 40'
|
|
68
|
+
fill='none'
|
|
69
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
70
|
+
className={className}
|
|
71
|
+
>
|
|
72
|
+
<rect x='5' y='15' width='10' height='10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<rect x='30' y='5' width='5' height='5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
74
|
+
<rect x='30' y='17.5' width='5' height='5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
75
|
+
<rect x='30' y='30' width='5' height='5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
<path d='M15 20L30 7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
77
|
+
<path d='M15 20H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
78
|
+
<path d='M15 20L30 32.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
</svg>
|
|
80
|
+
)
|
|
81
|
+
break
|
|
82
|
+
|
|
83
|
+
default:
|
|
84
|
+
break
|
|
85
|
+
}
|
|
86
|
+
return icon
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
IngressControllIcon.propTypes = {
|
|
90
|
+
/**
|
|
91
|
+
* color of text, icon and borders
|
|
92
|
+
*/
|
|
93
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
94
|
+
/**
|
|
95
|
+
* Size
|
|
96
|
+
*/
|
|
97
|
+
size: PropTypes.oneOf(SIZES),
|
|
98
|
+
/**
|
|
99
|
+
* disabled
|
|
100
|
+
*/
|
|
101
|
+
disabled: PropTypes.bool,
|
|
102
|
+
/**
|
|
103
|
+
* inactive
|
|
104
|
+
*/
|
|
105
|
+
inactive: PropTypes.bool
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export default IngressControllIcon
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import AddIcon from './AddIcon'
|
|
2
2
|
import AddEnvVariableIcon from './AddEnvVariableIcon'
|
|
3
|
+
import AddRouteIcon from './AddRouteIcon'
|
|
3
4
|
import AlertIcon from './AlertIcon'
|
|
4
5
|
import AllAppsIcon from './AllAppsIcon'
|
|
5
6
|
import AllInOneIcon from './AllInOneIcon'
|
|
@@ -95,6 +96,7 @@ import K8SMetricsIcon from './K8SMetricsIcon'
|
|
|
95
96
|
import KeyIcon from './KeyIcon'
|
|
96
97
|
import ImportAppIcon from './ImportAppIcon'
|
|
97
98
|
import InfrastructureIcon from './InfrastructureIcon'
|
|
99
|
+
import IngressControllIcon from './IngressControllIcon'
|
|
98
100
|
import InternetIcon from './InternetIcon'
|
|
99
101
|
import LabelIcon from './LabelIcon'
|
|
100
102
|
import LayersIcon from './LayersIcon'
|
|
@@ -184,6 +186,7 @@ import ScalerHistoryIcon from './ScalerHistoryIcon'
|
|
|
184
186
|
export default {
|
|
185
187
|
AddIcon,
|
|
186
188
|
AddEnvVariableIcon,
|
|
189
|
+
AddRouteIcon,
|
|
187
190
|
AlertIcon,
|
|
188
191
|
AllAppsIcon,
|
|
189
192
|
AllInOneIcon,
|
|
@@ -278,6 +281,7 @@ export default {
|
|
|
278
281
|
HorizontalPodAutoscalerIcon,
|
|
279
282
|
ImportAppIcon,
|
|
280
283
|
InfrastructureIcon,
|
|
284
|
+
IngressControllIcon,
|
|
281
285
|
InternetIcon,
|
|
282
286
|
K8SMetricsIcon,
|
|
283
287
|
KeyIcon,
|