groundfloor-react-ui 1.0.1 → 1.0.4
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} +6 -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 +176 -174
- package/components/Inputs/DropzoneInput.js +3 -5
- 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 +20 -8
- package/components/constants/defaultStyle.js +13 -14
- package/dist/index.es.js +248 -183
- package/dist/index.js +288 -223
- 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,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'
|
|
@@ -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']};
|