@platformatic/ui-components 0.2.4 → 0.2.6

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.
Files changed (17) hide show
  1. package/dist/assets/{index-DGu0wALr.css → index-C-rgNKxt.css} +1 -1
  2. package/dist/assets/index-CYL6XgVn.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +4 -0
  5. package/index.js +2 -0
  6. package/package.json +1 -1
  7. package/src/components/PlatformaticIcon.jsx +10 -3
  8. package/src/components/PlatformaticIcon.module.css +3 -0
  9. package/src/components/Tooltip.jsx +65 -0
  10. package/src/components/Tooltip.module.css +31 -0
  11. package/src/components/constants.js +5 -0
  12. package/src/components/icons/CLIIcon.jsx +115 -0
  13. package/src/components/icons/CirclePlayIcon.jsx +98 -0
  14. package/src/components/icons/CircleStopIcon.jsx +97 -0
  15. package/src/components/icons/StoppedAppIcon.jsx +107 -0
  16. package/src/components/icons/index.js +8 -0
  17. package/dist/assets/index-DcjcxgBQ.js +0 -206
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-DcjcxgBQ.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-DGu0wALr.css">
7
+ <script type="module" crossorigin src="/assets/index-CYL6XgVn.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -586,6 +586,10 @@ video {
586
586
  }
587
587
  }
588
588
 
589
+ .visible {
590
+ visibility: visible;
591
+ }
592
+
589
593
  .relative {
590
594
  position: relative;
591
595
  }
package/index.js CHANGED
@@ -36,6 +36,7 @@ import SearchBar from './src/components/SearchBar'
36
36
  import SearchBarV2 from './src/components/SearchBarV2'
37
37
  import SimpleMetric from './src/components/SimpleMetric'
38
38
  import Status from './src/components/Status'
39
+ import Tooltip from './src/components/Tooltip'
39
40
  import TabbedWindow from './src/components/TabbedWindow'
40
41
  import TabbedWindowV2 from './src/components/TabbedWindowV2'
41
42
  import Tag from './src/components/Tag'
