groundfloor-react-ui 1.0.5 → 1.0.8

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.
Files changed (20) hide show
  1. package/assets/icons/file-icon.svg +1 -0
  2. package/components/Button/PrimaryButton.js +63 -34
  3. package/components/Button/SecondaryButton.js +64 -31
  4. package/components/Form/FormComponent.js +118 -186
  5. package/components/Icon/Icon.js +4 -1
  6. package/components/Inputs/CheckBoxInput.js +153 -80
  7. package/components/Inputs/DateSelect.js +274 -227
  8. package/components/Inputs/DropdownSelect.js +160 -159
  9. package/components/Inputs/DropzoneInput.js +27 -22
  10. package/components/Inputs/NumericInput.js +76 -71
  11. package/components/Inputs/PasswordInput.js +1 -0
  12. package/components/Inputs/RadioInput.js +124 -83
  13. package/components/Inputs/TextArea.js +122 -94
  14. package/components/Inputs/TextInput.js +87 -67
  15. package/components/Inputs/TimeInput.js +87 -72
  16. package/components/Modal/ModalComp.js +2 -1
  17. package/components/constants/defaultStyle.js +184 -184
  18. package/dist/index.es.js +602 -590
  19. package/dist/index.js +620 -608
  20. package/package.json +1 -1
package/components/Inputs/TextArea.js CHANGED
@@ -6,124 +6,153 @@ import defaultStyles from '../constants/defaultStyle';
6
6
  import getDefaultStyles from '../constants/utils';
7
7
  import { Label } from '../Label';
8
8
 
9
-
10
9
  const TextWrapper = styled.div`
11
- //Set the styles from the default styles object
12
- ${({ theme, defaultWrapperStyle }) => {
10
+ //Set the styles from the default styles object
11
+ ${({ theme, defaultWrapperStyle }) => {
13
12
  return getDefaultStyles(theme, defaultWrapperStyle);
14
13
  }}
15
-
16
- border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
17
- '1px solid ' + defaultThemeColor.border};
18
-
19
- .input-icon svg path {
20
- fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
21
- }
22
-
23
- &:focus-within {
24
- border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
25
- outline: none;
26
14
 
27
- .input-icon svg path {
28
- fill: ${({ themeColor }) => themeColor.variant['primary-1']};
29
- }
15
+ border: ${({ isValid, themeColor }) =>
16
+ !isValid
17
+ ? '1px solid ' + themeColor.variant['error']
18
+ : '1px solid ' + defaultThemeColor.border};
19
+
20
+ .input-icon svg path {
21
+ fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
22
+ }
23
+
24
+ &:focus-within {
25
+ border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
26
+ outline: none;
27
+
28
+ .input-icon svg path {
29
+ fill: ${({ themeColor }) => themeColor.variant['primary-1']};
30
30
  }
31
-
32
- // custom styles
33
- ${({ textAreaStyle }) => textAreaStyle}
31
+ }
32
+
33
+ // custom styles
34
+ ${({ textAreaStyle }) => textAreaStyle}
34
35
  `;
35
36
 
36
37
  TextWrapper.defaultProps = {
37
38
  themeColor: defaultThemeColor,
38
- }
39
-
39
+ };
40
40
 
41
41
  const Input = styled.textarea`
42
- //Set the styles from the default styles object
43
- ${({ theme, defaultInputStyle }) => {
42
+ //Set the styles from the default styles object
43
+ ${({ theme, defaultInputStyle }) => {
44
44
  return getDefaultStyles(theme, defaultInputStyle);
45
45
  }}
46
- margin: 0;
47
- overflow: auto;
48
- resize: none
49
- // custom styles
50
- ${({ inputStyle }) => inputStyle}
46
+ margin: 0;
47
+ overflow: auto;
48
+ resize: none // custom styles
49
+ ${({ inputStyle }) => inputStyle};
51
50
  `;
52
51
 
53
52
  const inline = css`
54
- display: flex;
55
- gap: 7px;
56
- align-items: center;
57
- `
53
+ display: flex;
54
+ gap: 7px;
55
+ align-items: center;
56
+ `;
58
57
 
59
58
  const Form = styled.div`
