@platformatic/ui-components 0.1.92 → 0.1.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index.d4907a34.js +206 -0
- package/dist/index.html +1 -1
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/Logo.jsx +9 -5
- package/src/components/Logo.module.css +4 -1
- package/src/components/LogoDropDown.jsx +82 -0
- package/src/components/LogoDropDown.module.css +30 -0
- package/src/components/backgrounds/AppBackgroundIcon.jsx +12 -12
- package/src/components/backgrounds/LensBackgroundIcon.jsx +2 -2
- package/src/components/backgrounds/TimerBackgroundIcon.jsx +5 -5
- package/src/components/icons/CheckListIcon.jsx +98 -0
- package/src/components/icons/SlotIcon.jsx +88 -0
- package/src/components/icons/TeamsIcon.jsx +91 -0
- package/src/components/icons/WorkspaceEmptyIcon.jsx +1 -1
- package/src/components/icons/index.js +7 -0
- package/src/components/logos/AdvancedLogo.jsx +58 -0
- package/src/components/logos/BasicLogo.jsx +22 -20
- package/src/components/logos/FreeLogo.jsx +22 -20
- package/src/components/logos/ProLogo.jsx +60 -0
- package/src/components/logos/index.js +5 -1
- package/src/stories/LogoDropDown.stories.jsx +43 -0
- package/dist/assets/index.e3fdc2c7.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.
|
|
7
|
+
<script type="module" crossorigin src="/assets/index.d4907a34.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index.1ec7065b.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/index.js
CHANGED
|
@@ -23,6 +23,7 @@ import Loadable from './src/components/Loadable'
|
|
|
23
23
|
import LoadingSpinner from './src/components/LoadingSpinner'
|
|
24
24
|
import LoginButton from './src/components/LoginButton'
|
|
25
25
|
import Logo from './src/components/Logo'
|
|
26
|
+
import LogoDropDown from './src/components/LogoDropDown'
|
|
26
27
|
import Logos from './src/components/logos'
|
|
27
28
|
import Modal from './src/components/Modal'
|
|
28
29
|
import PlatformaticIcon from './src/components/PlatformaticIcon'
|
|
@@ -62,6 +63,7 @@ export {
|
|
|
62
63
|
LoadingSpinner,
|
|
63
64
|
LoginButton,
|
|
64
65
|
Logo,
|
|
66
|
+
LogoDropDown,
|
|
65
67
|
Modal,
|
|
66
68
|
PlatformaticIcon,
|
|
67
69
|
Playground,
|
package/package.json
CHANGED
package/src/components/Logo.jsx
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import styles from './Logo.module.css'
|
|
3
|
-
export default function Logo ({ width = 107,
|
|
3
|
+
export default function Logo ({ width = 107, height = 86, color = 'white', fillColor = 'none' }) {
|
|
4
4
|
const className = styles[`${color}`]
|
|
5
|
+
const filledClassName = styles[`filled--${fillColor}`]
|
|
6
|
+
|
|
5
7
|
return (
|
|
6
8
|
<svg
|
|
7
9
|
width={width}
|
|
8
|
-
height={
|
|
10
|
+
height={height}
|
|
9
11
|
viewBox='0 0 107 86'
|
|
10
12
|
fill='none'
|
|
11
13
|
xmlns='http://www.w3.org/2000/svg'
|
|
@@ -18,6 +20,8 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
|
|
|
18
20
|
strokeWidth={4.21053}
|
|
19
21
|
strokeLinecap='round'
|
|
20
22
|
strokeLinejoin='round'
|
|
23
|
+
fill='none'
|
|
24
|
+
className={filledClassName}
|
|
21
25
|
/>
|
|
22
26
|
<path
|
|
23
27
|
d='M41.4979 35.2219L33.6299 37.9838L37.0924 45.3197'
|
|
@@ -34,7 +38,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
|
|
|
34
38
|
strokeLinejoin='round'
|
|
35
39
|
/>
|
|
36
40
|
<path
|
|
37
|
-
opacity=
|
|
41
|
+
opacity={0.2}
|
|
38
42
|
d='M24.498 79.7146V83.0001'
|
|
39
43
|
stroke='#21FA90'
|
|
40
44
|
strokeWidth={4.21053}
|
|
@@ -42,7 +46,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
|
|
|
42
46
|
strokeLinejoin='round'
|
|
43
47
|
/>
|
|
44
48
|
<path
|
|
45
|
-
opacity=
|
|
49
|
+
opacity={0.4}
|
|
46
50
|
d='M24.5283 69.3757V74.5658'
|
|
47
51
|
stroke='#21FA90'
|
|
48
52
|
strokeWidth={4.21053}
|
|
@@ -50,7 +54,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
|
|
|
50
54
|
strokeLinejoin='round'
|
|
51
55
|
/>
|
|
52
56
|
<path
|
|
53
|
-
opacity=
|
|
57
|
+
opacity={0.7}
|
|
54
58
|
d='M24.498 55.3254V64.0028'
|
|
55
59
|
stroke='#21FA90'
|
|
56
60
|
strokeWidth={4.21053}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import PropTypes from 'prop-types'
|
|
4
|
+
import styles from './LogoDropDown.module.css'
|
|
5
|
+
import PlatformaticIcon from './PlatformaticIcon'
|
|
6
|
+
import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
|
|
7
|
+
import Logo from './Logo'
|
|
8
|
+
function LogoDropDown ({ itemSelected, items, width, height }) {
|
|
9
|
+
const [open, setOpen] = useState(false)
|
|
10
|
+
|
|
11
|
+
function handleOpen () {
|
|
12
|
+
setOpen(!open)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function getItemsSelected () {
|
|
16
|
+
return items.find(item => item.id === itemSelected)?.name
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function onClick (callback) {
|
|
20
|
+
handleOpen()
|
|
21
|
+
callback()
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<div className={styles.container}>
|
|
26
|
+
<div className={styles.dropDown}>
|
|
27
|
+
<div className={styles.logoContainer}>
|
|
28
|
+
<Logo width={width} height={height} color={WHITE} fillColor={MAIN_DARK_BLUE} />
|
|
29
|
+
</div>
|
|
30
|
+
<div className={styles.selectorContainer} style={{ left: width / 2, paddingLeft: width / 3 }} onClick={() => handleOpen()}>
|
|
31
|
+
<p className={styles.header}>{getItemsSelected()}</p>
|
|
32
|
+
{!open && <PlatformaticIcon iconName='ArrowDownIcon' color={MAIN_DARK_BLUE} onClick={null} />}
|
|
33
|
+
{open && <PlatformaticIcon iconName='ArrowUpIcon' color={MAIN_DARK_BLUE} onClick={null} />}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
{open && (
|
|
37
|
+
<div className={styles.menuContainer}>
|
|
38
|
+
<div className={styles.menu} style={{ width: `calc(100% - ${width}px)` }}>
|
|
39
|
+
{items.map((item, index) => {
|
|
40
|
+
return (
|
|
41
|
+
<div className={styles.item} key={index} onClick={() => onClick(item.handleClick)}>
|
|
42
|
+
<PlatformaticIcon iconName='OrganizationIcon' color={MAIN_DARK_BLUE} size={SMALL} onClick={null} /><span className={styles.itemName}>{item.name}</span>
|
|
43
|
+
</div>
|
|
44
|
+
)
|
|
45
|
+
})}
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
)}
|
|
49
|
+
</div>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
LogoDropDown.propTypes = {
|
|
54
|
+
/**
|
|
55
|
+
* width
|
|
56
|
+
*/
|
|
57
|
+
width: PropTypes.number,
|
|
58
|
+
/**
|
|
59
|
+
* height
|
|
60
|
+
*/
|
|
61
|
+
height: PropTypes.number,
|
|
62
|
+
/**
|
|
63
|
+
* itemSelected
|
|
64
|
+
*/
|
|
65
|
+
itemSelected: PropTypes.string,
|
|
66
|
+
/**
|
|
67
|
+
* items
|
|
68
|
+
*/
|
|
69
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
|
70
|
+
id: PropTypes.string.isRequired,
|
|
71
|
+
name: PropTypes.string,
|
|
72
|
+
handleClick: PropTypes.func
|
|
73
|
+
}))
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
LogoDropDown.defaultProps = {
|
|
77
|
+
width: 71,
|
|
78
|
+
height: 56,
|
|
79
|
+
itemSelected: '',
|
|
80
|
+
items: []
|
|
81
|
+
}
|
|
82
|
+
export default LogoDropDown
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
@apply relative min-w-[263px] max-w-[263px];
|
|
3
|
+
}
|
|
4
|
+
.menuContainer {
|
|
5
|
+
@apply min-w-[263px] max-w-[263px] absolute top-[43px];
|
|
6
|
+
}
|
|
7
|
+
.dropDown {
|
|
8
|
+
@apply relative flex items-center;
|
|
9
|
+
}
|
|
10
|
+
.logoContainer {
|
|
11
|
+
@apply relative z-10;
|
|
12
|
+
}
|
|
13
|
+
.selectorContainer {
|
|
14
|
+
@apply absolute top-[50%] translate-y-[-50%] flex items-center gap-x-1 bg-white p-0.5 pr-3 rounded-full mt-[0.5px] cursor-pointer;
|
|
15
|
+
}
|
|
16
|
+
.header {
|
|
17
|
+
@apply flex items-center hover:cursor-pointer pr-2 font-light text-main-dark-blue ml-4 text-ellipsis overflow-hidden whitespace-nowrap min-w-[155px] max-w-[155px] w-full;
|
|
18
|
+
}
|
|
19
|
+
.picture {
|
|
20
|
+
@apply border border-transparent rounded-full mr-2;
|
|
21
|
+
}
|
|
22
|
+
.menu {
|
|
23
|
+
@apply absolute top-0 right-0 border border-main-dark-blue p-0 z-10 text-sm bg-white rounded-md w-fit z-20;
|
|
24
|
+
}
|
|
25
|
+
.item {
|
|
26
|
+
@apply inline-flex gap-x-2 py-2 px-5 first:border-t-0 tracking-wide text-sm font-normal leading-4 hover:font-semibold hover:cursor-pointer border-t text-main-dark-blue w-full;
|
|
27
|
+
}
|
|
28
|
+
.itemName {
|
|
29
|
+
@apply text-ellipsis overflow-hidden whitespace-nowrap;
|
|
30
|
+
}
|
|
@@ -4,18 +4,18 @@ const AppBackgroundIcon = () => {
|
|
|
4
4
|
return (
|
|
5
5
|
<svg width='669' height='669' viewBox='0 0 669 669' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
6
6
|
<g opacity='0.05'>
|
|
7
|
-
<path d='M286.786 380.769H217.563C203.362 380.769 191.851 392.28 191.851 406.48V537.332C191.851 551.532 203.362 563.044 217.563 563.044H450.944C465.144 563.044 476.656 551.532 476.656 537.332V406.48C476.656 392.28 465.144 380.769 450.944 380.769H381.721' stroke='white' stroke-width='31'
|
|
8
|
-
<rect x='286.786' y='563.042' width='94.9349' height='45.5688' stroke='white'
|
|
9
|
-
<path d='M239.318 634.324C239.318 620.123 250.829 608.612 265.029 608.612H403.476C417.676 608.612 429.188 620.123 429.188 634.324V642.789H239.318V634.324Z' stroke='white'
|
|
10
|
-
<path d='M334.253 357.983L355.567 420.958H424.541L368.74 459.878L390.054 522.853L334.253 483.932L278.451 522.853L299.766 459.878L243.964 420.958H312.939L334.253 357.983Z' stroke='white'
|
|
11
|
-
<path d='M156.246 476.653H73.1784V310.516' stroke='white'
|
|
12
|
-
<path d='M239.315 334.25V120.647' stroke='white'
|
|
13
|
-
<path d='M512.253 476.652H595.321V381.718' stroke='white'
|
|
14
|
-
<path d='M405.451 346.117V274.916H488.519V144.38' stroke='white'
|
|
15
|
-
<circle cx='73.179' cy='263.049' r='47.4675' stroke='white'
|
|
16
|
-
<circle cx='239.315' cy='73.1789' r='47.4675' stroke='white'
|
|
17
|
-
<circle cx='488.52' cy='96.9123' r='47.4675' stroke='white'
|
|
18
|
-
<circle cx='595.321' cy='334.25' r='47.4675' stroke='white'
|
|
7
|
+
<path d='M286.786 380.769H217.563C203.362 380.769 191.851 392.28 191.851 406.48V537.332C191.851 551.532 203.362 563.044 217.563 563.044H450.944C465.144 563.044 476.656 551.532 476.656 537.332V406.48C476.656 392.28 465.144 380.769 450.944 380.769H381.721' stroke='white' stroke-width='31' strokeLinecap='round' />
|
|
8
|
+
<rect x='286.786' y='563.042' width='94.9349' height='45.5688' stroke='white' strokeWidth={31} />
|
|
9
|
+
<path d='M239.318 634.324C239.318 620.123 250.829 608.612 265.029 608.612H403.476C417.676 608.612 429.188 620.123 429.188 634.324V642.789H239.318V634.324Z' stroke='white' strokeWidth={31} />
|
|
10
|
+
<path d='M334.253 357.983L355.567 420.958H424.541L368.74 459.878L390.054 522.853L334.253 483.932L278.451 522.853L299.766 459.878L243.964 420.958H312.939L334.253 357.983Z' stroke='white' strokeWidth={31} strokeLinejoin='round' />
|
|
11
|
+
<path d='M156.246 476.653H73.1784V310.516' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
|
+
<path d='M239.315 334.25V120.647' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
|
|
13
|
+
<path d='M512.253 476.652H595.321V381.718' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
|
|
14
|
+
<path d='M405.451 346.117V274.916H488.519V144.38' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
|
|
15
|
+
<circle cx='73.179' cy='263.049' r='47.4675' stroke='white' strokeWidth={31} />
|
|
16
|
+
<circle cx='239.315' cy='73.1789' r='47.4675' stroke='white' strokeWidth={31} />
|
|
17
|
+
<circle cx='488.52' cy='96.9123' r='47.4675' stroke='white' strokeWidth={31} />
|
|
18
|
+
<circle cx='595.321' cy='334.25' r='47.4675' stroke='white' strokeWidth={31} />
|
|
19
19
|
</g>
|
|
20
20
|
</svg>
|
|
21
21
|
)
|
|
@@ -4,8 +4,8 @@ const LensBackgroundIcon = () => {
|
|
|
4
4
|
return (
|
|
5
5
|
<svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
6
6
|
<g opacity='0.05'>
|
|
7
|
-
<circle cx='258.75' cy='258.75' r='258.75' transform='matrix(-1 0 0 1 724.5 103.5)' stroke='white'
|
|
8
|
-
<path d='M103.5 724.5L258.75 569.25' stroke='white'
|
|
7
|
+
<circle cx='258.75' cy='258.75' r='258.75' transform='matrix(-1 0 0 1 724.5 103.5)' stroke='white' strokeWidth={41.4} />
|
|
8
|
+
<path d='M103.5 724.5L258.75 569.25' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
|
|
9
9
|
</g>
|
|
10
10
|
</svg>
|
|
11
11
|
)
|
|
@@ -4,11 +4,11 @@ const TimerBackgroundIcon = () => {
|
|
|
4
4
|
return (
|
|
5
5
|
<svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
6
6
|
<g opacity='0.05'>
|
|
7
|
-
<ellipse cx='409.996' cy='451.818' rx='254.746' ry='255.434' stroke='white'
|
|
8
|
-
<path d='M409.988 196.385V103.5M317.353 103.5H502.622' stroke='white'
|
|
9
|
-
<path d='M607.247 255.825L640.369 223.361M607.992 190.15L672.746 256.572' stroke='white'
|
|
10
|
-
<path d='M222.392 259.332L190.165 225.975M156.897 258.289L223.432 193.66' stroke='white'
|
|
11
|
-
<path d='M491.054 335.708L409.994 475.036' stroke='white'
|
|
7
|
+
<ellipse cx='409.996' cy='451.818' rx='254.746' ry='255.434' stroke='white' strokeWidth={41.4} />
|
|
8
|
+
<path d='M409.988 196.385V103.5M317.353 103.5H502.622' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
|
|
9
|
+
<path d='M607.247 255.825L640.369 223.361M607.992 190.15L672.746 256.572' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
|
|
10
|
+
<path d='M222.392 259.332L190.165 225.975M156.897 258.289L223.432 193.66' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
|
|
11
|
+
<path d='M491.054 335.708L409.994 475.036' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
12
|
</g>
|
|
13
13
|
</svg>
|
|
14
14
|
|
|
@@ -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 } from '../constants'
|
|
5
|
+
|
|
6
|
+
const CheckListIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case 'small':
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={16}
|
|
15
|
+
height={16}
|
|
16
|
+
viewBox='0 0 16 16'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<path d='M11 3H12C12.5523 3 13 3.44772 13 4V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V4C3 3.44771 3.44772 3 4 3H5' stroke='none' />
|
|
22
|
+
<rect x={5} y={2} width={6} height={2} rx={1} stroke='none' />
|
|
23
|
+
<path d='M9 7L11 7' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
24
|
+
<path d='M9 12L11 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<path d='M5 6.5L6 7.5L7.5 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M9 9.5L11 9.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path d='M5 9L6 10L7.5 8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path d='M5 11.5L6 12.5L7.5 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
</svg>
|
|
30
|
+
)
|
|
31
|
+
break
|
|
32
|
+
case 'medium':
|
|
33
|
+
icon = (
|
|
34
|
+
<svg
|
|
35
|
+
width={24}
|
|
36
|
+
height={24}
|
|
37
|
+
viewBox='0 0 24 24'
|
|
38
|
+
fill='none'
|
|
39
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
40
|
+
className={className}
|
|
41
|
+
>
|
|
42
|
+
<path d='M16.5 4.5H18.5C19.0523 4.5 19.5 4.94772 19.5 5.5V20C19.5 20.5523 19.0523 21 18.5 21H5.5C4.94772 21 4.5 20.5523 4.5 20V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5H7.5' stroke='none' strokeWidth={1.5} />
|
|
43
|
+
<rect x={7.5} y={3} width={9} height={3} rx={1} stroke='none' strokeWidth={1.5} />
|
|
44
|
+
<path d='M13.5 10.5L16.5 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<path d='M13.5 18L16.5 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
<path d='M7.5 9.75L9 11.25L11.25 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
<path d='M13.5 14.25L16.5 14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M7.5 13.5L9 15L11.25 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M7.5 17.25L9 18.75L11.25 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
|
|
51
|
+
</svg>
|
|
52
|
+
)
|
|
53
|
+
break
|
|
54
|
+
case 'large':
|
|
55
|
+
icon = (
|
|
56
|
+
<svg
|
|
57
|
+
width={40}
|
|
58
|
+
height={40}
|
|
59
|
+
viewBox='0 0 40 40'
|
|
60
|
+
fill='none'
|
|
61
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
62
|
+
className={className}
|
|
63
|
+
>
|
|
64
|
+
<path d='M27.5 7.5H31.5C32.0523 7.5 32.5 7.94772 32.5 8.5V34C32.5 34.5523 32.0523 35 31.5 35H8.5C7.94772 35 7.5 34.5523 7.5 34V8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H12.5' stroke='none' strokeWidth={2} />
|
|
65
|
+
<rect x={12.5} y={5} width={15} height={5} rx={1} stroke='none' strokeWidth={2} />
|
|
66
|
+
<path d='M22.5 17.5L27.5 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<path d='M22.5 30L27.5 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
68
|
+
<path d='M12.5 16.25L15 18.75L18.75 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M22.5 23.75L27.5 23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M12.5 22.5L15 25L18.75 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
71
|
+
<path d='M12.5 28.75L15 31.25L18.75 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
CheckListIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(SIZES)
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
CheckListIcon.defaultProps = {
|
|
94
|
+
color: 'main-dark-blue',
|
|
95
|
+
size: 'medium'
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export default CheckListIcon
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES } from '../constants'
|
|
5
|
+
|
|
6
|
+
const SlotIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case 'small':
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={16}
|
|
15
|
+
height={16}
|
|
16
|
+
viewBox='0 0 16 16'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<rect x={14} y={14} width={12} height={12} rx={1} transform='rotate(-180 14 14)' stroke='none' />
|
|
22
|
+
<path d='M12 5.5L4 5.5L4 3.5L12 3.5L12 5.5Z' stroke='none' strokeLinejoin='round' />
|
|
23
|
+
<rect x={10} y={9} width={2} height={2} transform='rotate(-180 10 9)' stroke='none' strokeLinejoin='round' />
|
|
24
|
+
<rect x={10} y={12.5} width={2} height={2} transform='rotate(-180 10 12.5)' stroke='none' strokeLinejoin='round' />
|
|
25
|
+
<path d='M5 5.5V8M5 8H8M5 8V10.5C5 11.0523 5.44772 11.5 6 11.5H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
</svg>
|
|
27
|
+
)
|
|
28
|
+
break
|
|
29
|
+
case 'medium':
|
|
30
|
+
icon = (
|
|
31
|
+
<svg
|
|
32
|
+
width={24}
|
|
33
|
+
height={24}
|
|
34
|
+
viewBox='0 0 24 24'
|
|
35
|
+
fill='none'
|
|
36
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
37
|
+
className={className}
|
|
38
|
+
>
|
|
39
|
+
<rect x={21} y={21} width={18} height={18} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
|
|
40
|
+
<path d='M18 8.25L6 8.25L6 5.25L18 5.25L18 8.25Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
41
|
+
<rect x={15} y={13.5} width={3} height={3} transform='rotate(-180 15 13.5)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
42
|
+
<rect x={15} y={18.75} width={3} height={3} transform='rotate(-180 15 18.75)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
43
|
+
<path d='M7.5 8.25V12M7.5 12H12M7.5 12V16.25C7.5 16.8023 7.94772 17.25 8.5 17.25H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
44
|
+
</svg>
|
|
45
|
+
)
|
|
46
|
+
break
|
|
47
|
+
case 'large':
|
|
48
|
+
icon = (
|
|
49
|
+
<svg
|
|
50
|
+
width={40}
|
|
51
|
+
height={40}
|
|
52
|
+
viewBox='0 0 40 40'
|
|
53
|
+
fill='none'
|
|
54
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
55
|
+
className={className}
|
|
56
|
+
>
|
|
57
|
+
<rect x={35} y={35} width={30} height={30} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
|
|
58
|
+
<path d='M30 13.75L10 13.75L10 8.75L30 8.75L30 13.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
59
|
+
<rect x={25} y={22.5} width={5} height={5} transform='rotate(-180 25 22.5)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
60
|
+
<rect x={25} y={31.25} width={5} height={5} transform='rotate(-180 25 31.25)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
61
|
+
<path d='M12.5 13.75V20M12.5 20H20M12.5 20V27.75C12.5 28.3023 12.9477 28.75 13.5 28.75H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
return icon
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
SlotIcon.propTypes = {
|
|
73
|
+
/**
|
|
74
|
+
* color of text, icon and borders
|
|
75
|
+
*/
|
|
76
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
77
|
+
/**
|
|
78
|
+
* Size
|
|
79
|
+
*/
|
|
80
|
+
size: PropTypes.oneOf(SIZES)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
SlotIcon.defaultProps = {
|
|
84
|
+
color: 'main-dark-blue',
|
|
85
|
+
size: 'medium'
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default SlotIcon
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES } from '../constants'
|
|
5
|
+
|
|
6
|
+
const TeamsIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case 'small':
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={16}
|
|
15
|
+
height={16}
|
|
16
|
+
viewBox='0 0 16 16'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<path d='M8.0001 9.62964C6.10656 9.62964 4.57153 10.6909 4.57153 12H11.4287C11.4287 10.6909 9.89365 9.62964 8.0001 9.62964Z' stroke='none' strokeLinejoin='round' />
|
|
22
|
+
<ellipse cx={7.99993} cy={6.66668} rx={1.71429} ry={1.77778} stroke='none' />
|
|
23
|
+
<path d='M5.42857 8.74074C3.53502 8.74074 2 9.80199 2 11.1111H3' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
24
|
+
<path d='M6 4.10113C5.82129 4.03564 5.62898 4 5.42864 4C4.48187 4 3.71436 4.79594 3.71436 5.77778C3.71436 6.60612 4.26065 7.30215 5 7.49953' stroke='none' strokeLinecap='round' />
|
|
25
|
+
<path d='M10.5714 8.74074C12.465 8.74074 14 9.80199 14 11.1111H13' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M10.8894 7.52502C11.6842 7.37038 12.2856 6.64692 12.2856 5.77778C12.2856 4.79594 11.5181 4 10.5714 4C10.371 4 10.1787 4.03564 10 4.10113' stroke='none' strokeLinecap='round' />
|
|
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
|
+
<path d='M12.0003 14.4444C9.15996 14.4444 6.85742 16.0363 6.85742 18H17.1431C17.1431 16.0363 14.8406 14.4444 12.0003 14.4444Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
41
|
+
<ellipse cx={12.0001} cy={10} rx={2.57143} ry={2.66667} stroke='none' strokeWidth={1.5} />
|
|
42
|
+
<path d='M8.14286 13.1111C5.30254 13.1111 3 14.703 3 16.6667H4.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
43
|
+
<path d='M9 6.1517C8.73193 6.05346 8.44347 6 8.14296 6C6.7228 6 5.57153 7.19391 5.57153 8.66667C5.57153 9.90919 6.39098 10.9532 7.5 11.2493' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
44
|
+
<path d='M15.8571 13.1111C18.6975 13.1111 21 14.703 21 16.6667H19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
45
|
+
<path d='M16.3341 11.2875C17.5263 11.0556 18.4285 9.97037 18.4285 8.66667C18.4285 7.19391 17.2772 6 15.857 6C15.5565 6 15.2681 6.05346 15 6.1517' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
46
|
+
</svg>
|
|
47
|
+
)
|
|
48
|
+
break
|
|
49
|
+
case 'large':
|
|
50
|
+
icon = (
|
|
51
|
+
<svg
|
|
52
|
+
width={40}
|
|
53
|
+
height={40}
|
|
54
|
+
viewBox='0 0 40 40'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
className={className}
|
|
58
|
+
>
|
|
59
|
+
<path d='M20.0001 24.0741C15.2663 24.0741 11.4287 26.7272 11.4287 30H28.5716C28.5716 26.7272 24.734 24.0741 20.0001 24.0741Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
60
|
+
<ellipse cx={19.9998} cy={16.6667} rx={4.28571} ry={4.44444} stroke='none' strokeWidth={2} />
|
|
61
|
+
<path d='M13.5714 21.8519C8.83756 21.8519 5 24.505 5 27.7778H7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<path d='M14.9998 10.2528C14.553 10.0891 14.0722 10 13.5714 10C11.2044 10 9.28564 11.9898 9.28564 14.4444C9.28564 16.5153 10.6514 18.2554 12.4998 18.7488' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
63
|
+
<path d='M26.4286 21.8519C31.1624 21.8519 35 24.505 35 27.7778H32.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M27.2238 18.8125C29.2108 18.426 30.7144 16.6173 30.7144 14.4444C30.7144 11.9898 28.7956 10 26.4286 10C25.9278 10 25.447 10.0891 25.0002 10.2528' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
|
|
69
|
+
default:
|
|
70
|
+
break
|
|
71
|
+
}
|
|
72
|
+
return icon
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
TeamsIcon.propTypes = {
|
|
76
|
+
/**
|
|
77
|
+
* color of text, icon and borders
|
|
78
|
+
*/
|
|
79
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
80
|
+
/**
|
|
81
|
+
* Size
|
|
82
|
+
*/
|
|
83
|
+
size: PropTypes.oneOf(SIZES)
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
TeamsIcon.defaultProps = {
|
|
87
|
+
color: 'main-dark-blue',
|
|
88
|
+
size: 'medium'
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default TeamsIcon
|
|
@@ -25,7 +25,7 @@ const WorkspaceEmptyIcon = ({ color, size }) => {
|
|
|
25
25
|
<rect x={36} y={52.8334} width={10.6667} height={11.7483} rx={1} stroke='none' strokeWidth={3} />
|
|
26
26
|
<rect x={52} y={52.8334} width={16} height={11.7483} rx={1} stroke='none' strokeWidth={3} />
|
|
27
27
|
<rect x={68} y={80.8334} width={10.6667} height={11.7483} rx={1} transform='rotate(-180 68 80.8334)' stroke='none' strokeWidth={3} />
|
|
28
|
-
<rect x={52} y={80.8334} width={16} height={11.7483} rx=
|
|
28
|
+
<rect x={52} y={80.8334} width={16} height={11.7483} rx={1} transform='rotate(-180 52 80.8334)' stroke='none' strokeWidth={3} />
|
|
29
29
|
</svg>
|
|
30
30
|
)
|
|
31
31
|
break
|
|
@@ -19,6 +19,8 @@ import BillingIcon from './BillingIcon'
|
|
|
19
19
|
import CalendarIcon from './CalendarIcon'
|
|
20
20
|
import Calendar1DayIcon from './Calendar1DayIcon'
|
|
21
21
|
import Calendar7DaysIcon from './Calendar7DaysIcon'
|
|
22
|
+
import CheckListIcon from './CheckListIcon'
|
|
23
|
+
|
|
22
24
|
import CircleAddIcon from './CircleAddIcon'
|
|
23
25
|
import CircleArrowLeftIcon from './CircleArrowLeftIcon'
|
|
24
26
|
import CircleArrowRightIcon from './CircleArrowRightIcon'
|
|
@@ -58,6 +60,7 @@ import RequestOwnershipIcon from './RequestOwnershipIcon'
|
|
|
58
60
|
import RestartIcon from './RestartIcon'
|
|
59
61
|
import RocketIcon from './RocketIcon'
|
|
60
62
|
import SendIcon from './SendIcon'
|
|
63
|
+
import SlotIcon from './SlotIcon'
|
|
61
64
|
import SocialDiscordIcon from './SocialDiscordIcon'
|
|
62
65
|
import SocialGitHubIcon from './SocialGitHubIcon'
|
|
63
66
|
import SocialGitLabIcon from './SocialGitLabIcon'
|
|
@@ -67,6 +70,7 @@ import SocialTwitterIcon from './SocialTwitterIcon'
|
|
|
67
70
|
import StopIcon from './StopIcon'
|
|
68
71
|
import TerminalIcon from './TerminalIcon'
|
|
69
72
|
import TwoUsersIcon from './TwoUsersIcon'
|
|
73
|
+
import TeamsIcon from './TeamsIcon'
|
|
70
74
|
import UpgradeIcon from './UpgradeIcon'
|
|
71
75
|
import UserIcon from './UserIcon'
|
|
72
76
|
import UserRemoveIcon from './UserRemoveIcon'
|
|
@@ -101,6 +105,7 @@ export default {
|
|
|
101
105
|
CalendarIcon,
|
|
102
106
|
Calendar1DayIcon,
|
|
103
107
|
Calendar7DaysIcon,
|
|
108
|
+
CheckListIcon,
|
|
104
109
|
CircleAddIcon,
|
|
105
110
|
CircleArrowLeftIcon,
|
|
106
111
|
CircleArrowRightIcon,
|
|
@@ -141,6 +146,7 @@ export default {
|
|
|
141
146
|
RocketIcon,
|
|
142
147
|
SendIcon,
|
|
143
148
|
StopIcon,
|
|
149
|
+
SlotIcon,
|
|
144
150
|
SocialDiscordIcon,
|
|
145
151
|
SocialGitHubIcon,
|
|
146
152
|
SocialGitLabIcon,
|
|
@@ -152,6 +158,7 @@ export default {
|
|
|
152
158
|
UserIcon,
|
|
153
159
|
UserRemoveIcon,
|
|
154
160
|
UserRoleIcon,
|
|
161
|
+
TeamsIcon,
|
|
155
162
|
TwoUsersIcon,
|
|
156
163
|
WorkspaceDynamicIcon,
|
|
157
164
|
WorkspaceEmptyIcon,
|