@@ -85,6 +86,7 @@ export {
85
86
  TabbedWindowV2,
86
87
  Tag,
87
88
  TextWithLabel,
89
+ Tooltip,
88
90
  TwoColumnsLayout,
89
91
  Versions,
90
92
  VerticalSeparator
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.2.4",
4
+ "version": "0.2.6",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
- import ReactTooltip from 'react-tooltip'
5
4
  import Icons from './icons'
6
5
  import styles from './PlatformaticIcon.module.css'
7
6
  import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
7
+ import Tooltip from './Tooltip'
8
8
 
9
9
  function PlatformaticIcon ({
10
10
  iconName,
@@ -13,6 +13,7 @@ function PlatformaticIcon ({
13
13
  size,
14
14
  classes,
15
15
  tip,
16
+ tipClassName,
16
17
  disabled,
17
18
  inactive,
18
19
  internalOverHandling,
@@ -30,7 +31,7 @@ function PlatformaticIcon ({
30
31
  ...rest
31
32
  })
32
33
  if (onClick && !disabled) {
33
- let className = styles.cursorPointer
34
+ let className = `${styles.cursorPointer} ${tip ? styles.pltTooltip : ''}`
34
35
  if (classes) className += ` ${classes}`
35
36
  icon = (
36
37
  <div
@@ -40,14 +41,15 @@ function PlatformaticIcon ({
40
41
  onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
41
42
  >
42
43
  {icon}
44
+ {tip && <Tooltip tooltipClassName={tipClassName} text={tip} visible={hover} />}
43
45
  </div>
44
46
  )
45
47
  }
46
48
  }
49
+
47
50
  return (
48
51
  <>
49
52
  {icon}
50
- {tip && <ReactTooltip place='top' type='info' />}
51
53
  </>
52
54
  )
53
55
  }
@@ -77,6 +79,10 @@ PlatformaticIcon.propTypes = {
77
79
  * tip
78
80
  */
79
81
  tip: PropTypes.string,
82
+ /**
83
+ * tip
84
+ */
85
+ tipClassName: PropTypes.string,
80
86
  /**
81
87
  * disabled
82
88
  */
@@ -98,6 +104,7 @@ PlatformaticIcon.defaultProps = {
98
104
  onClick: () => {},
99
105
  classes: '',
100
106
  tip: '',
107
+ tipClassName: '',
101
108
  disabled: false,
102
109
  inactive: false,
103
110
  internalOverHandling: false
package/src/components/PlatformaticIcon.module.css CHANGED
@@ -1,3 +1,6 @@
1
1
  .cursorPointer {
2
2
  @apply cursor-pointer;
3
+ }
4
+ .pltTooltip {
5
+ @apply relative;
3
6
  }
package/src/components/Tooltip.jsx ADDED
@@ -0,0 +1,65 @@
1
+ 'use strict'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Tooltip.module.css'
4
+ import { useEffect, useRef, useState } from 'react'
5
+ import { ALIGNMENT_CENTER, ALIGNMENT_LEFT, ALIGNMENTS } from './constants'
6
+
7
+ function Tooltip ({ tooltipClassName, text, visible, alignment }) {
8
+ const ref = useRef(null)
9
+ const alignmentClassName = styles[`${alignment}PltTooltip`]
10
+ const [className, setClassName] = useState(normalClassName())
11
+
12
+ useEffect(() => {
13
+ if (visible) {
14
+ setClassName(visibleClassName())
15
+ if (ref.current) {
16
+ if (alignment === ALIGNMENT_LEFT) {
17
+ ref.current.style.marginLeft = '-0px'
18
+ }
19
+ if (alignment === ALIGNMENT_CENTER) {
20
+ ref.current.style.marginLeft = '-' + ((ref.current.clientWidth / 2) - 12) + 'px'
21
+ }
22
+ }
23
+ } else {
24
+ setClassName(normalClassName())
25
+ }
26
+ }, [visible])
27
+
28
+ function normalClassName () {
29
+ return `${styles.pltTooltipText} ${tooltipClassName} ${alignmentClassName}`
30
+ }
31
+
32
+ function visibleClassName () {
33
+ return `${normalClassName()} ${styles.pltTooltipTextVisible}`
34
+ }
35
+
36
+ return <span ref={ref} className={className}>{text}</span>
37
+ }
38
+
39
+ Tooltip.propTypes = {
40
+ /**
41
+ * text
42
+ */
43
+ text: PropTypes.string,
44
+ /**
45
+ * tooltipClassName
46
+ */
47
+ tooltipClassName: PropTypes.string,
48
+ /**
49
+ * visible
50
+ */
51
+ visible: PropTypes.bool,
52
+ /**
53
+ * alignment
54
+ */
55
+ alignment: PropTypes.oneOf(ALIGNMENTS)
56
+ }
57
+
58
+ Tooltip.defaultProps = {
59
+ text: '',
60
+ tooltipClassName: '',
61
+ visible: false,
62
+ alignment: ALIGNMENT_LEFT
63
+ }
64
+
65
+ export default Tooltip
package/src/components/Tooltip.module.css ADDED
@@ -0,0 +1,31 @@
1
+
2
+ .pltTooltipText {
3
+ @apply bg-white text-rich-black text-center p-2;
4
+ margin-top: -65px;
5
+ z-index: 20;
6
+ position: fixed;
7
+ visibility: hidden;
8
+ border-radius: 6px;
9
+ padding: 0.25rem;
10
+ opacity: 0;
11
+ transition: opacity 0.3s;
12
+ }
13
+
14
+ .pltTooltipText::after {
15
+ content: "";
16
+ position: absolute;
17
+ top: 100%;
18
+ border-width: 5px;
19
+ border-style: solid;
20
+ border-color: white transparent transparent transparent;
21
+ }
22
+
23
+ .leftPltTooltip::after {
24
+ left: 5%;
25
+ margin-left: -5px;
26
+ }
27
+
28
+ .pltTooltipTextVisible {
29
+ visibility: visible;
30
+ opacity: 1;
31
+ }
package/src/components/constants.js CHANGED
@@ -68,3 +68,8 @@ export const OPACITY_20 = 20
68
68
  export const OPACITY_30 = 30
69
69
  export const OPACITY_60 = 60
70
70
  export const OPACITY_100 = 100
71
+
72
+ export const ALIGNMENT_LEFT = 'left'
73
+ export const ALIGNMENT_RIGHT = 'rigth'
74
+ export const ALIGNMENT_CENTER = 'center'
75
+ export const ALIGNMENTS = [ALIGNMENT_LEFT, ALIGNMENT_CENTER, ALIGNMENT_RIGHT]
package/src/components/icons/CLIIcon.jsx ADDED
@@ -0,0 +1,115 @@
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 CLIIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+ const filledClassName = styles[`filled-${color}`]
16
+
17
+ switch (size) {
18
+ case SMALL:
19
+ icon = (
20
+ <svg
21
+ width={16}
22
+ height={16}
23
+ viewBox='0 0 16 16'
24
+ fill='none'
25
+ xmlns='http://www.w3.org/2000/svg'
26
+ className={className}
27
+ >
28
+ <rect x='2' y='2' width='12' height='12' rx='1' stroke='none' />
29
+ <path d='M2 5H14' stroke='none' />
30
+ <circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
31
+ <circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
32
+ <circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
33
+ <path d='M4 7H9' stroke='none' strokeLinecap='round' />
34
+ <path d='M5 9H12' stroke='none' strokeLinecap='round' />
35
+ <path d='M5 11H12' stroke='none' strokeLinecap='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
+ >
49
+ <rect x='3' y='3' width='18' height='18' rx='1' stroke='none' strokeWidth={1.5} />
50
+ <path d='M3 7.5H21' stroke='none' strokeWidth={1.5} />
51
+ <circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
52
+ <circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
53
+ <circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
54
+ <path d='M6 10.5H13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
55
+ <path d='M7.5 13.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
56
+ <path d='M7.5 16.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
57
+
58
+ </svg>
59
+ )
60
+ break
61
+ case LARGE:
62
+ icon = (
63
+ <svg
64
+ width={40}
65
+ height={40}
66
+ viewBox='0 0 40 40'
67
+ fill='none'
68
+ xmlns='http://www.w3.org/2000/svg'
69
+ className={className}
70
+ >
71
+ <rect x='5' y='5' width='30' height='30' rx='1' stroke='none' strokeWidth={2} />
72
+ <path d='M5 12.5H35' stroke='none' strokeWidth={2} />
73
+ <circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
74
+ <circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
75
+ <circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
76
+ <path d='M10 17.5H22.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
77
+ <path d='M12.5 22.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' />
78
+ <path d='M12.5 27.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' />
79
+
80
+ </svg>
81
+ )
82
+ break
83
+
84
+ default:
85
+ break
86
+ }
87
+ return icon
88
+ }
89
+
90
+ CLIIcon.propTypes = {
91
+ /**
92
+ * color of text, icon and borders
93
+ */
94
+ color: PropTypes.oneOf(COLORS_ICON),
95
+ /**
96
+ * Size
97
+ */
98
+ size: PropTypes.oneOf(SIZES),
99
+ /**
100
+ * disabled
101
+ */
102
+ disabled: PropTypes.bool,
103
+ /**
104
+ * inactive
105
+ */
106
+ inactive: PropTypes.bool
107
+ }
108
+ CLIIcon.defaultProps = {
109
+ color: MAIN_DARK_BLUE,
110
+ size: MEDIUM,
111
+ disabled: false,
112
+ inactive: false
113
+ }
114
+
115
+ export default CLIIcon
package/src/components/icons/CirclePlayIcon.jsx ADDED
@@ -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 CirclePlayIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+ const filledClassName = styles[`filled-${color}`]
16
+
17
+ switch (size) {
18
+ case SMALL:
19
+ icon = (
20
+ <svg
21
+ width={16}
22
+ height={16}
23
+ viewBox='0 0 16 16'
24
+ fill='none'
25
+ xmlns='http://www.w3.org/2000/svg'
26
+ className={className}
27
+ >
28
+ <circle cx='8' cy='8' r='6' stroke='none' />
29
+ <path d='M7 10V6L10.5 8L7 10Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
30
+
31
+ </svg>
32
+ )
33
+ break
34
+ case MEDIUM:
35
+ icon = (
36
+ <svg
37
+ width={24}
38
+ height={24}
39
+ viewBox='0 0 24 24'
40
+ fill='none'
41
+ xmlns='http://www.w3.org/2000/svg'
42
+ className={className}
43
+ >
44
+ <circle cx='12' cy='12' r='9' stroke='none' strokeWidth={1.5} />
45
+ <path d='M10.5 15V9L15.75 12L10.5 15Z' fill='none' className={filledClassName} stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
46
+
47
+ </svg>
48
+ )
49
+ break
50
+ case LARGE:
51
+ icon = (
52
+ <svg
53
+ width={40}
54
+ height={40}
55
+ viewBox='0 0 40 40'
56
+ fill='none'
57
+ xmlns='http://www.w3.org/2000/svg'
58
+ className={className}
59
+ >
60
+ <circle cx='20' cy='20' r='15' stroke='none' strokeWidth={2} />
61
+ <path d='M17.5 25V15L26.25 20L17.5 25Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinejoin='round' />
62
+
63
+ </svg>
64
+ )
65
+ break
66
+
67
+ default:
68
+ break
69
+ }
70
+ return icon
71
+ }
72
+
73
+ CirclePlayIcon.propTypes = {
74
+ /**
75
+ * color of text, icon and borders
76
+ */
77
+ color: PropTypes.oneOf(COLORS_ICON),
78
+ /**
79
+ * Size
80
+ */
81
+ size: PropTypes.oneOf(SIZES),
82
+ /**
83
+ * disabled
84
+ */
85
+ disabled: PropTypes.bool,
86
+ /**
87
+ * inactive
88
+ */
89
+ inactive: PropTypes.bool
90
+ }
91
+ CirclePlayIcon.defaultProps = {
92
+ color: MAIN_DARK_BLUE,
93
+ size: MEDIUM,
94
+ disabled: false,
95
+ inactive: false
96
+ }
97
+
98
+ export default CirclePlayIcon
package/src/components/icons/CircleStopIcon.jsx ADDED
@@ -0,0 +1,97 @@
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 CircleStopIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+ const filledClassName = styles[`filled-${color}`]
16
+
17
+ switch (size) {
18
+ case SMALL:
19
+ icon = (
20
+ <svg
21
+ width={16}
22
+ height={16}
23
+ viewBox='0 0 16 16'
24
+ fill='none'
25
+ xmlns='http://www.w3.org/2000/svg'
26
+ className={className}
27
+ >
28
+ <circle cx='8' cy='8' r='6' stroke='none' />
29
+ <rect x='6' y='6' width='4' height='4' rx='1' fill='none' className={filledClassName} />
30
+
31
+ </svg>
32
+ )
33
+ break
34
+ case MEDIUM:
35
+ icon = (
36
+ <svg
37
+ width={24}
38
+ height={24}
39
+ viewBox='0 0 24 24'
40
+ fill='none'
41
+ xmlns='http://www.w3.org/2000/svg'
42
+ className={className}
43
+ >
44
+ <circle cx='12' cy='12' r='9' stroke='none' strokeWidth={1.5} />
45
+ <rect x='9' y='9.00006' width='6' height='6' rx='1' fill='none' className={filledClassName} />
46
+
47
+ </svg>
48
+ )
49
+ break
50
+ case LARGE:
51
+ icon = (
52
+ <svg
53
+ width={40}
54
+ height={40}
55
+ viewBox='0 0 40 40'
56
+ fill='none'
57
+ xmlns='http://www.w3.org/2000/svg'
58
+ className={className}
59
+ >
60
+ <circle cx='20' cy='20' r='15' stroke='none' strokeWidth={2} />
61
+ <rect x='14.9998' y='15.0001' width='10' height='10' rx='1' fill='none' className={filledClassName} />
62
+ </svg>
63
+ )
64
+ break
65
+
66
+ default:
67
+ break
68
+ }
69
+ return icon
70
+ }
71
+
72
+ CircleStopIcon.propTypes = {
73
+ /**
74
+ * color of text, icon and borders
75
+ */
76
+ color: PropTypes.oneOf(COLORS_ICON),
77
+ /**
78
+ * Size
79
+ */
80
+ size: PropTypes.oneOf(SIZES),
81
+ /**
82
+ * disabled
83
+ */
84
+ disabled: PropTypes.bool,
85
+ /**
86
+ * inactive
87
+ */
88
+ inactive: PropTypes.bool
89
+ }
90
+ CircleStopIcon.defaultProps = {
91
+ color: MAIN_DARK_BLUE,
92
+ size: MEDIUM,
93
+ disabled: false,
94
+ inactive: false
95
+ }
96
+
97
+ export default CircleStopIcon
package/src/components/icons/StoppedAppIcon.jsx ADDED
@@ -0,0 +1,107 @@
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 StoppedAppIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+
16
+ switch (size) {
17
+ case SMALL:
18
+ icon = (
19
+ <svg
20
+ width={16}
21
+ height={16}
22
+ viewBox='0 0 16 16'
23
+ fill='none'
24
+ xmlns='http://www.w3.org/2000/svg'
25
+ className={className}
26
+ >
27
+ <path d='M7.5 2H3C2.44772 2 2 2.44772 2 3V9.34775C2 9.90004 2.44772 10.3478 3 10.3478H13C13.5523 10.3478 14 9.90004 14 9.34775V5.84783V3.04352C14 2.49124 13.5523 2.04352 13 2.04352H11.5' stroke='none' strokeLinecap='round' />
28
+ <rect x='6' y='10.3477' width='4' height='2.08694' stroke='none' />
29
+ <path d='M4 13.4348C4 12.8825 4.44772 12.4348 5 12.4348H11C11.5523 12.4348 12 12.8825 12 13.4348V14H4V13.4348Z' stroke='none' />
30
+ <path d='M7.44287 4.67217H8.0786H8.71432L9.50012 2.04346L10.2859 4.67217H12.8288L10.7716 6.29681L11.5574 8.92553L9.50012 7.30089L7.44287 8.92553L8.22867 6.29681L7.5 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
31
+ <path d='M6 5L6 7' stroke='none' strokeLinecap='round' />
32
+ <path d='M4 5L4 7' stroke='none' strokeLinecap='round' />
33
+
34
+ </svg>
35
+ )
36
+ break
37
+ case MEDIUM:
38
+ icon = (
39
+ <svg
40
+ width={24}
41
+ height={24}
42
+ viewBox='0 0 24 24'
43
+ fill='none'
44
+ xmlns='http://www.w3.org/2000/svg'
45
+ className={className}
46
+ >
47
+ <path d='M11.25 3H4C3.44772 3 3 3.44771 3 4V14.5216C3 15.0739 3.44772 15.5216 4 15.5216H20C20.5523 15.5216 21 15.0739 21 14.5216V8.77175V4.06528C21 3.513 20.5523 3.06528 20 3.06528H17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
48
+ <rect x='9' y='15.5215' width='6' height='3.13041' stroke='none' strokeWidth={1.5} />
49
+ <path d='M6 19.6521C6 19.0998 6.44772 18.6521 7 18.6521H17C17.5523 18.6521 18 19.0998 18 19.6521V20.9999H6V19.6521Z' stroke='none' strokeWidth={1.5} />
50
+ <path d='M11.1641 7.00826H12.1176H13.0712L14.2499 3.06519L15.4286 7.00826H19.243L16.1571 9.44521L17.3358 13.3883L14.2499 10.9513L11.1641 13.3883L12.3428 9.44521L11.2498 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <path d='M9 7.5L9 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
52
+ <path d='M6 7.5L6 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
53
+ </svg>
54
+ )
55
+ break
56
+ case LARGE:
57
+ icon = (
58
+ <svg
59
+ width={40}
60
+ height={40}
61
+ viewBox='0 0 40 40'
62
+ fill='none'
63
+ xmlns='http://www.w3.org/2000/svg'
64
+ className={className}
65
+ >
66
+ <path d='M18.75 5H6C5.44772 5 5 5.44771 5 6V24.8694C5 25.4217 5.44772 25.8694 6 25.8694H34C34.5523 25.8694 35 25.4217 35 24.8694V14.6196V6.1088C35 5.55652 34.5523 5.1088 34 5.1088H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
67
+ <rect x='15' y='25.8691' width='10' height='5.21734' stroke='none' strokeWidth={2} />
68
+ <path d='M10 32.0869C10 31.5346 10.4477 31.0869 11 31.0869H29C29.5523 31.0869 30 31.5346 30 32.0869V34.9999H10V32.0869Z' stroke='none' strokeWidth={2} />
69
+ <path d='M18.6069 11.6807H20.1962H21.7856L23.7501 5.10889L25.7146 11.6807H32.0718L26.9287 15.7423L28.8932 22.3141L23.7501 18.2525L18.6069 22.3141L20.5714 15.7423L18.7498 15.0002' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70
+ <path d='M15 12.5L15 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
71
+ <path d='M10 12.5L10 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
72
+ </svg>
73
+ )
74
+ break
75
+
76
+ default:
77
+ break
78
+ }
79
+ return icon
80
+ }
81
+
82
+ StoppedAppIcon.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
+ StoppedAppIcon.defaultProps = {
101
+ color: MAIN_DARK_BLUE,
102
+ size: MEDIUM,
103
+ disabled: false,
104
+ inactive: false
105
+ }
106
+
107
+ export default StoppedAppIcon