60
- ${({ labelInline }) => labelInline ? inline : null}
61
- ${({ customStylesForm }) => {
59
+ ${({ labelInline }) => (labelInline ? inline : null)}
60
+ ${({ customStylesForm }) => {
62
61
  if (customStylesForm) {
63
- return { ...customStylesForm }
62
+ return { ...customStylesForm };
64
63
  }
65
64
  }}
66
65
  position: relative;
67
- .err-text {
68
- color: ${({ themeColor }) => themeColor.variant['error']};
69
- margin-top: 5px;
70
- font-size: 10px;
71
- }
72
- `
66
+ .err-text {
67
+ color: ${({ themeColor }) => themeColor.variant['error']};
68
+ margin-top: 5px;
69
+ font-size: 10px;
70
+ }
71
+ `;
73
72
 
74
73
  Form.defaultProps = {
75
74
  themeColor: defaultThemeColor,
76
- }
75
+ };
77
76
 
78
-
79
- export const TextArea = React.forwardRef(({ themeColor, customStylesForm, textAreaStyle, labelStyle, inputStyle, errMsg, required, label, labelInline, iconBefore, iconAfter, isValid, rows, cols, ...props }, ref) => {
80
- return (
81
- <Form labelInline={labelInline} customStylesForm={customStylesForm} {...props}>
82
- <div style={{ display: 'flex' }}>
83
- <Label
84
- themeColor={defaultThemeColor}
85
- customStyles={labelStyle}
86
- type={'label-text'}
87
- labelInline={labelInline}
88
- text={label}
89
- errMsg={errMsg}
90
- style={{
91
- 'display': 'flex',
92
- 'paddingBottom': `${!labelInline ? '7px' : ''}`,
93
- }}
94
- {...props} />
95
- {required && <div style={{
96
- marginLeft: '4px',
97
- color: `${themeColor.variant['error']}`
98
- }} >*</div>}
99
- </div>
100
- <TextWrapper
101
- required={required}
102
- themeColor={defaultThemeColor}
103
- textAreaStyle={textAreaStyle}
104
- isValid={isValid}
105
- theme={defaultStyles}
106
- defaultWrapperStyle={'textbox-wrapper'} {...props}>
107
- <div className="input-icon">
108
- {iconBefore}
77
+ export const TextArea = React.forwardRef(
78
+ (
79
+ {
80
+ themeColor,
81
+ customStylesForm,
82
+ textAreaStyle,
83
+ labelStyle,
84
+ inputStyle,
85
+ errMsg,
86
+ required,
87
+ label,
88
+ labelInline,
89
+ iconBefore,
90
+ iconAfter,
91
+ isValid,
92
+ rows,
93
+ cols,
94
+ ...props
95
+ },
96
+ ref
97
+ ) => {
98
+ return (
99
+ <Form
100
+ labelInline={labelInline}
101
+ customStylesForm={customStylesForm}
102
+ {...props}
103
+ >
104
+ <div style={{ display: 'flex' }}>
105
+ <Label
106
+ themeColor={defaultThemeColor}
107
+ customStyles={labelStyle}
108
+ type={'label-text'}
109
+ labelInline={labelInline}
110
+ text={label}
111
+ errMsg={errMsg}
112
+ style={{
113
+ display: 'flex',
114
+ marginBottom: `${!labelInline ? '7px' : ''}`,
115
+ paddingBottom: '0px',
116
+ }}
117
+ {...props}
118
+ />
119
+ {required && (
120
+ <div
121
+ style={{
122
+ marginLeft: '4px',
123
+ color: `${themeColor.variant['error']}`,
124
+ }}
125
+ >
126
+ *
127
+ </div>
128
+ )}
109
129
  </div>
110
- <Input
111
- ref={ref}
112
- inputStyle={inputStyle}
113
- defaultInputStyle={'textarea-wrapper'}
114
- cols={cols}
115
- rows={rows}
116
- {...props} size='1' />
117
- <div className="input-icon">
118
- {iconAfter}
119
- </div>
120
- </TextWrapper>
121
- <div className='err-text'>
122
- {errMsg}
123
- </div>
124
- </Form>
125
- )
126
- })
130
+ <TextWrapper
131
+ required={required}
132
+ themeColor={defaultThemeColor}
133
+ textAreaStyle={textAreaStyle}
134
+ isValid={isValid}
135
+ theme={defaultStyles}
136
+ defaultWrapperStyle={'textbox-wrapper'}
137
+ {...props}
138
+ >
139
+ <div className='input-icon'>{iconBefore}</div>
140
+ <Input
141
+ ref={ref}
142
+ inputStyle={inputStyle}
143
+ defaultInputStyle={'textarea-wrapper'}
144
+ cols={cols}
145
+ rows={rows}
146
+ {...props}
147
+ size='1'
148
+ />
149
+ <div className='input-icon'>{iconAfter}</div>
150
+ </TextWrapper>
151
+ <div className='err-text'>{errMsg}</div>
152
+ </Form>
153
+ );
154
+ }
155
+ );
127
156
 
128
157
  TextArea.propTypes = {
129
158
  /**
@@ -174,7 +203,7 @@ TextArea.propTypes = {
174
203
  * custom style of textbox label
175
204
  */
176
205
  inputStyle: PropTypes.object,
177
- }
206
+ };
178
207
 
