@platformatic/ui-components 0.10.1 → 0.10.2
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-tWWfT-sj.js +49 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/CollapseSquareIcon.jsx +97 -0
- package/src/components/icons/ExpandSquadreIcon.jsx +97 -0
- package/src/components/icons/InfoCircleIcon.jsx +97 -0
- package/src/components/icons/index.js +8 -2
- package/src/stories/icons/Icons.stories.jsx +3 -0
- package/dist/assets/index-HrNbJmEz.js +0 -49
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-tWWfT-sj.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-6PMGR_jN.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,97 @@
|
|
|
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 CollapseSquareIcon = ({
|
|
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='M13 8L8 8L8 3' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M6 4H3C2.44772 4 2 4.44772 2 5V13C2 13.5523 2.44772 14 3 14H11C11.5523 14 12 13.5523 12 13V10' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M8.5 7.5L14 2' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
</svg>
|
|
36
|
+
)
|
|
37
|
+
break
|
|
38
|
+
case MEDIUM:
|
|
39
|
+
icon = (
|
|
40
|
+
<svg
|
|
41
|
+
width={24}
|
|
42
|
+
height={24}
|
|
43
|
+
viewBox='0 0 24 24'
|
|
44
|
+
fill='none'
|
|
45
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
46
|
+
className={className}
|
|
47
|
+
>
|
|
48
|
+
<path d='M19.5 12L12 12L12 4.5' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M9 6H4C3.44772 6 3 6.44772 3 7V20C3 20.5523 3.44772 21 4 21H17C17.5523 21 18 20.5523 18 20V15' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M12.75 11.25L21 3' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
|
|
52
|
+
</svg>
|
|
53
|
+
)
|
|
54
|
+
break
|
|
55
|
+
case LARGE:
|
|
56
|
+
icon = (
|
|
57
|
+
<svg
|
|
58
|
+
width={40}
|
|
59
|
+
height={40}
|
|
60
|
+
viewBox='0 0 40 40'
|
|
61
|
+
fill='none'
|
|
62
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
63
|
+
className={className}
|
|
64
|
+
>
|
|
65
|
+
<path d='M32.5 20L20 20L20 7.5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M15 10H6C5.44772 10 5 10.4477 5 11V34C5 34.5523 5.44772 35 6 35H29C29.5523 35 30 34.5523 30 34V25' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<path d='M21.25 18.75L35 5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
CollapseSquareIcon.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* color of text, icon and borders
|
|
81
|
+
*/
|
|
82
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
83
|
+
/**
|
|
84
|
+
* Size
|
|
85
|
+
*/
|
|
86
|
+
size: PropTypes.oneOf(SIZES),
|
|
87
|
+
/**
|
|
88
|
+
* disabled
|
|
89
|
+
*/
|
|
90
|
+
disabled: PropTypes.bool,
|
|
91
|
+
/**
|
|
92
|
+
* inactive
|
|
93
|
+
*/
|
|
94
|
+
inactive: PropTypes.bool
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default CollapseSquareIcon
|
|
@@ -0,0 +1,97 @@
|
|
|
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 ExpandSquareIcon = ({
|
|
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='M9 2H14V7' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M8 4H3C2.44772 4 2 4.44772 2 5V13C2 13.5523 2.44772 14 3 14H11C11.5523 14 12 13.5523 12 13V8' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M13.5 2.5L8 8' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
</svg>
|
|
36
|
+
)
|
|
37
|
+
break
|
|
38
|
+
case MEDIUM:
|
|
39
|
+
icon = (
|
|
40
|
+
<svg
|
|
41
|
+
width={24}
|
|
42
|
+
height={24}
|
|
43
|
+
viewBox='0 0 24 24'
|
|
44
|
+
fill='none'
|
|
45
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
46
|
+
className={className}
|
|
47
|
+
>
|
|
48
|
+
<path d='M13.5 3H21V10.5' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M12 6H4C3.44772 6 3 6.44772 3 7V20C3 20.5523 3.44772 21 4 21H17C17.5523 21 18 20.5523 18 20V12' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M20.25 3.75L12 12' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
|
|
52
|
+
</svg>
|
|
53
|
+
)
|
|
54
|
+
break
|
|
55
|
+
case LARGE:
|
|
56
|
+
icon = (
|
|
57
|
+
<svg
|
|
58
|
+
width={40}
|
|
59
|
+
height={40}
|
|
60
|
+
viewBox='0 0 40 40'
|
|
61
|
+
fill='none'
|
|
62
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
63
|
+
className={className}
|
|
64
|
+
>
|
|
65
|
+
<path d='M22.5 5H35V17.5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M20 10H6C5.44772 10 5 10.4477 5 11V34C5 34.5523 5.44772 35 6 35H29C29.5523 35 30 34.5523 30 34V20' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<path d='M33.75 6.25L20 20' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
ExpandSquareIcon.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* color of text, icon and borders
|
|
81
|
+
*/
|
|
82
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
83
|
+
/**
|
|
84
|
+
* Size
|
|
85
|
+
*/
|
|
86
|
+
size: PropTypes.oneOf(SIZES),
|
|
87
|
+
/**
|
|
88
|
+
* disabled
|
|
89
|
+
*/
|
|
90
|
+
disabled: PropTypes.bool,
|
|
91
|
+
/**
|
|
92
|
+
* inactive
|
|
93
|
+
*/
|
|
94
|
+
inactive: PropTypes.bool
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default ExpandSquareIcon
|
|
@@ -0,0 +1,97 @@
|
|
|
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 InfoCircleIcon = ({
|
|
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
|
+
<circle cx='8' cy='8' r='6' transform='rotate(-180 8 8)' stroke='white' />
|
|
33
|
+
<path d='M8 11L8 6.5' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<circle cx='8' cy='4.74988' r='0.5' transform='rotate(-180 8 4.74988)' fill='white' />
|
|
35
|
+
</svg>
|
|
36
|
+
)
|
|
37
|
+
break
|
|
38
|
+
case MEDIUM:
|
|
39
|
+
icon = (
|
|
40
|
+
<svg
|
|
41
|
+
width={24}
|
|
42
|
+
height={24}
|
|
43
|
+
viewBox='0 0 24 24'
|
|
44
|
+
fill='none'
|
|
45
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
46
|
+
className={className}
|
|
47
|
+
>
|
|
48
|
+
<circle cx='12' cy='12' r='9' transform='rotate(-180 12 12)' stroke='white' strokeWidth={1.5} />
|
|
49
|
+
<path d='M12 16.5L12 9.75' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<circle cx='12' cy='7.12488' r='0.75' transform='rotate(-180 12 7.12488)' fill='white' />
|
|
51
|
+
|
|
52
|
+
</svg>
|
|
53
|
+
)
|
|
54
|
+
break
|
|
55
|
+
case LARGE:
|
|
56
|
+
icon = (
|
|
57
|
+
<svg
|
|
58
|
+
width={40}
|
|
59
|
+
height={40}
|
|
60
|
+
viewBox='0 0 40 40'
|
|
61
|
+
fill='none'
|
|
62
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
63
|
+
className={className}
|
|
64
|
+
>
|
|
65
|
+
<circle cx='20' cy='20' r='15' transform='rotate(-180 20 20)' stroke='white' strokeWidth={2} />
|
|
66
|
+
<path d='M20 27.5L20 16.25' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<circle cx='20' cy='11.8749' r='1.25' transform='rotate(-180 20 11.8749)' fill='white' />
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
InfoCircleIcon.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* color of text, icon and borders
|
|
81
|
+
*/
|
|
82
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
83
|
+
/**
|
|
84
|
+
* Size
|
|
85
|
+
*/
|
|
86
|
+
size: PropTypes.oneOf(SIZES),
|
|
87
|
+
/**
|
|
88
|
+
* disabled
|
|
89
|
+
*/
|
|
90
|
+
disabled: PropTypes.bool,
|
|
91
|
+
/**
|
|
92
|
+
* inactive
|
|
93
|
+
*/
|
|
94
|
+
inactive: PropTypes.bool
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default InfoCircleIcon
|
|
@@ -15,10 +15,11 @@ import ApiPerformanceIcon from './ApiPerformanceIcon'
|
|
|
15
15
|
import AppConfigurationIcon from './AppConfigurationIcon'
|
|
16
16
|
import AppDetailsIcon from './AppDetailsIcon'
|
|
17
17
|
import AppEditIcon from './AppEditIcon'
|
|
18
|
+
import AppEmptyIcon from './AppEmptyIcon'
|
|
18
19
|
import AppIcon from './AppIcon'
|
|
19
20
|
import AppListIcon from './AppListIcon'
|
|
20
21
|
import AppMissingIcon from './AppMissingIcon'
|
|
21
|
-
import
|
|
22
|
+
import AppOptimizedIcon from './AppOptimizedIcon'
|
|
22
23
|
import AppSettingsIcon from './AppSettingsIcon'
|
|
23
24
|
import ApplicationTypeIcon from './ApplicationTypeIcon'
|
|
24
25
|
import AppWorkspace from './AppWorkspace'
|
|
@@ -67,6 +68,7 @@ import CloudIcon from './CloudIcon'
|
|
|
67
68
|
import CLIIcon from './CLIIcon'
|
|
68
69
|
import CodeTestingIcon from './CodeTestingIcon'
|
|
69
70
|
import CollapseIcon from './CollapseIcon'
|
|
71
|
+
import CollapseSquareIcon from './CollapseSquareIcon'
|
|
70
72
|
import ComputerIcon from './ComputerIcon'
|
|
71
73
|
import ComputerInIcon from './ComputerInIcon'
|
|
72
74
|
import ComputerOutIcon from './ComputerOutIcon'
|
|
@@ -90,6 +92,7 @@ import EnlargeIcon from './EnlargeIcon'
|
|
|
90
92
|
import EntryIcon from './EntryIcon'
|
|
91
93
|
import EnvVariableszIcon from './EnvVariableszIcon'
|
|
92
94
|
import ExpandIcon from './ExpandIcon'
|
|
95
|
+
import ExpandSquareIcon from './ExpandSquadreIcon'
|
|
93
96
|
import ExploreDocIcon from './ExploreDocIcon'
|
|
94
97
|
import ExportIcon from './ExportIcon'
|
|
95
98
|
import EyeClosedIcon from './EyeClosedIcon'
|
|
@@ -111,6 +114,7 @@ import K8SMetricsIcon from './K8SMetricsIcon'
|
|
|
111
114
|
import KeyIcon from './KeyIcon'
|
|
112
115
|
import ImportAppIcon from './ImportAppIcon'
|
|
113
116
|
import ImportIcon from './ImportIcon'
|
|
117
|
+
import InfoCircleIcon from './InfoCircleIcon'
|
|
114
118
|
import InfrastructureIcon from './InfrastructureIcon'
|
|
115
119
|
import IngressControllIcon from './IngressControllIcon'
|
|
116
120
|
import InternalLinkIcon from './InternalLinkIcon'
|
|
@@ -209,7 +213,6 @@ import WorkspaceReadyIcon from './WorkspaceReadyIcon'
|
|
|
209
213
|
import WorkspaceStaticIcon from './WorkspaceStaticIcon'
|
|
210
214
|
import ZoomInIcon from './ZoomInIcon'
|
|
211
215
|
import ZoomOutIcon from './ZoomOutIcon'
|
|
212
|
-
import AppOptimizedIcon from './AppOptimizedIcon'
|
|
213
216
|
|
|
214
217
|
export default {
|
|
215
218
|
AddIcon,
|
|
@@ -282,6 +285,7 @@ export default {
|
|
|
282
285
|
CLIIcon,
|
|
283
286
|
CodeTestingIcon,
|
|
284
287
|
CollapseIcon,
|
|
288
|
+
CollapseSquareIcon,
|
|
285
289
|
ComputerIcon,
|
|
286
290
|
ComputerInIcon,
|
|
287
291
|
ComputerOutIcon,
|
|
@@ -304,6 +308,7 @@ export default {
|
|
|
304
308
|
EyeClosedIcon,
|
|
305
309
|
EyeOpenedIcon,
|
|
306
310
|
ExpandIcon,
|
|
311
|
+
ExpandSquareIcon,
|
|
307
312
|
ExploreDocIcon,
|
|
308
313
|
ExportIcon,
|
|
309
314
|
EnlargeIcon,
|
|
@@ -324,6 +329,7 @@ export default {
|
|
|
324
329
|
ImportAppIcon,
|
|
325
330
|
ImportIcon,
|
|
326
331
|
InfrastructureIcon,
|
|
332
|
+
InfoCircleIcon,
|
|
327
333
|
IngressControllIcon,
|
|
328
334
|
InternalLinkIcon,
|
|
329
335
|
InternetIcon,
|
|
@@ -110,3 +110,6 @@ export const AppOptimizedIcons = AllSizesIcons(icons.AppOptimizedIcon).bind({})
|
|
|
110
110
|
export const AWSIcons = AllSizesIcons(icons.AWSIcon).bind({})
|
|
111
111
|
export const ImportIcons = AllSizesIcons(icons.ImportIcon).bind({})
|
|
112
112
|
export const ExportIcons = AllSizesIcons(icons.ExportIcon).bind({})
|
|
113
|
+
export const InfoCircleIcons = AllSizesIcons(icons.InfoCircleIcon).bind({})
|
|
114
|
+
export const CollapseSquareIcons = AllSizesIcons(icons.CollapseSquareIcon).bind({})
|
|
115
|
+
export const ExpandSquareIcon = AllSizesIcons(icons.ExpandSquareIcon).bind({})
|