groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Form/HeaderComponent.js

@@ -1,34 +1,64 @@
-import React from 'react'
-import defaultThemeColor from '../constants/defaultThemeColor'
-import userIcon from "../../assets/icons/users.svg";
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import { Icon } from '../Icon';
 
-export const HeaderComponent = ({ title, subtitle, wrapperstyle, imgLink, imgStyle }) => {
+export const HeaderComponent = ({
+    title,
+    subtitle,
+    wrapperStyle,
+    imgLink,
+    imgStyle,
+    iconSize,
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const titleStyle = {
-        'fontSize': '26px',
-        'fontWeight': 'bold',
-        'color': `${defaultThemeColor.textColor}`,
-        'lineHeight': '36px',
-        'display': 'flex',
-        'gap': '14px',
-        'alignItems': 'flex-start',
-        'paddingLeft': '25px'
-    }
+        fontSize: '26px',
+        fontWeight: 'bold',
+        color: `${activeTheme.textColor}`,
+        lineHeight: '36px',
+        display: 'flex',
+        gap: '14px',
+        alignItems: 'flex-start',
+        paddingLeft: '25px',
+    };
 
     const subtitleStyle = {
-        'fontSize': '13px',
-        'color': `${defaultThemeColor.neutral['neutral-2']}`,
-        'lineHeight': '24px',
-        'paddingLeft': '25px'
-    }
+        fontSize: '13px',
+        color: `${activeTheme.neutral['neutral-2']}`,
+        lineHeight: '24px',
+        paddingLeft: '25px',
+    };
 
-    return <div style={wrapperstyle}>
-        <div style={titleStyle}>
-            <img src={imgLink || userIcon} alt="userIcon" srcset="" style={imgStyle} />
-            <h4>{title}</h4>
+    return (
+        <div style={wrapperStyle}>
+            <div style={titleStyle}>
+                {imgLink ? (
+                    <img src={imgLink} alt='userIcon' srcset='' style={imgStyle} />
+                ) : (
+                    <Icon
+                        icon='user-icon'
+                        size={iconSize}
+                        color={activeTheme.primary['primary-1']}
+                    />
+                )}{' '}
+                <h4>{title}</h4>
+            </div>
+            <div style={subtitleStyle}>
+                <p>{subtitle}</p>
+            </div>
         </div>
-        <div style={subtitleStyle}>
-            <p>{subtitle}</p>
-        </div>
-    </div>
-}
+    );
+};
+
+HeaderComponent.propTypes = {
+    /**
+     * How large should the default icon be?
+     */
+    size: PropTypes.number,
+};
+HeaderComponent.defaultProps = {
+    iconSize: 23,
+};

package/components/GroupAvatars/GroupAvatars.js

@@ -1,8 +1,8 @@
-import React from "react";
 import PropTypes from 'prop-types';
+import React from "react";
 import styled, { useTheme } from 'styled-components';
+import { Avatar } from '../Avatar';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import { Avatar } from '../Avatar'
 /**
  * Primary UI component for user interaction
  */
