@platformatic/ui-components 0.13.3 → 0.13.5
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-k0azWzu3.js +49 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/CacheRecommendationIcon.jsx +101 -0
- package/src/components/icons/RouteEditIcon.jsx +110 -0
- package/src/components/icons/RouteHistoryIcon.jsx +128 -0
- package/src/components/icons/RoutingIcon.jsx +104 -0
- package/src/components/icons/ScheduledJobsAppIcon.jsx +104 -0
- package/src/components/icons/index.js +91 -81
- package/dist/assets/index-BexnS8FK.js +0 -49
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-k0azWzu3.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,101 @@
|
|
|
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 CacheRecommendationIcon = ({
|
|
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='M12 4.04007C12 2.91337 9.76142 2 7 2C4.23858 2 2 2.91337 2 4.04007C2 4.83891 3.12531 5.5305 4.76442 5.86536' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M2 7.16504C2 7.98832 3.1955 8.69774 4.91667 9.0201' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M2 4.04004V10.145C2 10.9683 3.1955 11.6777 4.91667 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M10.1379 7.5C10.3586 8.3 11.7011 9.5 12.3447 10V13.25C12.3447 13.65 11.2413 13.9167 10.6896 14H8.2069C7.10348 14 7.01153 13.3333 7.10348 13C6.91958 12.9167 6.55177 12.7 6.55177 12.5C6.55177 12.3 6.73568 12.0833 6.82763 12C6.55177 12 6.00006 11.9 6.00006 11.5C6.00006 11.1 6.36787 10.8333 6.55177 10.75C6.36787 10.75 6.00006 10.6 6.00006 10C6.00006 9.4 6.55177 9.25 6.82763 9.25H9.03447L8.48276 7.25C8.39081 6.83333 8.37242 6 9.03447 6C9.86203 6 9.86203 6.5 10.1379 7.5Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M12.3449 9.75H14V13.75H12.3449V9.75Z' stroke='none' strokeLinecap='round' strokeLinejoin='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='M18.0002 6.0601C18.0002 4.37006 14.6424 3 10.5002 3C6.35811 3 3.00024 4.37006 3.00024 6.0601C3.00024 7.25836 4.68821 8.29576 7.14688 8.79804' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M3.00024 10.7471C3.00024 11.982 4.79349 13.0461 7.37524 13.5297' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M3.00024 6.05957V15.217C3.00024 16.4519 4.79349 17.516 7.37524 17.9996' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M15.2071 11.25C15.5381 12.45 17.5518 14.25 18.5173 15V19.875C18.5173 20.475 16.8622 20.875 16.0346 21H12.3106C10.6555 21 10.5175 20 10.6555 19.5C10.3796 19.375 9.8279 19.05 9.8279 18.75C9.8279 18.45 10.1038 18.125 10.2417 18C9.8279 18 9.00034 17.85 9.00034 17.25C9.00034 16.65 9.55205 16.25 9.8279 16.125C9.55205 16.125 9.00034 15.9 9.00034 15C9.00034 14.1 9.8279 13.875 10.2417 13.875H13.5519L12.7244 10.875C12.5865 10.25 12.5589 9 13.5519 9C14.7933 9 14.7933 9.75 15.2071 11.25Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M18.5175 14.625H21.0002V20.625H18.5175V14.625Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
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='M30.0002 10.1002C30.0002 7.28343 24.4038 5 17.5002 5C10.5967 5 5.00024 7.28343 5.00024 10.1002C5.00024 12.0973 7.81352 13.8263 11.9113 14.6634' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M5.00024 17.9121C5.00024 19.9703 7.98898 21.7439 12.2919 22.5498' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M5.00024 10.0996V25.3619C5.00024 27.4201 7.98898 29.1937 12.2919 29.9996' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
71
|
+
<path d='M25.345 18.75C25.8967 20.75 29.2529 23.75 30.8621 25V33.125C30.8621 34.125 28.1035 34.7917 26.7242 35H20.5175C17.7589 35 17.5291 33.3333 17.7589 32.5C17.2992 32.2917 16.3797 31.75 16.3797 31.25C16.3797 30.75 16.8394 30.2083 17.0693 30C16.3797 30 15.0004 29.75 15.0004 28.75C15.0004 27.75 15.9199 27.0833 16.3797 26.875C15.9199 26.875 15.0004 26.5 15.0004 25C15.0004 23.5 16.3797 23.125 17.0693 23.125H22.5864L21.2071 18.125C20.9773 17.0833 20.9313 15 22.5864 15C24.6553 15 24.6553 16.25 25.345 18.75Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M30.8624 24.375H35.0002V34.375H30.8624V24.375Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
</svg>
|
|
74
|
+
)
|
|
75
|
+
break
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
CacheRecommendationIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(SIZES),
|
|
91
|
+
/**
|
|
92
|
+
* disabled
|
|
93
|
+
*/
|
|
94
|
+
disabled: PropTypes.bool,
|
|
95
|
+
/**
|
|
96
|
+
* inactive
|
|
97
|
+
*/
|
|
98
|
+
inactive: PropTypes.bool
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export default CacheRecommendationIcon
|
|
@@ -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 RouteEditIcon = ({
|
|
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
|
+
<circle cx='3' cy='5' r='1' transform='rotate(90 3 5)' stroke='none' />
|
|
33
|
+
<circle cx='13' cy='3' r='1' transform='rotate(90 13 3)' stroke='none' />
|
|
34
|
+
<circle cx='13' cy='13' r='1' transform='rotate(90 13 13)' stroke='none' />
|
|
35
|
+
<path d='M12 3L10 3L7.5 3C6.94772 3 6.5 3.44772 6.5 4V4C6.5 4.55228 6.05228 5 5.5 5L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M12 13L9.87502 13M4.5 5L6.25002 5C7.07844 5 7.75002 5.67157 7.75002 6.5L7.75002 7.74998C7.75002 7.88806 7.63808 8 7.5 8V8L7.00001 8C6.17159 8 5.50001 7.32843 5.50001 6.5V6.5C5.50001 5.67157 4.82843 5 4 5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<rect x='11.5024' y='6.49741' width='2.11765' height='7.76471' transform='rotate(45 11.5024 6.49741)' stroke='none' strokeLinejoin='round' />
|
|
38
|
+
<path d='M7.50961 13.4853L6.01221 11.9879L5.26351 14.234L7.50961 13.4853Z' stroke='none' strokeLinejoin='round' />
|
|
39
|
+
<path d='M12.2929 5.70711C12.6834 5.31658 13.3166 5.31658 13.7071 5.70711L13.7903 5.7903C14.1808 6.18082 14.1808 6.81399 13.7903 7.20451L13 7.99481L11.5026 6.4974L12.2929 5.70711Z' stroke='none' />
|
|
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
|
+
<circle cx='4.5' cy='7.5' r='1.5' transform='rotate(90 4.5 7.5)' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='19.5' cy='4.5' r='1.5' transform='rotate(90 19.5 4.5)' stroke='none' strokeWidth={1.5} />
|
|
55
|
+
<circle cx='19.5' cy='19.5' r='1.5' transform='rotate(90 19.5 19.5)' stroke='none' strokeWidth={1.5} />
|
|
56
|
+
<path d='M18 4.5L15 4.5L10.75 4.5C10.1977 4.5 9.75 4.94772 9.75 5.5L9.75 6.5C9.75 7.05228 9.30228 7.5 8.75 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M18 19.5L14.8125 19.5M6.75 7.5L9.62502 7.5C10.7296 7.5 11.625 8.39543 11.625 9.5L11.625 11.625C11.625 11.8321 11.4571 12 11.25 12V12L10.25 12C9.14545 12 8.25002 11.1046 8.25001 10L8.25001 9.49999C8.25001 8.39543 7.35458 7.5 6.25002 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<rect x='17.2539' y='9.74609' width='3.17647' height='11.6471' transform='rotate(45 17.2539 9.74609)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
59
|
+
<path d='M11.2642 20.2279L9.01807 17.9818L7.89501 21.351L11.2642 20.2279Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
60
|
+
<path d='M18.7929 8.20711C19.1834 7.81658 19.8166 7.81658 20.2071 8.20711L21.039 9.039C21.4295 9.42952 21.4295 10.0627 21.039 10.4532L19.5 11.9922L17.2539 9.7461L18.7929 8.20711Z' stroke='none' strokeWidth={1.5} />
|
|
61
|
+
</svg>
|
|
62
|
+
)
|
|
63
|
+
break
|
|
64
|
+
case LARGE:
|
|
65
|
+
icon = (
|
|
66
|
+
<svg
|
|
67
|
+
width={40}
|
|
68
|
+
height={40}
|
|
69
|
+
viewBox='0 0 40 40'
|
|
70
|
+
fill='none'
|
|
71
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
72
|
+
className={className}
|
|
73
|
+
>
|
|
74
|
+
<circle cx='7.5' cy='12.5' r='2.5' transform='rotate(90 7.5 12.5)' stroke='none' strokeWidth={2} />
|
|
75
|
+
<circle cx='32.5' cy='7.5' r='2.5' transform='rotate(90 32.5 7.5)' stroke='none' strokeWidth={2} />
|
|
76
|
+
<circle cx='32.5' cy='32.5' r='2.5' transform='rotate(90 32.5 32.5)' stroke='none' strokeWidth={2} />
|
|
77
|
+
<path d='M30 7.5L25 7.5L17.25 7.5C16.6977 7.5 16.25 7.94772 16.25 8.5L16.25 11.5C16.25 12.0523 15.8023 12.5 15.25 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
78
|
+
<path d='M30 32.5L24.6875 32.5M11.25 12.5L17.375 12.5C18.4796 12.5 19.375 13.3954 19.375 14.5L19.375 19.375C19.375 19.7202 19.0952 20 18.75 20V20L15.75 20C14.6455 20 13.75 19.1046 13.75 18L13.75 14.5C13.75 13.3954 12.8546 12.5 11.75 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<rect x='28.7563' y='16.2435' width='5.29412' height='19.4118' transform='rotate(45 28.7563 16.2435)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
80
|
+
<path d='M18.7738 33.7132L15.0303 29.9697L13.1585 35.585L18.7738 33.7132Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
81
|
+
<path d='M31.7929 13.2071C32.1834 12.8166 32.8166 12.8166 33.2071 13.2071L35.5364 15.5364C35.9269 15.9269 35.9269 16.5601 35.5364 16.9506L32.5 19.987L28.7565 16.2435L31.7929 13.2071Z' stroke='none' strokeWidth={2} />
|
|
82
|
+
</svg>
|
|
83
|
+
)
|
|
84
|
+
break
|
|
85
|
+
default:
|
|
86
|
+
break
|
|
87
|
+
}
|
|
88
|
+
return icon
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
RouteEditIcon.propTypes = {
|
|
92
|
+
/**
|
|
93
|
+
* color of text, icon and borders
|
|
94
|
+
*/
|
|
95
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
96
|
+
/**
|
|
97
|
+
* Size
|
|
98
|
+
*/
|
|
99
|
+
size: PropTypes.oneOf(SIZES),
|
|
100
|
+
/**
|
|
101
|
+
* disabled
|
|
102
|
+
*/
|
|
103
|
+
disabled: PropTypes.bool,
|
|
104
|
+
/**
|
|
105
|
+
* inactive
|
|
106
|
+
*/
|
|
107
|
+
inactive: PropTypes.bool
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export default RouteEditIcon
|
|
@@ -0,0 +1,128 @@
|
|
|
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 RouteHistoryIcon = ({
|
|
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
|
+
<rect x='6' y='7.33334' width='8' height='6.66667' rx='1' stroke='none' />
|
|
33
|
+
<path d='M6 9.33334H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<line x1='7.5' y1='8.16666' x2='7.5' y2='6.49999' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<line x1='12.1665' y1='8.16666' x2='12.1665' y2='6.49999' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<rect x='7.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
37
|
+
<rect x='7.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
38
|
+
<rect x='9.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
39
|
+
<rect x='11.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
40
|
+
<rect x='9.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
41
|
+
<rect x='11.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
|
|
42
|
+
<circle cx='3' cy='5' r='1' transform='rotate(90 3 5)' stroke='none' />
|
|
43
|
+
<circle cx='13' cy='3' r='1' transform='rotate(90 13 3)' stroke='none' />
|
|
44
|
+
<path d='M12 3L10 3L7.5 3C6.94772 3 6.5 3.44772 6.5 4V4C6.5 4.55228 6.05228 5 5.5 5L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<path d='M10 6.5V6.5C10 5.67157 9.32843 5 8.5 5L4.5 5M5 8L5 6C5 5.44771 4.55229 5 4 5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
</svg>
|
|
47
|
+
)
|
|
48
|
+
break
|
|
49
|
+
case MEDIUM:
|
|
50
|
+
icon = (
|
|
51
|
+
<svg
|
|
52
|
+
width={24}
|
|
53
|
+
height={24}
|
|
54
|
+
viewBox='0 0 24 24'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
className={className}
|
|
58
|
+
>
|
|
59
|
+
<rect x='9' y='11' width='12' height='10' rx='1' stroke='none' strokeWidth={1.5} />
|
|
60
|
+
<path d='M9 14H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<line x1='11.25' y1='12.25' x2='11.25' y2='9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
62
|
+
<line x1='18.25' y1='12.25' x2='18.25' y2='9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
63
|
+
<rect x='11' y='15' width='2' height='2' rx='0.5' fill='none' />
|
|
64
|
+
<rect x='11' y='18' width='2' height='2' rx='0.5' fill='none' />
|
|
65
|
+
<rect x='14' y='15' width='2' height='2' rx='0.5' fill='none' />
|
|
66
|
+
<rect x='17' y='15' width='2' height='2' rx='0.5' fill='none' />
|
|
67
|
+
<rect x='14' y='18' width='2' height='2' rx='0.5' fill='none' />
|
|
68
|
+
<rect x='17' y='18' width='2' height='2' rx='0.5' fill='none' />
|
|
69
|
+
<circle cx='4.5' cy='7.5' r='1.5' transform='rotate(90 4.5 7.5)' stroke='none' strokeWidth={1.5} />
|
|
70
|
+
<circle cx='19.5' cy='4.5' r='1.5' transform='rotate(90 19.5 4.5)' stroke='none' strokeWidth={1.5} />
|
|
71
|
+
<path d='M18 4.5L15 4.5L10.75 4.5C10.1977 4.5 9.75 4.94772 9.75 5.5L9.75 6.5C9.75 7.05228 9.30228 7.5 8.75 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M15 9.75L15 9.5C15 8.39543 14.1046 7.5 13 7.5L6.75 7.5M7.5 12L7.5 9C7.5 8.17157 6.82843 7.49999 6 7.49999V7.49999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
</svg>
|
|
74
|
+
)
|
|
75
|
+
break
|
|
76
|
+
case LARGE:
|
|
77
|
+
icon = (
|
|
78
|
+
<svg
|
|
79
|
+
width={40}
|
|
80
|
+
height={40}
|
|
81
|
+
viewBox='0 0 40 40'
|
|
82
|
+
fill='none'
|
|
83
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
84
|
+
className={className}
|
|
85
|
+
>
|
|
86
|
+
<rect x='15' y='18.3333' width='20' height='16.6667' rx='1' stroke='none' strokeWidth={2} />
|
|
87
|
+
<path d='M15 23.3333H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
88
|
+
<line x1='19' y1='20.6667' x2='19' y2='16' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
89
|
+
<line x1='30.6665' y1='20.6667' x2='30.6665' y2='16' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
90
|
+
<rect x='18.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
91
|
+
<rect x='18.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
92
|
+
<rect x='23.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
93
|
+
<rect x='28.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
94
|
+
<rect x='23.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
95
|
+
<rect x='28.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
|
|
96
|
+
<circle cx='7.5' cy='12.5' r='2.5' transform='rotate(90 7.5 12.5)' stroke='none' strokeWidth={2} />
|
|
97
|
+
<circle cx='32.5' cy='7.5' r='2.5' transform='rotate(90 32.5 7.5)' stroke='none' strokeWidth={2} />
|
|
98
|
+
<path d='M30 7.5L25 7.5L17.25 7.5C16.6977 7.5 16.25 7.94772 16.25 8.5L16.25 11.5C16.25 12.0523 15.8023 12.5 15.25 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
99
|
+
<path d='M25 16.25L25 14.5C25 13.3954 24.1046 12.5 23 12.5L11.25 12.5M12.5 20L12.5 14.5C12.5 13.3954 11.6046 12.5 10.5 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
100
|
+
</svg>
|
|
101
|
+
)
|
|
102
|
+
break
|
|
103
|
+
default:
|
|
104
|
+
break
|
|
105
|
+
}
|
|
106
|
+
return icon
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
RouteHistoryIcon.propTypes = {
|
|
110
|
+
/**
|
|
111
|
+
* color of text, icon and borders
|
|
112
|
+
*/
|
|
113
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
114
|
+
/**
|
|
115
|
+
* Size
|
|
116
|
+
*/
|
|
117
|
+
size: PropTypes.oneOf(SIZES),
|
|
118
|
+
/**
|
|
119
|
+
* disabled
|
|
120
|
+
*/
|
|
121
|
+
disabled: PropTypes.bool,
|
|
122
|
+
/**
|
|
123
|
+
* inactive
|
|
124
|
+
*/
|
|
125
|
+
inactive: PropTypes.bool
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export default RouteHistoryIcon
|
|
@@ -0,0 +1,104 @@
|
|
|
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 RoutingIcon = ({
|
|
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
|
+
<circle cx='3' cy='5' r='1' transform='rotate(90 3 5)' stroke='none' />
|
|
33
|
+
<circle cx='13' cy='3' r='1' transform='rotate(90 13 3)' stroke='none' />
|
|
34
|
+
<circle cx='13' cy='8' r='1' transform='rotate(90 13 8)' stroke='none' />
|
|
35
|
+
<circle cx='13' cy='13' r='1' transform='rotate(90 13 13)' stroke='none' />
|
|
36
|
+
<path d='M12 3L10 3L7.5 3C6.94772 3 6.5 3.44772 6.5 4V4C6.5 4.55228 6.05228 5 5.5 5L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M12 13L9.75002 13C8.64545 13 7.75002 12.1046 7.75002 11L7.75002 7C7.75002 5.89543 6.85459 5 5.75002 5L4.5 5M12 8L7.00001 8C6.17158 8 5.50001 7.32843 5.50001 6.5V6.5C5.50001 5.67157 4.82843 5 4 5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<circle cx='4.5' cy='7.5' r='1.5' transform='rotate(90 4.5 7.5)' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<circle cx='19.5' cy='4.5' r='1.5' transform='rotate(90 19.5 4.5)' stroke='none' strokeWidth={1.5} />
|
|
53
|
+
<circle cx='19.5' cy='12' r='1.5' transform='rotate(90 19.5 12)' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='19.5' cy='19.5' r='1.5' transform='rotate(90 19.5 19.5)' stroke='none' strokeWidth={1.5} />
|
|
55
|
+
<path d='M18 4.5L15 4.5L10.75 4.5C10.1977 4.5 9.75 4.94772 9.75 5.5L9.75 6.5C9.75 7.05228 9.30228 7.5 8.75 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M18 19.5L13.625 19.5C12.5205 19.5 11.625 18.6046 11.625 17.5L11.625 9.5C11.625 8.39543 10.7296 7.5 9.62503 7.5L6.75 7.5M18 12L10.25 12C9.14545 12 8.25002 11.1046 8.25001 10L8.25001 9.49999C8.25001 8.39543 7.35458 7.5 6.25002 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
</svg>
|
|
58
|
+
)
|
|
59
|
+
break
|
|
60
|
+
case LARGE:
|
|
61
|
+
icon = (
|
|
62
|
+
<svg
|
|
63
|
+
width={40}
|
|
64
|
+
height={40}
|
|
65
|
+
viewBox='0 0 40 40'
|
|
66
|
+
fill='none'
|
|
67
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
68
|
+
className={className}
|
|
69
|
+
>
|
|
70
|
+
<circle cx='7.5' cy='12.5' r='2.5' transform='rotate(90 7.5 12.5)' stroke='none' strokeWidth={2} />
|
|
71
|
+
<circle cx='32.5' cy='7.5' r='2.5' transform='rotate(90 32.5 7.5)' stroke='none' strokeWidth={2} />
|
|
72
|
+
<circle cx='32.5' cy='20' r='2.5' transform='rotate(90 32.5 20)' stroke='none' strokeWidth={2} />
|
|
73
|
+
<circle cx='32.5' cy='32.5' r='2.5' transform='rotate(90 32.5 32.5)' stroke='none' strokeWidth={2} />
|
|
74
|
+
<path d='M30 7.5L25 7.5L18.25 7.5C17.1454 7.5 16.25 8.39543 16.25 9.5L16.25 10.5C16.25 11.6046 15.3546 12.5 14.25 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
75
|
+
<path d='M30 32.5L21.3751 32.5C20.2705 32.5 19.3751 31.6046 19.3751 30.5L19.375 14.5C19.375 13.3954 18.4796 12.5 17.375 12.5L11.25 12.5M30 20L15.75 20C14.6455 20 13.75 19.1046 13.75 18L13.75 14.5C13.75 13.3954 12.8546 12.5 11.75 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
</svg>
|
|
77
|
+
)
|
|
78
|
+
break
|
|
79
|
+
default:
|
|
80
|
+
break
|
|
81
|
+
}
|
|
82
|
+
return icon
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
RoutingIcon.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
|
+
|
|
104
|
+
export default RoutingIcon
|
|
@@ -0,0 +1,104 @@
|
|
|
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 ScheduledJobsAppIcon = ({
|
|
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 8.5L10.5 6.75L7 8.5M14 8.5V12.25L10.5 14M14 8.5L10.5 10.25M10.5 14L7 12.25V8.5M10.5 14V10.25M7 8.5L10.5 10.25' stroke='white' strokeLinejoin='round' />
|
|
33
|
+
<path d='M5.79744 11C3.70017 11 2 9.2952 2 7.19227C2 5.08934 3.70017 3.38458 5.79744 3.38458C7.40205 3.38458 8.77421 4.3825 9.33032 5.79316' stroke='white' strokeLinecap='round' />
|
|
34
|
+
<path d='M5.79739 3.38462V2M4.4165 2H7.17828' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M8.73792 4.27069L9.23166 3.78676M8.74902 3.29169L9.71429 4.28182' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M3.00073 4.32292L2.52032 3.82567M2.02441 4.30737L3.01623 3.34397' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M7.00592 5.46146L5.79758 7.53839' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<path d='M21 12.75L15.75 10.125L10.5 12.75M21 12.75V18.375L15.75 21M21 12.75L15.75 15.375M15.75 21L10.5 18.375V12.75M15.75 21V15.375M10.5 12.75L15.75 15.375' stroke='white' strokeWidth={1.5} strokeLinejoin='round' />
|
|
52
|
+
<path d='M8.69616 16.5C5.55026 16.5 3 13.9428 3 10.7884C3 7.63405 5.55026 5.0769 8.69616 5.0769C11.1031 5.0769 13.1613 6.57378 13.9955 8.68977' stroke='white' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<path d='M8.69584 5.07692V3M6.62451 3H10.7672' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M13.1064 6.40601L13.847 5.6801M13.123 4.9375L14.571 6.42271' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M4.50109 6.48444L3.78048 5.73857M3.03662 6.46112L4.52434 5.01602' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M10.5086 8.19219L8.69612 11.3076' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
</svg>
|
|
58
|
+
)
|
|
59
|
+
break
|
|
60
|
+
case LARGE:
|
|
61
|
+
icon = (
|
|
62
|
+
<svg
|
|
63
|
+
width={40}
|
|
64
|
+
height={40}
|
|
65
|
+
viewBox='0 0 40 40'
|
|
66
|
+
fill='none'
|
|
67
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
68
|
+
className={className}
|
|
69
|
+
>
|
|
70
|
+
<path d='M35 21.25L26.25 16.875L17.5 21.25M35 21.25V30.625L26.25 35M35 21.25L26.25 25.625M26.25 35L17.5 30.625V21.25M26.25 35V25.625M17.5 21.25L26.25 25.625' stroke='white' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M14.4936 27.4999C9.25043 27.4999 5 23.238 5 17.9807C5 12.7234 9.25043 8.46149 14.4936 8.46149C18.5051 8.46149 21.9355 10.9563 23.3258 14.4829' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
72
|
+
<path d='M14.4932 8.46154V5M11.041 5H17.9454' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<path d='M21.8443 10.6766L23.0787 9.4668M21.8721 8.22913L24.2852 10.7045' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
74
|
+
<path d='M7.50181 10.8074L6.3008 9.56424M5.06104 10.7685L7.54057 8.35999' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
75
|
+
<path d='M17.5146 13.6537L14.4937 18.846' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
</svg>
|
|
77
|
+
)
|
|
78
|
+
break
|
|
79
|
+
default:
|
|
80
|
+
break
|
|
81
|
+
}
|
|
82
|
+
return icon
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ScheduledJobsAppIcon.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
|
+
|
|
104
|
+
export default ScheduledJobsAppIcon
|