@platformatic/ui-components 0.1.54 → 0.1.55
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/package.json +1 -1
- package/renovate.json +6 -0
- package/src/components/Sidebar.jsx +10 -3
- package/src/components/Sidebar.module.css +1 -1
- package/src/components/icons/AlertIcon.jsx +1 -1
- package/src/components/icons/{CircleBackIcon.jsx → CircleArrowLeftIcon.jsx} +35 -13
- package/src/components/icons/CircleArrowRightIcon.jsx +98 -0
- package/src/components/icons/CircleTwoArrowsDownIcon.jsx +84 -0
- package/src/components/icons/CircleTwoArrowsUpIcon.jsx +87 -0
- package/src/components/icons/ExploreDocIcon.jsx +95 -0
- package/src/components/icons/SocialGitLabIcon.jsx +3 -3
- package/src/components/icons/{Users2Icon.jsx → TwoUsersIcon.jsx} +4 -4
- package/src/components/icons/WorkspaceFailIcon.jsx +112 -0
- package/src/components/icons/index.js +14 -4
- package/src/stories/PlatformaticIcon.stories.jsx +58 -26
package/package.json
CHANGED
package/renovate.json
ADDED
|
@@ -29,8 +29,15 @@ function Sidebar (props) {
|
|
|
29
29
|
{collapsed
|
|
30
30
|
? (
|
|
31
31
|
<>
|
|
32
|
+
<button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(false) }}>
|
|
33
|
+
<PlatformaticIcon
|
|
34
|
+
iconName='CircleArrowRightIcon'
|
|
35
|
+
color='white'
|
|
36
|
+
size='medium'
|
|
37
|
+
/>
|
|
38
|
+
</button>
|
|
32
39
|
<button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
|
|
33
|
-
<Icons.WorkspaceStaticIcon color='white' />
|
|
40
|
+
<Icons.WorkspaceStaticIcon color='white' size='large' />
|
|
34
41
|
</button>
|
|
35
42
|
<div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
|
|
36
43
|
{title}
|
|
@@ -38,7 +45,7 @@ function Sidebar (props) {
|
|
|
38
45
|
<HorizontalSeparator marginBottom={2} marginTop={2} />
|
|
39
46
|
<div className={styles.bottom}>
|
|
40
47
|
<button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
|
|
41
|
-
<Icons.GearIcon color='white' />
|
|
48
|
+
<Icons.GearIcon color='white' size='large' />
|
|
42
49
|
</button>
|
|
43
50
|
</div>
|
|
44
51
|
</>
|
|
@@ -47,7 +54,7 @@ function Sidebar (props) {
|
|
|
47
54
|
<>
|
|
48
55
|
<button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
|
|
49
56
|
<PlatformaticIcon
|
|
50
|
-
iconName='
|
|
57
|
+
iconName='CircleArrowLeftIcon'
|
|
51
58
|
color='white'
|
|
52
59
|
size='medium'
|
|
53
60
|
/>
|
|
@@ -19,7 +19,7 @@ const AlertIcon = ({ color, size }) => {
|
|
|
19
19
|
>
|
|
20
20
|
<path d='M14 14H2L8 2L14 14Z' stroke='none' strokeLinejoin='round' />
|
|
21
21
|
<path d='M8 6V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
22
|
-
<circle cx=
|
|
22
|
+
<circle cx={8} cy={12} r='0.5' fill='none' />
|
|
23
23
|
</svg>
|
|
24
24
|
)
|
|
25
25
|
break
|
|
@@ -2,7 +2,7 @@ import * as React from 'react'
|
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const CircleArrowLeftIcon = ({ color, size }) => {
|
|
6
6
|
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
7
|
let icon = <></>
|
|
8
8
|
|
|
@@ -10,16 +10,16 @@ const CircleBackIcon = ({ color, size }) => {
|
|
|
10
10
|
case 'small':
|
|
11
11
|
icon = (
|
|
12
12
|
<svg
|
|
13
|
-
width={
|
|
14
|
-
height={
|
|
15
|
-
viewBox='0 0
|
|
13
|
+
width={18}
|
|
14
|
+
height={18}
|
|
15
|
+
viewBox='0 0 18 18'
|
|
16
16
|
fill='none'
|
|
17
17
|
xmlns='http://www.w3.org/2000/svg'
|
|
18
18
|
className={className}
|
|
19
19
|
>
|
|
20
|
-
<circle cx={
|
|
20
|
+
<circle cx={9} cy={9} r={8} stroke='none' />
|
|
21
21
|
<path
|
|
22
|
-
d='
|
|
22
|
+
d='M10 5L6 9L10 13'
|
|
23
23
|
stroke='none'
|
|
24
24
|
strokeLinecap='round'
|
|
25
25
|
strokeLinejoin='round'
|
|
@@ -30,17 +30,18 @@ const CircleBackIcon = ({ color, size }) => {
|
|
|
30
30
|
case 'medium':
|
|
31
31
|
icon = (
|
|
32
32
|
<svg
|
|
33
|
-
width={
|
|
34
|
-
height={
|
|
35
|
-
viewBox='0 0
|
|
33
|
+
width={26}
|
|
34
|
+
height={26}
|
|
35
|
+
viewBox='0 0 26 26'
|
|
36
36
|
fill='none'
|
|
37
37
|
xmlns='http://www.w3.org/2000/svg'
|
|
38
38
|
className={className}
|
|
39
39
|
>
|
|
40
|
-
<circle cx={
|
|
40
|
+
<circle cx={13} cy={13} r={12} fill='none' stroke='none' strokeWidth={1.5} />
|
|
41
41
|
<path
|
|
42
42
|
d='M14.5 7L8.5 13L14.5 19'
|
|
43
43
|
stroke='none'
|
|
44
|
+
strokeWidth={1.5}
|
|
44
45
|
strokeLinecap='round'
|
|
45
46
|
strokeLinejoin='round'
|
|
46
47
|
/>
|
|
@@ -48,13 +49,34 @@ const CircleBackIcon = ({ color, size }) => {
|
|
|
48
49
|
)
|
|
49
50
|
break
|
|
50
51
|
|
|
52
|
+
case 'large':
|
|
53
|
+
icon = (
|
|
54
|
+
<svg
|
|
55
|
+
width={42}
|
|
56
|
+
height={42}
|
|
57
|
+
viewBox='0 0 42 42'
|
|
58
|
+
fill='none'
|
|
59
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
60
|
+
className={className}
|
|
61
|
+
>
|
|
62
|
+
<circle cx={21} cy={21} r={20} fill='none' stroke='none' strokeWidth={2} />
|
|
63
|
+
<path
|
|
64
|
+
d='M23.5 11L13.5 21L23.5 31'
|
|
65
|
+
stroke='none'
|
|
66
|
+
strokeWidth={2}
|
|
67
|
+
strokeLinecap='round'
|
|
68
|
+
strokeLinejoin='round'
|
|
69
|
+
/>
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
51
73
|
default:
|
|
52
74
|
break
|
|
53
75
|
}
|
|
54
76
|
return icon
|
|
55
77
|
}
|
|
56
78
|
|
|
57
|
-
|
|
79
|
+
CircleArrowLeftIcon.propTypes = {
|
|
58
80
|
/**
|
|
59
81
|
* color of text, icon and borders
|
|
60
82
|
*/
|
|
@@ -65,9 +87,9 @@ CircleBackIcon.propTypes = {
|
|
|
65
87
|
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
66
88
|
}
|
|
67
89
|
|
|
68
|
-
|
|
90
|
+
CircleArrowLeftIcon.defaultProps = {
|
|
69
91
|
color: 'main-dark-blue',
|
|
70
92
|
size: 'medium'
|
|
71
93
|
}
|
|
72
94
|
|
|
73
|
-
export default
|
|
95
|
+
export default CircleArrowLeftIcon
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
|
|
5
|
+
const CircleArrowRightIcon = ({ color, size }) => {
|
|
6
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
|
+
let icon = <></>
|
|
8
|
+
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'small':
|
|
11
|
+
icon = (
|
|
12
|
+
<svg
|
|
13
|
+
width={18}
|
|
14
|
+
height={18}
|
|
15
|
+
viewBox='0 0 18 18'
|
|
16
|
+
fill='none'
|
|
17
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
18
|
+
transform='rotate(180)'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<circle cx={9} cy={9} r={8} stroke='none' />
|
|
22
|
+
<path
|
|
23
|
+
d='M10 5L6 9L10 13'
|
|
24
|
+
stroke='none'
|
|
25
|
+
strokeLinecap='round'
|
|
26
|
+
strokeLinejoin='round'
|
|
27
|
+
/>
|
|
28
|
+
</svg>
|
|
29
|
+
)
|
|
30
|
+
break
|
|
31
|
+
case 'medium':
|
|
32
|
+
icon = (
|
|
33
|
+
<svg
|
|
34
|
+
width={26}
|
|
35
|
+
height={26}
|
|
36
|
+
viewBox='0 0 26 26'
|
|
37
|
+
fill='none'
|
|
38
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
39
|
+
transform='rotate(180)'
|
|
40
|
+
className={className}
|
|
41
|
+
>
|
|
42
|
+
<circle cx={13} cy={13} r={12} fill='none' stroke='none' strokeWidth={1.5} />
|
|
43
|
+
<path
|
|
44
|
+
d='M14.5 7L8.5 13L14.5 19'
|
|
45
|
+
stroke='none'
|
|
46
|
+
strokeWidth={1.5}
|
|
47
|
+
strokeLinecap='round'
|
|
48
|
+
strokeLinejoin='round'
|
|
49
|
+
/>
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
|
|
54
|
+
case 'large':
|
|
55
|
+
icon = (
|
|
56
|
+
<svg
|
|
57
|
+
width={42}
|
|
58
|
+
height={42}
|
|
59
|
+
viewBox='0 0 42 42'
|
|
60
|
+
fill='none'
|
|
61
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
62
|
+
transform='rotate(180)'
|
|
63
|
+
className={className}
|
|
64
|
+
>
|
|
65
|
+
<circle cx={21} cy={21} r={20} fill='none' stroke='none' strokeWidth={2} />
|
|
66
|
+
<path
|
|
67
|
+
d='M23.5 11L13.5 21L23.5 31'
|
|
68
|
+
stroke='none'
|
|
69
|
+
strokeWidth={2}
|
|
70
|
+
strokeLinecap='round'
|
|
71
|
+
strokeLinejoin='round'
|
|
72
|
+
/>
|
|
73
|
+
</svg>
|
|
74
|
+
)
|
|
75
|
+
break
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
CircleArrowRightIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
CircleArrowRightIcon.defaultProps = {
|
|
94
|
+
color: 'main-dark-blue',
|
|
95
|
+
size: 'medium'
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export default CircleArrowRightIcon
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
|
|
5
|
+
const CircleTwoArrowsDownIcon = ({ color, size }) => {
|
|
6
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
|
+
let icon = <></>
|
|
8
|
+
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'small':
|
|
11
|
+
icon = (
|
|
12
|
+
<svg
|
|
13
|
+
width={18}
|
|
14
|
+
height={18}
|
|
15
|
+
viewBox='0 0 18 18'
|
|
16
|
+
fill='none'
|
|
17
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
18
|
+
className={className}
|
|
19
|
+
>
|
|
20
|
+
<circle cx={9} cy={9} r={8} stroke='none' />
|
|
21
|
+
<path d='M6 9.40009L9 12.4001L12 9.40009' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
22
|
+
<path d='M6 6L9 9L12 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
|
+
|
|
24
|
+
</svg>
|
|
25
|
+
)
|
|
26
|
+
break
|
|
27
|
+
case 'medium':
|
|
28
|
+
icon = (
|
|
29
|
+
<svg
|
|
30
|
+
width={26}
|
|
31
|
+
height={26}
|
|
32
|
+
viewBox='0 0 26 26'
|
|
33
|
+
fill='none'
|
|
34
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
35
|
+
className={className}
|
|
36
|
+
>
|
|
37
|
+
<circle cx={13} cy={13} r={12} stroke='none' strokeWidth={1.5} />
|
|
38
|
+
<path d='M8.5 13.6001L13 18.1001L17.5 13.6001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
39
|
+
<path d='M8.5 8.5L13 13L17.5 8.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
40
|
+
|
|
41
|
+
</svg>
|
|
42
|
+
)
|
|
43
|
+
break
|
|
44
|
+
|
|
45
|
+
case 'large':
|
|
46
|
+
icon = (
|
|
47
|
+
<svg
|
|
48
|
+
width={42}
|
|
49
|
+
height={42}
|
|
50
|
+
viewBox='0 0 42 42'
|
|
51
|
+
fill='none'
|
|
52
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
53
|
+
className={className}
|
|
54
|
+
>
|
|
55
|
+
<circle cx={21} cy={21} r={20} stroke='none' strokeWidth={2} />
|
|
56
|
+
<path d='M13.5 22.0002L21 29.5002L28.5 22.0002' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M13.5 13.5L21 21L28.5 13.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
|
|
59
|
+
</svg>
|
|
60
|
+
)
|
|
61
|
+
break
|
|
62
|
+
default:
|
|
63
|
+
break
|
|
64
|
+
}
|
|
65
|
+
return icon
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
CircleTwoArrowsDownIcon.propTypes = {
|
|
69
|
+
/**
|
|
70
|
+
* color of text, icon and borders
|
|
71
|
+
*/
|
|
72
|
+
color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
|
|
73
|
+
/**
|
|
74
|
+
* Size
|
|
75
|
+
*/
|
|
76
|
+
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
CircleTwoArrowsDownIcon.defaultProps = {
|
|
80
|
+
color: 'main-dark-blue',
|
|
81
|
+
size: 'medium'
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export default CircleTwoArrowsDownIcon
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
|
|
5
|
+
const CircleTwoArrowsUpIcon = ({ color, size }) => {
|
|
6
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
|
+
let icon = <></>
|
|
8
|
+
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'small':
|
|
11
|
+
icon = (
|
|
12
|
+
<svg
|
|
13
|
+
width={18}
|
|
14
|
+
height={18}
|
|
15
|
+
viewBox='0 0 18 18'
|
|
16
|
+
fill='none'
|
|
17
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
18
|
+
className={className}
|
|
19
|
+
transform='rotate(180)'
|
|
20
|
+
>
|
|
21
|
+
<circle cx={9} cy={9} r={8} stroke='none' />
|
|
22
|
+
<path d='M6 9.40009L9 12.4001L12 9.40009' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
|
+
<path d='M6 6L9 9L12 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
24
|
+
|
|
25
|
+
</svg>
|
|
26
|
+
)
|
|
27
|
+
break
|
|
28
|
+
case 'medium':
|
|
29
|
+
icon = (
|
|
30
|
+
<svg
|
|
31
|
+
width={26}
|
|
32
|
+
height={26}
|
|
33
|
+
viewBox='0 0 26 26'
|
|
34
|
+
fill='none'
|
|
35
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
36
|
+
className={className}
|
|
37
|
+
transform='rotate(180)'
|
|
38
|
+
>
|
|
39
|
+
<circle cx={13} cy={13} r={12} stroke='none' strokeWidth={1.5} />
|
|
40
|
+
<path d='M8.5 13.6001L13 18.1001L17.5 13.6001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
<path d='M8.5 8.5L13 13L17.5 8.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
|
|
47
|
+
case 'large':
|
|
48
|
+
icon = (
|
|
49
|
+
<svg
|
|
50
|
+
width={42}
|
|
51
|
+
height={42}
|
|
52
|
+
viewBox='0 0 42 42'
|
|
53
|
+
fill='none'
|
|
54
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
55
|
+
className={className}
|
|
56
|
+
transform='rotate(180)'
|
|
57
|
+
>
|
|
58
|
+
<circle cx={21} cy={21} r={20} stroke='none' strokeWidth={2} />
|
|
59
|
+
<path d='M13.5 22.0002L21 29.5002L28.5 22.0002' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
<path d='M13.5 13.5L21 21L28.5 13.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
default:
|
|
66
|
+
break
|
|
67
|
+
}
|
|
68
|
+
return icon
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
CircleTwoArrowsUpIcon.propTypes = {
|
|
72
|
+
/**
|
|
73
|
+
* color of text, icon and borders
|
|
74
|
+
*/
|
|
75
|
+
color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
|
|
76
|
+
/**
|
|
77
|
+
* Size
|
|
78
|
+
*/
|
|
79
|
+
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
CircleTwoArrowsUpIcon.defaultProps = {
|
|
83
|
+
color: 'main-dark-blue',
|
|
84
|
+
size: 'medium'
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default CircleTwoArrowsUpIcon
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
|
|
5
|
+
const ExploreDocIcon = ({ color, size }) => {
|
|
6
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
|
+
let icon = <></>
|
|
8
|
+
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'small':
|
|
11
|
+
icon = (
|
|
12
|
+
<svg
|
|
13
|
+
width={16}
|
|
14
|
+
height={16}
|
|
15
|
+
viewBox='0 0 16 16'
|
|
16
|
+
fill='none'
|
|
17
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
18
|
+
className={className}
|
|
19
|
+
>
|
|
20
|
+
<path d='M3 5V3C3 2.44772 3.44772 2 4 2H12C12.5523 2 13 2.44772 13 3V13C13 13.5523 12.5523 14 12 14H3' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
21
|
+
<path d='M5.08325 4H10.6388' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
22
|
+
<path d='M10 6L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
|
+
<path d='M10 9L11 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
24
|
+
<path d='M8 12L11 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<circle cx={6} cy={8.5} r={2.5} stroke='none' />
|
|
26
|
+
<path d='M4 10L1 13' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
</svg>
|
|
28
|
+
)
|
|
29
|
+
break
|
|
30
|
+
case 'medium':
|
|
31
|
+
icon = (
|
|
32
|
+
<svg
|
|
33
|
+
width={24}
|
|
34
|
+
height={24}
|
|
35
|
+
viewBox='0 0 24 24'
|
|
36
|
+
fill='none'
|
|
37
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
38
|
+
className={className}
|
|
39
|
+
>
|
|
40
|
+
<path d='M4.5 7.5V4C4.5 3.44772 4.94772 3 5.5 3H18.5C19.0523 3 19.5 3.44772 19.5 4V20C19.5 20.5523 19.0523 21 18.5 21H4.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
<path d='M7.625 6H15.9583' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
<path d='M15 9L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
43
|
+
<path d='M15 13.5L16.5 13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
44
|
+
<path d='M12 18L16.5 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<circle cx={9} cy={12.75} r={3.75} stroke='none' strokeWidth={1.5} />
|
|
46
|
+
<path d='M6 15L1.5 19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
|
|
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='M7.5 12.5V6C7.5 5.44772 7.94772 5 8.5 5H31.5C32.0523 5 32.5 5.44772 32.5 6V34C32.5 34.5523 32.0523 35 31.5 35H7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<path d='M12.708 10H26.5969' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M25 15L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M25 22.5L27.5 22.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
<path d='M20 30L27.5 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<circle cx={15} cy={21.25} r={6.25} stroke='none' strokeWidth={2} />
|
|
67
|
+
<path d='M10 25L2.5 32.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
|
|
69
|
+
</svg>
|
|
70
|
+
)
|
|
71
|
+
break
|
|
72
|
+
|
|
73
|
+
default:
|
|
74
|
+
break
|
|
75
|
+
}
|
|
76
|
+
return icon
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
ExploreDocIcon.propTypes = {
|
|
80
|
+
/**
|
|
81
|
+
* color of text, icon and borders
|
|
82
|
+
*/
|
|
83
|
+
color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
|
|
84
|
+
/**
|
|
85
|
+
* Size
|
|
86
|
+
*/
|
|
87
|
+
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
ExploreDocIcon.defaultProps = {
|
|
91
|
+
color: 'main-dark-blue',
|
|
92
|
+
size: 'medium'
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default ExploreDocIcon
|
|
@@ -31,7 +31,7 @@ const SocialGitLabIcon = ({ color, size }) => {
|
|
|
31
31
|
</g>
|
|
32
32
|
<defs>
|
|
33
33
|
<clipPath id='clip0_852_2118'>
|
|
34
|
-
<rect width=
|
|
34
|
+
<rect width={13.3333} height={12.1637} fill='none' className={filledClassName} transform='translate(1.33337 2)' />
|
|
35
35
|
</clipPath>
|
|
36
36
|
</defs>
|
|
37
37
|
|
|
@@ -61,7 +61,7 @@ const SocialGitLabIcon = ({ color, size }) => {
|
|
|
61
61
|
</g>
|
|
62
62
|
<defs>
|
|
63
63
|
<clipPath id='clip0_315_245'>
|
|
64
|
-
<rect width=
|
|
64
|
+
<rect width={20} height={18.2456} fill='none' className={filledClassName} transform='translate(2 3)' />
|
|
65
65
|
</clipPath>
|
|
66
66
|
</defs>
|
|
67
67
|
</svg>
|
|
@@ -90,7 +90,7 @@ const SocialGitLabIcon = ({ color, size }) => {
|
|
|
90
90
|
</g>
|
|
91
91
|
<defs>
|
|
92
92
|
<clipPath id='clip0_852_2190'>
|
|
93
|
-
<rect width=
|
|
93
|
+
<rect width={33.3333} height={30.4094} fill='none' className={filledClassName} transform='translate(3.33337 5)' />
|
|
94
94
|
</clipPath>
|
|
95
95
|
</defs>
|
|
96
96
|
</svg>
|
|
@@ -2,7 +2,7 @@ import * as React from 'react'
|
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const TwoUsersIcon = ({ color, size }) => {
|
|
6
6
|
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
7
|
let icon = <></>
|
|
8
8
|
|
|
@@ -65,7 +65,7 @@ const Users2Icon = ({ color, size }) => {
|
|
|
65
65
|
return icon
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
TwoUsersIcon.propTypes = {
|
|
69
69
|
/**
|
|
70
70
|
* color of text, icon and borders
|
|
71
71
|
*/
|
|
@@ -76,9 +76,9 @@ Users2Icon.propTypes = {
|
|
|
76
76
|
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
TwoUsersIcon.defaultProps = {
|
|
80
80
|
color: 'main-dark-blue',
|
|
81
81
|
size: 'medium'
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
export default
|
|
84
|
+
export default TwoUsersIcon
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
|
|
5
|
+
const WorkspaceFailIcon = ({ color, size }) => {
|
|
6
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
7
|
+
let icon = <></>
|
|
8
|
+
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'small':
|
|
11
|
+
icon = (
|
|
12
|
+
<svg
|
|
13
|
+
width={16}
|
|
14
|
+
height={16}
|
|
15
|
+
viewBox='0 0 16 16'
|
|
16
|
+
fill='none'
|
|
17
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
18
|
+
className={className}
|
|
19
|
+
>
|
|
20
|
+
<rect x={2} y={2} width={5} height={5} rx={1} stroke='none' />
|
|
21
|
+
<rect x={6} y={14} width={4} height='5.03496' rx={1} transform='rotate(-180 6 14)' stroke='none' />
|
|
22
|
+
<rect x={14} y={14} width={6} height='5.03497' rx={1} transform='rotate(-180 14 14)' stroke='none' />
|
|
23
|
+
<circle cx={11.5} cy={4.5} r={2.5} stroke='none' />
|
|
24
|
+
<path d='M10.9624 5.23332L12.1707 3.89999' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<path d='M12.2332 5.17081L10.8999 3.96247' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
|
|
27
|
+
</svg>
|
|
28
|
+
)
|
|
29
|
+
break
|
|
30
|
+
case 'medium':
|
|
31
|
+
icon = (
|
|
32
|
+
<svg
|
|
33
|
+
width={24}
|
|
34
|
+
height={24}
|
|
35
|
+
viewBox='0 0 24 24'
|
|
36
|
+
fill='none'
|
|
37
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
38
|
+
className={className}
|
|
39
|
+
>
|
|
40
|
+
<rect x={3} y={3} width={7.5} height={7.5} rx={1} stroke='none' strokeWidth={1.5} />
|
|
41
|
+
<rect x={9} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 9 21)' stroke='none' strokeWidth={1.5} />
|
|
42
|
+
<rect x={21} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
|
|
43
|
+
<circle cx={17.25} cy={6.75} r={3.75} stroke='none' strokeWidth={1.5} />
|
|
44
|
+
<path d='M16.4436 7.84999L18.2561 5.85001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<path d='M18.3498 7.75623L16.3499 5.94373' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
</svg>
|
|
47
|
+
)
|
|
48
|
+
break
|
|
49
|
+
case 'large':
|
|
50
|
+
icon = (
|
|
51
|
+
<svg
|
|
52
|
+
width={40}
|
|
53
|
+
height={40}
|
|
54
|
+
viewBox='0 0 40 40'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
className={className}
|
|
58
|
+
>
|
|
59
|
+
<rect x={5} y={5} width={12.5} height={12.5} rx={1} stroke='none' strokeWidth={2} />
|
|
60
|
+
<rect x={15} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 15 35)' stroke='none' strokeWidth={2} />
|
|
61
|
+
<rect x={35} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
|
|
62
|
+
<circle cx={28.75} cy={11.25} r={6.25} stroke='none' strokeWidth={2} />
|
|
63
|
+
<path d='M27.4062 13.0833L30.4271 9.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M30.5833 12.927L27.25 9.9062' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
|
|
69
|
+
case 'extra-large':
|
|
70
|
+
icon = (
|
|
71
|
+
<svg
|
|
72
|
+
width={120}
|
|
73
|
+
height={120}
|
|
74
|
+
viewBox='0 0 120 120'
|
|
75
|
+
fill='none'
|
|
76
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
77
|
+
className={className}
|
|
78
|
+
>
|
|
79
|
+
<rect x={15} y={15} width={37.5} height={37.5} rx={1} stroke='none' stroke-width={6} />
|
|
80
|
+
<rect x={45} y={105} width={30} height={37.7622} rx={1} transform='rotate(-180 45 105)' stroke='none' stroke-width={6} />
|
|
81
|
+
<rect x={105} y={105} width={45} height={37.7622} rx={1} transform='rotate(-180 105 105)' stroke='none' stroke-width={6} />
|
|
82
|
+
<circle cx={86.25} cy={33.75} r={18.75} stroke='none' stroke-width={6} />
|
|
83
|
+
<path d='M82.2188 39.2499L91.2812 29.25' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<path d='M91.7499 38.781L81.75 29.7185' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
|
|
85
|
+
|
|
86
|
+
</svg>
|
|
87
|
+
)
|
|
88
|
+
break
|
|
89
|
+
|
|
90
|
+
default:
|
|
91
|
+
break
|
|
92
|
+
}
|
|
93
|
+
return icon
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
WorkspaceFailIcon.propTypes = {
|
|
97
|
+
/**
|
|
98
|
+
* color of text, icon and borders
|
|
99
|
+
*/
|
|
100
|
+
color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
|
|
101
|
+
/**
|
|
102
|
+
* Size
|
|
103
|
+
*/
|
|
104
|
+
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
WorkspaceFailIcon.defaultProps = {
|
|
108
|
+
color: 'main-dark-blue',
|
|
109
|
+
size: 'medium'
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export default WorkspaceFailIcon
|
|
@@ -19,15 +19,19 @@ import CalendarIcon from './CalendarIcon'
|
|
|
19
19
|
import Calendar1DayIcon from './Calendar1DayIcon'
|
|
20
20
|
import Calendar7DaysIcon from './Calendar7DaysIcon'
|
|
21
21
|
import CircleAddIcon from './CircleAddIcon'
|
|
22
|
-
import
|
|
22
|
+
import CircleArrowLeftIcon from './CircleArrowLeftIcon'
|
|
23
|
+
import CircleArrowRightIcon from './CircleArrowRightIcon'
|
|
23
24
|
import CircleExclamationIcon from './CircleExclamationIcon'
|
|
24
25
|
import CircleCheckMarkIcon from './CircleCheckMarkIcon'
|
|
25
26
|
import CircleCloseIcon from './CircleCloseIcon'
|
|
26
27
|
import CircleCloseHoverIcon from './CircleCloseHoverIcon'
|
|
28
|
+
import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
|
|
29
|
+
import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
|
|
27
30
|
import CloseIcon from './CloseIcon'
|
|
28
31
|
import CopyPasteIcon from './CopyPasteIcon'
|
|
29
32
|
import DatabaseIcon from './DatabaseIcon'
|
|
30
33
|
import EditIcon from './EditIcon'
|
|
34
|
+
import ExploreDocIcon from './ExploreDocIcon'
|
|
31
35
|
import EnlargeIcon from './EnlargeIcon'
|
|
32
36
|
import EntryIcon from './EntryIcon'
|
|
33
37
|
import GearIcon from './GearIcon'
|
|
@@ -49,9 +53,10 @@ import SocialNPMIcon from './SocialNPMIcon'
|
|
|
49
53
|
import SocialTwitterIcon from './SocialTwitterIcon'
|
|
50
54
|
import StopIcon from './StopIcon'
|
|
51
55
|
import TerminalIcon from './TerminalIcon'
|
|
52
|
-
import
|
|
56
|
+
import TwoUsersIcon from './TwoUsersIcon'
|
|
53
57
|
import UpgradeIcon from './UpgradeIcon'
|
|
54
58
|
import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
|
|
59
|
+
import WorkspaceFailIcon from './WorkspaceFailIcon'
|
|
55
60
|
import WorkspaceReadyIcon from './WorkspaceReadyIcon'
|
|
56
61
|
import WorkspaceStaticIcon from './WorkspaceStaticIcon'
|
|
57
62
|
|
|
@@ -77,15 +82,19 @@ export default {
|
|
|
77
82
|
Calendar1DayIcon,
|
|
78
83
|
Calendar7DaysIcon,
|
|
79
84
|
CircleAddIcon,
|
|
80
|
-
|
|
85
|
+
CircleArrowLeftIcon,
|
|
86
|
+
CircleArrowRightIcon,
|
|
81
87
|
CircleCheckMarkIcon,
|
|
82
88
|
CircleExclamationIcon,
|
|
83
89
|
CircleCloseIcon,
|
|
84
90
|
CircleCloseHoverIcon,
|
|
91
|
+
CircleTwoArrowsDownIcon,
|
|
92
|
+
CircleTwoArrowsUpIcon,
|
|
85
93
|
CloseIcon,
|
|
86
94
|
CopyPasteIcon,
|
|
87
95
|
DatabaseIcon,
|
|
88
96
|
EditIcon,
|
|
97
|
+
ExploreDocIcon,
|
|
89
98
|
EnlargeIcon,
|
|
90
99
|
EntryIcon,
|
|
91
100
|
GearIcon,
|
|
@@ -108,8 +117,9 @@ export default {
|
|
|
108
117
|
SocialTwitterIcon,
|
|
109
118
|
TerminalIcon,
|
|
110
119
|
UpgradeIcon,
|
|
111
|
-
|
|
120
|
+
TwoUsersIcon,
|
|
112
121
|
WorkspaceDynamicIcon,
|
|
122
|
+
WorkspaceFailIcon,
|
|
113
123
|
WorkspaceReadyIcon,
|
|
114
124
|
WorkspaceStaticIcon
|
|
115
125
|
}
|
|
@@ -2,15 +2,47 @@ import React from 'react'
|
|
|
2
2
|
import PlatformaticIcon from '../components/PlatformaticIcon'
|
|
3
3
|
import Icons from '../components/icons'
|
|
4
4
|
|
|
5
|
+
const colors = ['green', 'white', 'red', 'main-dark-blue']
|
|
6
|
+
|
|
5
7
|
const divStyle = {
|
|
6
|
-
width: '100%'
|
|
8
|
+
width: '100%'
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const row = {
|
|
7
12
|
display: 'flex',
|
|
8
|
-
|
|
13
|
+
width: '100%',
|
|
14
|
+
columnGap: '1rem',
|
|
15
|
+
alignItems: 'center'
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const col = {
|
|
19
|
+
flex: 1
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const paragraph = {
|
|
23
|
+
color: 'white',
|
|
24
|
+
fontSize: '12px'
|
|
9
25
|
}
|
|
10
26
|
|
|
11
27
|
export default {
|
|
12
28
|
title: 'Platformatic/PlatformaticIcon',
|
|
13
|
-
component: PlatformaticIcon
|
|
29
|
+
component: PlatformaticIcon,
|
|
30
|
+
argTypes: {
|
|
31
|
+
color: {
|
|
32
|
+
type: 'string',
|
|
33
|
+
control: {
|
|
34
|
+
type: 'radio',
|
|
35
|
+
options: colors
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
type: 'string',
|
|
40
|
+
control: {
|
|
41
|
+
type: 'radio',
|
|
42
|
+
options: ['small', 'medium', 'large', 'extra-large']
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
14
46
|
}
|
|
15
47
|
|
|
16
48
|
const Template = (args) => <PlatformaticIcon {...args} />
|
|
@@ -22,36 +54,36 @@ PlatformaticIconDefault.args = {
|
|
|
22
54
|
|
|
23
55
|
const AllIconsTemplate = (args) => {
|
|
24
56
|
const icons = Object.values(Icons)
|
|
57
|
+
|
|
25
58
|
return (
|
|
26
59
|
<>
|
|
27
|
-
<p className='text-white'> Platformatic all icons size {args.size}</p>
|
|
28
60
|
<div style={divStyle}>
|
|
29
|
-
|
|
61
|
+
<p style={paragraph}> All Platformatic Icons: {icons.length} </p>
|
|
62
|
+
{icons.map((IconComponent, index) => (
|
|
63
|
+
<div style={row} key={index}>
|
|
64
|
+
<div style={col}>
|
|
65
|
+
<p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
|
|
66
|
+
</div>
|
|
67
|
+
<div style={col}>
|
|
68
|
+
<PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='small' {...args} />
|
|
69
|
+
</div>
|
|
70
|
+
<div style={col}>
|
|
71
|
+
<PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='medium' {...args} />
|
|
72
|
+
</div>
|
|
73
|
+
<div style={col}>
|
|
74
|
+
<PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='large' {...args} />
|
|
75
|
+
</div>
|
|
76
|
+
<div style={col}>
|
|
77
|
+
<PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='extra-large' {...args} />
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
))}
|
|
30
81
|
</div>
|
|
31
82
|
</>
|
|
32
83
|
)
|
|
33
84
|
}
|
|
34
|
-
export const
|
|
35
|
-
|
|
85
|
+
export const PlatformaticIconAll = AllIconsTemplate.bind({})
|
|
86
|
+
PlatformaticIconAll.args = {
|
|
36
87
|
color: 'white',
|
|
37
|
-
size: 'small',
|
|
38
88
|
onClick: null
|
|
39
89
|
}
|
|
40
|
-
|
|
41
|
-
export const PlatformaticIconNormal = AllIconsTemplate.bind({})
|
|
42
|
-
PlatformaticIconNormal.args = {
|
|
43
|
-
color: 'white',
|
|
44
|
-
size: 'medium'
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export const PlatformaticIconLarge = AllIconsTemplate.bind({})
|
|
48
|
-
PlatformaticIconLarge.args = {
|
|
49
|
-
color: 'green',
|
|
50
|
-
size: 'large'
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
|
|
54
|
-
PlatformaticIconExtraLarge.args = {
|
|
55
|
-
color: 'green',
|
|
56
|
-
size: 'extra-large'
|
|
57
|
-
}
|