groundfloor-react-ui 1.0.4 → 1.0.7

package/assets/icons/file-icon.svg

@@ -0,0 +1 @@
+<svg id="b2bc64ed-393d-4e15-8787-df9ec8050d97" data-name="ae65933b-c6e6-4b40-868c-58201eab117d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.4 24"><defs><style>.bb405ea1-9d39-4705-a069-9048c97b4cda{fill:#2e56f4;}.accb9cd8-805e-4c9f-9b46-25d8ccc4d9c0{isolation:isolate;font-size:9.07px;fill:#fff;font-family:AvertaCY-Extrabold, Averta CY;font-weight:800;letter-spacing:0.04em;}</style></defs><path class="bb405ea1-9d39-4705-a069-9048c97b4cda" d="M20.1,8.5h-.6V5.6h0c0-.2-.1-.3-.1-.4L14.6,0H2.8a.9.9,0,0,0-.9.9h0V8.5H1.3A1.3,1.3,0,0,0,0,9.8H0v7a1.3,1.3,0,0,0,1.2,1.4h.7v4.9a.9.9,0,0,0,.9.9H18.5a1,1,0,0,0,1-.8h0v-5h.6a1.3,1.3,0,0,0,1.3-1.3h0v-7a1.3,1.3,0,0,0-1.3-1.3ZM18.5,22.8H2.8V18.2H18.5Zm0-14.3H2.8V.7h11V5.6c.1.3.3.5.5.4h4.2Z"/><text class="accb9cd8-805e-4c9f-9b46-25d8ccc4d9c0" transform="translate(0.8 16.6)">FILE</text></svg>

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

@@ -1,18 +1,31 @@
-import React, { Fragment } from 'react'
-import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv } from './StyledComponent';
-import defaultThemeColor from '../constants/defaultThemeColor'
+import React, { Fragment } from 'react';
+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 {
+  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,
+  MultiColumnWrapper,
+  MultiColumnDiv,
+} from '../DesignComponent';
 
 export const FormComponent = ({ formData, ...props }) => {
-
   const header = (item) => {
-
     return (
       <Fragment>
         <Header {...item} {...props}>
@@ -20,9 +33,8 @@ export const FormComponent = ({ formData, ...props }) => {
         </Header>
         {item}
       </Fragment>
-
-    )
-  }
+    );
+  };
 
   const labelWithJSon = (item) => {
     return (
@@ -33,222 +45,140 @@ export const FormComponent = ({ formData, ...props }) => {
               customStyles={item.customStyles}
               text={item.text}
               {...props}
-              style={{ marginBottom: '7px' }}
-               />
+              style={{
+                marginBottom: '7px',
+                paddingBottom: '0',
+              }}
+            />
           </MultiColumnDiv>
           <MultiColumnDiv>
-            <pre>
-              {JSON.stringify(item, null, 4)}
-            </pre>
+            <pre>{JSON.stringify(item, null, 4)}</pre>
           </MultiColumnDiv>
         </MultiColumnWrapper>
       </Fragment>
-    )
-  }
+    );
+  };
   const label = (item) => {
     return (
       <Label
-      style={{ marginBottom: '7px' }}
+        style={{ marginBottom: '7px', paddingBottom: '0' }}
         {...item}
         {...props}
       />
-    )
-  }
+    );
+  };
   const textInput = (item) => {
-    return (
-      <TextInput
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <TextInput {...item} {...props} />;
+  };
 
   const textAreaInput = (item) => {
-    return (
-      <TextArea
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <TextArea {...item} {...props} />;
+  };
 
   const NumberInput = (item) => {
-    return (
-      <NumericInput
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <NumericInput {...item} {...props} />;
+  };
 
   const radioInput = (item) => {
-    return (
-      <RadioInput
-        key={Math.random() * 101 | 0}
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <RadioInput key={(Math.random() * 101) | 0} {...item} {...props} />;
+  };
 
   const checkBoxInput = (item) => {
-    return (
-      <CheckBoxInput
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <CheckBoxInput {...item} {...props} />;
+  };
 
   const SingleDropdownInput = (item) => {
     return (
-      <DropdownSelect
-        dropdownType={'singleSelect'}
-        {...item}
-        {...props}
-      />
-    )
-  }
+      <DropdownSelect dropdownType={'singleSelect'} {...item} {...props} />
+    );
+  };
 
   const MultiDropdownInput = (item) => {
-    return (
-      <DropdownSelect
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <DropdownSelect {...item} {...props} />;
+  };
 
   const signatureInput = (item) => {
-    return (
-      <SignatureInput
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <SignatureInput {...item} {...props} />;
+  };
 
   const fileUploadInput = (item) => {
-
-    return (
-      <DropzoneInput
-        {...item}
-        {...props} />
-    )
-  }
+    return <DropzoneInput {...item} {...props} />;
+  };
 
   const dateInput = (item) => {
-    return (
-      <DateSelect
-        {...item}
-        {...props} />
-    )
-  }
+    return <DateSelect {...item} {...props} />;
+  };
 
   const toggleSwitch = (item) => {
-    return (
-      <ToggleSwitch
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <ToggleSwitch {...item} {...props} />;
+  };
 
   const ratingInput = (item) => {
-    return (
-      <Rating
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <Rating {...item} {...props} />;
+  };
 
   const primaryButton = (item) => {
-    return (
-      <PrimaryButton
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <PrimaryButton {...item} {...props} />;
+  };
 
   const secondaryButton = (item) => {
-    return (
-      <SecondaryButton
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <SecondaryButton {...item} {...props} />;
+  };
 
   const tinyButton = (item) => {
-    return (
-      <TinyButton
-        {...item}
-        {...props}
-      />
-    )
-  }
+    return <TinyButton {...item} {...props} />;
+  };
 
   const searchInput = (item) => {
-    return (
-      <SearchInput
-        {...item}
-        {...props}
-      />
-    )
-  }
-
-
+    return <SearchInput {...item} {...props} />;
+  };
 
   const handleSubmit = () => {
-    console.log("form submit");
-  }
+    console.log('form submit');
+  };
 
   const returnComponent = (item) => {
     switch (item.type) {
-      case "header":
-        return header(item)
-      case "label":
-        return label(item)
-      case "text":
-        return textInput(item)
-      case "textArea":
-        return textAreaInput(item)
-      case "number":
-        return NumberInput(item)
-      case "radio":
-        return radioInput(item)
-      case "checkBox":
-        return checkBoxInput(item)
-      case "singleSelect":
-        return SingleDropdownInput(item)
-      case "multiSelect":
-        return MultiDropdownInput(item)
-      case "signature":
-        return signatureInput(item)
-      case "fileUpload":
-        return fileUploadInput(item)
-      case "date":
-        return dateInput(item)
-      case "toggle":
-        return toggleSwitch(item)
-      case "rating":
-        return ratingInput(item)
-      case "buttonPrimary":
-        return primaryButton(item)
-      case "buttonSecondary":
-        return secondaryButton(item)
-      case "buttonTiny":
-        return tinyButton(item)
-      case "search":
-        return searchInput(item)
+      case 'header':
+        return header(item);
+      case 'label':
+        return label(item);
+      case 'text':
+        return textInput(item);
+      case 'textArea':
+        return textAreaInput(item);
+      case 'number':
+        return NumberInput(item);
+      case 'radio':
+        return radioInput(item);
+      case 'checkBox':
+        return checkBoxInput(item);
+      case 'singleSelect':
+        return SingleDropdownInput(item);
+      case 'multiSelect':
+        return MultiDropdownInput(item);
+      case 'signature':
+        return signatureInput(item);
+      case 'fileUpload':
+        return fileUploadInput(item);
+      case 'date':
+        return dateInput(item);
+      case 'toggle':
+        return toggleSwitch(item);
+      case 'rating':
+        return ratingInput(item);
+      case 'buttonPrimary':
+        return primaryButton(item);
+      case 'buttonSecondary':
+        return secondaryButton(item);
+      case 'buttonTiny':
+        return tinyButton(item);
+      case 'search':
+        return searchInput(item);
       default:
         break;
     }
-  }
-
-
+  };
 
   return (
     <Fragment>
@@ -256,21 +186,23 @@ export const FormComponent = ({ formData, ...props }) => {
         <FormWrapper onSubmit={handleSubmit}>
           {formData.map((row, i) => {
             if (row.length > 1) {
-              return <MultiColumnWrapper>
-                {row.map((item, j) => {
-                  return <MultiColumnDiv cols={row.length}>
-                    {returnComponent(item)}
-                  </MultiColumnDiv>
-                })}
-              </MultiColumnWrapper>
+              return (
+                <MultiColumnWrapper>
+                  {row.map((item, j) => {
+                    return (
+                      <MultiColumnDiv cols={row.length}>
+                        {returnComponent(item)}
+                      </MultiColumnDiv>
+                    );
+                  })}
+                </MultiColumnWrapper>
+              );
             } else {
               return returnComponent(row[0]);
             }
           })}
-
         </FormWrapper>
       </FormContainer>
     </Fragment>
-  )
-}
-
+  );
+};

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/Icon/Icon.js

@@ -48,6 +48,7 @@ import watcher from '../../assets/icons/watcher.svg'
 import fileUpload from '../../assets/icons/file-upload.svg'
 import eyeHide from '../../assets/icons/eye-hide.svg'
 import eyeView from '../../assets/icons/eye-hide-view.svg'
+import fileIcon from '../../assets/icons/file-icon.svg'
 
 
 /** icon name should be kebab-case, e.g "plus-outline" */
@@ -94,7 +95,8 @@ const iconObj = {
     'user-icon': user,
     'file-upload': fileUpload,
     'eye-hide': eyeHide,
-    'eye-show': eyeView
+    'eye-show': eyeView,
+    'file-icon': fileIcon,
 }
 
 const StyledSVGIcon = styled(ReactSVG)`
@@ -135,6 +137,7 @@ const StyledSVGIcon = styled(ReactSVG)`
             outline: none;
             border:none;
         }
