groundfloor-react-ui 1.0.18 → 1.0.19

package/components/Button/PrimaryButton.js

@@ -1,9 +1,9 @@
-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 { Loader } from '../Loaders';
 import getDefaultStyles, { hexToRGB } from '../constants/utils';
+import { Loader } from '../Loaders';
 
 /**
  * Primary UI component for user interaction
@@ -26,23 +26,22 @@ const sizes = {
 
 const buttonDisabledBg = ({ theme, variant }) =>
     hexToRGB(theme.variant[variant], 0.6);
-const fontColor = defaultThemeColor.bgColor;
 
 const StyledButton = styled.button`
   background: ${({ theme, variant }) => theme.variant[variant]};
-  color: ${fontColor};
+  color: ${({ theme }) => theme.bgColor};
   padding: ${({ size }) => sizes[size].padding};
   border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
   border-radius: 5px;
   font-size: ${({ size }) => sizes[size].fontSize};
   display: flex;
-  outline: none;
   align-items: center;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;
   line-height: 18px;
+  outline: none;
   &:disabled {
-    color: ${fontColor};
+    color: ${({ theme }) => theme.bgColor};
     background: ${buttonDisabledBg};
     border: 1px solid ${buttonDisabledBg};
     cursor: not-allowed;
@@ -57,6 +56,7 @@ const StyledButton = styled.button`
   ${({ btnStyle }) => btnStyle}
 `;
 
+
 export const PrimaryButton = ({
     btnStyle,
     block,
@@ -66,8 +66,11 @@ export const PrimaryButton = ({
     disabled,
     isLoading,
     type,
+    theme,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor
+
     return (
         <StyledButton
             block={block}
@@ -76,6 +79,7 @@ export const PrimaryButton = ({
             type={type}
             style={style}
             size={size}
+            theme={theme}
             disabled={disabled}
             btnStyle={btnStyle}
             {...props}
@@ -89,7 +93,10 @@ export const PrimaryButton = ({
                         alignItems: 'center',
                     }}
                 >
-                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                    <Loader
+                        customStyles={{ 'background-color': activeTheme.bgColor }}
+                        size={16}
+                    />
                 </div>
             )}
             {props.children}
@@ -131,7 +138,7 @@ PrimaryButton.propTypes = {
      */
     type: PropTypes.string,
     /**
-     * custome style of button
+     * custom style of button
      */
     btnStyle: PropTypes.object,
 };

package/components/Button/SecondaryButton.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 getDefaultStyles from '../constants/utils';
@@ -24,8 +24,6 @@ const sizes = {
     },
 };
 
-const buttonDisabledBg = '#BBC4CF';
-const fontColor = defaultThemeColor.primary['primary-1'];
 
 const StyledButton = styled.button`
   color: ${({ theme, variant }) => theme.variant[variant]};
@@ -35,14 +33,14 @@ const StyledButton = styled.button`
   font-size: ${({ size }) => sizes[size].fontSize};
   border-radius: 5px;
   display: flex;
-  outline: none;
   align-items: center;
+  outline: none;
   width: ${({ block }) => (block ? '100%' : 'auto')};
   cursor: pointer;
   line-height: 18px;
   &:disabled {
     color: #929eac;
-    border: 1px solid ${buttonDisabledBg};
+    border: 1px solid ${({ theme }) => theme.neutral['neutral-3']};
     cursor: not-allowed;
   }
 
