groundfloor-react-ui 1.0.2 → 1.0.3

package/components/Footer/FooterContent.js

@@ -15,6 +15,7 @@ const StyledOutsideContainer = styled.div`
     padding:28px 30.5px 28px 30.5px;
     font-family: 'Averta', sans-serif;
     cursor: default;
+    width:inherit;
     ${({ footerWidth }) => {
         if (footerWidth < 650) {
             return css`

package/components/Inputs/DropdownSelect.js

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Select, { components } from 'react-select';
+import Select, { components } from "react-select";
 import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
-import { Icon } from '../Icon';
+import { Icon } from "../Icon";
+// import { LoadingIndicatorProps } from 'react-select';
 
 const Wrapper = styled.div`
 
-
-
-
-
-
     .master-dropdown,
     .new-select {
         .master-dropdown__menu,
@@ -60,10 +56,8 @@ const Wrapper = styled.div`
 
         .master-dropdown__control,
         .new-select__control {
-            border:${({ isValid }) =>
-    !isValid
-      ? '0.5px solid ' + defaultThemeColor.ui['error']
-      : '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
+            border:${({ isValid, }) => !isValid ? '0.5px solid ' + defaultThemeColor.ui['error'] :
+    '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
         }
 
         .master-dropdown__option,
@@ -89,10 +83,7 @@ const Wrapper = styled.div`
        
         .new-select__control:hover,
         .new-select__control--is-focused {
-            border: ${({ isValid }) =>
-    !isValid
-      ? '0.5px solid ' + defaultThemeColor.ui['error']
-      : '0.5px solid ' + defaultThemeColor.primary['primary-1']};
+            border: ${({ isValid, }) => !isValid ? '0.5px solid ' + defaultThemeColor.ui['error'] : '0.5px solid ' + defaultThemeColor.primary['primary-1']};
             box-shadow: none;
         }
       
@@ -155,70 +146,66 @@ const Wrapper = styled.div`
         .new-select__menu {
             z-Index: 2;    
         }
-        .css-1n10ic4-Input {
-            margin: 0px;
-            padding:0px
+      
+        .new-select__input-container{
+            margin:0px;
+            padding:0px;
         }
-    
-`;
+        .new-select__input{
+            margin:0px;
+            padding:0px;
+        }
+`
+
 
 const LabelWrapper = styled.div`
-  // Default style
-  display: flex;
+
+   // Default style
+   display: flex;
+
 
   //Set the styles from the default styles object
-  ${({ theme, labelWrapperStyle }) => {
+    ${({ theme, labelWrapperStyle }) => {
     return getDefaultStyles(theme, labelWrapperStyle);
   }}
-  // custom styles
+    // custom styles
     ${({ customLabelStyles }) => customLabelStyles}
-`;
+`
 const IconDiv = styled.div`
-  margin-left: 6px;
-  margin-top: -14px;
-  cursor: pointer;
+    margin-left: 6px;
+    margin-top:-14px;
+    cursor:pointer;
 `;
 
-export const DropdownSelect = ({
-  customWrapperStyles,
-  customLabelStyles,
-  labelStyle,
-  label,
-  isRequired,
-  optionArr,
-  selectedValue,
-  setSelectedValue,
-  placeHolder,
-  dropdownType,
-  isDisabled,
-  isValid,
-  clearSelected,
-  isClearSelected,
-  isLoading,
-  height,
-  placeholderSize,
-  ...props
-}) => {
-  const DropdownIndicator = (p) => {
+export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelStyle, label, isRequired, optionArr, selectedValue, setSelectedValue, placeHolder, dropdownType, isDisabled, isValid, clearSelected, isClearSelected, isLoading, height, placeholderSize, ...props }) => {
+  const DropdownIndicator = p => {
     return (
       <components.DropdownIndicator {...p}>
-        {isClearSelected == true ? (
-          <IconDiv
-            onClick={() => {
-              clearSelected();
-            }}
-          >
-            <Icon icon='cross-icon' color={'black'} size={8} />
+        {isClearSelected == true ?
+          <IconDiv onClick={() => { clearSelected() }}>
+            <Icon icon='cross-icon'
+              color={'black'}
+              size={8} />
           </IconDiv>
-        ) : null}
+          : null}
         <IconDiv>
-          <Icon icon='triangle-down' color={'black'} size={8} />
+          <Icon icon='triangle-down'
+            color={'black'}
+            size={8} />
         </IconDiv>
       </components.DropdownIndicator>
     );
   };
 
-  const Option = (p) => {
+  // const LoadingIndicator = (LoadingIndicatorProps) => {
+  //     return (
+  //         <div className='custom-loader'>
+  //             <Icon icon='arrow-rotate' color='black' />
+  //         </div>
+  //     );
+  // };
+
+  const Option = p => {
     const checkboxStyle = {
       width: '15px',
       height: '15px',
@@ -228,28 +215,16 @@ export const DropdownSelect = ({
       lineHeight: '10px',
     };
     const checked = (
-      <div
-        style={{
-          ...checkboxStyle,
-          backgroundColor: p?.data?.color ?? '#2E56F4',
-        }}
-      >
+      <div style={{ ...checkboxStyle, backgroundColor: p?.data?.color ?? '#2E56F4' }}>
         <Icon icon='check-icon' color='white' />
       </div>
-    );
+    )
     const unchecked = (
-      <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }}></div>
-    );
+      <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }} ></div>
+    )
     return (
       <components.Option {...p}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'start',
-            alignItems: 'center',
-            width: '100%',
-          }}
-        >
+        <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', width: '100%' }}>
           {p.isSelected ? checked : unchecked}
           <div className='text-main-alt' style={{ marginLeft: '10px' }}>
             {p.label}
@@ -259,52 +234,81 @@ export const DropdownSelect = ({
     );
   };
 
+  // const ValueContainer = p => {
+  //     if (props.value.length < 1) {
+  //         return (
+  //             <components.ValueContainer {...p}>
+  //                 {p.children}
+  //             </components.ValueContainer>
+  //         );
+  //     }
+  //     let firstSelected = props.value[0].label;
+  //     let moreComp = (
+  //         <div className='ml-auto'>
+  //             &amp; {props.value.length - 1} more
+  //         </div>
+  //     )
+  //     return (
+  //         <components.ValueContainer {...p}>
+  //             <div className="d-flex w-100">
+  //                 <div>
+  //                     {firstSelected}
+  //                 </div>
+  //                 {props.value.length > 1 && moreComp}
+  //             </div>
+  //         </components.ValueContainer>
+  //     );
+  // };
+
   const MultiValue = ({ getValue, index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
-    const len = getValue().length;
-    return (
-      !index && (
-        <div className='multiValue-wrapper'>
-          <div className='text-main-alt'>{firstSelected}</div>
-          {len > 1 && (
-            <div className={`text-more-alt`}>&amp; {len - 1} more</div>
-          )}
+    const len = getValue().length
+    return !index && (
+      <div className='multiValue-wrapper'>
+        <div className='text-main-alt'>
+          {firstSelected}
         </div>
-      )
-    );
-  };
+        {len > 1 && <div className={`text-more-alt`}>
+          &amp; {len - 1} more
+        </div>}
+      </div>
+    )
+  }
+
+
 
   const stylesComp = {
-    control: (base) => ({
+
+    control: base => ({
       ...base,
       border: '1px solid #d4d7e3',
       height: `${height}px`,
       minHeight: `${height}px`,
       minWidth: '226px',
     }),
-    placeholder: (base) => ({
+    placeholder: base => ({
       ...base,
       fontSize: placeholderSize + 'px',
-      marginLeft: '0px',
+      marginLeft: '0px'
     }),
-    dropdownIndicator: (base) => ({
+    dropdownIndicator: base => ({
       ...base,
       height: `${height}px`,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
     }),
-    valueContainer: (base) => ({
+    valueContainer: base => ({
       ...base,
       height: `${height}px`,
-      padding: '7px 8px',
+      padding: '7px 8px'
     }),
-    indicatorsContainer: (base) => ({
+    indicatorsContainer: base => ({
       ...base,
       padding: 0,
       height: `${height}px`,
     }),
-    menu: (base) => ({
+    menu: base => ({
       ...base,
       border: 'none',
       marginTop: '1px',
@@ -313,92 +317,59 @@ export const DropdownSelect = ({
       outline: 'none',
       boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
       borderRadius: '4.32px',
-      fontSize: '14px',
+      fontSize: '14px'
+
     }),
-    singleValue: (base) => ({
+    singleValue: base => ({
       ...base,
       fontSize: '14px',
-      marginLeft: '0px',
+      marginLeft: '0px'
     }),
-    input: (base) => ({
+    input: base => ({
       ...base,
       fontSize: '14px',
     }),
     option: (provided, state) => ({
       ...provided,
-      backgroundColor:
-        state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
+      backgroundColor: state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
       padding: '10px',
       cursor: 'pointer',
-      color: '#081348',
+      color: '#081348'
     }),
     ...props.styles,
-  };
+  }
   return (
-    <Wrapper
-      style={customWrapperStyles}
-      isValid={isValid}
-      placeholderSize={placeholderSize}
+    <Wrapper style={customWrapperStyles} isValid={isValid} placeholderSize={placeholderSize}
     >
-      {label && (
-        <LabelWrapper
-          theme={defaultStyles}
-          labelWrapperStyle={'selectComp-label-wrapper'}
-          style={customLabelStyles}
-        >
-          <Label
-            themeColor={defaultThemeColor}
-            customStyles={labelStyle}
-            type={'label-text'}
-            text={label}
-            style={{ marginBottom: '7px' }}
-          />
-          {isRequired && (
-            <div
-              style={{
-                marginLeft: '4px',
-                color: `${defaultThemeColor.ui['error']}`,
-              }}
-            >
-              *
-            </div>
-          )}
-        </LabelWrapper>
-      )}
-      {dropdownType === 'singleSelect' ? (
-        <Select
-          components={{
-            DropdownIndicator,
-            IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
-          }}
-          className='select-manage-page'
-          classNamePrefix='new-select'
-          name={'select-dropdown mb-1'}
-          options={optionArr}
-          placeholder={placeHolder}
-          isDisabled={isDisabled}
-          value={{
-            value: selectedValue ? selectedValue.value : '',
-            label: selectedValue ? selectedValue.label : '',
-          }}
-          styles={stylesComp}
-          onChange={setSelectedValue}
-          isLoading={isLoading}
-          {...props}
+
+      {label && <LabelWrapper theme={defaultStyles}
+        labelWrapperStyle={'selectComp-label-wrapper'} style={customLabelStyles}>
+        <Label
+          themeColor={defaultThemeColor}
+          customStyles={labelStyle}
+          type={'label-text'}
+          text={label}
+          style={{ marginBottom: '7px' }}
         />
-      ) : (
+        {isRequired && <div style={{
+          marginLeft: '4px',
+          color: `${defaultThemeColor.ui['error']}`
+        }} >*</div>}
+      </LabelWrapper>}
+      {dropdownType === 'multiSelect' ?
+
         <Select
           components={{
             DropdownIndicator,
             MultiValue,
             Option,
+            // LoadingIndicator: () => null,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator: () => null
           }}
-          className='select-manage-page'
-          classNamePrefix='new-select'
-          name={'select-dropdown mb-1'}
+          className="select-manage-page"
+          classNamePrefix="new-select"
+          name={"select-dropdown mb-1"}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           value={selectedValue}
@@ -412,12 +383,38 @@ export const DropdownSelect = ({
           onMenuClose={props.onMenuClose}
           isSearchable={false}
           isLoading={isLoading}
+
+          {...props}
+        /> :
+        <Select
+          components={{
+            DropdownIndicator,
+            // LoadingIndicator,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null
+          }}
+          className="select-manage-page"
+          // className="new-select"
+          classNamePrefix="new-select"
+          name={"select-dropdown"}
+          options={optionArr}
+          placeholder={placeHolder}
+          isDisabled={isDisabled}
+          value={{
+            value: selectedValue ? selectedValue.value : '',
+            label: selectedValue ? selectedValue.label : ''
+          }}
+          styles={stylesComp}
+          onChange={setSelectedValue}
+          isLoading={isLoading}
           {...props}
         />
-      )}
+
+
+      }
     </Wrapper>
-  );
-};
+  )
+}
 
 DropdownSelect.propTypes = {
   /**
@@ -433,12 +430,12 @@ DropdownSelect.propTypes = {
    */
   optionArr: PropTypes.array,
   /**
-     *	SelectBox Selected value. This is a array of object must be with this format:
-        [{
-            label:string,
-            value:string
-        }]
-     */
+   *	SelectBox Selected value. This is a array of object must be with this format:
+      [{
+          label:string,
+          value:string
+      }]
+   */
   selectedValue: PropTypes.object,
   /**
    *	Function to set selected value
@@ -449,14 +446,14 @@ DropdownSelect.propTypes = {
    */
   placeHolder: PropTypes.string,
   /**
-   *	SelectBox Placeholder's font size
-   */
+  *	SelectBox Placeholder's font size
+  */
   placeholderSize: PropTypes.number,
   /**
-   *   This Function will be called if cross button pressed
-   */
+    *   This Function will be called if cross button pressed
+    */
   clearSelected: PropTypes.func,
-};
+}
 
 DropdownSelect.defaultProps = {
   label: '',
@@ -468,5 +465,5 @@ DropdownSelect.defaultProps = {
   isValid: true,
   isClearSelected: false,
   height: 31,
-  placeholderSize: 14,
-};
+  placeholderSize: 14
+}

package/components/Inputs/DropzoneInput.js

@@ -101,10 +101,8 @@ color: #494949;
 display: flex;
 justify-content: center;
 align-items: center;
-max-width: 514px;
 margin:20px 0px;
 font-size: 14px;
-
 `
 
 export const DropzoneInput = ({
@@ -306,8 +304,8 @@ export const DropzoneInput = ({
                     )}
                 </TextDiv>
             </ParentDiv>
-            <AdditionalText>{additionalText}</AdditionalText>
-            {fileArr?.map((item, i) => {
+            {additionalText.length > 0 && <AdditionalText>{additionalText}</AdditionalText>
+            }      {fileArr?.map((item, i) => {
                 return (
                     <FileDiv
                         theme={defaultStyles}

package/components/Modal/ModalComp.js

@@ -9,7 +9,8 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 
 const customStyles = {
   overlay: {
-    zIndex: '999',
+    zIndex: '999999',
+    backgroundColor: 'rgb(0 0 0 / 30%)'
   },
   content: {
     borderColor: defaultThemeColor.border,
@@ -20,7 +21,7 @@ const customStyles = {
     marginRight: '-50%',
     padding: '0px',
     transform: 'translate(-50%, -50%)',
-    maxHeight: '75vh',
+    maxHeight: '75vh'
   },
 };
 
@@ -72,7 +73,7 @@ const ModalFooter = styled.div`
 `;
 
 const CommonDiv = styled.div`
-      padding: 1rem 3rem 0rem 3rem;
+      padding: 2rem 3rem 0rem 3rem;
 `;
 
 Modal.setAppElement('#root');
@@ -188,4 +189,4 @@ ModalComp.defaultProps = {
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
   customModalFooterStyle: {},
-};
+};

package/components/constants/defaultStyle.js

@@ -396,8 +396,7 @@ const defaultStyles = {
      * Default Style of the dropZone component
      */
     'dropzone-parent': {
-        'width': 'inherit',
-        'max-width': '514px',
+        'width': '100%',
         'height': '86px',
         'padding-left': '8px',
         'padding-right': '8px',
@@ -410,7 +409,6 @@ const defaultStyles = {
     },
     'dropzone-file-div': {
         'width': 'inherit',
-        'max-width': '532px',
         'height': '38px',
         'display': 'flex',
         'justify-content': 'center',
@@ -745,7 +743,7 @@ const defaultStyles = {
         cursor: 'pointer'
     },
     'modalComp-modal-body': {
-        'margin-top': '30px',
+        'margin-top': '20px',
         'margin-bottom': '15px',
     },
     'modalComp-modal-footer': {