@platformatic/ui-components 0.6.9 → 0.6.11
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-3WVulCbJ.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/DropDown.jsx +14 -3
- package/src/components/DropDown.module.css +4 -1
- package/src/components/forms/Select.module.css +1 -1
- package/src/components/icons/CheckListReviewIcon.jsx +118 -0
- package/src/components/icons/CreateAppIcon.jsx +2 -3
- package/src/components/icons/index.js +2 -0
- package/dist/assets/index-Bn4IkzM3.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-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-3WVulCbJ.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -8,13 +8,15 @@ import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './cons
|
|
|
8
8
|
function DropDown ({
|
|
9
9
|
pictureUrl = '',
|
|
10
10
|
header = '',
|
|
11
|
+
headerClassName = '',
|
|
11
12
|
align = 'left',
|
|
12
13
|
items = [],
|
|
13
14
|
backgroundColor = DARK_BLUE,
|
|
14
15
|
textColor = MAIN_DARK_BLUE,
|
|
15
16
|
headerColor = WHITE,
|
|
16
17
|
borderColor = WHITE,
|
|
17
|
-
lastButton = null
|
|
18
|
+
lastButton = null,
|
|
19
|
+
menuCustomClassName = ''
|
|
18
20
|
}) {
|
|
19
21
|
const [open, setOpen] = useState(false)
|
|
20
22
|
const borderClass = commonStyles[`bordered--${borderColor}-30`]
|
|
@@ -22,6 +24,7 @@ function DropDown ({
|
|
|
22
24
|
let classNameMenu = `${styles.menu} `
|
|
23
25
|
classNameMenu += commonStyles[`background-color-${backgroundColor}`]
|
|
24
26
|
classNameMenu += ' ' + borderClass
|
|
27
|
+
classNameMenu += ' ' + menuCustomClassName
|
|
25
28
|
|
|
26
29
|
let classNameItem = `${styles.item} `
|
|
27
30
|
classNameItem += commonStyles[`text--${textColor}`]
|
|
@@ -49,7 +52,7 @@ function DropDown ({
|
|
|
49
52
|
<div className={`${styles.dropDown} ${styles[align]}`}>
|
|
50
53
|
<span className={headerClassNamme} onClick={handleOpen}>
|
|
51
54
|
{pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
|
|
52
|
-
{header}
|
|
55
|
+
{header && (<span className={headerClassName || styles.headerClassNameDefault}>{header}</span>)}
|
|
53
56
|
{!open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowRightIcon' color={headerColor} onClick={null} /></div>}
|
|
54
57
|
{open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowDownIcon' color={headerColor} onClick={null} /></div>}
|
|
55
58
|
</span>
|
|
@@ -78,6 +81,10 @@ DropDown.propTypes = {
|
|
|
78
81
|
* header
|
|
79
82
|
*/
|
|
80
83
|
header: PropTypes.string,
|
|
84
|
+
/**
|
|
85
|
+
* headerClassName
|
|
86
|
+
*/
|
|
87
|
+
headerClassName: PropTypes.string,
|
|
81
88
|
/**
|
|
82
89
|
* align
|
|
83
90
|
*/
|
|
@@ -105,7 +112,11 @@ DropDown.propTypes = {
|
|
|
105
112
|
/**
|
|
106
113
|
* lastButton
|
|
107
114
|
*/
|
|
108
|
-
lastButton: PropTypes.node
|
|
115
|
+
lastButton: PropTypes.node,
|
|
116
|
+
/**
|
|
117
|
+
* menuCustomClassName
|
|
118
|
+
*/
|
|
119
|
+
menuCustomClassName: PropTypes.string
|
|
109
120
|
}
|
|
110
121
|
|
|
111
122
|
export default DropDown
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
transform: translateY(-50%);
|
|
13
13
|
}
|
|
14
14
|
.header {
|
|
15
|
-
@apply flex items-center hover:cursor-pointer relative pr-6
|
|
15
|
+
@apply flex items-center hover:cursor-pointer relative pr-6;
|
|
16
|
+
}
|
|
17
|
+
.headerClassNameDefault {
|
|
18
|
+
@apply tracking-more-widest uppercase text-sm font-normal;
|
|
16
19
|
}
|
|
17
20
|
.picture {
|
|
18
21
|
@apply border border-transparent rounded-full mr-2;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
@apply outline-none;
|
|
18
18
|
}
|
|
19
19
|
.options {
|
|
20
|
-
@apply absolute left-0 top-[42px] w-
|
|
20
|
+
@apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-auto z-20 p-2 box-border;
|
|
21
21
|
}
|
|
22
22
|
.bordered-options {
|
|
23
23
|
@apply border border-solid rounded
|
|
@@ -0,0 +1,118 @@
|
|
|
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 CheckListReviewIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
|
|
22
|
+
switch (size) {
|
|
23
|
+
case SMALL:
|
|
24
|
+
icon = (
|
|
25
|
+
<svg
|
|
26
|
+
width={16}
|
|
27
|
+
height={16}
|
|
28
|
+
viewBox='0 0 16 16'
|
|
29
|
+
fill='none'
|
|
30
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
31
|
+
className={className}
|
|
32
|
+
>
|
|
33
|
+
<path d='M11 3H12C12.5523 3 13 3.44772 13 4V9M5 3H4C3.44772 3 3 3.44771 3 4V13C3 13.5523 3.44772 14 4 14H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<rect x='5' y='2' width='6' height='2' rx='1' stroke='none' />
|
|
35
|
+
<path d='M6 6L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M6 11L7 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M6 8.5L8 8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<circle cx='2.5' cy='2.5' r='2.5' transform='matrix(-1 0 0 1 12 8)' stroke='none' />
|
|
39
|
+
<path d='M11.5 12.5L13.5 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
40
|
+
<circle cx='4.5' cy='6' r='0.5' className={filledClassName} />
|
|
41
|
+
<circle cx='4.5' cy='8.5' r='0.5' className={filledClassName} />
|
|
42
|
+
<circle cx='4.5' cy='11' r='0.5' className={filledClassName} />
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
case MEDIUM:
|
|
47
|
+
icon = (
|
|
48
|
+
<svg
|
|
49
|
+
width={24}
|
|
50
|
+
height={24}
|
|
51
|
+
viewBox='0 0 24 24'
|
|
52
|
+
fill='none'
|
|
53
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
54
|
+
className={className}
|
|
55
|
+
>
|
|
56
|
+
<path d='M16.5 4.5H18.5C19.0523 4.5 19.5 4.94772 19.5 5.5V13.5M7.5 4.5H5.5C4.94772 4.5 4.5 4.94772 4.5 5.5V20C4.5 20.5523 4.94772 21 5.5 21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<rect x='7.5' y='3' width='9' height='3' rx='1' stroke='none' strokeWidth={1.5} />
|
|
58
|
+
<path d='M9 9L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<path d='M9 16.5L10.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
<path d='M9 12.75L12 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<circle cx='3.75' cy='3.75' r='3.75' transform='matrix(-1 0 0 1 18 12)' stroke='none' strokeWidth={1.5} />
|
|
62
|
+
<path d='M17.25 18.75L20.25 21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<circle cx='6.75' cy='9' r='0.75' className={filledClassName} />
|
|
64
|
+
<circle cx='6.75' cy='12.75' r='0.75' className={filledClassName} />
|
|
65
|
+
<circle cx='6.75' cy='16.5' r='0.75' className={filledClassName} />
|
|
66
|
+
</svg>
|
|
67
|
+
)
|
|
68
|
+
break
|
|
69
|
+
case LARGE:
|
|
70
|
+
icon = (
|
|
71
|
+
<svg
|
|
72
|
+
width={40}
|
|
73
|
+
height={40}
|
|
74
|
+
viewBox='0 0 40 40'
|
|
75
|
+
fill='none'
|
|
76
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
77
|
+
className={className}
|
|
78
|
+
>
|
|
79
|
+
<path d='M27.5 7.5H31.5C32.0523 7.5 32.5 7.94772 32.5 8.5V22.5M12.5 7.5H8.5C7.94772 7.5 7.5 7.94772 7.5 8.5V34C7.5 34.5523 7.94772 35 8.5 35H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
<rect x='12.5' y='5' width='15' height='5' rx='1' stroke='none' strokeWidth={2} />
|
|
81
|
+
<path d='M15 15L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
82
|
+
<path d='M15 27.5L17.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
83
|
+
<path d='M15 21.25L20 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<circle cx='6.25' cy='6.25' r='6.25' transform='matrix(-1 0 0 1 30 20)' stroke='none' strokeWidth={2} />
|
|
85
|
+
<path d='M28.75 31.25L33.75 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
86
|
+
<circle cx='11.25' cy='15' r='1.25' className={filledClassName} />
|
|
87
|
+
<circle cx='11.25' cy='21.25' r='1.25' className={filledClassName} />
|
|
88
|
+
<circle cx='11.25' cy='27.5' r='1.25' className={filledClassName} />
|
|
89
|
+
</svg>
|
|
90
|
+
)
|
|
91
|
+
break
|
|
92
|
+
|
|
93
|
+
default:
|
|
94
|
+
break
|
|
95
|
+
}
|
|
96
|
+
return icon
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
CheckListReviewIcon.propTypes = {
|
|
100
|
+
/**
|
|
101
|
+
* color of text, icon and borders
|
|
102
|
+
*/
|
|
103
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
104
|
+
/**
|
|
105
|
+
* Size
|
|
106
|
+
*/
|
|
107
|
+
size: PropTypes.oneOf(SIZES),
|
|
108
|
+
/**
|
|
109
|
+
* disabled
|
|
110
|
+
*/
|
|
111
|
+
disabled: PropTypes.bool,
|
|
112
|
+
/**
|
|
113
|
+
* inactive
|
|
114
|
+
*/
|
|
115
|
+
inactive: PropTypes.bool
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export default CheckListReviewIcon
|
|
@@ -45,9 +45,8 @@ const CreateAppIcon = ({
|
|
|
45
45
|
xmlns='http://www.w3.org/2000/svg'
|
|
46
46
|
className={className}
|
|
47
47
|
>
|
|
48
|
-
<path d='
|
|
49
|
-
<path d='
|
|
50
|
-
|
|
48
|
+
<path d='M15.75 10.5L20.2966 13.125V18.375L15.75 21L11.2034 18.375V13.125L15.75 10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15M9.04323 6V12M6 9L12 9.06062' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
50
|
</svg>
|
|
52
51
|
)
|
|
53
52
|
break
|
|
@@ -33,6 +33,7 @@ import CalendarIcon from './CalendarIcon'
|
|
|
33
33
|
import Calendar1DayIcon from './Calendar1DayIcon'
|
|
34
34
|
import Calendar7DaysIcon from './Calendar7DaysIcon'
|
|
35
35
|
import CheckListIcon from './CheckListIcon'
|
|
36
|
+
import CheckListReviewIcon from './CheckListReviewIcon'
|
|
36
37
|
import CircleAddIcon from './CircleAddIcon'
|
|
37
38
|
import CircleArrowLeftIcon from './CircleArrowLeftIcon'
|
|
38
39
|
import CircleArrowRightIcon from './CircleArrowRightIcon'
|
|
@@ -202,6 +203,7 @@ export default {
|
|
|
202
203
|
Calendar1DayIcon,
|
|
203
204
|
Calendar7DaysIcon,
|
|
204
205
|
CheckListIcon,
|
|
206
|
+
CheckListReviewIcon,
|
|
205
207
|
CircleAddIcon,
|
|
206
208
|
CircleArrowLeftIcon,
|
|
207
209
|
CircleArrowRightIcon,
|