groundfloor-react-ui 1.0.20 → 1.0.21

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 (18) hide show
  1. package/components/Accordion/Accordion.js +79 -35
  2. package/components/Accordion/AccordionSB.js +50 -54
  3. package/components/Accordion/AccordionSBfooter.js +51 -55
  4. package/components/ArrowBar/ArrowBar.js +6 -23
  5. package/components/Avatar/Avatar.js +49 -45
  6. package/components/Avatar/AvatarSB.js +121 -92
  7. package/components/Avatar/AvatarSBfooter.js +113 -92
  8. package/components/Banner/Banner.js +40 -35
  9. package/components/Breadcrumb/Breadcrumb.js +178 -163
  10. package/components/Cards/CardRef.js +41 -34
  11. package/components/Drawer/Drawer.js +46 -55
  12. package/components/Images/Image.js +16 -21
  13. package/components/Sidebar/Navbar.js +196 -170
  14. package/components/Typography/Typography.js +9 -10
  15. package/components/constants/defaultStyle.js +10 -3
  16. package/dist/index.es.js +414 -381
  17. package/dist/index.js +387 -354
  18. package/package.json +1 -1
package/components/Avatar/Avatar.js CHANGED
@@ -1,23 +1,24 @@
1
- import React, { useState } from "react";
2
1
  import PropTypes from 'prop-types';
3
- import styled from 'styled-components';
2
+ import React, { useState } from "react";
3
+ import styled, { useTheme } from 'styled-components';
4
4
  import defaultStyles from '../constants/defaultStyle';
5
- import { Image } from '../Images'
5
+ import defaultThemeColor from "../constants/defaultThemeColor";
6
+ import { Image } from '../Images';
6
7
 
7
8
  /**
8
9
  * Primary UI component for user interaction
9
10
  */
10
11
  const StyledContainer = styled.span`
11
- ${({ theme, type, customStyles }) => {
12
- if (theme) {
12
+ ${({ inBuiltCss, type, customStyles }) => {
13
+ if (inBuiltCss) {
13
14
  let tempObj = {};
14
- if (theme[type]) {
15
- for (const property in theme['common']) {
16
- tempObj[property] = theme['common'][property]
15
+ if (inBuiltCss[type]) {
16
+ for (const property in inBuiltCss['common']) {
17
+ tempObj[property] = inBuiltCss['common'][property]
17
18
  }
18
- for (const property in theme[type]) {
19
- tempObj[property] = theme[type][property]
20
- delete theme.common[property]
19
+ for (const property in inBuiltCss[type]) {
20
+ tempObj[property] = inBuiltCss[type][property]
21
+ delete inBuiltCss.common[property]
21
22
  }
22
23
  }
23
24
  return { ...tempObj, ...customStyles };
@@ -26,20 +27,23 @@ ${({ theme, type, customStyles }) => {
26
27
  `;
27
28
 
28
29
  const StyledCircle = styled.div`
29
- ${({ theme, type, size, customStyles }) => {
30
- if (theme) {
30
+
31
+ background-color:${({ theme }) => theme.primary['primary-1']};
32
+ color: ${({ theme }) => theme.bgColor};
33
+ ${({ inBuiltCss, type, size, customStyles }) => {
34
+ if (inBuiltCss) {
31
35
  let tempObj = {};
32
- if (theme[type]) {
33
- for (const property in theme['common']) {
34
- tempObj[property] = theme['common'][property]
36
+ if (inBuiltCss[type]) {
37
+ for (const property in inBuiltCss['common']) {
38
+ tempObj[property] = inBuiltCss['common'][property]
35
39
  }
36
- for (const property in theme[type]) {
37
- tempObj[property] = theme[type][property]
38
- delete theme.common[property]
40
+ for (const property in inBuiltCss[type]) {
41
+ tempObj[property] = inBuiltCss[type][property]
42
+ delete inBuiltCss.common[property]
39
43
  }
40
- for (const property in theme[`${type}${size}`]) {
41
- tempObj[property] = theme[`${type}${size}`][property]
42
- delete theme.common[property]
44
+ for (const property in inBuiltCss[`${type}${size}`]) {
45
+ tempObj[property] = inBuiltCss[`${type}${size}`][property]
46
+ delete inBuiltCss.common[property]
43
47
  }
44
48
  }
45
49
  return { ...tempObj, ...customStyles };
@@ -48,20 +52,23 @@ const StyledCircle = styled.div`
48
52
  `;
49
53
 
50
54
  const StyledName = styled.span`
