@platformatic/ui-components 0.2.2 → 0.2.3
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-DcjcxgBQ.js +206 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/PlatformaticIcon.jsx +21 -5
- package/src/components/icons/CreateAppIcon.jsx +108 -0
- package/src/components/icons/ImportAppIcon.jsx +103 -0
- package/src/components/icons/RecentAppsIcon.jsx +125 -0
- package/src/components/icons/index.js +6 -2
- package/src/stories/PlatformaticIcon.stories.jsx +2 -5
- package/dist/assets/index-D_Ghoi-l.js +0 -206
- package/src/components/icons/ImportApplicationIcon.jsx +0 -67
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-DcjcxgBQ.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DGu0wALr.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use strict'
|
|
2
|
-
import React from 'react'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import ReactTooltip from 'react-tooltip'
|
|
5
5
|
import Icons from './icons'
|
|
@@ -15,8 +15,10 @@ function PlatformaticIcon ({
|
|
|
15
15
|
tip,
|
|
16
16
|
disabled,
|
|
17
17
|
inactive,
|
|
18
|
+
internalOverHandling,
|
|
18
19
|
...rest
|
|
19
20
|
}) {
|
|
21
|
+
const [hover, setHover] = useState(false)
|
|
20
22
|
let icon = <></>
|
|
21
23
|
if (iconName) {
|
|
22
24
|
icon = React.createElement(Icons[`${iconName}`], {
|
|
@@ -24,13 +26,22 @@ function PlatformaticIcon ({
|
|
|
24
26
|
size,
|
|
25
27
|
tip,
|
|
26
28
|
disabled,
|
|
27
|
-
inactive,
|
|
29
|
+
inactive: internalOverHandling ? !hover : inactive,
|
|
28
30
|
...rest
|
|
29
31
|
})
|
|
30
32
|
if (onClick && !disabled) {
|
|
31
33
|
let className = styles.cursorPointer
|
|
32
34
|
if (classes) className += ` ${classes}`
|
|
33
|
-
icon = (
|
|
35
|
+
icon = (
|
|
36
|
+
<div
|
|
37
|
+
className={className}
|
|
38
|
+
onClick={onClick}
|
|
39
|
+
onMouseOver={() => internalOverHandling && !disabled ? setHover(true) : {}}
|
|
40
|
+
onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
|
|
41
|
+
>
|
|
42
|
+
{icon}
|
|
43
|
+
</div>
|
|
44
|
+
)
|
|
34
45
|
}
|
|
35
46
|
}
|
|
36
47
|
return (
|
|
@@ -73,7 +84,11 @@ PlatformaticIcon.propTypes = {
|
|
|
73
84
|
/**
|
|
74
85
|
* inactive
|
|
75
86
|
*/
|
|
76
|
-
inactive: PropTypes.bool
|
|
87
|
+
inactive: PropTypes.bool,
|
|
88
|
+
/**
|
|
89
|
+
* handleOverInternally
|
|
90
|
+
*/
|
|
91
|
+
internalOverHandling: PropTypes.bool
|
|
77
92
|
}
|
|
78
93
|
|
|
79
94
|
PlatformaticIcon.defaultProps = {
|
|
@@ -84,7 +99,8 @@ PlatformaticIcon.defaultProps = {
|
|
|
84
99
|
classes: '',
|
|
85
100
|
tip: '',
|
|
86
101
|
disabled: false,
|
|
87
|
-
inactive: false
|
|
102
|
+
inactive: false,
|
|
103
|
+
internalOverHandling: false
|
|
88
104
|
}
|
|
89
105
|
|
|
90
106
|
export default PlatformaticIcon
|
|
@@ -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 CreateAppIcon = ({ 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='M7.5 2H3C2.44772 2 2 2.44772 2 3V9.34775C2 9.90004 2.44772 10.3478 3 10.3478H13C13.5523 10.3478 14 9.90004 14 9.34775V5.84783V3.04352C14 2.49124 13.5523 2.04352 13 2.04352H11.5' stroke='none' strokeLinecap='round' />
|
|
28
|
+
<rect x='6' y='10.3477' width='4' height='2.08694' stroke='none' />
|
|
29
|
+
<path d='M4 13.4348C4 12.8825 4.44772 12.4348 5 12.4348H11C11.5523 12.4348 12 12.8825 12 13.4348V14H4V13.4348Z' stroke='none' />
|
|
30
|
+
<path d='M9.5 2.04346L10.2858 4.67217H12.8287L10.7714 6.29681L11.5572 8.92553L9.5 7.30089L7.44275 8.92553L8.22855 6.29681L6.1713 4.67217H8.7142L9.5 2.04346Z' stroke='none' strokeLinejoin='round' />
|
|
31
|
+
<path d='M5 5.30444V8.02181' stroke='none' strokeLinecap='round' />
|
|
32
|
+
<path d='M6.25 6.66309L3.75 6.66309' stroke='none' strokeLinecap='round' />
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
break
|
|
36
|
+
case MEDIUM:
|
|
37
|
+
icon = (
|
|
38
|
+
<svg
|
|
39
|
+
width={24}
|
|
40
|
+
height={24}
|
|
41
|
+
viewBox='0 0 24 24'
|
|
42
|
+
fill='none'
|
|
43
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
44
|
+
className={className}
|
|
45
|
+
>
|
|
46
|
+
<path d='M11.25 3H4C3.44772 3 3 3.44771 3 4V14.5216C3 15.0739 3.44772 15.5216 4 15.5216H20C20.5523 15.5216 21 15.0739 21 14.5216V8.77175V4.06528C21 3.513 20.5523 3.06528 20 3.06528H17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
47
|
+
<rect x='9' y='15.5215' width='6' height='3.13041' stroke='none' strokeWidth={1.5} />
|
|
48
|
+
<path d='M6 19.6521C6 19.0998 6.44772 18.6521 7 18.6521H17C17.5523 18.6521 18 19.0998 18 19.6521V20.9999H6V19.6521Z' stroke='none' strokeWidth={1.5} />
|
|
49
|
+
<path d='M14.25 3.06519L15.4287 7.00826L19.243 7.00826L16.1572 9.44521L17.3359 13.3883L14.25 10.9513L11.1641 13.3883L12.3428 9.44521L9.25695 7.00826L13.0713 7.00826L14.25 3.06519Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
50
|
+
<path d='M7.5 7.95654V12.0326' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
51
|
+
<path d='M9.375 9.99463L5.625 9.99463' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
52
|
+
|
|
53
|
+
</svg>
|
|
54
|
+
)
|
|
55
|
+
break
|
|
56
|
+
case LARGE:
|
|
57
|
+
icon = (
|
|
58
|
+
<svg
|
|
59
|
+
width={40}
|
|
60
|
+
height={40}
|
|
61
|
+
viewBox='0 0 40 40'
|
|
62
|
+
fill='none'
|
|
63
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
64
|
+
className={className}
|
|
65
|
+
>
|
|
66
|
+
<path d='M18.75 5H6C5.44772 5 5 5.44771 5 6V24.8694C5 25.4217 5.44772 25.8694 6 25.8694H34C34.5523 25.8694 35 25.4217 35 24.8694V14.6196V6.1088C35 5.55652 34.5523 5.1088 34 5.1088H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
67
|
+
<rect x='15' y='25.8691' width='10' height='5.21734' stroke='none' strokeWidth={2} />
|
|
68
|
+
<path d='M10 32.0869C10 31.5346 10.4477 31.0869 11 31.0869H29C29.5523 31.0869 30 31.5346 30 32.0869V34.9999H10V32.0869Z' stroke='none' strokeWidth={2} />
|
|
69
|
+
<path d='M23.75 5.10889L25.7145 11.6807H32.0717L26.9286 15.7423L28.8931 22.3141L23.75 18.2525L18.6069 22.3141L20.5714 15.7423L15.4283 11.6807H21.7855L23.75 5.10889Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
70
|
+
<path d='M12.5 13.261V20.0544' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
71
|
+
<path d='M15.625 16.6577L9.375 16.6577' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
72
|
+
|
|
73
|
+
</svg>
|
|
74
|
+
)
|
|
75
|
+
break
|
|
76
|
+
|
|
77
|
+
default:
|
|
78
|
+
break
|
|
79
|
+
}
|
|
80
|
+
return icon
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
CreateAppIcon.propTypes = {
|
|
84
|
+
/**
|
|
85
|
+
* color of text, icon and borders
|
|
86
|
+
*/
|
|
87
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
88
|
+
/**
|
|
89
|
+
* Size
|
|
90
|
+
*/
|
|
91
|
+
size: PropTypes.oneOf(SIZES),
|
|
92
|
+
/**
|
|
93
|
+
* disabled
|
|
94
|
+
*/
|
|
95
|
+
disabled: PropTypes.bool,
|
|
96
|
+
/**
|
|
97
|
+
* inactive
|
|
98
|
+
*/
|
|
99
|
+
inactive: PropTypes.bool
|
|
100
|
+
}
|
|
101
|
+
CreateAppIcon.defaultProps = {
|
|
102
|
+
color: MAIN_DARK_BLUE,
|
|
103
|
+
size: MEDIUM,
|
|
104
|
+
disabled: false,
|
|
105
|
+
inactive: false
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export default CreateAppIcon
|
|
@@ -0,0 +1,103 @@
|
|
|
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 ImportAppIcon = ({ 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='M13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V3C14 2.44772 13.5523 2 13 2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<rect x='6' y='10' width='4' height='2' stroke='none' />
|
|
29
|
+
<path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
|
|
30
|
+
<path d='M10.5 3.5L11.0613 5.22746H12.8776L11.4082 6.29508L11.9695 8.02254L10.5 6.95492L9.03054 8.02254L9.59182 6.29508L8.12236 5.22746H9.93871L10.5 3.5Z' stroke='none' strokeLinejoin='round' />
|
|
31
|
+
<path d='M9 6H4M4 6L6 4M4 6L6 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
</svg>
|
|
33
|
+
)
|
|
34
|
+
break
|
|
35
|
+
case MEDIUM:
|
|
36
|
+
icon = (
|
|
37
|
+
<svg
|
|
38
|
+
width={24}
|
|
39
|
+
height={24}
|
|
40
|
+
viewBox='0 0 24 24'
|
|
41
|
+
fill='none'
|
|
42
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
43
|
+
className={className}
|
|
44
|
+
>
|
|
45
|
+
<path d='M20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V4C21 3.44772 20.5523 3 20 3Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
<rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
|
|
47
|
+
<path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
|
|
48
|
+
<path d='M15.75 5.25L16.5919 7.84119H19.3165L17.1123 9.44263L17.9542 12.0338L15.75 10.4324L13.5458 12.0338L14.3877 9.44263L12.1835 7.84119H14.9081L15.75 5.25Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M13.5 9H6M6 9L9 6M6 9L9 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
case LARGE:
|
|
54
|
+
icon = (
|
|
55
|
+
<svg
|
|
56
|
+
width={40}
|
|
57
|
+
height={40}
|
|
58
|
+
viewBox='0 0 40 40'
|
|
59
|
+
fill='none'
|
|
60
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
61
|
+
className={className}
|
|
62
|
+
>
|
|
63
|
+
<path d='M34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V6C35 5.44772 34.5523 5 34 5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
|
|
65
|
+
<path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
|
|
66
|
+
<path d='M26.25 8.75L27.6532 13.0686H32.1941L28.5204 15.7377L29.9237 20.0564L26.25 17.3873L22.5763 20.0564L23.9796 15.7377L20.3059 13.0686H24.8468L26.25 8.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
67
|
+
<path d='M22.5 15H10M10 15L15 10M10 15L15 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
ImportAppIcon.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
|
+
ImportAppIcon.defaultProps = {
|
|
97
|
+
color: MAIN_DARK_BLUE,
|
|
98
|
+
size: MEDIUM,
|
|
99
|
+
disabled: false,
|
|
100
|
+
inactive: false
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default ImportAppIcon
|
|
@@ -0,0 +1,125 @@
|
|
|
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 RecentAppsIcon = ({ 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='M12.5 2.95996H13C13.5523 2.95996 14 3.40768 14 3.95996V4M14 7V9.63996C14 10.1922 13.5523 10.64 13 10.64H3C2.44772 10.64 2 10.1922 2 9.63996V8.5' stroke='none' strokeLinecap='round' />
|
|
28
|
+
<rect x='6' y='10.6399' width='4' height='1.92' stroke='none' />
|
|
29
|
+
<path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
|
|
30
|
+
<path d='M10 5.5L10.0025 5.48754M9.5 6.73131L9 9L10.5938 7.58359L12.7569 9L11.8875 6.73131L14 5.48754H11.3262L10.5 3L10.0025 5.48754M10.0025 5.48754L9 5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<rect x='2' y='3.5' width='6' height='6' rx='1' stroke='none' />
|
|
32
|
+
<path d='M2 4.83325H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<line x1='3.5' y1='3.16675' x2='3.5' y2='2.50008' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<line x1='6.16675' y1='3.16675' x2='6.16675' y2='2.50008' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<rect x='3.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
36
|
+
<rect x='3.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
37
|
+
<rect x='5.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
38
|
+
<rect x='5.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
39
|
+
|
|
40
|
+
</svg>
|
|
41
|
+
)
|
|
42
|
+
break
|
|
43
|
+
case MEDIUM:
|
|
44
|
+
icon = (
|
|
45
|
+
<svg
|
|
46
|
+
width={24}
|
|
47
|
+
height={24}
|
|
48
|
+
viewBox='0 0 24 24'
|
|
49
|
+
fill='none'
|
|
50
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
51
|
+
className={className}
|
|
52
|
+
>
|
|
53
|
+
<path d='M18 4.43994H20C20.5523 4.43994 21 4.88766 21 5.43994V6M21 10.5V14.9599C21 15.5122 20.5523 15.9599 20 15.9599H4C3.44772 15.9599 3 15.5122 3 14.9599V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
54
|
+
<rect x='9' y='15.96' width='6' height='2.88' stroke='none' strokeWidth={1.5} />
|
|
55
|
+
<path d='M6 19.8398C6 19.2876 6.44772 18.8398 7 18.8398H17C17.5523 18.8398 18 19.2876 18 19.8398V20.9998H6V19.8398Z' stroke='none' strokeWidth={1.5} />
|
|
56
|
+
<path d='M15 8.25L15.0037 8.23131M14.25 10.097L13.5 13.5L15.8906 11.3754L19.1353 13.5L17.8313 10.097L21 8.23131H16.9894L15.75 4.5L15.0037 8.23131M15.0037 8.23131L13.5 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<rect x='3' y='5.25' width='9' height='9' rx='1' stroke='none' strokeWidth={1.5} />
|
|
58
|
+
<path d='M3 7.25H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<line x1='5.25' y1='4.75' x2='5.25' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<line x1='9.25' y1='4.75' x2='9.25' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
<rect x='5' y='8.25' width='2' height='2' rx='0.5' fill='none' />
|
|
62
|
+
<rect x='5' y='11.25' width='2' height='2' rx='0.5' fill='none' />
|
|
63
|
+
<rect x='8' y='8.25' width='2' height='2' rx='0.5' fill='none' />
|
|
64
|
+
<rect x='8' y='11.25' width='2' height='2' rx='0.5' fill='none' />
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
case LARGE:
|
|
69
|
+
icon = (
|
|
70
|
+
<svg
|
|
71
|
+
width={40}
|
|
72
|
+
height={40}
|
|
73
|
+
viewBox='0 0 40 40'
|
|
74
|
+
fill='none'
|
|
75
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
76
|
+
className={className}
|
|
77
|
+
>
|
|
78
|
+
<path d='M29 7.3999H34C34.5523 7.3999 35 7.84762 35 8.3999V10M35 17.5V25.5999C35 26.1522 34.5523 26.5999 34 26.5999H6C5.44772 26.5999 5 26.1522 5 25.5999V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
79
|
+
<rect x='15' y='26.5999' width='10' height='4.8' stroke='none' strokeWidth={2} />
|
|
80
|
+
<path d='M10 32.3999C10 31.8476 10.4477 31.3999 11 31.3999H29C29.5523 31.3999 30 31.8476 30 32.3999V34.9999H10V32.3999Z' stroke='none' strokeWidth={2} />
|
|
81
|
+
<path d='M25 13.75L25.0062 13.7188M23.75 16.8283L22.5 22.5L26.4844 18.959L31.8922 22.5L29.7188 16.8283L35 13.7188H28.3156L26.25 7.5L25.0062 13.7188M25.0062 13.7188L22.5 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
82
|
+
<rect x='5' y='8.75' width='15' height='15' rx='1' stroke='none' strokeWidth={2} />
|
|
83
|
+
<path d='M5 12.083H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<line x1='9' y1='8.16699' x2='9' y2='6.00033' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<line x1='15.667' y1='8.16699' x2='15.667' y2='6.00033' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
86
|
+
<rect x='8.33301' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
87
|
+
<rect x='8.33301' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
88
|
+
<rect x='13.333' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
89
|
+
<rect x='13.333' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
90
|
+
</svg>
|
|
91
|
+
)
|
|
92
|
+
break
|
|
93
|
+
|
|
94
|
+
default:
|
|
95
|
+
break
|
|
96
|
+
}
|
|
97
|
+
return icon
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
RecentAppsIcon.propTypes = {
|
|
101
|
+
/**
|
|
102
|
+
* color of text, icon and borders
|
|
103
|
+
*/
|
|
104
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
105
|
+
/**
|
|
106
|
+
* Size
|
|
107
|
+
*/
|
|
108
|
+
size: PropTypes.oneOf(SIZES),
|
|
109
|
+
/**
|
|
110
|
+
* disabled
|
|
111
|
+
*/
|
|
112
|
+
disabled: PropTypes.bool,
|
|
113
|
+
/**
|
|
114
|
+
* inactive
|
|
115
|
+
*/
|
|
116
|
+
inactive: PropTypes.bool
|
|
117
|
+
}
|
|
118
|
+
RecentAppsIcon.defaultProps = {
|
|
119
|
+
color: MAIN_DARK_BLUE,
|
|
120
|
+
size: MEDIUM,
|
|
121
|
+
disabled: false,
|
|
122
|
+
inactive: false
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export default RecentAppsIcon
|
|
@@ -48,6 +48,7 @@ import ComputerIcon from './ComputerIcon'
|
|
|
48
48
|
import CopyPasteIcon from './CopyPasteIcon'
|
|
49
49
|
import CreditCardIcon from './CreditCardIcon'
|
|
50
50
|
import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
|
|
51
|
+
import CreateAppIcon from './CreateAppIcon'
|
|
51
52
|
import CreatingAppIcon from './CreatingAppIcon'
|
|
52
53
|
import DatabaseIcon from './DatabaseIcon'
|
|
53
54
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
@@ -69,7 +70,7 @@ import GitHubRepoIcon from './GitHubRepoIcon'
|
|
|
69
70
|
import GitHubRepo2Icon from './GitHubRepo2Icon'
|
|
70
71
|
import GraphQLIcon from './GraphQLIcon'
|
|
71
72
|
import KeyIcon from './KeyIcon'
|
|
72
|
-
import
|
|
73
|
+
import ImportAppIcon from './ImportAppIcon'
|
|
73
74
|
import LabelIcon from './LabelIcon'
|
|
74
75
|
import LayersIcon from './LayersIcon'
|
|
75
76
|
import LensIcon from './LensIcon'
|
|
@@ -90,6 +91,7 @@ import PreviewPRIcon from './PreviewPRIcon'
|
|
|
90
91
|
import PullRequestIcon from './PullRequestIcon'
|
|
91
92
|
import PullRequestLoadingIcon from './PullRequestLoadingIcon'
|
|
92
93
|
import RequestOwnershipIcon from './RequestOwnershipIcon'
|
|
94
|
+
import RecentAppsIcon from './RecentAppsIcon'
|
|
93
95
|
import RestartIcon from './RestartIcon'
|
|
94
96
|
import RocketIcon from './RocketIcon'
|
|
95
97
|
import RunningIcon from './RunningIcon'
|
|
@@ -179,6 +181,7 @@ export default {
|
|
|
179
181
|
CopyPasteIcon,
|
|
180
182
|
CreditCardIcon,
|
|
181
183
|
ConfigureDatabaseIcon,
|
|
184
|
+
CreateAppIcon,
|
|
182
185
|
CreatingAppIcon,
|
|
183
186
|
DatabaseIcon,
|
|
184
187
|
DatabaseMigrationIcon,
|
|
@@ -199,7 +202,7 @@ export default {
|
|
|
199
202
|
GitHubRepoIcon,
|
|
200
203
|
GitHubRepo2Icon,
|
|
201
204
|
GraphQLIcon,
|
|
202
|
-
|
|
205
|
+
ImportAppIcon,
|
|
203
206
|
KeyIcon,
|
|
204
207
|
LabelIcon,
|
|
205
208
|
LayersIcon,
|
|
@@ -221,6 +224,7 @@ export default {
|
|
|
221
224
|
PullRequestIcon,
|
|
222
225
|
PullRequestLoadingIcon,
|
|
223
226
|
RequestOwnershipIcon,
|
|
227
|
+
RecentAppsIcon,
|
|
224
228
|
RestartIcon,
|
|
225
229
|
RocketIcon,
|
|
226
230
|
RunningIcon,
|
|
@@ -40,9 +40,6 @@ export default {
|
|
|
40
40
|
options: COLORS_ICON,
|
|
41
41
|
control: { type: 'radio' }
|
|
42
42
|
},
|
|
43
|
-
onClick: {
|
|
44
|
-
type: 'function'
|
|
45
|
-
},
|
|
46
43
|
size: {
|
|
47
44
|
options: SIZES,
|
|
48
45
|
control: { type: 'radio' }
|
|
@@ -98,6 +95,6 @@ export const PlatformaticIconAll = AllIconsTemplate.bind({})
|
|
|
98
95
|
PlatformaticIconAll.args = {
|
|
99
96
|
color: WHITE,
|
|
100
97
|
classes: '',
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
tip: '',
|
|
99
|
+
onClick: () => alert('clicked')
|
|
103
100
|
}
|