groundfloor-react-ui 1.0.0 → 1.0.3
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 +9 -2
- package/assets/icons/eye-hide.svg +1 -1
- package/assets/icons/file-upload.svg +3 -0
- package/components/Accordion/Accordion.js +2 -2
- package/components/Button/PrimaryButton.js +4 -7
- package/components/Button/SecondaryButton.js +7 -8
- package/components/Footer/{FooterContentLev3.js → FooterContent.js} +6 -2
- package/components/Footer/index.js +1 -1
- package/components/Form/FormComponent.js +5 -2
- package/components/Form/HeaderComponent.js +1 -6
- package/components/Icon/Icon.js +16 -6
- package/components/Inputs/CheckBoxInput.js +1 -1
- package/components/Inputs/DateSelect.js +3 -4
- package/components/Inputs/DropdownSelect.js +292 -289
- package/components/Inputs/DropzoneInput.js +225 -137
- package/components/Inputs/NumericInput.js +6 -11
- package/components/Inputs/PasswordInput.js +192 -0
- package/components/Inputs/Signature.js +142 -109
- package/components/Inputs/TextArea.js +3 -4
- package/components/Inputs/TextInput.js +6 -7
- package/components/Inputs/TimeInput.js +5 -6
- package/components/Inputs/index.js +1 -0
- package/components/Modal/ModalComp.js +80 -46
- package/components/Modal/index.js +0 -1
- package/components/constants/defaultStyle.js +28 -33
- package/components/constants/defaultThemeColor.js +2 -1
- package/dist/index.es.js +538 -493
- package/dist/index.js +388 -343
- package/package.json +1 -1
- package/components/Inputs/CheckBoxEditableInput.js +0 -352
- package/components/Inputs/CheckBoxInputMS.js +0 -160
- package/components/Inputs/TextInputClicable.js +0 -198
- package/components/Inputs/TextInputClicableMS.js +0 -255
- package/components/Modal/Modal.js +0 -116
package/README.md
CHANGED
|
@@ -7,7 +7,14 @@ The official component library for GroundFloor application
|
|
|
7
7
|
The package can be installed via [npm](https://github.com/npm/cli):
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
npm install
|
|
10
|
+
npm install groundfloor-react-ui --save
|
|
11
|
+
```
|
|
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';
|
|
11
18
|
```
|
|
12
19
|
|
|
13
20
|
## Pre-requisites
|
|
@@ -17,4 +24,4 @@ The following peer dependencies are required to run in a React Project
|
|
|
17
24
|
- React v16.8 or greater
|
|
18
25
|
- styled-components v5 or greater
|
|
19
26
|
|
|
20
|
-
---
|
|
27
|
+
---
|
|
@@ -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>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.926 4.72609L8.14392 7.26414C7.84042 7.54002 7.38517 7.65037 6.97038 7.54921C6.54548 7.44806 6.22175 7.1446 6.11047 6.76757C5.98907 6.38134 6.11047 5.97673 6.42408 5.69165L11.2801 1.27765C11.3914 1.1765 11.533 1.09374 11.6847 1.04776C11.9781 0.937409 12.312 0.937409 12.6054 1.04776C12.7571 1.10293 12.8886 1.1765 13.01 1.27765L17.866 5.69165C18.0987 5.90316 18.2201 6.17903 18.2201 6.4733C18.2201 6.76757 18.0886 7.05264 17.866 7.25495C17.6334 7.47565 17.3197 7.586 16.996 7.586C16.6723 7.586 16.3587 7.46645 16.1361 7.25495L13.354 4.72609V15.3105C13.354 15.9174 12.8077 16.414 12.14 16.414C11.4723 16.414 10.926 15.9174 10.926 15.3105V4.72609ZM21.852 15.3105C21.852 14.7036 22.3983 14.207 23.066 14.207C23.7337 14.207 24.28 14.7036 24.28 15.3105V19.7245C24.28 21.5545 22.6512 23.035 20.638 23.035H3.642C1.62878 23.035 0 21.5545 0 19.7245V15.3105C0 14.7036 0.5463 14.207 1.214 14.207C1.8817 14.207 2.428 14.7036 2.428 15.3105V19.7245C2.428 20.3314 2.9743 20.828 3.642 20.828H20.638C21.3057 20.828 21.852 20.3314 21.852 19.7245V15.3105Z" fill="#2E56F4"/>
|
|
3
|
+
</svg>
|
|
@@ -42,7 +42,7 @@ export const Accordion = ({
|
|
|
42
42
|
style={
|
|
43
43
|
toggleIconAnimation &&
|
|
44
44
|
contentIsOpen ? { transform: 'rotate(180deg)', transition: 'transform ease 95ms', background: 'transparent' } :
|
|
45
|
-
{ transform: 'rotate(0deg)', background: 'transparent' }
|
|
45
|
+
{ transform: 'rotate(0deg)', transition: 'transform ease 95ms', background: 'transparent' }
|
|
46
46
|
}
|
|
47
47
|
>
|
|
48
48
|
{icon}
|
|
@@ -58,7 +58,7 @@ export const Accordion = ({
|
|
|
58
58
|
// contentIsOpen={contentIsOpen}
|
|
59
59
|
{...props}
|
|
60
60
|
style={
|
|
61
|
-
contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none' }
|
|
61
|
+
contentIsOpen ? { height: contentRef.current.scrollHeight + 'px', } : { height: '0px', borderBottom: 'none', }
|
|
62
62
|
}
|
|
63
63
|
content={content}
|
|
64
64
|
/>}
|
|
@@ -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,8 +11,11 @@ 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;
|
|
18
|
+
width:inherit;
|
|
15
19
|
${({ footerWidth }) => {
|
|
16
20
|
if (footerWidth < 650) {
|
|
17
21
|
return css`
|
|
@@ -63,7 +67,7 @@ const StyledSeparator = styled.div`
|
|
|
63
67
|
}
|
|
64
68
|
}}
|
|
65
69
|
`;
|
|
66
|
-
export const
|
|
70
|
+
export const FooterContent = ({ variant, textColor, size, width, footerWidth, ...props }) => {
|
|
67
71
|
// const footerWidth = useContext(FooterContext)
|
|
68
72
|
|
|
69
73
|
return (
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './Footer';
|
|
2
|
-
export * from './
|
|
2
|
+
export * from './FooterContent'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { Fragment } from 'react'
|
|
2
|
-
import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv
|
|
2
|
+
import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv } from './StyledComponent';
|
|
3
3
|
import defaultThemeColor from '../constants/defaultThemeColor'
|
|
4
4
|
import { Header } from '../Header';
|
|
5
5
|
import { Label } from '../Label';
|
|
@@ -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
|
/>
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import { Label } from '../..';
|
|
3
|
-
import { SubmitButtonContainer } from './StyledComponent';
|
|
1
|
+
import React from 'react'
|
|
4
2
|
import defaultThemeColor from '../constants/defaultThemeColor'
|
|
5
3
|
import userIcon from "../../assets/icons/users.svg";
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
5
|
export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
|
|
11
6
|
|
|
12
7
|
const titleStyle = {
|
package/components/Icon/Icon.js
CHANGED
|
@@ -45,6 +45,9 @@ import zoomInWhite from '../../assets/icons/zoom-in-white.svg'
|
|
|
45
45
|
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
|
+
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'
|
|
48
51
|
|
|
49
52
|
|
|
50
53
|
/** icon name should be kebab-case, e.g "plus-outline" */
|
|
@@ -72,14 +75,14 @@ const iconObj = {
|
|
|
72
75
|
'star': star,
|
|
73
76
|
'cloud-icon': cloudIcon,
|
|
74
77
|
'check-icon': checkIcon,
|
|
75
|
-
'arrow-rotate':arrowRotate,
|
|
78
|
+
'arrow-rotate': arrowRotate,
|
|
76
79
|
'magnifier-icon': magnifier,
|
|
77
80
|
'connection': connection,
|
|
78
81
|
'door-internal-active': doorInternalActive,
|
|
79
82
|
'ellipses-horizontal': ellipsesHorizontal,
|
|
80
83
|
'ellipses': ellipses,
|
|
81
84
|
'file-attach-white': fileAttachWhite,
|
|
82
|
-
'functional-equation':equation,
|
|
85
|
+
'functional-equation': equation,
|
|
83
86
|
"menu-ellipse-two": menuEllipseTwo,
|
|
84
87
|
'menu-ellipse': menuEllipse,
|
|
85
88
|
'pause-all': pauseAll,
|
|
@@ -88,9 +91,10 @@ const iconObj = {
|
|
|
88
91
|
'zoom-in-white': zoomInWhite,
|
|
89
92
|
'watcher': watcher,
|
|
90
93
|
'view': view,
|
|
91
|
-
'user-icon':user,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
+
'user-icon': user,
|
|
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
|
|
|
@@ -158,4 +168,4 @@ Icon.propTypes = {
|
|
|
158
168
|
Icon.defaultProps = {
|
|
159
169
|
size: 16,
|
|
160
170
|
color: defaultThemeColor.primary['primary-1'],
|
|
161
|
-
}
|
|
171
|
+
}
|
|
@@ -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;
|
|
@@ -7,7 +7,6 @@ import defaultThemeColor from '../constants/defaultThemeColor';
|
|
|
7
7
|
|
|
8
8
|
import { Icon } from "../Icon";
|
|
9
9
|
|
|
10
|
-
const border = `#D4D7E3`;
|
|
11
10
|
|
|
12
11
|
const Wrapper = styled.div`
|
|
13
12
|
|
|
@@ -32,12 +31,12 @@ const Wrapper = styled.div`
|
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
.react-datepicker__input-container{
|
|
35
|
-
border: 1px solid ${border};
|
|
34
|
+
border: 1px solid ${defaultThemeColor.border};
|
|
36
35
|
border-radius: 4px;
|
|
37
|
-
padding:
|
|
36
|
+
padding: 6px 12px;
|
|
38
37
|
display: flex;
|
|
39
38
|
align-items: center;
|
|
40
|
-
|
|
39
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
41
40
|
|
|
42
41
|
&:focus-within {
|
|
43
42
|
border: 1px solid ${({ theme }) => theme.variant['primary-1']};
|