groundfloor-react-ui 1.2.6 → 1.2.8

package/components/Accordion/AccordionSB.js

@@ -20,6 +20,8 @@ export const AccordionSB = ({
     handleClick,
     isAccordionOpen,
     id,
+    customSelectCardColor,
+
     ...props
 }) => {
     const [contentIsOpen, setContentIsOpen] = useState(false);
@@ -33,7 +35,7 @@ export const AccordionSB = ({
             setCustomStylesContainer((prev) => {
                 return {
                     ...prev,
-                    backgroundColor: '#2444d8',
+                    backgroundColor: customSelectCardColor || '#2444d8',
                     marginBottom: '15.5px',
                     marginTop: index !== 0 ? '15.5px' : '0px',
                 };
@@ -41,7 +43,7 @@ export const AccordionSB = ({
             setCustomStylesTogggle((prev) => {
                 return {
                     ...prev,
-                    backgroundColor: '#2444d8',
+                    backgroundColor: customSelectCardColor || '#2444d8',
                     paddingTop: '14px',
                     paddingBottom: '14px',
                     paddingLeft: '14px',
@@ -158,11 +160,11 @@ AccordionSB.propTypes = {
      * String or element to be display in the header of the accordion
      */
     contentToggle: PropTypes.any,
-    id: PropTypes.string
+    id: PropTypes.string,
 };
 
 AccordionSB.defaultProps = {
     contentToggle: 'Toggle',
     content: 'Content',
-    id: ''
+    id: '',
 };

package/components/Avatar/AvatarSB.js

@@ -29,7 +29,7 @@ const StyledContainer = styled.span`
 
 const StyledCircle = styled.div`
   background-color: ${({ theme }) => theme.primary['primary-1']};
-  color: ${({ theme }) => theme.bgColor};
+  color: ${({ theme }) => theme.bgColor} !important;
   ${({ inBuiltCss, type, size, customStyles }) => {
         if (inBuiltCss) {
             let tempObj = {};
@@ -79,6 +79,7 @@ const StyledCircle = styled.div`
 
 const StyledName = styled.span`
   color: ${({ theme }) => theme.textColor};
+  background-color: transparent !important;
 
   ${({ inBuiltCss, type, size, customStyles }) => {
         if (inBuiltCss) {
@@ -145,7 +146,6 @@ export const AvatarSB = ({
     const handleImageStatus = (imageStatus) => {
         setAvatarStatus(imageStatus);
     };
-    // console.log('user', user)
     return (
         <StyledContainer
             border={border}

package/components/Inputs/CheckBoxInput.js

@@ -83,7 +83,7 @@ const OptionText = styled.span`
         else if (!checked && !defaultTextColor) return theme.neutral['neutral-2'];
     }};
 
-  margin-right: ${({ inline }) => (inline ? '30px' : '0px')};
+  margin-right: ${({ inline }) => (inline ? '30px' : '10px')};
 
   // custom styles
   ${({ optionTextStyle }) => optionTextStyle}
@@ -96,9 +96,9 @@ const WrapperDiv = styled.label`
   width: fit-content;
   margin-bottom: ${({ inline }) => (!inline ? '18px !important' : '')};
   cursor: pointer;
-  align-items: center;
   display: flex;
   gap: 10px;
+  align-items: start;
 
   // custom styles
   ${({ wrapperStyles }) => wrapperStyles}
@@ -293,6 +293,16 @@ CheckBoxInput.propTypes = {
     inline: PropTypes.bool,
     /**
      *	Array that will be rendered for checkbox options
+     ex: [
+      {
+        label: 'Lorem ipsum dolor sit amet',
+        value: 'Option One',
+        disabled: false,
+        id: '1'
+        // disabledColor: '#B25068',
+      },
+      { label: 'Option Two', value: 'Option Two', checked: true, id: '2' },
+    ]
      */
     options: PropTypes.array,
     /**
@@ -311,6 +321,8 @@ CheckBoxInput.propTypes = {
      *	Wrapper styles
      */
     wrapperStyles: PropTypes.object,
+
+
 };
 
 CheckBoxInput.defaultProps = {

package/components/Sidebar/Navbar.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { AccordionSB, AccordionSBfooter } from '../Accordion';
-import { AvatarSB, AvatarSBfooter } from '../Avatar';
+import { AvatarSB } from '../Avatar';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledHeader = styled.div`
@@ -50,7 +50,7 @@ const ListElement = styled.div`
   }
 
   p {
-    margin: 8.25px 0;
+    margin: 8.25px 0px;
   }
 `;
 
@@ -83,7 +83,7 @@ const ListElementFooter = styled.div`
   }
 
   p {
-    margin: 8.25px 0;
+    margin: 8.25px 31px;
   }
 `;
 
@@ -99,6 +99,10 @@ export const Navbar = ({
     notSelectedStyle,
     customStylesNameHover,
     listElementStyle,
+    customSelectCardColor,
+    user,
+    firstBottomContent,
+    secondBottomContent,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -125,9 +129,8 @@ export const Navbar = ({
             style={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: '100vh',
+                height: '98vh',
             }}
-            className={'NavbarDiv'}
         >
             <StyledHeader theme={activeTheme} headerStyles={headerStyles}>
                 {headerContent}
@@ -143,6 +146,7 @@ export const Navbar = ({
                             }}
                             isAccordionOpen={i === accordionOpen}
                             isSelected={app.userName === selectedApp.lev1}
+                            customSelectCardColor={customSelectCardColor}
                             customStylesAccordionContainer={{
                                 padding: '0',
                                 'box-shadow': 'none',
@@ -202,7 +206,6 @@ export const Navbar = ({
                                                 listElementStyle={listElementStyle}
                                                 key={app.id + sub}
                                                 onClick={() => {
-                                                    console.log('Click: ', app.fullName, sub);
                                                     setApp({ lev1: `${app.userName}`, lev2: `${sub}` });
                                                 }}
                                             >
@@ -269,9 +272,9 @@ export const Navbar = ({
                             customStylesNameHover={customStylesNameHover}
                             size={'LG'}
                             user={{
-                                fullName: 'My Account',
-                                userName: 'My Account',
-                                url: 'https://picsum.photos/30',
+                                fullName: user.fullName || 'My Account',
+                                userName: user.userName || 'My Account',
+                                url: user.imgUrl,
                             }}
                         />
                     }
@@ -286,68 +289,17 @@ export const Navbar = ({
                         >
                             <ListElementFooter
                                 listElementStyle={listElementStyle}
-                                onClick={() => { }}
                             >
-                                <p>Change Password</p>
+                                {firstBottomContent}
+
                             </ListElementFooter>
                             <ListElementFooter onClick={() => { }}>
-                                <p>Sign Out</p>
+
+                                {secondBottomContent}
                             </ListElementFooter>
                         </div>
                     }
                 />
-                <AccordionSBfooter
-                    handleClick={() => { }}
-                    customStylesAccordionContainer={{
-                        padding: '0',
-                        'box-shadow': 'none',
-                        'border-radius': '0px',
-                        'background-color': 'transparent',
-                    }}
-                    customStylesAccordionTogggle={{
-                        padding: '0',
-                        'box-shadow': 'none',
-                        'border-radius': '0px',
-                        'background-color': 'transparent',
-                        'padding-left': '16px',
-                        'padding-top': '7.5px',
-                        'padding-bottom': '7.5px',
-                        cursor: 'pointer',
-                    }}
-                    customStylesAccordionContent={{
-                        transition: 'height ease 0.2s', //transform ease 95ms',
-                        overflow: 'hidden',
-                        padding: '0',
-                        'background-color': 'transparent',
-                        color: 'white',
-                        position: 'relative',
-                        'box-shadow': 'none',
-                    }}
-                    contentToggle={
-                        <AvatarSBfooter
-                            selectedStyle={selectedStyle}
-                            notSelectedStyle={notSelectedStyle}
-                            toggleName={toggleSideBarOpen} //isOpen} //true}
-                            customStylesName={{
-                                'white-space': 'nowrap',
-                                overflow: 'hidden',
-                                'text-overflow': 'ellipsis',
-                                color: 'white',
-                                'font-weight': '400',
-                            }}
-                            customStylesNameHover={{
-                                'text-decoration': 'underline',
-                            }}
-                            size={'LG'}
-                            user={{
-                                fullName: 'Users',
-                                userName: 'Users',
-                            }}
-                            value={'+' + footerContent.length}
-                        />
-                    }
-                    disable={true}
-                />
             </StyledFooter>
         </div>
     );

package/components/Sidebar/Sidebar.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React from "react";
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 
 /**
@@ -9,54 +10,89 @@ import getDefaultStyles from '../constants/utils';
  */
 
 const StyledContainer = styled.div`
-${({ theme, type }) => {
-        return getDefaultStyles(theme, 'sidebar-container');
+  background-color: ${({ theme }) => theme.variant['primary-1']} !important;
+  color: ${({ theme }) => theme.bgColor};
+  overflow-y: auto;
+  ${({ inBuiltCss, type }) => {
+        return getDefaultStyles(inBuiltCss, 'sidebar-container');
     }}
-${({ customStylesContainer }) => customStylesContainer}
+  ${({ customStylesContainer }) => customStylesContainer}
 
-${({ isOpen, forceOpen, theme, type, customStylesContainerOpen, customStylesContainerClose }) => {
+${({
+        isOpen,
+        forceOpen,
+        inBuiltCss,
+        type,
+        customStylesContainerOpen,
+        customStylesContainerClose,
+    }) => {
         if (isOpen || forceOpen) {
-            return { ...getDefaultStyles(theme, 'sidebar-container-open'), ...customStylesContainerOpen };
+            return {
+                ...getDefaultStyles(inBuiltCss, 'sidebar-container-open'),
+                ...customStylesContainerOpen,
+            };
         } else {
-            return { ...getDefaultStyles(theme, 'sidebar-container-close'), ...customStylesContainerClose };
+            return {
+                ...getDefaultStyles(inBuiltCss, 'sidebar-container-close'),
+                ...customStylesContainerClose,
+            };
         }
     }}
 
 @media (max-width: 980px) {
-    ${({ isOpen, theme, type, customStylesContainerMobileOpen, customStylesContainerMobileClose }) => {
-        if (isOpen) {
-            return { ...getDefaultStyles(theme, 'sidebar-container-mobile-open'), ...customStylesContainerMobileOpen };
-        } else {
-            return { ...getDefaultStyles(theme, 'sidebar-container-mobile-close'), ...customStylesContainerMobileClose };
-        }
+    ${({
+        isOpen,
+        inBuiltCss,
+        type,
+        customStylesContainerMobileOpen,
+        customStylesContainerMobileClose,
+    }) => {
+        // if (isOpen) {
+        //     return { ...getDefaultStyles(inBuiltCss, 'sidebar-container-mobile-open'), ...customStylesContainerMobileOpen };
+        // } else {
+        //     return { ...getDefaultStyles(inBuiltCss, 'sidebar-container-mobile-close'), ...customStylesContainerMobileClose };
+        // }
     }}
-}
+  }
 `;
 
 const StyledPusher = styled.div`
-${({ theme, type }) => {
-        return getDefaultStyles(theme, 'sidebar-pusher');
+${({ inBuiltCss, type }) => {
+        return getDefaultStyles(inBuiltCss, 'sidebar-pusher');
     }}
 ${({ customStylesPusher }) => customStylesPusher}
 
-${({ forceOpen, theme, type, customStylesPusherOpen, customStylesPusherClose }) => {
+${({
+        forceOpen,
+        inBuiltCss,
+        type,
+        customStylesPusherOpen,
+        customStylesPusherClose,
+    }) => {
         if (forceOpen) {
-            return { ...getDefaultStyles(theme, 'sidebar-pusher-open'), ...customStylesPusherOpen };
+            return {
+                ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-open'),
+                ...customStylesPusherOpen,
+            };
         } else {
-            return { ...getDefaultStyles(theme, 'sidebar-pusher-close'), ...customStylesPusherClose };
+            return {
+                ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-close'),
+                ...customStylesPusherClose,
+            };
         }
     }}
 
 @media (max-width: 980px) {
-    ${({ theme, type, customStylesPusherMobile }) => {
-        return { ...getDefaultStyles(theme, 'sidebar-pusher-mobile'), ...customStylesPusherMobile };
-    }
-    }}
+    ${({ inBuiltCss, type, customStylesPusherMobile }) => {
+        return {
+            ...getDefaultStyles(inBuiltCss, 'sidebar-pusher-mobile'),
+            ...customStylesPusherMobile,
+        };
+    }}}
 }
 `;
 
 export const Sidebar = ({
-    theme,
     customStylesContainer,
     customStylesContainerOpen,
     customStylesContainerClose,
@@ -73,50 +109,39 @@ export const Sidebar = ({
     pinner,
     ...props
 }) => {
-
     function handleMouse(flag) {
-        // console.log("handleMouse")
-        handleSidebar(flag)
+        handleSidebar(flag);
     }
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
-        <>
-            <StyledContainer
-                theme={theme}
-                customStyles={customStylesContainer}
-                type={'sidebarContainer'}
-                onMouseEnter={
-                    () => {
-                        if (forceOpen) {
-                        } else {
-                            handleMouse(true);
-                            // console.log("onMouseEnter")
-                        }
-                    }
-                }
-                onMouseLeave={
-                    () => {
-                        handleMouse(false);
-                        // console.log("onMouseLeave")
-                        forceClose();
-                    }
+        <StyledContainer
+            theme={activeTheme}
+            inBuiltCss={defaultStyles}
+            customStyles={customStylesContainer}
+            type={'sidebarContainer'}
+            onMouseEnter={() => {
+                if (forceOpen) {
+                } else {
+                    handleMouse(true);
                 }
-                forceOpen={forceOpen}
-                isOpen={toggleSideBarOpen} //true} 
-                {...props}>
-                <StyledPusher />
-                {props.children}
-                {pinner}
-            </StyledContainer>
-        </>
+            }}
+            onMouseLeave={() => {
+                handleMouse(false);
+                forceClose();
+            }}
+            forceOpen={forceOpen}
+            isOpen={toggleSideBarOpen} //true}
+            {...props}
+        >
+            <StyledPusher />
+            {props.children}
+            {pinner}
+        </StyledContainer>
     );
 };
 
 Sidebar.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
     /**
      * Custom style of container
      */
@@ -175,6 +200,8 @@ Sidebar.propTypes = {
     pinner: PropTypes.any,
 };
 
+
 Sidebar.defaultProps = {
-    theme: defaultStyles,
+    forceClose: () => { },
+    forceOpen: false,
 };

package/components/constants/defaultStyle.js

@@ -19,7 +19,7 @@ const defaultStyles = {
         display: 'flex',
         width: 'inherit',
         'align-items': 'flex-start',
-        color: `${defaultThemeColor.variant['neutral-2']}`,
+
         'margin-bottom': '0',
         'padding-bottom': '0',
     },
@@ -283,8 +283,6 @@ const defaultStyles = {
         'min-height': '51px',
         'padding-left': '39px',
         'font-size': '16px',
-        'background-color': `${defaultThemeColor['bgColor']}`,
-        'border-bottom': `0.5px solid ${defaultThemeColor.variant['neutral-3']}`,
     },
     /**
      * Default Style of the Content
@@ -336,8 +334,6 @@ const defaultStyles = {
      */
     sidebarContainer: {
         'min-height': '100%',
-        overflow: 'hidden',
-        'background-color': '#2e56f4',
         position: 'fixed',
         color: 'white',
         width: '70px',
@@ -348,6 +344,7 @@ const defaultStyles = {
      */
     'checkBox-outer': {
         border: `2px solid ${defaultThemeColor.border}`,
+        minWidth: '20px',
         width: '20px',
         height: '20px',
         'border-radius': '3px',
@@ -357,6 +354,7 @@ const defaultStyles = {
     'checkBox-inner': {
         'background-repeat': 'no-repeat',
         'background-position': 'center',
+        minWidth: '20px',
         width: '20px',
         height: '20px',
         color: `${defaultThemeColor.bgColor}`,
@@ -534,9 +532,9 @@ const defaultStyles = {
         transition: 'transform ease 400ms',
         display: 'flex',
         'flex-direction': 'column',
-        'background-color': '#FFFFFF',
+
         'box-sizing': 'border-box',
-        'box-shadow': '-20px 5px 37px rgba(56, 66, 100, 0.0880136)',
+
         top: '51px',
         right: '0px',
         'z-index': '1001',
@@ -552,11 +550,11 @@ const defaultStyles = {
      * Default Style of the tooltip
      */
     'tooltip-container': {
-        'background-color': `${defaultThemeColor.bgColor}`,
+
         'border-radius': '3.6px',
-        border: `1px solid ${defaultThemeColor.bgColor}`,
+
         'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        color: '#000',
+
         display: 'flex',
         'flex-direction': 'column',
         padding: '0',
@@ -587,46 +585,45 @@ const defaultStyles = {
         width: '0',
     },
     'tp-cont-bottom-arrow-before': {
-        'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
-        'border-width': '0 15px 19px 15px',
+        'border-width': '0 15px 0px 15px',
         position: 'absolute',
         top: '-1px',
     },
     'tp-cont-bottom-arrow-after': {
-        'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
+
         // 'border-width': '0 0.5rem 0.4rem 0.5rem',
         'border-width': '0 15px 19px 15px',
     },
     'tp-cont-top-arrow-before': {
-        'border-color': `${defaultThemeColor.bgColor} transparent transparent transparent`,
+
         // 'border-width': '0.4rem 0.5rem 0 0.5rem',
-        'border-width': '19px 15px 0 15px',
+        'border-width': '0px 15px 0 15px',
         position: 'absolute',
         top: '1px',
     },
     'tp-cont-top-arrow-after': {
-        'border-color': `${defaultThemeColor.bgColor} transparent transparent transparent`,
+
         // 'border-width': '0.4rem 0.5rem 0 0.5rem',
         'border-width': '19px 15px 0 15px',
     },
     'tp-cont-right-arrow-before': {
-        'border-color': `transparent ${defaultThemeColor.bgColor} transparent transparent`,
-        'border-width': '15px 19px 15px 0',
+
+        'border-width': '15px 0px 15px 0',
     },
     'tp-cont-right-arrow-after': {
-        'border-color': `transparent ${defaultThemeColor.bgColor} transparent transparent`,
+
         // 'border-width': '0.5rem 0.4rem 0.5rem 0',
         'border-width': '15px 19px 15px 0',
         left: '6px',
         top: '0',
     },
     'tp-cont-left-arrow-before': {
-        'border-color': `transparent transparent transparent ${defaultThemeColor.bgColor}`,
+
         // 'border-width': '0.5rem 0 0.5rem 0.4em',
-        'border-width': '15px 0 15px 19px',
+        'border-width': '15px 0 15px 0px',
     },
     'tp-cont-left-arrow-after': {
-        'border-color': `transparent transparent transparent ${defaultThemeColor.bgColor}`,
+
         // 'border-width': '0.5rem 0 0.5rem 0.4em',
         'border-width': '15px 0 15px 19px',
         left: '3px',
@@ -654,11 +651,7 @@ const defaultStyles = {
      * Default Style of the overlay
      */
     overlay: {
-        'background-color': `${defaultThemeColor.bgColor}`,
         'border-radius': '3.6px',
-        border: `1px solid ${defaultThemeColor.bgColor}`,
-        'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        color: '#000',
         display: 'flex',
         'flex-direction': 'column',
         padding: '0',
@@ -666,11 +659,11 @@ const defaultStyles = {
         'z-index': '9999',
     },
     'simple-overlay': {
-        'background-color': `${defaultThemeColor.variant['neutral-1']}`,
+
         'border-radius': '6px',
-        border: `1px solid ${defaultThemeColor.variant['neutral-1']}`,
+
         // 'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        color: `${defaultThemeColor.bgColor}`,
+
         display: 'flex',
         'flex-direction': 'column',
         padding: '0',
@@ -682,10 +675,8 @@ const defaultStyles = {
      */
     'sidebar-container': {
         'min-height': '100%',
-        overflow: 'hidden',
-        'background-color': '#2e56f4',
+        overflowX: 'hidden',
         position: 'fixed',
-        color: 'white',
         transition: 'width ease 400ms',
         display: 'flex',
         'flex-direction': 'column',
@@ -772,6 +763,7 @@ const defaultStyles = {
         },
     },
 
+
     'popOver-Content': {
         padding: '16px',
         color: 'white',
@@ -803,6 +795,7 @@ const defaultStyles = {
         width: '24px',
         height: '24px',
     }
+
 };
 
 export default defaultStyles;