@@ -26,7 +26,7 @@ const StyledQty = styled.p`
 `;
 
 export const GroupAvatars = ({ items, block, size, variantCircle, variantName, variantQty, flagName, user, colorCircle, colorBorderCircle, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
         <StyledContainer block={block} {...props}>
@@ -36,13 +36,13 @@ export const GroupAvatars = ({ items, block, size, variantCircle, variantName, v
                 let customStylesImage = {}
 
                 if (colorCircle) {
-                    customStylesCircle.backgroundColor = `${theme.variant[colorCircle]}`
+                    customStylesCircle.backgroundColor = `${activeTheme.variant[colorCircle]}`
                 } else {
-                    customStylesCircle.backgroundColor = `${theme.variant[variantCircle]}`
+                    customStylesCircle.backgroundColor = `${activeTheme.variant[variantCircle]}`
                 }
                 if (i !== 0) {
-                    customStylesCircle.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${theme.variant[variantCircle]}`
-                    customStylesImage.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${theme.variant[variantCircle]}`
+                    customStylesCircle.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${activeTheme.variant[variantCircle]}`
+                    customStylesImage.border = colorBorderCircle ? `2px solid ${colorBorderCircle}` : `2px solid ${activeTheme.variant[variantCircle]}`
                 }
 
                 return (
@@ -52,7 +52,7 @@ export const GroupAvatars = ({ items, block, size, variantCircle, variantName, v
                             key={user.id}
                             // variantCircle={variantCircle}
                             customStylesContainer={{ width: 'auto' }}
-                            customStylesName={{ color: `${theme.variant[{ variantName }]}` }}
+                            customStylesName={{ color: `${activeTheme.variant[{ variantName }]}` }}
                             // block={false}
                             size={size}
                             toggleName={true}
@@ -68,7 +68,7 @@ export const GroupAvatars = ({ items, block, size, variantCircle, variantName, v
                                 // variantCircle={variantCircle}
                                 // variantName={variantName}
                                 customStylesContainer={{ width: 'auto' }}
-                                customStylesName={{ color: `${theme.variant[{ variantName }]}` }}
+                                customStylesName={{ color: `${activeTheme.variant[{ variantName }]}` }}
                                 // block={false}
                                 size={size}
                                 toggleName={false}
@@ -82,7 +82,7 @@ export const GroupAvatars = ({ items, block, size, variantCircle, variantName, v
                         ) : (null)
                 )
             })}
-            {(items.length - 4) > 0 ? (<StyledQty variantQty={variantQty}>+{items.length - 4}</StyledQty>) : null}
+            {(items.length - 4) > 0 ? (<StyledQty theme={activeTheme} variantQty={variantQty}>+{items.length - 4}</StyledQty>) : null}
         </StyledContainer>
     );
 };
@@ -122,12 +122,9 @@ GroupAvatars.propTypes = {
     variantQty: PropTypes.string,
 };
 
-StyledQty.defaultProps = {
-    theme: defaultThemeColor,
-}
+
 
 GroupAvatars.defaultProps = {
-    theme: defaultThemeColor,
     variantCircle: 'primary-1',
     variantName: 'primary-2',
     block: false,
@@ -139,5 +136,4 @@ GroupAvatars.defaultProps = {
     colorCircle: null,
     colorBorderCircle: "#FFFFFF",
     variantQty: 'primary-1'
-};
-
+};

package/components/GroupButtons/GroupButtonsPopup.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import { ButtonPopup } from './ButtonPopup';
@@ -8,7 +8,6 @@ import { ButtonPopup } from './ButtonPopup';
  * Primary UI component for user interaction
  */
 
-const buttonDisabledBg = '#BBC4CF';
 
 const StyledContainer = styled.div`
     display: flex;
@@ -19,11 +18,7 @@ const StyledContainer = styled.div`
     border-radius: 3px;
 `;
 
-const StyledTooltip = styled.div`
-background-color: indianred;
-visibility: hidden;
-pointer-events: none;
-`
+
 
 const StyledItem = styled.div`
     display: flex;
@@ -165,5 +160,4 @@ GroupButtonsPopup.defaultProps = {
     variantBgDisable: 'bgColor',
     variantTPtext: null,
     variantTPbg: null,
-};
-
+};

package/components/Images/Image.js

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useRef } from "react";
 import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from "react";
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 
 const ImageLayout = styled.img`
     //Set the styles from the default styles object
-    ${({ theme, type, size, customStyles }) => {
-        if (theme) {
+    ${({ 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 };
@@ -26,7 +26,7 @@ const ImageLayout = styled.img`
     }}
 `;
 
-export const Image = ({ theme, customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
+export const Image = ({ customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
 
     const [imageStatus, setImageStatus] = useState("loading");
 
@@ -58,7 +58,7 @@ export const Image = ({ theme, customStyles, type, size, alt, src, handleImageSt
     return (
         <ImageLayout
             {...props}
-            theme={theme}
+            inBuiltCss={defaultStyles}
             customStyles={customStyles}
             type={type}
             alt={alt}
@@ -70,10 +70,7 @@ export const Image = ({ theme, customStyles, type, size, alt, src, handleImageSt
 }
 
 Image.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
+
     /**
      *	Custom style object
      */
@@ -102,11 +99,9 @@ Image.propTypes = {
 }
 
 Image.defaultProps = {
-    theme: defaultStyles,
     customStyles: null,
     type: 'image',
     alt: 'image alternative',
     src: null,
     handleImageStatus: null
-}
-
+}

package/components/Inputs/CheckBoxInput.js

@@ -1,42 +1,65 @@
-import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
+import React, { useEffect } from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
-import { Label } from '../Label';
-// import tick from '../../assets/icons/checkmark.svg';
 import { Icon } from '../Icon';
+import { Label } from '../Label';
 
 const CheckBoxOuter = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultCheckBoxOuterStyle }) => {
-        return getDefaultStyles(theme, defaultCheckBoxOuterStyle);
+  ${({ inBuiltCss, defaultCheckBoxOuterStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultCheckBoxOuterStyle);
     }}
 
-  border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
-        checked ? checkedCheckBoxColor : defaultBorderColor};
+  border: 2px solid ${({
+        checkedCheckBoxColor,
+        defaultBorderColor,
+        checked,
+        theme,
+    }) => {
+        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
+        else if (checked && !checkedCheckBoxColor)
+            return theme.primary['primary-1'];
+        else if (!checked && defaultBorderColor) return defaultBorderColor;
+        else if (!checked && !defaultBorderColor) return theme.border;
+    }}    
+};
 
   // custom styles
   ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
 `;
 
+CheckBoxOuter.defaultProps = {
+    theme: defaultThemeColor,
+};
+
 const CheckBoxInner = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultCheckBoxInnerStyle }) => {
-        return getDefaultStyles(theme, defaultCheckBoxInnerStyle);
+  ${({ inBuiltCss, defaultCheckBoxInnerStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultCheckBoxInnerStyle);
     }}
 
   // background-image: url(${({ signCheck }) => signCheck});
-    background-color: ${({ checked, checkedCheckBoxColor }) =>
-        checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
+    background-color: ${({ checked, checkedCheckBoxColor, theme }) => {
+        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
+        else if (checked && !checkedCheckBoxColor)
+            return theme.primary['primary-1'];
+        else if (!checked) return theme.bgColor;
+    }};
   border: 2px solid
-    ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
-        checked ? checkedCheckBoxColor : defaultBorderColor};
+    ${({ checkedCheckBoxColor, defaultBorderColor, checked, theme }) => {
+        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
+        else if (checked && !checkedCheckBoxColor)
+            return theme.primary['primary-1'];
+        else if (!checked && defaultBorderColor) return defaultBorderColor;
+        else if (!checked && !defaultBorderColor) return theme.border;
+    }};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,24 +67,30 @@ const CheckBoxInner = styled.div`
   ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
 `;
 CheckBoxInner.defaultProps = {
-    themeColor: defaultThemeColor,
-    // signCheck: `${tick}`
+    theme: defaultThemeColor,
 };
 
 const OptionText = styled.span`
   //Set the styles from the default styles object
-  ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
+  ${({ inBuiltCss, type }) => {
+        return getDefaultStyles(inBuiltCss, type);
     }}
 
-  color: ${({ checked, defaultTextColor, checkedTextColor }) =>
-        checked ? checkedTextColor : defaultTextColor};
+  color: ${({ theme, checked, defaultTextColor, checkedTextColor }) => {
+        if (checked && checkedTextColor) return checkedTextColor;
+        else if (checked && !checkedTextColor) return theme.neutral['neutral-1'];
+        else if (!checked && defaultTextColor) return defaultTextColor;
+        else if (!checked && !defaultTextColor) return theme.neutral['neutral-2'];
+    }};
 
   margin-right: ${({ inline }) => (inline ? '30px' : '0px')};
 
   // custom styles
   ${({ optionTextStyle }) => optionTextStyle}
 `;
+OptionText.defaultProps = {
+    theme: defaultThemeColor,
+};
 
 const WrapperDiv = styled.label`
   width: fit-content;
@@ -70,6 +99,9 @@ const WrapperDiv = styled.label`
   align-items: center;
   display: flex;
   gap: 10px;
+
+  // custom styles
+  ${({ wrapperStyles }) => wrapperStyles}
 `;
 
 const ParentDiv = styled.div`
@@ -90,11 +122,14 @@ export const CheckBoxInput = ({
     label,
     options,
     setOptions,
+    wrapperStyles,
     inline,
     wrapperStyle,
     isRequired,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     useEffect(() => {
         filterCheckedOptions(options);
     }, []);
@@ -122,10 +157,8 @@ export const CheckBoxInput = ({
 
     return (
         <div style={returnedTarget} {...props}>
-
             <div style={{ display: 'flex' }}>
                 <Label
-                    themeColor={defaultThemeColor}
                     customStyles={labelStyle}
                     type={'check-label'}
                     text={label}
@@ -136,7 +169,7 @@ export const CheckBoxInput = ({
                     <div
                         style={{
                             marginLeft: '4px',
-                            color: `${defaultThemeColor.variant['error']}`,
+                            color: `${activeTheme.variant['error']}`,
                         }}
                     >
                         *
@@ -156,11 +189,13 @@ export const CheckBoxInput = ({
                             onClick={() => {
                                 checkBox(item, i);
                             }}
+                            wrapperStyles={wrapperStyles}
                             {...props}
                         >
                             {item.checked ? (
                                 <CheckBoxInner
-                                    theme={defaultStyles}
+                                    theme={activeTheme}
+                                    inBuiltCss={defaultStyles}
                                     defaultCheckBoxInnerStyle={'checkBox-inner'}
                                     checkBoxInnerStyle={{
                                         ...checkBoxInnerStyle,
@@ -176,7 +211,7 @@ export const CheckBoxInput = ({
                                 </CheckBoxInner>
                             ) : (
                                 <CheckBoxOuter
-                                    theme={defaultStyles}
+                                    inBuiltCss={defaultStyles}
                                     defaultCheckBoxOuterStyle={'checkBox-outer'}
                                     checkBoxOuterStyle={{
                                         ...checkBoxOuterStyle,
@@ -184,10 +219,12 @@ export const CheckBoxInput = ({
                                         borderColor: item?.disabledColor,
                                     }}
                                     defaultBorderColor={defaultBorderColor}
+                                    theme={activeTheme}
                                     {...props}
                                 />
                             )}
                             <OptionText
+                                theme={activeTheme}
                                 inline={inline}
                                 optionTextStyle={{
                                     ...optionTextStyle,
@@ -266,9 +303,13 @@ CheckBoxInput.propTypes = {
      */
     getCheckedArr: PropTypes.func,
     /**
-   *	mandatory field or not
-   */
+     *	mandatory field or not
+     */
     isRequired: PropTypes.bool,
+    /**
+     *	Wrapper styles
+     */
+    wrapperStyles: PropTypes.object,
 };
 
 CheckBoxInput.defaultProps = {
@@ -280,9 +321,6 @@ CheckBoxInput.defaultProps = {
     labelStyle: {},
     checkBoxOuterStyle: {},
     checkBoxInnerStyle: {},
-    defaultTextColor: `${defaultThemeColor.neutral['neutral-2']}`,
-    checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
-    defaultBorderColor: '#D4D7E3',
-    checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
-    isRequired: true
+    isRequired: true,
+    wrapperStyles: {},
 };

package/components/Inputs/DateSelect.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
-import DatePicker from 'react-datepicker';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React, { useEffect, useRef, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 import { Icon } from '../Icon';
@@ -26,7 +26,7 @@ const Wrapper = styled.div`
   }
 
   .react-datepicker__input-container {
-    border: 1px solid ${defaultThemeColor.border};
+    border: 1px solid ${({ theme }) => theme.border};  
     border-radius: 4px;
     padding: 6px 12px;
     display: flex;
@@ -232,8 +232,8 @@ const ListItem = styled('li')`
   cursor: pointer;
 `;
 
-export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
-  const theme = defaultThemeColor;
+export const DateSelect = ({ startDate, setStartDate, disabled, theme, ...props }) => {
+  const activeTheme = useTheme() || defaultThemeColor
 
   const months = [
     'January',
@@ -299,7 +299,7 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
   }, []);
 
   return (
-    <Wrapper disabled={disabled} {...props}>
+    <Wrapper disabled={disabled} theme={theme} {...props}>
       <DatePicker
         selected={startDate}
         dateFormat='dd/MM/yyyy'
@@ -324,7 +324,7 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                       onMouseEnter={() => setHover(true)}
                       onMouseLeave={() => setHover(false)}
                       style={{
-                        color: `${hover ? theme.variant['primary-1'] : theme.textColor
+                        color: `${hover ? activeTheme.variant['primary-1'] : activeTheme.textColor
                           }`,
                       }}
                     >
@@ -333,14 +333,14 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                     <IconDiv>
                       <Icon
                         icon='triangle-down'
-                        color={hover ? 'blue' : 'black'}
+                        color={hover ? activeTheme.variant['primary-1'] : activeTheme.textColor}
                         size={7}
                       />
                     </IconDiv>
                   </DropDownHeader>
                   {isOpen && (
                     <DropDownListContainer>
-                      <DropDownList onMouseEnter={() => setHover(true)}>
+                      <DropDownList theme={theme} onMouseEnter={() => setHover(true)}>
                         {months.map((option, index) => (
                           <ListItem
                             selectedMonth={selectedMonth}
@@ -355,8 +355,8 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                             <span
                               style={{
                                 color: `${selectedMonth === option
-                                  ? theme.variant['primary-1']
-                                  : theme.textColor
+                                  ? activeTheme.variant['primary-1']
+                                  : activeTheme.textColor
                                   }`,
                               }}
                             >
@@ -381,8 +381,8 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                       onMouseLeave={() => setHoverYear(false)}
                       style={{
                         color: `${hoverYear
-                          ? theme.variant['primary-1']
-                          : theme.textColor
+                          ? activeTheme.variant['primary-1']
+                          : activeTheme.textColor
                           }`,
                       }}
                     >
@@ -391,7 +391,7 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                     <IconDiv>
                       <Icon
                         icon='triangle-down'
-                        color={hoverYear ? 'blue' : 'black'}
+                        color={hoverYear ? activeTheme.variant['primary-1'] : activeTheme.textColor}
                         size={7}
                       />
                     </IconDiv>
@@ -412,8 +412,8 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
                             <span
                               style={{
                                 color: `${selectedYear === option
-                                  ? theme.variant['primary-1']
-                                  : theme.textColor
+                                  ? activeTheme.variant['primary-1']
+                                  : activeTheme.textColor
                                   }`,
                               }}
                             >
@@ -447,9 +447,14 @@ DateSelect.propTypes = {
    * Disable property of DateSelect
    */
   disabled: PropTypes.bool,
+  /**
+   * theme object
+   */
+  theme: PropTypes.object,
 };
 
 DateSelect.defaultProps = {
+  theme: defaultThemeColor,
   startDate: '',
   setStartDate: () => { },
   disabled: false,