@platformatic/ui-components 0.6.5 → 0.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/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-CTXhzp-V.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-Bn4IkzM3.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
9
9
  </head>
10
10
  <body>
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.6.5",
4
+ "version": "0.6.7",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -1,7 +1,7 @@
1
1
  'use strict'
2
2
  import React, { useEffect, useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
- import styles from './Button.module.css'
4
+ import styles from './ButtonOnlyIcon.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
7
  import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
@@ -19,6 +19,7 @@ function ButtonOnlyIcon ({
19
19
  fullWidth = false,
20
20
  platformaticIcon = null,
21
21
  selected = false,
22
+ fullRounded = false,
22
23
  ...rest
23
24
  }) {
24
25
  let contentClassName = `${styles.content} `
@@ -32,6 +33,10 @@ function ButtonOnlyIcon ({
32
33
  if (fullWidth) {
33
34
  baseButtonClassName += ` ${styles.fullWidth}`
34
35
  }
36
+ if (fullRounded) {
37
+ baseButtonClassName += ` ${styles.fullRounded}`
38
+ contentClassName += ` ${styles.fullRounded} `
39
+ }
35
40
  if (selected) baseButtonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
36
41
  const [hover, setHover] = useState(false)
37
42
  const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
@@ -0,0 +1,129 @@
1
+ .button {
2
+ @apply rounded text-center cursor-pointer font-normal border border-solid box-border;
3
+ padding-block: 0px;
4
+ padding-inline: 0px;
5
+ }
6
+ .content {
7
+ @apply rounded flex items-center justify-center gap-x-2;
8
+ background: transparent;
9
+ }
10
+ .fontBold {
11
+ @apply font-semibold;
12
+ }
13
+ .button-small {
14
+ @apply p-1 text-sm;
15
+ }
16
+ .button-medium {
17
+ @apply p-1;
18
+ }
19
+ .button-large {
20
+ @apply p-2;
21
+ }
22
+ .button-extra-large {
23
+ @apply p-2 md:p-2.5;
24
+ }
25
+
26
+ .margin-right-medium,
27
+ .margin-right-small {
28
+ @apply mr-1;
29
+ }
30
+ .margin-right-large {
31
+ @apply mr-2;
32
+ }
33
+ .margin-right-extra-large {
34
+ @apply mr-3;
35
+ }
36
+ .color-main-green {
37
+ @apply text-main-green border-main-green;
38
+ }
39
+ .color-light-green {
40
+ @apply text-light-green border-light-green;
41
+ }
42
+ .color-dark-green {
43
+ @apply text-dark-green border-dark-green;
44
+ }
45
+ .color-main-dark-blue {
46
+ @apply text-main-dark-blue border-main-dark-blue;
47
+ }
48
+ .color-dark-blue{
49
+ @apply text-dark-blue border-dark-blue;
50
+ }
51
+ .color-light-blue{
52
+ @apply text-light-blue border-light-blue;
53
+ }
54
+ .color-white{
55
+ @apply text-white;
56
+ }
57
+ .color-error-red{
58
+ @apply text-error-red border-error-red;
59
+ }
60
+ .color-tertiary-blue{
61
+ @apply text-tertiary-blue border-tertiary-blue;
62
+ }
63
+ .color-transparent{
64
+ @apply text-transparent border-transparent;
65
+ }
66
+ .color-rich-black{
67
+ @apply text-rich-black border-rich-black;
68
+ }
69
+
70
+ .no-border {
71
+ @apply border-0;
72
+ }
73
+ .disabled {
74
+ @apply opacity-30 cursor-default;
75
+ }
76
+ .hover-box-shadow-main-green {
77
+ @apply hover:shadow-main-green;
78
+ }
79
+ .hover-box-shadow-light-green {
80
+ @apply hover:shadow-light-green;
81
+ }
82
+ .hover-box-shadow-dark-green {
83
+ @apply hover:shadow-dark-green;
84
+ }
85
+ .hover-box-shadow-main-dark-blue {
86
+ @apply hover:shadow-main-dark-blue;
87
+ }
88
+ .hover-box-shadow-dark-blue {
89
+ @apply hover:shadow-dark-blue;
90
+ }
91
+ .hover-box-shadow-light-blue {
92
+ @apply hover:shadow-light-blue;
93
+ }
94
+ .hover-box-shadow-white {
95
+ @apply hover:shadow-white;
96
+ }
97
+ .hover-box-shadow-error-red {
98
+ @apply hover:shadow-error-red;
99
+ }
100
+ .hover-box-shadow-tertiary-blue {
101
+ @apply hover:shadow-tertiary-blue;
102
+ }
103
+ .hover-box-shadow-rich-black {
104
+ @apply hover:shadow-rich-black;
105
+ }
106
+
107
+ .underline-effect {
108
+ @apply hover:underline;
109
+ }
110
+
111
+ .fullWidth {
112
+ @apply w-full;
113
+ }
114
+ .label {
115
+ @apply w-max;
116
+ }
117
+ .inactive {
118
+ @apply opacity-70;
119
+ }
120
+ .active {
121
+ @apply opacity-100;
122
+ }
123
+ .cursorDefault {
124
+ @apply cursor-default;
125
+ }
126
+
127
+ .fullRounded {
128
+ @apply rounded-full;
129
+ }
@@ -0,0 +1,99 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const NoActivitiesIcon = ({
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='M8.4 3H9C9.55228 3 10 3.44772 10 4V7M3.6 3H3C2.44772 3 2 3.44772 2 4V11C2 11.5523 2.44772 12 3 12H7' stroke='none' />
34
+ <rect x='4' y='2' width='4' height='2' rx='1' stroke='none' />
35
+ <circle cx='10.5' cy='10.5' r='3.5' stroke='none' />
36
+ <path d='M10.0363 11.4776C9.99167 11.4776 9.95546 11.4414 9.95546 11.3968C9.95694 11.1193 9.97996 10.898 10.0245 10.7331C10.0705 10.5682 10.1373 10.435 10.2249 10.3335C10.3125 10.232 10.418 10.14 10.5412 10.0576C10.6333 9.99413 10.7157 9.92832 10.7884 9.86013C10.8612 9.79194 10.9191 9.71662 10.9621 9.63416C11.0052 9.55011 11.0267 9.45655 11.0267 9.35347C11.0267 9.24405 11.0022 9.14811 10.9532 9.06565C10.9042 8.98319 10.8382 8.91976 10.755 8.87536C10.6733 8.83095 10.5828 8.80875 10.4833 8.80875C10.3868 8.80875 10.2955 8.83175 10.2094 8.87774C10.1232 8.92214 10.0527 8.98874 9.99777 9.07755C9.89617 9.23886 9.75751 9.40343 9.56686 9.40343H9.46744C9.21107 9.40343 8.99446 9.18808 9.06672 8.94211C9.10194 8.82222 9.15097 8.71434 9.21381 8.61846C9.34892 8.41072 9.52784 8.25611 9.75056 8.15461C9.97327 8.05154 10.219 8 10.4878 8C10.7832 8 11.0445 8.05233 11.2717 8.15699C11.4989 8.26007 11.6771 8.40993 11.8062 8.60657C11.9354 8.8032 12 9.04028 12 9.31779C12 9.50333 11.971 9.66825 11.9131 9.81256C11.8567 9.95528 11.7773 10.0821 11.6748 10.1931C11.5724 10.3026 11.4514 10.4017 11.3118 10.4905C11.1945 10.565 11.098 10.6427 11.0223 10.7236C10.948 10.8045 10.8924 10.898 10.8552 11.0043C10.8196 11.1105 10.801 11.2414 10.7996 11.3968C10.7996 11.4414 10.7633 11.4776 10.7187 11.4776H10.0363ZM10.3964 13C10.248 13 10.121 12.9445 10.0156 12.8335C9.91166 12.7209 9.86043 12.5861 9.86192 12.4291C9.86043 12.2737 9.91166 12.1405 10.0156 12.0295C10.121 11.9185 10.248 11.863 10.3964 11.863C10.5375 11.863 10.6615 11.9185 10.7684 12.0295C10.8753 12.1405 10.9295 12.2737 10.931 12.4291C10.9295 12.5338 10.9035 12.6297 10.853 12.7169C10.804 12.8026 10.7394 12.8716 10.6592 12.9239C10.5791 12.9746 10.4915 13 10.3964 13Z' fill='none' className={filledClassName} />
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='M12.6 4.5H14C14.5523 4.5 15 4.94772 15 5.5V10.5M5.4 4.5H4C3.44772 4.5 3 4.94772 3 5.5V17C3 17.5523 3.44772 18 4 18H10.5' stroke='none' strokeWidth={1.5} />
51
+ <rect x='6' y='3' width='6' height='3' rx='1' stroke='none' strokeWidth={1.5} />
52
+ <circle cx='15.75' cy='15.75' r='5.25' stroke='none' strokeWidth={1.5} />
53
+ <path d='M15.0545 17.2165C14.9875 17.2165 14.9332 17.1621 14.9332 17.0951C14.9354 16.6789 14.9699 16.3471 15.0367 16.0997C15.1058 15.8523 15.206 15.6525 15.3374 15.5002C15.4688 15.348 15.6269 15.21 15.8118 15.0863C15.9499 14.9912 16.0735 14.8925 16.1826 14.7902C16.2918 14.6879 16.3786 14.5749 16.4432 14.4512C16.5078 14.3252 16.5401 14.1848 16.5401 14.0302C16.5401 13.8661 16.5033 13.7222 16.4298 13.5985C16.3563 13.4748 16.2572 13.3796 16.1325 13.313C16.01 13.2464 15.8742 13.2131 15.7249 13.2131C15.5802 13.2131 15.4432 13.2476 15.314 13.3166C15.1849 13.3832 15.0791 13.4831 14.9967 13.6163C14.8442 13.8583 14.6363 14.1051 14.3503 14.1051H14.2012C13.8166 14.1051 13.4917 13.7821 13.6001 13.4132C13.6529 13.2333 13.7265 13.0715 13.8207 12.9277C14.0234 12.6161 14.2918 12.3842 14.6258 12.2319C14.9599 12.0773 15.3285 12 15.7316 12C16.1748 12 16.5668 12.0785 16.9076 12.2355C17.2483 12.3901 17.5156 12.6149 17.7094 12.9098C17.9031 13.2048 18 13.5604 18 13.9767C18 14.255 17.9566 14.5024 17.8697 14.7188C17.7851 14.9329 17.6659 15.1232 17.5122 15.2897C17.3586 15.4539 17.1771 15.6025 16.9677 15.7357C16.7918 15.8475 16.647 15.9641 16.5334 16.0854C16.422 16.2067 16.3385 16.3471 16.2829 16.5064C16.2294 16.6658 16.2016 16.862 16.1993 17.0951C16.1993 17.1621 16.145 17.2165 16.078 17.2165H15.0545ZM15.5947 19.5C15.3719 19.5 15.1815 19.4167 15.0234 19.2502C14.8675 19.0814 14.7906 18.8792 14.7929 18.6437C14.7906 18.4106 14.8675 18.2108 15.0234 18.0442C15.1815 17.8777 15.3719 17.7945 15.5947 17.7945C15.8062 17.7945 15.9922 17.8777 16.1526 18.0442C16.3129 18.2108 16.3942 18.4106 16.3964 18.6437C16.3942 18.8007 16.3552 18.9446 16.2795 19.0754C16.206 19.2039 16.1091 19.3073 15.9889 19.3858C15.8686 19.4619 15.7372 19.5 15.5947 19.5Z' fill='none' className={filledClassName} />
54
+ </svg>
55
+ )
56
+ break
57
+ case LARGE:
58
+ icon = (
59
+ <svg
60
+ width={40}
61
+ height={40}
62
+ viewBox='0 0 40 40'
63
+ fill='none'
64
+ xmlns='http://www.w3.org/2000/svg'
65
+ className={className}
66
+ ><path d='M21 7.5H24C24.5523 7.5 25 7.94772 25 8.5V17.5M9 7.5H6C5.44772 7.5 5 7.94772 5 8.5V29C5 29.5523 5.44772 30 6 30H17.5' stroke='none' strokeWidth={2} />
67
+ <rect x='10' y='5' width='10' height='5' rx='2' stroke='none' strokeWidth={2} />
68
+ <circle cx='26.25' cy='26.25' r='8.75' stroke='none' strokeWidth={2} />
69
+ <path d='M25.0908 28.6941C24.9792 28.6941 24.8886 28.6036 24.8886 28.4919C24.8924 27.7981 24.9499 27.2451 25.0612 26.8328C25.1763 26.4205 25.3434 26.0875 25.5624 25.8337C25.7814 25.58 26.0449 25.3501 26.353 25.1439C26.5831 24.9853 26.7892 24.8208 26.971 24.6503C27.1529 24.4799 27.2977 24.2915 27.4053 24.0854C27.513 23.8753 27.5668 23.6414 27.5668 23.3837C27.5668 23.1101 27.5056 22.8703 27.3831 22.6641C27.2606 22.458 27.0954 22.2994 26.8875 22.1884C26.6834 22.0774 26.4569 22.0219 26.2082 22.0219C25.967 22.0219 25.7387 22.0794 25.5234 22.1943C25.3081 22.3053 25.1318 22.4719 24.9944 22.6939C24.7404 23.0971 24.3938 23.5086 23.9172 23.5086H23.5237C22.9622 23.5086 22.4922 23.0397 22.6288 22.4951C22.7181 22.1389 22.8534 21.8225 23.0345 21.5461C23.3723 21.0268 23.8196 20.6403 24.3764 20.3865C24.9332 20.1288 25.5475 20 26.2194 20C26.9581 20 27.6114 20.1308 28.1793 20.3925C28.7472 20.6502 29.1926 21.0248 29.5156 21.5164C29.8385 22.008 30 22.6007 30 23.2945C30 23.7583 29.9276 24.1706 29.7829 24.5314C29.6418 24.8882 29.4432 25.2054 29.1871 25.4829C28.931 25.7564 28.6284 26.0042 28.2795 26.2262C27.9863 26.4125 27.745 26.6068 27.5557 26.809C27.3701 27.0112 27.2309 27.2451 27.1381 27.5107C27.049 27.7763 27.0026 28.1034 26.9989 28.4919C26.9989 28.6036 26.9084 28.6941 26.7967 28.6941H25.0908ZM25.9911 32.5C25.6199 32.5 25.3025 32.3612 25.039 32.0837C24.7791 31.8023 24.6511 31.4653 24.6548 31.0728C24.6511 30.6843 24.7791 30.3513 25.039 30.0737C25.3025 29.7962 25.6199 29.6575 25.9911 29.6575C26.3437 29.6575 26.6537 29.7962 26.9209 30.0737C27.1882 30.3513 27.3237 30.6843 27.3274 31.0728C27.3237 31.3344 27.2587 31.5743 27.1325 31.7923C27.01 32.0064 26.8486 32.1789 26.6481 32.3097C26.4477 32.4366 26.2287 32.5 25.9911 32.5Z' fill='none' className={filledClassName} />
70
+ </svg>
71
+ )
72
+ break
73
+
74
+ default:
75
+ break
76
+ }
77
+ return icon
78
+ }
79
+
80
+ NoActivitiesIcon.propTypes = {
81
+ /**
82
+ * color of text, icon and borders
83
+ */
84
+ color: PropTypes.oneOf(COLORS_ICON),
85
+ /**
86
+ * Size
87
+ */
88
+ size: PropTypes.oneOf(SIZES),
89
+ /**
90
+ * disabled
91
+ */
92
+ disabled: PropTypes.bool,
93
+ /**
94
+ * inactive
95
+ */
96
+ inactive: PropTypes.bool
97
+ }
98
+
99
+ export default NoActivitiesIcon
@@ -0,0 +1,100 @@
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 NoDeploymentsIcon = ({
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
+ ><path d='M7.35921 7.14269L7.35921 5.03971C7.35921 4.84593 7.30291 4.65632 7.19715 4.49395L5.99179 2.64328C5.79456 2.34045 5.35108 2.34045 5.15385 2.64328L3.94849 4.49395C3.84273 4.65632 3.78643 4.84596 3.78643 5.03974C3.78643 6.45328 3.78643 6.92848 3.78643 7.14269L2 9.28547L4.14367 9.28547L4.50094 10.1426L5.78125 10.1426' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M3.78613 11.4287L3.78613 13.1429' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
34
+ <path d='M5.573 12.2859L5.573 14.0001' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
35
+ <circle cx='10.5' cy='10.5' r='3.5' stroke='none' />
36
+ <path d='M10.0363 11.4776C9.99167 11.4776 9.95546 11.4414 9.95546 11.3968C9.95694 11.1193 9.97996 10.898 10.0245 10.7331C10.0705 10.5682 10.1373 10.435 10.2249 10.3335C10.3125 10.232 10.418 10.14 10.5412 10.0576C10.6333 9.99413 10.7157 9.92832 10.7884 9.86013C10.8612 9.79194 10.9191 9.71662 10.9621 9.63416C11.0052 9.55011 11.0267 9.45655 11.0267 9.35347C11.0267 9.24405 11.0022 9.14811 10.9532 9.06565C10.9042 8.98319 10.8382 8.91976 10.755 8.87536C10.6733 8.83095 10.5828 8.80875 10.4833 8.80875C10.3868 8.80875 10.2955 8.83175 10.2094 8.87774C10.1232 8.92214 10.0527 8.98874 9.99777 9.07755C9.89617 9.23886 9.75751 9.40343 9.56686 9.40343H9.46744C9.21107 9.40343 8.99446 9.18808 9.06672 8.94211C9.10194 8.82222 9.15097 8.71434 9.21381 8.61846C9.34892 8.41072 9.52784 8.25611 9.75056 8.15461C9.97327 8.05154 10.219 8 10.4878 8C10.7832 8 11.0445 8.05233 11.2717 8.15699C11.4989 8.26007 11.6771 8.40993 11.8062 8.60657C11.9354 8.8032 12 9.04028 12 9.31779C12 9.50333 11.971 9.66825 11.9131 9.81256C11.8567 9.95528 11.7773 10.0821 11.6748 10.1931C11.5724 10.3026 11.4514 10.4017 11.3118 10.4905C11.1945 10.565 11.098 10.6427 11.0223 10.7236C10.948 10.8045 10.8924 10.898 10.8552 11.0043C10.8196 11.1105 10.801 11.2414 10.7996 11.3968C10.7996 11.4414 10.7633 11.4776 10.7187 11.4776H10.0363ZM10.3964 13C10.248 13 10.121 12.9445 10.0156 12.8335C9.91166 12.7209 9.86043 12.5861 9.86192 12.4291C9.86043 12.2737 9.91166 12.1405 10.0156 12.0295C10.121 11.9185 10.248 11.863 10.3964 11.863C10.5375 11.863 10.6615 11.9185 10.7684 12.0295C10.8753 12.1405 10.9295 12.2737 10.931 12.4291C10.9295 12.5338 10.9035 12.6297 10.853 12.7169C10.804 12.8026 10.7394 12.8716 10.6592 12.9239C10.5791 12.9746 10.4915 13 10.3964 13Z' fill='none' className={filledClassName} />
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
+ ><path d='M11.0388 10.714L11.0388 7.41109C11.0388 7.21731 10.9825 7.02771 10.8768 6.86533L8.7782 3.64328C8.58097 3.34045 8.1375 3.34045 7.94026 3.64328L5.84171 6.86533C5.73595 7.02771 5.67965 7.21835 5.67965 7.41213C5.67965 9.64715 5.67965 10.3854 5.67965 10.714L3 13.9282L6.2155 13.9282L6.75142 15.2139L8.67188 15.2139' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ <path d='M5.6792 17.1431L5.6792 19.7144' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
51
+ <path d='M8.35938 18.4287L8.35937 21.0001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
52
+ <circle cx='15.75' cy='15.75' r='5.25' stroke='none' strokeWidth={1.5} />
53
+ <path d='M15.0545 17.2165C14.9875 17.2165 14.9332 17.1621 14.9332 17.0951C14.9354 16.6789 14.9699 16.3471 15.0367 16.0997C15.1058 15.8523 15.206 15.6525 15.3374 15.5002C15.4688 15.348 15.6269 15.21 15.8118 15.0863C15.9499 14.9912 16.0735 14.8925 16.1826 14.7902C16.2918 14.6879 16.3786 14.5749 16.4432 14.4512C16.5078 14.3252 16.5401 14.1848 16.5401 14.0302C16.5401 13.8661 16.5033 13.7222 16.4298 13.5985C16.3563 13.4748 16.2572 13.3796 16.1325 13.313C16.01 13.2464 15.8742 13.2131 15.7249 13.2131C15.5802 13.2131 15.4432 13.2476 15.314 13.3166C15.1849 13.3832 15.0791 13.4831 14.9967 13.6163C14.8442 13.8583 14.6363 14.1051 14.3503 14.1051H14.2012C13.8166 14.1051 13.4917 13.7821 13.6001 13.4132C13.6529 13.2333 13.7265 13.0715 13.8207 12.9277C14.0234 12.6161 14.2918 12.3842 14.6258 12.2319C14.9599 12.0773 15.3285 12 15.7316 12C16.1748 12 16.5668 12.0785 16.9076 12.2355C17.2483 12.3901 17.5156 12.6149 17.7094 12.9098C17.9031 13.2048 18 13.5604 18 13.9767C18 14.255 17.9566 14.5024 17.8697 14.7188C17.7851 14.9329 17.6659 15.1232 17.5122 15.2897C17.3586 15.4539 17.1771 15.6025 16.9677 15.7357C16.7918 15.8475 16.647 15.9641 16.5334 16.0854C16.422 16.2067 16.3385 16.3471 16.2829 16.5064C16.2294 16.6658 16.2016 16.862 16.1993 17.0951C16.1993 17.1621 16.145 17.2165 16.078 17.2165H15.0545ZM15.5947 19.5C15.3719 19.5 15.1815 19.4167 15.0234 19.2502C14.8675 19.0814 14.7906 18.8792 14.7929 18.6437C14.7906 18.4106 14.8675 18.2108 15.0234 18.0442C15.1815 17.8777 15.3719 17.7945 15.5947 17.7945C15.8062 17.7945 15.9922 17.8777 16.1526 18.0442C16.3129 18.2108 16.3942 18.4106 16.3964 18.6437C16.3942 18.8007 16.3552 18.9446 16.2795 19.0754C16.206 19.2039 16.1091 19.3073 15.9889 19.3858C15.8686 19.4619 15.7372 19.5 15.5947 19.5Z' fill='none' className={filledClassName} />
54
+ </svg>
55
+ )
56
+ break
57
+ case LARGE:
58
+ icon = (
59
+ <svg
60
+ width={40}
61
+ height={40}
62
+ viewBox='0 0 40 40'
63
+ fill='none'
64
+ xmlns='http://www.w3.org/2000/svg'
65
+ className={className}
66
+ ><path d='M18.398 17.8567L18.398 12.1539C18.398 11.9601 18.3417 11.7705 18.236 11.6081L14.351 5.64328C14.1538 5.34045 13.7103 5.34045 13.5131 5.64328L9.62814 11.6081C9.52238 11.7705 9.46608 11.9614 9.46608 12.1552C9.46608 16.0352 9.46608 17.2994 9.46608 17.8567L5 23.2137L10.3592 23.2137L11.2524 25.3565L14.4531 25.3565' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67
+ <path d='M9.46533 28.572L9.46533 32.8576' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
68
+ <path d='M13.9326 30.7144L13.9326 34.9999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
69
+ <circle cx='26.25' cy='26.25' r='8.75' stroke='none' strokeWidth={2} />
70
+ <path d='M25.0908 28.6941C24.9792 28.6941 24.8886 28.6036 24.8886 28.4919C24.8924 27.7981 24.9499 27.2451 25.0612 26.8328C25.1763 26.4205 25.3434 26.0875 25.5624 25.8337C25.7814 25.58 26.0449 25.3501 26.353 25.1439C26.5831 24.9853 26.7892 24.8208 26.971 24.6503C27.1529 24.4799 27.2977 24.2915 27.4053 24.0854C27.513 23.8753 27.5668 23.6414 27.5668 23.3837C27.5668 23.1101 27.5056 22.8703 27.3831 22.6641C27.2606 22.458 27.0954 22.2994 26.8875 22.1884C26.6834 22.0774 26.4569 22.0219 26.2082 22.0219C25.967 22.0219 25.7387 22.0794 25.5234 22.1943C25.3081 22.3053 25.1318 22.4719 24.9944 22.6939C24.7404 23.0971 24.3938 23.5086 23.9172 23.5086H23.5237C22.9622 23.5086 22.4922 23.0397 22.6288 22.4951C22.7181 22.1389 22.8534 21.8225 23.0345 21.5461C23.3723 21.0268 23.8196 20.6403 24.3764 20.3865C24.9332 20.1288 25.5475 20 26.2194 20C26.9581 20 27.6114 20.1308 28.1793 20.3925C28.7472 20.6502 29.1926 21.0248 29.5156 21.5164C29.8385 22.008 30 22.6007 30 23.2945C30 23.7583 29.9276 24.1706 29.7829 24.5314C29.6418 24.8882 29.4432 25.2054 29.1871 25.4829C28.931 25.7564 28.6284 26.0042 28.2795 26.2262C27.9863 26.4125 27.745 26.6068 27.5557 26.809C27.3701 27.0112 27.2309 27.2451 27.1381 27.5107C27.049 27.7763 27.0026 28.1034 26.9989 28.4919C26.9989 28.6036 26.9084 28.6941 26.7967 28.6941H25.0908ZM25.9911 32.5C25.6199 32.5 25.3025 32.3612 25.039 32.0837C24.7791 31.8023 24.6511 31.4653 24.6548 31.0728C24.6511 30.6843 24.7791 30.3513 25.039 30.0737C25.3025 29.7962 25.6199 29.6575 25.9911 29.6575C26.3437 29.6575 26.6537 29.7962 26.9209 30.0737C27.1882 30.3513 27.3237 30.6843 27.3274 31.0728C27.3237 31.3344 27.2587 31.5743 27.1325 31.7923C27.01 32.0064 26.8486 32.1789 26.6481 32.3097C26.4477 32.4366 26.2287 32.5 25.9911 32.5Z' fill='none' className={filledClassName} />
71
+ </svg>
72
+ )
73
+ break
74
+
75
+ default:
76
+ break
77
+ }
78
+ return icon
79
+ }
80
+
81
+ NoDeploymentsIcon.propTypes = {
82
+ /**
83
+ * color of text, icon and borders
84
+ */
85
+ color: PropTypes.oneOf(COLORS_ICON),
86
+ /**
87
+ * Size
88
+ */
89
+ size: PropTypes.oneOf(SIZES),
90
+ /**
91
+ * disabled
92
+ */
93
+ disabled: PropTypes.bool,
94
+ /**
95
+ * inactive
96
+ */
97
+ inactive: PropTypes.bool
98
+ }
99
+
100
+ export default NoDeploymentsIcon
@@ -0,0 +1,98 @@
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 ServicesWorkingIcon = ({
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='M5.31825 9.21875L5 9.03125H4.6013L3.97725 9.69072H3.71543L2.80047 8.92906C2.69162 8.83888 2.68223 8.68083 2.77889 8.57904L3.17584 8.16204C3.23778 8.09686 3.25842 8.00489 3.23027 7.92096L2.98628 7.2093C2.95156 7.1084 2.85209 7.03964 2.74041 7.03964H2.25807C2.11543 7.03964 2 6.92981 2 6.79409V5.76009C2 5.62436 2.11543 5.51453 2.25807 5.51453H2.71789C2.8183 5.51453 2.91027 5.45917 2.9525 5.37167L3.25279 4.75555C3.2969 4.66537 3.27907 4.56 3.20962 4.48678L2.76669 4.02425C2.67566 3.9296 2.6766 3.78316 2.7695 3.6903L3.60094 2.85274C3.70323 2.75005 3.8759 2.75005 3.97725 2.85363L4.32165 3.20544C4.39297 3.27866 4.50371 3.30277 4.6013 3.26795L5.31825 3.00989C5.41867 2.97418 5.48529 2.88221 5.48529 2.78041V2.24555C5.48529 2.10983 5.60072 2 5.74336 2H7.00553C7.14817 2 7.2636 2.10983 7.2636 2.24555V2.78041C7.2636 2.88221 7.33023 2.97418 7.43064 3.00989L8.14759 3.26795C8.24519 3.30277 8.35592 3.27866 8.42724 3.20544L8.77164 2.85363C8.87299 2.75005 9.04566 2.74916 9.14795 2.85274L9.97939 3.6903C10.0723 3.78405 10.0732 3.9296 9.9822 4.02425L9.53927 4.48678C9.46889 4.56 9.452 4.66626 9.4961 4.75555L9.74805 5.12778' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M7.46792 7.46809H4.73389L6.3743 4.18726L7.74132 6.92128' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M10.2346 7.8043C10.4455 8.56686 11.7282 9.71069 12.3433 10.1873V13.2852C12.3433 13.6664 11.2889 13.9206 10.7618 14.0001H8.38958C7.33526 14.0001 7.2474 13.3646 7.33526 13.0469C7.15954 12.9674 6.8081 12.7609 6.8081 12.5703C6.8081 12.3796 6.98382 12.1731 7.07168 12.0937C6.8081 12.0937 6.28095 11.9984 6.28095 11.6171C6.28095 11.2358 6.63239 10.9816 6.8081 10.9022C6.63239 10.9022 6.28095 10.7592 6.28095 10.1873C6.28095 9.61537 6.8081 9.47239 7.07168 9.47239H9.18031L8.65316 7.566C8.5653 7.16884 8.54773 6.37451 9.18031 6.37451C9.97105 6.37451 9.97105 6.85111 10.2346 7.8043Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <path d='M12.3433 9.94897H13.9248V13.7618H12.3433V9.94897Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
+ </svg>
37
+ )
38
+ break
39
+ case MEDIUM:
40
+ icon = (
41
+ <svg
42
+ width={24}
43
+ height={24}
44
+ viewBox='0 0 24 24'
45
+ fill='none'
46
+ xmlns='http://www.w3.org/2000/svg'
47
+ className={className}
48
+ ><path d='M7.97738 13.8281L7.5 13.5469H6.90195L5.96588 14.5361H5.57315L4.20071 13.3936C4.03742 13.2583 4.02335 13.0212 4.16833 12.8686L4.76376 12.2431C4.85666 12.1453 4.88763 12.0073 4.8454 11.8814L4.47942 10.8139C4.42734 10.6626 4.27813 10.5595 4.11062 10.5595H3.3871C3.17314 10.5595 3 10.3947 3 10.1911V8.64013C3 8.43655 3.17314 8.2718 3.3871 8.2718H4.07684C4.22745 8.2718 4.3654 8.18876 4.42875 8.0575L4.87919 7.13333C4.94535 6.99805 4.9186 6.84 4.81444 6.73017L4.15003 6.03638C4.01349 5.8944 4.0149 5.67474 4.15426 5.53545L5.40142 4.27911C5.55485 4.12508 5.81385 4.12508 5.96588 4.28045L6.48248 4.80816C6.58946 4.91799 6.75556 4.95416 6.90195 4.90192L7.97738 4.51484C8.128 4.46126 8.22794 4.32331 8.22794 4.17062V3.36833C8.22794 3.16474 8.40108 3 8.61504 3H10.5083C10.7223 3 10.8954 3.16474 10.8954 3.36833V4.17062C10.8954 4.32331 10.9953 4.46126 11.146 4.51484L12.2214 4.90192C12.3678 4.95416 12.5339 4.91799 12.6409 4.80816L13.1575 4.28045C13.3095 4.12508 13.5685 4.12374 13.7219 4.27911L14.9691 5.53545C15.1084 5.67608 15.1098 5.8944 14.9733 6.03638L14.3089 6.73017C14.2033 6.84 14.178 6.99939 14.2442 7.13333L14.6221 7.69166' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M11.2021 11.202H7.10107L9.5617 6.28076L11.6122 10.3818' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ <path d='M15.3517 11.7065C15.668 12.8503 17.5921 14.566 18.5146 15.2809V19.9278C18.5146 20.4997 16.9332 20.8809 16.1424 21.0001H12.5841C11.0027 21.0001 10.8709 20.0469 11.0027 19.5703C10.7391 19.4512 10.2119 19.1414 10.2119 18.8554C10.2119 18.5695 10.4755 18.2597 10.6073 18.1405C10.2119 18.1405 9.42118 17.9975 9.42118 17.4256C9.42118 16.8537 9.94833 16.4724 10.2119 16.3533C9.94833 16.3533 9.42118 16.1388 9.42118 15.2809C9.42118 14.4231 10.2119 14.2086 10.6073 14.2086H13.7702L12.9795 11.349C12.8477 10.7533 12.8213 9.56177 13.7702 9.56177C14.9563 9.56177 14.9563 10.2767 15.3517 11.7065Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <path d='M18.515 14.9236H20.8872V20.6427H18.515V14.9236Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
+ </svg>
53
+ )
54
+ break
55
+ case LARGE:
56
+ icon = (
57
+ <svg
58
+ width={40}
59
+ height={40}
60
+ viewBox='0 0 40 40'
61
+ fill='none'
62
+ xmlns='http://www.w3.org/2000/svg'
63
+ className={className}
64
+ >
65
+ <path d='M13.2956 23.0469L12.5 22.5781H11.5033L9.94313 24.2268H9.28858L7.00118 22.3227C6.72904 22.0972 6.70558 21.7021 6.94722 21.4476L7.9396 20.4051C8.09444 20.2421 8.14605 20.0122 8.07567 19.8024L7.4657 18.0232C7.3789 17.771 7.13021 17.5991 6.85103 17.5991H5.64516C5.28856 17.5991 5 17.3245 5 16.9852V14.4002C5 14.0609 5.28856 13.7863 5.64516 13.7863H6.79473C7.04576 13.7863 7.27567 13.6479 7.38124 13.4292L8.13198 11.8889C8.24224 11.6634 8.19767 11.4 8.02406 11.217L6.91672 10.0606C6.68916 9.824 6.6915 9.4579 6.92376 9.22575L9.00236 7.13185C9.25808 6.87513 9.68976 6.87513 9.94313 7.13408L10.8041 8.01361C10.9824 8.19665 11.2593 8.25693 11.5033 8.16987L13.2956 7.52473C13.5467 7.43544 13.7132 7.20551 13.7132 6.95103V5.61388C13.7132 5.27457 14.0018 5 14.3584 5H17.5138C17.8704 5 18.159 5.27457 18.159 5.61388V6.95103C18.159 7.20551 18.3256 7.43544 18.5766 7.52473L20.369 8.16987C20.613 8.25693 20.8898 8.19665 21.0681 8.01361L21.9291 7.13408C22.1825 6.87513 22.6142 6.8729 22.8699 7.13185L24.9485 9.22575C25.1807 9.46014 25.1831 9.824 24.9555 10.0606L23.8482 11.217C23.6722 11.4 23.63 11.6656 23.7403 11.8889L24.3701 12.8194' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66
+ <path d='M18.67 18.6701H11.835L15.936 10.468L19.3535 17.3031' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67
+ <path d='M25.5868 19.5105C26.114 21.4169 29.3209 24.2765 30.8584 25.468V33.2127C30.8584 34.1659 28.2226 34.8013 26.9047 34.9999H20.9742C18.3384 34.9999 18.1188 33.4113 18.3384 32.6169C17.8991 32.4184 17.0205 31.902 17.0205 31.4254C17.0205 30.9488 17.4598 30.4325 17.6795 30.2339C17.0205 30.2339 15.7026 29.9957 15.7026 29.0425C15.7026 28.0893 16.5812 27.4538 17.0205 27.2552C16.5812 27.2552 15.7026 26.8978 15.7026 25.468C15.7026 24.0382 17.0205 23.6807 17.6795 23.6807H22.951L21.6331 18.9148C21.4135 17.9219 21.3696 15.936 22.951 15.936C24.9279 15.936 24.9279 17.1275 25.5868 19.5105Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ <path d='M30.8588 24.8723H34.8125V34.4043H30.8588V24.8723Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69
+ </svg>
70
+ )
71
+ break
72
+
73
+ default:
74
+ break
75
+ }
76
+ return icon
77
+ }
78
+
79
+ ServicesWorkingIcon.propTypes = {
80
+ /**
81
+ * color of text, icon and borders
82
+ */
83
+ color: PropTypes.oneOf(COLORS_ICON),
84
+ /**
85
+ * Size
86
+ */
87
+ size: PropTypes.oneOf(SIZES),
88
+ /**
89
+ * disabled
90
+ */
91
+ disabled: PropTypes.bool,
92
+ /**
93
+ * inactive
94
+ */
95
+ inactive: PropTypes.bool
96
+ }
97
+
98
+ export default ServicesWorkingIcon
@@ -104,6 +104,8 @@ import MetricsLogsIcon from './MetricsLogsIcon'
104
104
  import MissingTemplateIcon from './MissingTemplateIcon'
105
105
  import NameAppIcon from './NameAppIcon'
106
106
  import NodeJSMetricsIcon from './NodeJSMetricsIcon'
107
+ import NoActivitiesIcon from './NoActivitiesIcon'
108
+ import NoDeploymentsIcon from './NoDeploymentsIcon'
107
109
  import NoMetricsIcon from './NoMetricsIcon'
108
110
  import NotCompliantServiceIcon from './NotCompliantServiceIcon'
109
111
  import OrganizationIcon from './OrganizationIcon'
@@ -126,6 +128,7 @@ import RocketIcon from './RocketIcon'
126
128
  import RunningIcon from './RunningIcon'
127
129
  import SendIcon from './SendIcon'
128
130
  import ServiceIcon from './ServiceIcon'
131
+ import ServicesWorkingIcon from './ServicesWorkingIcon'
129
132
  import SlotIcon from './SlotIcon'
130
133
  import SwitchIcon from './SwitchIcon'
131
134
  import SocialDiscordIcon from './SocialDiscordIcon'
@@ -270,6 +273,8 @@ export default {
270
273
  MissingTemplateIcon,
271
274
  NameAppIcon,
272
275
  NodeJSMetricsIcon,
276
+ NoActivitiesIcon,
277
+ NoDeploymentsIcon,
273
278
  NoMetricsIcon,
274
279
  NotCompliantServiceIcon,
275
280
  OrganizationIcon,
@@ -292,6 +297,7 @@ export default {
292
297
  RunningIcon,
293
298
  SendIcon,
294
299
  ServiceIcon,
300
+ ServicesWorkingIcon,
295
301
  StopIcon,
296
302
  StoppedAppIcon,
297
303
  SlotIcon,
@@ -66,7 +66,11 @@ export default {
66
66
  },
67
67
  selected: {
68
68
  type: 'boolean'
69
+ },
70
+ fullRounded: {
71
+ type: 'boolean'
69
72
  }
73
+
70
74
  }
71
75
  }
72
76