@platformatic/ui-components 0.7.20 → 0.7.21
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-CY9YlI2t.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/ComputerInIcon.jsx +99 -0
- package/src/components/icons/ComputerOutIcon.jsx +99 -0
- package/src/components/icons/index.js +4 -0
- package/dist/assets/index-Z73K0bGv.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-CY9YlI2t.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,99 @@
|
|
|
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 ComputerInIcon = ({
|
|
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='M14 3.5V3C14 2.44772 13.5523 2 13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V8.5' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<path d='M14 6L6 6M6 6L8 8M6 6L8 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<rect x='6' y='10' width='4' height='2' stroke='none' />
|
|
35
|
+
<path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
|
|
36
|
+
</svg>
|
|
37
|
+
)
|
|
38
|
+
break
|
|
39
|
+
case MEDIUM:
|
|
40
|
+
icon = (
|
|
41
|
+
<svg
|
|
42
|
+
width={24}
|
|
43
|
+
height={24}
|
|
44
|
+
viewBox='0 0 24 24'
|
|
45
|
+
fill='none'
|
|
46
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
47
|
+
className={className}
|
|
48
|
+
>
|
|
49
|
+
<path d='M21 5.25V4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
50
|
+
<path d='M21 9L9 9M9 9L12 12M9 9L12 6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
|
|
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='M35 8.75V6C35 5.44772 34.5523 5 34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
67
|
+
<path d='M35 15L15 15M15 15L20 20M15 15L20 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
|
|
69
|
+
<path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
break
|
|
76
|
+
}
|
|
77
|
+
return icon
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
ComputerInIcon.propTypes = {
|
|
81
|
+
/**
|
|
82
|
+
* color of text, icon and borders
|
|
83
|
+
*/
|
|
84
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
85
|
+
/**
|
|
86
|
+
* Size
|
|
87
|
+
*/
|
|
88
|
+
size: PropTypes.oneOf(SIZES),
|
|
89
|
+
/**
|
|
90
|
+
* disabled
|
|
91
|
+
*/
|
|
92
|
+
disabled: PropTypes.bool,
|
|
93
|
+
/**
|
|
94
|
+
* inactive
|
|
95
|
+
*/
|
|
96
|
+
inactive: PropTypes.bool
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default ComputerInIcon
|
|
@@ -0,0 +1,99 @@
|
|
|
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 ComputerOutIcon = ({
|
|
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='M14 3.5V3C14 2.44772 13.5523 2 13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V8.5' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<path d='M6 6H14M14 6L12 4M14 6L12 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<rect x='6' y='10' width='4' height='2' stroke='none' />
|
|
35
|
+
<path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
|
|
36
|
+
</svg>
|
|
37
|
+
)
|
|
38
|
+
break
|
|
39
|
+
case MEDIUM:
|
|
40
|
+
icon = (
|
|
41
|
+
<svg
|
|
42
|
+
width={24}
|
|
43
|
+
height={24}
|
|
44
|
+
viewBox='0 0 24 24'
|
|
45
|
+
fill='none'
|
|
46
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
47
|
+
className={className}
|
|
48
|
+
>
|
|
49
|
+
<path d='M21 5.25V4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
50
|
+
<path d='M9 9H21M21 9L18 6M21 9L18 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
|
|
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='M35 8.75V6C35 5.44772 34.5523 5 34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
67
|
+
<path d='M15 15H35M35 15L30 10M35 15L30 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
|
|
69
|
+
<path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
break
|
|
76
|
+
}
|
|
77
|
+
return icon
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
ComputerOutIcon.propTypes = {
|
|
81
|
+
/**
|
|
82
|
+
* color of text, icon and borders
|
|
83
|
+
*/
|
|
84
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
85
|
+
/**
|
|
86
|
+
* Size
|
|
87
|
+
*/
|
|
88
|
+
size: PropTypes.oneOf(SIZES),
|
|
89
|
+
/**
|
|
90
|
+
* disabled
|
|
91
|
+
*/
|
|
92
|
+
disabled: PropTypes.bool,
|
|
93
|
+
/**
|
|
94
|
+
* inactive
|
|
95
|
+
*/
|
|
96
|
+
inactive: PropTypes.bool
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default ComputerOutIcon
|
|
@@ -63,6 +63,8 @@ import CloudIcon from './CloudIcon'
|
|
|
63
63
|
import CLIIcon from './CLIIcon'
|
|
64
64
|
import CodeTestingIcon from './CodeTestingIcon'
|
|
65
65
|
import ComputerIcon from './ComputerIcon'
|
|
66
|
+
import ComputerInIcon from './ComputerInIcon'
|
|
67
|
+
import ComputerOutIcon from './ComputerOutIcon'
|
|
66
68
|
import CopyPasteIcon from './CopyPasteIcon'
|
|
67
69
|
import CreditCardIcon from './CreditCardIcon'
|
|
68
70
|
import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
|
|
@@ -255,6 +257,8 @@ export default {
|
|
|
255
257
|
CLIIcon,
|
|
256
258
|
CodeTestingIcon,
|
|
257
259
|
ComputerIcon,
|
|
260
|
+
ComputerInIcon,
|
|
261
|
+
ComputerOutIcon,
|
|
258
262
|
CopyPasteIcon,
|
|
259
263
|
CreditCardIcon,
|
|
260
264
|
ConfigureDatabaseIcon,
|