51
- ${({ theme, type, size, customStyles }) => {
52
- if (theme) {
55
+
56
+ color:${({ theme }) => theme.textColor};
57
+
58
+ ${({ inBuiltCss, type, size, customStyles }) => {
59
+ if (inBuiltCss) {
53
60
  let tempObj = {};
54
- if (theme[type]) {
55
- for (const property in theme['common']) {
56
- tempObj[property] = theme['common'][property]
61
+ if (inBuiltCss[type]) {
62
+ for (const property in inBuiltCss['common']) {
63
+ tempObj[property] = inBuiltCss['common'][property]
57
64
  }
58
- for (const property in theme[type]) {
59
- delete theme.common[property]
60
- tempObj[property] = theme[type][property]
65
+ for (const property in inBuiltCss[type]) {
66
+ delete inBuiltCss.common[property]
67
+ tempObj[property] = inBuiltCss[type][property]
61
68
  }
62
- for (const property in theme[`${type}${size}`]) {
63
- tempObj[property] = theme[`${type}${size}`][property]
64
- delete theme.common[property]
69
+ for (const property in inBuiltCss[`${type}${size}`]) {
70
+ tempObj[property] = inBuiltCss[`${type}${size}`][property]
71
+ delete inBuiltCss.common[property]
65
72
  }
66
73
  }
67
74
  return { ...tempObj, ...customStyles };
@@ -70,7 +77,6 @@ ${({ theme, type, size, customStyles }) => {
70
77
  `;
71
78
 
72
79
  export const Avatar = ({
73
- theme,
74
80
  customStylesContainer,
75
81
  customStylesImage,
76
82
  customStylesCircle,
@@ -87,12 +93,14 @@ export const Avatar = ({
87
93
  const handleImageStatus = (imageStatus) => {
88
94
  setAvatarStatus(imageStatus);
89
95
  }
96
+ const activeTheme = useTheme() || defaultThemeColor
97
+
98
+
90
99
 
91
100
  return (
92
- <StyledContainer border={border} theme={theme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
101
+ <StyledContainer inBuiltCss={defaultStyles} border={border} theme={activeTheme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
93
102
  {user?.url && <Image
94
103
  {...props}
95
- theme={theme}
96
104
  customStyles={customStylesImage}
97
105
  type={'imageAvatar'}
98
106
  size={size}
@@ -103,7 +111,8 @@ export const Avatar = ({
103
111
  />}
104
112
 
105
113
  <StyledCircle {...props}
106
- theme={theme}
114
+ theme={activeTheme}
115
+ inBuiltCss={defaultStyles}
107
116
  type={'avatarCircle'}
108
117
  customStyles={customStylesCircle} size={size}
109
118
  style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
@@ -113,7 +122,7 @@ export const Avatar = ({
113
122
  : user?.userName && user?.userName.split(" ").length === 1 && user?.userName.split(" ")[0].charAt(0).toUpperCase()
114
123
  }
115
124
  </StyledCircle>
116
- {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} size={size}>{user.userName} </StyledName>}
125
+ {toggleName && <StyledName inBuiltCss={defaultStyles} {...props} theme={activeTheme} type={'avatarName'} customStyles={customStylesName} size={size}>{user.userName} </StyledName>}
117
126
  </StyledContainer>
118
127
  );
119
128
  };
@@ -147,14 +156,10 @@ Avatar.propTypes = {
147
156
  * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
148
157
  */
149
158
  user: PropTypes.object,
150
- /**
151
- * Theme object
152
- */
153
- theme: PropTypes.object,
159
+
154
160
  };
155
161
 
156
162
  Avatar.defaultProps = {
157
- theme: defaultStyles,
158
163
  block: false,
159
164
  size: 'MD',
160
165
  toggleName: false,
@@ -163,5 +168,4 @@ Avatar.defaultProps = {
163
168
  customStylesImage: null,
164
169
  customStylesCircle: null,
165
170
  customStylesName: null,
166
- };
167
-
171
+ };
package/components/Avatar/AvatarSB.js CHANGED
@@ -1,73 +1,70 @@
1
- import React, { useState } from "react";
2
1
  import PropTypes from 'prop-types';
3
- import styled, { css } from 'styled-components';
2
+ import React, { useState } from 'react';
3
+ import styled, { css, useTheme } from 'styled-components';
4
4
  import defaultStyles from '../constants/defaultStyle';
5
- import { Image } from '../Images'
5
+ import defaultThemeColor from '../constants/defaultThemeColor';
6
+ import { Image } from '../Images';
6
7
 
7
8
  /**
8
9
  * Primary UI component for user interaction
9
10
  */
10
11
  const StyledContainer = styled.span`
11
- ${({ theme, type, customStyles }) => {
12
- if (theme) {
12
+ ${({ inBuiltCss, type, customStyles }) => {
13
+ if (inBuiltCss) {
13
14
  let tempObj = {};
14
- if (theme[type]) {
15
- for (const property in theme['common']) {
16
- tempObj[property] = theme['common'][property]
15
+ if (inBuiltCss[type]) {
16
+ for (const property in inBuiltCss['common']) {
17
+ tempObj[property] = inBuiltCss['common'][property];
17
18
  }
18
- for (const property in theme[type]) {
19
- tempObj[property] = theme[type][property]
20
- delete theme.common[property]
19
+ for (const property in inBuiltCss[type]) {
20
+ tempObj[property] = inBuiltCss[type][property];
21
+ delete inBuiltCss.common[property];
21
22
  }
22
23
  }
23
24
  return { ...tempObj, ...customStyles };
24
25
  }
25
26
  }}
26
- width: auto;
27
+ width: auto;
27
28
  `;
28
29
 
29
30
  const StyledCircle = styled.div`
30
- ${({ theme, type, size, customStyles }) => {
31
- if (theme) {
31
+ background-color: ${({ theme }) => theme.primary['primary-1']};
32
+ color: ${({ theme }) => theme.bgColor};
33
+ ${({ inBuiltCss, type, size, customStyles }) => {
34
+ if (inBuiltCss) {
32
35
  let tempObj = {};
33
- if (theme[type]) {
34
- for (const property in theme['common']) {
35
- tempObj[property] = theme['common'][property]
36
+ if (inBuiltCss[type]) {
37
+ for (const property in inBuiltCss['common']) {
38
+ tempObj[property] = inBuiltCss['common'][property];
36
39
  }
37
- for (const property in theme[type]) {
38
- tempObj[property] = theme[type][property]
39
- delete theme.common[property]
40
+ for (const property in inBuiltCss[type]) {
41
+ tempObj[property] = inBuiltCss[type][property];
42
+ delete inBuiltCss.common[property];
40
43
  }
41
- for (const property in theme[`${type}${size}`]) {
42
- tempObj[property] = theme[`${type}${size}`][property]
43
- delete theme.common[property]
44
+ for (const property in inBuiltCss[`${type}${size}`]) {
45
+ tempObj[property] = inBuiltCss[`${type}${size}`][property];
46
+ delete inBuiltCss.common[property];
44
47
  }
45
48
  }
46
49
  return { ...tempObj, ...customStyles };
47
50
  }
48
51
  }}
49
- ${({ isSelected }) => {
50
-
52
+ ${({ isSelected, selectedStyle, notSelectedStyle }) => {
51
53
  if (isSelected) {
52
54
  return css`
53
- border: 2px solid rgba(255, 255, 255, 0.3);
54
- background-color: #1D36AD;
55
- min-width: 42px;
56
- min-height: 42px;
57
- `
55
+ min-width: 42px;
56
+ min-height: 42px;
57
+ ${selectedStyle}
58
+ `;
58
59
  } else {
59
60
  return css`
60
- border: 2px solid #2240CB;
61
- background-color: #2240CB;
62
- // width: 38px;
63
- // height: 38px;
64
- `
61
+ ${notSelectedStyle}
62
+ `;
65
63
  }
66
64
  }}
67
65
  font-weight: 600;
68
66
  `;
69
67
 
70
-
71
68
  //Create the style for the Avatar
72
69
 
73
70
  // let customStylesCircle = {}
@@ -81,52 +78,52 @@ const StyledCircle = styled.div`
81
78
  // console.log("customStylesCircle" + i + ": ", customStylesCircle)
82
79
 
83
80
  const StyledName = styled.span`
84
- ${({ theme, type, size, customStyles }) => {
85
- if (theme) {
81
+ color: ${({ theme }) => theme.textColor};
82
+
83
+ ${({ inBuiltCss, type, size, customStyles }) => {
84
+ if (inBuiltCss) {
86
85
  let tempObj = {};
87
- if (theme[type]) {
88
- for (const property in theme['common']) {
89
- tempObj[property] = theme['common'][property]
86
+ if (inBuiltCss[type]) {
87
+ for (const property in inBuiltCss['common']) {
88
+ tempObj[property] = inBuiltCss['common'][property];
90
89
  }
91
- for (const property in theme[type]) {
92
- delete theme.common[property]
93
- tempObj[property] = theme[type][property]
90
+ for (const property in inBuiltCss[type]) {
91
+ delete inBuiltCss.common[property];
92
+ tempObj[property] = inBuiltCss[type][property];
94
93
  }
95
- for (const property in theme[`${type}${size}`]) {
96
- tempObj[property] = theme[`${type}${size}`][property]
97
- delete theme.common[property]
94
+ for (const property in inBuiltCss[`${type}${size}`]) {
95
+ tempObj[property] = inBuiltCss[`${type}${size}`][property];
96
+ delete inBuiltCss.common[property];
98
97
  }
99
98
  }
100
99
  return { ...tempObj, ...customStyles };
101
100
  }
102
101
  }}
103
102
 
104
- &:hover{
105
- ${({ theme, type, size, customStylesHover }) => {
106
- if (theme) {
103
+ &:hover {
104
+ ${({ inBuiltCss, type, size, customStylesHover }) => {
105
+ if (inBuiltCss) {
107
106
  let tempObj = {};
108
- // if (theme[type]) {
109
- // for (const property in theme['common']) {
110
- // tempObj[property] = theme['common'][property]
107
+ // if (inBuiltCss[type]) {
108
+ // for (const property in inBuiltCss['common']) {
109
+ // tempObj[property] = inBuiltCss['common'][property]
111
110
  // }
112
- // for (const property in theme[type]) {
113
- // delete theme.common[property]
114
- // tempObj[property] = theme[type][property]
111
+ // for (const property in inBuiltCss[type]) {
112
+ // delete inBuiltCss.common[property]
113
+ // tempObj[property] = inBuiltCss[type][property]
115
114
  // }
116
- // for (const property in theme[`${type}${size}`]) {
117
- // tempObj[property] = theme[`${type}${size}`][property]
118
- // delete theme.common[property]
115
+ // for (const property in inBuiltCss[`${type}${size}`]) {
116
+ // tempObj[property] = inBuiltCss[`${type}${size}`][property]
117
+ // delete inBuiltCss.common[property]
119
118
  // }
120
119
  // }
121
120
  return { ...tempObj, ...customStylesHover };
122
121
  }
123
122
  }}
124
- }
125
-
123
+ }
126
124
  `;
127
125
 
128
126
  export const AvatarSB = ({
129
- theme,
130
127
  customStylesContainer,
131
128
  customStylesImage,
132
129
  customStylesCircle,
@@ -137,42 +134,74 @@ export const AvatarSB = ({
137
134
  user,
138
135
  border,
139
136
  isSelected,
137
+ selectedStyle,
138
+ notSelectedStyle,
140
139
  ...props
141
140
  }) => {
141
+ const activeTheme = useTheme() || defaultThemeColor;
142
142
 
143
- const [avatarStatus, setAvatarStatus] = useState("loading");
143
+ const [avatarStatus, setAvatarStatus] = useState('loading');
144
144
 
145
145
  const handleImageStatus = (imageStatus) => {
146
146
  setAvatarStatus(imageStatus);
147
- }
147
+ };
148
148
  // console.log('user', user)
149
149
  return (
150
- <StyledContainer border={border} theme={theme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
151
- {user?.url && <Image
152
- {...props}
153
- theme={theme}
154
- customStyles={customStylesImage}
155
- type={'imageAvatar'}
156
- size={size}
157
- alt="user-picture"
158
- src={user.url}
159
- handleImageStatus={handleImageStatus}
160
- style={{ visibility: avatarStatus !== "loaded" ? 'hidden' : 'visible' }}
161
- />}
150
+ <StyledContainer
151
+ border={border}
152
+ inBuiltCss={defaultStyles}
153
+ customStyles={customStylesContainer}
154
+ type={'avatarContainer'}
155
+ {...props}
156
+ >
157
+ {user?.url && (
158
+ <Image
159
+ {...props}
160
+ inBuiltCss={defaultStyles}
161
+ customStyles={customStylesImage}
162
+ type={'imageAvatar'}
163
+ size={size}
164
+ alt='user-picture'
165
+ src={user.url}
166
+ handleImageStatus={handleImageStatus}
167
+ style={{
168
+ visibility: avatarStatus !== 'loaded' ? 'hidden' : 'visible',
169
+ }}
170
+ />
171
+ )}
162
172
 
163
- <StyledCircle {...props}
164
- theme={theme}
173
+ <StyledCircle
174
+ {...props}
175
+ theme={activeTheme}
176
+ selectedStyle={selectedStyle}
177
+ notSelectedStyle={notSelectedStyle}
178
+ inBuiltCss={defaultStyles}
165
179
  type={'avatarCircle'}
166
- customStyles={customStylesCircle} size={size}
167
- style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
180
+ customStyles={customStylesCircle}
181
+ size={size}
182
+ style={{ visibility: avatarStatus !== 'loaded' ? 'visible' : 'hidden' }}
168
183
  isSelected={isSelected}
169
184
  >
170
- {
171
- user?.userName && user?.userName.split(" ").length >= 2 ? user?.userName.split(" ")[0].charAt(0).toUpperCase() + user?.userName.split(" ")[1].charAt(0).toUpperCase()
172
- : user?.userName && user?.userName.split(" ").length === 1 && user?.userName.split(" ")[0].charAt(0).toUpperCase()
173
- }
185
+ {user?.userName && user?.userName.split(' ').length >= 2
186
+ ? user?.userName.split(' ')[0].charAt(0).toUpperCase() +
187
+ user?.userName.split(' ')[1].charAt(0).toUpperCase()
188
+ : user?.userName &&
189
+ user?.userName.split(' ').length === 1 &&
190
+ user?.userName.split(' ')[0].charAt(0).toUpperCase()}
174
191
  </StyledCircle>
175
- {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} customStylesHover={customStylesNameHover} size={size}>{user.userName} </StyledName>}
192
+ {toggleName && (
193
+ <StyledName
194
+ theme={activeTheme}
195
+ {...props}
196
+ inBuiltCss={defaultStyles}
197
+ type={'avatarName'}
198
+ customStyles={customStylesName}
199
+ customStylesHover={customStylesNameHover}
200
+ size={size}
201
+ >
202
+ {user.userName}{' '}
203
+ </StyledName>
204
+ )}
176
205
  </StyledContainer>
177
206
  );
178
207
  };
@@ -206,14 +235,15 @@ AvatarSB.propTypes = {
206
235
  * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
207
236
  */
208
237
  user: PropTypes.object,
209
- /**
210
- * Theme object
211
- */
212
- theme: PropTypes.object,
238
+ customStylesNameHover: PropTypes.object,
239
+
240
+ // border,
241
+ // isSelected,
242
+ // selectedStyle,
243
+ // notSelectedStyle,
213
244
  };
214
245
 
215
246
  AvatarSB.defaultProps = {
216
- theme: defaultStyles,
217
247
  block: false,
218
248
  size: 'MD',
219
249
  toggleName: false,
@@ -222,5 +252,4 @@ AvatarSB.defaultProps = {
222
252
  customStylesImage: null,
223
253
  customStylesCircle: null,
224
254
  customStylesName: null,
225
- };
226
-
255
+ };