groundfloor-react-ui 1.0.20 → 1.0.21

package/components/Avatar/AvatarSBfooter.js

@@ -1,73 +1,72 @@
-import React, { useState } from "react";
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import React, { useState } from 'react';
+import styled, { css, useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
-import { Image } from '../Images'
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { Image } from '../Images';
 
 /**
  * Primary UI component for user interaction
  */
 const StyledContainer = styled.span`
-${({ theme, type, customStyles }) => {
-        if (theme) {
+  ${({ inBuiltCss, type, customStyles }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss[type]) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property];
                 }
-                for (const property in theme[type]) {
-                    tempObj[property] = theme[type][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[type]) {
+                    tempObj[property] = inBuiltCss[type][property];
+                    delete inBuiltCss.common[property];
                 }
             }
             return { ...tempObj, ...customStyles };
         }
     }}
-    width: auto;
+  width: auto;
 `;
 
 const StyledCircle = styled.div`
-    ${({ theme, type, size, customStyles }) => {
-        if (theme) {
+  background-color: ${({ theme }) => theme.primary['primary-1']};
+  color: ${({ theme }) => theme.bgColor};
+
+  ${({ inBuiltCss, type, size, customStyles }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss[type]) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property];
                 }
-                for (const property in theme[type]) {
-                    tempObj[property] = theme[type][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[type]) {
+                    tempObj[property] = inBuiltCss[type][property];
+                    delete inBuiltCss.common[property];
                 }
-                for (const property in theme[`${type}${size}`]) {
-                    tempObj[property] = theme[`${type}${size}`][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[`${type}${size}`]) {
+                    tempObj[property] = inBuiltCss[`${type}${size}`][property];
+                    delete inBuiltCss.common[property];
                 }
             }
             return { ...tempObj, ...customStyles };
         }
     }}
-    ${({ isSelected }) => {
-
+  ${({ isSelected, selectedStyle, notSelectedStyle }) => {
         if (isSelected) {
             return css`
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            background-color: #1D36AD;
-            min-width: 42px;
-            min-height: 42px;
-            `
+        ${selectedStyle}
+
+        min-width: 42px;
+        min-height: 42px;
+      `;
         } else {
             return css`
-            border: 2px solid #2240CB;
-            background-color: #2240CB;
-            // width: 38px;
-            // height: 38px;
-            `
+        ${notSelectedStyle}
+      `;
         }
     }}
     font-weight: 600;
 `;
 
-
 //Create the style for the Avatar
 
 //   let customStylesCircle = {}
@@ -81,52 +80,52 @@ const StyledCircle = styled.div`
 //   console.log("customStylesCircle" + i + ": ", customStylesCircle)
 
 const StyledName = styled.span`
-${({ theme, type, size, customStyles }) => {
-        if (theme) {
+  color: ${({ theme }) => theme.textColor};
+
+  ${({ inBuiltCss, type, size, customStyles }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme[type]) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss[type]) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property];
                 }
-                for (const property in theme[type]) {
-                    delete theme.common[property]
-                    tempObj[property] = theme[type][property]
+                for (const property in inBuiltCss[type]) {
+                    delete inBuiltCss.common[property];
+                    tempObj[property] = inBuiltCss[type][property];
                 }
-                for (const property in theme[`${type}${size}`]) {
-                    tempObj[property] = theme[`${type}${size}`][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss[`${type}${size}`]) {
+                    tempObj[property] = inBuiltCss[`${type}${size}`][property];
+                    delete inBuiltCss.common[property];
                 }
             }
             return { ...tempObj, ...customStyles };
         }
     }}
 