@@ -63,10 +61,10 @@ export const SecondaryButton = ({
     variant,
     disabled,
     type,
+    theme,
     ...props
 }) => {
-    const theme = useTheme() || defaultThemeColor;
-
+    const activeTheme = useTheme() || defaultThemeColor
     return (
         <StyledButton
             block={block}
@@ -78,6 +76,7 @@ export const SecondaryButton = ({
             type={type}
             btnStyle={btnStyle}
             isLoading={isLoading}
+            theme={theme}
             {...props}
         >
             {isLoading && (
@@ -89,8 +88,11 @@ export const SecondaryButton = ({
                         alignItems: 'center',
                     }}
                 >
-                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
-                </div>
+                    <Loader
+                        theme={theme}
+                        customStyles={{ 'background-color': activeTheme.variant[variant] }}
+                        size={16}
+                    />        </div>
             )}
             {props.children}{' '}
         </StyledButton>

package/components/Inputs/CheckBoxInput.js

@@ -1,8 +1,8 @@
-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';
@@ -12,8 +12,8 @@ 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 }) =>
@@ -27,13 +27,13 @@ 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 }) =>
+        checked ? checkedCheckBoxColor : theme.bgColor};
   border: 2px solid
     ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
         checked ? checkedCheckBoxColor : defaultBorderColor};
@@ -50,8 +50,8 @@ CheckBoxInner.defaultProps = {
 
 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 }) =>
@@ -70,6 +70,9 @@ const WrapperDiv = styled.label`
   align-items: center;
   display: flex;
   gap: 10px;
+
+  // custom styles
+  ${({ wrapperStyles }) => wrapperStyles}
 `;
 
 const ParentDiv = styled.div`
@@ -90,11 +93,16 @@ export const CheckBoxInput = ({
     label,
     options,
     setOptions,
+    wrapperStyles,
     inline,
     wrapperStyle,
     isRequired,
     ...props
 }) => {
+
+    const activeTheme = useTheme() || defaultThemeColor
+
+
     useEffect(() => {
         filterCheckedOptions(options);
     }, []);
@@ -125,7 +133,7 @@ export const CheckBoxInput = ({
 
             <div style={{ display: 'flex' }}>
                 <Label
-                    themeColor={defaultThemeColor}
+                    // themeColor={defaultThemeColor}
                     customStyles={labelStyle}
                     type={'check-label'}
                     text={label}
@@ -136,7 +144,7 @@ export const CheckBoxInput = ({
                     <div
                         style={{
                             marginLeft: '4px',
-                            color: `${defaultThemeColor.variant['error']}`,
+                            color: `${activeTheme.variant['error']}`,
                         }}
                     >
                         *
@@ -156,11 +164,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 +186,7 @@ export const CheckBoxInput = ({
                                 </CheckBoxInner>
                             ) : (
                                 <CheckBoxOuter
-                                    theme={defaultStyles}
+                                    inBuiltCss={defaultStyles}
                                     defaultCheckBoxOuterStyle={'checkBox-outer'}
                                     checkBoxOuterStyle={{
                                         ...checkBoxOuterStyle,
@@ -269,6 +279,10 @@ CheckBoxInput.propTypes = {
    *	mandatory field or not
    */
     isRequired: PropTypes.bool,
+    /**
+   *	Wrapper styles
+   */
+    wrapperStyles: PropTypes.object,
 };
 
 CheckBoxInput.defaultProps = {
@@ -282,7 +296,9 @@ CheckBoxInput.defaultProps = {
     checkBoxInnerStyle: {},
     defaultTextColor: `${defaultThemeColor.neutral['neutral-2']}`,
     checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
-    defaultBorderColor: '#D4D7E3',
-    checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
-    isRequired: true
+    defaultBorderColor: `${defaultThemeColor.border
+        }`,
+    checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']} `,
+    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,

package/components/Inputs/DropdownSelect.js

@@ -1,13 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
 import Select, { components } from 'react-select';
