@platformatic/ui-components 0.7.0 → 0.7.2
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-BUMVjZ-U.css +1 -0
- package/dist/assets/index-DbI83KVc.js +40 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/ModalDirectional.jsx +8 -3
- package/src/components/forms/Input.module.css +1 -1
- package/src/components/forms/InputFileUpload.jsx +206 -0
- package/src/components/forms/InputFileUpload.module.css +51 -0
- package/src/components/forms/Select.jsx +32 -13
- package/src/components/forms/Select.module.css +7 -8
- package/src/components/forms/index.js +2 -0
- package/src/components/icons/GraphQLEditsIcon.jsx +20 -18
- package/src/components/icons/Icons.module.css +6 -2
- package/src/components/icons/K8SMetricsIcon.jsx +10 -9
- package/src/components/icons/OpenAPIEditsIcon.jsx +7 -6
- package/src/components/icons/SortDownArrowAndBarIcon.jsx +90 -0
- package/src/components/icons/SortUpArrowAndBarIcon.jsx +93 -0
- package/src/components/icons/UploadFileIcon.jsx +96 -0
- package/src/components/icons/index.js +6 -0
- package/src/stories/forms/InputFileUpload.stories.jsx +42 -0
- package/src/stories/forms/Select.stories.jsx +17 -0
- package/dist/assets/index-Bdl3RcHK.css +0 -1
- package/dist/assets/index-CzGl5ygC.js +0 -40
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
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-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-DbI83KVc.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BUMVjZ-U.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -18,7 +18,8 @@ function ModalDirectional ({
|
|
|
18
18
|
titleClassName = '',
|
|
19
19
|
smallLayout = false,
|
|
20
20
|
classNameModalLefty = '',
|
|
21
|
-
permanent = false
|
|
21
|
+
permanent = false,
|
|
22
|
+
blurClassName = ''
|
|
22
23
|
}) {
|
|
23
24
|
const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
|
|
24
25
|
const [modalClassName] = useState(className)
|
|
@@ -40,7 +41,7 @@ function ModalDirectional ({
|
|
|
40
41
|
|
|
41
42
|
return (
|
|
42
43
|
<>
|
|
43
|
-
<div className={styles.blur} onClick={() => permanent ? {} : closeModal()} />
|
|
44
|
+
<div className={blurClassName || styles.blur} onClick={() => permanent ? {} : closeModal()} />
|
|
44
45
|
<div className={variantModalClassName}>
|
|
45
46
|
<div className={classNameLefty}>
|
|
46
47
|
<div className={styles.headerClassName}>
|
|
@@ -94,7 +95,11 @@ ModalDirectional.propTypes = {
|
|
|
94
95
|
/**
|
|
95
96
|
* permanent: modal could be closed only with Esc, X or Cancel
|
|
96
97
|
*/
|
|
97
|
-
permanent: PropTypes.bool
|
|
98
|
+
permanent: PropTypes.bool,
|
|
99
|
+
/**
|
|
100
|
+
* blurClassName: override
|
|
101
|
+
*/
|
|
102
|
+
blurClassName: PropTypes.string
|
|
98
103
|
}
|
|
99
104
|
|
|
100
105
|
export default ModalDirectional
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import PropTypes from 'prop-types'
|
|
4
|
+
import styles from './InputFileUpload.module.css'
|
|
5
|
+
import commonStyles from '../Common.module.css'
|
|
6
|
+
import PlatformaticIcon from '../PlatformaticIcon'
|
|
7
|
+
import Button from '../Button'
|
|
8
|
+
import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
|
|
9
|
+
|
|
10
|
+
function InputFileUpload ({
|
|
11
|
+
idInputFile = 'fileUpload',
|
|
12
|
+
placeholder = '',
|
|
13
|
+
borderColor = MAIN_GREEN,
|
|
14
|
+
errorMessage = '',
|
|
15
|
+
errorMessageTextClassName = '',
|
|
16
|
+
onFileSelect = () => {},
|
|
17
|
+
disabled = false,
|
|
18
|
+
beforeIcon = null,
|
|
19
|
+
afterIcon = null,
|
|
20
|
+
backgroundColor = WHITE,
|
|
21
|
+
inputTextClassName = '',
|
|
22
|
+
detailTextClassName = '',
|
|
23
|
+
verticalPaddingClassName = '',
|
|
24
|
+
dataAttrName = '',
|
|
25
|
+
dataAttrValue = '',
|
|
26
|
+
readOnly = false,
|
|
27
|
+
removeFileButton = {},
|
|
28
|
+
onClickDetail = () => {},
|
|
29
|
+
acceptFiles = '*'
|
|
30
|
+
}) {
|
|
31
|
+
let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
|
|
32
|
+
baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
|
|
33
|
+
baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
|
|
34
|
+
const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
|
|
35
|
+
const showError = errorMessage.length > 0
|
|
36
|
+
if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
|
|
37
|
+
if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
|
|
38
|
+
if (afterIcon) baseInputClassName += ' ' + styles.afterIconPadding
|
|
39
|
+
const [focus, setFocus] = useState(false)
|
|
40
|
+
const inputPlaceholder = placeholder
|
|
41
|
+
const [file, setFile] = useState(null)
|
|
42
|
+
|
|
43
|
+
const dataProps = {}
|
|
44
|
+
if (dataAttrName && dataAttrValue) {
|
|
45
|
+
dataProps[`data-${dataAttrName}`] = dataAttrValue
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function focusedClassName () {
|
|
49
|
+
const useEffectColor = showError ? ERROR_RED : borderColor
|
|
50
|
+
return (baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-100`])
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function normalClassName () {
|
|
54
|
+
const useEffectColor = showError ? ERROR_RED : borderColor
|
|
55
|
+
return baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-70`]
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function handleFocus () {
|
|
59
|
+
if (!disabled) {
|
|
60
|
+
setFocus(true)
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function handleBlur () {
|
|
65
|
+
if (!disabled) setFocus(false)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function handleFileInput (e) {
|
|
69
|
+
setFile(e.target.files[0])
|
|
70
|
+
onFileSelect(e.target.files[0])
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function clearFile () {
|
|
74
|
+
document.getElementById(idInputFile).value = ''
|
|
75
|
+
setFile(null)
|
|
76
|
+
onFileSelect(null)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<div className={styles.container} {...dataProps}>
|
|
81
|
+
<div className={styles.content}>
|
|
82
|
+
<div className={styles.inputContainer}>
|
|
83
|
+
{beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
|
|
84
|
+
<input
|
|
85
|
+
id={idInputFile}
|
|
86
|
+
type='file'
|
|
87
|
+
className={focus ? focusedClassName() : normalClassName()}
|
|
88
|
+
onChange={handleFileInput}
|
|
89
|
+
disabled={disabled}
|
|
90
|
+
placeholder={inputPlaceholder}
|
|
91
|
+
readOnly={readOnly}
|
|
92
|
+
aria-readonly={readOnly}
|
|
93
|
+
onFocus={() => handleFocus()}
|
|
94
|
+
onBlur={() => handleBlur()}
|
|
95
|
+
accept={acceptFiles}
|
|
96
|
+
/>
|
|
97
|
+
{file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
|
|
98
|
+
</div>
|
|
99
|
+
{file !== null && (
|
|
100
|
+
<Button
|
|
101
|
+
textClass={removeFileButton?.textClass ?? ''}
|
|
102
|
+
paddingClass={removeFileButton?.paddingClass ?? ''}
|
|
103
|
+
label={removeFileButton?.label ?? 'Remove file'}
|
|
104
|
+
color={removeFileButton?.color ?? ERROR_RED}
|
|
105
|
+
type='button'
|
|
106
|
+
onClick={() => clearFile()}
|
|
107
|
+
/>
|
|
108
|
+
)}
|
|
109
|
+
</div>
|
|
110
|
+
{showError && <span className={errorMessageClassName}>{errorMessage}</span>}
|
|
111
|
+
</div>
|
|
112
|
+
)
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
InputFileUpload.propTypes = {
|
|
116
|
+
/**
|
|
117
|
+
* idInputFile
|
|
118
|
+
*/
|
|
119
|
+
idInputFile: PropTypes.string,
|
|
120
|
+
/**
|
|
121
|
+
* placeholder
|
|
122
|
+
*/
|
|
123
|
+
placeholder: PropTypes.string,
|
|
124
|
+
/**
|
|
125
|
+
* color of border
|
|
126
|
+
*/
|
|
127
|
+
borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
|
|
128
|
+
/**
|
|
129
|
+
* color of border
|
|
130
|
+
*/
|
|
131
|
+
backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
|
|
132
|
+
/**
|
|
133
|
+
* onFileSelect
|
|
134
|
+
*/
|
|
135
|
+
onFileSelect: PropTypes.func,
|
|
136
|
+
/**
|
|
137
|
+
* Disabled
|
|
138
|
+
*/
|
|
139
|
+
disabled: PropTypes.bool,
|
|
140
|
+
/**
|
|
141
|
+
* beforeIcon: PlatformaticIcon props
|
|
142
|
+
*/
|
|
143
|
+
beforeIcon: PropTypes.shape({
|
|
144
|
+
iconName: PropTypes.string,
|
|
145
|
+
color: PropTypes.string,
|
|
146
|
+
onClick: PropTypes.func
|
|
147
|
+
}),
|
|
148
|
+
/**
|
|
149
|
+
* afterIcon: PlatformaticIcon props
|
|
150
|
+
*/
|
|
151
|
+
afterIcon: PropTypes.shape({
|
|
152
|
+
iconName: PropTypes.string,
|
|
153
|
+
color: PropTypes.string,
|
|
154
|
+
onClick: PropTypes.func
|
|
155
|
+
}),
|
|
156
|
+
/**
|
|
157
|
+
* backgroundTransparent
|
|
158
|
+
*/
|
|
159
|
+
backgroundTransparent: PropTypes.bool,
|
|
160
|
+
/**
|
|
161
|
+
* inputTextClassName
|
|
162
|
+
*/
|
|
163
|
+
inputTextClassName: PropTypes.string,
|
|
164
|
+
/**
|
|
165
|
+
* detailTextClassName
|
|
166
|
+
*/
|
|
167
|
+
detailTextClassName: PropTypes.string,
|
|
168
|
+
/**
|
|
169
|
+
* accept
|
|
170
|
+
*/
|
|
171
|
+
accept: PropTypes.string,
|
|
172
|
+
/**
|
|
173
|
+
* verticalPaddingClassName
|
|
174
|
+
*/
|
|
175
|
+
verticalPaddingClassName: PropTypes.string,
|
|
176
|
+
/**
|
|
177
|
+
* dataAttrName
|
|
178
|
+
*/
|
|
179
|
+
dataAttrName: PropTypes.string,
|
|
180
|
+
/**
|
|
181
|
+
* dataAttrValue
|
|
182
|
+
*/
|
|
183
|
+
dataAttrValue: PropTypes.string,
|
|
184
|
+
/**
|
|
185
|
+
* readOnly
|
|
186
|
+
*/
|
|
187
|
+
readOnly: PropTypes.bool,
|
|
188
|
+
/**
|
|
189
|
+
* errorMessage
|
|
190
|
+
*/
|
|
191
|
+
errorMessage: PropTypes.string,
|
|
192
|
+
/**
|
|
193
|
+
* errorMessageTextClassName
|
|
194
|
+
*/
|
|
195
|
+
errorMessageTextClassName: PropTypes.string,
|
|
196
|
+
/**
|
|
197
|
+
* removeFileButton
|
|
198
|
+
*/
|
|
199
|
+
removeFileButton: PropTypes.object,
|
|
200
|
+
/**
|
|
201
|
+
* onClickDetail
|
|
202
|
+
*/
|
|
203
|
+
onClickDetail: PropTypes.func
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
export default InputFileUpload
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
@apply flex flex-col w-full relative;
|
|
3
|
+
}
|
|
4
|
+
.content,
|
|
5
|
+
.inputContainer {
|
|
6
|
+
@apply flex w-full relative z-20 gap-x-2 items-center;
|
|
7
|
+
}
|
|
8
|
+
.input {
|
|
9
|
+
padding-block: 0px;
|
|
10
|
+
padding-inline: 0px;
|
|
11
|
+
@apply border border-solid box-border rounded px-2 z-10;
|
|
12
|
+
}
|
|
13
|
+
.inputDefaultVerticalPadding {
|
|
14
|
+
@apply py-2.5;
|
|
15
|
+
}
|
|
16
|
+
.afterInputDetail,
|
|
17
|
+
.beforeInputIcon {
|
|
18
|
+
@apply absolute top-[50%] z-20;
|
|
19
|
+
transform: translateY(-50%);
|
|
20
|
+
}
|
|
21
|
+
.beforeInputIcon {
|
|
22
|
+
@apply left-0 ml-2
|
|
23
|
+
}
|
|
24
|
+
.afterInputDetail {
|
|
25
|
+
@apply right-0 mr-2 cursor-pointer
|
|
26
|
+
}
|
|
27
|
+
.beforeIconPadding {
|
|
28
|
+
@apply pl-8
|
|
29
|
+
}
|
|
30
|
+
.afterIconPadding {
|
|
31
|
+
@apply pr-8
|
|
32
|
+
}
|
|
33
|
+
.color-main-dark-blue {
|
|
34
|
+
@apply text-main-dark-blue;
|
|
35
|
+
}
|
|
36
|
+
.color-error-red{
|
|
37
|
+
@apply text-error-red;
|
|
38
|
+
}
|
|
39
|
+
.color-white{
|
|
40
|
+
@apply text-white;
|
|
41
|
+
}
|
|
42
|
+
.paddingFocused {
|
|
43
|
+
@apply p-4;
|
|
44
|
+
}
|
|
45
|
+
.placeholderAPart {
|
|
46
|
+
@apply absolute top-[50%] right-0 translate-y-[-50%] left-0 text-main-dark-blue text-opacity-20 ml-2 z-0;
|
|
47
|
+
}
|
|
48
|
+
.input.active,
|
|
49
|
+
.input:focus {
|
|
50
|
+
outline: none;
|
|
51
|
+
}
|
|
@@ -3,8 +3,9 @@ import React, { useState, useEffect, useRef } from 'react'
|
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './Select.module.css'
|
|
5
5
|
import commonStyles from '../Common.module.css'
|
|
6
|
-
import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constants'
|
|
6
|
+
import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SIZES, SMALL, WHITE } from '../constants'
|
|
7
7
|
import PlatformaticIcon from '../PlatformaticIcon'
|
|
8
|
+
import Icons from '../icons'
|
|
8
9
|
|
|
9
10
|
function Select ({
|
|
10
11
|
defaultContainerClassName = '',
|
|
@@ -25,7 +26,8 @@ function Select ({
|
|
|
25
26
|
dataAttrName = '',
|
|
26
27
|
dataAttrValue = '',
|
|
27
28
|
backgroundColor = WHITE,
|
|
28
|
-
inputTextClassName = ''
|
|
29
|
+
inputTextClassName = '',
|
|
30
|
+
beforeIcon = {}
|
|
29
31
|
}) {
|
|
30
32
|
const inputRef = useRef()
|
|
31
33
|
const [showOptions, setShowOptions] = useState(false)
|
|
@@ -35,10 +37,12 @@ function Select ({
|
|
|
35
37
|
const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
|
|
36
38
|
const showError = errorMessage.length > 0
|
|
37
39
|
const containerClassName = `${styles.container} ${defaultContainerClassName} `
|
|
40
|
+
let baseWrapperClassName = `${styles.selectContainer} `
|
|
38
41
|
let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
baseWrapperClassName += ' ' + styles[`select-${mainColor}`]
|
|
43
|
+
baseWrapperClassName += ' ' + commonStyles[`text--${borderColor}`]
|
|
41
44
|
let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
|
|
45
|
+
baseWrapperClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
|
|
42
46
|
inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
|
|
43
47
|
optionsClassName += commonStyles[`background-color-${backgroundColor}`]
|
|
44
48
|
|
|
@@ -50,7 +54,6 @@ function Select ({
|
|
|
50
54
|
if (optionsBorderedBottom) {
|
|
51
55
|
singleOptionClassName += ` ${styles['bordered-bottom']}`
|
|
52
56
|
}
|
|
53
|
-
|
|
54
57
|
const optionSpanClassName = commonStyles[`text--${mainColor}-70`]
|
|
55
58
|
const optionSpanClassNameSelected = commonStyles[`text--${mainColor}`]
|
|
56
59
|
const descriptionClassName = commonStyles[`text--${mainColor}`]
|
|
@@ -58,17 +61,17 @@ function Select ({
|
|
|
58
61
|
const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
|
|
59
62
|
|
|
60
63
|
function onFocusClassName () {
|
|
61
|
-
return
|
|
64
|
+
return commonStyles[`bordered--${borderColor}-100`] + ' ' + baseWrapperClassName
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
function normalClassName () {
|
|
65
|
-
const baseClassName =
|
|
68
|
+
const baseClassName = baseWrapperClassName
|
|
66
69
|
if (showError) {
|
|
67
|
-
|
|
70
|
+
baseWrapperClassName += ' ' + commonStyles['bordered--error-red']
|
|
68
71
|
} else {
|
|
69
|
-
|
|
72
|
+
baseWrapperClassName += ' ' + commonStyles[`bordered--${borderColor}-70`]
|
|
70
73
|
}
|
|
71
|
-
if (disabled)
|
|
74
|
+
if (disabled) baseWrapperClassName += ' ' + commonStyles['apply-opacity-30']
|
|
72
75
|
return baseClassName
|
|
73
76
|
}
|
|
74
77
|
|
|
@@ -158,10 +161,18 @@ function Select ({
|
|
|
158
161
|
}, 250)
|
|
159
162
|
}
|
|
160
163
|
|
|
164
|
+
function getBeforeIcon () {
|
|
165
|
+
return React.createElement(Icons[`${beforeIcon.iconName}`], {
|
|
166
|
+
color: beforeIcon.color,
|
|
167
|
+
size: beforeIcon.size
|
|
168
|
+
})
|
|
169
|
+
}
|
|
170
|
+
|
|
161
171
|
return (
|
|
162
172
|
<div className={containerClassName} {...dataProps}>
|
|
163
|
-
<div className={
|
|
164
|
-
|
|
173
|
+
<div className={wrapperClassName}>
|
|
174
|
+
{beforeIcon?.iconName && getBeforeIcon()}
|
|
175
|
+
<input type='text' name={name} value={value} className={inputClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
|
|
165
176
|
<div className={styles.icons}>
|
|
166
177
|
<PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
|
|
167
178
|
</div>
|
|
@@ -261,7 +272,15 @@ Select.propTypes = {
|
|
|
261
272
|
/**
|
|
262
273
|
* errorMessageTextClassName
|
|
263
274
|
*/
|
|
264
|
-
errorMessageTextClassName: PropTypes.string
|
|
275
|
+
errorMessageTextClassName: PropTypes.string,
|
|
276
|
+
/**
|
|
277
|
+
* beforeIcon: PlatformaticIcon props
|
|
278
|
+
*/
|
|
279
|
+
beforeIcon: PropTypes.shape({
|
|
280
|
+
iconName: PropTypes.string,
|
|
281
|
+
color: PropTypes.string,
|
|
282
|
+
size: PropTypes.oneOf(SIZES)
|
|
283
|
+
})
|
|
265
284
|
}
|
|
266
285
|
|
|
267
286
|
export default Select
|
|
@@ -2,18 +2,17 @@
|
|
|
2
2
|
@apply flex flex-col w-full relative
|
|
3
3
|
}
|
|
4
4
|
.selectContainer {
|
|
5
|
-
@apply w-full flex items-center relative z-10;
|
|
5
|
+
@apply w-full flex items-center relative z-10 gap-x-2 border border-solid box-border rounded py-1.5 px-2 md:px-3 md:py-[10.5px];
|
|
6
6
|
}
|
|
7
7
|
.select {
|
|
8
|
-
@apply
|
|
8
|
+
@apply h-full border-none rounded;
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
.select-main-dark-blue
|
|
12
|
-
.select-main-dark-blue:focus {
|
|
10
|
+
.select-main-dark-blue input.active,
|
|
11
|
+
.select-main-dark-blue input:focus {
|
|
13
12
|
@apply shadow-main-dark-blue outline-none;
|
|
14
13
|
}
|
|
15
|
-
.select-white.active,
|
|
16
|
-
.select-white:focus {
|
|
14
|
+
.select-white input.active,
|
|
15
|
+
.select-white input:focus {
|
|
17
16
|
@apply outline-none;
|
|
18
17
|
}
|
|
19
18
|
.options {
|
|
@@ -37,4 +36,4 @@
|
|
|
37
36
|
}
|
|
38
37
|
.descriptionValue {
|
|
39
38
|
@apply opacity-70
|
|
40
|
-
}
|
|
39
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import Field from './Field'
|
|
2
2
|
import Input from './Input'
|
|
3
|
+
import InputFileUpload from './InputFileUpload'
|
|
3
4
|
import InputWithSeparator from './InputWithSeparator'
|
|
4
5
|
import Password from './Password'
|
|
5
6
|
import Preview from './Preview'
|
|
@@ -11,6 +12,7 @@ import ToggleSwitch from './ToggleSwitch'
|
|
|
11
12
|
|
|
12
13
|
export default {
|
|
13
14
|
Field,
|
|
15
|
+
InputFileUpload,
|
|
14
16
|
Input,
|
|
15
17
|
InputWithSeparator,
|
|
16
18
|
Password,
|
|
@@ -17,6 +17,7 @@ const GraphQLEditsIcon = ({
|
|
|
17
17
|
className += ` ${styles.iconInactive}`
|
|
18
18
|
}
|
|
19
19
|
const filledClassName = styles[`filled-${color}`]
|
|
20
|
+
const strokeTransparent = styles.strokeTransparent
|
|
20
21
|
|
|
21
22
|
let icon = <></>
|
|
22
23
|
|
|
@@ -34,13 +35,13 @@ const GraphQLEditsIcon = ({
|
|
|
34
35
|
<rect x='11.376' y='6.36633' width='1.9323' height='7.0851' transform='rotate(45 11.376 6.36633)' stroke='none' strokeLinejoin='round' />
|
|
35
36
|
<path d='M7.73304 12.7427L6.3667 11.3763L5.68353 13.4259L7.73304 12.7427Z' stroke='none' strokeLinejoin='round' />
|
|
36
37
|
<path d='M12.0595 5.68317C12.4368 5.30587 13.0485 5.30587 13.4258 5.68317V5.68317C13.8032 6.06048 13.8032 6.67221 13.4258 7.04951L12.7427 7.73268L11.3763 6.36634L12.0595 5.68317Z' stroke='none' />
|
|
37
|
-
<circle cx='5' cy='2' r='1' fill='none' className={filledClassName} />
|
|
38
|
-
<circle cx='5' cy='9' r='1' fill='none' className={filledClassName} />
|
|
38
|
+
<circle cx='5' cy='2' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
39
|
+
<circle cx='5' cy='9' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
39
40
|
<path d='M2 7V4L5 2M2 7L5 9L8 7M2 7H8M2 7L5 2M5 2L8 4V7M5 2L8 7' stroke='none' />
|
|
40
|
-
<circle cx='8' cy='4' r='1' fill='none' className={filledClassName} />
|
|
41
|
-
<circle cx='8' cy='7' r='1' fill='none' className={filledClassName} />
|
|
42
|
-
<circle cx='2' cy='7' r='1' fill='none' className={filledClassName} />
|
|
43
|
-
<circle cx='2' cy='4' r='1' fill='none' className={filledClassName} />
|
|
41
|
+
<circle cx='8' cy='4' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
42
|
+
<circle cx='8' cy='7' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
43
|
+
<circle cx='2' cy='7' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
44
|
+
<circle cx='2' cy='4' r='1' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
44
45
|
</svg>
|
|
45
46
|
)
|
|
46
47
|
break
|
|
@@ -57,13 +58,14 @@ const GraphQLEditsIcon = ({
|
|
|
57
58
|
<rect x='17.064' y='9.54956' width='2.89845' height='10.6276' transform='rotate(45 17.064 9.54956)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
58
59
|
<path d='M11.5988 19.114L9.54932 17.0645L8.52456 20.1387L11.5988 19.114Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
59
60
|
<path d='M18.4067 8.20711C18.7972 7.81658 19.4304 7.81658 19.8209 8.20711L20.4562 8.84241C20.8467 9.23293 20.8467 9.8661 20.4562 10.2566L19.1138 11.599L17.0643 9.54951L18.4067 8.20711Z' stroke='none' strokeWidth={1.5} />
|
|
60
|
-
<circle cx='7.5' cy='3' r='1.5' fill='none' className={filledClassName} />
|
|
61
|
-
<circle cx='7.5' cy='13.5' r='1.5' fill='none' className={filledClassName} />
|
|
61
|
+
<circle cx='7.5' cy='3' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
62
|
+
<circle cx='7.5' cy='13.5' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
62
63
|
<path d='M3 10.5V6L7.5 3M3 10.5L7.5 13.5L12 10.5M3 10.5H12M3 10.5L7.5 3M7.5 3L12 6V10.5M7.5 3L12 10.5' stroke='none' strokeWidth={1.5} />
|
|
63
|
-
<circle cx='12' cy='6' r='1.5' fill='none' className={filledClassName} />
|
|
64
|
-
<circle cx='12' cy='10.5' r='1.5' fill='none' className={filledClassName} />
|
|
65
|
-
<circle cx='3' cy='10.5' r='1.5' fill='none' className={filledClassName} />
|
|
66
|
-
<circle cx='3' cy='6' r='1.5' fill='none' className={filledClassName} />
|
|
64
|
+
<circle cx='12' cy='6' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
65
|
+
<circle cx='12' cy='10.5' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
66
|
+
<circle cx='3' cy='10.5' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
67
|
+
<circle cx='3' cy='6' r='1.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
68
|
+
|
|
67
69
|
</svg>
|
|
68
70
|
)
|
|
69
71
|
break
|
|
@@ -80,13 +82,13 @@ const GraphQLEditsIcon = ({
|
|
|
80
82
|
<rect x='28.4404' y='15.9159' width='4.83075' height='17.7127' transform='rotate(45 28.4404 15.9159)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
81
83
|
<path d='M19.3319 31.8567L15.916 28.4408L14.2081 33.5646L19.3319 31.8567Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
82
84
|
<path d='M31.1493 13.2071C31.5399 12.8166 32.173 12.8166 32.5636 13.2071L34.5652 15.2087C34.9557 15.5993 34.9557 16.2324 34.5652 16.623L31.8564 19.3317L28.4406 15.9159L31.1493 13.2071Z' stroke='none' strokeWidth={2} />
|
|
83
|
-
<circle cx='12.5' cy='5' r='2.5' fill='none' className={filledClassName} />
|
|
84
|
-
<circle cx='12.5' cy='22.5' r='2.5' fill='none' className={filledClassName} />
|
|
85
|
+
<circle cx='12.5' cy='5' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
86
|
+
<circle cx='12.5' cy='22.5' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
85
87
|
<path d='M5 17.5V10L12.5 5M5 17.5L12.5 22.5L20 17.5M5 17.5H20M5 17.5L12.5 5M12.5 5L20 10V17.5M12.5 5L20 17.5' stroke='none' strokeWidth={2} />
|
|
86
|
-
<circle cx='20' cy='10' r='2.5' fill='none' className={filledClassName} />
|
|
87
|
-
<circle cx='20' cy='17.5' r='2.5' fill='none' className={filledClassName} />
|
|
88
|
-
<circle cx='5' cy='17.5' r='2.5' fill='none' className={filledClassName} />
|
|
89
|
-
<circle cx='5' cy='10' r='2.5' fill='none' className={filledClassName} />
|
|
88
|
+
<circle cx='20' cy='10' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
89
|
+
<circle cx='20' cy='17.5' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
90
|
+
<circle cx='5' cy='17.5' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
91
|
+
<circle cx='5' cy='10' r='2.5' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
90
92
|
</svg>
|
|
91
93
|
)
|
|
92
94
|
break
|
|
@@ -111,10 +111,10 @@
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.filled-rich-black {
|
|
114
|
-
@apply fill-rich-black
|
|
114
|
+
@apply fill-rich-black;
|
|
115
115
|
}
|
|
116
116
|
.filled-white {
|
|
117
|
-
@apply fill-white
|
|
117
|
+
@apply fill-white;
|
|
118
118
|
}
|
|
119
119
|
.filled-error-red{
|
|
120
120
|
@apply fill-error-red;
|
|
@@ -149,4 +149,8 @@
|
|
|
149
149
|
|
|
150
150
|
.iconInactive {
|
|
151
151
|
@apply opacity-70
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.strokeTransparent {
|
|
155
|
+
stroke: transparent !important;
|
|
152
156
|
}
|