groundfloor-react-ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/assets/icons/eye-hide.svg +1 -1
- package/components/Button/PrimaryButton.js +4 -7
- package/components/Button/SecondaryButton.js +7 -8
- package/components/Footer/{FooterContentLev3.js → FooterContent.js} +5 -2
- package/components/Footer/index.js +1 -1
- package/components/Form/FormComponent.js +4 -1
- package/components/Icon/Icon.js +10 -0
- package/components/Inputs/CheckBoxInput.js +1 -1
- package/components/Inputs/DateSelect.js +1 -2
- package/components/Inputs/DropdownSelect.js +1 -1
- package/components/Inputs/DropzoneInput.js +1 -1
- package/components/Inputs/NumericInput.js +5 -9
- package/components/Inputs/PasswordInput.js +192 -0
- package/components/Inputs/TextArea.js +2 -2
- package/components/Inputs/TextInput.js +4 -2
- package/components/Inputs/TimeInput.js +2 -2
- package/components/Inputs/index.js +1 -0
- package/components/Modal/ModalComp.js +17 -6
- package/components/constants/defaultStyle.js +11 -10
- package/dist/index.es.js +225 -165
- package/dist/index.js +265 -205
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,13 @@ The package can be installed via [npm](https://github.com/npm/cli):
|
|
|
10
10
|
npm install groundfloor-react-ui --save
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
```
|
|
14
|
+
Add this default theme colo and styles if needed.
|
|
15
|
+
|
|
16
|
+
import defaultStyles from 'groundfloor-react-ui/components/constants/defaultStyle';
|
|
17
|
+
import defaultThemeColor from 'groundfloor-react-ui/components/constants/defaultThemeColor';
|
|
18
|
+
```
|
|
19
|
+
|
|
13
20
|
## Pre-requisites
|
|
14
21
|
|
|
15
22
|
The following peer dependencies are required to run in a React Project
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
1
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17.4a5.5,5.5,0,0,1-5.4-5l-3.9-3a11,11,0,0,0-1.4,2.1,1.7,1.7,0,0,0,0,1A12.1,12.1,0,0,0,12,19.2a13.5,13.5,0,0,0,2.9-.4L13,17.3Zm11.8,2.2-4.2-3.2a13,13,0,0,0,3.1-3.9,1.7,1.7,0,0,0,0-1A12.1,12.1,0,0,0,12,4.8,11.8,11.8,0,0,0,6.5,6.2L1.7,2.5a.6.6,0,0,0-.8.1h0l-.8,1a.6.6,0,0,0,.1.8L22.3,21.5a.6.6,0,0,0,.8-.1h0l.8-1A.6.6,0,0,0,23.8,19.6Zm-6.9-5.3-1.5-1.2a3.6,3.6,0,0,0,.2-1.1,3.5,3.5,0,0,0-3.5-3.6h-1a2,2,0,0,1,.3,1.1.6.6,0,0,1-.1.4L8.6,7.8A5,5,0,0,1,12,6.6,5.4,5.4,0,0,1,17.4,12h0a5.9,5.9,0,0,1-.5,2.3Z"/></svg>
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import styled, { useTheme } from 'styled-components';
|
|
4
4
|
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
5
|
-
import { Loader } from '../Loaders';
|
|
5
|
+
// import { Loader } from '../Loaders';
|
|
6
6
|
import getDefaultStyles, { hexToRGB } from "../constants/utils";
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -16,7 +16,7 @@ const sizes = {
|
|
|
16
16
|
},
|
|
17
17
|
md: {
|
|
18
18
|
fontSize: '16px',
|
|
19
|
-
padding: '
|
|
19
|
+
padding: '5.5px 15px'
|
|
20
20
|
},
|
|
21
21
|
lg: {
|
|
22
22
|
fontSize: '18px',
|
|
@@ -24,10 +24,8 @@ const sizes = {
|
|
|
24
24
|
},
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
// const buttonDisabledBg = '#BBC4CF';
|
|
28
27
|
const buttonDisabledBg = ({ theme, variant }) => hexToRGB(theme.variant[variant], 0.6);
|
|
29
28
|
const fontColor = defaultThemeColor.bgColor;
|
|
30
|
-
// console.log(color)
|
|
31
29
|
|
|
32
30
|
const StyledButton = styled.button`
|
|
33
31
|
background: ${({ theme, variant }) => theme.variant[variant]};
|
|
@@ -40,7 +38,7 @@ const StyledButton = styled.button`
|
|
|
40
38
|
align-items: center;
|
|
41
39
|
width: ${({ block }) => block ? '100%' : 'auto'};
|
|
42
40
|
cursor: pointer;
|
|
43
|
-
|
|
41
|
+
line-height: 18px;
|
|
44
42
|
&:disabled {
|
|
45
43
|
color: ${fontColor};
|
|
46
44
|
background: ${buttonDisabledBg};
|
|
@@ -68,7 +66,7 @@ export const PrimaryButton = ({ block, size, style, variant, disabled, isLoading
|
|
|
68
66
|
disabled={disabled}
|
|
69
67
|
{...props}
|
|
70
68
|
>
|
|
71
|
-
{isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>}
|
|
69
|
+
{/* {isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>} */}
|
|
72
70
|
{props.children}
|
|
73
71
|
</StyledButton>
|
|
74
72
|
);
|
|
@@ -122,4 +120,3 @@ PrimaryButton.defaultProps = {
|
|
|
122
120
|
size: 'md',
|
|
123
121
|
onClick: undefined,
|
|
124
122
|
};
|
|
125
|
-
|
|
@@ -15,7 +15,7 @@ const sizes = {
|
|
|
15
15
|
},
|
|
16
16
|
md: {
|
|
17
17
|
fontSize: '16px',
|
|
18
|
-
padding: '
|
|
18
|
+
padding: '5.5px 15px'
|
|
19
19
|
},
|
|
20
20
|
lg: {
|
|
21
21
|
fontSize: '18px',
|
|
@@ -36,7 +36,7 @@ const StyledButton = styled.button`
|
|
|
36
36
|
align-items: center;
|
|
37
37
|
width: ${({ block }) => block ? '100%' : 'auto'};
|
|
38
38
|
cursor: pointer;
|
|
39
|
-
|
|
39
|
+
line-height: 18px;
|
|
40
40
|
&:disabled {
|
|
41
41
|
color: #929EAC;
|
|
42
42
|
border: 1px solid ${buttonDisabledBg};
|
|
@@ -45,11 +45,11 @@ const StyledButton = styled.button`
|
|
|
45
45
|
|
|
46
46
|
//Set the styles from the default styles object
|
|
47
47
|
${({ theme, defaultStyle }) => {
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
return getDefaultStyles(theme, defaultStyle);
|
|
49
|
+
}}
|
|
50
50
|
`;
|
|
51
51
|
|
|
52
|
-
export const SecondaryButton = ({ block, size, style, variant, disabled,type, ...props }) => {
|
|
52
|
+
export const SecondaryButton = ({ block, size, style, variant, disabled, type, ...props }) => {
|
|
53
53
|
const theme = useTheme() || defaultThemeColor;
|
|
54
54
|
|
|
55
55
|
return (
|
|
@@ -96,7 +96,7 @@ SecondaryButton.propTypes = {
|
|
|
96
96
|
/**
|
|
97
97
|
* Type of the btn i.e: button or submit etc.
|
|
98
98
|
*/
|
|
99
|
-
|
|
99
|
+
type: PropTypes.string,
|
|
100
100
|
};
|
|
101
101
|
|
|
102
102
|
StyledButton.defaultProps = {
|
|
@@ -110,5 +110,4 @@ SecondaryButton.defaultProps = {
|
|
|
110
110
|
disabled: false,
|
|
111
111
|
size: 'md',
|
|
112
112
|
onClick: undefined,
|
|
113
|
-
};
|
|
114
|
-
|
|
113
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
+
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
3
4
|
// import { FooterContext } from '../../../routes/Level2'
|
|
4
5
|
|
|
5
6
|
const StyledOutsideContainer = styled.div`
|
|
@@ -10,7 +11,9 @@ const StyledOutsideContainer = styled.div`
|
|
|
10
11
|
right: 0;
|
|
11
12
|
justify-content: space-between;
|
|
12
13
|
align-items: center;
|
|
13
|
-
color:
|
|
14
|
+
color: #929EAC;
|
|
15
|
+
padding:28px 30.5px 28px 30.5px;
|
|
16
|
+
font-family: 'Averta', sans-serif;
|
|
14
17
|
cursor: default;
|
|
15
18
|
${({ footerWidth }) => {
|
|
16
19
|
if (footerWidth < 650) {
|
|
@@ -63,7 +66,7 @@ const StyledSeparator = styled.div`
|
|
|
63
66
|
}
|
|
64
67
|
}}
|
|
65
68
|
`;
|
|
66
|
-
export const
|
|
69
|
+
export const FooterContent = ({ variant, textColor, size, width, footerWidth, ...props }) => {
|
|
67
70
|
// const footerWidth = useContext(FooterContext)
|
|
68
71
|
|
|
69
72
|
return (
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './Footer';
|
|
2
|
-
export * from './
|
|
2
|
+
export * from './FooterContent'
|
|
@@ -32,7 +32,9 @@ export const FormComponent = ({ formData, ...props }) => {
|
|
|
32
32
|
<Label
|
|
33
33
|
customStyles={item.customStyles}
|
|
34
34
|
text={item.text}
|
|
35
|
-
{...props}
|
|
35
|
+
{...props}
|
|
36
|
+
style={{ marginBottom: '7px' }}
|
|
37
|
+
/>
|
|
36
38
|
</MultiColumnDiv>
|
|
37
39
|
<MultiColumnDiv>
|
|
38
40
|
<pre>
|
|
@@ -46,6 +48,7 @@ export const FormComponent = ({ formData, ...props }) => {
|
|
|
46
48
|
const label = (item) => {
|
|
47
49
|
return (
|
|
48
50
|
<Label
|
|
51
|
+
style={{ marginBottom: '7px' }}
|
|
49
52
|
{...item}
|
|
50
53
|
{...props}
|
|
51
54
|
/>
|
package/components/Icon/Icon.js
CHANGED
|
@@ -46,6 +46,8 @@ import view from '../../assets/icons/view.svg'
|
|
|
46
46
|
import user from '../../assets/icons/users.svg'
|
|
47
47
|
import watcher from '../../assets/icons/watcher.svg'
|
|
48
48
|
import fileUpload from '../../assets/icons/file-upload.svg'
|
|
49
|
+
import eyeHide from '../../assets/icons/eye-hide.svg'
|
|
50
|
+
import eyeView from '../../assets/icons/eye-hide-view.svg'
|
|
49
51
|
|
|
50
52
|
|
|
51
53
|
/** icon name should be kebab-case, e.g "plus-outline" */
|
|
@@ -91,6 +93,8 @@ const iconObj = {
|
|
|
91
93
|
'view': view,
|
|
92
94
|
'user-icon': user,
|
|
93
95
|
'file-upload': fileUpload,
|
|
96
|
+
'eye-hide': eyeHide,
|
|
97
|
+
'eye-show': eyeView
|
|
94
98
|
}
|
|
95
99
|
|
|
96
100
|
const StyledSVGIcon = styled(ReactSVG)`
|
|
@@ -125,6 +129,12 @@ const StyledSVGIcon = styled(ReactSVG)`
|
|
|
125
129
|
fill: ${color};
|
|
126
130
|
`}
|
|
127
131
|
}
|
|
132
|
+
outline: none;
|
|
133
|
+
border:none;
|
|
134
|
+
&:focus: {
|
|
135
|
+
outline: none;
|
|
136
|
+
border:none;
|
|
137
|
+
}
|
|
128
138
|
}
|
|
129
139
|
`;
|
|
130
140
|
|
|
@@ -56,7 +56,7 @@ const OptionText = styled.span`
|
|
|
56
56
|
|
|
57
57
|
const WrapperDiv = styled.label`
|
|
58
58
|
width: fit-content;
|
|
59
|
-
margin-bottom: ${({ inline }) => !inline ? '
|
|
59
|
+
margin-bottom: ${({ inline }) => !inline ? '18px !important' : ''};
|
|
60
60
|
cursor: pointer;
|
|
61
61
|
align-items: center;
|
|
62
62
|
display: flex;
|
|
@@ -33,11 +33,10 @@ const Wrapper = styled.div`
|
|
|
33
33
|
.react-datepicker__input-container{
|
|
34
34
|
border: 1px solid ${defaultThemeColor.border};
|
|
35
35
|
border-radius: 4px;
|
|
36
|
-
padding:
|
|
36
|
+
padding: 6px 12px;
|
|
37
37
|
display: flex;
|
|
38
38
|
align-items: center;
|
|
39
39
|
background-color: ${({ theme }) => theme.bgColor};
|
|
40
|
-
|
|
41
40
|
|
|
42
41
|
&:focus-within {
|
|
43
42
|
border: 1px solid ${({ theme }) => theme.variant['primary-1']};
|
|
@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import styled, { css, useTheme } from 'styled-components';
|
|
4
4
|
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
const TextBox = styled.div`
|
|
8
7
|
border: 1px solid ${({ theme }) => theme ? defaultThemeColor.border : theme.variant['primary-1']};
|
|
9
8
|
border-radius: 4px;
|
|
10
|
-
padding: 5px 12px;
|
|
9
|
+
padding: 6.5px 12px;
|
|
11
10
|
display: flex;
|
|
12
11
|
align-items: center;
|
|
13
|
-
|
|
12
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
14
13
|
.input-icon svg path {
|
|
15
14
|
fill: ${({ theme }) => theme.variant['neutral-1']};
|
|
16
15
|
}
|
|
@@ -57,13 +56,12 @@ const requiredAsterisk = css`
|
|
|
57
56
|
const Label = styled.label`
|
|
58
57
|
display: flex;
|
|
59
58
|
margin-right: 10px;
|
|
60
|
-
color: #929EAC;
|
|
61
59
|
align-content: center;
|
|
62
60
|
align-items: center;
|
|
63
61
|
justify-content: center;
|
|
64
62
|
display: block;
|
|
65
|
-
margin-bottom: ${({ labelInline, }) => (labelInline) ? '0' : '
|
|
66
|
-
margin-right: ${({ labelInline }) => labelInline ? '
|
|
63
|
+
margin-bottom: ${({ labelInline, }) => (labelInline) ? '0' : '7px'};
|
|
64
|
+
margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
|
|
67
65
|
color: ${({ theme }) => theme.variant['neutral-2']};
|
|
68
66
|
`;
|
|
69
67
|
|
|
@@ -87,7 +85,6 @@ const Form = styled.div`
|
|
|
87
85
|
Form.defaultProps = {
|
|
88
86
|
theme: defaultThemeColor,
|
|
89
87
|
}
|
|
90
|
-
|
|
91
88
|
export const NumericInput = ({ label, inputValue, inputStyle, iconBefore, iconAfter, onChange, ...props }) => {
|
|
92
89
|
const handleChange = (e) => {
|
|
93
90
|
const re = /^[0-9\b.-]+$/;
|
|
@@ -150,5 +147,4 @@ NumericInput.defaultProps = {
|
|
|
150
147
|
labelInline: false,
|
|
151
148
|
inputStyle: {},
|
|
152
149
|
inputValue: null,
|
|
153
|
-
}
|
|
154
|
-
|
|
150
|
+
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
5
|
+
import defaultStyles from '../constants/defaultStyle';
|
|
6
|
+
import getDefaultStyles from '../constants/utils';
|
|
7
|
+
import { Label } from '../Label';
|
|
8
|
+
import { Icon } from '../Icon';
|
|
9
|
+
import { useState } from 'react';
|
|
10
|
+
import { useEffect } from 'react';
|
|
11
|
+
|
|
12
|
+
const TextWrapper = styled.div`
|
|
13
|
+
//Set the styles from the default styles object
|
|
14
|
+
${({ theme, defaultWrapperStyle }) => {
|
|
15
|
+
return getDefaultStyles(theme, defaultWrapperStyle);
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
border: ${({ isValid, themeColor }) =>
|
|
19
|
+
!isValid
|
|
20
|
+
? '1px solid ' + themeColor.variant['error']
|
|
21
|
+
: '1px solid ' + defaultThemeColor.border};
|
|
22
|
+
|
|
23
|
+
.input-icon svg path {
|
|
24
|
+
fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
|
|
25
|
+
}
|
|
26
|
+
.input-icon {
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:focus-within {
|
|
31
|
+
border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
|
|
32
|
+
outline: none;
|
|
33
|
+
|
|
34
|
+
.input-icon svg path {
|
|
35
|
+
fill: ${({ themeColor }) => themeColor.variant['primary-1']};
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// custom styles
|
|
40
|
+
${({ textBoxStyle }) => textBoxStyle}
|
|
41
|
+
`;
|
|
42
|
+
|
|
43
|
+
const Input = styled.input`
|
|
44
|
+
width: inherit;
|
|
45
|
+
//Set the styles from the default styles object
|
|
46
|
+
${({ theme, defaultInputStyle }) => {
|
|
47
|
+
return getDefaultStyles(theme, defaultInputStyle);
|
|
48
|
+
}}
|
|
49
|
+
|
|
50
|
+
// custom styles
|
|
51
|
+
${({ inputStyle }) => inputStyle}
|
|
52
|
+
|
|
53
|
+
.sc-furwcr bxRAoq {
|
|
54
|
+
color: ${defaultThemeColor.variant['neutral-3']};
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
57
|
+
|
|
58
|
+
const inline = css`
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: 7px;
|
|
61
|
+
align-items: center;
|
|
62
|
+
`;
|
|
63
|
+
|
|
64
|
+
const Form = styled.div`
|
|
65
|
+
${({ labelInline }) => (labelInline ? inline : null)}
|
|
66
|
+
.err-text {
|
|
67
|
+
color: ${({ themeColor }) => themeColor.variant['error']};
|
|
68
|
+
margin-top: 5px;
|
|
69
|
+
font-size: 10px;
|
|
70
|
+
}
|
|
71
|
+
`;
|
|
72
|
+
|
|
73
|
+
Form.defaultProps = {
|
|
74
|
+
themeColor: defaultThemeColor,
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export const PasswordInput = ({
|
|
78
|
+
themeColor,
|
|
79
|
+
textBoxStyle,
|
|
80
|
+
labelStyle,
|
|
81
|
+
inputStyle,
|
|
82
|
+
errMsg,
|
|
83
|
+
required,
|
|
84
|
+
label,
|
|
85
|
+
labelInline,
|
|
86
|
+
isValid,
|
|
87
|
+
...props
|
|
88
|
+
}) => {
|
|
89
|
+
const [showEye, setShowEye] = useState(false);
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<Form labelInline={labelInline} {...props}>
|
|
93
|
+
<div style={{ display: 'flex' }}>
|
|
94
|
+
<Label
|
|
95
|
+
customStyles={labelStyle}
|
|
96
|
+
type={'label-text'}
|
|
97
|
+
labelInline={labelInline}
|
|
98
|
+
text={label}
|
|
99
|
+
errMsg={errMsg}
|
|
100
|
+
style={{
|
|
101
|
+
display: 'flex',
|
|
102
|
+
marginBottom: `${!labelInline ? '7px' : ''}`,
|
|
103
|
+
}}
|
|
104
|
+
{...props}
|
|
105
|
+
/>
|
|
106
|
+
{required && (
|
|
107
|
+
<div
|
|
108
|
+
style={{
|
|
109
|
+
marginLeft: '4px',
|
|
110
|
+
color: `${themeColor.variant['error']}`,
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
*
|
|
114
|
+
</div>
|
|
115
|
+
)}
|
|
116
|
+
</div>
|
|
117
|
+
<TextWrapper
|
|
118
|
+
required={required}
|
|
119
|
+
themeColor={defaultThemeColor}
|
|
120
|
+
textBoxStyle={textBoxStyle}
|
|
121
|
+
isValid={isValid}
|
|
122
|
+
theme={defaultStyles}
|
|
123
|
+
defaultWrapperStyle={'textbox-wrapper'}
|
|
124
|
+
{...props}
|
|
125
|
+
>
|
|
126
|
+
<Input
|
|
127
|
+
inputStyle={inputStyle}
|
|
128
|
+
type={showEye ? 'text' : 'password'}
|
|
129
|
+
defaultInputStyle={'input-wrapper'}
|
|
130
|
+
{...props}
|
|
131
|
+
/>
|
|
132
|
+
<div className='input-icon' onClick={() => setShowEye(!showEye)}>
|
|
133
|
+
{showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
|
|
134
|
+
</div>
|
|
135
|
+
</TextWrapper>
|
|
136
|
+
{errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
|
|
137
|
+
</Form>
|
|
138
|
+
);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
PasswordInput.propTypes = {
|
|
142
|
+
/**
|
|
143
|
+
* Theme props of default in-built css
|
|
144
|
+
*/
|
|
145
|
+
theme: PropTypes.object,
|
|
146
|
+
/**
|
|
147
|
+
* Color props of default theme
|
|
148
|
+
*/
|
|
149
|
+
themeColor: PropTypes.object,
|
|
150
|
+
/**
|
|
151
|
+
* Label of Input
|
|
152
|
+
*/
|
|
153
|
+
label: PropTypes.string,
|
|
154
|
+
/**
|
|
155
|
+
* Is the input required?
|
|
156
|
+
*/
|
|
157
|
+
required: PropTypes.bool,
|
|
158
|
+
/**
|
|
159
|
+
* Should label be inline with textbox?
|
|
160
|
+
*/
|
|
161
|
+
labelInline: PropTypes.bool,
|
|
162
|
+
/**
|
|
163
|
+
* Error Message
|
|
164
|
+
*/
|
|
165
|
+
errMsg: PropTypes.string,
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
* custom style of textbox Wrapper
|
|
169
|
+
*/
|
|
170
|
+
textBoxStyle: PropTypes.object,
|
|
171
|
+
/**
|
|
172
|
+
* custom style of textbox input
|
|
173
|
+
*/
|
|
174
|
+
labelStyle: PropTypes.object,
|
|
175
|
+
/**
|
|
176
|
+
* custom style of textbox label
|
|
177
|
+
*/
|
|
178
|
+
inputStyle: PropTypes.object,
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
PasswordInput.defaultProps = {
|
|
182
|
+
themeColor: defaultThemeColor,
|
|
183
|
+
theme: defaultStyles,
|
|
184
|
+
label: '',
|
|
185
|
+
required: false,
|
|
186
|
+
isValid: true,
|
|
187
|
+
labelInline: false,
|
|
188
|
+
errMsg: '',
|
|
189
|
+
textBoxStyle: {},
|
|
190
|
+
labelStyle: {},
|
|
191
|
+
inputStyle: {},
|
|
192
|
+
};
|
|
@@ -52,7 +52,7 @@ const Input = styled.textarea`
|
|
|
52
52
|
|
|
53
53
|
const inline = css`
|
|
54
54
|
display: flex;
|
|
55
|
-
gap:
|
|
55
|
+
gap: 7px;
|
|
56
56
|
align-items: center;
|
|
57
57
|
`
|
|
58
58
|
|
|
@@ -89,7 +89,7 @@ export const TextArea = React.forwardRef(({ themeColor, customStylesForm, textAr
|
|
|
89
89
|
errMsg={errMsg}
|
|
90
90
|
style={{
|
|
91
91
|
'display': 'flex',
|
|
92
|
-
'paddingBottom': `${!labelInline ? '
|
|
92
|
+
'paddingBottom': `${!labelInline ? '7px' : ''}`,
|
|
93
93
|
}}
|
|
94
94
|
{...props} />
|
|
95
95
|
{required && <div style={{
|
|
@@ -35,6 +35,8 @@ const TextWrapper = styled.div`
|
|
|
35
35
|
`;
|
|
36
36
|
|
|
37
37
|
const Input = styled.input`
|
|
38
|
+
width:inherit;
|
|
39
|
+
|
|
38
40
|
//Set the styles from the default styles object
|
|
39
41
|
${({ theme, defaultInputStyle }) => {
|
|
40
42
|
return getDefaultStyles(theme, defaultInputStyle);
|
|
@@ -51,7 +53,7 @@ const Input = styled.input`
|
|
|
51
53
|
|
|
52
54
|
const inline = css`
|
|
53
55
|
display: flex;
|
|
54
|
-
|
|
56
|
+
gap: 7px;
|
|
55
57
|
align-items: center;
|
|
56
58
|
`
|
|
57
59
|
|
|
@@ -80,7 +82,7 @@ export const TextInput = ({ themeColor, textBoxStyle, labelStyle, inputStyle, er
|
|
|
80
82
|
errMsg={errMsg}
|
|
81
83
|
style={{
|
|
82
84
|
'display': 'flex',
|
|
83
|
-
'marginBottom': `${!labelInline ? '
|
|
85
|
+
'marginBottom': `${!labelInline ? '7px' : ''}`,
|
|
84
86
|
}}
|
|
85
87
|
{...props} />
|
|
86
88
|
{required && <div style={{
|
|
@@ -46,8 +46,8 @@ const requiredAsterisk = css`
|
|
|
46
46
|
|
|
47
47
|
const Label = styled.label`
|
|
48
48
|
display: block;
|
|
49
|
-
margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '
|
|
50
|
-
margin-right: ${({ labelInline }) => labelInline ? '
|
|
49
|
+
margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '7px'};
|
|
50
|
+
margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
|
|
51
51
|
color: ${({ theme }) => theme.variant['neutral-2']};
|
|
52
52
|
${({ required }) => required ? requiredAsterisk : null}
|
|
53
53
|
`;
|
|
@@ -12,14 +12,15 @@ const customStyles = {
|
|
|
12
12
|
zIndex: '999',
|
|
13
13
|
},
|
|
14
14
|
content: {
|
|
15
|
+
borderColor: defaultThemeColor.border,
|
|
15
16
|
top: '50%',
|
|
16
17
|
left: '50%',
|
|
17
18
|
right: 'auto',
|
|
18
19
|
bottom: 'auto',
|
|
19
20
|
marginRight: '-50%',
|
|
20
|
-
padding: '
|
|
21
|
+
padding: '0px',
|
|
21
22
|
transform: 'translate(-50%, -50%)',
|
|
22
|
-
maxHeight: '
|
|
23
|
+
maxHeight: '75vh',
|
|
23
24
|
},
|
|
24
25
|
};
|
|
25
26
|
|
|
@@ -30,7 +31,11 @@ const ModalClose = styled.button`
|
|
|
30
31
|
}}
|
|
31
32
|
// custom styles
|
|
32
33
|
${({ customModalCloseStyle }) => customModalCloseStyle}
|
|
33
|
-
|
|
34
|
+
//Set the styles from the default styles object
|
|
35
|
+
&:focus{
|
|
36
|
+
outline: none;
|
|
37
|
+
border: none;
|
|
38
|
+
}
|
|
34
39
|
`;
|
|
35
40
|
|
|
36
41
|
const ModalHeader = styled.div`
|
|
@@ -66,6 +71,10 @@ const ModalFooter = styled.div`
|
|
|
66
71
|
${({ customModalFooterStyle }) => customModalFooterStyle}
|
|
67
72
|
`;
|
|
68
73
|
|
|
74
|
+
const CommonDiv = styled.div`
|
|
75
|
+
padding: 1rem 3rem 0rem 3rem;
|
|
76
|
+
`;
|
|
77
|
+
|
|
69
78
|
Modal.setAppElement('#root');
|
|
70
79
|
|
|
71
80
|
export const ModalComp = ({
|
|
@@ -102,13 +111,16 @@ export const ModalComp = ({
|
|
|
102
111
|
/>
|
|
103
112
|
</ModalClose>
|
|
104
113
|
|
|
105
|
-
<ModalHeader style={customModalHeaderStyle}>
|
|
114
|
+
<ModalHeader style={customModalHeaderStyle}>
|
|
115
|
+
<CommonDiv>{headerContent}</CommonDiv>
|
|
116
|
+
</ModalHeader>
|
|
106
117
|
<ModalBody
|
|
107
118
|
theme={defaultStyles}
|
|
108
119
|
type={'modalComp-modal-body'}
|
|
109
120
|
style={customModalBodyStyle}
|
|
110
121
|
>
|
|
111
|
-
{bodyContent}
|
|
122
|
+
<CommonDiv> {bodyContent}
|
|
123
|
+
</CommonDiv>
|
|
112
124
|
</ModalBody>
|
|
113
125
|
|
|
114
126
|
<ModalFooter
|
|
@@ -177,4 +189,3 @@ ModalComp.defaultProps = {
|
|
|
177
189
|
customModalBodyStyle: {},
|
|
178
190
|
customModalFooterStyle: {},
|
|
179
191
|
};
|
|
180
|
-
|