groundfloor-react-ui 1.0.19 → 1.0.20

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/Inputs/CheckBoxInput.js

@@ -4,9 +4,8 @@ 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;
@@ -16,13 +15,28 @@ const CheckBoxOuter = styled.div`
         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;
 
@@ -32,11 +46,20 @@ const CheckBoxInner = styled.div`
     }}
 
   // background-image: url(${({ signCheck }) => signCheck});
-    background-color: ${({ checked, checkedCheckBoxColor, theme }) =>
-        checked ? checkedCheckBoxColor : theme.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,8 +67,7 @@ const CheckBoxInner = styled.div`
   ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
 `;
 CheckBoxInner.defaultProps = {
-    themeColor: defaultThemeColor,
-    // signCheck: `${tick}`
+    theme: defaultThemeColor,
 };
 
 const OptionText = styled.span`
@@ -54,14 +76,21 @@ const OptionText = styled.span`
         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;
@@ -99,9 +128,7 @@ export const CheckBoxInput = ({
     isRequired,
     ...props
 }) => {
-
-    const activeTheme = useTheme() || defaultThemeColor
-
+    const activeTheme = useTheme() || defaultThemeColor;
 
     useEffect(() => {
         filterCheckedOptions(options);
@@ -130,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}
@@ -194,10 +219,12 @@ export const CheckBoxInput = ({
                                         borderColor: item?.disabledColor,
                                     }}
                                     defaultBorderColor={defaultBorderColor}
+                                    theme={activeTheme}
                                     {...props}
                                 />
                             )}
                             <OptionText
+                                theme={activeTheme}
                                 inline={inline}
                                 optionTextStyle={{
                                     ...optionTextStyle,
@@ -276,12 +303,12 @@ CheckBoxInput.propTypes = {
      */
     getCheckedArr: PropTypes.func,
     /**
-   *	mandatory field or not
-   */
+     *	mandatory field or not
+     */
     isRequired: PropTypes.bool,
     /**
-   *	Wrapper styles
-   */
+     *	Wrapper styles
+     */
     wrapperStyles: PropTypes.object,
 };
 
@@ -294,11 +321,6 @@ CheckBoxInput.defaultProps = {
     labelStyle: {},
     checkBoxOuterStyle: {},
     checkBoxInnerStyle: {},
-    defaultTextColor: `${defaultThemeColor.neutral['neutral-2']}`,
-    checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
-    defaultBorderColor: `${defaultThemeColor.border
-        }`,
-    checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']} `,
     isRequired: true,
     wrapperStyles: {},
 };

package/components/Inputs/DropdownSelect.js

@@ -171,25 +171,27 @@ const IconDiv = styled.div`
 `;
 
 export const DropdownSelect = ({
-  customWrapperStyles,
-  customLabelStyles,
-  labelStyle,
   label,
-  isRequired,
+  labelStyle,
   optionArr,
   selectedValue,
   setSelectedValue,
   placeHolder,
-  dropdownType,
-  isDisabled,
-  isValid,
-  clearSelected,
   isClearable,
-  isLoading,
+  isValid,
   height,
   fontSize,
   loadOptions,
   onInputChange,
+  clearSelected,
+  customWrapperStyles,
+  customLabelStyles,
+  isRequired,
+  dropdownType,
+  isDisabled,
+
+  isLoading,
+
   ...props
 }) => {
 
@@ -198,7 +200,7 @@ export const DropdownSelect = ({
   const DropdownIndicator = (p) => {
     return (
       <components.DropdownIndicator {...p}>
-        {true ? (
+        {isClearable ? (
           <IconDiv
             onClick={() => {
               clearSelected();
@@ -509,6 +511,43 @@ DropdownSelect.propTypes = {
    *   onchange function
    */
   onInputChange: PropTypes.func,
+  /**
+   *   wrapper styles
+   */
+  customWrapperStyles: PropTypes.object,
+  /**
+ *   label styles
+ */
+  customLabelStyles: PropTypes.object,
+  /**
+*   Mandatory or not
+*/
+  isRequired: PropTypes.bool,
+  /**
+*   default dropdown type
+*/
+  dropdownType: PropTypes.bool,
+  /**
+*   disabled or not
+*/
+  isDisabled: PropTypes.bool,
+  /**
+*   show loader or not
+*/
+  isLoading: PropTypes.bool,
+  /**
+*   valid or not
+*/
+  isValid: PropTypes.bool,
+  /**
+ *	height of the component
+ */
+  height: PropTypes.number,
+  /**
+*   clearable or not
+*/
+  isClearable: PropTypes.bool,
+
 };
 
 DropdownSelect.defaultProps = {
@@ -525,4 +564,10 @@ DropdownSelect.defaultProps = {
   loadOptions: () => { },
   onInputChange: () => { },
   clearSelected: () => { },
+  customWrapperStyles: () => { },
+  customLabelStyles: () => { },
+  isRequired: false,
+  dropdownType: 'singleSelect',
+  isDisabled: false,
+  isLoading: false
 };