@platformatic/ui-components 0.1.130 → 0.1.132
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-0dbe23f0.js → index-e93dce3e.js} +12 -12
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/Checkbox.jsx +2 -2
- package/src/components/Checkbox.module.css +18 -6
- package/src/components/DropDown.jsx +14 -10
- package/src/components/DropDown.module.css +7 -2
- package/src/components/icons/StackablesIcon.jsx +122 -0
- package/src/components/icons/index.js +4 -2
- package/src/stories/DropDown.stories.jsx +14 -1
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-e93dce3e.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index-89e9ad97.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './Checkbox.module.css'
|
|
5
|
-
import { MAIN_DARK_BLUE, WHITE } from './constants'
|
|
5
|
+
import { MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
|
|
6
6
|
function Checkbox ({ disabled, color, ...rest }) {
|
|
7
7
|
let className = `${styles.checkbox} `
|
|
8
8
|
className += styles[`checkbox--${color}`]
|
|
@@ -20,7 +20,7 @@ Checkbox.propTypes = {
|
|
|
20
20
|
/**
|
|
21
21
|
* color
|
|
22
22
|
*/
|
|
23
|
-
color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE])
|
|
23
|
+
color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK])
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
Checkbox.defaultProps = {
|
|
@@ -6,20 +6,19 @@
|
|
|
6
6
|
.checkbox--main-dark-blue {
|
|
7
7
|
@apply border-light-green bg-main-dark-blue
|
|
8
8
|
}
|
|
9
|
+
.checkbox--main-dark-blue:checked {
|
|
10
|
+
@apply bg-light-green text-main-dark-blue;
|
|
11
|
+
}
|
|
9
12
|
|
|
10
13
|
.checkbox--white {
|
|
11
14
|
@apply border-main-dark-blue bg-white
|
|
12
15
|
}
|
|
13
|
-
|
|
14
16
|
.checkbox--white:checked {
|
|
15
17
|
@apply bg-main-dark-blue text-white;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
.checkbox--main-dark-blue:checked
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.checkbox:checked:after {
|
|
20
|
+
.checkbox--main-dark-blue:checked:after,
|
|
21
|
+
.checkbox--white:checked:after {
|
|
23
22
|
@apply absolute top-[-4px] left-[1px] h-full w-full;
|
|
24
23
|
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
25
24
|
}
|
|
@@ -28,3 +27,16 @@
|
|
|
28
27
|
@apply border-white;
|
|
29
28
|
}
|
|
30
29
|
|
|
30
|
+
.checkbox--rich-black {
|
|
31
|
+
@apply border-white bg-rich-black
|
|
32
|
+
}
|
|
33
|
+
.checkbox--rich-black:checked {
|
|
34
|
+
@apply bg-white text-rich-black;
|
|
35
|
+
}
|
|
36
|
+
.checkbox--rich-black:checked:after {
|
|
37
|
+
@apply absolute top-[-4px] left-[1px] h-full w-full;
|
|
38
|
+
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke=%22#00050B%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
|
|
|
4
4
|
import styles from './DropDown.module.css'
|
|
5
5
|
import commonStyles from './Common.module.css'
|
|
6
6
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
7
|
-
import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from './constants'
|
|
7
|
+
import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
|
|
8
8
|
function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor, lastButton }) {
|
|
9
9
|
const [open, setOpen] = useState(false)
|
|
10
|
-
const borderClass = commonStyles[`bordered--${borderColor}-
|
|
10
|
+
const borderClass = commonStyles[`bordered--${borderColor}-30`]
|
|
11
11
|
|
|
12
12
|
let classNameMenu = `${styles.menu} `
|
|
13
13
|
classNameMenu += commonStyles[`background-color-${backgroundColor}`]
|
|
@@ -16,10 +16,14 @@ function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColo
|
|
|
16
16
|
let classNameItem = `${styles.item} `
|
|
17
17
|
classNameItem += commonStyles[`text--${textColor}`]
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
switch (backgroundColor) {
|
|
20
|
+
case DARK_BLUE:
|
|
21
|
+
case RICH_BLACK:
|
|
22
|
+
classNameItem += ' ' + styles[`hover--${WHITE}`]
|
|
23
|
+
break
|
|
24
|
+
default:
|
|
25
|
+
classNameItem += ' ' + styles[`hover--${MAIN_DARK_BLUE}`]
|
|
26
|
+
break
|
|
23
27
|
}
|
|
24
28
|
|
|
25
29
|
const lastButtonClassName = styles.lastButton + ' ' + borderClass
|
|
@@ -75,19 +79,19 @@ DropDown.propTypes = {
|
|
|
75
79
|
/**
|
|
76
80
|
* backgroundColor
|
|
77
81
|
*/
|
|
78
|
-
backgroundColor: PropTypes.oneOf([DARK_BLUE, LIGHT_BLUE]),
|
|
82
|
+
backgroundColor: PropTypes.oneOf([DARK_BLUE, LIGHT_BLUE, RICH_BLACK]),
|
|
79
83
|
/**
|
|
80
84
|
* textColor
|
|
81
85
|
*/
|
|
82
|
-
textColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE]),
|
|
86
|
+
textColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE, WHITE]),
|
|
83
87
|
/**
|
|
84
88
|
* borderColor
|
|
85
89
|
*/
|
|
86
|
-
borderColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
|
|
90
|
+
borderColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
|
|
87
91
|
/**
|
|
88
92
|
* headerColor
|
|
89
93
|
*/
|
|
90
|
-
headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
|
|
94
|
+
headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
|
|
91
95
|
/**
|
|
92
96
|
* lastButton
|
|
93
97
|
*/
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
@apply items-start;
|
|
9
9
|
}
|
|
10
10
|
.arrow {
|
|
11
|
-
@apply absolute top-[50%] right-0
|
|
11
|
+
@apply absolute top-[50%] right-0;
|
|
12
|
+
transform: translateY(-50%);
|
|
12
13
|
}
|
|
13
14
|
.header {
|
|
14
15
|
@apply flex items-center hover:cursor-pointer relative pr-6 tracking-more-widest uppercase text-sm font-normal;
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
@apply absolute border-solid border p-0 mt-8 rounded-md z-10 text-sm min-w-[190px];
|
|
21
22
|
}
|
|
22
23
|
.item {
|
|
23
|
-
@apply
|
|
24
|
+
@apply hover:cursor-pointer;
|
|
24
25
|
}
|
|
25
26
|
.lastButton {
|
|
26
27
|
@apply border-t py-2 text-center mx-auto;
|
|
@@ -33,4 +34,8 @@
|
|
|
33
34
|
|
|
34
35
|
.hover--white {
|
|
35
36
|
@apply hover:bg-white hover:bg-opacity-10;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.hover--rich-black {
|
|
40
|
+
@apply hover:bg-rich-black hover:bg-opacity-10;
|
|
36
41
|
}
|
|
@@ -0,0 +1,122 @@
|
|
|
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 StackablesIcon = ({ 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
|
+
<path d='M11.3834 9.6748L7.67533 11.5744L4 9.71624' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<path d='M7.66943 13.4988V11.8079' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M11.3834 9.67493V12.0781L7.67533 13.9745L4 12.1195V9.71636' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path d='M11.3834 7.1676L7.67533 9.06719L4 7.20904' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path d='M7.66943 10.9916V9.30066' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path d='M11.3834 7.16772V9.5709L7.67533 11.4673L4 9.61233V7.20916' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path d='M9.52939 3.79163L11.3834 4.66032L7.67533 6.55991L4 4.70176L5.83767 3.81234' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<path d='M7.66943 8.48436V6.79346' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<path d='M11.3834 4.6604V7.06357L7.67533 8.95997L4 7.105V4.70183' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M5.8457 2.69214V4.07653' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<ellipse cx='7.57619' cy='2.69219' rx='1.73049' ry='0.692194' stroke='none' />
|
|
35
|
+
<path d='M9.30667 4.07654C9.30667 4.45883 8.53191 4.76873 7.57619 4.76873C6.62047 4.76873 5.8457 4.45883 5.8457 4.07654' stroke='none' />
|
|
36
|
+
<path d='M9.30664 2.69214V4.07653' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<path d='M17.0752 14.5123L11.513 17.3617L6 14.5745' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<path d='M11.5044 20.2483V17.7119' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M17.0752 14.5125V18.1172L11.513 20.9618L6 18.1794V14.5746' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M17.0752 10.7515L11.513 13.6008L6 10.8136' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M11.5044 16.4874V13.951' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M17.0752 10.7516V14.3563L11.513 17.2009L6 14.4185V10.8137' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M14.2941 5.6875L17.0752 6.99055L11.513 9.83993L6 7.0527L8.7565 5.71858' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<path d='M11.5044 12.7265V10.1902' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<path d='M17.0752 6.99072V10.5955L11.513 13.4401L6 10.6576V7.05287' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
<path d='M8.76904 4.03833V6.11491' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<ellipse cx='11.3648' cy='4.03829' rx='2.59573' ry='1.03829' stroke='none' strokeWidth={1.5} />
|
|
62
|
+
<path d='M13.9605 6.11487C13.9605 6.6883 12.7984 7.15316 11.3648 7.15316C9.93119 7.15316 8.76904 6.6883 8.76904 6.11487' stroke='none' strokeWidth={1.5} />
|
|
63
|
+
<path d='M13.9604 4.03833V6.11491' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
case LARGE:
|
|
69
|
+
icon = (
|
|
70
|
+
<svg
|
|
71
|
+
width={40}
|
|
72
|
+
height={40}
|
|
73
|
+
viewBox='0 0 40 40'
|
|
74
|
+
fill='none'
|
|
75
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
76
|
+
className={className}
|
|
77
|
+
>
|
|
78
|
+
<path d='M28.4586 24.1871L19.1883 28.9361L10 24.2907' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<path d='M19.1738 33.747V29.5198' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
<path d='M28.4586 24.1873V30.1952L19.1883 34.9362L10 30.2988V24.2908' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
81
|
+
<path d='M28.4586 17.9188L19.1883 22.6678L10 18.0224' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
82
|
+
<path d='M19.1738 27.4787V23.2515' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
83
|
+
<path d='M28.4586 17.9189V23.9269L19.1883 28.6679L10 24.0305V18.0225' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<path d='M23.8235 9.479L28.4586 11.6508L19.1883 16.3997L10 11.7543L14.5942 9.5308' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
85
|
+
<path d='M19.1738 21.2108V16.9835' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
86
|
+
<path d='M28.4586 11.651V17.6589L19.1883 22.3999L10 17.7625V11.7546' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
87
|
+
<path d='M14.6147 6.73047V10.1914' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
88
|
+
<ellipse cx='18.941' cy='6.73049' rx='4.32621' ry='1.73049' stroke='none' strokeWidth={2} />
|
|
89
|
+
<path d='M23.2672 10.1914C23.2672 11.1471 21.3303 11.9219 18.941 11.9219C16.5517 11.9219 14.6147 11.1471 14.6147 10.1914' stroke='none' strokeWidth={2} />
|
|
90
|
+
<path d='M23.2671 6.73047V10.1914' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
91
|
+
|
|
92
|
+
</svg>
|
|
93
|
+
)
|
|
94
|
+
break
|
|
95
|
+
|
|
96
|
+
default:
|
|
97
|
+
break
|
|
98
|
+
}
|
|
99
|
+
return icon
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
StackablesIcon.propTypes = {
|
|
103
|
+
/**
|
|
104
|
+
* color of text, icon and borders
|
|
105
|
+
*/
|
|
106
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
107
|
+
/**
|
|
108
|
+
* Size
|
|
109
|
+
*/
|
|
110
|
+
size: PropTypes.oneOf(SIZES),
|
|
111
|
+
/**
|
|
112
|
+
* disabled
|
|
113
|
+
*/
|
|
114
|
+
disabled: PropTypes.bool
|
|
115
|
+
}
|
|
116
|
+
StackablesIcon.defaultProps = {
|
|
117
|
+
color: MAIN_DARK_BLUE,
|
|
118
|
+
size: MEDIUM,
|
|
119
|
+
disabled: false
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export default StackablesIcon
|
|
@@ -103,6 +103,7 @@ import SocialLinkedInIcon from './SocialLinkedInIcon'
|
|
|
103
103
|
import SocialNPMIcon from './SocialNPMIcon'
|
|
104
104
|
import SocialXIcon from './SocialXIcon'
|
|
105
105
|
import SortableIcon from './SortableIcon'
|
|
106
|
+
import StackablesIcon from './StackablesIcon'
|
|
106
107
|
import StackablesPluginIcon from './StackablesPluginIcon'
|
|
107
108
|
import StackablesTemplateIcon from './StackablesTemplateIcon'
|
|
108
109
|
import StopIcon from './StopIcon'
|
|
@@ -220,8 +221,6 @@ export default {
|
|
|
220
221
|
SendIcon,
|
|
221
222
|
ServiceIcon,
|
|
222
223
|
StopIcon,
|
|
223
|
-
StackablesPluginIcon,
|
|
224
|
-
StackablesTemplateIcon,
|
|
225
224
|
SlotIcon,
|
|
226
225
|
SwitchIcon,
|
|
227
226
|
SocialDiscordIcon,
|
|
@@ -231,6 +230,9 @@ export default {
|
|
|
231
230
|
SocialNPMIcon,
|
|
232
231
|
SocialXIcon,
|
|
233
232
|
SortableIcon,
|
|
233
|
+
StackablesIcon,
|
|
234
|
+
StackablesPluginIcon,
|
|
235
|
+
StackablesTemplateIcon,
|
|
234
236
|
TerminalIcon,
|
|
235
237
|
TeamsIcon,
|
|
236
238
|
TwoUsersIcon,
|
|
@@ -4,7 +4,7 @@ import BorderedBox from '../components/BorderedBox'
|
|
|
4
4
|
import Button from '../components/Button'
|
|
5
5
|
import HorizontalSeparator from '../components/HorizontalSeparator'
|
|
6
6
|
import { useState } from 'react'
|
|
7
|
-
import { BOX_SHADOW, LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from '../components/constants'
|
|
7
|
+
import { BOX_SHADOW, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from '../components/constants'
|
|
8
8
|
export default {
|
|
9
9
|
title: 'Platformatic/DropDown',
|
|
10
10
|
component: DropDown,
|
|
@@ -75,3 +75,16 @@ withButton.args = {
|
|
|
75
75
|
borderColor: MAIN_DARK_BLUE
|
|
76
76
|
|
|
77
77
|
}
|
|
78
|
+
|
|
79
|
+
export const BlackVersion = Template.bind({})
|
|
80
|
+
|
|
81
|
+
BlackVersion.args = {
|
|
82
|
+
header: 'My Menu',
|
|
83
|
+
backgroundColor: RICH_BLACK,
|
|
84
|
+
borderColor: WHITE,
|
|
85
|
+
items: [
|
|
86
|
+
<span className='text-white' key='1'>Menu 1</span>,
|
|
87
|
+
<span className='text-white' key='2'>Menu 2</span>,
|
|
88
|
+
<span className='text-white' key='3'>Menu3</span>
|
|
89
|
+
]
|
|
90
|
+
}
|