@platformatic/ui-components 0.2.1 → 0.2.3

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 (20) hide show
  1. package/dist/assets/index-DGu0wALr.css +1 -0
  2. package/dist/assets/index-DcjcxgBQ.js +206 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Button.jsx +18 -4
  6. package/src/components/Button.module.css +6 -0
  7. package/src/components/ModalDirectional.jsx +17 -3
  8. package/src/components/ModalDirectional.module.css +1 -1
  9. package/src/components/PlatformaticIcon.jsx +21 -5
  10. package/src/components/constants.js +3 -2
  11. package/src/components/icons/CreateAppIcon.jsx +108 -0
  12. package/src/components/icons/Icons.module.css +11 -1
  13. package/src/components/icons/ImportAppIcon.jsx +103 -0
  14. package/src/components/icons/RecentAppsIcon.jsx +125 -0
  15. package/src/components/icons/index.js +6 -2
  16. package/src/stories/Button.stories.jsx +285 -3
  17. package/src/stories/PlatformaticIcon.stories.jsx +2 -5
  18. package/dist/assets/index-BEfzfEAe.js +0 -206
  19. package/dist/assets/index-Bk6UpmQr.css +0 -1
  20. package/src/components/icons/ImportApplicationIcon.jsx +0 -67
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-BEfzfEAe.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-Bk6UpmQr.css">
7
+ <script type="module" crossorigin src="/assets/index-DcjcxgBQ.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-DGu0wALr.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
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.1",
4
+ "version": "0.2.3",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -15,9 +15,10 @@ import {
15
15
  LARGE,
16
16
  CHANGE_BACKGROUND_COLOR,
17
17
  BUTTON_BACKGROUNDS_COLOR_HOVER,
18
+ ACTIVE_AND_INACTIVE_STATUS,
18
19
  TRANSPARENT
19
20
  } from './constants'