-    &:hover{
-        ${({ theme, type, size, customStylesHover }) => {
-        if (theme) {
+  &:hover {
+    ${({ inBuiltCss, type, size, customStylesHover }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            // if (theme[type]) {
-            //     for (const property in theme['common']) {
-            //         tempObj[property] = theme['common'][property]
+            // if (inBuiltCss[type]) {
+            //     for (const property in inBuiltCss['common']) {
+            //         tempObj[property] = inBuiltCss['common'][property]
             //     }
-            //     for (const property in theme[type]) {
-            //         delete theme.common[property]
-            //         tempObj[property] = theme[type][property]
+            //     for (const property in inBuiltCss[type]) {
+            //         delete inBuiltCss.common[property]
+            //         tempObj[property] = inBuiltCss[type][property]
             //     }
-            //     for (const property in theme[`${type}${size}`]) {
-            //         tempObj[property] = theme[`${type}${size}`][property]
-            //         delete theme.common[property]
+            //     for (const property in inBuiltCss[`${type}${size}`]) {
+            //         tempObj[property] = inBuiltCss[`${type}${size}`][property]
+            //         delete inBuiltCss.common[property]
             //     }
             // }
             return { ...tempObj, ...customStylesHover };
         }
     }}
-    }
-    
+  }
 `;
 
 export const AvatarSBfooter = ({
-    theme,
     customStylesContainer,
     customStylesImage,
     customStylesCircle,
@@ -136,43 +135,71 @@ export const AvatarSBfooter = ({
     toggleName,
     user,
     border,
+    selectedStyle,
+    notSelectedStyle,
     isSelected,
     value,
     ...props
 }) => {
-
-    const [avatarStatus, setAvatarStatus] = useState("loading");
+    const [avatarStatus, setAvatarStatus] = useState('loading');
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const handleImageStatus = (imageStatus) => {
         setAvatarStatus(imageStatus);
-    }
+    };
     // console.log('user', user)
     return (
-        <StyledContainer border={border} theme={theme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
-            {user?.url && <Image
-                {...props}
-                theme={theme}
-                customStyles={customStylesImage}
-                type={'imageAvatar'}
-                size={size}
-                alt="user-picture"
-                src={user.url}
-                handleImageStatus={handleImageStatus}
-                style={{ visibility: avatarStatus !== "loaded" ? 'hidden' : 'visible' }}
-            />}
+        <StyledContainer
+            border={border}
+            theme={activeTheme}
+            inBuiltCss={defaultStyles}
+            customStyles={customStylesContainer}
+            type={'avatarContainer'}
+            {...props}
+        >
+            {user?.url && (
+                <Image
+                    {...props}
+                    inBuiltCss={defaultStyles}
+                    customStyles={customStylesImage}
+                    type={'imageAvatar'}
+                    size={size}
+                    alt='user-picture'
+                    src={user.url}
+                    handleImageStatus={handleImageStatus}
+                    style={{
+                        visibility: avatarStatus !== 'loaded' ? 'hidden' : 'visible',
+                    }}
+                />
+            )}
 
-            <StyledCircle {...props}
-                theme={theme}
+            <StyledCircle
+                {...props}
+                theme={activeTheme}
+                inBuiltCss={defaultStyles}
                 type={'avatarCircle'}
-                customStyles={customStylesCircle} size={size}
-                style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
+                customStyles={customStylesCircle}
+                size={size}
+                style={{ visibility: avatarStatus !== 'loaded' ? 'visible' : 'hidden' }}
                 isSelected={isSelected}
+                selectedStyle={selectedStyle}
+                notSelectedStyle={notSelectedStyle}
             >
-                {
-                    value
-                }
+                {value}
             </StyledCircle>
-            {toggleName && <StyledName {...props} theme={theme} type={'avatarName'} customStyles={customStylesName} customStylesHover={customStylesNameHover} size={size}>{user.userName} </StyledName>}
+            {toggleName && (
+                <StyledName
+                    theme={activeTheme}
+                    {...props}
+                    inBuiltCss={defaultStyles}
+                    type={'avatarName'}
+                    customStyles={customStylesName}
+                    customStylesHover={customStylesNameHover}
+                    size={size}
+                >
+                    {user.userName}{' '}
+                </StyledName>
+            )}
         </StyledContainer>
     );
 };
@@ -206,14 +233,9 @@ AvatarSBfooter.propTypes = {
      * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
      */
     user: PropTypes.object,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
 };
 
 AvatarSBfooter.defaultProps = {
-    theme: defaultStyles,
     block: false,
     size: 'MD',
     toggleName: false,
@@ -222,5 +244,4 @@ AvatarSBfooter.defaultProps = {
     customStylesImage: null,
     customStylesCircle: null,
     customStylesName: null,
-};
-
+};

package/components/Banner/Banner.js

@@ -1,46 +1,54 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const BannerWrapper = styled.div`
-    color: ${({ theme }) => theme.textColor};
-    display: flex;
-    background-color: ${({ backgroundColor }) => backgroundColor };
-    border-left: 5px solid  ${({ borderColor }) => borderColor };;
-    padding-left:28px;
-    padding-top: 22px;
-    padding-bottom:22px;
-    width: inherit;
-`
-
-BannerWrapper.defaultProps = {
-    theme: defaultThemeColor,
-}
+  color: ${({ theme }) => theme.textColor};
+  display: flex;
+  background-color: ${({ backgroundColor, theme }) =>
+        backgroundColor ? backgroundColor : theme.variant['insight-purple']};
+  border-left: 5px solid
+    ${({ borderColor, theme }) =>
+        borderColor ? borderColor : theme.variant['graph-3']};
+  padding-left: 28px;
+  padding-top: 22px;
+  padding-bottom: 22px;
+  width: inherit;
+`;
 
 const BannerContent = styled.div`
-    color: ${({ theme }) => theme.textColor};
-    display: flex;
-    font-size: 16px;
-    text-align: left;
-    word-wrap: break-word;
-`
+  color: ${({ theme }) => theme.textColor};
+  display: flex;
+  font-size: 16px;
+  text-align: left;
+  word-wrap: break-word;
+`;
 
-BannerContent.defaultProps = {
-    theme: defaultThemeColor,
-}
+export const Banner = ({
+    backgroundColor,
+    borderColor,
+    variant,
+    children,
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
-export const Banner = ({ backgroundColor, borderColor,variant, children,...props}) =>{
     return (
         <>
-            <BannerWrapper backgroundColor={backgroundColor} borderColor={borderColor} {...props}>
-                <BannerContent {...props}>
+            <BannerWrapper
+                theme={activeTheme}
+                backgroundColor={backgroundColor}
+                borderColor={borderColor}
+                {...props}
+            >
+                <BannerContent theme={activeTheme} {...props}>
                     {children}
                 </BannerContent>
             </BannerWrapper>
         </>
     );
-}
+};
 
 Banner.propTypes = {
     /**
@@ -54,12 +62,9 @@ Banner.propTypes = {
     /**
      *	What will be rendered inside the bannaer
      */
-    children: PropTypes.any
-}
+    children: PropTypes.any,
+};
 
 Banner.defaultProps = {
     children: '',
-    backgroundColor:'#f7f2ff',
-    borderColor:'#8b2dff',
-}
-
+};