+        vertical-align: initial;
     }
 `;
 

package/components/Inputs/CheckBoxInput.js

@@ -5,10 +5,13 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
-import tick from '../../assets/icons/checkmark.svg';
-
+// import tick from '../../assets/icons/checkmark.svg';
+import { Icon } from '../Icon'
 
 const CheckBoxOuter = styled.div`
+
+    box-sizing:initial;
+
     //Set the styles from the default styles object
     ${({ theme, defaultCheckBoxOuterStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxOuterStyle);
@@ -21,22 +24,27 @@ const CheckBoxOuter = styled.div`
 `;
 
 const CheckBoxInner = styled.div`
+    
+    box-sizing:initial;
+
     //Set the styles from the default styles object
     ${({ theme, defaultCheckBoxInnerStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxInnerStyle);
     }}
     
-    background-image: url(${({ signCheck }) => signCheck});
+    // background-image: url(${({ signCheck }) => signCheck});
     background-color: ${({ checked, checkedCheckBoxColor }) => checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
     border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
-    
+    display: flex;
+    justify-content: center;
+    align-items: center;
     // custom styles
     ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
     
 `;
 CheckBoxInner.defaultProps = {
     themeColor: defaultThemeColor,
-    signCheck: `${tick}`
+    // signCheck: `${tick}`
 }
 
 const OptionText = styled.span`
@@ -104,7 +112,9 @@ export const CheckBoxInput = ({ checkBoxOuterStyle, checkBoxInnerStyle, optionTe
                                 checkBoxInnerStyle={{ ...checkBoxInnerStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
                                 defaultBorderColor={defaultBorderColor}
                                 checkedCheckBoxColor={checkedCheckBoxColor}
-                                checked={!item?.disabled && item.checked} {...props} />
+                                checked={!item?.disabled && item.checked} {...props} >
+                                <Icon icon='check-icon' size={18} color='white' />
+                            </CheckBoxInner>
                             : <CheckBoxOuter
                                 theme={defaultStyles}
                                 defaultCheckBoxOuterStyle={'checkBox-outer'}
@@ -191,5 +201,4 @@ CheckBoxInput.defaultProps = {
     checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
     defaultBorderColor: '#D4D7E3',
     checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
-}
-
+}