groundfloor-react-ui 1.0.5 → 1.0.8

package/components/Form/FormComponent.js

@@ -1,18 +1,31 @@
-import React, { Fragment } from 'react'
-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, MultiColumnDiv, MultiColumnWrapper } from '../DesignComponent';
-
-
+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/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;
     }
 `;