@platformatic/ui-components 0.1.133 → 0.1.135

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 (16) hide show
  1. package/dist/assets/index-706e83c1.js +206 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Button.jsx +8 -5
  5. package/src/components/Button.module.css +8 -0
  6. package/src/components/ButtonFullRounded.jsx +16 -10
  7. package/src/components/FollowUs.jsx +49 -21
  8. package/src/components/forms/Input.jsx +10 -5
  9. package/src/components/forms/Input.module.css +1 -1
  10. package/src/components/forms/InputWithSeparator.jsx +51 -20
  11. package/src/components/forms/InputWithSeparator.module.css +15 -3
  12. package/src/components/icons/ComputerIcon.jsx +89 -0
  13. package/src/components/icons/UserComputerIcon.jsx +98 -0
  14. package/src/components/icons/index.js +6 -2
  15. package/tailwind.config.cjs +2 -1
  16. package/dist/assets/index-a9744c3f.js +0 -206
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-a9744c3f.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-706e83c1.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index-89e9ad97.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.1.133",
4
+ "version": "0.1.135",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -22,6 +22,7 @@ function Button ({
22
22
  selected,
23
23
  ...rest
24
24
  }) {
25
+ const containerClassName = `${styles.container} ${styles['color-' + color]} ${commonStyles['background-color-' + backgroundColor]}`
25
26
  let buttonClassName = classes
26
27
  buttonClassName += ` ${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
27
28
  if (!bordered) buttonClassName += ` ${styles['no-border']}`
@@ -46,11 +47,13 @@ function Button ({
46
47
  if (fullWidth) buttonClassName += ` ${styles.fullWidth}`
47
48
  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
48
49
  return (
49
- <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
50
- {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
51
- <span className={styles.label}>{label}</span>
52
- {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} /> : null}
53
- </button>
50
+ <div className={containerClassName}>
51
+ <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
52
+ {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
53
+ <span className={styles.label}>{label}</span>
54
+ {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
55
+ </button>
56
+ </div>
54
57
  )
55
58
  }
56
59
 
package/src/components/Button.module.css CHANGED
@@ -1,5 +1,9 @@
1
+ .container {
2
+ @apply rounded border-0
3
+ }
1
4
  .button {
2
5
  @apply rounded text-center cursor-pointer font-normal border border-solid box-border flex items-center justify-center gap-x-2;
6
+ background: inherit;
3
7
  }
4
8
  .fontBold {
5
9
  @apply font-semibold;
@@ -57,6 +61,10 @@
57
61
  .color-transparent{
58
62
  @apply text-transparent border-transparent;
59
63
  }
64
+ .color-rich-black{
65
+ @apply text-rich-black border-rich-black;
66
+ }
67
+
60
68
  .no-border {
61
69
  @apply border-0;
62
70
  }
package/src/components/ButtonFullRounded.jsx CHANGED
@@ -17,32 +17,33 @@ function ButtonFullRounded ({
17
17
  hoverEffect,
18
18
  bordered,
19
19
  tip,
20
- selected
20
+ selected,
21
+ buttonClassName
21
22
  }) {
22
23
  const padding = commonStyles[`padding--${paddingSize}`]
23
24
  const containerClassName = `${className} border-0 ${styles.roundedFull}`
24
- let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
25
+ let innerButtonClassName = `${buttonClassName} ${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
25
26
  if (bordered) {
26
- buttonClassName += ` ${styles.applyBorder} ` + commonStyles[`bordered--${iconColor}`]
27
+ innerButtonClassName += ` ${styles.applyBorder} ` + commonStyles[`bordered--${iconColor}`]
27
28
  } else {
28
- buttonClassName += ` ${styles.borderLess} `
29
+ innerButtonClassName += ` ${styles.borderLess} `
29
30
  }
30
31
  if (disabled) {
31
- buttonClassName += ` ${styles.disabled}`
32
+ innerButtonClassName += ` ${styles.disabled}`
32
33
  } else {
33
34
  switch (hoverEffect) {
34
35
  case BACKGROUND_COLOR_OPAQUE:
35
- buttonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
36
+ innerButtonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
36
37
  break
37
38
  default:
38
39
  break
39
40
  }
40
41
  }
41
- if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${iconColor}`]
42
+ if (selected) innerButtonClassName += ' ' + commonStyles[`selected-background-color-${iconColor}`]
42
43
 
43
44
  return (
44
45
  <div className={containerClassName}>
45
- <button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt} type='button'>
46
+ <button className={innerButtonClassName} disabled={disabled} onClick={onClick} alt={alt} type='button'>
46
47
  <PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} tip={tip} />
47
48
  </button>
48
49
  </div>
@@ -93,7 +94,11 @@ ButtonFullRounded.propTypes = {
93
94
  /**
94
95
  * Selected: default false
95
96
  */
96
- selected: PropTypes.bool
97
+ selected: PropTypes.bool,
98
+ /**
99
+ * buttonClassName
100
+ */
101
+ buttonClassName: PropTypes.string
97
102
 
98
103
  }
99
104
 
@@ -109,7 +114,8 @@ ButtonFullRounded.defaultProps = {
109
114
  hoverEffect: '',
110
115
  bordered: false,
111
116
  tip: '',
112
- selected: false
117
+ selected: false,
118
+ buttonClassName: ''
113
119
  }
114
120
 
115
121
  export default ButtonFullRounded
package/src/components/FollowUs.jsx CHANGED
@@ -1,9 +1,28 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './FollowUs.module.css'
4
4
  import Icons from './icons'
5
5
  import { MAIN_GREEN, WHITE, MEDIUM, SMALL, MAIN_DARK_BLUE, LIGHT_GREEN } from './constants'
6
6
 
7
+ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize }) {
8
+ const [hover, setHover] = useState(false)
9
+
10
+ const icon = React.createElement(Icons[`${iconName}`], {
11
+ color: iconColor,
12
+ size: iconSize,
13
+ tip: '',
14
+ disabled: !hover
15
+ })
16
+
17
+ return (
18
+ <div className={iconClassName} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
19
+ <a href={href} target='_blank' rel='noopener noreferrer'>
20
+ {icon}
21
+ </a>
22
+ </div>
23
+ )
24
+ }
25
+
7
26
  function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
8
27
  const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
9
28
  const className = styles[`container${suffix}`]
@@ -14,26 +33,35 @@ function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize,
14
33
  <div className={labelClassName}>
15
34
  {label}
16
35
  </div>
17
- <div className={iconClassName}>
18
- <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
19
- <Icons.SocialXIcon color={iconColor} size={iconSize} />
20
- </a>
21
- </div>
22
- <div className={iconClassName}>
23
- <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
24
- <Icons.SocialLinkedInIcon color={iconColor} size={iconSize} />
25
- </a>
26
- </div>
27
- <div className={iconClassName}>
28
- <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
29
- <Icons.SocialGitHubIcon color={iconColor} size={iconSize} />
30
- </a>
31
- </div>
32
- <div className={iconClassName}>
33
- <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
34
- <Icons.SocialDiscordIcon color={iconColor} size={iconSize} />
35
- </a>
36
- </div>
36
+
37
+ <SocialElement
38
+ href='https://twitter.com/platformatic'
39
+ iconName='SocialXIcon'
40
+ iconClassName={iconClassName}
41
+ iconColor={iconColor}
42
+ iconSize={iconSize}
43
+ />
44
+ <SocialElement
45
+ href='https://www.linkedin.com/company/platformatic/'
46
+ iconName='SocialLinkedInIcon'
47
+ iconClassName={iconClassName}
48
+ iconColor={iconColor}
49
+ iconSize={iconSize}
50
+ />
51
+ <SocialElement
52
+ href='https://github.com/platformatic'
53
+ iconName='SocialGitHubIcon'
54
+ iconClassName={iconClassName}
55
+ iconColor={iconColor}
56
+ iconSize={iconSize}
57
+ />
58
+ <SocialElement
59
+ href='https://discord.gg/platformatic'
60
+ iconName='SocialDiscordIcon'
61
+ iconClassName={iconClassName}
62
+ iconColor={iconColor}
63
+ iconSize={iconSize}
64
+ />
37
65
  </div>
38
66
  )
39
67
  }
package/src/components/forms/Input.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import styles from './Input.module.css'
5
5
  import commonStyles from '../Common.module.css'
6
6
  import PlatformaticIcon from '../PlatformaticIcon'
7
- import { MAIN_DARK_BLUE, MAIN_GREEN, WHITE } from '../constants'
7
+ import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
8
8
  import BorderedBox from '../BorderedBox'
9
9
 
10
10
  function Input ({
@@ -19,7 +19,7 @@ function Input ({
19
19
  afterIcon,
20
20
  focused,
21
21
  placeholderApart,
22
- backgroundTransparent,
22
+ backgroundColor,
23
23
  inputTextClassName,
24
24
  verticalPaddingClassName,
25
25
  dataAttrName,
@@ -29,7 +29,8 @@ function Input ({
29
29
  let inputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
30
30
  inputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
31
31
  inputClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
32
- if (backgroundTransparent) inputClassName += ` ${commonStyles['background-color-transparent']}`
32
+ inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
33
+
33
34
  const showError = errorMessage.length > 0
34
35
  if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
35
36
  if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
@@ -83,7 +84,11 @@ Input.propTypes = {
83
84
  /**
84
85
  * color of border
85
86
  */
86
- borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
87
+ borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
88
+ /**
89
+ * color of border
90
+ */
91
+ backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
87
92
  /**
88
93
  * onChange
89
94
  */
@@ -147,6 +152,7 @@ Input.defaultProps = {
147
152
  value: '',
148
153
  name: '',
149
154
  borderColor: MAIN_GREEN,
155
+ backgroundColor: WHITE,
150
156
  errorMessage: '',
151
157
  onChange: () => {},
152
158
  disabled: false,
@@ -154,7 +160,6 @@ Input.defaultProps = {
154
160
  afterIcon: null,
155
161
  focused: false,
156
162
  shadowPlaceholder: false,
157
- backgroundTransparent: false,
158
163
  inputTextClassName: '',
159
164
  verticalPaddingClassName: '',
160
165
  dataAttrName: '',
package/src/components/forms/Input.module.css CHANGED
@@ -45,6 +45,6 @@
45
45
  }
46
46
  .input.active,
47
47
  .input:focus {
48
- @apply shadow-main-dark-blue;
48
+ @apply shadow-white;
49
49
  outline: none;
50
50
  }
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -4,20 +4,41 @@ import PropTypes from 'prop-types'
4
4
  import inputStyles from './Input.module.css'
5
5
  import styles from './InputWithSeparator.module.css'
6
6
  import commonStyles from '../Common.module.css'
7
- import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, TRANSPARENT } from '../constants'
7
+ import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
8
8
  import BorderedBox from '../BorderedBox'
9
9
  import ButtonFullRounded from '../ButtonFullRounded'
10
10
 
11
- function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onChange, disabled, afterIcon, value, separator }) {
11
+ function InputWithSeparator ({
12
+ placeholder,
13
+ name,
14
+ borderColor,
15
+ backgroundColor,
16
+ errorMessage,
17
+ onChange,
18
+ disabled,
19
+ afterIcon,
20
+ value,
21
+ separator,
22
+ inputTextClassName
23
+ }) {
24
+ const baseClassName = `${styles.input} ${styles.flexNone} ${styles.smallMargin} ${inputTextClassName} ` + commonStyles[`background-color-${backgroundColor}`]
25
+ const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
12
26
  const [chunks, setChunks] = useState([])
13
- const [inputClassName, setInputClassName] = useState(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
27
+ const [inputClassName, setInputClassName] = useState(normalClassName())
14
28
  const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
15
-
16
- let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.smallPadding
29
+ let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
17
30
  const showError = errorMessage.length > 0
18
31
  if (showError) className += ' ' + commonStyles['bordered--error-red']
19
32
  if (disabled) className += ' ' + commonStyles['apply-opacity-30']
20
33
 
34
+ useEffect(() => {
35
+ if (chunks.length > 0) {
36
+ setInputClassName(withChunksClassName())
37
+ } else {
38
+ setInputClassName(normalClassName())
39
+ }
40
+ }, [chunks.length])
41
+
21
42
  function handleRemove (chunk) {
22
43
  const index = chunks.findIndex(c => c === chunk)
23
44
  if (index > -1) {
@@ -40,24 +61,24 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
40
61
  onChange({ value: event.target.value, chunks })
41
62
  }
42
63
 
43
- useEffect(() => {
44
- if (chunks.length > 0) {
45
- setInputClassName(`${styles.flexNone} ${styles.smallMargin}`)
46
- } else {
47
- setInputClassName(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
48
- }
49
- }, [chunks.length])
64
+ function normalClassName () {
65
+ return `${baseClassName} ${commonStyles.fullWidth} `
66
+ }
67
+
68
+ function withChunksClassName () {
69
+ return baseClassName
70
+ }
50
71
 
51
72
  function renderChunk (chunk, index) {
52
73
  return (
53
- <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} backgroundColorOpacity={20} classes={chunkClasses} key={index}>
74
+ <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index}>
54
75
  <div className={styles.chunkContent}>
55
- <span className={styles.chunkText}>{chunk}</span>
76
+ <span className={`${styles.chunkText} ${inputTextClassName}`}>{chunk}</span>
56
77
  <ButtonFullRounded
57
78
  iconName='CircleCloseIcon'
58
- iconSize={MEDIUM}
59
- iconColor={MAIN_DARK_BLUE}
60
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
79
+ iconSize={SMALL}
80
+ iconColor={WHITE}
81
+ buttonClassName={buttonClassName}
61
82
  onClick={() => handleRemove(chunk)}
62
83
  bordered={false}
63
84
  alt='Close'
@@ -109,10 +130,18 @@ InputWithSeparator.propTypes = {
109
130
  * separator
110
131
  */
111
132
  separator: PropTypes.string,
133
+ /**
134
+ * inputTextClassName
135
+ */
136
+ inputTextClassName: PropTypes.string,
137
+ /**
138
+ * color of border
139
+ */
140
+ borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
112
141
  /**
113
142
  * color of border
114
143
  */
115
- borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
144
+ backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
116
145
  /**
117
146
  * onChange
118
147
  */
@@ -136,12 +165,14 @@ InputWithSeparator.defaultProps = {
136
165
  placeholder: '',
137
166
  value: '',
138
167
  name: '',
139
- borderColor: 'main-green',
168
+ borderColor: MAIN_GREEN,
169
+ backgroundColor: WHITE,
140
170
  errorMessage: '',
141
171
  onChange: () => {},
142
172
  disabled: false,
143
173
  afterIcon: null,
144
- separator: ''
174
+ separator: '',
175
+ inputTextClassName: ''
145
176
  }
146
177
 
147
178
  export default InputWithSeparator
package/src/components/forms/InputWithSeparator.module.css CHANGED
@@ -2,14 +2,20 @@
2
2
  @apply flex gap-x-2 w-full items-center;
3
3
  }
4
4
  .chunkText {
5
- @apply text-sm text-main-dark-blue;
5
+ @apply text-sm;
6
6
  }
7
7
  .inputContainer {
8
- @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow;
8
+ @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow px-2;
9
+ }
10
+ .input {
11
+ @apply h-full m-0 border-0;
12
+ padding-block: 0;
13
+ padding-inline: 0;
14
+ background: inherit;
9
15
  }
10
16
  .smallPadding {
11
17
  @apply p-1 !important
12
- }
18
+ }
13
19
  .flexNone {
14
20
  @apply flex-none !important;
15
21
  }
@@ -25,3 +31,9 @@
25
31
  .container {
26
32
  @apply flex w-full items-center;
27
33
  }
34
+
35
+ .input.active,
36
+ .input:focus {
37
+ @apply shadow-white;
38
+ outline: none;
39
+ }
package/src/components/icons/ComputerIcon.jsx ADDED
@@ -0,0 +1,89 @@
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 ComputerIcon = ({ color, size, disabled }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ let icon = <></>
12
+
13
+ switch (size) {
14
+ case SMALL:
15
+ icon = (
16
+ <svg
17
+ width={16}
18
+ height={16}
19
+ viewBox='0 0 16 16'
20
+ fill='none'
21
+ xmlns='http://www.w3.org/2000/svg'
22
+ className={className}
23
+ >
24
+ <rect x='2' y='2' width='12' height='8' rx='1' stroke='none' />
25
+ <rect x='6' y='10' width='4' height='2' stroke='none' />
26
+ <path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
27
+ </svg>
28
+ )
29
+ break
30
+ case MEDIUM:
31
+ icon = (
32
+ <svg
33
+ width={24}
34
+ height={24}
35
+ viewBox='0 0 24 24'
36
+ fill='none'
37
+ xmlns='http://www.w3.org/2000/svg'
38
+ className={className}
39
+ >
40
+ <rect x='3' y='3' width='18' height='12' rx='1' stroke='none' strokeWidth={1.5} />
41
+ <rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
42
+ <path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
43
+ </svg>
44
+ )
45
+ break
46
+ case LARGE:
47
+ icon = (
48
+ <svg
49
+ width={40}
50
+ height={40}
51
+ viewBox='0 0 40 40'
52
+ fill='none'
53
+ xmlns='http://www.w3.org/2000/svg'
54
+ className={className}
55
+ >
56
+ <rect x='5' y='5' width='30' height='20' rx='1' stroke='none' strokeWidth={2} />
57
+ <rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
58
+ <path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
59
+ </svg>
60
+ )
61
+ break
62
+
63
+ default:
64
+ break
65
+ }
66
+ return icon
67
+ }
68
+
69
+ ComputerIcon.propTypes = {
70
+ /**
71
+ * color of text, icon and borders
72
+ */
73
+ color: PropTypes.oneOf(COLORS_ICON),
74
+ /**
75
+ * Size
76
+ */
77
+ size: PropTypes.oneOf(SIZES),
78
+ /**
79
+ * disabled
80
+ */
81
+ disabled: PropTypes.bool
82
+ }
83
+ ComputerIcon.defaultProps = {
84
+ color: MAIN_DARK_BLUE,
85
+ size: MEDIUM,
86
+ disabled: false
87
+ }
88
+
89
+ export default ComputerIcon
package/src/components/icons/UserComputerIcon.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 UserComputerIcon = ({ color, size, disabled }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ let icon = <></>
12
+
13
+ switch (size) {
14
+ case SMALL:
15
+ icon = (
16
+ <svg
17
+ width={16}
18
+ height={16}
19
+ viewBox='0 0 16 16'
20
+ fill='none'
21
+ xmlns='http://www.w3.org/2000/svg'
22
+ className={className}
23
+ >
24
+ <rect x='6' y='6' width='8' height='5.33333' rx='1' stroke='none' />
25
+ <rect x='8.66675' y='11.3333' width='2.66667' height='1.33333' stroke='none' />
26
+ <path d='M7.33325 13.6667C7.33325 13.1145 7.78097 12.6667 8.33325 12.6667H11.6666C12.2189 12.6667 12.6666 13.1145 12.6666 13.6667V14.0001H7.33325V13.6667Z' stroke='none' />
27
+ <path d='M4.75503 8.80811C3.12101 9.39558 2 10.6044 2 12.0002H5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
28
+ <path d='M9.85693 4.5C9.85693 3.11929 8.73765 2 7.35693 2C5.97622 2 4.85693 3.11929 4.85693 4.5C4.85693 4.90476 4.95312 5.28704 5.12389 5.62526' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
29
+
30
+ </svg>
31
+ )
32
+ break
33
+ case MEDIUM:
34
+ icon = (
35
+ <svg
36
+ width={24}
37
+ height={24}
38
+ viewBox='0 0 24 24'
39
+ fill='none'
40
+ xmlns='http://www.w3.org/2000/svg'
41
+ className={className}
42
+ >
43
+ <rect x='9' y='9' width='12' height='8' rx='1.5' stroke='none' strokeWidth={1.5} />
44
+ <rect x='13' y='17' width='4' height='2' stroke='none' strokeWidth={1.5} />
45
+ <path d='M11 20.5C11 19.6716 11.6716 19 12.5 19H17.5C18.3284 19 19 19.6716 19 20.5V21H11V20.5Z' stroke='none' strokeWidth={1.5} />
46
+ <path d='M7.13255 13.2119C4.68152 14.0931 3 15.9063 3 18H7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
47
+ <path d='M14.7856 6.75C14.7856 4.67893 13.1067 3 11.0356 3C8.96458 3 7.28564 4.67893 7.28564 6.75C7.28564 7.35713 7.42993 7.93057 7.68607 8.43788' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
48
+
49
+ </svg>
50
+ )
51
+ break
52
+ case LARGE:
53
+ icon = (
54
+ <svg
55
+ width={40}
56
+ height={40}
57
+ viewBox='0 0 40 40'
58
+ fill='none'
59
+ xmlns='http://www.w3.org/2000/svg'
60
+ className={className}
61
+ >
62
+ <rect x='15' y='15' width='20' height='13.3333' rx='2.5' stroke='none' strokeWidth={2} />
63
+ <rect x='21.6667' y='28.3333' width='6.66667' height='3.33333' stroke='none' strokeWidth={2} />
64
+ <path d='M18.3333 34.1667C18.3333 32.786 19.4525 31.6667 20.8333 31.6667H29.1666C30.5473 31.6667 31.6666 32.786 31.6666 34.1667V35.0001H18.3333V34.1667Z' stroke='none' strokeWidth={2} />
65
+ <path d='M11.8876 22.02C7.80253 23.4887 5 26.5107 5 30.0002H12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66
+ <path d='M24.6426 11.25C24.6426 7.79822 21.8444 5 18.3926 5C14.9408 5 12.1426 7.79822 12.1426 11.25C12.1426 12.2619 12.383 13.2176 12.81 14.0631' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67
+
68
+ </svg>
69
+ )
70
+ break
71
+
72
+ default:
73
+ break
74
+ }
75
+ return icon
76
+ }
77
+
78
+ UserComputerIcon.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
+ UserComputerIcon.defaultProps = {
93
+ color: MAIN_DARK_BLUE,
94
+ size: MEDIUM,
95
+ disabled: false
96
+ }
97
+
98
+ export default UserComputerIcon
package/src/components/icons/index.js CHANGED
@@ -44,8 +44,9 @@ import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
44
44
  import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
45
45
  import CloseIcon from './CloseIcon'
46
46
  import CloudIcon from './CloudIcon'
47
- import CreditCardIcon from './CreditCardIcon'
47
+ import ComputerIcon from './ComputerIcon'
48
48
  import CopyPasteIcon from './CopyPasteIcon'
49
+ import CreditCardIcon from './CreditCardIcon'
49
50
  import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
50
51
  import CreatingAppIcon from './CreatingAppIcon'
51
52
  import DatabaseIcon from './DatabaseIcon'
@@ -112,6 +113,7 @@ import TwoUsersIcon from './TwoUsersIcon'
112
113
  import TeamsIcon from './TeamsIcon'
113
114
  import TrashIcon from './TrashIcon'
114
115
  import UpgradeIcon from './UpgradeIcon'
116
+ import UserComputerIcon from './UserComputerIcon'
115
117
  import UserIcon from './UserIcon'
116
118
  import UserRemoveIcon from './UserRemoveIcon'
117
119
  import UserRoleIcon from './UserRoleIcon'
@@ -170,8 +172,9 @@ export default {
170
172
  CircleTwoArrowsUpIcon,
171
173
  CloseIcon,
172
174
  CloudIcon,
173
- CreditCardIcon,
175
+ ComputerIcon,
174
176
  CopyPasteIcon,
177
+ CreditCardIcon,
175
178
  ConfigureDatabaseIcon,
176
179
  CreatingAppIcon,
177
180
  DatabaseIcon,
@@ -238,6 +241,7 @@ export default {
238
241
  TwoUsersIcon,
239
242
  TrashIcon,
240
243
  UpgradeIcon,
244
+ UserComputerIcon,
241
245
  UserIcon,
242
246
  UserRemoveIcon,
243
247
  UserRoleIcon,