@platformatic/ui-components 0.1.150 → 0.1.153
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/.nvmrc +1 -1
- package/dist/assets/{index-f415d95b.css → index-BixsHrYW.css} +1 -1
- package/dist/assets/index-BoULZrVI.js +206 -0
- package/dist/index.html +2 -3
- package/dist/main.css +15 -5
- package/package.json +5 -5
- package/src/components/forms/InputWithSeparator.jsx +21 -13
- package/src/components/icons/SortDownIcon.jsx +97 -0
- package/src/components/icons/SortIcon.jsx +95 -0
- package/src/components/icons/SortUpIcon.jsx +95 -0
- package/src/components/icons/index.js +6 -0
- package/src/stories/forms/InputWithSeparator.stories.jsx +18 -2
- package/dist/assets/index-ebd9cdc0.js +0 -206
package/dist/index.html
CHANGED
|
@@ -4,11 +4,10 @@
|
|
|
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" href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-BoULZrVI.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BixsHrYW.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
|
12
|
-
|
|
13
12
|
</body>
|
|
14
13
|
</html>
|
package/dist/main.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
! tailwindcss v3.
|
|
2
|
+
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -32,9 +32,11 @@
|
|
|
32
32
|
4. Use the user's configured `sans` font-family by default.
|
|
33
33
|
5. Use the user's configured `sans` font-feature-settings by default.
|
|
34
34
|
6. Use the user's configured `sans` font-variation-settings by default.
|
|
35
|
+
7. Disable tap highlights on iOS
|
|
35
36
|
*/
|
|
36
37
|
|
|
37
|
-
html
|
|
38
|
+
html,
|
|
39
|
+
:host {
|
|
38
40
|
line-height: 1.5;
|
|
39
41
|
/* 1 */
|
|
40
42
|
-webkit-text-size-adjust: 100%;
|
|
@@ -50,6 +52,8 @@ html {
|
|
|
50
52
|
/* 5 */
|
|
51
53
|
font-variation-settings: normal;
|
|
52
54
|
/* 6 */
|
|
55
|
+
-webkit-tap-highlight-color: transparent;
|
|
56
|
+
/* 7 */
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
/*
|
|
@@ -121,8 +125,10 @@ strong {
|
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
/*
|
|
124
|
-
1. Use the user's configured `mono` font
|
|
125
|
-
2.
|
|
128
|
+
1. Use the user's configured `mono` font-family by default.
|
|
129
|
+
2. Use the user's configured `mono` font-feature-settings by default.
|
|
130
|
+
3. Use the user's configured `mono` font-variation-settings by default.
|
|
131
|
+
4. Correct the odd `em` font sizing in all browsers.
|
|
126
132
|
*/
|
|
127
133
|
|
|
128
134
|
code,
|
|
@@ -131,8 +137,12 @@ samp,
|
|
|
131
137
|
pre {
|
|
132
138
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
133
139
|
/* 1 */
|
|
134
|
-
font-
|
|
140
|
+
font-feature-settings: normal;
|
|
135
141
|
/* 2 */
|
|
142
|
+
font-variation-settings: normal;
|
|
143
|
+
/* 3 */
|
|
144
|
+
font-size: 1em;
|
|
145
|
+
/* 4 */
|
|
136
146
|
}
|
|
137
147
|
|
|
138
148
|
/*
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@platformatic/ui-components",
|
|
3
3
|
"description": "Platformatic UI Components",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.153",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
"@types/react-dom": "^18.0.6",
|
|
46
46
|
"@vitejs/plugin-react": "^4.0.0",
|
|
47
47
|
"babel-loader": "^9.0.0",
|
|
48
|
-
"happy-dom": "^
|
|
49
|
-
"jsdom": "^
|
|
48
|
+
"happy-dom": "^13.0.0",
|
|
49
|
+
"jsdom": "^24.0.0",
|
|
50
50
|
"react-test-renderer": "^18.2.0",
|
|
51
51
|
"snazzy": "^9.0.0",
|
|
52
52
|
"standard": "^17.0.0",
|
|
53
53
|
"storybook": "^7.0.20",
|
|
54
54
|
"tailwindcss": "^3.1.8",
|
|
55
|
-
"vite": "^
|
|
56
|
-
"vitest": "^0.
|
|
55
|
+
"vite": "^5.0.0",
|
|
56
|
+
"vitest": "^1.0.0"
|
|
57
57
|
},
|
|
58
58
|
"standard": {
|
|
59
59
|
"globals": [
|
|
@@ -19,7 +19,7 @@ function InputWithSeparator ({
|
|
|
19
19
|
afterIcon,
|
|
20
20
|
defaultValue,
|
|
21
21
|
value,
|
|
22
|
-
|
|
22
|
+
separators,
|
|
23
23
|
inputTextClassName
|
|
24
24
|
}) {
|
|
25
25
|
const showError = errorMessage.length > 0
|
|
@@ -33,8 +33,11 @@ function InputWithSeparator ({
|
|
|
33
33
|
|
|
34
34
|
useEffect(() => {
|
|
35
35
|
if (defaultValue.length > 0) {
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
let elements
|
|
37
|
+
for (const separator of separators) {
|
|
38
|
+
elements = defaultValue.split(separator).filter(e => e !== '')
|
|
39
|
+
setChunks(prevChunks => [...prevChunks, ...elements])
|
|
40
|
+
}
|
|
38
41
|
}
|
|
39
42
|
}, [])
|
|
40
43
|
|
|
@@ -68,13 +71,18 @@ function InputWithSeparator ({
|
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
function handleChange (event) {
|
|
71
|
-
if (!showError
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
if (!showError) {
|
|
75
|
+
let elements
|
|
76
|
+
for (const separator of separators) {
|
|
77
|
+
if (event.target.value.indexOf(separator) > -1) {
|
|
78
|
+
elements = event.target.value.split(separator)
|
|
79
|
+
if (elements[0] !== '') {
|
|
80
|
+
const tmp = [elements[0]]
|
|
81
|
+
setChunks(prevChunks => [...prevChunks, ...tmp])
|
|
82
|
+
onChange({ value: elements[1], chunks: [...chunks, ...tmp] })
|
|
83
|
+
return
|
|
84
|
+
}
|
|
85
|
+
}
|
|
78
86
|
}
|
|
79
87
|
}
|
|
80
88
|
onChange({ value: event.target.value, chunks })
|
|
@@ -181,9 +189,9 @@ InputWithSeparator.propTypes = {
|
|
|
181
189
|
*/
|
|
182
190
|
defaultValue: PropTypes.string,
|
|
183
191
|
/**
|
|
184
|
-
*
|
|
192
|
+
* separators
|
|
185
193
|
*/
|
|
186
|
-
|
|
194
|
+
separators: PropTypes.arrayOf(PropTypes.string),
|
|
187
195
|
/**
|
|
188
196
|
* inputTextClassName
|
|
189
197
|
*/
|
|
@@ -226,7 +234,7 @@ InputWithSeparator.defaultProps = {
|
|
|
226
234
|
onChange: () => {},
|
|
227
235
|
disabled: false,
|
|
228
236
|
afterIcon: null,
|
|
229
|
-
|
|
237
|
+
separators: [''],
|
|
230
238
|
inputTextClassName: ''
|
|
231
239
|
}
|
|
232
240
|
|
|
@@ -0,0 +1,97 @@
|
|
|
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 SortDownIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
const filledClassName = styles[`filled-${color}`]
|
|
15
|
+
let icon = <></>
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path opacity='0.3' d='M5 7.41943L8 2.41943L11 7.41943H5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path d='M11 9.41943L8 14.4194L5 9.41943L11 9.41943Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
30
|
+
|
|
31
|
+
</svg>
|
|
32
|
+
)
|
|
33
|
+
break
|
|
34
|
+
case MEDIUM:
|
|
35
|
+
icon = (
|
|
36
|
+
<svg
|
|
37
|
+
width={24}
|
|
38
|
+
height={24}
|
|
39
|
+
viewBox='0 0 24 24'
|
|
40
|
+
fill='none'
|
|
41
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
42
|
+
className={className}
|
|
43
|
+
>
|
|
44
|
+
<path opacity='0.3' d='M7.5 10.5L12 3L16.5 10.5H7.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
45
|
+
<path d='M16.5 13.5L12 21L7.5 13.5L16.5 13.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
46
|
+
|
|
47
|
+
</svg>
|
|
48
|
+
)
|
|
49
|
+
break
|
|
50
|
+
case LARGE:
|
|
51
|
+
icon = (
|
|
52
|
+
<svg
|
|
53
|
+
width={40}
|
|
54
|
+
height={40}
|
|
55
|
+
viewBox='0 0 40 40'
|
|
56
|
+
fill='none'
|
|
57
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
58
|
+
className={className}
|
|
59
|
+
>
|
|
60
|
+
<path opacity='0.3' d='M12.5 17.5L20 5L27.5 17.5H12.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
61
|
+
<path d='M27.5 22.5L20 35L12.5 22.5L27.5 22.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
return icon
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
SortDownIcon.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
|
+
* disabled
|
|
83
|
+
*/
|
|
84
|
+
disabled: PropTypes.bool,
|
|
85
|
+
/**
|
|
86
|
+
* inactive
|
|
87
|
+
*/
|
|
88
|
+
inactive: PropTypes.bool
|
|
89
|
+
}
|
|
90
|
+
SortDownIcon.defaultProps = {
|
|
91
|
+
color: MAIN_DARK_BLUE,
|
|
92
|
+
size: MEDIUM,
|
|
93
|
+
disabled: false,
|
|
94
|
+
inactive: false
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default SortDownIcon
|
|
@@ -0,0 +1,95 @@
|
|
|
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 SortIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
const filledClassName = styles[`filled-${color}`]
|
|
15
|
+
let icon = <></>
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path opacity='0.3' d='M5 7.41943L8 2.41943L11 7.41943H5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path opacity='0.3' d='M11 9.41943L8 14.4194L5 9.41943L11 9.41943Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<path opacity='0.3' d='M7.5 10.5L12 3L16.5 10.5H7.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
44
|
+
<path opacity='0.3' d='M16.5 13.5L12 21L7.5 13.5L16.5 13.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
45
|
+
</svg>
|
|
46
|
+
)
|
|
47
|
+
break
|
|
48
|
+
case LARGE:
|
|
49
|
+
icon = (
|
|
50
|
+
<svg
|
|
51
|
+
width={40}
|
|
52
|
+
height={40}
|
|
53
|
+
viewBox='0 0 40 40'
|
|
54
|
+
fill='none'
|
|
55
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
56
|
+
className={className}
|
|
57
|
+
>
|
|
58
|
+
<path opacity='0.3' d='M12.5 17.5L20 5L27.5 17.5H12.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
59
|
+
<path opacity='0.3' d='M27.5 22.5L20 35L12.5 22.5L27.5 22.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
|
|
64
|
+
default:
|
|
65
|
+
break
|
|
66
|
+
}
|
|
67
|
+
return icon
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
SortIcon.propTypes = {
|
|
71
|
+
/**
|
|
72
|
+
* color of text, icon and borders
|
|
73
|
+
*/
|
|
74
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
75
|
+
/**
|
|
76
|
+
* Size
|
|
77
|
+
*/
|
|
78
|
+
size: PropTypes.oneOf(SIZES),
|
|
79
|
+
/**
|
|
80
|
+
* disabled
|
|
81
|
+
*/
|
|
82
|
+
disabled: PropTypes.bool,
|
|
83
|
+
/**
|
|
84
|
+
* inactive
|
|
85
|
+
*/
|
|
86
|
+
inactive: PropTypes.bool
|
|
87
|
+
}
|
|
88
|
+
SortIcon.defaultProps = {
|
|
89
|
+
color: MAIN_DARK_BLUE,
|
|
90
|
+
size: MEDIUM,
|
|
91
|
+
disabled: false,
|
|
92
|
+
inactive: false
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default SortIcon
|
|
@@ -0,0 +1,95 @@
|
|
|
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 SortUpIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
const filledClassName = styles[`filled-${color}`]
|
|
15
|
+
let icon = <></>
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path d='M5 7.41943L8 2.41943L11 7.41943H5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
29
|
+
<path opacity='0.3' d='M11 9.41943L8 14.4194L5 9.41943L11 9.41943Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<path d='M7.5 10.5L12 3L16.5 10.5H7.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
44
|
+
<path opacity='0.3' d='M16.5 13.5L12 21L7.5 13.5L16.5 13.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
45
|
+
</svg>
|
|
46
|
+
)
|
|
47
|
+
break
|
|
48
|
+
case LARGE:
|
|
49
|
+
icon = (
|
|
50
|
+
<svg
|
|
51
|
+
width={40}
|
|
52
|
+
height={40}
|
|
53
|
+
viewBox='0 0 40 40'
|
|
54
|
+
fill='none'
|
|
55
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
56
|
+
className={className}
|
|
57
|
+
>
|
|
58
|
+
<path d='M12.5 17.5L20 5L27.5 17.5H12.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
59
|
+
<path opacity='0.3' d='M27.5 22.5L20 35L12.5 22.5L27.5 22.5Z' fill='none' className={filledClassName} stroke='none' strokeLinejoin='round' />
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
|
|
64
|
+
default:
|
|
65
|
+
break
|
|
66
|
+
}
|
|
67
|
+
return icon
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
SortUpIcon.propTypes = {
|
|
71
|
+
/**
|
|
72
|
+
* color of text, icon and borders
|
|
73
|
+
*/
|
|
74
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
75
|
+
/**
|
|
76
|
+
* Size
|
|
77
|
+
*/
|
|
78
|
+
size: PropTypes.oneOf(SIZES),
|
|
79
|
+
/**
|
|
80
|
+
* disabled
|
|
81
|
+
*/
|
|
82
|
+
disabled: PropTypes.bool,
|
|
83
|
+
/**
|
|
84
|
+
* inactive
|
|
85
|
+
*/
|
|
86
|
+
inactive: PropTypes.bool
|
|
87
|
+
}
|
|
88
|
+
SortUpIcon.defaultProps = {
|
|
89
|
+
color: MAIN_DARK_BLUE,
|
|
90
|
+
size: MEDIUM,
|
|
91
|
+
disabled: false,
|
|
92
|
+
inactive: false
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default SortUpIcon
|
|
@@ -104,6 +104,9 @@ import SocialLinkedInIcon from './SocialLinkedInIcon'
|
|
|
104
104
|
import SocialNPMIcon from './SocialNPMIcon'
|
|
105
105
|
import SocialXIcon from './SocialXIcon'
|
|
106
106
|
import SortableIcon from './SortableIcon'
|
|
107
|
+
import SortIcon from './SortIcon'
|
|
108
|
+
import SortDownIcon from './SortDownIcon'
|
|
109
|
+
import SortUpIcon from './SortUpIcon'
|
|
107
110
|
import StackablesIcon from './StackablesIcon'
|
|
108
111
|
import StackablesPluginIcon from './StackablesPluginIcon'
|
|
109
112
|
import StackablesTemplateIcon from './StackablesTemplateIcon'
|
|
@@ -233,6 +236,9 @@ export default {
|
|
|
233
236
|
SocialNPMIcon,
|
|
234
237
|
SocialXIcon,
|
|
235
238
|
SortableIcon,
|
|
239
|
+
SortIcon,
|
|
240
|
+
SortDownIcon,
|
|
241
|
+
SortUpIcon,
|
|
236
242
|
StackablesIcon,
|
|
237
243
|
StackablesPluginIcon,
|
|
238
244
|
StackablesTemplateIcon,
|
|
@@ -49,7 +49,7 @@ Default.args = {
|
|
|
49
49
|
name: 'test',
|
|
50
50
|
placeholder: 'Initial value',
|
|
51
51
|
borderColor: 'main-dark-blue',
|
|
52
|
-
|
|
52
|
+
separators: [','],
|
|
53
53
|
afterIcon: {
|
|
54
54
|
iconName: 'AddIcon',
|
|
55
55
|
color: ERROR_RED,
|
|
@@ -84,7 +84,23 @@ PredefinedValues.args = {
|
|
|
84
84
|
name: 'test',
|
|
85
85
|
placeholder: 'Initial value',
|
|
86
86
|
borderColor: 'main-dark-blue',
|
|
87
|
-
|
|
87
|
+
separators: [','],
|
|
88
|
+
defaultValue: 'test,test-1,test-2',
|
|
89
|
+
afterIcon: {
|
|
90
|
+
iconName: 'AddIcon',
|
|
91
|
+
color: ERROR_RED,
|
|
92
|
+
handleClick: () => alert('I\'m an AddIcon')
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export const DifferentsSeparators = TemplateDefaultWithValues.bind({})
|
|
98
|
+
|
|
99
|
+
DifferentsSeparators.args = {
|
|
100
|
+
name: 'test',
|
|
101
|
+
placeholder: 'Initial value',
|
|
102
|
+
borderColor: 'main-dark-blue',
|
|
103
|
+
separators: [',', ' '],
|
|
88
104
|
defaultValue: 'test,test-1,test-2',
|
|
89
105
|
afterIcon: {
|
|
90
106
|
iconName: 'AddIcon',
|