@platformatic/ui-components 0.2.5 → 0.2.7
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-DGu0wALr.css → index-C-rgNKxt.css} +1 -1
- package/dist/assets/index-CcMC5HmW.js +40 -0
- package/dist/index.html +2 -2
- package/dist/main.css +4 -0
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/PlatformaticIcon.jsx +10 -3
- package/src/components/PlatformaticIcon.module.css +3 -0
- package/src/components/Tooltip.jsx +65 -0
- package/src/components/Tooltip.module.css +31 -0
- package/src/components/constants.js +5 -0
- package/src/components/icons/AllAppsIcon.jsx +110 -0
- package/src/components/icons/AppConfigurationIcon.jsx +117 -0
- package/src/components/icons/AppDetailsIcon.jsx +99 -0
- package/src/components/icons/AppEditIcon.jsx +103 -0
- package/src/components/icons/AppSettingsIcon.jsx +97 -0
- package/src/components/icons/CodeTestingIcon.jsx +119 -0
- package/src/components/icons/CreateAppIcon.jsx +7 -18
- package/src/components/icons/ImportAppIcon.jsx +11 -15
- package/src/components/icons/RecentAppsIcon.jsx +26 -37
- package/src/components/icons/RunningAppIcon.jsx +103 -0
- package/src/components/icons/StoppedAppIcon.jsx +12 -18
- package/src/components/icons/index.js +14 -2
- package/dist/assets/index-DnNOQ9Mz.js +0 -206
- package/src/components/icons/CreatingAppIcon.jsx +0 -110
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
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-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CcMC5HmW.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
package/index.js
CHANGED
|
@@ -36,6 +36,7 @@ import SearchBar from './src/components/SearchBar'
|
|
|
36
36
|
import SearchBarV2 from './src/components/SearchBarV2'
|
|
37
37
|
import SimpleMetric from './src/components/SimpleMetric'
|
|
38
38
|
import Status from './src/components/Status'
|
|
39
|
+
import Tooltip from './src/components/Tooltip'
|
|
39
40
|
import TabbedWindow from './src/components/TabbedWindow'
|
|
40
41
|
import TabbedWindowV2 from './src/components/TabbedWindowV2'
|
|
41
42
|
import Tag from './src/components/Tag'
|
|
@@ -85,6 +86,7 @@ export {
|
|
|
85
86
|
TabbedWindowV2,
|
|
86
87
|
Tag,
|
|
87
88
|
TextWithLabel,
|
|
89
|
+
Tooltip,
|
|
88
90
|
TwoColumnsLayout,
|
|
89
91
|
Versions,
|
|
90
92
|
VerticalSeparator
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React, { useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
|
-
import ReactTooltip from 'react-tooltip'
|
|
5
4
|
import Icons from './icons'
|
|
6
5
|
import styles from './PlatformaticIcon.module.css'
|
|
7
6
|
import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
|
|
7
|
+
import Tooltip from './Tooltip'
|
|
8
8
|
|
|
9
9
|
function PlatformaticIcon ({
|
|
10
10
|
iconName,
|
|
@@ -13,6 +13,7 @@ function PlatformaticIcon ({
|
|
|
13
13
|
size,
|
|
14
14
|
classes,
|
|
15
15
|
tip,
|
|
16
|
+
tipClassName,
|
|
16
17
|
disabled,
|
|
17
18
|
inactive,
|
|
18
19
|
internalOverHandling,
|
|
@@ -30,7 +31,7 @@ function PlatformaticIcon ({
|
|
|
30
31
|
...rest
|
|
31
32
|
})
|
|
32
33
|
if (onClick && !disabled) {
|
|
33
|
-
let className = styles.cursorPointer
|
|
34
|
+
let className = `${styles.cursorPointer} ${tip ? styles.pltTooltip : ''}`
|
|
34
35
|
if (classes) className += ` ${classes}`
|
|
35
36
|
icon = (
|
|
36
37
|
<div
|
|
@@ -40,14 +41,15 @@ function PlatformaticIcon ({
|
|
|
40
41
|
onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
|
|
41
42
|
>
|
|
42
43
|
{icon}
|
|
44
|
+
{tip && <Tooltip tooltipClassName={tipClassName} text={tip} visible={hover} />}
|
|
43
45
|
</div>
|
|
44
46
|
)
|
|
45
47
|
}
|
|
46
48
|
}
|
|
49
|
+
|
|
47
50
|
return (
|
|
48
51
|
<>
|
|
49
52
|
{icon}
|
|
50
|
-
{tip && <ReactTooltip place='top' type='info' />}
|
|
51
53
|
</>
|
|
52
54
|
)
|
|
53
55
|
}
|
|
@@ -77,6 +79,10 @@ PlatformaticIcon.propTypes = {
|
|
|
77
79
|
* tip
|
|
78
80
|
*/
|
|
79
81
|
tip: PropTypes.string,
|
|
82
|
+
/**
|
|
83
|
+
* tip
|
|
84
|
+
*/
|
|
85
|
+
tipClassName: PropTypes.string,
|
|
80
86
|
/**
|
|
81
87
|
* disabled
|
|
82
88
|
*/
|
|
@@ -98,6 +104,7 @@ PlatformaticIcon.defaultProps = {
|
|
|
98
104
|
onClick: () => {},
|
|
99
105
|
classes: '',
|
|
100
106
|
tip: '',
|
|
107
|
+
tipClassName: '',
|
|
101
108
|
disabled: false,
|
|
102
109
|
inactive: false,
|
|
103
110
|
internalOverHandling: false
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Tooltip.module.css'
|
|
4
|
+
import { useEffect, useRef, useState } from 'react'
|
|
5
|
+
import { ALIGNMENT_CENTER, ALIGNMENT_LEFT, ALIGNMENTS } from './constants'
|
|
6
|
+
|
|
7
|
+
function Tooltip ({ tooltipClassName, text, visible, alignment }) {
|
|
8
|
+
const ref = useRef(null)
|
|
9
|
+
const alignmentClassName = styles[`${alignment}PltTooltip`]
|
|
10
|
+
const [className, setClassName] = useState(normalClassName())
|
|
11
|
+
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (visible) {
|
|
14
|
+
setClassName(visibleClassName())
|
|
15
|
+
if (ref.current) {
|
|
16
|
+
if (alignment === ALIGNMENT_LEFT) {
|
|
17
|
+
ref.current.style.marginLeft = '-0px'
|
|
18
|
+
}
|
|
19
|
+
if (alignment === ALIGNMENT_CENTER) {
|
|
20
|
+
ref.current.style.marginLeft = '-' + ((ref.current.clientWidth / 2) - 12) + 'px'
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
} else {
|
|
24
|
+
setClassName(normalClassName())
|
|
25
|
+
}
|
|
26
|
+
}, [visible])
|
|
27
|
+
|
|
28
|
+
function normalClassName () {
|
|
29
|
+
return `${styles.pltTooltipText} ${tooltipClassName} ${alignmentClassName}`
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function visibleClassName () {
|
|
33
|
+
return `${normalClassName()} ${styles.pltTooltipTextVisible}`
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return <span ref={ref} className={className}>{text}</span>
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
Tooltip.propTypes = {
|
|
40
|
+
/**
|
|
41
|
+
* text
|
|
42
|
+
*/
|
|
43
|
+
text: PropTypes.string,
|
|
44
|
+
/**
|
|
45
|
+
* tooltipClassName
|
|
46
|
+
*/
|
|
47
|
+
tooltipClassName: PropTypes.string,
|
|
48
|
+
/**
|
|
49
|
+
* visible
|
|
50
|
+
*/
|
|
51
|
+
visible: PropTypes.bool,
|
|
52
|
+
/**
|
|
53
|
+
* alignment
|
|
54
|
+
*/
|
|
55
|
+
alignment: PropTypes.oneOf(ALIGNMENTS)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
Tooltip.defaultProps = {
|
|
59
|
+
text: '',
|
|
60
|
+
tooltipClassName: '',
|
|
61
|
+
visible: false,
|
|
62
|
+
alignment: ALIGNMENT_LEFT
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export default Tooltip
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
.pltTooltipText {
|
|
3
|
+
@apply bg-white text-rich-black text-center p-2;
|
|
4
|
+
margin-top: -65px;
|
|
5
|
+
z-index: 20;
|
|
6
|
+
position: fixed;
|
|
7
|
+
visibility: hidden;
|
|
8
|
+
border-radius: 6px;
|
|
9
|
+
padding: 0.25rem;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
transition: opacity 0.3s;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.pltTooltipText::after {
|
|
15
|
+
content: "";
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 100%;
|
|
18
|
+
border-width: 5px;
|
|
19
|
+
border-style: solid;
|
|
20
|
+
border-color: white transparent transparent transparent;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.leftPltTooltip::after {
|
|
24
|
+
left: 5%;
|
|
25
|
+
margin-left: -5px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pltTooltipTextVisible {
|
|
29
|
+
visibility: visible;
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
@@ -68,3 +68,8 @@ export const OPACITY_20 = 20
|
|
|
68
68
|
export const OPACITY_30 = 30
|
|
69
69
|
export const OPACITY_60 = 60
|
|
70
70
|
export const OPACITY_100 = 100
|
|
71
|
+
|
|
72
|
+
export const ALIGNMENT_LEFT = 'left'
|
|
73
|
+
export const ALIGNMENT_RIGHT = 'rigth'
|
|
74
|
+
export const ALIGNMENT_CENTER = 'center'
|
|
75
|
+
export const ALIGNMENTS = [ALIGNMENT_LEFT, ALIGNMENT_CENTER, ALIGNMENT_RIGHT]
|
|
@@ -0,0 +1,110 @@
|
|
|
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 AllAppsIcon = ({ 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='M5 2L6.73205 3V5L5 6L3.26795 5V3L5 2Z' stroke='none' strokeLinejoin='round' />
|
|
28
|
+
<path d='M5 10L6.73205 11V13L5 14L3.26795 13V11L5 10Z' stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M8 6L9.73205 7V9L8 10L6.26795 9V7L8 6Z' stroke='none' strokeLinejoin='round' />
|
|
30
|
+
<path d='M2 6L3.73205 7V9L2 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<path d='M13.7319 6L11.9999 7V9L13.7319 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<path d='M11 2L12.7321 3V5L11 6L9.26795 5V3L11 2Z' stroke='none' strokeLinejoin='round' />
|
|
33
|
+
<path d='M11 10L12.7321 11V13L11 14L9.26795 13V11L11 10Z' stroke='none' strokeLinejoin='round' />
|
|
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='M7.5 3L10.0981 4.5V7.5L7.5 9L4.90192 7.5V4.5L7.5 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
<path d='M7.5 15L10.0981 16.5V19.5L7.5 21L4.90192 19.5V16.5L7.5 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M12 9L14.5981 10.5V13.5L12 15L9.40192 13.5V10.5L12 9Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
50
|
+
<path d='M3 9L5.59808 10.5V13.5L3 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M20.5977 9L17.9996 10.5V13.5L20.5977 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M16.5 3L19.0981 4.5V7.5L16.5 9L13.9019 7.5V4.5L16.5 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
53
|
+
<path d='M16.5 15L19.0981 16.5V19.5L16.5 21L13.9019 19.5V16.5L16.5 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
>
|
|
68
|
+
<path d='M12.5 5L16.8301 7.5V12.5L12.5 15L8.16987 12.5V7.5L12.5 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
69
|
+
<path d='M12.5 25L16.8301 27.5V32.5L12.5 35L8.16987 32.5V27.5L12.5 25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
70
|
+
<path d='M20 15L24.3301 17.5V22.5L20 25L15.6699 22.5V17.5L20 15Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M5 15L9.33013 17.5V22.5L5 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M34.3301 15L30 17.5V22.5L34.3301 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<path d='M27.5 5L31.8301 7.5V12.5L27.5 15L23.1699 12.5V7.5L27.5 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
74
|
+
<path d='M27.5 25L31.8301 27.5V32.5L27.5 35L23.1699 32.5V27.5L27.5 25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
75
|
+
</svg>
|
|
76
|
+
)
|
|
77
|
+
break
|
|
78
|
+
|
|
79
|
+
default:
|
|
80
|
+
break
|
|
81
|
+
}
|
|
82
|
+
return icon
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
AllAppsIcon.propTypes = {
|
|
86
|
+
/**
|
|
87
|
+
* color of text, icon and borders
|
|
88
|
+
*/
|
|
89
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
90
|
+
/**
|
|
91
|
+
* Size
|
|
92
|
+
*/
|
|
93
|
+
size: PropTypes.oneOf(SIZES),
|
|
94
|
+
/**
|
|
95
|
+
* disabled
|
|
96
|
+
*/
|
|
97
|
+
disabled: PropTypes.bool,
|
|
98
|
+
/**
|
|
99
|
+
* inactive
|
|
100
|
+
*/
|
|
101
|
+
inactive: PropTypes.bool
|
|
102
|
+
}
|
|
103
|
+
AllAppsIcon.defaultProps = {
|
|
104
|
+
color: MAIN_DARK_BLUE,
|
|
105
|
+
size: MEDIUM,
|
|
106
|
+
disabled: false,
|
|
107
|
+
inactive: false
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export default AllAppsIcon
|
|
@@ -0,0 +1,117 @@
|
|
|
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 AppConfigurationIcon = ({ 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
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M11 5.5V3C11 2.44772 10.5523 2 10 2H3C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H5.5' stroke='none' strokeLinecap='round' />
|
|
30
|
+
<path d='M2 4.25H11' stroke='none' />
|
|
31
|
+
<circle cx='3.125' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
32
|
+
<circle cx='4.25' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
33
|
+
<circle cx='5.375' cy='3.125' r='0.375' fill='none' className={filledClassName} />
|
|
34
|
+
<path d='M3.5 5.75H7.25' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M4.25 7.25H7.5' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M4.25 8.75H6' stroke='none' strokeLinecap='round' />
|
|
37
|
+
</svg>
|
|
38
|
+
)
|
|
39
|
+
break
|
|
40
|
+
case MEDIUM:
|
|
41
|
+
icon = (
|
|
42
|
+
<svg
|
|
43
|
+
width={24}
|
|
44
|
+
height={24}
|
|
45
|
+
viewBox='0 0 24 24'
|
|
46
|
+
fill='none'
|
|
47
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
48
|
+
className={className}
|
|
49
|
+
>
|
|
50
|
+
<path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
51
|
+
<path d='M27.5 13.75V6C27.5 5.44772 27.0523 5 26.5 5H6C5.44772 5 5 5.44772 5 6V26.5C5 27.0523 5.44772 27.5 6 27.5H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
52
|
+
<path d='M5 10.625H27.5' stroke='none' strokeWidth={2} />
|
|
53
|
+
<circle cx='7.8125' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
54
|
+
<circle cx='10.625' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='13.4375' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
|
|
56
|
+
<path d='M8.75 14.375H18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
57
|
+
<path d='M10.625 18.125H18.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
58
|
+
<path d='M10.625 21.875H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
59
|
+
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
case LARGE:
|
|
64
|
+
icon = (
|
|
65
|
+
<svg
|
|
66
|
+
width={40}
|
|
67
|
+
height={40}
|
|
68
|
+
viewBox='0 0 40 40'
|
|
69
|
+
fill='none'
|
|
70
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
71
|
+
className={className}
|
|
72
|
+
>
|
|
73
|
+
<path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='white' strokeWidth={2} strokeLinejoin='round' />
|
|
74
|
+
<path d='M27.5 13.75V6C27.5 5.44772 27.0523 5 26.5 5H6C5.44772 5 5 5.44772 5 6V26.5C5 27.0523 5.44772 27.5 6 27.5H13.75' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
75
|
+
<path d='M5 10.625H27.5' stroke='white' strokeWidth={2} />
|
|
76
|
+
<circle cx='7.8125' cy='7.8125' r='0.9375' fill='white' />
|
|
77
|
+
<circle cx='10.625' cy='7.8125' r='0.9375' fill='white' />
|
|
78
|
+
<circle cx='13.4375' cy='7.8125' r='0.9375' fill='white' />
|
|
79
|
+
<path d='M8.75 14.375H18.125' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
80
|
+
<path d='M10.625 18.125H18.75' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
81
|
+
<path d='M10.625 21.875H15' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
82
|
+
</svg>
|
|
83
|
+
)
|
|
84
|
+
break
|
|
85
|
+
|
|
86
|
+
default:
|
|
87
|
+
break
|
|
88
|
+
}
|
|
89
|
+
return icon
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
AppConfigurationIcon.propTypes = {
|
|
93
|
+
/**
|
|
94
|
+
* color of text, icon and borders
|
|
95
|
+
*/
|
|
96
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
97
|
+
/**
|
|
98
|
+
* Size
|
|
99
|
+
*/
|
|
100
|
+
size: PropTypes.oneOf(SIZES),
|
|
101
|
+
/**
|
|
102
|
+
* disabled
|
|
103
|
+
*/
|
|
104
|
+
disabled: PropTypes.bool,
|
|
105
|
+
/**
|
|
106
|
+
* inactive
|
|
107
|
+
*/
|
|
108
|
+
inactive: PropTypes.bool
|
|
109
|
+
}
|
|
110
|
+
AppConfigurationIcon.defaultProps = {
|
|
111
|
+
color: MAIN_DARK_BLUE,
|
|
112
|
+
size: MEDIUM,
|
|
113
|
+
disabled: false,
|
|
114
|
+
inactive: false
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export default AppConfigurationIcon
|
|
@@ -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 AppDetailsIcon = ({ 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='M10.6603 6V4.5L6.33013 2L2 4.5V9.5L5.33008 11.4226' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<circle cx='9.24675' cy='9.91667' r='2.91667' stroke='none' />
|
|
29
|
+
<path d='M13.3301 14L11.5801 12.25' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<path d='M15.9904 9V6.75L9.49519 3L3 6.75V14.25L7.99512 17.1339' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
44
|
+
<circle cx='13.8701' cy='14.875' r='4.375' stroke='none' strokeWidth={1.5} />
|
|
45
|
+
<path d='M19.9951 21L17.3701 18.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
|
|
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='M26.6506 15V11.25L15.8253 5L5 11.25V23.75L13.3252 28.5566' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<circle cx='23.1169' cy='24.7917' r='7.29167' stroke='none' strokeWidth={2} />
|
|
62
|
+
<path d='M33.3252 35L28.9502 30.625' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
break
|
|
70
|
+
}
|
|
71
|
+
return icon
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
AppDetailsIcon.propTypes = {
|
|
75
|
+
/**
|
|
76
|
+
* color of text, icon and borders
|
|
77
|
+
*/
|
|
78
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
79
|
+
/**
|
|
80
|
+
* Size
|
|
81
|
+
*/
|
|
82
|
+
size: PropTypes.oneOf(SIZES),
|
|
83
|
+
/**
|
|
84
|
+
* disabled
|
|
85
|
+
*/
|
|
86
|
+
disabled: PropTypes.bool,
|
|
87
|
+
/**
|
|
88
|
+
* inactive
|
|
89
|
+
*/
|
|
90
|
+
inactive: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
AppDetailsIcon.defaultProps = {
|
|
93
|
+
color: MAIN_DARK_BLUE,
|
|
94
|
+
size: MEDIUM,
|
|
95
|
+
disabled: false,
|
|
96
|
+
inactive: false
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default AppDetailsIcon
|
|
@@ -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 AppEditIcon = ({ 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='M10 4L6.33013 2L2 4.5V9.5L4 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<rect x='10.988' y='5.49731' width='2.11765' height='7.76471' transform='rotate(45 10.988 5.49731)' stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M6.99496 12.4852L5.49756 10.9878L4.74886 13.2339L6.99496 12.4852Z' stroke='none' strokeLinejoin='round' />
|
|
30
|
+
<path d='M11.7782 4.70711C12.1688 4.31658 12.8019 4.31658 13.1925 4.70711L13.2756 4.7903C13.6662 5.18082 13.6662 5.81399 13.2756 6.20451L12.4854 6.99481L10.9879 5.4974L11.7782 4.70711Z' stroke='none' />
|
|
31
|
+
|
|
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='M15 6L9.49519 3L3 6.75V14.25L6 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
<rect x='16.4819' y='8.24609' width='3.17647' height='11.6471' transform='rotate(45 16.4819 8.24609)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
47
|
+
<path d='M10.4922 18.728L8.24609 16.4819L7.12304 19.8511L10.4922 18.728Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
<path d='M18.0209 6.70711C18.4114 6.31658 19.0446 6.31658 19.4351 6.70711L20.267 7.539C20.6575 7.92952 20.6575 8.56269 20.267 8.95321L18.728 10.4922L16.4819 8.2461L18.0209 6.70711Z' stroke='none' strokeWidth={1.5} />
|
|
49
|
+
|
|
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='M25 10L15.8253 5L5 11.25V23.75L10 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<rect x='27.47' y='13.7434' width='5.29412' height='19.4118' transform='rotate(45 27.47 13.7434)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
65
|
+
<path d='M17.4872 31.2132L13.7437 27.4697L11.8719 33.085L17.4872 31.2132Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
66
|
+
<path d='M30.5063 10.7071C30.8968 10.3166 31.53 10.3166 31.9205 10.7071L34.2498 13.0364C34.6403 13.4269 34.6403 14.0601 34.2498 14.4506L31.2134 17.487L27.4699 13.7435L30.5063 10.7071Z' stroke='none' strokeWidth={2} />
|
|
67
|
+
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
AppEditIcon.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
|
+
AppEditIcon.defaultProps = {
|
|
97
|
+
color: MAIN_DARK_BLUE,
|
|
98
|
+
size: MEDIUM,
|
|
99
|
+
disabled: false,
|
|
100
|
+
inactive: false
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default AppEditIcon
|