@platformatic/ui-components 0.1.93 → 0.1.95
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.194e494c.css +1 -0
- package/dist/assets/index.ac430ae0.js +206 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/Common.module.css +3 -0
- package/src/components/constants.js +2 -2
- package/src/components/forms/Input.jsx +15 -7
- package/src/components/forms/Input.module.css +5 -6
- package/src/components/forms/InputWithSeparator.jsx +134 -0
- package/src/components/forms/InputWithSeparator.module.css +24 -0
- package/src/components/forms/index.js +3 -2
- package/src/components/icons/Icons.module.css +28 -16
- package/src/components/icons/SwitchIcon.jsx +81 -0
- package/src/components/icons/index.js +2 -0
- package/src/components/logos/AdvancedLogo.jsx +8 -7
- package/src/stories/forms/Input.stories.jsx +10 -1
- package/src/stories/forms/InputWithSeparator.stories.jsx +55 -0
- package/dist/assets/index.1ec7065b.css +0 -1
- package/dist/assets/index.d4907a34.js +0 -206
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" href="/assets/index.
|
|
7
|
+
<script type="module" crossorigin src="/assets/index.ac430ae0.js"></script>
|
|
8
|
+
<link rel="stylesheet" href="/assets/index.194e494c.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -25,9 +25,9 @@ export const FULL_WIDTH = 'full-width'
|
|
|
25
25
|
export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDERLINE]
|
|
26
26
|
export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
|
|
27
27
|
|
|
28
|
-
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
|
|
28
|
+
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
|
|
29
29
|
export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT]
|
|
30
|
-
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT]
|
|
30
|
+
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE]
|
|
31
31
|
|
|
32
32
|
export const MODAL_POPUP = 'popup'
|
|
33
33
|
export const MODAL_COVER = 'cover'
|
|
@@ -4,20 +4,23 @@ import PropTypes from 'prop-types'
|
|
|
4
4
|
import styles from './Input.module.css'
|
|
5
5
|
import commonStyles from '../Common.module.css'
|
|
6
6
|
import PlatformaticIcon from '../PlatformaticIcon'
|
|
7
|
-
import { MAIN_GREEN } from '../constants'
|
|
7
|
+
import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
|
|
8
8
|
import BorderedBox from '../BorderedBox'
|
|
9
9
|
|
|
10
|
-
function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon, focused }) {
|
|
10
|
+
function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon, focused, placeholderApart }) {
|
|
11
11
|
let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
|
|
12
12
|
const showError = errorMessage.length > 0
|
|
13
13
|
if (showError) className += ' ' + commonStyles['bordered--error-red']
|
|
14
14
|
if (disabled) className += ' ' + commonStyles['apply-opacity-30']
|
|
15
|
+
const inputPlaceholder = placeholderApart ? '' : placeholder
|
|
16
|
+
const inputClassName = `${commonStyles.fullWidth} ${styles.input}`
|
|
15
17
|
|
|
16
18
|
const cmp = (
|
|
17
19
|
<div className={styles.container}>
|
|
18
20
|
<div className={className}>
|
|
19
21
|
{beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} classes={styles.beforeInputIcon} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} />}
|
|
20
|
-
<input type='text' name={name} value={value}
|
|
22
|
+
<input type='text' name={name} value={value} className={inputClassName} onChange={onChange} disabled={disabled} placeholder={inputPlaceholder} />
|
|
23
|
+
{placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
|
|
21
24
|
{afterIcon && <PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} />}
|
|
22
25
|
</div>
|
|
23
26
|
{showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
|
|
@@ -43,7 +46,7 @@ Input.propTypes = {
|
|
|
43
46
|
/**
|
|
44
47
|
* color of border
|
|
45
48
|
*/
|
|
46
|
-
borderColor: PropTypes.oneOf([
|
|
49
|
+
borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
|
|
47
50
|
/**
|
|
48
51
|
* onChange
|
|
49
52
|
*/
|
|
@@ -71,20 +74,25 @@ Input.propTypes = {
|
|
|
71
74
|
/**
|
|
72
75
|
* addFocus
|
|
73
76
|
*/
|
|
74
|
-
focused: PropTypes.bool
|
|
77
|
+
focused: PropTypes.bool,
|
|
78
|
+
/**
|
|
79
|
+
* placeholderApart
|
|
80
|
+
*/
|
|
81
|
+
placeholderApart: PropTypes.bool
|
|
75
82
|
}
|
|
76
83
|
|
|
77
84
|
Input.defaultProps = {
|
|
78
85
|
placeholder: '',
|
|
79
86
|
value: '',
|
|
80
87
|
name: '',
|
|
81
|
-
borderColor:
|
|
88
|
+
borderColor: MAIN_GREEN,
|
|
82
89
|
errorMessage: '',
|
|
83
90
|
onChange: () => {},
|
|
84
91
|
disabled: false,
|
|
85
92
|
beforeIcon: null,
|
|
86
93
|
afterIcon: null,
|
|
87
|
-
focused: false
|
|
94
|
+
focused: false,
|
|
95
|
+
shadowPlaceholder: false
|
|
88
96
|
}
|
|
89
97
|
|
|
90
98
|
export default Input
|
|
@@ -2,13 +2,10 @@
|
|
|
2
2
|
@apply flex flex-col w-full relative;
|
|
3
3
|
}
|
|
4
4
|
.inputContainer {
|
|
5
|
-
@apply flex h-10 border border-solid box-border rounded-md;
|
|
6
|
-
}
|
|
7
|
-
.fullWidth {
|
|
8
|
-
@apply w-full;
|
|
5
|
+
@apply flex h-10 border border-solid box-border rounded-md relative;
|
|
9
6
|
}
|
|
10
7
|
.input {
|
|
11
|
-
@apply
|
|
8
|
+
@apply z-10;
|
|
12
9
|
}
|
|
13
10
|
.beforeInputIcon {
|
|
14
11
|
@apply ml-1 mr-3;
|
|
@@ -25,7 +22,9 @@
|
|
|
25
22
|
.paddingFocused {
|
|
26
23
|
@apply p-4;
|
|
27
24
|
}
|
|
28
|
-
|
|
25
|
+
.placeholderAPart {
|
|
26
|
+
@apply absolute top-[50%] right-0 translate-y-[-50%] left-0 text-main-dark-blue text-opacity-20 ml-2 z-0;
|
|
27
|
+
}
|
|
29
28
|
[type='text']:focus {
|
|
30
29
|
outline: none;
|
|
31
30
|
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import React, { useState, useEffect } from 'react'
|
|
3
|
+
import PropTypes from 'prop-types'
|
|
4
|
+
import inputStyles from './Input.module.css'
|
|
5
|
+
import styles from './InputWithSeparator.module.css'
|
|
6
|
+
import commonStyles from '../Common.module.css'
|
|
7
|
+
import PlatformaticIcon from '../PlatformaticIcon'
|
|
8
|
+
import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, TRANSPARENT } from '../constants'
|
|
9
|
+
import BorderedBox from '../BorderedBox'
|
|
10
|
+
import ButtonFullRounded from '../ButtonFullRounded'
|
|
11
|
+
|
|
12
|
+
function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onChange, disabled, afterIcon, value, separator }) {
|
|
13
|
+
const [chunks, setChunks] = useState([])
|
|
14
|
+
const [inputClassName, setInputClassName] = useState(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
|
|
15
|
+
const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
|
|
16
|
+
|
|
17
|
+
let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.smallPadding
|
|
18
|
+
const showError = errorMessage.length > 0
|
|
19
|
+
if (showError) className += ' ' + commonStyles['bordered--error-red']
|
|
20
|
+
if (disabled) className += ' ' + commonStyles['apply-opacity-30']
|
|
21
|
+
|
|
22
|
+
function handleRemove (chunk) {
|
|
23
|
+
const index = chunks.findIndex(c => c === chunk)
|
|
24
|
+
if (index > -1) {
|
|
25
|
+
chunks.splice(index, 1)
|
|
26
|
+
setChunks(chunks => [...chunks])
|
|
27
|
+
onChange({ value, chunks })
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function handleChange (event) {
|
|
32
|
+
if (!showError && event.target.value.indexOf(separator) > -1) {
|
|
33
|
+
const elements = event.target.value.split(separator)
|
|
34
|
+
if (elements[0] !== '') {
|
|
35
|
+
const tmp = [elements[0]]
|
|
36
|
+
setChunks(prevChunks => [...prevChunks, ...tmp])
|
|
37
|
+
onChange({ value: elements[1], chunks })
|
|
38
|
+
return
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
onChange({ value: event.target.value, chunks })
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (chunks.length > 0) {
|
|
46
|
+
setInputClassName(`${styles.flexNone} ${styles.smallMargin}`)
|
|
47
|
+
} else {
|
|
48
|
+
setInputClassName(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
|
|
49
|
+
}
|
|
50
|
+
}, [chunks.length])
|
|
51
|
+
|
|
52
|
+
function renderChunk (chunk, index) {
|
|
53
|
+
return (
|
|
54
|
+
<BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} opaque={20} classes={chunkClasses} key={index}>
|
|
55
|
+
<div className={styles.chunkContent}>
|
|
56
|
+
<span className={styles.chunkText}>{chunk}</span>
|
|
57
|
+
<ButtonFullRounded
|
|
58
|
+
className=''
|
|
59
|
+
iconName='CircleCloseIcon'
|
|
60
|
+
iconSize={MEDIUM}
|
|
61
|
+
iconColor={MAIN_DARK_BLUE}
|
|
62
|
+
hoverEffect={BACKGROUND_COLOR_OPAQUE}
|
|
63
|
+
onClick={() => handleRemove(chunk)}
|
|
64
|
+
bordered={false}
|
|
65
|
+
alt='Close'
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</BorderedBox>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
return (
|
|
72
|
+
<div className={inputStyles.container}>
|
|
73
|
+
<div className={className}>
|
|
74
|
+
{chunks.map((value, index) => renderChunk(value, index))}
|
|
75
|
+
<input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
|
|
76
|
+
</div>
|
|
77
|
+
{afterIcon && <div className={styles.iconContainer}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={afterIcon.handleClick} /></div>}
|
|
78
|
+
{showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
|
|
79
|
+
</div>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
InputWithSeparator.propTypes = {
|
|
84
|
+
/**
|
|
85
|
+
* placeholder
|
|
86
|
+
*/
|
|
87
|
+
placeholder: PropTypes.string,
|
|
88
|
+
/**
|
|
89
|
+
* name
|
|
90
|
+
*/
|
|
91
|
+
name: PropTypes.string,
|
|
92
|
+
/**
|
|
93
|
+
* value
|
|
94
|
+
*/
|
|
95
|
+
value: PropTypes.string,
|
|
96
|
+
/**
|
|
97
|
+
* separator
|
|
98
|
+
*/
|
|
99
|
+
separator: PropTypes.string,
|
|
100
|
+
/**
|
|
101
|
+
* color of border
|
|
102
|
+
*/
|
|
103
|
+
borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
|
|
104
|
+
/**
|
|
105
|
+
* onChange
|
|
106
|
+
*/
|
|
107
|
+
onChange: PropTypes.func,
|
|
108
|
+
/**
|
|
109
|
+
* Disabled
|
|
110
|
+
*/
|
|
111
|
+
disabled: PropTypes.bool,
|
|
112
|
+
/**
|
|
113
|
+
* afterIcon: PlatformaticIcon props
|
|
114
|
+
*/
|
|
115
|
+
afterIcon: PropTypes.shape({
|
|
116
|
+
iconName: PropTypes.string,
|
|
117
|
+
color: PropTypes.string,
|
|
118
|
+
handleClick: PropTypes.func
|
|
119
|
+
})
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
InputWithSeparator.defaultProps = {
|
|
123
|
+
placeholder: '',
|
|
124
|
+
value: '',
|
|
125
|
+
name: '',
|
|
126
|
+
borderColor: 'main-green',
|
|
127
|
+
errorMessage: '',
|
|
128
|
+
onChange: () => {},
|
|
129
|
+
disabled: false,
|
|
130
|
+
afterIcon: null,
|
|
131
|
+
separator: ''
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
export default InputWithSeparator
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.chunkContent {
|
|
2
|
+
@apply flex gap-x-2 w-full items-center;
|
|
3
|
+
}
|
|
4
|
+
.chunkText {
|
|
5
|
+
@apply text-sm text-main-dark-blue;
|
|
6
|
+
}
|
|
7
|
+
.inputContainer {
|
|
8
|
+
@apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative;
|
|
9
|
+
}
|
|
10
|
+
.smallPadding {
|
|
11
|
+
@apply p-1 !important
|
|
12
|
+
}
|
|
13
|
+
.flexNone {
|
|
14
|
+
@apply flex-none !important;
|
|
15
|
+
}
|
|
16
|
+
.noGrow {
|
|
17
|
+
@apply grow-0
|
|
18
|
+
}
|
|
19
|
+
.smallMargin {
|
|
20
|
+
@apply my-0;
|
|
21
|
+
}
|
|
22
|
+
.iconContainer {
|
|
23
|
+
@apply absolute top-[14px] right-[0.5rem]
|
|
24
|
+
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import Input from './Input'
|
|
2
1
|
import Field from './Field'
|
|
2
|
+
import Input from './Input'
|
|
3
|
+
import InputWithSeparator from './InputWithSeparator'
|
|
3
4
|
import Preview from './Preview'
|
|
4
5
|
import ToggleSwitch from './ToggleSwitch'
|
|
5
6
|
|
|
6
7
|
export default {
|
|
7
|
-
Input,
|
|
8
|
+
Field, Input, InputWithSeparator, Preview, ToggleSwitch
|
|
8
9
|
}
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
.main-green > circle,
|
|
2
|
-
.main-green > ellipse,
|
|
3
|
-
.main-green > rect,
|
|
4
|
-
.main-green > line,
|
|
5
|
-
.main-green > path {
|
|
6
|
-
@apply stroke-main-green;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
1
|
.error-red > circle,
|
|
11
2
|
.error-red > ellipse,
|
|
12
3
|
.error-red > rect,
|
|
@@ -15,13 +6,6 @@
|
|
|
15
6
|
@apply stroke-error-red;
|
|
16
7
|
}
|
|
17
8
|
|
|
18
|
-
.white > circle,
|
|
19
|
-
.white > ellipse,
|
|
20
|
-
.white > rect,
|
|
21
|
-
.white > line,
|
|
22
|
-
.white > path {
|
|
23
|
-
@apply stroke-white;
|
|
24
|
-
}
|
|
25
9
|
.main-dark-blue > circle,
|
|
26
10
|
.main-dark-blue > ellipse,
|
|
27
11
|
.main-dark-blue > rect,
|
|
@@ -29,6 +13,23 @@
|
|
|
29
13
|
.main-dark-blue > path {
|
|
30
14
|
@apply stroke-main-dark-blue;
|
|
31
15
|
}
|
|
16
|
+
|
|
17
|
+
.main-green > circle,
|
|
18
|
+
.main-green > ellipse,
|
|
19
|
+
.main-green > rect,
|
|
20
|
+
.main-green > line,
|
|
21
|
+
.main-green > path {
|
|
22
|
+
@apply stroke-main-green;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.tertiary-blue > circle,
|
|
26
|
+
.tertiary-blue > ellipse,
|
|
27
|
+
.tertiary-blue > rect,
|
|
28
|
+
.tertiary-blue > line,
|
|
29
|
+
.tertiary-blue > path {
|
|
30
|
+
@apply stroke-tertiary-blue;
|
|
31
|
+
}
|
|
32
|
+
|
|
32
33
|
.warning-yellow > circle,
|
|
33
34
|
.warning-yellow > ellipse,
|
|
34
35
|
.warning-yellow > rect,
|
|
@@ -37,6 +38,14 @@
|
|
|
37
38
|
@apply stroke-warning-yellow;
|
|
38
39
|
}
|
|
39
40
|
|
|
41
|
+
.white > circle,
|
|
42
|
+
.white > ellipse,
|
|
43
|
+
.white > rect,
|
|
44
|
+
.white > line,
|
|
45
|
+
.white > path {
|
|
46
|
+
@apply stroke-white;
|
|
47
|
+
}
|
|
48
|
+
|
|
40
49
|
.filled-white {
|
|
41
50
|
@apply fill-white
|
|
42
51
|
}
|
|
@@ -52,6 +61,9 @@
|
|
|
52
61
|
.filled-warning-yellow {
|
|
53
62
|
@apply fill-warning-yellow ;
|
|
54
63
|
}
|
|
64
|
+
.filled-tertiary-blue {
|
|
65
|
+
@apply fill-tertiary-blue;
|
|
66
|
+
}
|
|
55
67
|
|
|
56
68
|
.fill-circle-green > circle {
|
|
57
69
|
@apply fill-white;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES } from '../constants'
|
|
5
|
+
|
|
6
|
+
const SwitchIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case 'small':
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={16}
|
|
15
|
+
height={16}
|
|
16
|
+
viewBox='0 0 16 16'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<path d='M6 5H14M14 5L12 3M14 5L12 7' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
22
|
+
<path d='M10 11L2 11M2 11L4 13M2 11L4 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
|
+
</svg>
|
|
24
|
+
)
|
|
25
|
+
break
|
|
26
|
+
case 'medium':
|
|
27
|
+
icon = (
|
|
28
|
+
<svg
|
|
29
|
+
width={24}
|
|
30
|
+
height={24}
|
|
31
|
+
viewBox='0 0 24 24'
|
|
32
|
+
fill='none'
|
|
33
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
className={className}
|
|
35
|
+
>
|
|
36
|
+
<path d='M9 7.5H21M21 7.5L18 4.5M21 7.5L18 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M15 16.5L3 16.5M3 16.5L6 19.5M3 16.5L6 13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
|
|
39
|
+
</svg>
|
|
40
|
+
)
|
|
41
|
+
break
|
|
42
|
+
case 'large':
|
|
43
|
+
icon = (
|
|
44
|
+
<svg
|
|
45
|
+
width={40}
|
|
46
|
+
height={40}
|
|
47
|
+
viewBox='0 0 40 40'
|
|
48
|
+
fill='none'
|
|
49
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
50
|
+
className={className}
|
|
51
|
+
>
|
|
52
|
+
<path d='M15 12.5H35M35 12.5L30 7.5M35 12.5L30 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M25 27.5L5 27.5M5 27.5L10 32.5M5 27.5L10 22.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
|
|
59
|
+
default:
|
|
60
|
+
break
|
|
61
|
+
}
|
|
62
|
+
return icon
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
SwitchIcon.propTypes = {
|
|
66
|
+
/**
|
|
67
|
+
* color of text, icon and borders
|
|
68
|
+
*/
|
|
69
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
70
|
+
/**
|
|
71
|
+
* Size
|
|
72
|
+
*/
|
|
73
|
+
size: PropTypes.oneOf(SIZES)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
SwitchIcon.defaultProps = {
|
|
77
|
+
color: 'main-dark-blue',
|
|
78
|
+
size: 'medium'
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default SwitchIcon
|
|
@@ -61,6 +61,7 @@ import RestartIcon from './RestartIcon'
|
|
|
61
61
|
import RocketIcon from './RocketIcon'
|
|
62
62
|
import SendIcon from './SendIcon'
|
|
63
63
|
import SlotIcon from './SlotIcon'
|
|
64
|
+
import SwitchIcon from './SwitchIcon'
|
|
64
65
|
import SocialDiscordIcon from './SocialDiscordIcon'
|
|
65
66
|
import SocialGitHubIcon from './SocialGitHubIcon'
|
|
66
67
|
import SocialGitLabIcon from './SocialGitLabIcon'
|
|
@@ -147,6 +148,7 @@ export default {
|
|
|
147
148
|
SendIcon,
|
|
148
149
|
StopIcon,
|
|
149
150
|
SlotIcon,
|
|
151
|
+
SwitchIcon,
|
|
150
152
|
SocialDiscordIcon,
|
|
151
153
|
SocialGitHubIcon,
|
|
152
154
|
SocialGitLabIcon,
|
|
@@ -4,29 +4,30 @@ import { MAIN_DARK_BLUE, WHITE } from '../constants'
|
|
|
4
4
|
|
|
5
5
|
function AdvancedLogo ({ backgroundColor, width, height }) {
|
|
6
6
|
let icon = (
|
|
7
|
-
<svg width={width} height={height} viewBox='0 0
|
|
8
|
-
<path d='M186.81 64.
|
|
7
|
+
<svg width={width} height={height} viewBox='0 0 539 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
8
|
+
<path d='M186.81 64.7676H502.742C522.767 64.7676 539 81.0007 539 101.025V101.025C539 121.05 522.767 137.283 502.742 137.283H186.81L213.978 122.78L222.859 96.8815L207.708 75.1269L186.81 64.7676Z' fill='#00283D' />
|
|
9
9
|
<path d='M64.8326 133.141H191.666V133.1C196.472 132.877 201.167 131.579 205.404 129.302C209.642 127.026 213.314 123.828 216.151 119.946C218.988 116.064 220.917 111.595 221.796 106.87C222.674 102.144 222.481 97.2817 221.229 92.6408C219.977 87.9998 217.699 83.6984 214.563 80.0534C211.427 76.4084 207.512 73.5127 203.107 71.5795C198.701 69.6463 193.918 68.7249 189.109 68.8831C184.3 69.0413 179.588 70.2751 175.32 72.4936C172.686 66.4188 168.699 61.0245 163.663 56.7211C158.626 52.4177 152.674 49.3188 146.258 47.6602M37.6245 47.6602C28.2851 50.0658 20.0115 55.5051 14.1055 63.1222C8.19945 70.7393 4.99629 80.1017 5 89.7365C5.00372 99.3712 8.2141 108.731 14.126 116.344C20.0379 123.956 28.3157 129.389 37.657 131.788' stroke='#00283D' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
10
10
|
<path d='M87.798 74.3008L70.8761 80.2407L78.323 96.0184' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
11
11
|
<path d='M71.2574 80.5203C78.9735 85.0529 87.9728 86.9112 96.8556 85.8061C105.738 84.701 114.006 80.6945 120.374 74.4097C126.742 68.1249 130.851 59.9143 132.064 51.0548C133.278 42.1954 131.526 33.1838 127.082 25.4218C122.637 17.6598 115.75 11.5825 107.49 8.13521C99.231 4.68791 90.0627 4.06387 81.4115 6.36015C72.7603 8.65642 65.1113 13.7443 59.6542 20.8324C54.1971 27.9204 51.2378 36.6113 51.2366 45.5533V106.043' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
12
|
<path opacity={0.2} d='M51.2366 169.992V177.058' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
13
13
|
<path opacity={0.4} d='M51.3015 147.756V158.918' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
14
14
|
<path opacity={0.7} d='M51.2366 117.537V136.2' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
15
|
-
<path d='M234.405 119.738L250.705 83.1671H259.064L275.417 119.738H266.535L253.161 87.4511H256.504L243.078 119.738H234.405ZM242.555 111.902L244.802 105.475H263.61L265.908 111.902H242.555ZM290.45 120.156C287.803 120.156 285.417 119.564 283.292 118.38C281.168 117.161 279.479 115.472 278.225 113.312C277.006 111.153 276.396 108.61 276.396 105.684C276.396 102.724 277.006 100.164 278.225 98.0045C279.479 95.8451 281.168 94.1732 283.292 92.989C285.417 91.8048 287.803 91.2127 290.45 91.2127C292.818 91.2127 294.891 91.7352 296.667 92.7801C298.443 93.8249 299.819 95.4097 300.794 97.5343C301.769 99.6589 302.257 102.376 302.257 105.684C302.257 108.958 301.787 111.675 300.847 113.835C299.906 115.959 298.548 117.544 296.771 118.589C295.03 119.634 292.923 120.156 290.45 120.156ZM291.86 113.469C293.184 113.469 294.386 113.155 295.465 112.528C296.545 111.902 297.398 111.013 298.025 109.864C298.687 108.68 299.018 107.287 299.018 105.684C299.018 104.047 298.687 102.654 298.025 101.505C297.398 100.355 296.545 99.4673 295.465 98.8404C294.386 98.2135 293.184 97.9 291.86 97.9C290.502 97.9 289.283 98.2135 288.203 98.8404C287.124 99.4673 286.253 100.355 285.591 101.505C284.964 102.654 284.651 104.047 284.651 105.684C284.651 107.287 284.964 108.68 285.591 109.864C286.253 111.013 287.124 111.902 288.203 112.528C289.283 113.155 290.502 113.469 291.86 113.469ZM299.227 119.738V113.991L299.384 105.632L298.861 97.3253V80.9728H307.011V119.738H299.227ZM322.182 119.738L310.375 91.6307H318.786L328.608 115.82H324.429L334.616 91.6307H342.453L330.594 119.738H322.182ZM362.101 119.738V114.252L361.579 113.051V103.229C361.579 101.487 361.039 100.129 359.959 99.1539C358.914 98.1786 357.295 97.691 355.1 97.691C353.603 97.691 352.122 97.9348 350.659 98.4224C349.231 98.8752 348.012 99.5022 347.002 100.303L344.077 94.6086C345.609 93.5289 347.455 92.693 349.615 92.1009C351.774 91.5088 353.968 91.2127 356.197 91.2127C360.481 91.2127 363.808 92.2228 366.176 94.2429C368.544 96.263 369.729 99.4151 369.729 103.699V119.738H362.101ZM353.533 120.156C351.339 120.156 349.458 119.79 347.891 119.059C346.323 118.293 345.122 117.265 344.286 115.977C343.45 114.688 343.032 113.242 343.032 111.64C343.032 109.968 343.432 108.506 344.233 107.252C345.069 105.998 346.375 105.023 348.152 104.326C349.928 103.595 352.244 103.229 355.1 103.229H362.571V107.983H355.988C354.073 107.983 352.749 108.297 352.018 108.924C351.321 109.551 350.973 110.334 350.973 111.275C350.973 112.319 351.374 113.155 352.175 113.782C353.01 114.374 354.142 114.67 355.57 114.67C356.929 114.67 358.148 114.357 359.228 113.73C360.307 113.068 361.091 112.11 361.579 110.857L362.832 114.618C362.24 116.429 361.161 117.805 359.593 118.746C358.026 119.686 356.006 120.156 353.533 120.156ZM394.189 91.2127C396.418 91.2127 398.403 91.6655 400.145 92.5711C401.921 93.4418 403.314 94.8002 404.324 96.6461C405.334 98.4573 405.839 100.791 405.839 103.647V119.738H397.689V104.901C397.689 102.637 397.184 100.965 396.174 99.8853C395.199 98.8056 393.806 98.2657 391.995 98.2657C390.706 98.2657 389.539 98.5444 388.494 99.1016C387.484 99.6241 386.683 100.443 386.091 101.557C385.534 102.672 385.255 104.1 385.255 105.841V119.738H377.105V91.6307H384.889V99.4151L383.427 97.0641C384.437 95.1833 385.882 93.7379 387.763 92.7278C389.644 91.7177 391.786 91.2127 394.189 91.2127ZM427.015 120.156C423.985 120.156 421.285 119.547 418.917 118.328C416.548 117.074 414.685 115.35 413.327 113.155C412.003 110.961 411.341 108.471 411.341 105.684C411.341 102.863 412.003 100.373 413.327 98.2135C414.685 96.0192 416.548 94.3126 418.917 93.0935C421.285 91.8397 423.985 91.2127 427.015 91.2127C429.975 91.2127 432.553 91.8397 434.747 93.0935C436.941 94.3126 438.561 96.0714 439.606 98.3702L433.284 101.766C432.553 100.443 431.63 99.4673 430.515 98.8404C429.435 98.2135 428.251 97.9 426.962 97.9C425.569 97.9 424.315 98.2135 423.201 98.8404C422.086 99.4673 421.198 100.355 420.536 101.505C419.909 102.654 419.596 104.047 419.596 105.684C419.596 107.321 419.909 108.715 420.536 109.864C421.198 111.013 422.086 111.902 423.201 112.528C424.315 113.155 425.569 113.469 426.962 113.469C428.251 113.469 429.435 113.173 430.515 112.581C431.63 111.954 432.553 110.961 433.284 109.603L439.606 113.051C438.561 115.315 436.941 117.074 434.747 118.328C432.553 119.547 429.975 120.156 427.015 120.156ZM457.89 120.156C454.686 120.156 451.865 119.529 449.427 118.275C447.023 117.021 445.16 115.315 443.837 113.155C442.513 110.961 441.851 108.471 441.851 105.684C441.851 102.863 442.496 100.373 443.784 98.2135C445.108 96.0192 446.902 94.3126 449.165 93.0935C451.429 91.8397 453.989 91.2127 456.845 91.2127C459.597 91.2127 462.07 91.8048 464.264 92.989C466.493 94.1384 468.252 95.8102 469.541 98.0045C470.829 100.164 471.474 102.759 471.474 105.789C471.474 106.102 471.456 106.468 471.422 106.886C471.387 107.269 471.352 107.635 471.317 107.983H448.486V103.229H467.033L463.898 104.64C463.898 103.177 463.602 101.905 463.01 100.826C462.418 99.746 461.6 98.9101 460.555 98.318C459.51 97.691 458.291 97.3776 456.898 97.3776C455.504 97.3776 454.268 97.691 453.188 98.318C452.143 98.9101 451.325 99.7634 450.733 100.878C450.141 101.958 449.845 103.246 449.845 104.744V105.998C449.845 107.53 450.176 108.889 450.837 110.073C451.534 111.222 452.492 112.11 453.711 112.737C454.965 113.33 456.427 113.626 458.099 113.626C459.597 113.626 460.903 113.399 462.018 112.946C463.167 112.494 464.212 111.814 465.152 110.909L469.489 115.611C468.2 117.074 466.58 118.206 464.63 119.007C462.679 119.773 460.433 120.156 457.89 120.
|
|
15
|
+
<path d='M234.405 119.738L250.705 83.1671H259.064L275.417 119.738H266.535L253.161 87.4511H256.504L243.078 119.738H234.405ZM242.555 111.902L244.802 105.475H263.61L265.908 111.902H242.555ZM290.45 120.156C287.803 120.156 285.417 119.564 283.292 118.38C281.168 117.161 279.479 115.472 278.225 113.312C277.006 111.153 276.396 108.61 276.396 105.684C276.396 102.724 277.006 100.164 278.225 98.0045C279.479 95.8451 281.168 94.1732 283.292 92.989C285.417 91.8048 287.803 91.2127 290.45 91.2127C292.818 91.2127 294.891 91.7352 296.667 92.7801C298.443 93.8249 299.819 95.4097 300.794 97.5343C301.769 99.6589 302.257 102.376 302.257 105.684C302.257 108.958 301.787 111.675 300.847 113.835C299.906 115.959 298.548 117.544 296.771 118.589C295.03 119.634 292.923 120.156 290.45 120.156ZM291.86 113.469C293.184 113.469 294.386 113.155 295.465 112.528C296.545 111.902 297.398 111.013 298.025 109.864C298.687 108.68 299.018 107.287 299.018 105.684C299.018 104.047 298.687 102.654 298.025 101.505C297.398 100.355 296.545 99.4673 295.465 98.8404C294.386 98.2135 293.184 97.9 291.86 97.9C290.502 97.9 289.283 98.2135 288.203 98.8404C287.124 99.4673 286.253 100.355 285.591 101.505C284.964 102.654 284.651 104.047 284.651 105.684C284.651 107.287 284.964 108.68 285.591 109.864C286.253 111.013 287.124 111.902 288.203 112.528C289.283 113.155 290.502 113.469 291.86 113.469ZM299.227 119.738V113.991L299.384 105.632L298.861 97.3253V80.9728H307.011V119.738H299.227ZM322.182 119.738L310.375 91.6307H318.786L328.608 115.82H324.429L334.616 91.6307H342.453L330.594 119.738H322.182ZM362.101 119.738V114.252L361.579 113.051V103.229C361.579 101.487 361.039 100.129 359.959 99.1539C358.914 98.1786 357.295 97.691 355.1 97.691C353.603 97.691 352.122 97.9348 350.659 98.4224C349.231 98.8752 348.012 99.5022 347.002 100.303L344.077 94.6086C345.609 93.5289 347.455 92.693 349.615 92.1009C351.774 91.5088 353.968 91.2127 356.197 91.2127C360.481 91.2127 363.808 92.2228 366.176 94.2429C368.544 96.263 369.729 99.4151 369.729 103.699V119.738H362.101ZM353.533 120.156C351.339 120.156 349.458 119.79 347.891 119.059C346.323 118.293 345.122 117.265 344.286 115.977C343.45 114.688 343.032 113.242 343.032 111.64C343.032 109.968 343.432 108.506 344.233 107.252C345.069 105.998 346.375 105.023 348.152 104.326C349.928 103.595 352.244 103.229 355.1 103.229H362.571V107.983H355.988C354.073 107.983 352.749 108.297 352.018 108.924C351.321 109.551 350.973 110.334 350.973 111.275C350.973 112.319 351.374 113.155 352.175 113.782C353.01 114.374 354.142 114.67 355.57 114.67C356.929 114.67 358.148 114.357 359.228 113.73C360.307 113.068 361.091 112.11 361.579 110.857L362.832 114.618C362.24 116.429 361.161 117.805 359.593 118.746C358.026 119.686 356.006 120.156 353.533 120.156ZM394.189 91.2127C396.418 91.2127 398.403 91.6655 400.145 92.5711C401.921 93.4418 403.314 94.8002 404.324 96.6461C405.334 98.4573 405.839 100.791 405.839 103.647V119.738H397.689V104.901C397.689 102.637 397.184 100.965 396.174 99.8853C395.199 98.8056 393.806 98.2657 391.995 98.2657C390.706 98.2657 389.539 98.5444 388.494 99.1016C387.484 99.6241 386.683 100.443 386.091 101.557C385.534 102.672 385.255 104.1 385.255 105.841V119.738H377.105V91.6307H384.889V99.4151L383.427 97.0641C384.437 95.1833 385.882 93.7379 387.763 92.7278C389.644 91.7177 391.786 91.2127 394.189 91.2127ZM427.015 120.156C423.985 120.156 421.285 119.547 418.917 118.328C416.548 117.074 414.685 115.35 413.327 113.155C412.003 110.961 411.341 108.471 411.341 105.684C411.341 102.863 412.003 100.373 413.327 98.2135C414.685 96.0192 416.548 94.3126 418.917 93.0935C421.285 91.8397 423.985 91.2127 427.015 91.2127C429.975 91.2127 432.553 91.8397 434.747 93.0935C436.941 94.3126 438.561 96.0714 439.606 98.3702L433.284 101.766C432.553 100.443 431.63 99.4673 430.515 98.8404C429.435 98.2135 428.251 97.9 426.962 97.9C425.569 97.9 424.315 98.2135 423.201 98.8404C422.086 99.4673 421.198 100.355 420.536 101.505C419.909 102.654 419.596 104.047 419.596 105.684C419.596 107.321 419.909 108.715 420.536 109.864C421.198 111.013 422.086 111.902 423.201 112.528C424.315 113.155 425.569 113.469 426.962 113.469C428.251 113.469 429.435 113.173 430.515 112.581C431.63 111.954 432.553 110.961 433.284 109.603L439.606 113.051C438.561 115.315 436.941 117.074 434.747 118.328C432.553 119.547 429.975 120.156 427.015 120.156ZM457.89 120.156C454.686 120.156 451.865 119.529 449.427 118.275C447.023 117.021 445.16 115.315 443.837 113.155C442.513 110.961 441.851 108.471 441.851 105.684C441.851 102.863 442.496 100.373 443.784 98.2135C445.108 96.0192 446.902 94.3126 449.165 93.0935C451.429 91.8397 453.989 91.2127 456.845 91.2127C459.597 91.2127 462.07 91.8048 464.264 92.989C466.493 94.1384 468.252 95.8102 469.541 98.0045C470.829 100.164 471.474 102.759 471.474 105.789C471.474 106.102 471.456 106.468 471.422 106.886C471.387 107.269 471.352 107.635 471.317 107.983H448.486V103.229H467.033L463.898 104.64C463.898 103.177 463.602 101.905 463.01 100.826C462.418 99.746 461.6 98.9101 460.555 98.318C459.51 97.691 458.291 97.3776 456.898 97.3776C455.504 97.3776 454.268 97.691 453.188 98.318C452.143 98.9101 451.325 99.7634 450.733 100.878C450.141 101.958 449.845 103.246 449.845 104.744V105.998C449.845 107.53 450.176 108.889 450.837 110.073C451.534 111.222 452.492 112.11 453.711 112.737C454.965 113.33 456.427 113.626 458.099 113.626C459.597 113.626 460.903 113.399 462.018 112.946C463.167 112.494 464.212 111.814 465.152 110.909L469.489 115.611C468.2 117.074 466.58 118.206 464.63 119.007C462.679 119.773 460.433 120.156 457.89 120.156ZM488.968 120.156C486.321 120.156 483.935 119.564 481.811 118.38C479.686 117.161 477.997 115.472 476.743 113.312C475.524 111.153 474.915 108.61 474.915 105.684C474.915 102.724 475.524 100.164 476.743 98.0045C477.997 95.8451 479.686 94.1732 481.811 92.989C483.935 91.8048 486.321 91.2127 488.968 91.2127C491.337 91.2127 493.409 91.7352 495.185 92.7801C496.962 93.8249 498.338 95.4097 499.313 97.5343C500.288 99.6589 500.776 102.376 500.776 105.684C500.776 108.958 500.305 111.675 499.365 113.835C498.425 115.959 497.066 117.544 495.29 118.589C493.548 119.634 491.441 120.156 488.968 120.156ZM490.379 113.469C491.702 113.469 492.904 113.155 493.984 112.528C495.064 111.902 495.917 111.013 496.544 109.864C497.206 108.68 497.536 107.287 497.536 105.684C497.536 104.047 497.206 102.654 496.544 101.505C495.917 100.355 495.064 99.4673 493.984 98.8404C492.904 98.2135 491.702 97.9 490.379 97.9C489.021 97.9 487.802 98.2135 486.722 98.8404C485.642 99.4673 484.771 100.355 484.11 101.505C483.483 102.654 483.169 104.047 483.169 105.684C483.169 107.287 483.483 108.68 484.11 109.864C484.771 111.013 485.642 111.902 486.722 112.528C487.802 113.155 489.021 113.469 490.379 113.469ZM497.745 119.738V113.991L497.902 105.632L497.38 97.3253V80.9728H505.53V119.738H497.745Z' fill='white' />
|
|
16
16
|
</svg>
|
|
17
17
|
)
|
|
18
18
|
|
|
19
19
|
if (backgroundColor === MAIN_DARK_BLUE) {
|
|
20
20
|
icon = (
|
|
21
|
-
<svg width={width} height={height} viewBox='0 0
|
|
22
|
-
<path d='M186.81 64.
|
|
21
|
+
<svg width={width} height={height} viewBox='0 0 539 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
22
|
+
<path d='M186.81 64.7676H502.742C522.767 64.7676 539 81.0007 539 101.025V101.025C539 121.05 522.767 137.283 502.742 137.283H186.81L213.978 122.78L222.859 96.8815L207.708 75.1269L186.81 64.7676Z' fill='white' />
|
|
23
23
|
<path d='M64.8326 133.141H191.666V133.1C196.472 132.877 201.167 131.579 205.404 129.302C209.642 127.026 213.314 123.828 216.151 119.946C218.988 116.064 220.917 111.595 221.796 106.87C222.674 102.144 222.481 97.2817 221.229 92.6408C219.977 87.9998 217.699 83.6984 214.563 80.0534C211.427 76.4084 207.512 73.5127 203.107 71.5795C198.701 69.6463 193.918 68.7249 189.109 68.8831C184.3 69.0413 179.588 70.2751 175.32 72.4936C172.686 66.4188 168.699 61.0245 163.663 56.7211C158.626 52.4177 152.674 49.3188 146.258 47.6602M37.6245 47.6602C28.2851 50.0658 20.0115 55.5051 14.1055 63.1222C8.19945 70.7393 4.99629 80.1017 5 89.7365C5.00372 99.3712 8.2141 108.731 14.126 116.344C20.0379 123.956 28.3157 129.389 37.657 131.788' stroke='white' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
24
24
|
<path d='M87.798 74.3008L70.8761 80.2407L78.323 96.0184' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
25
25
|
<path d='M71.2574 80.5203C78.9735 85.0529 87.9728 86.9112 96.8556 85.8061C105.738 84.701 114.006 80.6945 120.374 74.4097C126.742 68.1249 130.851 59.9143 132.064 51.0548C133.278 42.1954 131.526 33.1838 127.082 25.4218C122.637 17.6598 115.75 11.5825 107.49 8.13521C99.231 4.68791 90.0627 4.06387 81.4115 6.36015C72.7603 8.65642 65.1113 13.7443 59.6542 20.8324C54.1971 27.9204 51.2378 36.6113 51.2366 45.5533V106.043' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
26
26
|
<path opacity={0.2} d='M51.2366 169.992V177.058' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
27
27
|
<path opacity={0.4} d='M51.3015 147.756V158.918' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
28
28
|
<path opacity={0.7} d='M51.2366 117.537V136.2' stroke='#21FA90' strokeWidth={8.3591} strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
-
<path d='M234.405 119.738L250.705 83.1671H259.064L275.417 119.738H266.535L253.161 87.4511H256.504L243.078 119.738H234.405ZM242.555 111.902L244.802 105.475H263.61L265.908 111.902H242.555ZM290.45 120.156C287.803 120.156 285.417 119.564 283.292 118.38C281.168 117.161 279.479 115.472 278.225 113.312C277.006 111.153 276.396 108.61 276.396 105.684C276.396 102.724 277.006 100.164 278.225 98.0045C279.479 95.8451 281.168 94.1732 283.292 92.989C285.417 91.8048 287.803 91.2127 290.45 91.2127C292.818 91.2127 294.891 91.7352 296.667 92.7801C298.443 93.8249 299.819 95.4097 300.794 97.5343C301.769 99.6589 302.257 102.376 302.257 105.684C302.257 108.958 301.787 111.675 300.847 113.835C299.906 115.959 298.548 117.544 296.771 118.589C295.03 119.634 292.923 120.156 290.45 120.156ZM291.86 113.469C293.184 113.469 294.386 113.155 295.465 112.528C296.545 111.902 297.398 111.013 298.025 109.864C298.687 108.68 299.018 107.287 299.018 105.684C299.018 104.047 298.687 102.654 298.025 101.505C297.398 100.355 296.545 99.4673 295.465 98.8404C294.386 98.2135 293.184 97.9 291.86 97.9C290.502 97.9 289.283 98.2135 288.203 98.8404C287.124 99.4673 286.253 100.355 285.591 101.505C284.964 102.654 284.651 104.047 284.651 105.684C284.651 107.287 284.964 108.68 285.591 109.864C286.253 111.013 287.124 111.902 288.203 112.528C289.283 113.155 290.502 113.469 291.86 113.469ZM299.227 119.738V113.991L299.384 105.632L298.861 97.3253V80.9728H307.011V119.738H299.227ZM322.182 119.738L310.375 91.6307H318.786L328.608 115.82H324.429L334.616 91.6307H342.453L330.594 119.738H322.182ZM362.101 119.738V114.252L361.579 113.051V103.229C361.579 101.487 361.039 100.129 359.959 99.1539C358.914 98.1786 357.295 97.691 355.1 97.691C353.603 97.691 352.122 97.9348 350.659 98.4224C349.231 98.8752 348.012 99.5022 347.002 100.303L344.077 94.6086C345.609 93.5289 347.455 92.693 349.615 92.1009C351.774 91.5088 353.968 91.2127 356.197 91.2127C360.481 91.2127 363.808 92.2228 366.176 94.2429C368.544 96.263 369.729 99.4151 369.729 103.699V119.738H362.101ZM353.533 120.156C351.339 120.156 349.458 119.79 347.891 119.059C346.323 118.293 345.122 117.265 344.286 115.977C343.45 114.688 343.032 113.242 343.032 111.64C343.032 109.968 343.432 108.506 344.233 107.252C345.069 105.998 346.375 105.023 348.152 104.326C349.928 103.595 352.244 103.229 355.1 103.229H362.571V107.983H355.988C354.073 107.983 352.749 108.297 352.018 108.924C351.321 109.551 350.973 110.334 350.973 111.275C350.973 112.319 351.374 113.155 352.175 113.782C353.01 114.374 354.142 114.67 355.57 114.67C356.929 114.67 358.148 114.357 359.228 113.73C360.307 113.068 361.091 112.11 361.579 110.857L362.832 114.618C362.24 116.429 361.161 117.805 359.593 118.746C358.026 119.686 356.006 120.156 353.533 120.156ZM394.189 91.2127C396.418 91.2127 398.403 91.6655 400.145 92.5711C401.921 93.4418 403.314 94.8002 404.324 96.6461C405.334 98.4573 405.839 100.791 405.839 103.647V119.738H397.689V104.901C397.689 102.637 397.184 100.965 396.174 99.8853C395.199 98.8056 393.806 98.2657 391.995 98.2657C390.706 98.2657 389.539 98.5444 388.494 99.1016C387.484 99.6241 386.683 100.443 386.091 101.557C385.534 102.672 385.255 104.1 385.255 105.841V119.738H377.105V91.6307H384.889V99.4151L383.427 97.0641C384.437 95.1833 385.882 93.7379 387.763 92.7278C389.644 91.7177 391.786 91.2127 394.189 91.2127ZM427.015 120.156C423.985 120.156 421.285 119.547 418.917 118.328C416.548 117.074 414.685 115.35 413.327 113.155C412.003 110.961 411.341 108.471 411.341 105.684C411.341 102.863 412.003 100.373 413.327 98.2135C414.685 96.0192 416.548 94.3126 418.917 93.0935C421.285 91.8397 423.985 91.2127 427.015 91.2127C429.975 91.2127 432.553 91.8397 434.747 93.0935C436.941 94.3126 438.561 96.0714 439.606 98.3702L433.284 101.766C432.553 100.443 431.63 99.4673 430.515 98.8404C429.435 98.2135 428.251 97.9 426.962 97.9C425.569 97.9 424.315 98.2135 423.201 98.8404C422.086 99.4673 421.198 100.355 420.536 101.505C419.909 102.654 419.596 104.047 419.596 105.684C419.596 107.321 419.909 108.715 420.536 109.864C421.198 111.013 422.086 111.902 423.201 112.528C424.315 113.155 425.569 113.469 426.962 113.469C428.251 113.469 429.435 113.173 430.515 112.581C431.63 111.954 432.553 110.961 433.284 109.603L439.606 113.051C438.561 115.315 436.941 117.074 434.747 118.328C432.553 119.547 429.975 120.156 427.015 120.156ZM457.89 120.156C454.686 120.156 451.865 119.529 449.427 118.275C447.023 117.021 445.16 115.315 443.837 113.155C442.513 110.961 441.851 108.471 441.851 105.684C441.851 102.863 442.496 100.373 443.784 98.2135C445.108 96.0192 446.902 94.3126 449.165 93.0935C451.429 91.8397 453.989 91.2127 456.845 91.2127C459.597 91.2127 462.07 91.8048 464.264 92.989C466.493 94.1384 468.252 95.8102 469.541 98.0045C470.829 100.164 471.474 102.759 471.474 105.789C471.474 106.102 471.456 106.468 471.422 106.886C471.387 107.269 471.352 107.635 471.317 107.983H448.486V103.229H467.033L463.898 104.64C463.898 103.177 463.602 101.905 463.01 100.826C462.418 99.746 461.6 98.9101 460.555 98.318C459.51 97.691 458.291 97.3776 456.898 97.3776C455.504 97.3776 454.268 97.691 453.188 98.318C452.143 98.9101 451.325 99.7634 450.733 100.878C450.141 101.958 449.845 103.246 449.845 104.744V105.998C449.845 107.53 450.176 108.889 450.837 110.073C451.534 111.222 452.492 112.11 453.711 112.737C454.965 113.33 456.427 113.626 458.099 113.626C459.597 113.626 460.903 113.399 462.018 112.946C463.167 112.494 464.212 111.814 465.152 110.909L469.489 115.611C468.2 117.074 466.58 118.206 464.63 119.007C462.679 119.773 460.433 120.156 457.89 120.
|
|
29
|
+
<path d='M234.405 119.738L250.705 83.1671H259.064L275.417 119.738H266.535L253.161 87.4511H256.504L243.078 119.738H234.405ZM242.555 111.902L244.802 105.475H263.61L265.908 111.902H242.555ZM290.45 120.156C287.803 120.156 285.417 119.564 283.292 118.38C281.168 117.161 279.479 115.472 278.225 113.312C277.006 111.153 276.396 108.61 276.396 105.684C276.396 102.724 277.006 100.164 278.225 98.0045C279.479 95.8451 281.168 94.1732 283.292 92.989C285.417 91.8048 287.803 91.2127 290.45 91.2127C292.818 91.2127 294.891 91.7352 296.667 92.7801C298.443 93.8249 299.819 95.4097 300.794 97.5343C301.769 99.6589 302.257 102.376 302.257 105.684C302.257 108.958 301.787 111.675 300.847 113.835C299.906 115.959 298.548 117.544 296.771 118.589C295.03 119.634 292.923 120.156 290.45 120.156ZM291.86 113.469C293.184 113.469 294.386 113.155 295.465 112.528C296.545 111.902 297.398 111.013 298.025 109.864C298.687 108.68 299.018 107.287 299.018 105.684C299.018 104.047 298.687 102.654 298.025 101.505C297.398 100.355 296.545 99.4673 295.465 98.8404C294.386 98.2135 293.184 97.9 291.86 97.9C290.502 97.9 289.283 98.2135 288.203 98.8404C287.124 99.4673 286.253 100.355 285.591 101.505C284.964 102.654 284.651 104.047 284.651 105.684C284.651 107.287 284.964 108.68 285.591 109.864C286.253 111.013 287.124 111.902 288.203 112.528C289.283 113.155 290.502 113.469 291.86 113.469ZM299.227 119.738V113.991L299.384 105.632L298.861 97.3253V80.9728H307.011V119.738H299.227ZM322.182 119.738L310.375 91.6307H318.786L328.608 115.82H324.429L334.616 91.6307H342.453L330.594 119.738H322.182ZM362.101 119.738V114.252L361.579 113.051V103.229C361.579 101.487 361.039 100.129 359.959 99.1539C358.914 98.1786 357.295 97.691 355.1 97.691C353.603 97.691 352.122 97.9348 350.659 98.4224C349.231 98.8752 348.012 99.5022 347.002 100.303L344.077 94.6086C345.609 93.5289 347.455 92.693 349.615 92.1009C351.774 91.5088 353.968 91.2127 356.197 91.2127C360.481 91.2127 363.808 92.2228 366.176 94.2429C368.544 96.263 369.729 99.4151 369.729 103.699V119.738H362.101ZM353.533 120.156C351.339 120.156 349.458 119.79 347.891 119.059C346.323 118.293 345.122 117.265 344.286 115.977C343.45 114.688 343.032 113.242 343.032 111.64C343.032 109.968 343.432 108.506 344.233 107.252C345.069 105.998 346.375 105.023 348.152 104.326C349.928 103.595 352.244 103.229 355.1 103.229H362.571V107.983H355.988C354.073 107.983 352.749 108.297 352.018 108.924C351.321 109.551 350.973 110.334 350.973 111.275C350.973 112.319 351.374 113.155 352.175 113.782C353.01 114.374 354.142 114.67 355.57 114.67C356.929 114.67 358.148 114.357 359.228 113.73C360.307 113.068 361.091 112.11 361.579 110.857L362.832 114.618C362.24 116.429 361.161 117.805 359.593 118.746C358.026 119.686 356.006 120.156 353.533 120.156ZM394.189 91.2127C396.418 91.2127 398.403 91.6655 400.145 92.5711C401.921 93.4418 403.314 94.8002 404.324 96.6461C405.334 98.4573 405.839 100.791 405.839 103.647V119.738H397.689V104.901C397.689 102.637 397.184 100.965 396.174 99.8853C395.199 98.8056 393.806 98.2657 391.995 98.2657C390.706 98.2657 389.539 98.5444 388.494 99.1016C387.484 99.6241 386.683 100.443 386.091 101.557C385.534 102.672 385.255 104.1 385.255 105.841V119.738H377.105V91.6307H384.889V99.4151L383.427 97.0641C384.437 95.1833 385.882 93.7379 387.763 92.7278C389.644 91.7177 391.786 91.2127 394.189 91.2127ZM427.015 120.156C423.985 120.156 421.285 119.547 418.917 118.328C416.548 117.074 414.685 115.35 413.327 113.155C412.003 110.961 411.341 108.471 411.341 105.684C411.341 102.863 412.003 100.373 413.327 98.2135C414.685 96.0192 416.548 94.3126 418.917 93.0935C421.285 91.8397 423.985 91.2127 427.015 91.2127C429.975 91.2127 432.553 91.8397 434.747 93.0935C436.941 94.3126 438.561 96.0714 439.606 98.3702L433.284 101.766C432.553 100.443 431.63 99.4673 430.515 98.8404C429.435 98.2135 428.251 97.9 426.962 97.9C425.569 97.9 424.315 98.2135 423.201 98.8404C422.086 99.4673 421.198 100.355 420.536 101.505C419.909 102.654 419.596 104.047 419.596 105.684C419.596 107.321 419.909 108.715 420.536 109.864C421.198 111.013 422.086 111.902 423.201 112.528C424.315 113.155 425.569 113.469 426.962 113.469C428.251 113.469 429.435 113.173 430.515 112.581C431.63 111.954 432.553 110.961 433.284 109.603L439.606 113.051C438.561 115.315 436.941 117.074 434.747 118.328C432.553 119.547 429.975 120.156 427.015 120.156ZM457.89 120.156C454.686 120.156 451.865 119.529 449.427 118.275C447.023 117.021 445.16 115.315 443.837 113.155C442.513 110.961 441.851 108.471 441.851 105.684C441.851 102.863 442.496 100.373 443.784 98.2135C445.108 96.0192 446.902 94.3126 449.165 93.0935C451.429 91.8397 453.989 91.2127 456.845 91.2127C459.597 91.2127 462.07 91.8048 464.264 92.989C466.493 94.1384 468.252 95.8102 469.541 98.0045C470.829 100.164 471.474 102.759 471.474 105.789C471.474 106.102 471.456 106.468 471.422 106.886C471.387 107.269 471.352 107.635 471.317 107.983H448.486V103.229H467.033L463.898 104.64C463.898 103.177 463.602 101.905 463.01 100.826C462.418 99.746 461.6 98.9101 460.555 98.318C459.51 97.691 458.291 97.3776 456.898 97.3776C455.504 97.3776 454.268 97.691 453.188 98.318C452.143 98.9101 451.325 99.7634 450.733 100.878C450.141 101.958 449.845 103.246 449.845 104.744V105.998C449.845 107.53 450.176 108.889 450.837 110.073C451.534 111.222 452.492 112.11 453.711 112.737C454.965 113.33 456.427 113.626 458.099 113.626C459.597 113.626 460.903 113.399 462.018 112.946C463.167 112.494 464.212 111.814 465.152 110.909L469.489 115.611C468.2 117.074 466.58 118.206 464.63 119.007C462.679 119.773 460.433 120.156 457.89 120.156ZM488.968 120.156C486.321 120.156 483.935 119.564 481.811 118.38C479.686 117.161 477.997 115.472 476.743 113.312C475.524 111.153 474.915 108.61 474.915 105.684C474.915 102.724 475.524 100.164 476.743 98.0045C477.997 95.8451 479.686 94.1732 481.811 92.989C483.935 91.8048 486.321 91.2127 488.968 91.2127C491.337 91.2127 493.409 91.7352 495.185 92.7801C496.962 93.8249 498.338 95.4097 499.313 97.5343C500.288 99.6589 500.776 102.376 500.776 105.684C500.776 108.958 500.305 111.675 499.365 113.835C498.425 115.959 497.066 117.544 495.29 118.589C493.548 119.634 491.441 120.156 488.968 120.156ZM490.379 113.469C491.702 113.469 492.904 113.155 493.984 112.528C495.064 111.902 495.917 111.013 496.544 109.864C497.206 108.68 497.536 107.287 497.536 105.684C497.536 104.047 497.206 102.654 496.544 101.505C495.917 100.355 495.064 99.4673 493.984 98.8404C492.904 98.2135 491.702 97.9 490.379 97.9C489.021 97.9 487.802 98.2135 486.722 98.8404C485.642 99.4673 484.771 100.355 484.11 101.505C483.483 102.654 483.169 104.047 483.169 105.684C483.169 107.287 483.483 108.68 484.11 109.864C484.771 111.013 485.642 111.902 486.722 112.528C487.802 113.155 489.021 113.469 490.379 113.469ZM497.745 119.738V113.991L497.902 105.632L497.38 97.3253V80.9728H505.53V119.738H497.745Z' fill='#00283D' />
|
|
30
|
+
|
|
30
31
|
</svg>
|
|
31
32
|
)
|
|
32
33
|
}
|
|
@@ -51,7 +52,7 @@ AdvancedLogo.propTypes = {
|
|
|
51
52
|
|
|
52
53
|
AdvancedLogo.defaultProps = {
|
|
53
54
|
backgroundColor: WHITE,
|
|
54
|
-
width:
|
|
55
|
+
width: 539,
|
|
55
56
|
height: 182
|
|
56
57
|
}
|
|
57
58
|
|
|
@@ -50,7 +50,7 @@ DefaultInvalid.args = {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
const TemplateValuedAndAlertChange = (args) => {
|
|
53
|
-
const [value, setValue] = useState('
|
|
53
|
+
const [value, setValue] = useState('')
|
|
54
54
|
|
|
55
55
|
function handleChange (event) {
|
|
56
56
|
setValue(event.target.value)
|
|
@@ -96,3 +96,12 @@ Focused.args = {
|
|
|
96
96
|
borderColor: 'main-dark-blue',
|
|
97
97
|
focused: true
|
|
98
98
|
}
|
|
99
|
+
|
|
100
|
+
export const PlaceholderAPart = TemplateValuedAndAlertChange.bind({})
|
|
101
|
+
|
|
102
|
+
PlaceholderAPart.args = {
|
|
103
|
+
name: 'test',
|
|
104
|
+
placeholder: 'Give me some loving',
|
|
105
|
+
borderColor: 'main-dark-blue',
|
|
106
|
+
placeholderApart: true
|
|
107
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import { ERROR_RED } from '../../components/constants'
|
|
4
|
+
import InputWithSeparator from '../../components/forms/InputWithSeparator'
|
|
5
|
+
|
|
6
|
+
const divStyle = {
|
|
7
|
+
width: '50%',
|
|
8
|
+
height: 'auto',
|
|
9
|
+
padding: '20px',
|
|
10
|
+
backgroundColor: 'white'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
title: 'Platformatic/Forms/InputWithSeparator',
|
|
15
|
+
component: InputWithSeparator,
|
|
16
|
+
decorators: [
|
|
17
|
+
(Story) => (
|
|
18
|
+
<div style={divStyle}>
|
|
19
|
+
<Story />
|
|
20
|
+
</div>
|
|
21
|
+
)
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const TemplateDefault = (args) => {
|
|
26
|
+
const [value, setValue] = useState('')
|
|
27
|
+
const [chunks, setChunks] = useState('')
|
|
28
|
+
|
|
29
|
+
function handleChange ({ value, chunks }) {
|
|
30
|
+
setValue(value)
|
|
31
|
+
setChunks(chunks)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<>
|
|
36
|
+
<p>Chunks: {chunks.toString()} </p>
|
|
37
|
+
<p>Value inserted: {value} </p>
|
|
38
|
+
<InputWithSeparator {...args} value={value} onChange={handleChange} />
|
|
39
|
+
</>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export const Default = TemplateDefault.bind({})
|
|
44
|
+
|
|
45
|
+
Default.args = {
|
|
46
|
+
name: 'test',
|
|
47
|
+
placeholder: 'Initial value',
|
|
48
|
+
borderColor: 'main-dark-blue',
|
|
49
|
+
separator: ',',
|
|
50
|
+
afterIcon: {
|
|
51
|
+
iconName: 'AddIcon',
|
|
52
|
+
color: ERROR_RED,
|
|
53
|
+
handleClick: () => alert('I\'m an AddIcon')
|
|
54
|
+
}
|
|
55
|
+
}
|