groundfloor-react-ui 1.2.7 → 1.2.9

package/components/Inputs/CheckBoxInput.js

@@ -71,6 +71,8 @@ CheckBoxInner.defaultProps = {
 };
 
 const OptionText = styled.span`
+    word-break: break-all;
+
   //Set the styles from the default styles object
   ${({ inBuiltCss, type }) => {
         return getDefaultStyles(inBuiltCss, type);
@@ -83,7 +85,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 +98,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 +295,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 +323,8 @@ CheckBoxInput.propTypes = {
      *	Wrapper styles
      */
     wrapperStyles: PropTypes.object,
+
+
 };
 
 CheckBoxInput.defaultProps = {

package/components/Inputs/DropdownSelect.js

@@ -30,6 +30,7 @@ const Wrapper = styled.div`
             padding-top:0px;
         }
 
+        
         .master-dropdown__single-value {
             .input-label {
                 max-width: 250px;
@@ -123,7 +124,7 @@ const Wrapper = styled.div`
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;    
-          
+          width: 57%;
       }
         .text-more-alt{
             font-size:12px;
@@ -156,6 +157,11 @@ const Wrapper = styled.div`
         .new-select__control--is-focused {
           border: 1px solid ${({ theme }) => theme.primary['primary-1']};
         }
+
+        .css-ry76bm-singleValue {
+          margin-right: 5px;
+          max-width: 80%;
+        }
 `;
 
 Wrapper.defaultProps = {
@@ -179,6 +185,23 @@ const IconDiv = styled.div`
   cursor: pointer;
 `;
 
+const LeftIcon = ({ getValue, children, ...props }) => {
+  const len = getValue().length;
+
+  return (
+    <components.ValueContainer {...props}>
+      {/* {leftIcon === '' ? null : (
+
+        <div style={{ marginRight: '6px', marginTop: '-6px' }}><Icon icon={leftIcon} color={leftIconColor} size={leftIconSize} /></div>
+
+      )} */}
+
+      {children}
+      {len > 1 && <span className={`text-more-alt`}>&amp; {len - 1} more</span>}
+    </components.ValueContainer>
+  );
+};
+
 export const DropdownSelect = ({
   label,
   labelStyle,
@@ -198,7 +221,6 @@ export const DropdownSelect = ({
   isRequired,
   dropdownType,
   isDisabled,
-
   isLoading,
   id,
   iconName,
@@ -240,32 +262,6 @@ export const DropdownSelect = ({
     );
   };
 
-  const LeftIcon = ({ getValue, children, ...props }) => {
-    const len = getValue().length;
-
-    return (
-      <components.ValueContainer {...props}>
-        {leftIcon === '' ? null : (
-          <IconDiv
-            style={{
-              paddingTop: '10px',
-              paddingRight: '8px',
-              marginLeft: '0',
-              marginTop: '-16px',
-            }}
-          >
-            <Icon icon={leftIcon} color={leftIconColor} size={leftIconSize} />
-          </IconDiv>
-        )}
-
-        {children}
-        {len > 1 && <span className={`text-more-alt`}>&amp; {len - 1} more</span>}
-      </components.ValueContainer>
-    );
-  };
-
-
-
   const Option = (p) => {
     const checkboxStyle = {
       width: '15px',
@@ -311,7 +307,9 @@ export const DropdownSelect = ({
 
   const MultiValue = ({ index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
-    return !index && <span className='text-main-alt-value'>{firstSelected}</span>;
+    return (
+      !index && <span className='text-main-alt-value'>{firstSelected}</span>
+    );
   };
 
   const stylesComp = {
@@ -469,6 +467,7 @@ export const DropdownSelect = ({
             DropdownIndicator,
             ValueContainer: LeftIcon,
             // ValueContainer,
+
             IndicatorSeparator: () => null,
             ClearIndicator,
           }}
@@ -654,8 +653,8 @@ DropdownSelect.propTypes = {
    */
   leftIconSize: PropTypes.number,
   /**
-  *   to show or hide indicator
-  */
+   *   to show or hide indicator
+   */
   showIndicator: PropTypes.bool,
 };
 

package/components/Inputs/NumericInput.js

@@ -67,6 +67,8 @@ const Label = styled.label`
   margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
   padding-bottom: 0px;
   color: ${({ theme }) => theme.variant['neutral-2']};
+
+  ${({ labelStyle }) => labelStyle}
 `;
 
 Label.defaultProps = {
@@ -98,6 +100,7 @@ export const NumericInput = ({
   onChange,
   theme,
   id,
+  labelStyle,
   ...props
 }) => {
   const handleChange = (e) => {
@@ -108,9 +111,12 @@ export const NumericInput = ({
     }
   };
 
+  console.log(labelStyle);
+
   return (
     <Form {...props}>
-      {label.length > 0 && <Label {...props}>{label}</Label>}
+      {label.length > 0 && <Label labelStyle={labelStyle}
+      >{label}</Label>}
       <div>
         <TextBox {...props}>
           <div className='input-icon'>{iconBefore}</div>
@@ -122,7 +128,7 @@ export const NumericInput = ({
             type='number'
             id={id}
           />
-          <div className='input-icon'>{iconAfter}</div>
+          <div className='input-icon' style={{ position: 'absolute', right: '7px' }}>{iconAfter}</div>
         </TextBox>
       </div>
     </Form>
@@ -151,9 +157,13 @@ NumericInput.propTypes = {
    */
   inputStyle: PropTypes.object,
   /**
-  * id of the number input
-  */
+   * id of the number input
+   */
   id: PropTypes.string,
+  /**
+   * custom style of label element
+   */
+  labelStyle: PropTypes.object,
 };
 
 NumericInput.defaultProps = {
@@ -162,5 +172,6 @@ NumericInput.defaultProps = {
   labelInline: false,
   inputStyle: {},
   inputValue: null,
-  id: ''
+  id: '',
+  labelStyle: {},
 };

package/components/Inputs/PasswordInput.js

@@ -44,7 +44,7 @@ TextWrapper.defaultProps = {
 
 const Input = styled.input`
   width: 85%;
-  -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
+  -webkit-text-security:  ${({ showEye }) => (showEye ? 'none' : 'disc')};
 
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultInputStyle }) => {
@@ -57,7 +57,6 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${({ theme }) => theme.variant['neutral-3']};
   }
