groundfloor-react-ui 1.0.2 → 1.0.5

package/components/{Form → DesignComponent/StyledComponent}/StyledComponent.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 import styled from "styled-components";
 
 export const PageContent = styled.div`
@@ -21,7 +20,7 @@ export const StyledRowSearch = styled.div`
   width: 100%;
   padding: 25px;
   column-gap: 18px;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   background: linear-gradient(
     0deg,
@@ -61,7 +60,7 @@ export const StyledRowSearch = styled.div`
 
   & label {
     font-size: 14px;
-    // padding-bottom: 10px;
+    padding-bottom: 10px;
     margin-bottom: 0;
   }
 
@@ -118,7 +117,7 @@ export const StyledClearSearch = styled.span`
 export const StyledCentralBar = styled.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  ${'' /* flex-grow: 1; */}
   max-width: 1340px;
   width: 100%;
   align-items: center;
@@ -204,8 +203,6 @@ export const ActionItem = styled.div`
 
 export const FormContainer = styled.div`
   position: relative;
-  padding: 25px;
-  z-index: 2;
   display: flex;
   width: 100%;
   column-gap: 18px;
@@ -217,8 +214,7 @@ export const FormContainer = styled.div`
     hsla(0, 0%, 100%, 0.5) 100%
   );
   border-radius: 6px;
-  // margin-bottom: 25px;
-
+  
   @media (max-width: 900px) {
     flex-wrap: wrap;
     height: fit-content;
@@ -251,7 +247,7 @@ export const FormContainer = styled.div`
 
   & label {
     font-size: 14px;
-    // padding-bottom: 10px;
+    padding-bottom: 10px;
     margin-bottom: 0;
   }
 
@@ -294,7 +290,7 @@ export const FormContainer = styled.div`
 `;
 
 export const FormWrapper = styled.form`
-  width: 100%;
+  width: 40vw;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -303,21 +299,20 @@ export const FormWrapper = styled.form`
 
 export const SubmitButtonContainer = styled.div`
   display: flex;
-  justify-content: center;
-  
-  // custom styles
-    ${({ style }) => style}
+  justify-content: end;
 `;
 
 export const MultiColumnWrapper = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: row;
-{/*align-items: center;*/}
+  align-items: flex-start;
   gap: 20px;
 `;
 
 export const MultiColumnDiv = styled.div`
-  width:50%;
-    width:  ${({ cols }) => { Math.floor(100 / cols) + '%' }};
+  width: 48;
+  max-width: 48%;
+  min-width: 48%;
+  
 `;

package/components/DesignComponent/StyledComponent/index.js

@@ -0,0 +1 @@
+export * from './StyledComponent';

package/components/DesignComponent/index.js

@@ -0,0 +1 @@
+export * from './StyledComponent';

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/Form/FormComponent.js

@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react'
-import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv } from './StyledComponent';
 import defaultThemeColor from '../constants/defaultThemeColor'
 import { Header } from '../Header';
 import { Label } from '../Label';
 import { CheckBoxInput, DateSelect, DropdownSelect, DropzoneInput, NumericInput, RadioInput, SearchInput, SignatureInput, TextArea, TextInput, ToggleSwitch } from '../Inputs';
 import { Rating } from '../Rating';
 import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
+import { FormContainer, FormWrapper, MultiColumnDiv, MultiColumnWrapper } from '../DesignComponent';
 
 
 
@@ -34,7 +34,7 @@ export const FormComponent = ({ formData, ...props }) => {
               text={item.text}
               {...props}
               style={{ marginBottom: '7px' }}
-               />
+            />
           </MultiColumnDiv>
           <MultiColumnDiv>
             <pre>
@@ -48,7 +48,7 @@ export const FormComponent = ({ formData, ...props }) => {
   const label = (item) => {
     return (
       <Label
-      style={{ marginBottom: '7px' }}
+        style={{ marginBottom: '7px' }}
         {...item}
         {...props}
       />

package/components/Form/SubmitComponent.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react'
 import { PrimaryButton, SecondaryButton } from '../Button';
-import { SubmitButtonContainer } from './StyledComponent';
+import { SubmitButtonContainer } from '../DesignComponent';
 
 
 export const SubmitComponent = ({ formData, onSubmit, onReset, style, ...props }) => {

package/components/Form/index.js

@@ -1,4 +1,3 @@
 export * from './FormComponent';
 export * from './HeaderComponent';
 export * from './SubmitComponent';
-export * from './StyledComponent';

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,71 @@ 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;
+        }
+        .css-eehvce-Input{
+          margin:0px;
+          padding:0px;
+          line-height:1.3;
+      }
+`
+
 
 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 +220,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 +239,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 +322,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 +388,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 +435,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 +451,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 +470,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}