@platformatic/ui-components 0.8.3 → 0.8.4
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-rfLsboCf.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/icons/EnvVariableszIcon.jsx +112 -0
- package/src/components/icons/index.js +2 -0
- package/src/stories/ButtonFullRounded.stories.jsx +6 -1
- package/dist/assets/index-DFooB5Gh.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-rfLsboCf.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-UjO_DhXJ.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -0,0 +1,112 @@
|
|
|
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 EnvVariableszIcon = ({
|
|
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='M7 8H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M7 11H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M2 5V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V5M2 5V4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V5M2 5H14' stroke='none' strokeLinejoin='round' />
|
|
36
|
+
<circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
37
|
+
<circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
38
|
+
<circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
39
|
+
<path d='M4.65051 7L4.9899 7.58203H5.00606L5.34949 7H5.97576L5.35758 8L6 9H5.35758L5.00606 8.40625H4.9899L4.63838 9H4L4.63434 8L4.0202 7H4.65051Z' fill='none' className={filledClassName} />
|
|
40
|
+
<path d='M4.65051 10L4.9899 10.582H5.00606L5.34949 10H5.97576L5.35758 11L6 12H5.35758L5.00606 11.4062H4.9899L4.63838 12H4L4.63434 11L4.0202 10H4.65051Z' fill='none' className={filledClassName} />
|
|
41
|
+
</svg>
|
|
42
|
+
)
|
|
43
|
+
break
|
|
44
|
+
case MEDIUM:
|
|
45
|
+
icon = (
|
|
46
|
+
<svg
|
|
47
|
+
width={24}
|
|
48
|
+
height={24}
|
|
49
|
+
viewBox='0 0 24 24'
|
|
50
|
+
fill='none'
|
|
51
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
52
|
+
className={className}
|
|
53
|
+
>
|
|
54
|
+
<path d='M10.5 12H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M10.5 16.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M3 7.5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V7.5M3 7.5V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7.5M3 7.5H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
57
|
+
<circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
58
|
+
<circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
59
|
+
<circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
60
|
+
<path d='M6.97576 10.5L7.48485 11.373H7.50909L8.02424 10.5H8.96364L8.03636 12L9 13.5H8.03636L7.50909 12.6094H7.48485L6.95758 13.5H6L6.95152 12L6.0303 10.5H6.97576Z' fill='none' className={filledClassName} />
|
|
61
|
+
<path d='M6.97576 15L7.48485 15.873H7.50909L8.02424 15H8.96364L8.03636 16.5L9 18H8.03636L7.50909 17.1094H7.48485L6.95758 18H6L6.95152 16.5L6.0303 15H6.97576Z' fill='none' className={filledClassName} />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
case LARGE:
|
|
66
|
+
icon = (
|
|
67
|
+
<svg
|
|
68
|
+
width={40}
|
|
69
|
+
height={40}
|
|
70
|
+
viewBox='0 0 40 40'
|
|
71
|
+
fill='none'
|
|
72
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
73
|
+
className={className}
|
|
74
|
+
>
|
|
75
|
+
<path d='M17.5 20H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
<path d='M17.5 27.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
77
|
+
<path d='M5 12.5V31C5 33.2091 6.79086 35 9 35H31C33.2091 35 35 33.2091 35 31V12.5M5 12.5V9C5 6.79086 6.79086 5 9 5H31C33.2091 5 35 6.79086 35 9V12.5M5 12.5H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
78
|
+
<circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
79
|
+
<circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
80
|
+
<circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
81
|
+
<path d='M11.6263 17.5L12.4747 18.9551H12.5152L13.3737 17.5H14.9394L13.3939 20L15 22.5H13.3939L12.5152 21.0156H12.4747L11.596 22.5H10L11.5859 20L10.0505 17.5H11.6263Z' fill='none' className={filledClassName} />
|
|
82
|
+
<path d='M11.6263 25L12.4747 26.4551H12.5152L13.3737 25H14.9394L13.3939 27.5L15 30H13.3939L12.5152 28.5156H12.4747L11.596 30H10L11.5859 27.5L10.0505 25H11.6263Z' fill='none' className={filledClassName} />
|
|
83
|
+
</svg>
|
|
84
|
+
)
|
|
85
|
+
break
|
|
86
|
+
|
|
87
|
+
default:
|
|
88
|
+
break
|
|
89
|
+
}
|
|
90
|
+
return icon
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
EnvVariableszIcon.propTypes = {
|
|
94
|
+
/**
|
|
95
|
+
* color of text, icon and borders
|
|
96
|
+
*/
|
|
97
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
98
|
+
/**
|
|
99
|
+
* Size
|
|
100
|
+
*/
|
|
101
|
+
size: PropTypes.oneOf(SIZES),
|
|
102
|
+
/**
|
|
103
|
+
* disabled
|
|
104
|
+
*/
|
|
105
|
+
disabled: PropTypes.bool,
|
|
106
|
+
/**
|
|
107
|
+
* inactive
|
|
108
|
+
*/
|
|
109
|
+
inactive: PropTypes.bool
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export default EnvVariableszIcon
|
|
@@ -85,6 +85,7 @@ import EditIcon from './EditIcon'
|
|
|
85
85
|
import EntrypointIcon from './EntrypointIcon'
|
|
86
86
|
import EnlargeIcon from './EnlargeIcon'
|
|
87
87
|
import EntryIcon from './EntryIcon'
|
|
88
|
+
import EnvVariableszIcon from './EnvVariableszIcon'
|
|
88
89
|
import ExpandIcon from './ExpandIcon'
|
|
89
90
|
import ExploreDocIcon from './ExploreDocIcon'
|
|
90
91
|
import EyeClosedIcon from './EyeClosedIcon'
|
|
@@ -294,6 +295,7 @@ export default {
|
|
|
294
295
|
ExploreDocIcon,
|
|
295
296
|
EnlargeIcon,
|
|
296
297
|
EntryIcon,
|
|
298
|
+
EnvVariableszIcon,
|
|
297
299
|
FailureRateIcon,
|
|
298
300
|
FolderIcon,
|
|
299
301
|
FoldersIcon,
|
|
@@ -5,7 +5,8 @@ import {
|
|
|
5
5
|
SIZES,
|
|
6
6
|
SMALL,
|
|
7
7
|
MEDIUM,
|
|
8
|
-
LARGE
|
|
8
|
+
LARGE,
|
|
9
|
+
HOVER_EFFECTS_BUTTONS
|
|
9
10
|
} from '../components/constants'
|
|
10
11
|
import Icons from '../components/icons'
|
|
11
12
|
|
|
@@ -54,6 +55,10 @@ export default {
|
|
|
54
55
|
options: SIZES
|
|
55
56
|
}
|
|
56
57
|
},
|
|
58
|
+
hoverEffect: {
|
|
59
|
+
type: 'radio',
|
|
60
|
+
options: HOVER_EFFECTS_BUTTONS
|
|
61
|
+
},
|
|
57
62
|
selected: {
|
|
58
63
|
type: 'boolean'
|
|
59
64
|
}
|