@platformatic/ui-components 0.6.1 → 0.6.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 (19) hide show
  1. package/dist/assets/index-CTXhzp-V.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/ButtonOnlyIcon.jsx +3 -2
  5. package/src/components/constants.js +2 -1
  6. package/src/components/icons/AllAppsIcon.jsx +21 -1
  7. package/src/components/icons/AppDetailsIcon.jsx +17 -1
  8. package/src/components/icons/CheckListIcon.jsx +22 -1
  9. package/src/components/icons/CodeTestingIcon.jsx +23 -3
  10. package/src/components/icons/DeploymentHistoryIcon.jsx +24 -1
  11. package/src/components/icons/GearIcon.jsx +17 -1
  12. package/src/components/icons/InfrastructureIcon.jsx +24 -1
  13. package/src/components/icons/MetricsLogsIcon.jsx +26 -1
  14. package/src/components/icons/PlatformaticServiceIcon.jsx +19 -3
  15. package/src/components/icons/ResourceIcon.jsx +22 -1
  16. package/src/components/icons/RocketIcon.jsx +19 -1
  17. package/src/components/icons/TaxonomyIcon.jsx +26 -4
  18. package/src/stories/PlatformaticIcon.stories.jsx +9 -0
  19. package/dist/assets/index-U_mYeUt8.js +0 -40
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-U_mYeUt8.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-CTXhzp-V.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.1",
4
+ "version": "0.6.3",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/ButtonOnlyIcon.jsx CHANGED
@@ -84,7 +84,7 @@ function ButtonOnlyIcon ({
84
84
  return (
85
85
  <button className={`${baseButtonClassName} ${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
86
86
  <div className={`${contentClassName} ${backgroundClassName}`}>
87
- {platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={MEDIUM} onClick={null} disabled={disabled} /> : null}
87
+ {platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={platformaticIcon?.size ?? MEDIUM} onClick={null} disabled={disabled} /> : null}
88
88
  </div>
89
89
  </button>
90
90
  )
@@ -136,7 +136,8 @@ ButtonOnlyIcon.propTypes = {
136
136
  */
137
137
  platformaticIcon: PropTypes.shape({
138
138
  iconName: PropTypes.string,
139
- color: PropTypes.string
139
+ color: PropTypes.string,
140
+ size: PropTypes.string
140
141
  }),
141
142
  /**
142
143
  * Selected: default false
package/src/components/constants.js CHANGED
@@ -18,10 +18,11 @@ export const NONE = 'none'
18
18
  export const EXTRA_SMALL = 'extra-small'
19
19
  export const SMALL = 'small'
20
20
  export const MEDIUM = 'medium'
21
+ export const EXTRA_MEDIUM = 'extra-medium'
21
22
  export const LARGE = 'large'
22
23
  export const EXTRA_LARGE = 'extra-large'
23
24
 
24
- export const SIZES = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE]
25
+ export const SIZES = [EXTRA_SMALL, SMALL, MEDIUM, EXTRA_MEDIUM, LARGE, EXTRA_LARGE]
25
26
  export const PADDING_SIZES = [NONE, ...SIZES]
26
27
  export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
27
28
  export const BOX_SHADOW = 'box-shadow'
package/src/components/icons/AllAppsIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const AllAppsIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -60,6 +60,26 @@ const AllAppsIcon = ({
60
60
  </svg>
61
61
  )
62
62
  break
63
+ case EXTRA_MEDIUM:
64
+ icon = (
65
+ <svg
66
+ width={32}
67
+ height={32}
68
+ viewBox='0 0 32 32'
69
+ fill='none'
70
+ xmlns='http://www.w3.org/2000/svg'
71
+ className={className}
72
+ >
73
+ <path d='M8.5 0.999512L12.8301 3.49951V8.49951L8.5 10.9995L4.16987 8.49951V3.49951L8.5 0.999512Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
74
+ <path d='M8.5 20.9995L12.8301 23.4995V28.4995L8.5 30.9995L4.16987 28.4995V23.4995L8.5 20.9995Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
75
+ <path d='M16 10.9995L20.3301 13.4995V18.4995L16 20.9995L11.6699 18.4995V13.4995L16 10.9995Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
76
+ <path d='M1 10.9995L5.33013 13.4995V18.4995L1 20.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
77
+ <path d='M30.3296 10.9995L25.9995 13.4995V18.4995L30.3296 20.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
78
+ <path d='M23.5 0.999512L27.8301 3.49951V8.49951L23.5 10.9995L19.1699 8.49951V3.49951L23.5 0.999512Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
79
+ <path d='M23.5 20.9995L27.8301 23.4995V28.4995L23.5 30.9995L19.1699 28.4995V23.4995L23.5 20.9995Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
80
+ </svg>
81
+ )
82
+ break
63
83
  case LARGE:
64
84
  icon = (
65
85
  <svg
package/src/components/icons/AppDetailsIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const AppDetailsIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -48,6 +48,22 @@ const AppDetailsIcon = ({
48
48
  <path d='M15.9904 9V6.75L9.49519 3L3 6.75V14.25L7.99512 17.1339' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
49
  <circle cx='13.8701' cy='14.875' r='4.375' stroke='none' strokeWidth={1.5} />
50
50
  <path d='M19.9951 21L17.3701 18.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ </svg>
52
+ )
53
+ break
54
+ case EXTRA_MEDIUM:
55
+ icon = (
56
+ <svg
57
+ width={32}
58
+ height={32}
59
+ viewBox='0 0 32 32'
60
+ fill='none'
61
+ xmlns='http://www.w3.org/2000/svg'
62
+ className={className}
63
+ >
64
+ <path d='M21.3205 12V9L12.6603 4L4 9V19L10.6602 22.8452' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
65
+ <circle cx='18.4935' cy='19.8333' r='5.83333' stroke='none' strokeWidth={1.5} />
66
+ <path d='M26.6602 28L23.1602 24.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
67
 
52
68
  </svg>
53
69
  )
package/src/components/icons/CheckListIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const CheckListIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -62,6 +62,27 @@ const CheckListIcon = ({
62
62
  </svg>
63
63
  )
64
64
  break
65
+ case EXTRA_MEDIUM:
66
+ icon = (
67
+ <svg
68
+ width={32}
69
+ height={32}
70
+ viewBox='0 0 32 32'
71
+ fill='none'
72
+ xmlns='http://www.w3.org/2000/svg'
73
+ className={className}
74
+ >
75
+ <path d='M22 5.99951H25C25.5523 5.99951 26 6.44723 26 6.99951V26.9995C26 27.5518 25.5523 27.9995 25 27.9995H7C6.44772 27.9995 6 27.5518 6 26.9995V6.99951C6 6.44723 6.44772 5.99951 7 5.99951H10' stroke='none' strokeWidth={1.5} />
76
+ <rect x='10' y='3.99951' width='12' height='4' rx='1' stroke='none' strokeWidth={1.5} />
77
+ <path d='M18 13.9995L22 13.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
78
+ <path d='M18 23.9995L22 23.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
79
+ <path d='M10 12.9995L12 14.9995L15 11.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
80
+ <path d='M18 18.9995L22 18.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
81
+ <path d='M10 17.9995L12 19.9995L15 16.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
82
+ <path d='M10 22.9995L12 24.9995L15 21.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
83
+ </svg>
84
+ )
85
+ break
65
86
  case LARGE:
66
87
  icon = (
67
88
  <svg
package/src/components/icons/CodeTestingIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const CodeTestingIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -30,7 +30,6 @@ const CodeTestingIcon = ({
30
30
  xmlns='http://www.w3.org/2000/svg'
31
31
  className={className}
32
32
  >
33
-
34
33
  <path d='M6.5 11H3C2.44772 11 2 10.5523 2 10V3C2 2.44772 2.44772 2 3 2H10C10.5523 2 11 2.44772 11 3V5.5' stroke='none' strokeLinecap='round' />
35
34
  <path d='M2 4.25H11' stroke='none' />
36
35
  <circle cx='3.125' cy='3.125' r='0.375' fill='none' className={filledClassName} />
@@ -40,7 +39,6 @@ const CodeTestingIcon = ({
40
39
  <path d='M4.25 7.25H7.5' stroke='none' strokeLinecap='round' />
41
40
  <path d='M4.25 8.75H6.5' stroke='none' strokeLinecap='round' />
42
41
  <path d='M12.3639 11.6957C13.0262 11.2197 13.4545 10.4621 13.4545 9.6087C13.4545 8.16795 12.2335 7 10.7273 7C9.22104 7 8 8.16795 8 9.6087C8 11.0494 9.22104 12.2174 10.7273 12.2174C11.3414 12.2174 11.908 12.0233 12.3639 11.6957ZM12.3639 11.6957L14 13.7826' stroke='none' strokeLinecap='round' />
43
-
44
42
  </svg>
45
43
  )
46
44
  break
@@ -63,6 +61,28 @@ const CodeTestingIcon = ({
63
61
  <path d='M6.375 10.875H11.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
64
62
  <path d='M6.375 13.125H9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
65
63
  <path d='M18.5459 17.5435C19.5393 16.8296 20.1818 15.6931 20.1818 14.413C20.1818 12.2519 18.3503 10.5 16.0909 10.5C13.8316 10.5 12 12.2519 12 14.413C12 16.5742 13.8316 18.3261 16.0909 18.3261C17.012 18.3261 17.8621 18.0349 18.5459 17.5435ZM18.5459 17.5435L21 20.6739' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
64
+ </svg>
65
+ )
66
+ break
67
+ case EXTRA_MEDIUM:
68
+ icon = (
69
+ <svg
70
+ width={32}
71
+ height={32}
72
+ viewBox='0 0 32 32'
73
+ fill='none'
74
+ xmlns='http://www.w3.org/2000/svg'
75
+ className={className}
76
+ >
77
+ <path d='M13 21.9995H5C4.44772 21.9995 4 21.5518 4 20.9995V4.99951C4 4.44723 4.44772 3.99951 5 3.99951H21C21.5523 3.99951 22 4.44723 22 4.99951V10.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
78
+ <path d='M4 8.49951H22' stroke='none' strokeWidth={1.5} />
79
+ <circle cx='6.25' cy='6.24951' r='0.75' fill='none' className={filledClassName} />
80
+ <circle cx='8.5' cy='6.24951' r='0.75' fill='none' className={filledClassName} />
81
+ <circle cx='10.75' cy='6.24951' r='0.75' fill='none' className={filledClassName} />
82
+ <path d='M7 11.4995H14.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
83
+ <path d='M8.5 14.4995H15' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
84
+ <path d='M8.5 17.4995H13' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
85
+ <path d='M24.7278 23.3908C26.0524 22.4389 26.9091 20.9236 26.9091 19.2169C26.9091 16.3354 24.467 13.9995 21.4545 13.9995C18.4421 13.9995 16 16.3354 16 19.2169C16 22.0984 18.4421 24.4343 21.4545 24.4343C22.6827 24.4343 23.8161 24.046 24.7278 23.3908ZM24.7278 23.3908L28 27.5647' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
66
86
 
67
87
  </svg>
68
88
  )
package/src/components/icons/DeploymentHistoryIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const DeploymentHistoryIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -66,6 +66,29 @@ const DeploymentHistoryIcon = ({
66
66
  </svg>
67
67
  )
68
68
  break
69
+ case EXTRA_MEDIUM:
70
+ icon = (
71
+ <svg
72
+ width={32}
73
+ height={32}
74
+ viewBox='0 0 32 32'
75
+ fill='none'
76
+ xmlns='http://www.w3.org/2000/svg'
77
+ className={className}
78
+ >
79
+ <rect x='14' y='12' width='14' height='14' rx='1' stroke='none' strokeWidth={1.5} />
80
+ <path d='M20 16H25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
81
+ <path d='M20 19H25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
82
+ <path d='M20 22H25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
83
+ <path d='M14.5642 10L14.5642 9.66979C14.5642 9.47499 14.5073 9.28443 14.4005 9.12151L11.461 4.63781C11.2635 4.33666 10.8221 4.33666 10.6247 4.63781L7.68516 9.12151C7.57836 9.28443 7.52146 9.47505 7.52146 9.66985C7.52146 12.6583 7.52146 13.6376 7.52146 14.071L4 18.2673L8.22565 18.2673L8.92992 19.9458L11.4537 19.9458' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
84
+ <path d='M7.521 22.4644L7.521 25.8214' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
85
+ <path d='M11.0444 24.1431L11.0444 27.5001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
86
+ <circle cx='17' cy='16' r='1' fill='none' className={filledClassName} />
87
+ <circle cx='17' cy='19' r='1' fill='none' className={filledClassName} />
88
+ <circle cx='17' cy='22' r='1' fill='none' className={filledClassName} />
89
+ </svg>
90
+ )
91
+ break
69
92
  case LARGE:
70
93
  icon = (
71
94
  <svg
package/src/components/icons/GearIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const GearIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -49,6 +49,22 @@ const GearIcon = ({
49
49
  </svg>
50
50
  )
51
51
  break
52
+ case EXTRA_MEDIUM:
53
+ icon = (
54
+ <svg
55
+ width={32}
56
+ height={32}
57
+ viewBox='0 0 32 32'
58
+ fill='none'
59
+ xmlns='http://www.w3.org/2000/svg'
60
+ className={className}
61
+ >
62
+ <path d='M16.0016 20.6575C18.511 20.6575 20.5452 18.6574 20.5452 16.1901C20.5452 13.7228 18.511 11.7227 16.0016 11.7227C13.4922 11.7227 11.458 13.7228 11.458 16.1901C11.458 18.6574 13.4922 20.6575 16.0016 20.6575Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
63
+ <path d='M18.4391 4.69606V6.21219C18.4391 6.50074 18.6219 6.76144 18.8974 6.86269L20.8641 7.59418C21.1318 7.69289 21.4356 7.62455 21.6312 7.417L22.576 6.41974C22.854 6.12613 23.3277 6.1236 23.6083 6.41721L25.8891 8.79139C26.1439 9.05716 26.1465 9.46973 25.8968 9.73803L24.6818 11.0491C24.4887 11.2567 24.4423 11.5579 24.5633 11.811L25.3871 13.5575C25.503 13.803 25.7552 13.9625 26.0307 13.9625H27.2921C27.6834 13.9625 28 14.2738 28 14.6585V17.5895C28 17.9743 27.6834 18.2856 27.2921 18.2856H25.9663C25.66 18.2856 25.3871 18.4805 25.2919 18.7665L24.6225 20.7838C24.5427 21.0217 24.5994 21.2824 24.7719 21.4672L25.8608 22.6492C26.1259 22.9378 26.1002 23.3858 25.8016 23.6414L23.2916 25.8005C23.0033 26.0485 22.5657 26.0257 22.3057 25.7498L21.4304 24.8235C21.2399 24.621 20.9439 24.5476 20.6788 24.6387L18.851 25.2664C18.5653 25.3651 18.3748 25.6283 18.3748 25.9245V27.3039C18.3748 27.6887 18.0581 28 17.6668 28H14.3306C13.9393 28 13.6227 27.6887 13.6227 27.3039V25.9245C13.6227 25.6283 13.4322 25.3651 13.1464 25.2664L11.3187 24.6387C11.0535 24.5476 10.7575 24.6184 10.567 24.8235L9.69173 25.7498C9.43173 26.0257 8.9941 26.0485 8.70578 25.8005L6.19586 23.6414C5.89724 23.3858 5.8715 22.9378 6.13665 22.6492L7.22557 21.4672C7.39547 21.2824 7.45211 21.0217 7.37488 20.7838L6.70557 18.7665C6.61032 18.4805 6.33745 18.2856 6.03111 18.2856H4.70793C4.31664 18.2856 4 17.9743 4 17.5895V14.6585C4 14.2738 4.31664 13.9625 4.70793 13.9625H5.96932C6.24477 13.9625 6.49705 13.8055 6.61289 13.5575L7.43666 11.811C7.55765 11.5554 7.50874 11.2567 7.31825 11.0491L6.10319 9.73803C5.85348 9.46973 5.85605 9.05463 6.11091 8.79139L8.39172 6.41721C8.67232 6.12613 9.14598 6.12613 9.42401 6.41974L10.3688 7.417C10.5644 7.62455 10.8682 7.69289 11.1359 7.59418L13.1026 6.86269C13.3781 6.76144 13.5609 6.50074 13.5609 6.21219V4.69606C13.5609 4.31133 13.8775 4 14.2688 4H17.7312C18.1225 4 18.4391 4.31133 18.4391 4.69606Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
64
+
65
+ </svg>
66
+ )
67
+ break
52
68
  case LARGE:
53
69
  icon = (
54
70
  <svg
package/src/components/icons/InfrastructureIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const InfrastructureIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -66,6 +66,29 @@ const InfrastructureIcon = ({
66
66
  </svg>
67
67
  )
68
68
  break
69
+ case EXTRA_MEDIUM:
70
+ icon = (
71
+ <svg
72
+ width={32}
73
+ height={32}
74
+ viewBox='0 0 32 32'
75
+ fill='none'
76
+ xmlns='http://www.w3.org/2000/svg'
77
+ className={className}
78
+ >
79
+ <path d='M7 11.9995H16M16 11.9995V5.99951M16 11.9995L26 20.9995M5 20.9995L15 19.9995L26 10.9995' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
80
+ <path d='M5.83252 10.8414V21.2964L16.0006 26.5232L26.1671 21.2964V10.8414L16.0006 5.61328L5.83252 10.8414Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
81
+ <path d='M16.1 7.19951C16.9837 7.19951 17.7 6.48317 17.7 5.59951C17.7 4.71586 16.9837 3.99951 16.1 3.99951C15.2163 3.99951 14.5 4.71586 14.5 5.59951C14.5 6.48317 15.2163 7.19951 16.1 7.19951Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
82
+ <path d='M16.1 13.1995C16.9837 13.1995 17.7 12.4832 17.7 11.5995C17.7 10.7159 16.9837 9.99951 16.1 9.99951C15.2163 9.99951 14.5 10.7159 14.5 11.5995C14.5 12.4832 15.2163 13.1995 16.1 13.1995Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
83
+ <path d='M16.1 21.1995C16.9837 21.1995 17.7 20.4832 17.7 19.5995C17.7 18.7159 16.9837 17.9995 16.1 17.9995C15.2163 17.9995 14.5 18.7159 14.5 19.5995C14.5 20.4832 15.2163 21.1995 16.1 21.1995Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
84
+ <path d='M5.62148 12.3816C6.50514 12.3816 7.22148 11.6653 7.22148 10.7816C7.22148 9.89798 6.50514 9.18164 5.62148 9.18164C4.73783 9.18164 4.02148 9.89798 4.02148 10.7816C4.02148 11.6653 4.73783 12.3816 5.62148 12.3816Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
85
+ <path d='M25.9545 12.3816C26.8381 12.3816 27.5545 11.6653 27.5545 10.7816C27.5545 9.89798 26.8381 9.18164 25.9545 9.18164C25.0708 9.18164 24.3545 9.89798 24.3545 10.7816C24.3545 11.6653 25.0708 12.3816 25.9545 12.3816Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
86
+ <path d='M16.1426 27.9548C17.0262 27.9454 17.7329 27.2216 17.7211 26.338C17.7094 25.4544 16.9835 24.7457 16.0999 24.7551C15.2163 24.7644 14.5095 25.4883 14.5213 26.3718C14.5331 27.2554 15.2589 27.9641 16.1426 27.9548Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
87
+ <path d='M25.9756 22.7731C26.8592 22.7638 27.5659 22.0399 27.5542 21.1564C27.5424 20.2728 26.8165 19.5641 25.9329 19.5734C25.0493 19.5828 24.3426 20.3066 24.3543 21.1902C24.3661 22.0738 25.092 22.7825 25.9756 22.7731Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
88
+ <path d='M5.64255 22.7741C6.52616 22.7648 7.23292 22.0409 7.22114 21.1573C7.20937 20.2738 6.48352 19.5651 5.59991 19.5744C4.7163 19.5837 4.00955 20.3076 4.02132 21.1912C4.0331 22.0747 4.75895 22.7835 5.64255 22.7741Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
89
+ </svg>
90
+ )
91
+ break
69
92
  case LARGE:
70
93
  icon = (
71
94
  <svg
package/src/components/icons/MetricsLogsIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const MetricsLogsIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -70,6 +70,31 @@ const MetricsLogsIcon = ({
70
70
  </svg>
71
71
  )
72
72
  break
73
+ case EXTRA_MEDIUM:
74
+ icon = (
75
+ <svg
76
+ width={32}
77
+ height={32}
78
+ viewBox='0 0 32 32'
79
+ fill='none'
80
+ xmlns='http://www.w3.org/2000/svg'
81
+ className={className}
82
+ >
83
+ <rect x='7.81836' y='9.68408' width='3.81819' height='13.2632' rx='0.5' stroke='none' strokeWidth={1.5} />
84
+ <path d='M15.4541 11.5788V6.39453C15.4541 6.11839 15.678 5.89453 15.9541 5.89453H18.7723C19.0484 5.89453 19.2723 6.11839 19.2723 6.39453V11.5788' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
85
+ <path d='M23.1818 11L23.0974 4.5065C23.0938 4.22784 23.3187 4 23.5974 4H26.4153C26.6889 4 26.9117 4.21991 26.9153 4.49349L27 11' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
86
+ <path d='M4 4V26.7369H11' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
87
+ <rect x='14' y='14' width='14' height='14' rx='1' stroke='none' strokeWidth={1.5} />
88
+ <path d='M14 17.5H28' stroke='none' strokeWidth={1.5} />
89
+ <circle cx='15.7498' cy='15.7498' r='0.583333' fill='none' className={filledClassName} />
90
+ <ellipse cx='17.4998' cy='15.7498' rx='0.583334' ry='0.583333' fill='none' className={filledClassName} />
91
+ <ellipse cx='19.2498' cy='15.7498' rx='0.583334' ry='0.583333' fill='none' className={filledClassName} />
92
+ <path d='M16.3335 19.8335H22.1668' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
93
+ <path d='M17.5 22.1665H25.6667' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
94
+ <path d='M17.5 24.5H25.6667' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
95
+ </svg>
96
+ )
97
+ break
73
98
  case LARGE:
74
99
  icon = (
75
100
  <svg
package/src/components/icons/PlatformaticServiceIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const PlatformaticServiceIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -34,7 +34,6 @@ const PlatformaticServiceIcon = ({
34
34
  <path d='M4 5.09668H2V11.2902H11.6V11.1289' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
35
  <rect x='5.2002' y='11.2903' width='3.2' height='1.54839' stroke='none' />
36
36
  <path d='M3.6001 12.8386H10.0001V13.9999H3.6001V12.8386Z' stroke='none' strokeLinejoin='round' />
37
-
38
37
  </svg>
39
38
  )
40
39
  break
@@ -53,7 +52,24 @@ const PlatformaticServiceIcon = ({
53
52
  <path d='M6 7.64502H3V16.9353H17.4V16.6934' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54
53
  <rect x='7.7998' y='16.9353' width='4.8' height='2.32258' stroke='none' strokeWidth={1.5} />
55
54
  <path d='M5.3999 19.2578H14.9999V20.9997H5.3999V19.2578Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
56
-
55
+ </svg>
56
+ )
57
+ break
58
+ case EXTRA_MEDIUM:
59
+ icon = (
60
+ <svg
61
+ width={32}
62
+ height={32}
63
+ viewBox='0 0 32 32'
64
+ fill='none'
65
+ xmlns='http://www.w3.org/2000/svg'
66
+ className={className}
67
+ >
68
+ <path d='M21.6261 4.44907V5.42722C21.6261 5.61338 21.7479 5.78158 21.9316 5.8469L23.2427 6.31883C23.4212 6.38251 23.6237 6.33842 23.7542 6.20452L24.384 5.56112C24.5693 5.3717 24.8851 5.37007 25.0722 5.55949L26.5927 7.09122C26.7626 7.26268 26.7643 7.52886 26.5979 7.70196L25.7878 8.54784C25.6591 8.68174 25.6282 8.87606 25.7089 9.03936L26.2581 10.1661C26.3353 10.3245 26.5035 10.4274 26.6871 10.4274H27.528C27.7889 10.4274 28 10.6282 28 10.8765V12.7674C28 13.0157 27.7889 13.2165 27.528 13.2165H26.6442C26.44 13.2165 26.2581 13.3423 26.1946 13.5268L25.7484 14.8283C25.6952 14.9818 25.7329 15.15 25.8479 15.2692L26.5738 16.0318C26.7506 16.2179 26.7335 16.507 26.5344 16.6719L24.8611 18.0648C24.6689 18.2248 24.3771 18.2102 24.2038 18.0322L23.6203 17.4345C23.4933 17.3039 23.2959 17.2565 23.1192 17.3153L21.9007 17.7203C21.7102 17.7839 21.5832 17.9538 21.5832 18.1448V19.0348C21.5832 19.283 21.3721 19.4839 21.1112 19.4839H18.8871C18.6262 19.4839 18.4151 19.283 18.4151 19.0348V18.1448C18.4151 17.9538 18.2881 17.7839 18.0976 17.7203L16.8791 17.3153C16.7023 17.2565 16.505 17.3022 16.378 17.4345L15.7945 18.0322C15.6212 18.2102 15.3294 18.2248 15.1372 18.0648L13.4639 16.6719C13.2648 16.507 13.2477 16.2179 13.4244 16.0318L14.1504 15.2692C14.2636 15.15 14.3014 14.9818 14.2499 14.8283L13.8037 13.5268C13.7402 13.3423 13.5583 13.2165 13.3541 13.2165H12.472C12.2111 13.2165 12 13.0157 12 12.7674V10.8765C12 10.6282 12.2111 10.4274 12.472 10.4274H13.3129C13.4965 10.4274 13.6647 10.3261 13.7419 10.1661L14.2911 9.03936C14.3718 8.87443 14.3392 8.68174 14.2122 8.54784L13.4021 7.70196C13.2357 7.52886 13.2374 7.26105 13.4073 7.09122L14.9278 5.55949C15.1149 5.3717 15.4307 5.3717 15.616 5.56112L16.2458 6.20452C16.3763 6.33842 16.5788 6.38251 16.7573 6.31883L18.0684 5.8469C18.2521 5.78158 18.3739 5.61338 18.3739 5.42722V4.44907C18.3739 4.20086 18.585 4 18.8459 4H21.1541C21.415 4 21.6261 4.20086 21.6261 4.44907Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
69
+ <path d='M23 14H17L20 8L23 14Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
70
+ <path d='M8 10.1934H4V22.5805H23.2V22.2579' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
71
+ <rect x='10.3999' y='22.5806' width='6.4' height='3.09677' stroke='none' strokeWidth={1.5} />
72
+ <path d='M7.2002 25.6772H20.0002V27.9998H7.2002V25.6772Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
57
73
  </svg>
58
74
  )
59
75
  break
package/src/components/icons/ResourceIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const ResourceIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -61,6 +61,27 @@ const ResourceIcon = ({
61
61
  </svg>
62
62
  )
63
63
  break
64
+ case EXTRA_MEDIUM:
65
+ icon = (
66
+ <svg
67
+ width={32}
68
+ height={32}
69
+ viewBox='0 0 32 32'
70
+ fill='none'
71
+ xmlns='http://www.w3.org/2000/svg'
72
+ className={className}
73
+ >
74
+ <path d='M14 10V5C14 4.44772 13.5523 4 13 4H5C4.44772 4 4 4.44772 4 5V13C4 13.5523 4.44772 14 5 14H10.25' stroke='none' strokeWidth={1.5} />
75
+ <path d='M18 23.8333L18 27C18 27.5523 18.4477 28 19 28L27 28C27.5523 28 28 27.5523 28 27L28 19C28 18.4477 27.5523 18 27 18L21.75 18' stroke='none' strokeWidth={1.5} />
76
+ <path d='M22 14L27 14C27.5523 14 28 13.5523 28 13L28 5C28 4.44772 27.5523 4 27 4L19 4C18.4477 4 18 4.44772 18 5L18 9' stroke='none' strokeWidth={1.5} />
77
+ <path d='M10 18L5 18C4.44772 18 4 18.4477 4 19L4 27C4 27.5523 4.44771 28 5 28L13 28C13.5523 28 14 27.5523 14 27L14 23' stroke='none' strokeWidth={1.5} />
78
+ <rect x='10' y='10' width='12' height='14' rx='1' stroke='none' strokeWidth={1.5} />
79
+ <path d='M12.7871 12.8198H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
80
+ <path d='M12.7871 16.7539H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
81
+ <path d='M12.7871 20.6885H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
82
+ </svg>
83
+ )
84
+ break
64
85
  case LARGE:
65
86
  icon = (
66
87
  <svg
package/src/components/icons/RocketIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const RocketIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -57,6 +57,24 @@ const RocketIcon = ({
57
57
  </svg>
58
58
  )
59
59
  break
60
+ case EXTRA_MEDIUM:
61
+ icon = (
62
+ <svg
63
+ width={32}
64
+ height={32}
65
+ viewBox='0 0 32 32'
66
+ fill='none'
67
+ xmlns='http://www.w3.org/2000/svg'
68
+ className={className}
69
+ >
70
+ <path d='M12.1054 17.1576L8.77172 13.8239C8.63919 13.6914 8.54619 13.5239 8.50405 13.3413L7.23262 7.83176C7.14953 7.47172 7.47221 7.14905 7.83225 7.23214L13.3418 8.50356C13.5244 8.5457 13.6915 8.63832 13.824 8.77085L17.1581 12.1049L22.8423 12.7366L19.8107 15.7682L20.5686 17.5366L17.537 20.5682L15.7685 19.8103L12.7369 22.8419L12.1054 17.1576Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
71
+ <path d='M18.4209 23.4736L20.9472 26' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
72
+ <path d='M22.2109 22.21L24.7373 24.7363' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
73
+ <path d='M23.4736 18.4209L26 20.9472' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
74
+ <circle cx='12' cy='11.9995' r='2' stroke='none' strokeWidth={1.5} />
75
+ </svg>
76
+ )
77
+ break
60
78
  case LARGE:
61
79
  icon = (
62
80
  <svg
package/src/components/icons/TaxonomyIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const TaxonomyIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -41,7 +41,6 @@ const TaxonomyIcon = ({
41
41
  <path d='M12.8851 13.7534C13.5007 13.7534 13.9997 13.2559 13.9997 12.6423C13.9997 12.0287 13.5007 11.5312 12.8851 11.5312C12.2695 11.5312 11.7705 12.0287 11.7705 12.6423C11.7705 13.2559 12.2695 13.7534 12.8851 13.7534Z' stroke='none' />
42
42
  <path d='M7.04161 10.4999L5.06934 12.3636' stroke='none' />
43
43
  <path d='M4.46678 14C5.04062 14 5.50582 13.5363 5.50582 12.9643C5.50582 12.3923 5.04062 11.9286 4.46678 11.9286C3.89293 11.9286 3.42773 12.3923 3.42773 12.9643C3.42773 13.5363 3.89293 14 4.46678 14Z' stroke='none' />
44
-
45
44
  </svg>
46
45
  )
47
46
  break
@@ -55,7 +54,6 @@ const TaxonomyIcon = ({
55
54
  xmlns='http://www.w3.org/2000/svg'
56
55
  className={className}
57
56
  >
58
-
59
57
  <path d='M13.6584 14.5295C14.5633 14.5295 15.2963 13.8195 15.2963 12.9429C15.2963 12.0663 14.5633 11.3564 13.6584 11.3564C12.7535 11.3564 12.0205 12.0663 12.0205 12.9429C12.0205 13.8195 12.7535 14.5295 13.6584 14.5295Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
60
58
  <path d='M14.5706 8.82269V9.37068C14.5706 9.4752 14.6367 9.56935 14.7368 9.60608L15.45 9.87066C15.5473 9.90644 15.6569 9.88195 15.7287 9.80663L16.0715 9.44601C16.1726 9.33961 16.3445 9.33867 16.4465 9.44601L17.274 10.3047C17.3666 10.4008 17.3675 10.5505 17.2768 10.6475L16.8357 11.122C16.7658 11.1973 16.7488 11.3056 16.7923 11.3979L17.0907 12.0297C17.1332 12.1182 17.2239 12.1766 17.3241 12.1766H17.7812C17.9229 12.1766 18.0382 12.2895 18.0382 12.428V13.4882C18.0382 13.6275 17.9229 13.7396 17.7812 13.7396H17.3004C17.189 13.7396 17.0907 13.8102 17.0558 13.9138L16.813 14.6435C16.7837 14.7292 16.8045 14.8233 16.8669 14.8902L17.2617 15.3176C17.3581 15.4222 17.3486 15.5841 17.24 15.6764L16.3294 16.4569C16.2246 16.5464 16.0659 16.5389 15.9714 16.439L15.654 16.1038C15.5851 16.0304 15.4774 16.004 15.381 16.037L14.7179 16.2639C14.614 16.2997 14.5451 16.3948 14.5451 16.5021V17.0012C14.5451 17.1405 14.4298 17.2526 14.2882 17.2526H13.0782C12.9365 17.2526 12.8212 17.1396 12.8212 17.0012V16.5021C12.8212 16.3948 12.7523 16.2997 12.6484 16.2639L11.9853 16.037C11.8889 16.004 11.7822 16.0295 11.7123 16.1038L11.3949 16.439C11.3004 16.5389 11.1418 16.5473 11.0369 16.4569L10.1263 15.6764C10.0177 15.5841 10.0083 15.4222 10.1046 15.3176L10.4994 14.8902C10.5608 14.8233 10.5816 14.7292 10.5533 14.6435L10.3105 13.9138C10.2756 13.8102 10.1773 13.7396 10.0659 13.7396H9.58603C9.44434 13.7396 9.3291 13.6266 9.3291 13.4882V12.428C9.3291 12.2886 9.44434 12.1766 9.58603 12.1766H10.0432C10.1433 12.1766 10.235 12.1201 10.2765 12.0297L10.575 11.3979C10.6185 11.3056 10.6015 11.1973 10.5325 11.122L10.0914 10.6475C10.0007 10.5505 10.0016 10.4008 10.0942 10.3047L10.9217 9.44601C11.0237 9.34055 11.1956 9.34055 11.2957 9.44601L11.6386 9.80663C11.7095 9.88195 11.82 9.90644 11.9173 9.87066L12.6304 9.60608C12.7305 9.56935 12.7967 9.4752 12.7967 9.37068V8.82269C12.7967 8.68334 12.9119 8.57129 13.0536 8.57129H14.3099C14.4516 8.57129 14.5668 8.68428 14.5668 8.82269H14.5706Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61
59
  <path d='M13.6309 8.78501V5.86365' stroke='none' strokeWidth={1.5} />
@@ -68,7 +66,31 @@ const TaxonomyIcon = ({
68
66
  <path d='M19.3277 20.63C20.251 20.63 20.9996 19.8839 20.9996 18.9635C20.9996 18.043 20.251 17.2969 19.3277 17.2969C18.4043 17.2969 17.6558 18.043 17.6558 18.9635C17.6558 19.8839 18.4043 20.63 19.3277 20.63Z' stroke='none' strokeWidth={1.5} />
69
67
  <path d='M10.5624 15.7498L7.604 18.5454' stroke='none' strokeWidth={1.5} />
70
68
  <path d='M6.70016 21.0001C7.56093 21.0001 8.25873 20.3045 8.25873 19.4465C8.25873 18.5884 7.56093 17.8929 6.70016 17.8929C5.83939 17.8929 5.1416 18.5884 5.1416 19.4465C5.1416 20.3045 5.83939 21.0001 6.70016 21.0001Z' stroke='none' strokeWidth={1.5} />
71
-
69
+ </svg>
70
+ )
71
+ break
72
+ case EXTRA_MEDIUM:
73
+ icon = (
74
+ <svg
75
+ width={32}
76
+ height={32}
77
+ viewBox='0 0 32 32'
78
+ fill='none'
79
+ xmlns='http://www.w3.org/2000/svg'
80
+ className={className}
81
+ >
82
+ <path d='M18.7211 20.1505C20.206 20.1505 21.4089 18.9854 21.4089 17.5469C21.4089 16.1084 20.206 14.9434 18.7211 14.9434C17.2361 14.9434 16.0332 16.1084 16.0332 17.5469C16.0332 18.9854 17.2361 20.1505 18.7211 20.1505Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
83
+ <path d='M20.2181 10.7856V11.6849C20.2181 11.8564 20.3266 12.0109 20.4909 12.0712L21.6612 12.5053C21.8209 12.5641 22.0007 12.5239 22.1185 12.4003L22.6812 11.8085C22.8471 11.6339 23.1292 11.6323 23.2966 11.8085L24.6545 13.2177C24.8064 13.3753 24.8079 13.6209 24.6591 13.7801L23.9352 14.5588C23.8205 14.6824 23.7926 14.8601 23.8639 15.0116L24.3537 16.0483C24.4235 16.1936 24.5723 16.2894 24.7366 16.2894H25.4869C25.7194 16.2894 25.9085 16.4748 25.9085 16.7019V18.4418C25.9085 18.6705 25.7194 18.8543 25.4869 18.8543H24.6979C24.515 18.8543 24.3537 18.9702 24.2964 19.1402L23.898 20.3377C23.85 20.4783 23.8841 20.6328 23.9864 20.7425L24.6343 21.444C24.7924 21.6155 24.7769 21.8813 24.5987 22.0327L23.1044 23.3136C22.9323 23.4604 22.6719 23.448 22.5169 23.2842L21.9961 22.7342C21.8829 22.6137 21.7062 22.5704 21.5481 22.6245L20.4599 22.9968C20.2894 23.0556 20.1763 23.2116 20.1763 23.3878V24.2067C20.1763 24.4354 19.9872 24.6192 19.7546 24.6192H17.769C17.5365 24.6192 17.3474 24.4338 17.3474 24.2067V23.3878C17.3474 23.2116 17.2342 23.0556 17.0637 22.9968L15.9755 22.6245C15.8174 22.5704 15.6423 22.6121 15.5276 22.7342L15.0067 23.2842C14.8517 23.448 14.5913 23.4619 14.4193 23.3136L12.925 22.0327C12.7467 21.8813 12.7312 21.6155 12.8893 21.444L13.5373 20.7425C13.638 20.6328 13.6721 20.4783 13.6256 20.3377L13.2272 19.1402C13.1699 18.9702 13.0087 18.8543 12.8258 18.8543H12.0383C11.8058 18.8543 11.6167 18.6689 11.6167 18.4418V16.7019C11.6167 16.4733 11.8058 16.2894 12.0383 16.2894H12.7886C12.9529 16.2894 13.1032 16.1967 13.1714 16.0483L13.6613 15.0116C13.7326 14.8601 13.7047 14.6824 13.5915 14.5588L12.8676 13.7801C12.7188 13.6209 12.7204 13.3753 12.8723 13.2177L14.2301 11.8085C14.3976 11.6354 14.6797 11.6354 14.844 11.8085L15.4067 12.4003C15.5229 12.5239 15.7043 12.5641 15.8639 12.5053L17.0342 12.0712C17.1986 12.0109 17.3071 11.8564 17.3071 11.6849V10.7856C17.3071 10.5569 17.4962 10.373 17.7287 10.373H19.7903C20.0228 10.373 20.2119 10.5585 20.2119 10.7856H20.2181Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
84
+ <path d='M18.6768 10.7237V5.92969' stroke='none' strokeWidth={1.5} />
85
+ <path d='M18.7656 6.32943C20.1782 6.32943 21.3233 5.18799 21.3233 3.77995C21.3233 2.37191 20.1782 1.23047 18.7656 1.23047C17.3531 1.23047 16.208 2.37191 16.208 3.77995C16.208 5.18799 17.3531 6.32943 18.7656 6.32943Z' stroke='none' strokeWidth={1.5} />
86
+ <path d='M11.6229 17.5811H4.74512' stroke='none' strokeWidth={1.5} />
87
+ <path d='M3.08331 19.5156C4.10633 19.5156 4.93566 18.689 4.93566 17.6692C4.93566 16.6494 4.10633 15.8228 3.08331 15.8228C2.06028 15.8228 1.23096 16.6494 1.23096 17.6692C1.23096 18.689 2.06028 19.5156 3.08331 19.5156Z' stroke='none' strokeWidth={1.5} />
88
+ <path d='M24.1455 12.6133L26.9696 9.95752' stroke='none' strokeWidth={1.5} />
89
+ <path d='M28.0304 10.7887C29.1347 10.7887 30.03 9.89631 30.03 8.79548C30.03 7.69465 29.1347 6.80225 28.0304 6.80225C26.926 6.80225 26.0308 7.69465 26.0308 8.79548C26.0308 9.89631 26.926 10.7887 28.0304 10.7887Z' stroke='none' strokeWidth={1.5} />
90
+ <path d='M23.7925 22.853L26.4385 25.6667' stroke='none' strokeWidth={1.5} />
91
+ <path d='M28.0259 30.1617C29.5412 30.1617 30.7695 28.9372 30.7695 27.4268C30.7695 25.9164 29.5412 24.6919 28.0259 24.6919C26.5106 24.6919 25.2822 25.9164 25.2822 27.4268C25.2822 28.9372 26.5106 30.1617 28.0259 30.1617Z' stroke='none' strokeWidth={1.5} />
92
+ <path d='M13.641 22.1533L8.78613 26.741' stroke='none' strokeWidth={1.5} />
93
+ <path d='M7.30276 30.7689C8.7153 30.7689 9.8604 29.6274 9.8604 28.2194C9.8604 26.8114 8.7153 25.6699 7.30276 25.6699C5.89021 25.6699 4.74512 26.8114 4.74512 28.2194C4.74512 29.6274 5.89021 30.7689 7.30276 30.7689Z' stroke='none' strokeWidth={1.5} />
72
94
  </svg>
73
95
  )
74
96
  break
package/src/stories/PlatformaticIcon.stories.jsx CHANGED
@@ -4,6 +4,7 @@ import Icons from '../components/icons'
4
4
  import {
5
5
  COLORS_ICON,
6
6
  EXTRA_LARGE,
7
+ EXTRA_MEDIUM,
7
8
  EXTRA_SMALL,
8
9
  LARGE,
9
10
  MEDIUM,
@@ -104,6 +105,14 @@ const AllIconsTemplate = (args) => {
104
105
  {...args}
105
106
  />
106
107
  </div>
108
+ <div style={col}>
109
+ <PlatformaticIcon
110
+ key={icon}
111
+ iconName={icon}
112
+ size={EXTRA_MEDIUM}
113
+ {...args}
114
+ />
115
+ </div>
107
116
  <div style={col}>
108
117
  <PlatformaticIcon
109
118
  key={icon}