@platformatic/ui-components 0.5.1 → 0.6.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/.nvmrc +1 -1
- package/dist/assets/index-CeMo0DvI.css +1 -0
- package/dist/assets/index-DIt4e34R.js +40 -0
- package/dist/index.html +2 -2
- package/dist/main.css +6 -0
- package/package.json +3 -4
- package/src/components/Loadable.jsx +2 -2
- package/src/components/Loadable.module.css +1 -1
- package/src/components/LoadingSpinner.jsx +2 -2
- package/src/components/LoadingSpinnerV2.jsx +10 -5
- package/src/components/icons/EntrypointIcon.jsx +14 -3
- package/src/components/icons/ExpandIcon.jsx +15 -3
- package/src/components/icons/Icons.module.css +56 -0
- package/src/components/icons/InfrastructureIcon.jsx +118 -0
- package/src/components/icons/InternetIcon.jsx +117 -0
- package/src/components/icons/NotCompliantServiceIcon.jsx +15 -3
- package/src/components/icons/OutdatedServiceIcon.jsx +15 -3
- package/src/components/icons/TaxonomyIcon.jsx +126 -0
- package/src/components/icons/index.js +6 -0
- package/src/components/loaders/SpinnerCircular.jsx +52 -0
- package/src/components/loaders/SpinnerCircular.module.css +34 -0
- package/src/stories/LoadingSpinner.stories.jsx +11 -8
- package/dist/assets/index-Of0we_2v.css +0 -1
- package/dist/assets/index-hLMQmMDJ.js +0 -40
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-DIt4e34R.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -768,6 +768,12 @@ video {
|
|
|
768
768
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
769
769
|
}
|
|
770
770
|
|
|
771
|
+
.ring {
|
|
772
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
773
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
774
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
775
|
+
}
|
|
776
|
+
|
|
771
777
|
.blur {
|
|
772
778
|
--tw-blur: blur(8px);
|
|
773
779
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
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.6.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -27,8 +27,7 @@
|
|
|
27
27
|
"postcss": "^8.4.17",
|
|
28
28
|
"react": "^18.2.0",
|
|
29
29
|
"react-dom": "^18.2.0",
|
|
30
|
-
"react-tooltip": "^4.5.1"
|
|
31
|
-
"spinners-react": "^1.0.7"
|
|
30
|
+
"react-tooltip": "^4.5.1"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
33
|
"@babel/core": "^7.19.3",
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
"@storybook/react": "^8.0.8",
|
|
42
41
|
"@storybook/react-vite": "^8.0.8",
|
|
43
42
|
"@testing-library/jest-dom": "^6.0.0",
|
|
44
|
-
"@testing-library/react": "^
|
|
43
|
+
"@testing-library/react": "^16.0.0",
|
|
45
44
|
"@types/react": "^18.0.17",
|
|
46
45
|
"@types/react-dom": "^18.0.6",
|
|
47
46
|
"@vitejs/plugin-react": "^4.0.0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState, cloneElement, Children } from 'react'
|
|
2
2
|
import styles from './Loadable.module.css'
|
|
3
|
-
import
|
|
3
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
4
4
|
|
|
5
5
|
export default function Loadable ({ ...props }) {
|
|
6
6
|
// If null then loading not started, if true then loading, if false then done loading
|
|
@@ -22,7 +22,7 @@ export default function Loadable ({ ...props }) {
|
|
|
22
22
|
? (
|
|
23
23
|
<>
|
|
24
24
|
<div data-testid='loadable-content' className={styles.relative}>
|
|
25
|
-
<SpinnerCircular className={styles.spinner}
|
|
25
|
+
<SpinnerCircular className={styles.spinner} size={60} />
|
|
26
26
|
<div className={styles.blurred}>{children}</div>
|
|
27
27
|
</div>
|
|
28
28
|
</>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './LoadingSpinner.module.css'
|
|
4
|
-
import
|
|
4
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
5
5
|
|
|
6
6
|
function LoadingSpinner ({ loading = false }) {
|
|
7
7
|
// If null then loading not started, if true then loading, if false then done loading
|
|
@@ -9,7 +9,7 @@ function LoadingSpinner ({ loading = false }) {
|
|
|
9
9
|
? (
|
|
10
10
|
<div className={styles.container} data-testid='loading-spinner'>
|
|
11
11
|
<div data-testid='loading-spinner-content' className={styles.relative}>
|
|
12
|
-
<SpinnerCircular className={styles.spinner}
|
|
12
|
+
<SpinnerCircular className={styles.spinner} size={60} />
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
15
|
)
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './LoadingSpinnerV2.module.css'
|
|
5
|
-
import
|
|
5
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
6
6
|
|
|
7
7
|
function LoadingSpinnerV2 ({
|
|
8
8
|
loading = false,
|
|
9
9
|
applySentences = {},
|
|
10
|
-
|
|
10
|
+
spinnerProps = {},
|
|
11
11
|
containerClassName = ''
|
|
12
12
|
}) {
|
|
13
13
|
const defaultContainerClassName = containerClassName || `${styles.container}`
|
|
@@ -16,7 +16,7 @@ function LoadingSpinnerV2 ({
|
|
|
16
16
|
? (
|
|
17
17
|
<div className={defaultContainerClassName} data-testid='loading-spinner'>
|
|
18
18
|
<div className={styles.content}>
|
|
19
|
-
<SpinnerCircular
|
|
19
|
+
<SpinnerCircular {...spinnerProps} />
|
|
20
20
|
{applySentences?.sentences.length > 0 && (
|
|
21
21
|
<div className={applySentences.containerClassName}>
|
|
22
22
|
{applySentences.sentences.map((sentence, index) => (<p key={index} className={sentence.style}>{sentence.text}</p>))}
|
|
@@ -37,9 +37,14 @@ LoadingSpinnerV2.propTypes = {
|
|
|
37
37
|
*/
|
|
38
38
|
applySentences: PropTypes.object,
|
|
39
39
|
/**
|
|
40
|
-
*
|
|
40
|
+
* spinnerProps
|
|
41
41
|
*/
|
|
42
|
-
|
|
42
|
+
spinnerProps: PropTypes.shape({
|
|
43
|
+
className: PropTypes.string,
|
|
44
|
+
color: PropTypes.string,
|
|
45
|
+
size: PropTypes.number,
|
|
46
|
+
thickness: PropTypes.number
|
|
47
|
+
}),
|
|
43
48
|
/**
|
|
44
49
|
* containerClassName
|
|
45
50
|
*/
|
|
@@ -7,9 +7,16 @@ const EntrypointIcon = ({
|
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
8
8
|
size = MEDIUM,
|
|
9
9
|
disabled = false,
|
|
10
|
-
inactive = false
|
|
10
|
+
inactive = false,
|
|
11
|
+
addImportantToColor = false
|
|
11
12
|
}) => {
|
|
12
|
-
let className = `${styles.svgClassName} `
|
|
13
|
+
let className = `${styles.svgClassName} `
|
|
14
|
+
// this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
|
|
15
|
+
if (!addImportantToColor) {
|
|
16
|
+
className += styles[`${color}`]
|
|
17
|
+
} else {
|
|
18
|
+
className += styles[`important-${color}`]
|
|
19
|
+
}
|
|
13
20
|
if (disabled) {
|
|
14
21
|
className += ` ${styles.iconDisabled}`
|
|
15
22
|
}
|
|
@@ -88,7 +95,11 @@ EntrypointIcon.propTypes = {
|
|
|
88
95
|
/**
|
|
89
96
|
* inactive
|
|
90
97
|
*/
|
|
91
|
-
inactive: PropTypes.bool
|
|
98
|
+
inactive: PropTypes.bool,
|
|
99
|
+
/**
|
|
100
|
+
* addImportantToColor
|
|
101
|
+
*/
|
|
102
|
+
addImportantToColor: PropTypes.bool
|
|
92
103
|
}
|
|
93
104
|
|
|
94
105
|
export default EntrypointIcon
|
|
@@ -7,9 +7,17 @@ const ExpandIcon = ({
|
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
8
8
|
size = MEDIUM,
|
|
9
9
|
disabled = false,
|
|
10
|
-
inactive = false
|
|
10
|
+
inactive = false,
|
|
11
|
+
addImportantToColor = false
|
|
11
12
|
}) => {
|
|
12
|
-
let className = `${styles.svgClassName} `
|
|
13
|
+
let className = `${styles.svgClassName} `
|
|
14
|
+
// this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
|
|
15
|
+
if (!addImportantToColor) {
|
|
16
|
+
className += styles[`${color}`]
|
|
17
|
+
} else {
|
|
18
|
+
className += styles[`important-${color}`]
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
if (disabled) {
|
|
14
22
|
className += ` ${styles.iconDisabled}`
|
|
15
23
|
}
|
|
@@ -93,7 +101,11 @@ ExpandIcon.propTypes = {
|
|
|
93
101
|
/**
|
|
94
102
|
* inactive
|
|
95
103
|
*/
|
|
96
|
-
inactive: PropTypes.bool
|
|
104
|
+
inactive: PropTypes.bool,
|
|
105
|
+
/**
|
|
106
|
+
* addImportantToColor
|
|
107
|
+
*/
|
|
108
|
+
addImportantToColor: PropTypes.bool
|
|
97
109
|
}
|
|
98
110
|
|
|
99
111
|
export default ExpandIcon
|
|
@@ -6,6 +6,14 @@
|
|
|
6
6
|
@apply stroke-rich-black;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.important-rich-black > circle,
|
|
10
|
+
.important-rich-black > ellipse,
|
|
11
|
+
.important-rich-black > rect,
|
|
12
|
+
.important-rich-black > line,
|
|
13
|
+
.important-rich-black > path {
|
|
14
|
+
@apply !stroke-rich-black;
|
|
15
|
+
}
|
|
16
|
+
|
|
9
17
|
.error-red > circle,
|
|
10
18
|
.error-red > ellipse,
|
|
11
19
|
.error-red > rect,
|
|
@@ -14,6 +22,14 @@
|
|
|
14
22
|
@apply stroke-error-red;
|
|
15
23
|
}
|
|
16
24
|
|
|
25
|
+
.important-error-red > circle,
|
|
26
|
+
.important-error-red > ellipse,
|
|
27
|
+
.important-error-red > rect,
|
|
28
|
+
.important-error-red > line,
|
|
29
|
+
.important-error-red > path {
|
|
30
|
+
@apply !stroke-error-red;
|
|
31
|
+
}
|
|
32
|
+
|
|
17
33
|
.main-dark-blue > circle,
|
|
18
34
|
.main-dark-blue > ellipse,
|
|
19
35
|
.main-dark-blue > rect,
|
|
@@ -22,6 +38,14 @@
|
|
|
22
38
|
@apply stroke-main-dark-blue;
|
|
23
39
|
}
|
|
24
40
|
|
|
41
|
+
.important-main-dark-blue > circle,
|
|
42
|
+
.important-main-dark-blue > ellipse,
|
|
43
|
+
.important-main-dark-blue > rect,
|
|
44
|
+
.important-main-dark-blue > line,
|
|
45
|
+
.important-main-dark-blue > path {
|
|
46
|
+
@apply !stroke-main-dark-blue;
|
|
47
|
+
}
|
|
48
|
+
|
|
25
49
|
.main-green > circle,
|
|
26
50
|
.main-green > ellipse,
|
|
27
51
|
.main-green > rect,
|
|
@@ -30,6 +54,14 @@
|
|
|
30
54
|
@apply stroke-main-green;
|
|
31
55
|
}
|
|
32
56
|
|
|
57
|
+
.important-main-green > circle,
|
|
58
|
+
.important-main-green > ellipse,
|
|
59
|
+
.important-main-green > rect,
|
|
60
|
+
.important-main-green > line,
|
|
61
|
+
.important-main-green > path {
|
|
62
|
+
@apply !stroke-main-green;
|
|
63
|
+
}
|
|
64
|
+
|
|
33
65
|
.tertiary-blue > circle,
|
|
34
66
|
.tertiary-blue > ellipse,
|
|
35
67
|
.tertiary-blue > rect,
|
|
@@ -38,6 +70,14 @@
|
|
|
38
70
|
@apply stroke-tertiary-blue;
|
|
39
71
|
}
|
|
40
72
|
|
|
73
|
+
.important-tertiary-blue > circle,
|
|
74
|
+
.important-tertiary-blue > ellipse,
|
|
75
|
+
.important-tertiary-blue > rect,
|
|
76
|
+
.important-tertiary-blue > line,
|
|
77
|
+
.important-tertiary-blue > path {
|
|
78
|
+
@apply !stroke-tertiary-blue;
|
|
79
|
+
}
|
|
80
|
+
|
|
41
81
|
.warning-yellow > circle,
|
|
42
82
|
.warning-yellow > ellipse,
|
|
43
83
|
.warning-yellow > rect,
|
|
@@ -46,6 +86,14 @@
|
|
|
46
86
|
@apply stroke-warning-yellow;
|
|
47
87
|
}
|
|
48
88
|
|
|
89
|
+
.important-warning-yellow > circle,
|
|
90
|
+
.important-warning-yellow > ellipse,
|
|
91
|
+
.important-warning-yellow > rect,
|
|
92
|
+
.important-warning-yellow > line,
|
|
93
|
+
.important-warning-yellow > path {
|
|
94
|
+
@apply !stroke-warning-yellow;
|
|
95
|
+
}
|
|
96
|
+
|
|
49
97
|
.white > circle,
|
|
50
98
|
.white > ellipse,
|
|
51
99
|
.white > rect,
|
|
@@ -54,6 +102,14 @@
|
|
|
54
102
|
@apply stroke-white;
|
|
55
103
|
}
|
|
56
104
|
|
|
105
|
+
.important-white > circle,
|
|
106
|
+
.important-white > ellipse,
|
|
107
|
+
.important-white > rect,
|
|
108
|
+
.important-white > line,
|
|
109
|
+
.important-white > path {
|
|
110
|
+
@apply !stroke-white;
|
|
111
|
+
}
|
|
112
|
+
|
|
57
113
|
.filled-rich-black {
|
|
58
114
|
@apply fill-rich-black
|
|
59
115
|
}
|
|
@@ -0,0 +1,118 @@
|
|
|
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 InfrastructureIcon = ({
|
|
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
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
|
|
22
|
+
switch (size) {
|
|
23
|
+
case SMALL:
|
|
24
|
+
icon = (
|
|
25
|
+
<svg
|
|
26
|
+
width={16}
|
|
27
|
+
height={16}
|
|
28
|
+
viewBox='0 0 16 16'
|
|
29
|
+
fill='none'
|
|
30
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
31
|
+
className={className}
|
|
32
|
+
>
|
|
33
|
+
<path d='M3.5 6H8M8 6V3M8 6L13 10.5M2.5 10.5L7.5 10L13 5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M2.91602 5.42096V10.6484L8.00003 13.2618L13.0833 10.6484V5.42096L8.00003 2.80688L2.91602 5.42096Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M8.05 3.6C8.49183 3.6 8.85 3.24183 8.85 2.8C8.85 2.35817 8.49183 2 8.05 2C7.60817 2 7.25 2.35817 7.25 2.8C7.25 3.24183 7.60817 3.6 8.05 3.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M8.05 6.6C8.49183 6.6 8.85 6.24183 8.85 5.8C8.85 5.35817 8.49183 5 8.05 5C7.60817 5 7.25 5.35817 7.25 5.8C7.25 6.24183 7.60817 6.6 8.05 6.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M8.05 10.6C8.49183 10.6 8.85 10.2418 8.85 9.8C8.85 9.35817 8.49183 9 8.05 9C7.60817 9 7.25 9.35817 7.25 9.8C7.25 10.2418 7.60817 10.6 8.05 10.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<path d='M2.81074 6.19094C3.25257 6.19094 3.61074 5.83277 3.61074 5.39094C3.61074 4.94911 3.25257 4.59094 2.81074 4.59094C2.36891 4.59094 2.01074 4.94911 2.01074 5.39094C2.01074 5.83277 2.36891 6.19094 2.81074 6.19094Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
39
|
+
<path d='M12.9772 6.19094C13.4191 6.19094 13.7772 5.83277 13.7772 5.39094C13.7772 4.94911 13.4191 4.59094 12.9772 4.59094C12.5354 4.59094 12.1772 4.94911 12.1772 5.39094C12.1772 5.83277 12.5354 6.19094 12.9772 6.19094Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
40
|
+
<path d='M8.07128 13.9776C8.51308 13.973 8.86646 13.611 8.86057 13.1692C8.85468 12.7275 8.49176 12.3731 8.04996 12.3778C7.60815 12.3824 7.25477 12.7444 7.26066 13.1862C7.26655 13.6279 7.62947 13.9823 8.07128 13.9776Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
<path d='M12.9878 11.3868C13.4296 11.3821 13.783 11.0202 13.7771 10.5784C13.7712 10.1366 13.4083 9.78229 12.9665 9.78695C12.5247 9.79162 12.1713 10.1536 12.1772 10.5953C12.1831 11.0371 12.546 11.3915 12.9878 11.3868Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
<path d='M2.82128 11.3873C3.26308 11.3826 3.61646 11.0207 3.61057 10.5789C3.60468 10.1371 3.24176 9.78277 2.79996 9.78744C2.35815 9.79211 2.00477 10.154 2.01066 10.5958C2.01655 11.0376 2.37947 11.392 2.82128 11.3873Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
case MEDIUM:
|
|
47
|
+
icon = (
|
|
48
|
+
<svg
|
|
49
|
+
width={24}
|
|
50
|
+
height={24}
|
|
51
|
+
viewBox='0 0 24 24'
|
|
52
|
+
fill='none'
|
|
53
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
54
|
+
className={className}
|
|
55
|
+
>
|
|
56
|
+
<path d='M5.25 9H12M12 9V4.5M12 9L19.5 15.75M3.75 15.75L11.25 15L19.5 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M4.37451 8.13143V15.9727L12.0005 19.8928L19.6254 15.9727V8.13143L12.0005 4.21033L4.37451 8.13143Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<path d='M12.075 5.4C12.7377 5.4 13.275 4.86274 13.275 4.2C13.275 3.53726 12.7377 3 12.075 3C11.4123 3 10.875 3.53726 10.875 4.2C10.875 4.86274 11.4123 5.4 12.075 5.4Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<path d='M12.075 9.9C12.7377 9.9 13.275 9.36274 13.275 8.7C13.275 8.03726 12.7377 7.5 12.075 7.5C11.4123 7.5 10.875 8.03726 10.875 8.7C10.875 9.36274 11.4123 9.9 12.075 9.9Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
<path d='M12.075 15.9C12.7377 15.9 13.275 15.3627 13.275 14.7C13.275 14.0373 12.7377 13.5 12.075 13.5C11.4123 13.5 10.875 14.0373 10.875 14.7C10.875 15.3627 11.4123 15.9 12.075 15.9Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<path d='M4.21611 9.28647C4.87885 9.28647 5.41611 8.74922 5.41611 8.08647C5.41611 7.42373 4.87885 6.88647 4.21611 6.88647C3.55337 6.88647 3.01611 7.42373 3.01611 8.08647C3.01611 8.74922 3.55337 9.28647 4.21611 9.28647Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<path d='M19.4656 9.28647C20.1284 9.28647 20.6656 8.74922 20.6656 8.08647C20.6656 7.42373 20.1284 6.88647 19.4656 6.88647C18.8029 6.88647 18.2656 7.42373 18.2656 8.08647C18.2656 8.74922 18.8029 9.28647 19.4656 9.28647Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M12.1069 20.9664C12.7696 20.9594 13.2997 20.4166 13.2909 19.7539C13.282 19.0912 12.7376 18.5597 12.0749 18.5667C11.4122 18.5737 10.8822 19.1166 10.891 19.7792C10.8998 20.4419 11.4442 20.9735 12.1069 20.9664Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M19.4819 17.0801C20.1446 17.0731 20.6747 16.5302 20.6659 15.8675C20.657 15.2048 20.1126 14.6733 19.4499 14.6803C18.7872 14.6873 18.2572 15.2302 18.266 15.8929C18.2748 16.5556 18.8192 17.0871 19.4819 17.0801Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
<path d='M4.23192 17.081C4.89462 17.0739 5.42469 16.5311 5.41586 15.8684C5.40703 15.2057 4.86264 14.6742 4.19993 14.6812C3.53723 14.6882 3.00716 15.2311 3.01599 15.8937C3.02482 16.5564 3.56921 17.088 4.23192 17.081Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
</svg>
|
|
67
|
+
)
|
|
68
|
+
break
|
|
69
|
+
case LARGE:
|
|
70
|
+
icon = (
|
|
71
|
+
<svg
|
|
72
|
+
width={40}
|
|
73
|
+
height={40}
|
|
74
|
+
viewBox='0 0 40 40'
|
|
75
|
+
fill='none'
|
|
76
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
77
|
+
className={className}
|
|
78
|
+
>
|
|
79
|
+
<path d='M8.75 15H20M20 15V7.5M20 15L32.5 26.25M6.25 26.25L18.75 25L32.5 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
<path d='M7.29053 13.5524V26.6211L20.0006 33.1546L32.7088 26.6211V13.5524L20.0006 7.01721L7.29053 13.5524Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
81
|
+
<path d='M20.125 9C21.2296 9 22.125 8.10457 22.125 7C22.125 5.89543 21.2296 5 20.125 5C19.0204 5 18.125 5.89543 18.125 7C18.125 8.10457 19.0204 9 20.125 9Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
82
|
+
<path d='M20.125 16.5C21.2296 16.5 22.125 15.6046 22.125 14.5C22.125 13.3954 21.2296 12.5 20.125 12.5C19.0204 12.5 18.125 13.3954 18.125 14.5C18.125 15.6046 19.0204 16.5 20.125 16.5Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
83
|
+
<path d='M20.125 26.5C21.2296 26.5 22.125 25.6046 22.125 24.5C22.125 23.3954 21.2296 22.5 20.125 22.5C19.0204 22.5 18.125 23.3954 18.125 24.5C18.125 25.6046 19.0204 26.5 20.125 26.5Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<path d='M7.02686 15.4774C8.13142 15.4774 9.02686 14.582 9.02686 13.4774C9.02686 12.3728 8.13142 11.4774 7.02686 11.4774C5.92229 11.4774 5.02686 12.3728 5.02686 13.4774C5.02686 14.582 5.92229 15.4774 7.02686 15.4774Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
85
|
+
<path d='M32.4429 15.4774C33.5474 15.4774 34.4429 14.582 34.4429 13.4774C34.4429 12.3728 33.5474 11.4774 32.4429 11.4774C31.3383 11.4774 30.4429 12.3728 30.4429 13.4774C30.4429 14.582 31.3383 15.4774 32.4429 15.4774Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
86
|
+
<path d='M20.1782 34.9441C21.2827 34.9324 22.1661 34.0276 22.1514 32.9231C22.1367 31.8187 21.2294 30.9328 20.1249 30.9444C19.0204 30.9561 18.1369 31.8609 18.1517 32.9654C18.1664 34.0699 19.0737 34.9558 20.1782 34.9441Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
87
|
+
<path d='M32.4697 28.4669C33.5742 28.4552 34.4577 27.5504 34.4429 26.4459C34.4282 25.3415 33.5209 24.4556 32.4164 24.4673C31.3119 24.4789 30.4284 25.3838 30.4432 26.4882C30.4579 27.5927 31.3652 28.4786 32.4697 28.4669Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
88
|
+
<path d='M7.05319 28.4681C8.1577 28.4565 9.04115 27.5516 9.02643 26.4472C9.01171 25.3427 8.1044 24.4568 6.99989 24.4685C5.89538 24.4802 5.01193 25.385 5.02665 26.4894C5.04137 27.5939 5.94869 28.4798 7.05319 28.4681Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
89
|
+
</svg>
|
|
90
|
+
)
|
|
91
|
+
break
|
|
92
|
+
|
|
93
|
+
default:
|
|
94
|
+
break
|
|
95
|
+
}
|
|
96
|
+
return icon
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
InfrastructureIcon.propTypes = {
|
|
100
|
+
/**
|
|
101
|
+
* color of text, icon and borders
|
|
102
|
+
*/
|
|
103
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
104
|
+
/**
|
|
105
|
+
* Size
|
|
106
|
+
*/
|
|
107
|
+
size: PropTypes.oneOf(SIZES),
|
|
108
|
+
/**
|
|
109
|
+
* disabled
|
|
110
|
+
*/
|
|
111
|
+
disabled: PropTypes.bool,
|
|
112
|
+
/**
|
|
113
|
+
* inactive
|
|
114
|
+
*/
|
|
115
|
+
inactive: PropTypes.bool
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export default InfrastructureIcon
|
|
@@ -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 InternetIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false,
|
|
11
|
+
addImportantToColor = false
|
|
12
|
+
}) => {
|
|
13
|
+
let className = `${styles.svgClassName} `
|
|
14
|
+
// this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
|
|
15
|
+
if (!addImportantToColor) {
|
|
16
|
+
className += styles[`${color}`]
|
|
17
|
+
} else {
|
|
18
|
+
className += styles[`important-${color}`]
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (disabled) {
|
|
22
|
+
className += ` ${styles.iconDisabled}`
|
|
23
|
+
}
|
|
24
|
+
if (inactive) {
|
|
25
|
+
className += ` ${styles.iconInactive}`
|
|
26
|
+
}
|
|
27
|
+
let icon = <></>
|
|
28
|
+
|
|
29
|
+
switch (size) {
|
|
30
|
+
case SMALL:
|
|
31
|
+
icon = (
|
|
32
|
+
<svg
|
|
33
|
+
width={16}
|
|
34
|
+
height={16}
|
|
35
|
+
viewBox='0 0 16 16'
|
|
36
|
+
fill='none'
|
|
37
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
38
|
+
className={className}
|
|
39
|
+
>
|
|
40
|
+
<path d='M2 8H14' stroke='none' strokeLinejoin='round' />
|
|
41
|
+
<circle cx='8' cy='8' r='6' stroke='none' />
|
|
42
|
+
<path d='M3 4C3.5 4.33333 4.8 5 8 5C11.2 5 12.8333 4.16667 13 4' stroke='none' strokeLinejoin='round' />
|
|
43
|
+
<path d='M8 14C8.66667 13.4 10 11.84 10 8C10 4.16 8.33333 2.2 8 2' stroke='none' strokeLinejoin='round' />
|
|
44
|
+
<path d='M8 14C7.33333 13.4 6 11.84 6 8C6 4.16 7.66667 2.2 8 2' stroke='none' strokeLinejoin='round' />
|
|
45
|
+
<path d='M13 12C12.5 11.6667 11.2 11 8 11C4.8 11 3.16667 11.8333 3 12' stroke='none' 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
|
+
<path d='M3 12H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
60
|
+
<circle cx='12' cy='12' r='9' stroke='none' strokeWidth={1.5} />
|
|
61
|
+
<path d='M4.5 6C5.25 6.5 7.2 7.5 12 7.5C16.8 7.5 19.25 6.25 19.5 6' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
62
|
+
<path d='M12 21C13 20.1 15 17.76 15 12C15 6.24 12.5 3.3 12 3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
63
|
+
<path d='M12 21C11 20.1 9 17.76 9 12C9 6.24 11.5 3.3 12 3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
64
|
+
<path d='M19.5 18C18.75 17.5 16.8 16.5 12 16.5C7.2 16.5 4.75 17.75 4.5 18' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
case LARGE:
|
|
69
|
+
icon = (
|
|
70
|
+
<svg
|
|
71
|
+
width={40}
|
|
72
|
+
height={40}
|
|
73
|
+
viewBox='0 0 40 40'
|
|
74
|
+
fill='none'
|
|
75
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
76
|
+
className={className}
|
|
77
|
+
>
|
|
78
|
+
<path d='M5 20H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
79
|
+
<circle cx='20' cy='20' r='15' stroke='none' strokeWidth={2} />
|
|
80
|
+
<path d='M7.5 10C8.75 10.8333 12 12.5 20 12.5C28 12.5 32.0833 10.4167 32.5 10' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
81
|
+
<path d='M20 35C21.6667 33.5 25 29.6 25 20C25 10.4 20.8333 5.5 20 5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
82
|
+
<path d='M20 35C18.3333 33.5 15 29.6 15 20C15 10.4 19.1667 5.5 20 5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
83
|
+
<path d='M32.5 30C31.25 29.1667 28 27.5 20 27.5C12 27.5 7.91667 29.5833 7.5 30' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
84
|
+
</svg>
|
|
85
|
+
)
|
|
86
|
+
break
|
|
87
|
+
|
|
88
|
+
default:
|
|
89
|
+
break
|
|
90
|
+
}
|
|
91
|
+
return icon
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
InternetIcon.propTypes = {
|
|
95
|
+
/**
|
|
96
|
+
* color of text, icon and borders
|
|
97
|
+
*/
|
|
98
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
99
|
+
/**
|
|
100
|
+
* Size
|
|
101
|
+
*/
|
|
102
|
+
size: PropTypes.oneOf(SIZES),
|
|
103
|
+
/**
|
|
104
|
+
* disabled
|
|
105
|
+
*/
|
|
106
|
+
disabled: PropTypes.bool,
|
|
107
|
+
/**
|
|
108
|
+
* inactive
|
|
109
|
+
*/
|
|
110
|
+
inactive: PropTypes.bool,
|
|
111
|
+
/**
|
|
112
|
+
* addImportantToColor
|
|
113
|
+
*/
|
|
114
|
+
addImportantToColor: PropTypes.bool
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export default InternetIcon
|
|
@@ -7,9 +7,17 @@ const NotCompliantServiceIcon = ({
|
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
8
8
|
size = MEDIUM,
|
|
9
9
|
disabled = false,
|
|
10
|
-
inactive = false
|
|
10
|
+
inactive = false,
|
|
11
|
+
addImportantToColor = false
|
|
11
12
|
}) => {
|
|
12
|
-
let className = `${styles.svgClassName} `
|
|
13
|
+
let className = `${styles.svgClassName} `
|
|
14
|
+
// this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
|
|
15
|
+
if (!addImportantToColor) {
|
|
16
|
+
className += styles[`${color}`]
|
|
17
|
+
} else {
|
|
18
|
+
className += styles[`important-${color}`]
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
if (disabled) {
|
|
14
22
|
className += ` ${styles.iconDisabled}`
|
|
15
23
|
}
|
|
@@ -97,7 +105,11 @@ NotCompliantServiceIcon.propTypes = {
|
|
|
97
105
|
/**
|
|
98
106
|
* inactive
|
|
99
107
|
*/
|
|
100
|
-
inactive: PropTypes.bool
|
|
108
|
+
inactive: PropTypes.bool,
|
|
109
|
+
/**
|
|
110
|
+
* addImportantToColor
|
|
111
|
+
*/
|
|
112
|
+
addImportantToColor: PropTypes.bool
|
|
101
113
|
}
|
|
102
114
|
|
|
103
115
|
export default NotCompliantServiceIcon
|
|
@@ -7,9 +7,17 @@ const OutdatedServiceIcon = ({
|
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
8
8
|
size = MEDIUM,
|
|
9
9
|
disabled = false,
|
|
10
|
-
inactive = false
|
|
10
|
+
inactive = false,
|
|
11
|
+
addImportantToColor = false
|
|
11
12
|
}) => {
|
|
12
|
-
let className = `${styles.svgClassName} `
|
|
13
|
+
let className = `${styles.svgClassName} `
|
|
14
|
+
// this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
|
|
15
|
+
if (!addImportantToColor) {
|
|
16
|
+
className += styles[`${color}`]
|
|
17
|
+
} else {
|
|
18
|
+
className += styles[`important-${color}`]
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
if (disabled) {
|
|
14
22
|
className += ` ${styles.iconDisabled}`
|
|
15
23
|
}
|
|
@@ -99,7 +107,11 @@ OutdatedServiceIcon.propTypes = {
|
|
|
99
107
|
/**
|
|
100
108
|
* inactive
|
|
101
109
|
*/
|
|
102
|
-
inactive: PropTypes.bool
|
|
110
|
+
inactive: PropTypes.bool,
|
|
111
|
+
/**
|
|
112
|
+
* addImportantToColor
|
|
113
|
+
*/
|
|
114
|
+
addImportantToColor: PropTypes.bool
|
|
103
115
|
}
|
|
104
116
|
|
|
105
117
|
export default OutdatedServiceIcon
|