@platformatic/ui-components 0.13.4 → 0.15.0
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-DjGoNdUR.js +49 -0
- package/dist/index.html +1 -1
- package/index.d.ts +159 -0
- package/package.json +7 -3
- package/src/components/Checkbox.module.css +7 -7
- package/src/components/SplashScreen.jsx +14 -11
- 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/index.js +8 -0
- package/src/stories/Checkbox.stories.jsx +6 -0
- package/test-d/index.test-d.ts +86 -0
- package/tsconfig.json +16 -0
- package/dist/assets/index-CvMjKwW6.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-DjGoNdUR.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
|
|
3
|
+
declare module "@platformatic/ui-components" {
|
|
4
|
+
export interface VerticalSeparatorProps {
|
|
5
|
+
color?: string;
|
|
6
|
+
backgroundColorOpacity?: string;
|
|
7
|
+
classes?: string;
|
|
8
|
+
height?: string;
|
|
9
|
+
width?: string;
|
|
10
|
+
marginLeft?: string;
|
|
11
|
+
marginRight?: string;
|
|
12
|
+
}
|
|
13
|
+
export const Checkbox: ComponentType<any>;
|
|
14
|
+
export const BorderedBox: ComponentType<any>;
|
|
15
|
+
export const Button: ComponentType<any>;
|
|
16
|
+
export const HorizontalSeparator: ComponentType<any>;
|
|
17
|
+
export const LoadingSpinnerV2: ComponentType<any>;
|
|
18
|
+
export const Tooltip: ComponentType<any>;
|
|
19
|
+
export const VerticalSeparator: ComponentType<VerticalSeparatorProps>;
|
|
20
|
+
export const TooltipAbsolute: ComponentType<any>;
|
|
21
|
+
|
|
22
|
+
export interface PlatformaticIconProps {
|
|
23
|
+
iconName: string;
|
|
24
|
+
color?: string;
|
|
25
|
+
size?: string;
|
|
26
|
+
onClick?: (() => void) | null;
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
inactive?: boolean;
|
|
29
|
+
className?: string;
|
|
30
|
+
internalOverHandling?: boolean;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface CopyAndPasteProps {
|
|
34
|
+
value: unknown;
|
|
35
|
+
tooltipLabel?: string;
|
|
36
|
+
color?: string;
|
|
37
|
+
size?: string;
|
|
38
|
+
tooltipClassName?: string;
|
|
39
|
+
position?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export interface IconsType {
|
|
43
|
+
CircleStopIcon: ComponentType<any>;
|
|
44
|
+
RunningIcon: ComponentType<any>;
|
|
45
|
+
[key: string]: string | ComponentType<any>;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export const PlatformaticIcon: ComponentType<PlatformaticIconProps>;
|
|
49
|
+
export const CopyAndPaste: ComponentType<CopyAndPasteProps>;
|
|
50
|
+
export const Icons: IconsType;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
declare module "@platformatic/ui-components/src/components/icons" {
|
|
54
|
+
interface IconProps {
|
|
55
|
+
size?: string;
|
|
56
|
+
color?: string;
|
|
57
|
+
addImportantToColor?: boolean;
|
|
58
|
+
className?: string;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const Icons: {
|
|
62
|
+
AlertIcon: ComponentType<IconProps>;
|
|
63
|
+
ArrowUpIcon: ComponentType<IconProps>;
|
|
64
|
+
ArrowDownIcon: ComponentType<IconProps>;
|
|
65
|
+
CircleCheckMarkIcon: ComponentType<IconProps>;
|
|
66
|
+
CLIIcon: ComponentType<IconProps>;
|
|
67
|
+
[key: string]: ComponentType<IconProps>;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export default Icons;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
declare module "@platformatic/ui-components/src/components/constants" {
|
|
74
|
+
export const WHITE: string;
|
|
75
|
+
export const SMALL: string;
|
|
76
|
+
export const POSITION_END: string;
|
|
77
|
+
export const RICH_BLACK: string;
|
|
78
|
+
export const BLACK_RUSSIAN: string;
|
|
79
|
+
export const TRANSPARENT: string;
|
|
80
|
+
export const MARGIN_0: string;
|
|
81
|
+
export const OPACITY_15: string;
|
|
82
|
+
export const OPACITY_30: string;
|
|
83
|
+
export const OPACITY_100: string;
|
|
84
|
+
export const WARNING_YELLOW: string;
|
|
85
|
+
export const ANTI_FLASH_WHITE: string;
|
|
86
|
+
export const DULLS_BACKGROUND_COLOR: string;
|
|
87
|
+
export const ERROR_RED: string;
|
|
88
|
+
export const LARGE: string;
|
|
89
|
+
export const MEDIUM: string;
|
|
90
|
+
export const MAIN_GREEN: string;
|
|
91
|
+
export const BOX_SHADOW: string;
|
|
92
|
+
export const UNDERLINE: string;
|
|
93
|
+
export const MAIN_DARK_BLUE: string;
|
|
94
|
+
export const DIRECTION_RIGHT: string;
|
|
95
|
+
export const POSITION_CENTER: string;
|
|
96
|
+
export const TINY: string;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
declare module "@platformatic/ui-components/src/components/forms" {
|
|
100
|
+
interface ToggleSwitchProps {
|
|
101
|
+
label?: string;
|
|
102
|
+
labelClassName?: string;
|
|
103
|
+
name: string;
|
|
104
|
+
onChange: () => void;
|
|
105
|
+
checked: boolean;
|
|
106
|
+
size?: string;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
interface InputProps {
|
|
110
|
+
label?: string;
|
|
111
|
+
placeholder?: string;
|
|
112
|
+
value: string;
|
|
113
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
114
|
+
name: string;
|
|
115
|
+
type?: string;
|
|
116
|
+
error?: string;
|
|
117
|
+
className?: string;
|
|
118
|
+
disabled?: boolean;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
interface SelectProps {
|
|
122
|
+
label?: string;
|
|
123
|
+
options: Array<{ label: string; value: string }>;
|
|
124
|
+
value: string;
|
|
125
|
+
onChange: (value: string) => void;
|
|
126
|
+
name: string;
|
|
127
|
+
placeholder?: string;
|
|
128
|
+
error?: string;
|
|
129
|
+
className?: string;
|
|
130
|
+
disabled?: boolean;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
interface CheckboxProps {
|
|
134
|
+
label: string;
|
|
135
|
+
checked: boolean;
|
|
136
|
+
onChange: () => void;
|
|
137
|
+
name: string;
|
|
138
|
+
disabled?: boolean;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
interface RadioButtonProps {
|
|
142
|
+
label: string;
|
|
143
|
+
value: string;
|
|
144
|
+
checked: boolean;
|
|
145
|
+
onChange: () => void;
|
|
146
|
+
name: string;
|
|
147
|
+
disabled?: boolean;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
const Forms: {
|
|
151
|
+
ToggleSwitch: ComponentType<ToggleSwitchProps>;
|
|
152
|
+
Input: ComponentType<InputProps>;
|
|
153
|
+
Select: ComponentType<SelectProps>;
|
|
154
|
+
Checkbox: ComponentType<CheckboxProps>;
|
|
155
|
+
RadioButton: ComponentType<RadioButtonProps>;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
export default Forms;
|
|
159
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@platformatic/ui-components",
|
|
3
3
|
"description": "Platformatic UI Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.15.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css",
|
|
19
19
|
"lint": "standard src | snazzy",
|
|
20
20
|
"lint:fix": "standard src --fix",
|
|
21
|
-
"test": "vitest run",
|
|
21
|
+
"test": "tsd && vitest run",
|
|
22
22
|
"prepare": "rm -Rf dist; npm run build; npm run tailwind"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"standard": "^17.0.0",
|
|
54
54
|
"storybook": "^8.0.8",
|
|
55
55
|
"tailwindcss": "^3.1.8",
|
|
56
|
+
"tsd": "^0.31.2",
|
|
56
57
|
"vite": "^5.0.0",
|
|
57
58
|
"vitest": "^3.0.0"
|
|
58
59
|
},
|
|
@@ -69,5 +70,8 @@
|
|
|
69
70
|
"pre-commit": [
|
|
70
71
|
"lint",
|
|
71
72
|
"test"
|
|
72
|
-
]
|
|
73
|
+
],
|
|
74
|
+
"tsd": {
|
|
75
|
+
"directory": "test-d"
|
|
76
|
+
}
|
|
73
77
|
}
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
.checkbox--medium.checkbox--main-dark-blue:checked:after,
|
|
28
28
|
.checkbox--medium.checkbox--rich-black:checked:after {
|
|
29
29
|
@apply absolute h-full w-full;
|
|
30
|
-
top:
|
|
31
|
-
left:
|
|
30
|
+
top: -4px;
|
|
31
|
+
left: 1px;
|
|
32
32
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%204L5%208L12%201%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
|
|
33
33
|
}
|
|
34
34
|
.checkbox--small.checkbox--main-dark-blue:checked:after,
|
|
35
35
|
.checkbox--small.checkbox--rich-black:checked:after {
|
|
36
36
|
@apply absolute h-full w-full;
|
|
37
|
-
top:
|
|
38
|
-
left:
|
|
37
|
+
top: -4px;
|
|
38
|
+
left: 2px;
|
|
39
39
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
|
|
40
40
|
}
|
|
41
41
|
.disabled {
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
}
|
|
51
51
|
.checkbox--medium.checkbox--white:checked:after {
|
|
52
52
|
@apply absolute h-full w-full;
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
53
|
+
top: -4px;
|
|
54
|
+
left: 2px;
|
|
55
55
|
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke%3D%22%2300050B%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.checkbox--small.checkbox--white:checked:after {
|
|
59
59
|
@apply absolute h-full w-full;
|
|
60
|
-
top: -
|
|
60
|
+
top: -7px;
|
|
61
61
|
left: 0px;
|
|
62
62
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22%2300050B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
|
|
63
63
|
}
|
|
@@ -12,7 +12,8 @@ export default function SplashScreen (props) {
|
|
|
12
12
|
title = 'Operation completed',
|
|
13
13
|
blur = false,
|
|
14
14
|
children,
|
|
15
|
-
onDestroyed = () => {}
|
|
15
|
+
onDestroyed = () => {},
|
|
16
|
+
showDismissButton = true
|
|
16
17
|
} = props
|
|
17
18
|
|
|
18
19
|
const [destroyed, setDestroyed] = useState(false)
|
|
@@ -49,16 +50,18 @@ export default function SplashScreen (props) {
|
|
|
49
50
|
{children}
|
|
50
51
|
</div>
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
{showDismissButton && (
|
|
54
|
+
<div className={styles.button}>
|
|
55
|
+
<Button
|
|
56
|
+
color={RICH_BLACK}
|
|
57
|
+
backgroundColor={WHITE}
|
|
58
|
+
onClick={() => setDestroyed(true)}
|
|
59
|
+
label='Dismiss'
|
|
60
|
+
paddingClass={styles.buttonPadding}
|
|
61
|
+
textClass={styles.buttonText}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
62
65
|
</div>
|
|
63
66
|
</div>
|
|
64
67
|
)
|
|
@@ -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
|