-
 `;
 Input.defaultProps = {
   theme: defaultThemeColor,
@@ -71,13 +70,12 @@ const inline = css`
 const Form = styled.div`
   ${({ labelInline }) => (labelInline ? inline : null)}
   .err-text {
-    color: ${({ theme }) => theme.variant['error']};
+    color: ${({ errMsgColor }) => errMsgColor};
     margin-top: 5px;
     font-size: 10px;
   }
 `;
 
-
 Form.defaultProps = {
   theme: defaultThemeColor,
 };
@@ -96,12 +94,25 @@ export const PasswordInput = ({
   rulesStyle,
   id,
   showHideIcon,
+  errMsgColor,
   ...props
 }) => {
   const [showEye, setShowEye] = useState(false);
 
   return (
-    <Form labelInline={labelInline} inBuiltCss={defaultStyles} {...props}
+    <Form
+      onPaste={(e) => {
+        e.preventDefault();
+        return false;
+      }}
+      onCopy={(e) => {
+        e.preventDefault();
+        return false;
+      }}
+      labelInline={labelInline}
+      inBuiltCss={defaultStyles}
+      errMsgColor={errMsgColor}
+      {...props}
     >
       <div style={{ display: 'flex' }}>
         <Label
@@ -135,34 +146,48 @@ export const PasswordInput = ({
           alignItems: 'start',
         }}
       >
-        <TextWrapper
-          required={required}
-          theme={theme}
-          textBoxStyle={textBoxStyle}
-          isValid={isValid}
-          defaultWrapperStyle={'textbox-wrapper'}
-          inBuiltCss={defaultStyles}
-          {...props}
-        >
-          <Input
-            inputStyle={inputStyle}
-            type={'text'}
-            id={id}
-            showEye={showEye}
+        <div style={{ width: '100%' }}>
+          <TextWrapper
+            required={required}
             theme={theme}
-            defaultInputStyle={'input-wrapper'}
+            textBoxStyle={textBoxStyle}
+            isValid={isValid}
+            defaultWrapperStyle={'textbox-wrapper'}
             inBuiltCss={defaultStyles}
             {...props}
-          />
-          {showHideIcon === true ?
-            <div className='input-icon' onClick={() => setShowEye(!showEye)}>
-              {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-            </div> : ''
-          }
-        </TextWrapper>
-        {passwordRules ? <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div> : ''}
+          >
+            <Input
+              inputStyle={inputStyle}
+              type={'text'}
+              id={id}
+              showEye={showEye}
+              theme={theme}
+              defaultInputStyle={'input-wrapper'}
+              inBuiltCss={defaultStyles}
+              {...props}
+            />
+            {showHideIcon === true ? (
+              <div
+                className='input-icon'
+                onClick={() => setShowEye(!showEye)}
+                style={{ position: 'absolute', right: '7px' }}
+              >
+                {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+              </div>
+            ) : (
+              ''
+            )}
+          </TextWrapper>
+          {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
+        </div>
+        {passwordRules ? (
+          <div style={{ ...rulesStyle, marginLeft: '5px' }}>
+            {passwordRules}
+          </div>
+        ) : (
+          ''
+        )}
       </div>
-      {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
     </Form>
   );
 };
@@ -237,6 +262,6 @@ PasswordInput.defaultProps = {
   passwordRules: '',
   rulesStyle: {},
   id: '',
-  showHideIcon: true
-};
-
+  showHideIcon: true,
+  errMsgColor: defaultThemeColor.variant['error'],
+};

package/components/Inputs/TextInput.js

@@ -33,7 +33,8 @@ const TextWrapper = styled.div`
   // custom styles
   ${({ textBoxStyle }) => textBoxStyle}
 
-  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
+  background-color:  ${({ isDisabled, theme }) =>
+		isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
 `;
 
 const Input = styled.input`
@@ -49,7 +50,8 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${defaultThemeColor.variant['neutral-3']};
   }
-  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
+  background-color: ${({ isDisabled, theme }) =>
+		isDisabled ? theme.variant['neutral-5'] : theme.bgColor};
 `;
 
 const inline = css`
@@ -61,7 +63,7 @@ const inline = css`
 const Form = styled.div`
   ${({ labelInline }) => (labelInline ? inline : null)}
   .err-text {
-    color: ${({ theme }) => theme.variant['error']};
+    color: ${({ errMsgColor }) => errMsgColor};
     margin-top: 5px;
     font-size: 10px;
   }
@@ -86,11 +88,16 @@ export const TextInput = ({
 	theme,
 	isDisabled,
 	id,
+	errMsgColor,
 	...props
 }) => {
-
 	return (
-		<Form labelInline={labelInline} {...props} theme={theme}>
+		<Form
+			labelInline={labelInline}
+			{...props}
+			theme={theme}
+			errMsgColor={errMsgColor}
+		>
 			<div style={{ display: 'flex' }}>
 				<Label
 					customStyles={labelStyle}
@@ -137,7 +144,12 @@ export const TextInput = ({
 					disabled={isDisabled}
 					{...props}
 				/>
-				<div className='input-icon'>{iconAfter}</div>
+				<div
+					className='input-icon'
+					style={{ position: 'absolute', right: '7px' }}
+				>
+					{iconAfter}
+				</div>
 			</TextWrapper>
 			{errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
 		</Form>
@@ -190,18 +202,21 @@ TextInput.propTypes = {
 	 */
 	type: PropTypes.string,
 	/**
- *	input field disabled or not
- */
+	 *	input field disabled or not
+	 */
 	isDisabled: PropTypes.bool,
 	/**
- *	receives theme object
- */
+	 *	receives theme object
+	 */
 	theme: PropTypes.object,
 	/**
 	 *	id of the text input
 	 */
 	id: PropTypes.string,
-
+	/**
+	 * To customize the color of error message
+	 */
+	errMsgColor: PropTypes.string,
 };
 
 Input.defaultProps = {
@@ -231,5 +246,6 @@ TextInput.defaultProps = {
 	inputStyle: {},
 	type: 'text',
 	isDisabled: false,
-	id: ''
+	id: '',
+	errMsgColor: defaultThemeColor.variant['error'],
 };

package/components/Inputs/ToggleSwitch.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -11,6 +10,11 @@ const CheckBoxWrapper = styled.div`
     }}
 `;
 const CheckBoxLabel = styled.label`
+
+  left:  ${({ labelPosition }) => labelPosition === 'right' ? 'initial' : '50px'};
+  margin-right:  ${({ labelPosition }) => labelPosition === 'left' ? '30px' : '0px'};
+
+
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultCheckBoxLabelStyle }) => {
         return getDefaultStyles(inBuiltCss, defaultCheckBoxLabelStyle);
@@ -47,13 +51,21 @@ const CheckBox = styled.input.attrs({ type: 'checkbox' })`
   width: 45px;
   height: 22px;
   cursor: pointer;
+  position:  ${({ labelPosition }) => labelPosition === 'right' ? 'initial' : 'absolute'};
+  left:  ${({ labelPosition }) => labelPosition === 'right' ? 'initial' : '50px'};
+
+
 `;
 
 const OptionText = styled.span`
+
+ margin-right:  ${({ labelPosition }) => labelPosition === 'right' ? '30px' : '30px'};
+z-index:10000;
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultOptionTextStyle }) => {
         return getDefaultStyles(inBuiltCss, defaultOptionTextStyle);
-    }}
+    }
+    }
 
   // custom styles
     ${({ optionStyle }) => optionStyle}
@@ -70,6 +82,7 @@ export const ToggleSwitch = ({
     trueLabel,
     falseLabel,
     optionStyle,
+    labelPosition,
     id,
     ...props
 }) => {
@@ -81,9 +94,20 @@ export const ToggleSwitch = ({
             defaultCheckBoxWrapperStyle={'toggle-switch-wrapper'}
             {...props}
         >
+            {labelPosition === 'left' && <OptionText
+                optionStyle={optionStyle}
+                inBuiltCss={defaultStyles}
+                labelPosition={labelPosition}
+                defaultOptionTextStyle={'toggle-switch-option-text'}
+                {...props}
+            >
+                {checked ? trueLabel : falseLabel}
+            </OptionText>}
+
             <CheckBox
                 {...props}
-                id='checkbox'
+                labelPosition={labelPosition}
+                id={id}
                 inBuiltCss={defaultStyles}
                 defaultCheckBoxStyle={'toggle-switch-checkbox'}
                 onClick={() => {
@@ -91,9 +115,11 @@ export const ToggleSwitch = ({
                 }}
                 isChecked={checked}
             />
+
             <CheckBoxLabel
                 {...props}
-                htmlFor='checkbox'
+                labelPosition={labelPosition}
+                htmlFor={id}
                 customToggleBoxStyle={customToggleBoxStyle}
                 customSwitchStyle={customSwitchStyle}
                 disabledColor={disabledColor}
@@ -104,14 +130,15 @@ export const ToggleSwitch = ({
                 checked={checked}
                 theme={activeTheme}
             />
-            <OptionText
+            {labelPosition === 'right' && <OptionText
                 optionStyle={optionStyle}
                 inBuiltCss={defaultStyles}
+                labelPosition={labelPosition}
                 defaultOptionTextStyle={'toggle-switch-option-text'}
                 {...props}
             >
                 {checked ? trueLabel : falseLabel}
-            </OptionText>
+            </OptionText>}
         </CheckBoxWrapper>
     );
 };
@@ -142,9 +169,13 @@ ToggleSwitch.propTypes = {
      * */
     falseLabel: PropTypes.string,
     /**
-    *	id of the Toggle switch
-    */
+     *	id of the Toggle switch
+     */
     id: PropTypes.string,
+    /**
+     * label position i.e:- left or right
+     */
+    labelPosition: PropTypes.string
 };
 
 ToggleSwitch.defaultProps = {
@@ -153,5 +184,6 @@ ToggleSwitch.defaultProps = {
     falseLabel: 'No',
     customSwitchStyle: {},
     customToggleBoxStyle: {},
-    id: ''
+    id: '',
+    labelPosition: 'right',
 };

package/components/Sidebar/Navbar.js

@@ -101,6 +101,8 @@ export const Navbar = ({
     listElementStyle,
     customSelectCardColor,
     user,
+    firstBottomContent,
+    secondBottomContent,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -287,12 +289,13 @@ export const Navbar = ({
                         >
                             <ListElementFooter
                                 listElementStyle={listElementStyle}
-                                onClick={() => { }}
                             >
-                                <p>Change Password</p>
+                                {firstBottomContent}
+
                             </ListElementFooter>
                             <ListElementFooter onClick={() => { }}>
-                                <p>Sign Out</p>
+
+                                {secondBottomContent}
                             </ListElementFooter>
                         </div>
                     }

package/components/Sidebar/Sidebar.js

@@ -198,4 +198,10 @@ Sidebar.propTypes = {
      * Component to pin the sidebar on large screen
      */
     pinner: PropTypes.any,
+};
+
+
+Sidebar.defaultProps = {
+    forceClose: () => { },
+    forceOpen: false,
 };

package/components/constants/defaultStyle.js

@@ -132,6 +132,7 @@ const defaultStyles = {
         'align-items': 'center',
         'line-height': '.5rem',
         'background-color': `${defaultThemeColor['bgColor']}`,
+        position: 'relative'
     },
     /**
      * Default Style of the input wrapper
@@ -145,6 +146,9 @@ const defaultStyles = {
         'font-size': '14px',
         'flex-grow': '1',
         'flex-shrink': '0',
+        'white-space': 'nowrap',
+        'overflow': 'hidden',
+        'text-overflow': 'ellipsis',
     },
     'textarea-wrapper': {
         border: '0',
@@ -344,6 +348,7 @@ const defaultStyles = {
      */
     'checkBox-outer': {
         border: `2px solid ${defaultThemeColor.border}`,
+        minWidth: '20px',
         width: '20px',
         height: '20px',
         'border-radius': '3px',
@@ -353,6 +358,7 @@ const defaultStyles = {
     'checkBox-inner': {
         'background-repeat': 'no-repeat',
         'background-position': 'center',
+        minWidth: '20px',
         width: '20px',
         height: '20px',
         color: `${defaultThemeColor.bgColor}`,
@@ -389,7 +395,6 @@ const defaultStyles = {
         // 'background-color': `${defaultThemeColor.bgColor}`,
         color: `${defaultThemeColor.neutral['neutral-1']}`,
         'font-size': '16px',
-        'margin-right': '30px',
     },
     /**
      * Default Style of the dropZone component