@platformatic/ui-components 0.7.26 → 0.7.28
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-BZ5YvRH5.js → index-q-JLfu-I.js} +7 -7
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/Tooltip.jsx +37 -4
- package/src/components/Tooltip.module.css +8 -0
- package/src/components/icons/PodDetailsIcon.jsx +108 -0
- package/src/components/icons/PodLogsIcon.jsx +114 -0
- package/src/components/icons/PodServicesIcon.jsx +109 -0
- package/src/components/icons/index.js +6 -0
- package/src/stories/Tooltip.stories.jsx +23 -29
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-q-JLfu-I.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Tooltip.module.css'
|
|
4
4
|
import { useEffect, useRef, useState } from 'react'
|
|
5
|
-
import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP } from './constants'
|
|
5
|
+
import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, POSITIONS, POSITION_CENTER, POSITION_END, POSITION_START } from './constants'
|
|
6
6
|
|
|
7
7
|
function Tooltip ({
|
|
8
8
|
immediateActive = true,
|
|
@@ -13,13 +13,17 @@ function Tooltip ({
|
|
|
13
13
|
delay = 0,
|
|
14
14
|
children = null,
|
|
15
15
|
tooltipClassName = '',
|
|
16
|
-
offset = 0
|
|
16
|
+
offset = 0,
|
|
17
|
+
position = POSITION_CENTER
|
|
17
18
|
}) {
|
|
18
19
|
let timeout
|
|
19
20
|
// const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
|
|
20
21
|
const [active, setActive] = useState(immediateActive)
|
|
21
22
|
let componentClassName = tooltipClassName || styles.tooltipTipBaseClass
|
|
22
23
|
componentClassName += ` ${styles.tooltipTip} ` + styles[`${direction}`]
|
|
24
|
+
if (direction === DIRECTION_BOTTOM || direction === DIRECTION_TOP) {
|
|
25
|
+
componentClassName += ' ' + styles[`${position}`]
|
|
26
|
+
}
|
|
23
27
|
const fixedStyle = { top: '0px', left: '0px' }
|
|
24
28
|
const wrapperRef = useRef()
|
|
25
29
|
|
|
@@ -39,6 +43,19 @@ function Tooltip ({
|
|
|
39
43
|
fixedStyle.top = `${referenceBoundingClientRect.y + referenceBoundingClientRect.height + offset}px`
|
|
40
44
|
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)}px`
|
|
41
45
|
fixedStyle.transform = 'translateX(-50%)'
|
|
46
|
+
switch (position) {
|
|
47
|
+
case POSITION_END:
|
|
48
|
+
fixedStyle.transform = 'translateX(0%)'
|
|
49
|
+
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2) - 10}px`
|
|
50
|
+
break
|
|
51
|
+
case POSITION_START:
|
|
52
|
+
fixedStyle.transform = 'translateX(-100%)'
|
|
53
|
+
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2) + 10}px`
|
|
54
|
+
break
|
|
55
|
+
default:
|
|
56
|
+
fixedStyle.transform = 'translateX(-50%)'
|
|
57
|
+
break
|
|
58
|
+
}
|
|
42
59
|
break
|
|
43
60
|
case DIRECTION_LEFT:
|
|
44
61
|
fixedStyle.top = `${referenceBoundingClientRect.y + referenceBoundingClientRect.height / 2}px`
|
|
@@ -53,7 +70,19 @@ function Tooltip ({
|
|
|
53
70
|
default:
|
|
54
71
|
fixedStyle.top = `${referenceBoundingClientRect.y - referenceBoundingClientRect.height - offset}px`
|
|
55
72
|
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)}px`
|
|
56
|
-
|
|
73
|
+
switch (position) {
|
|
74
|
+
case POSITION_END:
|
|
75
|
+
fixedStyle.transform = 'translateX(0%)'
|
|
76
|
+
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2) - 10}px`
|
|
77
|
+
break
|
|
78
|
+
case POSITION_START:
|
|
79
|
+
fixedStyle.transform = 'translateX(-100%)'
|
|
80
|
+
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2) + 10}px`
|
|
81
|
+
break
|
|
82
|
+
default:
|
|
83
|
+
fixedStyle.transform = 'translateX(-50%)'
|
|
84
|
+
break
|
|
85
|
+
}
|
|
57
86
|
break
|
|
58
87
|
}
|
|
59
88
|
}
|
|
@@ -123,7 +152,11 @@ Tooltip.propTypes = {
|
|
|
123
152
|
/**
|
|
124
153
|
* offset
|
|
125
154
|
*/
|
|
126
|
-
offset: PropTypes.number
|
|
155
|
+
offset: PropTypes.number,
|
|
156
|
+
/**
|
|
157
|
+
* position
|
|
158
|
+
*/
|
|
159
|
+
position: PropTypes.oneOf(POSITIONS)
|
|
127
160
|
}
|
|
128
161
|
|
|
129
162
|
export default Tooltip
|
|
@@ -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 PodDetailsIcon = ({
|
|
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='M8.81982 5.6875L7.84555 5.125L5.89699 4L1.99987 6.25V10.75L5.89699 13L6.87127 12.4375' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M6 7H12' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<path d='M7 9H13' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M8 11H14' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<circle cx='4.39697' cy='7' r='0.5' fill='none' />
|
|
37
|
+
<circle cx='5.39697' cy='9' r='0.5' fill='none' />
|
|
38
|
+
<circle cx='6.39697' cy='11' r='0.5' fill='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
|
+
<path d='M13.23 8.53125L11.7686 7.6875L8.84573 6L3.00006 9.375V16.125L8.84573 19.5L10.3071 18.6562' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M9 10.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
54
|
+
<path d='M10.5 13.5H19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
55
|
+
<path d='M12 16.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
56
|
+
<circle cx='6.5957' cy='10.5' r='0.75' fill='none' />
|
|
57
|
+
<circle cx='8.0957' cy='13.5' r='0.75' fill='none' />
|
|
58
|
+
<circle cx='9.5957' cy='16.5' r='0.75' fill='none' />
|
|
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
|
+
<path d='M22.0498 14.2188L19.6141 12.8125L14.7427 10L4.99993 15.625V26.875L14.7427 32.5L17.1784 31.0938' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<path d='M15 17.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
74
|
+
<path d='M17.5 22.5H32.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
75
|
+
<path d='M20 27.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
76
|
+
<circle cx='10.9927' cy='17.5' r='1.25' fill='none' />
|
|
77
|
+
<circle cx='13.4927' cy='22.5' r='1.25' fill='none' />
|
|
78
|
+
<circle cx='15.9927' cy='27.5' r='1.25' fill='none' />
|
|
79
|
+
</svg>
|
|
80
|
+
)
|
|
81
|
+
break
|
|
82
|
+
|
|
83
|
+
default:
|
|
84
|
+
break
|
|
85
|
+
}
|
|
86
|
+
return icon
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
PodDetailsIcon.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 PodDetailsIcon
|
|
@@ -0,0 +1,114 @@
|
|
|
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 PodLogsIcon = ({
|
|
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='7' y='2' width='7' height='7' rx='1' stroke='none' />
|
|
33
|
+
<path d='M7 3.75H14' stroke='none' />
|
|
34
|
+
<circle cx='7.87516' cy='2.87492' r='0.291667' fill='none' />
|
|
35
|
+
<circle cx='8.75016' cy='2.87492' r='0.291667' fill='none' />
|
|
36
|
+
<circle cx='9.62516' cy='2.87492' r='0.291667' fill='none' />
|
|
37
|
+
<path d='M8.1665 4.91675H11.0832' stroke='none' strokeLinecap='round' />
|
|
38
|
+
<path d='M8.75 6.08325H12.8333' stroke='none' strokeLinecap='round' />
|
|
39
|
+
<path d='M8.75 7.25H12.8333' stroke='none' strokeLinecap='round' />
|
|
40
|
+
<path d='M9.46387 10.4998V11.9998L5.99977 13.9998L2.53566 11.9998V7.99984L5.39225 6.35059' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
</svg>
|
|
42
|
+
)
|
|
43
|
+
break
|
|
44
|
+
case MEDIUM:
|
|
45
|
+
icon = (
|
|
46
|
+
<svg
|
|
47
|
+
width={24}
|
|
48
|
+
height={24}
|
|
49
|
+
viewBox='0 0 24 24'
|
|
50
|
+
fill='none'
|
|
51
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
52
|
+
className={className}
|
|
53
|
+
>
|
|
54
|
+
<rect x='10.5' y='3' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
|
|
55
|
+
<path d='M10.5 5.625H21' stroke='none' strokeWidth={1.5} />
|
|
56
|
+
<circle cx='11.8125' cy='4.3125' r='0.4375' fill='none' />
|
|
57
|
+
<circle cx='13.125' cy='4.3125' r='0.4375' fill='none' />
|
|
58
|
+
<circle cx='14.4375' cy='4.3125' r='0.4375' fill='none' />
|
|
59
|
+
<path d='M12.25 7.375H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M13.125 9.125H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
<path d='M13.125 10.875H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
62
|
+
<path d='M14.1958 15.7498V17.9998L8.99965 20.9998L3.8035 17.9998V11.9998L8.08837 9.52588' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
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' />
|
|
79
|
+
<circle cx='21.8752' cy='7.18742' r='0.729167' fill='none' />
|
|
80
|
+
<circle cx='24.0627' cy='7.18742' r='0.729167' fill='none' />
|
|
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='M23.6597 26.2496V29.9996L14.9994 34.9996L6.33916 29.9996V19.9996L13.4806 15.8765' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
85
|
+
</svg>
|
|
86
|
+
)
|
|
87
|
+
break
|
|
88
|
+
|
|
89
|
+
default:
|
|
90
|
+
break
|
|
91
|
+
}
|
|
92
|
+
return icon
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
PodLogsIcon.propTypes = {
|
|
96
|
+
/**
|
|
97
|
+
* color of text, icon and borders
|
|
98
|
+
*/
|
|
99
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
100
|
+
/**
|
|
101
|
+
* Size
|
|
102
|
+
*/
|
|
103
|
+
size: PropTypes.oneOf(SIZES),
|
|
104
|
+
/**
|
|
105
|
+
* disabled
|
|
106
|
+
*/
|
|
107
|
+
disabled: PropTypes.bool,
|
|
108
|
+
/**
|
|
109
|
+
* inactive
|
|
110
|
+
*/
|
|
111
|
+
inactive: PropTypes.bool
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
export default PodLogsIcon
|
|
@@ -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 PodServicesIcon = ({
|
|
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
|
+
transform='rotate(270)'
|
|
32
|
+
>
|
|
33
|
+
<path d='M8 6.66506L6.75 6.66506L5.5 4.5L6.75 2.33494L9.25 2.33494L10.5 4.5L9.25 6.66506L8 6.66506ZM8 6.66506C8 7.44338 8 9 8 9' stroke='none' strokeLinejoin='round' />
|
|
34
|
+
<rect x='5' y='9' width='5' height='3' transform='rotate(90 5 9)' stroke='none' strokeLinejoin='round' />
|
|
35
|
+
<rect x='9.5' y='9' width='5' height='3' transform='rotate(90 9.5 9)' stroke='none' strokeLinejoin='round' />
|
|
36
|
+
<rect x='14' y='9' width='5' height='3' transform='rotate(90 14 9)' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
<path d='M5.5 4.5L3.5 4.5L3.5 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<path d='M10.5 4.5L12.5 4.5L12.5 9' 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
|
+
transform='rotate(270)'
|
|
52
|
+
>
|
|
53
|
+
<path d='M12 9.9976L10.125 9.9976L8.25 6.75L10.125 3.5024L13.875 3.5024L15.75 6.75L13.875 9.9976L12 9.9976ZM12 9.9976C12 11.1651 12 13.5 12 13.5' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
|
|
54
|
+
<rect x='7.5' y='13.5' width='7.5' height='4.5' transform='rotate(90 7.5 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
|
|
55
|
+
<rect x='14.25' y='13.5' width='7.5' height='4.5' transform='rotate(90 14.25 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
|
|
56
|
+
<rect x='21' y='13.5' width='7.5' height='4.5' transform='rotate(90 21 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
|
|
57
|
+
<path d='M8.25 6.75L5.25 6.75L5.25 13.5' stroke='none' stroke-width='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<path d='M15.75 6.75L18.75 6.75L18.75 13.5' stroke='none' stroke-width='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
|
+
transform='rotate(270)'
|
|
72
|
+
|
|
73
|
+
>
|
|
74
|
+
<path d='M20 16.6627L16.875 16.6627L13.75 11.25L16.875 5.83734L23.125 5.83734L26.25 11.25L23.125 16.6627L20 16.6627ZM20 16.6627C20 18.6084 20 22.5 20 22.5' stroke='none' stroke-width='2' strokeLinejoin='round' />
|
|
75
|
+
<rect x='12.5' y='22.5' width='12.5' height='7.5' transform='rotate(90 12.5 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
|
|
76
|
+
<rect x='23.75' y='22.5' width='12.5' height='7.5' transform='rotate(90 23.75 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
|
|
77
|
+
<rect x='35' y='22.5' width='12.5' height='7.5' transform='rotate(90 35 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
|
|
78
|
+
<path d='M13.75 11.25L8.75 11.25L8.75 22.5' stroke='none' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<path d='M26.25 11.25L31.25 11.25L31.25 22.5' stroke='none' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
</svg>
|
|
81
|
+
)
|
|
82
|
+
break
|
|
83
|
+
|
|
84
|
+
default:
|
|
85
|
+
break
|
|
86
|
+
}
|
|
87
|
+
return icon
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
PodServicesIcon.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 PodServicesIcon
|
|
@@ -133,7 +133,10 @@ import PlatformaticDBIcon from './PlatformaticDBIcon'
|
|
|
133
133
|
import PlatformaticRuntimeIcon from './PlatformaticRuntimeIcon'
|
|
134
134
|
import PlatformaticServiceIcon from './PlatformaticServiceIcon'
|
|
135
135
|
import PlayIcon from './PlayIcon'
|
|
136
|
+
import PodDetailsIcon from './PodDetailsIcon'
|
|
137
|
+
import PodLogsIcon from './PodLogsIcon'
|
|
136
138
|
import PodMetricsIcon from './PodMetricsIcon'
|
|
139
|
+
import PodServicesIcon from './PodServicesIcon'
|
|
137
140
|
import PodPerformanceIcon from './PodPerformanceIcon'
|
|
138
141
|
import PreviewPRIcon from './PreviewPRIcon'
|
|
139
142
|
import PullRequestIcon from './PullRequestIcon'
|
|
@@ -329,7 +332,10 @@ export default {
|
|
|
329
332
|
PlatformaticServiceIcon,
|
|
330
333
|
PlayIcon,
|
|
331
334
|
PodPerformanceIcon,
|
|
335
|
+
PodDetailsIcon,
|
|
336
|
+
PodLogsIcon,
|
|
332
337
|
PodMetricsIcon,
|
|
338
|
+
PodServicesIcon,
|
|
333
339
|
PreviewPRIcon,
|
|
334
340
|
PullRequestIcon,
|
|
335
341
|
PullRequestLoadingIcon,
|
|
@@ -4,10 +4,9 @@ import Tooltip from '../components/Tooltip'
|
|
|
4
4
|
import {
|
|
5
5
|
ANTI_FLASH_WHITE,
|
|
6
6
|
CHANGE_BACKGROUND_COLOR,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
DIRECTIONS,
|
|
8
|
+
POSITIONS,
|
|
9
9
|
RICH_BLACK,
|
|
10
|
-
SIZES,
|
|
11
10
|
WHITE
|
|
12
11
|
} from '../components/constants'
|
|
13
12
|
import Button from '../components/Button'
|
|
@@ -29,43 +28,38 @@ export default {
|
|
|
29
28
|
)
|
|
30
29
|
],
|
|
31
30
|
argTypes: {
|
|
32
|
-
|
|
33
|
-
type: 'string',
|
|
34
|
-
control: 'text'
|
|
35
|
-
},
|
|
36
|
-
bold: {
|
|
31
|
+
immediateActive: {
|
|
37
32
|
type: 'boolean'
|
|
38
33
|
},
|
|
39
|
-
|
|
34
|
+
direction: {
|
|
40
35
|
type: 'radio',
|
|
41
|
-
options:
|
|
36
|
+
options: DIRECTIONS
|
|
42
37
|
},
|
|
43
|
-
|
|
44
|
-
type: '
|
|
45
|
-
options: COLORS_BUTTON
|
|
38
|
+
visible: {
|
|
39
|
+
type: 'boolean'
|
|
46
40
|
},
|
|
47
|
-
|
|
41
|
+
activeDependsOnVisible: {
|
|
48
42
|
type: 'boolean'
|
|
49
43
|
},
|
|
50
|
-
|
|
51
|
-
type: '
|
|
52
|
-
control: {
|
|
53
|
-
type: 'radio',
|
|
54
|
-
options: SIZES
|
|
55
|
-
}
|
|
44
|
+
content: {
|
|
45
|
+
type: 'node'
|
|
56
46
|
},
|
|
57
|
-
|
|
58
|
-
type: '
|
|
59
|
-
options: HOVER_EFFECTS_BUTTONS
|
|
47
|
+
delay: {
|
|
48
|
+
type: 'number'
|
|
60
49
|
},
|
|
61
|
-
|
|
62
|
-
type: '
|
|
50
|
+
children: {
|
|
51
|
+
type: 'node'
|
|
63
52
|
},
|
|
64
|
-
|
|
65
|
-
type: '
|
|
53
|
+
tooltipClassName: {
|
|
54
|
+
type: 'string',
|
|
55
|
+
control: 'text'
|
|
66
56
|
},
|
|
67
|
-
|
|
68
|
-
type: '
|
|
57
|
+
offset: {
|
|
58
|
+
type: 'number'
|
|
59
|
+
},
|
|
60
|
+
position: {
|
|
61
|
+
type: 'radio',
|
|
62
|
+
options: POSITIONS
|
|
69
63
|
}
|
|
70
64
|
}
|
|
71
65
|
}
|