-import defaultThemeColor from '../constants/defaultThemeColor';
+import AsyncSelect from 'react-select/async';
+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 { Icon } from '../Icon';
-import AsyncSelect from 'react-select/async';
+import { Label } from '../Label';
 
 const Wrapper = styled.div`
 
@@ -57,7 +57,7 @@ const Wrapper = styled.div`
 
         .master-dropdown__option,
         .new-select__option {
-            color: ${defaultThemeColor.textColor};
+            color:  ${({ theme }) => theme.textColor}; 
             padding-top: 3px;
             padding-bottom: 3px;
             margin: 8px 0;
@@ -71,7 +71,7 @@ const Wrapper = styled.div`
         .master-dropdown__option:hover,
         .new-select__option--is-focused,
         .new-select__option:hover {
-            background-color: ${defaultThemeColor.neutral['neutral-5']};
+            background-color: ${({ theme }) => theme.neutral['neutral-5']}; 
             cursor: pointer;
         }
        
@@ -115,12 +115,12 @@ const Wrapper = styled.div`
        
 
         .text-main-alt {
-            color: ${defaultThemeColor.textColor} !important;
+            color:${({ theme }) => theme.textColor} !important;
             margin-right: 2px;
         }
         .text-more-alt{
             font-size:12px;
-            color:#6B747F
+            color: ${({ theme }) => theme.neutral['neutral-2']};
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -143,16 +143,23 @@ const Wrapper = styled.div`
             margin:0px;
             padding:0px;
         }
-    
+        .new-select__control:hover,
+        .new-select__control--is-focused {
+          border: 1px solid ${({ theme }) => theme.primary['primary-1']};
+        }
 `;
 
+Wrapper.defaultProps = {
+  theme: defaultThemeColor,
+};
+
 const LabelWrapper = styled.div`
   // Default style
   display: flex;
 
   //Set the styles from the default styles object
-  ${({ theme, labelWrapperStyle }) => {
-    return getDefaultStyles(theme, labelWrapperStyle);
+  ${({ inBuiltCss, labelWrapperStyle }) => {
+    return getDefaultStyles(inBuiltCss, labelWrapperStyle);
   }}
   // custom styles
     ${({ customLabelStyles }) => customLabelStyles}
@@ -185,6 +192,9 @@ export const DropdownSelect = ({
   onInputChange,
   ...props
 }) => {
+
+  const activeTheme = useTheme() || defaultThemeColor
+
   const DropdownIndicator = (p) => {
     return (
       <components.DropdownIndicator {...p}>
@@ -218,7 +228,7 @@ export const DropdownSelect = ({
       <div
         style={{
           ...checkboxStyle,
-          backgroundColor: p?.data?.color ?? '#2E56F4',
+          backgroundColor: p?.data?.color ?? activeTheme.primary['primary-1'],
         }}
       >
         <Icon icon='check-icon' color='white' />
@@ -265,8 +275,10 @@ export const DropdownSelect = ({
     control: (base, state) => ({
       ...base,
       border: !isValid
-        ? '1px solid ' + defaultThemeColor.ui['error']
-        : '1px solid ' + defaultThemeColor.border,
+        ? '1px solid ' + activeTheme.ui['error']
+        : '1px solid ' + activeTheme.border,
+      // border: state.isFocused ? '4px solid red' : '4px solid green',
+
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -319,7 +331,7 @@ export const DropdownSelect = ({
     option: (provided, state) => ({
       ...provided,
       backgroundColor:
-        state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
+        state.isSelected || state.isFocused ? activeTheme.neutral['neutral-5'] : activeTheme.bgColor,
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
@@ -327,15 +339,14 @@ export const DropdownSelect = ({
     ...props.styles,
   };
   return (
-    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize}>
+    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize} theme={activeTheme}>
       {label && (
         <LabelWrapper
-          theme={defaultStyles}
+          inBuiltCss={defaultStyles}
           labelWrapperStyle={'selectComp-label-wrapper'}
           style={customLabelStyles}
         >
           <Label
-            themeColor={defaultThemeColor}
             customStyles={labelStyle}
             type={'label-text'}
             text={label}
@@ -345,7 +356,7 @@ export const DropdownSelect = ({
             <div
               style={{
                 marginLeft: '4px',
-                color: `${defaultThemeColor.ui['error']}`,
+                color: `${activeTheme.ui['error']}`,
               }}
             >
               *