@platformatic/ui-components 0.2.12 → 0.2.14
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/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-C7qZkR7V.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -46,7 +46,7 @@ function Button ({
|
|
|
46
46
|
}
|
|
47
47
|
if (disabled) {
|
|
48
48
|
buttonClassName += ' ' + commonStyles[`bordered--${color}-30`]
|
|
49
|
-
|
|
49
|
+
buttonClassName += ` ${styles.disabled}`
|
|
50
50
|
} else {
|
|
51
51
|
buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
|
|
52
52
|
}
|
|
@@ -0,0 +1,123 @@
|
|
|
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 LogsRiskIcon = ({ 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='M6 12.5H3C2.44772 12.5 2 12.0523 2 11.5V3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V10.5' stroke='none' strokeLinecap='round' />
|
|
29
|
+
<path d='M2 5H14' stroke='none' />
|
|
30
|
+
<circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
31
|
+
<circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
32
|
+
<circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
33
|
+
<path d='M4 7H9' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<path d='M5 9H7' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M5 11H6' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M14 14H7L10.5 7L14 14Z' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
<path d='M10.5 9.5V11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<circle cx='10.5002' cy='12.8334' r='0.291667' 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
|
+
>
|
|
52
|
+
<path d='M9 18.75H4C3.44772 18.75 3 18.3023 3 17.75V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<path d='M3 7.5H21' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
57
|
+
<path d='M6 10.5H13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<path d='M7.5 13.5H10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
|
+
<path d='M7.5 16.5H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M21 21H10.5L15.75 10.5L21 21Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
61
|
+
<path d='M15.75 14.25V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<circle cx='15.75' cy='19.25' r='0.4375' fill='none' className={filledClassName} />
|
|
63
|
+
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
case LARGE:
|
|
68
|
+
icon = (
|
|
69
|
+
<svg
|
|
70
|
+
width={40}
|
|
71
|
+
height={40}
|
|
72
|
+
viewBox='0 0 40 40'
|
|
73
|
+
fill='none'
|
|
74
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
75
|
+
className={className}
|
|
76
|
+
>
|
|
77
|
+
<path d='M15 31.25H6C5.44772 31.25 5 30.8023 5 30.25V6C5 5.44772 5.44772 5 6 5H34C34.5523 5 35 5.44772 35 6V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
78
|
+
<path d='M5 12.5H35' stroke='none' strokeWidth={2} />
|
|
79
|
+
<circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
80
|
+
<circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
81
|
+
<circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
82
|
+
<path d='M10 17.5H22.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
83
|
+
<path d='M12.5 22.5H17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
84
|
+
<path d='M12.5 27.5H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<path d='M35 35H17.5L26.25 17.5L35 35Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
86
|
+
<path d='M26.25 23.75V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
87
|
+
<circle cx='26.2502' cy='32.0834' r='0.729167' fill='none' className={filledClassName} />
|
|
88
|
+
</svg>
|
|
89
|
+
)
|
|
90
|
+
break
|
|
91
|
+
|
|
92
|
+
default:
|
|
93
|
+
break
|
|
94
|
+
}
|
|
95
|
+
return icon
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
LogsRiskIcon.propTypes = {
|
|
99
|
+
/**
|
|
100
|
+
* color of text, icon and borders
|
|
101
|
+
*/
|
|
102
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
103
|
+
/**
|
|
104
|
+
* Size
|
|
105
|
+
*/
|
|
106
|
+
size: PropTypes.oneOf(SIZES),
|
|
107
|
+
/**
|
|
108
|
+
* disabled
|
|
109
|
+
*/
|
|
110
|
+
disabled: PropTypes.bool,
|
|
111
|
+
/**
|
|
112
|
+
* inactive
|
|
113
|
+
*/
|
|
114
|
+
inactive: PropTypes.bool
|
|
115
|
+
}
|
|
116
|
+
LogsRiskIcon.defaultProps = {
|
|
117
|
+
color: MAIN_DARK_BLUE,
|
|
118
|
+
size: MEDIUM,
|
|
119
|
+
disabled: false,
|
|
120
|
+
inactive: false
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export default LogsRiskIcon
|
|
@@ -88,6 +88,7 @@ import LensIcon from './LensIcon'
|
|
|
88
88
|
import LiveIcon from './LiveIcon'
|
|
89
89
|
import LoadingAppIcon from './LoadingAppIcon'
|
|
90
90
|
import LogOutIcon from './LogOutIcon'
|
|
91
|
+
import LogsRiskIcon from './LogsRiskIcon'
|
|
91
92
|
import MetricsIcon from './MetricsIcon'
|
|
92
93
|
import MetricsLoadingIcon from './MetricsLoadingIcon'
|
|
93
94
|
import NameAppIcon from './NameAppIcon'
|
|
@@ -233,6 +234,7 @@ export default {
|
|
|
233
234
|
LiveIcon,
|
|
234
235
|
LoadingAppIcon,
|
|
235
236
|
LogOutIcon,
|
|
237
|
+
LogsRiskIcon,
|
|
236
238
|
MetricsIcon,
|
|
237
239
|
MetricsLoadingIcon,
|
|
238
240
|
NameAppIcon,
|