@platformatic/ui-components 0.2.10 → 0.2.12
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-C4aC07gj.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/ButtonOnlyIcon.jsx +24 -19
- package/src/components/icons/AppConfigurationIcon.jsx +19 -18
- package/src/components/icons/EntrypointIcon.jsx +95 -0
- package/src/components/icons/index.js +2 -0
- package/dist/assets/index-_JehVpHg.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-C4aC07gj.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -14,7 +14,6 @@ function ButtonOnlyIcon ({
|
|
|
14
14
|
backgroundColor,
|
|
15
15
|
size,
|
|
16
16
|
disabled,
|
|
17
|
-
bold,
|
|
18
17
|
hoverEffect,
|
|
19
18
|
bordered,
|
|
20
19
|
fullWidth,
|
|
@@ -23,28 +22,21 @@ function ButtonOnlyIcon ({
|
|
|
23
22
|
selected,
|
|
24
23
|
...rest
|
|
25
24
|
}) {
|
|
26
|
-
let buttonClassName = textClass
|
|
27
|
-
buttonClassName += ` ${styles.button} ${styles['color-' + color]} `
|
|
28
25
|
let contentClassName = `${styles.content} `
|
|
29
26
|
if (paddingClass) {
|
|
30
27
|
contentClassName += `${paddingClass} `
|
|
31
28
|
} else {
|
|
32
29
|
contentClassName += `${styles['button-' + size]} `
|
|
33
30
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
contentClassName += ` ${styles.disabled}`
|
|
37
|
-
} else {
|
|
38
|
-
buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
|
|
39
|
-
}
|
|
40
|
-
if (!bordered) buttonClassName += ` ${styles['no-border']}`
|
|
41
|
-
if (bold) buttonClassName += ` ${styles.fontBold}`
|
|
31
|
+
let baseButtonClassName = textClass
|
|
32
|
+
baseButtonClassName += ` ${styles.button} `
|
|
42
33
|
if (fullWidth) {
|
|
43
|
-
|
|
34
|
+
baseButtonClassName += ` ${styles.fullWidth}`
|
|
44
35
|
}
|
|
45
|
-
if (selected)
|
|
36
|
+
if (selected) baseButtonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
|
|
46
37
|
const [hover, setHover] = useState(false)
|
|
47
38
|
const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
|
|
39
|
+
const [buttonClassName, setButtonClassName] = useState(disabled ? buttonRestClassName : buttonActiveClassName())
|
|
48
40
|
|
|
49
41
|
useEffect(() => {
|
|
50
42
|
if (!disabled) {
|
|
@@ -68,12 +60,30 @@ function ButtonOnlyIcon ({
|
|
|
68
60
|
}
|
|
69
61
|
}, [disabled, hover, hoverEffect])
|
|
70
62
|
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (disabled) {
|
|
65
|
+
setButtonClassName(buttonRestClassName())
|
|
66
|
+
} else {
|
|
67
|
+
setButtonClassName(buttonActiveClassName())
|
|
68
|
+
}
|
|
69
|
+
}, [disabled])
|
|
70
|
+
|
|
71
71
|
function restClassName () {
|
|
72
72
|
return `${commonStyles['background-color-' + backgroundColor]} `
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
+
function buttonRestClassName () {
|
|
76
|
+
if (!bordered) return ` ${styles['no-border']}`
|
|
77
|
+
return commonStyles[`bordered--${color}-30`]
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function buttonActiveClassName () {
|
|
81
|
+
if (!bordered) return ` ${styles['no-border']}`
|
|
82
|
+
return commonStyles[`bordered--${color}-100`]
|
|
83
|
+
}
|
|
84
|
+
|
|
75
85
|
return (
|
|
76
|
-
<button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
|
|
86
|
+
<button className={`${baseButtonClassName} ${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
|
|
77
87
|
<div className={`${contentClassName} ${backgroundClassName}`}>
|
|
78
88
|
{platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={MEDIUM} onClick={null} disabled={disabled} /> : null}
|
|
79
89
|
</div>
|
|
@@ -110,10 +120,6 @@ ButtonOnlyIcon.propTypes = {
|
|
|
110
120
|
* Disabled
|
|
111
121
|
*/
|
|
112
122
|
disabled: PropTypes.bool,
|
|
113
|
-
/**
|
|
114
|
-
* Bold
|
|
115
|
-
*/
|
|
116
|
-
bold: PropTypes.bool,
|
|
117
123
|
/**
|
|
118
124
|
* Effect on hover
|
|
119
125
|
*/
|
|
@@ -154,7 +160,6 @@ ButtonOnlyIcon.defaultProps = {
|
|
|
154
160
|
backgroundColor: 'transparent',
|
|
155
161
|
disabled: false,
|
|
156
162
|
size: LARGE,
|
|
157
|
-
bold: false,
|
|
158
163
|
hoverEffect: DULLS_BACKGROUND_COLOR,
|
|
159
164
|
bordered: true,
|
|
160
165
|
fullWidth: false,
|
|
@@ -47,15 +47,15 @@ const AppConfigurationIcon = ({ color, size, disabled, inactive }) => {
|
|
|
47
47
|
xmlns='http://www.w3.org/2000/svg'
|
|
48
48
|
className={className}
|
|
49
49
|
>
|
|
50
|
-
<path d='
|
|
51
|
-
<path d='
|
|
52
|
-
<path d='
|
|
53
|
-
<circle cx='
|
|
54
|
-
<circle cx='
|
|
55
|
-
<circle cx='
|
|
56
|
-
<path d='
|
|
57
|
-
<path d='
|
|
58
|
-
<path d='
|
|
50
|
+
<path d='M15.75 10.5L20.2966 13.125V18.375L15.75 21L11.2034 18.375V13.125L15.75 10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
51
|
+
<path d='M16.5 8.25V4C16.5 3.44772 16.0523 3 15.5 3H4C3.44772 3 3 3.44772 3 4V15.5C3 16.0523 3.44772 16.5 4 16.5H8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
52
|
+
<path d='M3 6.375H16.5' stroke='none' strokeWidth={1.5} />
|
|
53
|
+
<circle cx='4.6875' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
54
|
+
<circle cx='6.375' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='8.0625' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
|
|
56
|
+
<path d='M5.25 8.625H10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
57
|
+
<path d='M6.375 10.875H11.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<path d='M6.375 13.125H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
59
|
|
|
60
60
|
</svg>
|
|
61
61
|
)
|
|
@@ -70,15 +70,16 @@ const AppConfigurationIcon = ({ color, size, disabled, inactive }) => {
|
|
|
70
70
|
xmlns='http://www.w3.org/2000/svg'
|
|
71
71
|
className={className}
|
|
72
72
|
>
|
|
73
|
-
<path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='
|
|
74
|
-
<path d='M27.5 13.75V6C27.5 5.44772 27.0523 5 26.5 5H6C5.44772 5 5 5.44772 5 6V26.5C5 27.0523 5.44772 27.5 6 27.5H13.75' stroke='
|
|
75
|
-
<path d='M5 10.625H27.5' stroke='
|
|
76
|
-
<circle cx='7.8125' cy='7.8125' r='0.9375' fill='
|
|
77
|
-
<circle cx='10.625' cy='7.8125' r='0.9375' fill='
|
|
78
|
-
<circle cx='13.4375' cy='7.8125' r='0.9375' fill='
|
|
79
|
-
<path d='M8.75 14.375H18.125' stroke='
|
|
80
|
-
<path d='M10.625 18.125H18.75' stroke='
|
|
81
|
-
<path d='M10.625 21.875H15' stroke='
|
|
73
|
+
<path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
74
|
+
<path d='M27.5 13.75V6C27.5 5.44772 27.0523 5 26.5 5H6C5.44772 5 5 5.44772 5 6V26.5C5 27.0523 5.44772 27.5 6 27.5H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
75
|
+
<path d='M5 10.625H27.5' stroke='none' strokeWidth={2} />
|
|
76
|
+
<circle cx='7.8125' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
77
|
+
<circle cx='10.625' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
78
|
+
<circle cx='13.4375' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
79
|
+
<path d='M8.75 14.375H18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
80
|
+
<path d='M10.625 18.125H18.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
81
|
+
<path d='M10.625 21.875H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
82
|
+
|
|
82
83
|
</svg>
|
|
83
84
|
)
|
|
84
85
|
break
|
|
@@ -0,0 +1,95 @@
|
|
|
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 EntrypointIcon = ({ 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
|
+
|
|
16
|
+
switch (size) {
|
|
17
|
+
case SMALL:
|
|
18
|
+
icon = (
|
|
19
|
+
<svg
|
|
20
|
+
width={16}
|
|
21
|
+
height={16}
|
|
22
|
+
viewBox='0 0 16 16'
|
|
23
|
+
fill='none'
|
|
24
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
25
|
+
className={className}
|
|
26
|
+
>
|
|
27
|
+
<path d='M3.15354 5C4.15846 3.2066 6.03674 2 8.188 2C11.3979 2 14 4.68629 14 8C14 11.3137 11.3979 14 8.188 14C5.92177 14 3.95849 12.661 3 10.7075' stroke='none' strokeLinecap='round' />
|
|
28
|
+
<path d='M2 7.89995H10.7272M10.7272 7.89995L8.54543 5.69995M10.7272 7.89995L8.54543 10.1' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<path d='M4.73031 7.5C6.23769 4.80989 9.05511 3 12.282 3C17.0968 3 21 7.02944 21 12C21 16.9706 17.0968 21 12.282 21C8.88266 21 5.93773 18.9915 4.5 16.0613' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
44
|
+
<path d='M3 11.85H16.0909M16.0909 11.85L12.8181 8.55005M16.0909 11.85L12.8181 15.15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
</svg>
|
|
46
|
+
)
|
|
47
|
+
break
|
|
48
|
+
case LARGE:
|
|
49
|
+
icon = (
|
|
50
|
+
<svg
|
|
51
|
+
width={40}
|
|
52
|
+
height={40}
|
|
53
|
+
viewBox='0 0 40 40'
|
|
54
|
+
fill='none'
|
|
55
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
56
|
+
className={className}
|
|
57
|
+
>
|
|
58
|
+
<path d='M7.88385 12.5C10.3962 8.01649 15.0918 5 20.47 5C28.4947 5 35 11.7157 35 20C35 28.2843 28.4947 35 20.47 35C14.8044 35 9.89621 31.6525 7.5 26.7688' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
59
|
+
<path d='M5 19.75H26.8181M26.8181 19.75L21.3636 14.25M26.8181 19.75L21.3636 25.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
|
|
64
|
+
default:
|
|
65
|
+
break
|
|
66
|
+
}
|
|
67
|
+
return icon
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
EntrypointIcon.propTypes = {
|
|
71
|
+
/**
|
|
72
|
+
* color of text, icon and borders
|
|
73
|
+
*/
|
|
74
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
75
|
+
/**
|
|
76
|
+
* Size
|
|
77
|
+
*/
|
|
78
|
+
size: PropTypes.oneOf(SIZES),
|
|
79
|
+
/**
|
|
80
|
+
* disabled
|
|
81
|
+
*/
|
|
82
|
+
disabled: PropTypes.bool,
|
|
83
|
+
/**
|
|
84
|
+
* inactive
|
|
85
|
+
*/
|
|
86
|
+
inactive: PropTypes.bool
|
|
87
|
+
}
|
|
88
|
+
EntrypointIcon.defaultProps = {
|
|
89
|
+
color: MAIN_DARK_BLUE,
|
|
90
|
+
size: MEDIUM,
|
|
91
|
+
disabled: false,
|
|
92
|
+
inactive: false
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default EntrypointIcon
|
|
@@ -65,6 +65,7 @@ import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
|
65
65
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
66
66
|
import EditDocumentIcon from './EditDocumentIcon'
|
|
67
67
|
import EditIcon from './EditIcon'
|
|
68
|
+
import EntrypointIcon from './EntrypointIcon'
|
|
68
69
|
import EnlargeIcon from './EnlargeIcon'
|
|
69
70
|
import EntryIcon from './EntryIcon'
|
|
70
71
|
import ExpandIcon from './ExpandIcon'
|
|
@@ -209,6 +210,7 @@ export default {
|
|
|
209
210
|
DepencenciesReloadIcon,
|
|
210
211
|
EditDocumentIcon,
|
|
211
212
|
EditIcon,
|
|
213
|
+
EntrypointIcon,
|
|
212
214
|
EyeClosedIcon,
|
|
213
215
|
EyeOpenedIcon,
|
|
214
216
|
ExpandIcon,
|