179
208
  TextArea.defaultProps = {
180
209
  themeColor: defaultThemeColor,
@@ -191,5 +220,4 @@ TextArea.defaultProps = {
191
220
  inputStyle: {},
192
221
  // rows:10,
193
222
  // cols:100
194
- }
195
-
223
+ };
package/components/Inputs/TextInput.js CHANGED
@@ -6,71 +6,83 @@ import defaultStyles from '../constants/defaultStyle';
6
6
  import getDefaultStyles from '../constants/utils';
7
7
  import { Label } from '../Label';
8
8
 
9
-
10
9
  const TextWrapper = styled.div`
11
- //Set the styles from the default styles object
12
- ${({ theme, defaultWrapperStyle }) => {
10
+ //Set the styles from the default styles object
11
+ ${({ theme, defaultWrapperStyle }) => {
13
12
  return getDefaultStyles(theme, defaultWrapperStyle);
14
13
  }}
15
-
16
- border: ${({ isValid, themeColor }) => !isValid ? '1px solid ' + themeColor.variant['error'] :
17
- '1px solid ' + defaultThemeColor.border};
18
-
19
- .input-icon svg path {
20
- fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
21
- }
22
-
23
- &:focus-within {
24
- border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
25
- outline: none;
26
14
 
27
- .input-icon svg path {
28
- fill: ${({ themeColor }) => themeColor.variant['primary-1']};
29
- }
15
+ border: ${({ isValid, themeColor }) =>
16
+ !isValid
17
+ ? '1px solid ' + themeColor.variant['error']
18
+ : '1px solid ' + defaultThemeColor.border};
19
+
20
+ .input-icon svg path {
21
+ fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
22
+ }
23
+
24
+ &:focus-within {
25
+ border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
26
+ outline: none;
27
+
28
+ .input-icon svg path {
29
+ fill: ${({ themeColor }) => themeColor.variant['primary-1']};
30
30
  }
31
-
32
- // custom styles
33
- ${({ textBoxStyle }) => textBoxStyle}
34
-
31
+ }
32
+
33
+ // custom styles
34
+ ${({ textBoxStyle }) => textBoxStyle}
35
35
  `;
36
36
 
37
37
  const Input = styled.input`
38
- width:inherit;
39
-
40
- //Set the styles from the default styles object
41
- ${({ theme, defaultInputStyle }) => {
38
+ width: inherit;
39
+ //Set the styles from the default styles object
40
+ ${({ theme, defaultInputStyle }) => {
42
41
  return getDefaultStyles(theme, defaultInputStyle);
43
42
  }}
44
-
45
- // custom styles
46
- ${({ inputStyle }) => inputStyle}
47
43
 
48
- .sc-furwcr bxRAoq{
49
- color: ${defaultThemeColor.variant['neutral-3']}
50
- }
44
+ // custom styles
45
+ ${({ inputStyle }) => inputStyle}
51
46
 
47
+ .sc-furwcr bxRAoq {
48
+ color: ${defaultThemeColor.variant['neutral-3']};
49
+ }
52
50
  `;
53
51
 
