@platformatic/ui-components 0.7.19 → 0.7.20
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-Z73K0bGv.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/HorizontalSeparator.jsx +3 -3
- package/src/components/constants.js +1 -0
- package/src/components/icons/RemoveIcon.jsx +90 -0
- package/src/components/icons/TableIcon.jsx +91 -0
- package/src/components/icons/index.js +6 -2
- package/dist/assets/index-vP5MzAix.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-Z73K0bGv.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import commonStyles from './Common.module.css'
|
|
5
|
-
import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
|
|
5
|
+
import { DARK_GREEN, MAIN_DARK_BLUE, WHITE, MARGIN_4 } from './constants'
|
|
6
6
|
import styles from './HorizontalSeparator.module.css'
|
|
7
7
|
function HorizontalSeparator ({
|
|
8
|
-
marginTop =
|
|
9
|
-
marginBottom =
|
|
8
|
+
marginTop = MARGIN_4,
|
|
9
|
+
marginBottom = MARGIN_4,
|
|
10
10
|
color = DARK_GREEN,
|
|
11
11
|
opacity = 1
|
|
12
12
|
}) {
|
|
@@ -0,0 +1,90 @@
|
|
|
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 RemoveIcon = ({
|
|
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='M2 8H14' stroke='none' strokeLinecap='round' strokeLinejoin='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='M3 11.9999H20.9999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
</svg>
|
|
48
|
+
)
|
|
49
|
+
break
|
|
50
|
+
case LARGE:
|
|
51
|
+
icon = (
|
|
52
|
+
<svg
|
|
53
|
+
width={40}
|
|
54
|
+
height={40}
|
|
55
|
+
viewBox='0 0 40 40'
|
|
56
|
+
fill='none'
|
|
57
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
58
|
+
className={className}
|
|
59
|
+
>
|
|
60
|
+
<path d='M5 19.9999H34.9999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
</svg>
|
|
62
|
+
)
|
|
63
|
+
break
|
|
64
|
+
|
|
65
|
+
default:
|
|
66
|
+
break
|
|
67
|
+
}
|
|
68
|
+
return icon
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
RemoveIcon.propTypes = {
|
|
72
|
+
/**
|
|
73
|
+
* color of text, icon and borders
|
|
74
|
+
*/
|
|
75
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
76
|
+
/**
|
|
77
|
+
* Size
|
|
78
|
+
*/
|
|
79
|
+
size: PropTypes.oneOf(SIZES),
|
|
80
|
+
/**
|
|
81
|
+
* disabled
|
|
82
|
+
*/
|
|
83
|
+
disabled: PropTypes.bool,
|
|
84
|
+
/**
|
|
85
|
+
* inactive
|
|
86
|
+
*/
|
|
87
|
+
inactive: PropTypes.bool
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export default RemoveIcon
|
|
@@ -0,0 +1,91 @@
|
|
|
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 TableIcon = ({
|
|
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='M2 5V4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V5M2 5H6M2 5V8M14 5H10M14 5V8M6 5V14M6 5H10M6 14H4C2.89543 14 2 13.1046 2 12V11M6 14H10M10 5V14M10 14H12C13.1046 14 14 13.1046 14 12V11M2 8H14M2 8V11M14 8V11M2 11H14' stroke='none' />
|
|
33
|
+
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M3 7.5V6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V7.5M3 7.5H9M3 7.5V12M21 7.5H15M21 7.5V12M9 7.5V21M9 7.5H15M9 21H6C4.34315 21 3 19.6569 3 18V16.5M9 21H15M15 7.5V21M15 21H18C19.6569 21 21 19.6569 21 18V16.5M3 12H21M3 12V16.5M21 12V16.5M3 16.5H21' stroke='none' strokeWidth={1.5} />
|
|
48
|
+
</svg>
|
|
49
|
+
)
|
|
50
|
+
break
|
|
51
|
+
case LARGE:
|
|
52
|
+
icon = (
|
|
53
|
+
<svg
|
|
54
|
+
width={40}
|
|
55
|
+
height={40}
|
|
56
|
+
viewBox='0 0 40 40'
|
|
57
|
+
fill='none'
|
|
58
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
59
|
+
className={className}
|
|
60
|
+
>
|
|
61
|
+
<path d='M5 12.5V9C5 6.79086 6.79086 5 9 5H31C33.2091 5 35 6.79086 35 9V12.5M5 12.5H15M5 12.5V20M35 12.5H25M35 12.5V20M15 12.5V35M15 12.5H25M15 35H9C6.79086 35 5 33.2091 5 31V27.5M15 35H25M25 12.5V35M25 35H31C33.2091 35 35 33.2091 35 31V27.5M5 20H35M5 20V27.5M35 20V27.5M5 27.5H35' stroke='none' strokeWidth={2} />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
return icon
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
TableIcon.propTypes = {
|
|
73
|
+
/**
|
|
74
|
+
* color of text, icon and borders
|
|
75
|
+
*/
|
|
76
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
77
|
+
/**
|
|
78
|
+
* Size
|
|
79
|
+
*/
|
|
80
|
+
size: PropTypes.oneOf(SIZES),
|
|
81
|
+
/**
|
|
82
|
+
* disabled
|
|
83
|
+
*/
|
|
84
|
+
disabled: PropTypes.bool,
|
|
85
|
+
/**
|
|
86
|
+
* inactive
|
|
87
|
+
*/
|
|
88
|
+
inactive: PropTypes.bool
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default TableIcon
|
|
@@ -135,9 +135,10 @@ import PodPerformanceIcon from './PodPerformanceIcon'
|
|
|
135
135
|
import PreviewPRIcon from './PreviewPRIcon'
|
|
136
136
|
import PullRequestIcon from './PullRequestIcon'
|
|
137
137
|
import PullRequestLoadingIcon from './PullRequestLoadingIcon'
|
|
138
|
+
import RecentAppsIcon from './RecentAppsIcon'
|
|
139
|
+
import RemoveIcon from './RemoveIcon'
|
|
138
140
|
import RequestOwnershipIcon from './RequestOwnershipIcon'
|
|
139
141
|
import RequestsIcon from './RequestsIcon'
|
|
140
|
-
import RecentAppsIcon from './RecentAppsIcon'
|
|
141
142
|
import ResourceIcon from './ResourceIcon'
|
|
142
143
|
import RestartIcon from './RestartIcon'
|
|
143
144
|
import RocketIcon from './RocketIcon'
|
|
@@ -166,6 +167,7 @@ import StackablesPluginIcon from './StackablesPluginIcon'
|
|
|
166
167
|
import StackablesTemplateIcon from './StackablesTemplateIcon'
|
|
167
168
|
import StopIcon from './StopIcon'
|
|
168
169
|
import StoppedAppIcon from './StoppedAppIcon'
|
|
170
|
+
import TableIcon from './TableIcon'
|
|
169
171
|
import TaxonomyIcon from './TaxonomyIcon'
|
|
170
172
|
import TerminalIcon from './TerminalIcon'
|
|
171
173
|
import TwoUsersIcon from './TwoUsersIcon'
|
|
@@ -325,9 +327,10 @@ export default {
|
|
|
325
327
|
PreviewPRIcon,
|
|
326
328
|
PullRequestIcon,
|
|
327
329
|
PullRequestLoadingIcon,
|
|
330
|
+
RecentAppsIcon,
|
|
331
|
+
RemoveIcon,
|
|
328
332
|
RequestOwnershipIcon,
|
|
329
333
|
RequestsIcon,
|
|
330
|
-
RecentAppsIcon,
|
|
331
334
|
ResourceIcon,
|
|
332
335
|
RestartIcon,
|
|
333
336
|
RocketIcon,
|
|
@@ -356,6 +359,7 @@ export default {
|
|
|
356
359
|
StackablesIcon,
|
|
357
360
|
StackablesPluginIcon,
|
|
358
361
|
StackablesTemplateIcon,
|
|
362
|
+
TableIcon,
|
|
359
363
|
TaxonomyIcon,
|
|
360
364
|
TerminalIcon,
|
|
361
365
|
TeamsIcon,
|