monica-alexandria 3.2.21 → 3.3.1
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/index.es.js +67 -67
- package/dist/index.js +37 -37
- package/package.json +1 -1
- package/src/export/components/button/Delete_Plain.js +4 -4
- package/src/export/components/button/Focus_.js +4 -4
- package/src/export/components/button/Focus_Plain.js +4 -4
- package/src/export/components/button/Grey_.js +4 -4
- package/src/export/components/button/Grey_Link.js +4 -4
- package/src/export/components/button/Main_.js +4 -4
- package/src/export/components/button/Main_Plain.js +4 -4
- package/src/export/components/button/White_Plain.js +4 -4
- package/src/export/components/card/On_Click_Card.js +13 -13
- package/src/export/components/confirmation/Confirmation_.js +7 -7
- package/src/export/components/form/Builder_.js +2 -2
- package/src/export/components/form/Checkbox_.js +8 -8
- package/src/export/components/form/Dropdown_.js +3 -3
- package/src/export/components/form/Elastic_Search.js +17 -19
- package/src/export/components/form/Input_.js +28 -27
- package/src/export/components/form/Input_Phone.js +5 -6
- package/src/export/components/form/Input_Phone_Register.js +6 -6
- package/src/export/components/form/Radio_.js +4 -4
- package/src/export/components/form/Textarea_.js +15 -15
- package/src/export/components/nav/Nav_Protected.js +1 -1
- package/src/export/components/nav/Nav_Unprotected.js +1 -1
- package/src/export/components/sidebar/Sidebar_Box.js +1 -1
- package/src/export/components/slider/Slider_.js +2 -2
- package/src/export/components/steps/Steps_.js +4 -4
- package/src/export/components/steps/Steps_Actions.js +2 -2
- package/src/export/components/steps/Steps_Header.js +6 -6
- package/src/export/styles/Steps.js +1 -1
- package/src/stories/cards/OnClickCard.stories.jsx +9 -9
- package/src/stories/confirmation/Confirmation.stories.jsx +5 -5
- package/src/stories/form/Checkbox.stories.jsx +8 -8
- package/src/stories/form/Dropdown.stories.jsx +1 -1
- package/src/stories/form/Elastic.stories.jsx +9 -9
- package/src/stories/form/Input.stories.jsx +22 -22
- package/src/stories/form/InputPhone.stories.jsx +6 -6
- package/src/stories/form/Radio.stories.jsx +5 -5
- package/src/stories/form/Textarea.stories.jsx +15 -15
- package/src/stories/slider/Slider.stories.jsx +3 -3
- package/src/stories/steps/Steps.stories.jsx +2 -2
|
@@ -25,8 +25,8 @@ const Main = styled(Button)`
|
|
|
25
25
|
export const Main_ = (props) => {
|
|
26
26
|
return (
|
|
27
27
|
<Main className={props.className} size={props.size} onClick={props.onClick}>
|
|
28
|
-
{props.
|
|
29
|
-
<IconSvg Icon={props.
|
|
28
|
+
{props.iconLeft ?
|
|
29
|
+
<IconSvg Icon={props.iconLeft} />
|
|
30
30
|
:
|
|
31
31
|
null
|
|
32
32
|
}
|
|
@@ -35,8 +35,8 @@ export const Main_ = (props) => {
|
|
|
35
35
|
:
|
|
36
36
|
null
|
|
37
37
|
}
|
|
38
|
-
{props.
|
|
39
|
-
<IconSvg Icon={props.
|
|
38
|
+
{props.iconRight ?
|
|
39
|
+
<IconSvg Icon={props.iconRight} />
|
|
40
40
|
:
|
|
41
41
|
null
|
|
42
42
|
}
|
|
@@ -30,8 +30,8 @@ const MainPlain = styled(Button)`
|
|
|
30
30
|
export const Main_Plain = (props) => {
|
|
31
31
|
return (
|
|
32
32
|
<MainPlain noPadding={props.noPadding} size={props.size} onClick={props.onClick}>
|
|
33
|
-
{props.
|
|
34
|
-
<IconSvg Icon={props.
|
|
33
|
+
{props.iconLeft ?
|
|
34
|
+
<IconSvg Icon={props.iconLeft} />
|
|
35
35
|
:
|
|
36
36
|
null
|
|
37
37
|
}
|
|
@@ -40,8 +40,8 @@ export const Main_Plain = (props) => {
|
|
|
40
40
|
:
|
|
41
41
|
null
|
|
42
42
|
}
|
|
43
|
-
{props.
|
|
44
|
-
<IconSvg Icon={props.
|
|
43
|
+
{props.iconRight ?
|
|
44
|
+
<IconSvg Icon={props.iconRight} />
|
|
45
45
|
:
|
|
46
46
|
null
|
|
47
47
|
}
|
|
@@ -30,8 +30,8 @@ const WhitePlain = styled(Button)`
|
|
|
30
30
|
export const White_Plain = (props) => {
|
|
31
31
|
return (
|
|
32
32
|
<WhitePlain size={props.size} onClick={props.onClick}>
|
|
33
|
-
{props.
|
|
34
|
-
<IconSvg Icon={props.
|
|
33
|
+
{props.iconLeft ?
|
|
34
|
+
<IconSvg Icon={props.iconLeft} />
|
|
35
35
|
:
|
|
36
36
|
null
|
|
37
37
|
}
|
|
@@ -40,8 +40,8 @@ export const White_Plain = (props) => {
|
|
|
40
40
|
:
|
|
41
41
|
null
|
|
42
42
|
}
|
|
43
|
-
{props.
|
|
44
|
-
<IconSvg Icon={props.
|
|
43
|
+
{props.iconRight ?
|
|
44
|
+
<IconSvg Icon={props.iconRight} />
|
|
45
45
|
:
|
|
46
46
|
null
|
|
47
47
|
}
|
|
@@ -84,34 +84,34 @@ const JobCard = styled.div`
|
|
|
84
84
|
export const On_Click_Card = (props) => {
|
|
85
85
|
return (
|
|
86
86
|
<OnClickCard variant_CardText={props.variant_CardText} onClick={props.onClick}>
|
|
87
|
-
{props.
|
|
87
|
+
{props.icon || props.header || props.imgSmall ?
|
|
88
88
|
<header>
|
|
89
|
-
{props.
|
|
89
|
+
{props.icon ?
|
|
90
90
|
<figure>
|
|
91
|
-
<IconSvg Icon={props.
|
|
91
|
+
<IconSvg Icon={props.icon}/>
|
|
92
92
|
</figure>
|
|
93
|
-
:props.
|
|
93
|
+
:props.imgSmall ?
|
|
94
94
|
<OnClickSmallImg>
|
|
95
|
-
<img src={props.
|
|
95
|
+
<img src={props.imgSmall}/>
|
|
96
96
|
</OnClickSmallImg>
|
|
97
97
|
:
|
|
98
|
-
<span>{props.
|
|
98
|
+
<span>{props.header}</span>
|
|
99
99
|
}
|
|
100
100
|
</header>
|
|
101
|
-
:props.
|
|
101
|
+
:props.img ?
|
|
102
102
|
<picture>
|
|
103
|
-
<img src={props.
|
|
103
|
+
<img src={props.img}/>
|
|
104
104
|
</picture>
|
|
105
105
|
:
|
|
106
106
|
null
|
|
107
107
|
}
|
|
108
|
-
{props.
|
|
108
|
+
{props.title || props.subtitle ?
|
|
109
109
|
<footer>
|
|
110
|
-
{props.
|
|
111
|
-
<h2>{props.
|
|
110
|
+
{props.title &&
|
|
111
|
+
<h2>{props.title}</h2>
|
|
112
112
|
}
|
|
113
|
-
{props.
|
|
114
|
-
<h5>{props.
|
|
113
|
+
{props.subtitle &&
|
|
114
|
+
<h5>{props.subtitle}</h5>
|
|
115
115
|
}
|
|
116
116
|
{props.children}
|
|
117
117
|
</footer>
|
|
@@ -49,17 +49,17 @@ export const Confirmation_ = (props) => {
|
|
|
49
49
|
return (
|
|
50
50
|
<Confirmation>
|
|
51
51
|
<ConfirmationContainer>
|
|
52
|
-
<h4>{props.
|
|
52
|
+
<h4>{props.message}</h4>
|
|
53
53
|
<ConfirmationActions>
|
|
54
54
|
<Main_
|
|
55
|
-
onClick = {props.
|
|
56
|
-
|
|
57
|
-
text = {props.
|
|
55
|
+
onClick = {props.onClick_Main}
|
|
56
|
+
iconLeft = {props.icon_Main}
|
|
57
|
+
text = {props.text_Main}
|
|
58
58
|
/>
|
|
59
59
|
<Main_Plain
|
|
60
|
-
onClick = {props.
|
|
61
|
-
|
|
62
|
-
text = {props.
|
|
60
|
+
onClick = {props.onClick_MainPlain}
|
|
61
|
+
iconLeft = {props.icon_MainPlain}
|
|
62
|
+
text = {props.text_MainPlain}
|
|
63
63
|
/>
|
|
64
64
|
</ConfirmationActions>
|
|
65
65
|
</ConfirmationContainer>
|
|
@@ -84,26 +84,26 @@ const Check = styled.div`
|
|
|
84
84
|
|
|
85
85
|
const CheckboxInput = styled.div`
|
|
86
86
|
input{
|
|
87
|
-
opacity: ${p => p.
|
|
88
|
-
cursor: ${p => p.
|
|
87
|
+
opacity: ${p => p.checked === true ? '1' : '0.4'};
|
|
88
|
+
cursor: ${p => p.checked === true ? 'auto' : 'not-allowed !important'};
|
|
89
89
|
}
|
|
90
90
|
`
|
|
91
91
|
|
|
92
92
|
export const Checkbox_ = (props) => {
|
|
93
93
|
return (
|
|
94
94
|
<Checkbox key={props.key}>
|
|
95
|
-
{props.
|
|
96
|
-
<CheckboxInput
|
|
95
|
+
{props.withInput ?
|
|
96
|
+
<CheckboxInput checked = {props.checked}>
|
|
97
97
|
<Input_
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
placeholder = {props.placeholder}
|
|
99
|
+
disableInput = {props.checked ? false : true}
|
|
100
100
|
/>
|
|
101
101
|
</CheckboxInput>
|
|
102
102
|
:
|
|
103
|
-
<label for={props.
|
|
103
|
+
<label for={props.id}><p>{props.text_CheckboxLabel}</p></label>
|
|
104
104
|
}
|
|
105
105
|
<Check className='Check'>
|
|
106
|
-
<input type="checkbox" id={props.
|
|
106
|
+
<input type="checkbox" id={props.id} checked = {props.checked} onClick={props.onClick}/>
|
|
107
107
|
<span className='CheckCustom'></span>
|
|
108
108
|
<IconSvg Icon='Check' class_Icon='CheckIcon'/>
|
|
109
109
|
</Check>
|
|
@@ -41,9 +41,9 @@ export const Dropdown_ = (props) => {
|
|
|
41
41
|
return (
|
|
42
42
|
<Dropdown>
|
|
43
43
|
<IconSvg Icon="Dropdown" class_Icon="Dropdown_IconAdapt"/>
|
|
44
|
-
{props.
|
|
45
|
-
<select className = {props.
|
|
46
|
-
{props.
|
|
44
|
+
{props.items ?
|
|
45
|
+
<select className = {props.className} onChange = {props.onChange} defaultValue = {props.defaultValue}>
|
|
46
|
+
{props.items.map ((option, i) =>
|
|
47
47
|
<option key={i}>{option}</option>
|
|
48
48
|
)}
|
|
49
49
|
</select>
|
|
@@ -63,7 +63,7 @@ export const Elastic_Search = (props) => {
|
|
|
63
63
|
address: 0,
|
|
64
64
|
minMatchCharLength: 1,
|
|
65
65
|
ignoreLocation: false,
|
|
66
|
-
keys: [props.
|
|
66
|
+
keys: [props.suggestionType] /* Μπορουμε να παιξουμε μπαλα και με αλλα attributes εννοειται όπως τα gigs! */,
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
let file = props.json_File;
|
|
@@ -72,7 +72,7 @@ export const Elastic_Search = (props) => {
|
|
|
72
72
|
query: "",
|
|
73
73
|
file,
|
|
74
74
|
notfoundmessage: false,
|
|
75
|
-
defaultValue : props.
|
|
75
|
+
defaultValue : props.defaultValue
|
|
76
76
|
})
|
|
77
77
|
|
|
78
78
|
const [suggestions, setsuggestions] = useState(false)
|
|
@@ -80,7 +80,7 @@ export const Elastic_Search = (props) => {
|
|
|
80
80
|
|
|
81
81
|
const send_clicked_suggestion = (suggestion) => {
|
|
82
82
|
props.onSuggestions(suggestion);
|
|
83
|
-
setCurrentSearch({...currentSearch, query:'', defaultValue:typeof(suggestion) == 'string' ? suggestion : suggestion[props.
|
|
83
|
+
setCurrentSearch({...currentSearch, query:'', defaultValue:typeof(suggestion) == 'string' ? suggestion : suggestion[props.suggestionType]})
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
const send_input_suggestion = () =>{
|
|
@@ -106,7 +106,7 @@ export const Elastic_Search = (props) => {
|
|
|
106
106
|
}
|
|
107
107
|
if((e.key) && e.key==='Enter'){
|
|
108
108
|
e.preventDefault();
|
|
109
|
-
send_clicked_suggestion(typeof(suggestions[highlighted]) == 'string' ? suggestions[highlighted] : suggestions[highlighted][props.
|
|
109
|
+
send_clicked_suggestion(typeof(suggestions[highlighted]) == 'string' ? suggestions[highlighted] : suggestions[highlighted][props.suggestionType])
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
|
|
@@ -132,8 +132,6 @@ export const Elastic_Search = (props) => {
|
|
|
132
132
|
send_input_suggestion();
|
|
133
133
|
},[suggestions])
|
|
134
134
|
|
|
135
|
-
console.log(currentSearch.defaultValue);
|
|
136
|
-
|
|
137
135
|
return (
|
|
138
136
|
<ElasticSearch>
|
|
139
137
|
<ElasticInput
|
|
@@ -141,22 +139,22 @@ export const Elastic_Search = (props) => {
|
|
|
141
139
|
autoComplete="off"
|
|
142
140
|
type="text"
|
|
143
141
|
value = {props.value}
|
|
144
|
-
placeholder={props.
|
|
142
|
+
placeholder={props.placeholder}
|
|
145
143
|
onChange={onChange}
|
|
146
144
|
defaultValue={currentSearch.defaultValue}
|
|
147
145
|
onKeyPress={(e) => detectEnter(e)}
|
|
148
146
|
onKeyDown={(e) => detectEnter(e)}
|
|
149
|
-
|
|
147
|
+
list = {props.list}
|
|
150
148
|
/>
|
|
151
|
-
<ElasticLabel>{props.
|
|
152
|
-
{props.
|
|
149
|
+
<ElasticLabel>{props.placeholder}</ElasticLabel>
|
|
150
|
+
{props.required ?
|
|
153
151
|
<ValidatorRequired className='ValidatorRequired'>
|
|
154
152
|
<IconSvg Icon='Asterisk' />
|
|
155
153
|
</ValidatorRequired>
|
|
156
154
|
:
|
|
157
155
|
null
|
|
158
156
|
}
|
|
159
|
-
{props.
|
|
157
|
+
{props.list ?
|
|
160
158
|
<Main_
|
|
161
159
|
variant_Size = 'small'
|
|
162
160
|
text_Button = {props.text_AddToList}
|
|
@@ -170,25 +168,25 @@ export const Elastic_Search = (props) => {
|
|
|
170
168
|
{currentSearch.query && suggestions ?
|
|
171
169
|
<ElasticSuggestions>
|
|
172
170
|
{suggestions.slice(0,6).map((suggestion,i)=>(
|
|
173
|
-
<li className={i=== highlighted % suggestions.length ? "ElasticSelected": ""} key={i} onClick={() => send_clicked_suggestion(suggestion?.item ? suggestion.item[props.
|
|
174
|
-
<p>{suggestion?.item? suggestion.item[props.
|
|
171
|
+
<li className={i=== highlighted % suggestions.length ? "ElasticSelected": ""} key={i} onClick={() => send_clicked_suggestion(suggestion?.item ? suggestion.item[props.suggestionType]: suggestion[props.suggestionType])}>
|
|
172
|
+
<p>{suggestion?.item? suggestion.item[props.suggestionType]: suggestion[props.suggestionType]}</p>
|
|
175
173
|
</li>
|
|
176
174
|
))}
|
|
177
175
|
</ElasticSuggestions>
|
|
178
176
|
:
|
|
179
177
|
null
|
|
180
178
|
}
|
|
181
|
-
{props.
|
|
179
|
+
{props.list ?
|
|
182
180
|
<ElasticList>
|
|
183
|
-
<h5>{props.
|
|
184
|
-
{props.
|
|
185
|
-
<li>
|
|
186
|
-
<IconSvg Icon={props.
|
|
181
|
+
<h5>{props.listItemTitle}</h5>
|
|
182
|
+
{props.list.map((item, i) =>
|
|
183
|
+
<li key={i}>
|
|
184
|
+
<IconSvg Icon={props.icon_ListItem} />
|
|
187
185
|
<h6>{item}</h6>
|
|
188
186
|
<Delete_Plain
|
|
189
187
|
variant_Size = 'small'
|
|
190
188
|
icon_Left = 'Delete'
|
|
191
|
-
onClick = {props.
|
|
189
|
+
onClick = {props.onClick_ListItemDelete}
|
|
192
190
|
/>
|
|
193
191
|
</li>
|
|
194
192
|
)}
|
|
@@ -9,39 +9,39 @@ export const Input_ = (props) => {
|
|
|
9
9
|
<FormGroup>
|
|
10
10
|
<FormInput
|
|
11
11
|
value = {props.value}
|
|
12
|
-
className={props.
|
|
13
|
-
placeholder={props.
|
|
14
|
-
id={props.
|
|
12
|
+
className={props.className}
|
|
13
|
+
placeholder={props.placeholder}
|
|
14
|
+
id={props.id}
|
|
15
15
|
autoComplete="off"
|
|
16
16
|
type="text"
|
|
17
|
-
onChange={props.
|
|
18
|
-
defaultValue={props.
|
|
19
|
-
onKeyPress={props.
|
|
20
|
-
onKeyDown={props.
|
|
21
|
-
disabled ={props.
|
|
17
|
+
onChange={props.onChange}
|
|
18
|
+
defaultValue={props.defaultValue}
|
|
19
|
+
onKeyPress={props.onKeyPress}
|
|
20
|
+
onKeyDown={props.onKeyDown}
|
|
21
|
+
disabled ={props.disableInput}
|
|
22
22
|
/>
|
|
23
|
-
<FormLabel>{props.
|
|
24
|
-
{props.
|
|
23
|
+
<FormLabel>{props.placeholder}</FormLabel>
|
|
24
|
+
{props.list ?
|
|
25
25
|
<Main_
|
|
26
26
|
size = 'small'
|
|
27
|
-
text = {props.
|
|
28
|
-
|
|
27
|
+
text = {props.add}
|
|
28
|
+
iconLeft = 'Add'
|
|
29
29
|
className = 'FormAddButton'
|
|
30
|
-
onClick = {props.
|
|
30
|
+
onClick = {props.onClick_Add}
|
|
31
31
|
/>
|
|
32
32
|
:
|
|
33
33
|
null
|
|
34
34
|
}
|
|
35
|
-
{props.
|
|
35
|
+
{props.required ?
|
|
36
36
|
<ValidatorRequired className='ValidatorRequired'>
|
|
37
37
|
<IconSvg Icon='Asterisk' />
|
|
38
38
|
</ValidatorRequired>
|
|
39
39
|
:
|
|
40
40
|
null
|
|
41
41
|
}
|
|
42
|
-
{props.
|
|
42
|
+
{props.errors ?
|
|
43
43
|
<Validators className='ValidatorErrors'>
|
|
44
|
-
{props.
|
|
44
|
+
{props.errors.map((error) =>
|
|
45
45
|
<ValidatorError>
|
|
46
46
|
<IconSvg Icon='Error'/>
|
|
47
47
|
<h6>{error}</h6>
|
|
@@ -51,33 +51,33 @@ export const Input_ = (props) => {
|
|
|
51
51
|
:
|
|
52
52
|
null
|
|
53
53
|
}
|
|
54
|
-
{props.
|
|
54
|
+
{props.tips && props.helpers ?
|
|
55
55
|
<Validators className='ValidatorHelpers'>
|
|
56
|
-
{props.
|
|
56
|
+
{props.helpers.map((helper) =>
|
|
57
57
|
<ValidatorWarning>
|
|
58
58
|
<IconSvg Icon = 'Warning' />
|
|
59
59
|
<h6>{helper}</h6>
|
|
60
60
|
</ValidatorWarning>
|
|
61
61
|
)}
|
|
62
|
-
{props.
|
|
62
|
+
{props.tips.map((tip) =>
|
|
63
63
|
<ValidatorTip>
|
|
64
64
|
<IconSvg Icon = 'Tip' />
|
|
65
65
|
<h6>{tip}</h6>
|
|
66
66
|
</ValidatorTip>
|
|
67
67
|
)}
|
|
68
68
|
</Validators>
|
|
69
|
-
:props.
|
|
69
|
+
:props.tips ?
|
|
70
70
|
<Validators className='ValidatorHelpers'>
|
|
71
|
-
{props.
|
|
71
|
+
{props.tips.map((tip) =>
|
|
72
72
|
<ValidatorTip>
|
|
73
73
|
<IconSvg Icon = 'Tip' />
|
|
74
74
|
<h6>{tip}</h6>
|
|
75
75
|
</ValidatorTip>
|
|
76
76
|
)}
|
|
77
77
|
</Validators>
|
|
78
|
-
:props.
|
|
78
|
+
:props.helpers ?
|
|
79
79
|
<Validators className='ValidatorHelpers'>
|
|
80
|
-
{props.
|
|
80
|
+
{props.helpers.map((helper) =>
|
|
81
81
|
<ValidatorWarning>
|
|
82
82
|
<IconSvg Icon = 'Warning' />
|
|
83
83
|
<h6>{helper}</h6>
|
|
@@ -87,15 +87,16 @@ export const Input_ = (props) => {
|
|
|
87
87
|
:
|
|
88
88
|
null
|
|
89
89
|
}
|
|
90
|
-
{props.
|
|
90
|
+
{props.list ?
|
|
91
91
|
<FormList>
|
|
92
|
-
{props.
|
|
92
|
+
{props.list.map((item) =>
|
|
93
93
|
<li>
|
|
94
|
-
<IconSvg Icon={props.
|
|
94
|
+
<IconSvg Icon={props.icon_ListItem} />
|
|
95
95
|
<h6>{item}</h6>
|
|
96
96
|
<Delete_Plain
|
|
97
|
+
onClick = {props.onClick_ListItemDelete}
|
|
97
98
|
size = 'small'
|
|
98
|
-
|
|
99
|
+
iconLeft = 'Delete'
|
|
99
100
|
/>
|
|
100
101
|
</li>
|
|
101
102
|
)}
|
|
@@ -36,15 +36,14 @@ export const Input_Phone = (props) => {
|
|
|
36
36
|
</select>
|
|
37
37
|
</Dropdown_>
|
|
38
38
|
<Dropdown_
|
|
39
|
-
|
|
39
|
+
items = {props.array_PhoneDropdown}
|
|
40
40
|
/>
|
|
41
41
|
</InputPhoneDrops>
|
|
42
42
|
<Input_
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
icon_List = {props.icon_PhoneList}
|
|
43
|
+
placeholder = {props.text_PhonePlaceholder}
|
|
44
|
+
required = {props.required}
|
|
45
|
+
list = {props.array_PhoneList}
|
|
46
|
+
icon_ListItem = {props.icon_PhoneList}
|
|
48
47
|
/>
|
|
49
48
|
</InputPhone>
|
|
50
49
|
)
|
|
@@ -39,12 +39,12 @@ export const Input_Phone_Register = (props) => {
|
|
|
39
39
|
</Dropdown_>
|
|
40
40
|
<Input_
|
|
41
41
|
class_Input={props.class_Input}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
placeholder={props.placeholder}
|
|
43
|
+
id={props.id}
|
|
44
|
+
onChange={props.onChange}
|
|
45
|
+
defaultValue={props.defaultValue}
|
|
46
|
+
onKeyPress={props.onKeyPress}
|
|
47
|
+
onKeyDown={props.onKeyDown}
|
|
48
48
|
/>
|
|
49
49
|
</InputPhoneRegister>
|
|
50
50
|
)
|
|
@@ -79,15 +79,15 @@ const RadioCircle = styled.div`
|
|
|
79
79
|
export const Radio_ = (props) => {
|
|
80
80
|
return (
|
|
81
81
|
<Radio key={props.key}>
|
|
82
|
-
{props.
|
|
82
|
+
{props.withInput ?
|
|
83
83
|
<Input_
|
|
84
|
-
|
|
84
|
+
placeholder = {props.placeholder}
|
|
85
85
|
/>
|
|
86
86
|
:
|
|
87
|
-
<label for={props.
|
|
87
|
+
<label for={props.id}><p>{props.text}</p></label>
|
|
88
88
|
}
|
|
89
89
|
<RadioCircle className='RadioCircle'>
|
|
90
|
-
<input name={props.
|
|
90
|
+
<input name={props.name} type="radio" id={props.id} checked = {props.checked}/>
|
|
91
91
|
<span className='RadioCustom'></span>
|
|
92
92
|
<IconSvg Icon='Sun' class_Icon='RadioIcon'/>
|
|
93
93
|
</RadioCircle>
|
|
@@ -44,26 +44,26 @@ export const Textarea_ = (props) => {
|
|
|
44
44
|
|
|
45
45
|
return (
|
|
46
46
|
<TextAreaGroup>
|
|
47
|
-
<Textarea placeholder={props.
|
|
48
|
-
{props.
|
|
47
|
+
<Textarea placeholder={props.placeholder} rows={props.rows ? props.rows : '5'} onChange={props.onChange_Textarea ? props.onChange_Textarea : val => counter(val)} >
|
|
48
|
+
{props.defaultValue}
|
|
49
49
|
</Textarea>
|
|
50
|
-
{props.
|
|
50
|
+
{props.limit ?
|
|
51
51
|
<TextAreaCounter
|
|
52
|
-
capped = {(count > props.
|
|
53
|
-
> <span>{count}</span> / {props.
|
|
52
|
+
capped = {(count > props.limit) ? true : false}
|
|
53
|
+
> <span>{count}</span> / {props.limit}</TextAreaCounter>
|
|
54
54
|
:
|
|
55
55
|
null
|
|
56
56
|
}
|
|
57
|
-
{props.
|
|
57
|
+
{props.required ?
|
|
58
58
|
<ValidatorRequired className='ValidatorRequired'>
|
|
59
59
|
<IconSvg Icon='Asterisk' />
|
|
60
60
|
</ValidatorRequired>
|
|
61
61
|
:
|
|
62
62
|
null
|
|
63
63
|
}
|
|
64
|
-
{props.
|
|
64
|
+
{props.errors ?
|
|
65
65
|
<Validators className='ValidatorErrors'>
|
|
66
|
-
{props.
|
|
66
|
+
{props.errors.map((error) =>
|
|
67
67
|
<ValidatorError>
|
|
68
68
|
<IconSvg Icon='Error'/>
|
|
69
69
|
<h6>{error}</h6>
|
|
@@ -73,33 +73,33 @@ export const Textarea_ = (props) => {
|
|
|
73
73
|
:
|
|
74
74
|
null
|
|
75
75
|
}
|
|
76
|
-
{props.
|
|
76
|
+
{props.tips && props.helpers ?
|
|
77
77
|
<Validators className='ValidatorHelpers'>
|
|
78
|
-
{props.
|
|
78
|
+
{props.helpers.map((helper) =>
|
|
79
79
|
<ValidatorWarning>
|
|
80
80
|
<IconSvg Icon = 'Warning' />
|
|
81
81
|
<h6>{helper}</h6>
|
|
82
82
|
</ValidatorWarning>
|
|
83
83
|
)}
|
|
84
|
-
{props.
|
|
84
|
+
{props.tips.map((tip) =>
|
|
85
85
|
<ValidatorTip>
|
|
86
86
|
<IconSvg Icon = 'Tip' />
|
|
87
87
|
<h6>{tip}</h6>
|
|
88
88
|
</ValidatorTip>
|
|
89
89
|
)}
|
|
90
90
|
</Validators>
|
|
91
|
-
:props.
|
|
91
|
+
:props.tips ?
|
|
92
92
|
<Validators className='ValidatorHelpers'>
|
|
93
|
-
{props.
|
|
93
|
+
{props.tips.map((tip) =>
|
|
94
94
|
<ValidatorTip>
|
|
95
95
|
<IconSvg Icon = 'Tip' />
|
|
96
96
|
<h6>{tip}</h6>
|
|
97
97
|
</ValidatorTip>
|
|
98
98
|
)}
|
|
99
99
|
</Validators>
|
|
100
|
-
:props.
|
|
100
|
+
:props.helpers ?
|
|
101
101
|
<Validators className='ValidatorHelpers'>
|
|
102
|
-
{props.
|
|
102
|
+
{props.helpers.map((helper) =>
|
|
103
103
|
<ValidatorWarning>
|
|
104
104
|
<IconSvg Icon = 'Warning' />
|
|
105
105
|
<h6>{helper}</h6>
|
|
@@ -71,7 +71,7 @@ const SidebarBox = styled.li`
|
|
|
71
71
|
export const Sidebar_Box = (props) => {
|
|
72
72
|
return (
|
|
73
73
|
<SidebarBox onClick={props.onClick}>
|
|
74
|
-
<h5 className={props.
|
|
74
|
+
<h5 className={props.className + ' ' + 'SidebarButtonTitle'}>{props.text}</h5>
|
|
75
75
|
<picture>
|
|
76
76
|
{props.icon ?
|
|
77
77
|
<IconSvg Icon={props.icon}/>
|
|
@@ -50,9 +50,9 @@ export const Slider_ = (props) => {
|
|
|
50
50
|
<h3>{props.title}</h3>
|
|
51
51
|
<Main_
|
|
52
52
|
text = {props.done}
|
|
53
|
-
|
|
53
|
+
iconRight = "Check"
|
|
54
54
|
size = 'normal'
|
|
55
|
-
onClick = {props.
|
|
55
|
+
onClick = {props.onClick}
|
|
56
56
|
/>
|
|
57
57
|
</SliderTitle>
|
|
58
58
|
<SliderContainer>
|
|
@@ -46,13 +46,13 @@ export const Steps_ = (props) => {
|
|
|
46
46
|
return (
|
|
47
47
|
<Steps>
|
|
48
48
|
<Steps_Header
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
steps = {props.steps}
|
|
50
|
+
currentStep = {props.currentStep}
|
|
51
51
|
/>
|
|
52
52
|
<StepsContainer>
|
|
53
|
-
{(props.
|
|
53
|
+
{(props.steps).map((step, i) =>
|
|
54
54
|
<CSSTransition
|
|
55
|
-
in={props.
|
|
55
|
+
in={props.currentStep === i}
|
|
56
56
|
timeout={500}
|
|
57
57
|
unmountOnExit
|
|
58
58
|
classNames="Steps"
|
|
@@ -13,12 +13,12 @@ export const Steps_Actions = (props) => {
|
|
|
13
13
|
return (
|
|
14
14
|
<StepsActions>
|
|
15
15
|
<Grey_
|
|
16
|
-
|
|
16
|
+
iconLeft = {props.icon_Grey}
|
|
17
17
|
text = {props.text_Grey}
|
|
18
18
|
onClick = {props.onClick_Grey}
|
|
19
19
|
/>
|
|
20
20
|
<Main_
|
|
21
|
-
|
|
21
|
+
iconRight = {props.icon_Main}
|
|
22
22
|
text = {props.text_Main}
|
|
23
23
|
onClick = {props.onClick_Main}
|
|
24
24
|
/>
|