54
52
  const inline = css`
55
- display: flex;
53
+ display: flex;
56
54
  gap: 7px;
57
- align-items: center;
58
- `
55
+ align-items: center;
56
+ `;
59
57
 
60
58
  const Form = styled.div`
61
- ${({ labelInline }) => labelInline ? inline : null}
62
- .err-text {
63
- color: ${({ themeColor }) => themeColor.variant['error']};
64
- margin-top: 5px;
65
- font-size: 10px;
66
- }
67
- `
59
+ ${({ labelInline }) => (labelInline ? inline : null)}
60
+ .err-text {
61
+ color: ${({ themeColor }) => themeColor.variant['error']};
62
+ margin-top: 5px;
63
+ font-size: 10px;
64
+ }
65
+ `;
68
66
 
69
67
  Form.defaultProps = {
70
68
  themeColor: defaultThemeColor,
71
- }
69
+ };
72
70
 
73
- export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, errMsg, required, label, labelInline, iconBefore, iconAfter, isValid, type, ...props }) => {
71
+ export const TextInput = ({
72
+ themeColor,
73
+ textBoxStyle,
74
+ labelStyle,
75
+ inputStyle,
76
+ errMsg,
77
+ required,
78
+ label,
79
+ labelInline,
80
+ iconBefore,
81
+ iconAfter,
82
+ isValid,
83
+ type,
84
+ ...props
85
+ }) => {
74
86
  return (
75
87
  <Form labelInline={labelInline} {...props}>
76
88
  <div style={{ display: 'flex' }}>
@@ -81,14 +93,22 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
81
93
  text={label}
82
94
  errMsg={errMsg}
83
95
  style={{
84
- 'display': 'flex',
85
- 'marginBottom': `${!labelInline ? '7px' : ''}`,
96
+ display: 'flex',
97
+ marginBottom: `${!labelInline ? '7px' : ''}`,
98
+ paddingBottom: '0px',
86
99
  }}
87
- {...props} />
88
- {required && <div style={{
89
- marginLeft: '4px',
90
- color: `${themeColor.variant['error']}`
91
- }} >*</div>}
100
+ {...props}
101
+ />
102
+ {required && (
103
+ <div
104
+ style={{
105
+ marginLeft: '4px',
106
+ color: `${themeColor.variant['error']}`,
107
+ }}
108
+ >
109
+ *
110
+ </div>
111
+ )}
92
112
  </div>
93
113
  <TextWrapper
94
114
  required={required}
@@ -96,21 +116,22 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
96
116
  textBoxStyle={textBoxStyle}
97
117
  isValid={isValid}
98
118
  theme={defaultStyles}
99
- defaultWrapperStyle={'textbox-wrapper'} {...props}>
100
- <div className="input-icon">
101
- {iconBefore}
102
- </div>
103
- <Input inputStyle={inputStyle} type={type} defaultInputStyle={'input-wrapper'} {...props} />
104
- <div className="input-icon">
105
- {iconAfter}
106
- </div>
119
+ defaultWrapperStyle={'textbox-wrapper'}
120
+ {...props}
121
+ >
122
+ <div className='input-icon'>{iconBefore}</div>
123
+ <Input
124
+ inputStyle={inputStyle}
125
+ type={type}
126
+ defaultInputStyle={'input-wrapper'}
127
+ {...props}
128
+ />
129
+ <div className='input-icon'>{iconAfter}</div>
107
130
  </TextWrapper>
108
- {errMsg.length > 0 && <div className='err-text'>
109
- {errMsg}
110
- </div>}
131
+ {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
111
132
  </Form>
112
- )
113
- }
133
+ );
134
+ };
114
135
 
115
136
  TextInput.propTypes = {
116
137
  /**
@@ -161,8 +182,7 @@ TextInput.propTypes = {
161
182
  * input type i.e:- text, password
162
183
  */
163
184
  type: PropTypes.string,
164
-
165
- }
185
+ };
166
186
 
167
187
  TextInput.defaultProps = {
168
188
  themeColor: defaultThemeColor,
@@ -177,5 +197,5 @@ TextInput.defaultProps = {
177
197
  textBoxStyle: {},
178
198
  labelStyle: {},
179
199
  inputStyle: {},
180
- type: 'text'
181
- }
200
+ type: 'text',
201
+ };