20
-
21
+ // ${inactive ? styles.inactive : styles.active}
21
22
  function Button ({
22
23
  textClass,
23
24
  paddingClass,
@@ -55,6 +56,7 @@ function Button ({
55
56
  }
56
57
  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
57
58
  const [hover, setHover] = useState(false)
59
+ const [inactive, setInactive] = useState(false)
58
60
  const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
59
61
 
60
62
  useEffect(() => {
@@ -73,25 +75,37 @@ function Button ({
73
75
  case CHANGE_BACKGROUND_COLOR:
74
76
  setBackgroundClassName(`${commonStyles['background-color-' + hoverEffectProperties.changeBackgroundColor]} `)
75
77
  break
78
+ case ACTIVE_AND_INACTIVE_STATUS:
79
+ setInactive(false)
80
+ setBackgroundClassName(`${restClassName()} ${styles.active}`)
81
+ break
76
82
  default:
77
83
  break
78
84
  }
79
85
  } else {
80
- setBackgroundClassName(restClassName())
86
+ if (hoverEffect === ACTIVE_AND_INACTIVE_STATUS) {
87
+ setInactive(true)
88
+ setBackgroundClassName(`${restClassName()} ${styles.inactive}`)
89
+ } else {
90
+ setBackgroundClassName(restClassName())
91
+ }
81
92
  }
82
93
  }
83
94
  }, [disabled, hover, hoverEffect])
84
95
 
85
96
  function restClassName () {
97
+ if (hoverEffect === ACTIVE_AND_INACTIVE_STATUS) {
98
+ return `${commonStyles['background-color-' + backgroundColor]} ${commonStyles['background-color-opaque-70']} `
99
+ }
86
100
  return `${commonStyles['background-color-' + backgroundColor]} `
87
101
  }
88
102
 
89
103
  return (
90
104
  <button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
91
105
  <div className={`${contentClassName} ${backgroundClassName}`}>
92
- {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
106
+ {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
93
107
  <span className={styles.label}>{label}</span>
94
- {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
108
+ {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
95
109
  </div>
96
110
  </button>
97
111
  )
package/src/components/Button.module.css CHANGED
@@ -113,4 +113,10 @@
113
113
  }
114
114
  .label {
115
115
  @apply w-max;
116
+ }
117
+ .inactive {
118
+ @apply opacity-70;
119
+ }
120
+ .active {
121
+ @apply opacity-100;
116
122
  }
package/src/components/ModalDirectional.jsx CHANGED
@@ -4,10 +4,12 @@ import PropTypes from 'prop-types'
4
4
  import useEscapeKey from '../hooks/useEscapeKey'
5
5
  import styles from './ModalDirectional.module.css'
6
6
  import {
7
+ ACTIVE_AND_INACTIVE_STATUS,
8
+ RICH_BLACK,
7
9
  SMALL,
8
10
  WHITE
9
11
  } from './constants'
10
- import PlatformaticIcon from './PlatformaticIcon'
12
+ import Button from './Button'
11
13
 
12
14
  function ModalDirectional ({
13
15
  setIsOpen,
@@ -41,8 +43,20 @@ function ModalDirectional ({
41
43
  <div className={variantModalClassName}>
42
44
  <div className={classNameLefty}>
43
45
  <div className={styles.headerClassName}>
44
- <PlatformaticIcon iconName='ArrowLongLeftIcon' color={WHITE} size={SMALL} onClick={() => closeModal()} />
45
- <span className={titleClassName}>{title}</span>
46
+ <Button
47
+ color={WHITE}
48
+ backgroundColor={RICH_BLACK}
49
+ onClick={() => closeModal()}
50
+ hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
51
+ bordered={false}
52
+ platformaticIcon={{
53
+ iconName: 'ArrowLongLeftIcon',
54
+ size: SMALL,
55
+ color: WHITE
56
+ }}
57
+ label={title}
58
+ textClass={titleClassName}
59
+ />
46
60
  </div>
47
61
  {children}
48
62
  </div>
package/src/components/ModalDirectional.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @apply fixed top-0 left-0 w-full h-full z-10 bg-rich-black/75;
3
3
  }
4
4
  .container {
5
- @apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white border-l;
5
+ @apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white/30 border-l;
6
6
  }
7
7
  .normalLayout {
8
8
  @apply max-w-[75%] min-w-[75%];
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  'use strict'
2
- import React from 'react'
2
+ import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import ReactTooltip from 'react-tooltip'
5
5
  import Icons from './icons'
@@ -15,8 +15,10 @@ function PlatformaticIcon ({
15
15
  tip,
16
16
  disabled,
17
17
  inactive,
18
+ internalOverHandling,
18
19
  ...rest
19
20
  }) {
21
+ const [hover, setHover] = useState(false)
20
22
  let icon = <></>
21
23
  if (iconName) {
22
24
  icon = React.createElement(Icons[`${iconName}`], {
@@ -24,13 +26,22 @@ function PlatformaticIcon ({
24
26
  size,
25
27
  tip,
26
28
  disabled,
27
- inactive,
29
+ inactive: internalOverHandling ? !hover : inactive,
28
30
  ...rest
29
31
  })
30
32
  if (onClick && !disabled) {
31
33
  let className = styles.cursorPointer
32
34
  if (classes) className += ` ${classes}`
33
- icon = (<div className={className} onClick={onClick}>{icon}</div>)
35
+ icon = (
36
+ <div
37
+ className={className}
38
+ onClick={onClick}
39
+ onMouseOver={() => internalOverHandling && !disabled ? setHover(true) : {}}
40
+ onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
41
+ >
42
+ {icon}
43
+ </div>
44
+ )
34
45
  }
35
46
  }
36
47
  return (
@@ -73,7 +84,11 @@ PlatformaticIcon.propTypes = {
73
84
  /**
74
85
  * inactive
75
86
  */
76
- inactive: PropTypes.bool
87
+ inactive: PropTypes.bool,
88
+ /**
89
+ * handleOverInternally
90
+ */
91
+ internalOverHandling: PropTypes.bool
77
92
  }
78
93
 
79
94
  PlatformaticIcon.defaultProps = {
@@ -84,7 +99,8 @@ PlatformaticIcon.defaultProps = {
84
99
  classes: '',
85
100
  tip: '',
86
101
  disabled: false,
87
- inactive: false
102
+ inactive: false,
103
+ internalOverHandling: false
88
104
  }
89
105
 
90
106
  export default PlatformaticIcon
package/src/components/constants.js CHANGED
@@ -26,13 +26,14 @@ export const PADDING_SIZES = [NONE, ...SIZES]
26
26
  export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
27
27
  export const BOX_SHADOW = 'box-shadow'
28
28
  export const DULLS_BACKGROUND_COLOR = 'background-color-opaque'
29
+ export const ACTIVE_AND_INACTIVE_STATUS = 'active-and-inactive-status'
29
30
  export const UNDERLINE = 'underline'
30
31
  export const FULL_WIDTH = 'full-width'
31
- export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERLINE, CHANGE_BACKGROUND_COLOR]
32
+ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERLINE, CHANGE_BACKGROUND_COLOR, ACTIVE_AND_INACTIVE_STATUS]
32
33
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
33
34
  export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
34
35
 
35
- export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
36
+ export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
36
37
  export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
37
38
  export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE]
38
39
 
package/src/components/icons/CreateAppIcon.jsx ADDED
@@ -0,0 +1,108 @@
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 CreateAppIcon = ({ 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='M9.5 2.04346L10.2858 4.67217H12.8287L10.7714 6.29681L11.5572 8.92553L9.5 7.30089L7.44275 8.92553L8.22855 6.29681L6.1713 4.67217H8.7142L9.5 2.04346Z' stroke='none' strokeLinejoin='round' />
31
+ <path d='M5 5.30444V8.02181' stroke='none' strokeLinecap='round' />
32
+ <path d='M6.25 6.66309L3.75 6.66309' stroke='none' strokeLinecap='round' />
33
+ </svg>
34
+ )
35
+ break
36
+ case MEDIUM:
37
+ icon = (
38
+ <svg
39
+ width={24}
40
+ height={24}
41
+ viewBox='0 0 24 24'
42
+ fill='none'
43
+ xmlns='http://www.w3.org/2000/svg'
44
+ className={className}
45
+ >
46
+ <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' />
47
+ <rect x='9' y='15.5215' width='6' height='3.13041' stroke='none' strokeWidth={1.5} />
48
+ <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} />
49
+ <path d='M14.25 3.06519L15.4287 7.00826L19.243 7.00826L16.1572 9.44521L17.3359 13.3883L14.25 10.9513L11.1641 13.3883L12.3428 9.44521L9.25695 7.00826L13.0713 7.00826L14.25 3.06519Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50
+ <path d='M7.5 7.95654V12.0326' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
51
+ <path d='M9.375 9.99463L5.625 9.99463' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
52
+
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='M23.75 5.10889L25.7145 11.6807H32.0717L26.9286 15.7423L28.8931 22.3141L23.75 18.2525L18.6069 22.3141L20.5714 15.7423L15.4283 11.6807H21.7855L23.75 5.10889Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
70
+ <path d='M12.5 13.261V20.0544' stroke='none' strokeWidth={2} strokeLinecap='round' />
71
+ <path d='M15.625 16.6577L9.375 16.6577' stroke='none' strokeWidth={2} strokeLinecap='round' />
72
+
73
+ </svg>
74
+ )
75
+ break
76
+
77
+ default:
78
+ break
79
+ }
80
+ return icon
81
+ }
82
+
83
+ CreateAppIcon.propTypes = {
84
+ /**
85
+ * color of text, icon and borders
86
+ */
87
+ color: PropTypes.oneOf(COLORS_ICON),
88
+ /**
89
+ * Size
90
+ */
91
+ size: PropTypes.oneOf(SIZES),
92
+ /**
93
+ * disabled
94
+ */
95
+ disabled: PropTypes.bool,
96
+ /**
97
+ * inactive
98
+ */
99
+ inactive: PropTypes.bool
100
+ }
101
+ CreateAppIcon.defaultProps = {
102
+ color: MAIN_DARK_BLUE,
103
+ size: MEDIUM,
104
+ disabled: false,
105
+ inactive: false
106
+ }
107
+
108
+ export default CreateAppIcon
package/src/components/icons/Icons.module.css CHANGED
@@ -1,3 +1,11 @@
1
+ .rich-black > circle,
2
+ .rich-black > ellipse,
3
+ .rich-black > rect,
4
+ .rich-black > line,
5
+ .rich-black > path {
6
+ @apply stroke-rich-black;
7
+ }
8
+
1
9
  .error-red > circle,
2
10
  .error-red > ellipse,
3
11
  .error-red > rect,
@@ -46,6 +54,9 @@
46
54
  @apply stroke-white;
47
55
  }
48
56
 
57
+ .filled-rich-black {
58
+ @apply fill-rich-black
59
+ }
49
60
  .filled-white {
50
61
  @apply fill-white
51
62
  }
@@ -71,7 +82,6 @@
71
82
  .fill-circle-main-dark-blue > circle {
72
83
  @apply fill-main-dark-blue;
73
84
  }
74
-
75
85
  .svgClassName {
76
86
  @apply block shrink-0;
77
87
  overflow-clip-margin: unset;
package/src/components/icons/ImportAppIcon.jsx ADDED
@@ -0,0 +1,103 @@
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 ImportAppIcon = ({ 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='M13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V3C14 2.44772 13.5523 2 13 2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
28
+ <rect x='6' y='10' width='4' height='2' stroke='none' />
29
+ <path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
30
+ <path d='M10.5 3.5L11.0613 5.22746H12.8776L11.4082 6.29508L11.9695 8.02254L10.5 6.95492L9.03054 8.02254L9.59182 6.29508L8.12236 5.22746H9.93871L10.5 3.5Z' stroke='none' strokeLinejoin='round' />
31
+ <path d='M9 6H4M4 6L6 4M4 6L6 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32
+ </svg>
33
+ )
34
+ break
35
+ case MEDIUM:
36
+ icon = (
37
+ <svg
38
+ width={24}
39
+ height={24}
40
+ viewBox='0 0 24 24'
41
+ fill='none'
42
+ xmlns='http://www.w3.org/2000/svg'
43
+ className={className}
44
+ >
45
+ <path d='M20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V4C21 3.44772 20.5523 3 20 3Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
46
+ <rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
47
+ <path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
48
+ <path d='M15.75 5.25L16.5919 7.84119H19.3165L17.1123 9.44263L17.9542 12.0338L15.75 10.4324L13.5458 12.0338L14.3877 9.44263L12.1835 7.84119H14.9081L15.75 5.25Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
49
+ <path d='M13.5 9H6M6 9L9 6M6 9L9 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ </svg>
51
+ )
52
+ break
53
+ case LARGE:
54
+ icon = (
55
+ <svg
56
+ width={40}
57
+ height={40}
58
+ viewBox='0 0 40 40'
59
+ fill='none'
60
+ xmlns='http://www.w3.org/2000/svg'
61
+ className={className}
62
+ >
63
+ <path d='M34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V6C35 5.44772 34.5523 5 34 5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
64
+ <rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
65
+ <path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
66
+ <path d='M26.25 8.75L27.6532 13.0686H32.1941L28.5204 15.7377L29.9237 20.0564L26.25 17.3873L22.5763 20.0564L23.9796 15.7377L20.3059 13.0686H24.8468L26.25 8.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
67
+ <path d='M22.5 15H10M10 15L15 10M10 15L15 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ </svg>
69
+ )
70
+ break
71
+
72
+ default:
73
+ break
74
+ }
75
+ return icon
76
+ }
77
+
78
+ ImportAppIcon.propTypes = {
79
+ /**
80
+ * color of text, icon and borders
81
+ */
82
+ color: PropTypes.oneOf(COLORS_ICON),
83
+ /**
84
+ * Size
85
+ */
86
+ size: PropTypes.oneOf(SIZES),
87
+ /**
88
+ * disabled
89
+ */
90
+ disabled: PropTypes.bool,
91
+ /**
92
+ * inactive
93
+ */
94
+ inactive: PropTypes.bool
95
+ }
96
+ ImportAppIcon.defaultProps = {
97
+ color: MAIN_DARK_BLUE,
98
+ size: MEDIUM,
99
+ disabled: false,
100
+ inactive: false
101
+ }
102
+
103
+ export default ImportAppIcon
package/src/components/icons/RecentAppsIcon.jsx ADDED
@@ -0,0 +1,125 @@
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 RecentAppsIcon = ({ 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='M12.5 2.95996H13C13.5523 2.95996 14 3.40768 14 3.95996V4M14 7V9.63996C14 10.1922 13.5523 10.64 13 10.64H3C2.44772 10.64 2 10.1922 2 9.63996V8.5' stroke='none' strokeLinecap='round' />
28
+ <rect x='6' y='10.6399' width='4' height='1.92' stroke='none' />
29
+ <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
30
+ <path d='M10 5.5L10.0025 5.48754M9.5 6.73131L9 9L10.5938 7.58359L12.7569 9L11.8875 6.73131L14 5.48754H11.3262L10.5 3L10.0025 5.48754M10.0025 5.48754L9 5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
31
+ <rect x='2' y='3.5' width='6' height='6' rx='1' stroke='none' />
32
+ <path d='M2 4.83325H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <line x1='3.5' y1='3.16675' x2='3.5' y2='2.50008' stroke='none' strokeLinecap='round' />
34
+ <line x1='6.16675' y1='3.16675' x2='6.16675' y2='2.50008' stroke='none' strokeLinecap='round' />
35
+ <rect x='3.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
36
+ <rect x='3.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
37
+ <rect x='5.33325' y='5.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
38
+ <rect x='5.33325' y='7.5' width='1.33333' height='1.33333' rx='0.5' fill='none' />
39
+
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
+ <path d='M18 4.43994H20C20.5523 4.43994 21 4.88766 21 5.43994V6M21 10.5V14.9599C21 15.5122 20.5523 15.9599 20 15.9599H4C3.44772 15.9599 3 15.5122 3 14.9599V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
54
+ <rect x='9' y='15.96' width='6' height='2.88' stroke='none' strokeWidth={1.5} />
55
+ <path d='M6 19.8398C6 19.2876 6.44772 18.8398 7 18.8398H17C17.5523 18.8398 18 19.2876 18 19.8398V20.9998H6V19.8398Z' stroke='none' strokeWidth={1.5} />
56
+ <path d='M15 8.25L15.0037 8.23131M14.25 10.097L13.5 13.5L15.8906 11.3754L19.1353 13.5L17.8313 10.097L21 8.23131H16.9894L15.75 4.5L15.0037 8.23131M15.0037 8.23131L13.5 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57
+ <rect x='3' y='5.25' width='9' height='9' rx='1' stroke='none' strokeWidth={1.5} />
58
+ <path d='M3 7.25H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
59
+ <line x1='5.25' y1='4.75' x2='5.25' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
60
+ <line x1='9.25' y1='4.75' x2='9.25' y2='3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
61
+ <rect x='5' y='8.25' width='2' height='2' rx='0.5' fill='none' />
62
+ <rect x='5' y='11.25' width='2' height='2' rx='0.5' fill='none' />
63
+ <rect x='8' y='8.25' width='2' height='2' rx='0.5' fill='none' />
64
+ <rect x='8' y='11.25' width='2' height='2' rx='0.5' fill='none' />
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='M29 7.3999H34C34.5523 7.3999 35 7.84762 35 8.3999V10M35 17.5V25.5999C35 26.1522 34.5523 26.5999 34 26.5999H6C5.44772 26.5999 5 26.1522 5 25.5999V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
79
+ <rect x='15' y='26.5999' width='10' height='4.8' stroke='none' strokeWidth={2} />
80
+ <path d='M10 32.3999C10 31.8476 10.4477 31.3999 11 31.3999H29C29.5523 31.3999 30 31.8476 30 32.3999V34.9999H10V32.3999Z' stroke='none' strokeWidth={2} />
81
+ <path d='M25 13.75L25.0062 13.7188M23.75 16.8283L22.5 22.5L26.4844 18.959L31.8922 22.5L29.7188 16.8283L35 13.7188H28.3156L26.25 7.5L25.0062 13.7188M25.0062 13.7188L22.5 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
82
+ <rect x='5' y='8.75' width='15' height='15' rx='1' stroke='none' strokeWidth={2} />
83
+ <path d='M5 12.083H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
84
+ <line x1='9' y1='8.16699' x2='9' y2='6.00033' stroke='none' strokeWidth={2} strokeLinecap='round' />
85
+ <line x1='15.667' y1='8.16699' x2='15.667' y2='6.00033' stroke='none' strokeWidth={2} strokeLinecap='round' />
86
+ <rect x='8.33301' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
87
+ <rect x='8.33301' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
88
+ <rect x='13.333' y='13.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
89
+ <rect x='13.333' y='18.75' width='3.33333' height='3.33333' rx='0.5' fill='none' />
90
+ </svg>
91
+ )
92
+ break
93
+
94
+ default:
95
+ break
96
+ }
97
+ return icon
98
+ }
99
+
100
+ RecentAppsIcon.propTypes = {
101
+ /**
102
+ * color of text, icon and borders
103
+ */
104
+ color: PropTypes.oneOf(COLORS_ICON),
105
+ /**
106
+ * Size
107
+ */
108
+ size: PropTypes.oneOf(SIZES),
109
+ /**
110
+ * disabled
111
+ */
112
+ disabled: PropTypes.bool,
113
+ /**
114
+ * inactive
115
+ */
116
+ inactive: PropTypes.bool
117
+ }
118
+ RecentAppsIcon.defaultProps = {
119
+ color: MAIN_DARK_BLUE,
120
+ size: MEDIUM,
121
+ disabled: false,
122
+ inactive: false
123
+ }
124
+
125
+ export default RecentAppsIcon
package/src/components/icons/index.js CHANGED
@@ -48,6 +48,7 @@ import ComputerIcon from './ComputerIcon'
48
48
  import CopyPasteIcon from './CopyPasteIcon'
49
49
  import CreditCardIcon from './CreditCardIcon'
50
50
  import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
51
+ import CreateAppIcon from './CreateAppIcon'
51
52
  import CreatingAppIcon from './CreatingAppIcon'
52
53
  import DatabaseIcon from './DatabaseIcon'
53
54
  import DatabaseMigrationIcon from './DatabaseMigrationIcon'
@@ -69,7 +70,7 @@ import GitHubRepoIcon from './GitHubRepoIcon'
69
70
  import GitHubRepo2Icon from './GitHubRepo2Icon'
70
71
  import GraphQLIcon from './GraphQLIcon'
71
72
  import KeyIcon from './KeyIcon'
72
- import ImportApplicationIcon from './ImportApplicationIcon'
73
+ import ImportAppIcon from './ImportAppIcon'
73
74
  import LabelIcon from './LabelIcon'
74
75
  import LayersIcon from './LayersIcon'
75
76
  import LensIcon from './LensIcon'
@@ -90,6 +91,7 @@ import PreviewPRIcon from './PreviewPRIcon'
90
91
  import PullRequestIcon from './PullRequestIcon'
91
92
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
92
93
  import RequestOwnershipIcon from './RequestOwnershipIcon'
94
+ import RecentAppsIcon from './RecentAppsIcon'
93
95
  import RestartIcon from './RestartIcon'
94
96
  import RocketIcon from './RocketIcon'
95
97
  import RunningIcon from './RunningIcon'
@@ -179,6 +181,7 @@ export default {
179
181
  CopyPasteIcon,
180
182
  CreditCardIcon,
181
183
  ConfigureDatabaseIcon,
184
+ CreateAppIcon,
182
185
  CreatingAppIcon,
183
186
  DatabaseIcon,
184
187
  DatabaseMigrationIcon,
@@ -199,7 +202,7 @@ export default {
199
202
  GitHubRepoIcon,
200
203
  GitHubRepo2Icon,
201
204
  GraphQLIcon,
202
- ImportApplicationIcon,
205
+ ImportAppIcon,
203
206
  KeyIcon,
204
207
  LabelIcon,
205
208
  LayersIcon,
@@ -221,6 +224,7 @@ export default {
221
224
  PullRequestIcon,
222
225
  PullRequestLoadingIcon,
223
226
  RequestOwnershipIcon,
227
+ RecentAppsIcon,
224
228
  RestartIcon,
225
229
  RocketIcon,
226
230
  RunningIcon,